upp

houtai/src/App.tsx

@@ -12,6 +12,7 @@ import store, { RootState } from "./store";
 import UpAsyncLoding from "./components/UpAsyncLoding";
 import VideoLookDom from "./components/VideoLookDom";
 import MessageCom from "./components/Message";
+import type {} from 'redux-thunk/extend-redux';
 const Layout = React.lazy(() => import("./pages/Layout"));
 const Login = React.lazy(() => import("./pages/Login"));
 

houtai/src/pages/B3Wall/WallTable/index.module.scss

@@ -1,9 +1,10 @@
 .WallTable {
-  height: 500px;
+  height: 350px;
   border-radius: 10px;
   background-color: #fff;
-  padding: 20px 15px 0;
-  height: calc(100% - 134px);
+  padding: 0px 15px 0;
+  margin-top: -10px;
+  // height: calc(50% - 134px);
 
   :global {
     .titleTxt {
@@ -23,7 +24,7 @@
       width: 1000px;
 
       .ant-table-body {
-        height: 560px;
+        height: 300px;
         overflow-y: auto !important;
         // overflow-y: overlay !important;
         .ant-table-row{

houtai/src/pages/B3Wall/WallTable/index.tsx

@@ -2,6 +2,7 @@ import { Button, Popconfirm, Switch, Table, Tooltip } from "antd";
 import React, {
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
@@ -62,6 +63,7 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
     [results.length, tablePageIdFu]
   );
 
+
   // 点击删除
   const delTableFu = useCallback(
     async (id: number) => {
@@ -225,7 +227,7 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
 
   return (
     <div className={styles.WallTable}>
-      <div className="titleTxt">
+      {/* <div className="titleTxt">
         临时展海报管理
         <Tooltip title="按住鼠标可拖动表格调整顺序">
           <div className="inco" hidden={results.length < 2}>
@@ -237,7 +239,7 @@ function WallTable({ tablePageIdFu, scrollNumInfo }: Props) {
             新增海报
           </Button>
         </div>
-      </div>
+      </div> */}
 
       {/* 表格主体 */}
       <div className="table">

houtai/src/pages/B3Wall/index.module.scss

@@ -34,7 +34,7 @@
       margin-bottom: 20px;
 
       .txt {
-        height: 60px;
+        height: 40px;
         display: flex;
         align-items: center;
       }

houtai/src/pages/B3Wall/index.tsx

@@ -3,7 +3,13 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import styles from "./index.module.scss";
 import dayjs from "dayjs";
-import { editWallAutoApi, getWallAutoApi } from "@/store/action/B3Wall";
+import {
+  editWallAutoApi,
+  editWallTypeApi,
+  getWallAutoApi,
+  getWallCategoryoApi,
+  getWallCategoryoListApi,
+} from "@/store/action/B3Wall";
 import { MessageFu } from "@/utils/message";
 import WallTable from "./WallTable";
 import WallAdd from "./WallAdd";
@@ -20,9 +26,31 @@ function Wall() {
     }
   }, []);
 
+  // 获取文物类别展示信息
+  const getWallCategoryApiFu = useCallback(async () => {
+    const res = await getWallCategoryoApi();
+    if (res.code === 0) {
+      const data = JSON.parse(res.data.content);
+      console.log(data);
+      setValueType(data.isAuto);
+      setTimeType0(data.startTime + "," + data.endTime);
+    }
+  }, []);
+
+  // 获取文物类别列表
+  const getWallCategoryListApiFu = useCallback(async () => {
+    const res = await getWallCategoryoListApi();
+    if (res.code === 0) {
+      console.log(res);
+      setTypes(res.data);
+    }
+  }, []);
+
   useEffect(() => {
     getWallAutoApiFu();
-  }, [getWallAutoApiFu]);
+    getWallCategoryApiFu();
+    getWallCategoryListApiFu();
+  }, [getWallAutoApiFu, getWallCategoryApiFu, getWallCategoryListApiFu]);
 
   // 场景管理的编辑
   const [edit, setEdit] = useState(false);
@@ -39,19 +67,48 @@ function Wall() {
   // 自动轮播时间的修改
   const [time1, setTime1] = useState<string[]>([]);
 
-  // 点击修改
+  // 场景管理的编辑
+  const [editType, setEditType] = useState(false);
+
+  // 文物类型开启关闭的展示
+  const [valueType, setValueType] = useState(-1);
+
+  // 文物类型开启关闭的修改
+  const [value2, setValue2] = useState(0);
+
+  // 文物类型时间的展示
+  const [timeType0, setTimeType0] = useState(" , ");
+
+  // 文物类型时间的修改
+  const [timeType1, setTimeType1] = useState<string[]>([]);
+
+  // 文物类型列表
+  const [types, setTypes] = useState([]);
+
+  // 点击修改(海报/场景)
   const editAutoPlay = useCallback(() => {
     setValue1(value0);
     setTime1(time0.split(","));
     setEdit(true);
   }, [time0, value0]);
 
+  // 点击修改(文物类别)
+  const editTypeFu = useCallback(() => {
+    setValue2(valueType);
+    setTimeType1(timeType0.split(","));
+    setEditType(true);
+  }, [timeType0, valueType]);
+
   // 时间选择器改变
   const timeChange = (date: any, dateString: any) => {
     setTime1(dateString);
   };
+  // 时间选择器改变
+  //  const timeTyoChange = (date: any, dateString: any) => {
+  //   setTime1(dateString);
+  // };
 
-  // 点击确定
+  // 点击确定 (海报/场景)
   const btnOk = useCallback(async () => {
     const obj = {
       endTime: time1[1],
@@ -67,6 +124,22 @@ function Wall() {
     setEdit(false);
   }, [getWallAutoApiFu, time1, value1]);
 
+  // 点击确定 (类别)
+  const btnOkType = useCallback(async () => {
+    const obj = {
+      endTime: timeType1[1],
+      startTime: timeType1[0],
+      isAuto: value2,
+    };
+
+    const res: any = await editWallTypeApi({ content: JSON.stringify(obj) });
+    if (res.code === 0) {
+      MessageFu.success("修改成功!");
+      getWallCategoryApiFu();
+    }
+    setEdit(false);
+  }, [getWallCategoryApiFu, timeType1, value2]);
+
   // 点击新增或者编辑
   const [editId, setEditId] = useState(0);
 
@@ -80,6 +153,13 @@ function Wall() {
     setEditId(id);
   }, []);
 
+  // 新增海报
+  const editTableFu = useCallback(() => {
+    // 获取当前表格的滚动位置
+    const dom: any = document.querySelector("#wallTable .ant-table-body");
+    tablePageIdFu(-1, dom.scrollTop);
+  }, [tablePageIdFu]);
+
   // 从新增/编辑页面点击取消或者提交
   const closeWallAddFu = useCallback((txt: string) => {
     scrollRef.current = { ...scrollRef.current, txt };
@@ -97,12 +177,12 @@ function Wall() {
         <>
           <div className="wallTopBox">
             <div className="titleTxt">
-              场景管理
-              <Tooltip title="当超过15秒未操作时，将在场景&emsp;&emsp;讲述/游览/赏析/临时展&emsp;&emsp;间循环播放，每个场景播放30秒">
+              海报展示管理
+              {/* <Tooltip title="当超过15秒未操作时，将在场景&emsp;&emsp;讲述/游览/赏析/临时展&emsp;&emsp;间循环播放，每个场景播放30秒">
                 <div className="inco">
                   <ExclamationCircleFilled />
                 </div>
-              </Tooltip>
+              </Tooltip> */}
             </div>
             {edit ? (
               // 修改信息
@@ -150,14 +230,86 @@ function Wall() {
                 <Button type="primary" onClick={editAutoPlay}>
                   修改
                 </Button>
+                <Button
+                  type="primary"
+                  onClick={editTableFu}
+                  style={{ marginLeft: "10px" }}
+                >
+                  新增海报
+                </Button>
+              </div>
+            )}
+            {/* 表格相关 */}
+            <WallTable
+              tablePageIdFu={tablePageIdFu}
+              scrollNumInfo={scrollRef.current}
+            />
+          </div>
+
+          <div className="wallTopBox">
+            <div className="titleTxt">
+              文物按类别展示
+              <Tooltip title="当关闭时，万物墙将展示所有文物。">
+                <div className="inco">
+                  <ExclamationCircleFilled />
+                </div>
+              </Tooltip>
+            </div>
+            {editType ? (
+              // 修改信息
+              <div className="edit">
+                <div>展示日期:</div>
+                <Radio.Group
+                  onChange={(e) => setValueType(e.target.value)}
+                  value={valueType}
+                >
+                  <Radio value={0}>关闭</Radio>
+                  <Radio value={1}>开启</Radio>
+                </Radio.Group>
+                &emsp;
+                <RangePicker
+                  allowClear={false}
+                  // defaultValue={[
+                  //   dayjs(timeType1[0], "YYYY/MM/DD"),
+                  //   dayjs(timeType1[1], "YYYY/MM/DD"),
+                  // ]}
+                  onChange={timeChange}
+                />
+                &emsp;
+                <Button type="primary" onClick={btnOkType}>
+                  确定
+                </Button>
+                &emsp;
+                <Popconfirm
+                  title="放弃编辑后，信息将不会保存!"
+                  okText="放弃"
+                  cancelText="取消"
+                  onConfirm={() => setEditType(false)}
+                >
+                  <Button>取消</Button>
+                </Popconfirm>
+              </div>
+            ) : (
+              // 展示信息
+              <div>
+                <div className="txt">
+                  <div style={{ marginRight: "5px" }}>展示日期:</div>
+                  <div>{valueType ? "开启" : "关闭"}&emsp;|&emsp;</div>
+                  <div>
+                    {timeType0.split(",")[0]} 至 {timeType0.split(",")[1]}
+                  </div>
+                  &emsp;&emsp;
+                  <Button type="primary" onClick={editTypeFu}>
+                    修改
+                  </Button>
+                </div>
+                <div className="txt">
+                  <div style={{ marginRight: "5px" }}>展示类别:</div>
+                  <div>{types}</div>
+                </div>
               </div>
             )}
           </div>
-          {/* 表格相关 */}
-          <WallTable
-            tablePageIdFu={tablePageIdFu}
-            scrollNumInfo={scrollRef.current}
-          />
         </>
       ) : (
         <WallAdd id={editId} closeMoalFu={closeWallAddFu} />

houtai/src/store/action/B3Wall.ts

@@ -12,6 +12,28 @@ export const getWallAutoApi = () => {
 };
 
 /**
+ * 获取万物墙文物类型数据
+ */
+export const getWallCategoryoApi = () => {
+  return http.get("cms/wall/getGoodsConfig");
+};
+
+/**
+ * 获取万物墙文物类型列表
+ */
+export const getWallCategoryoListApi = () => {
+  return http.get("cms/wall/getGoodsType");
+};
+
+/**
+ * 修改万物墙自动播放数据
+ */
+export const editWallTypeApi = (data: { content: string }) => {
+  return http.post("cms/wall/setGoodsConfig", data);
+};
+
+
+/**
  * 修改万物墙自动播放数据
  */
 export const editWallAutoApi = (data: { content: string }) => {