upp

houtai/src/pages/B3Wall/index.tsx

@@ -1,12 +1,139 @@
-import React from "react";
+import { Button, Radio, Tooltip, DatePicker, Popconfirm } from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import { ExclamationCircleFilled } from "@ant-design/icons";
 import styles from "./index.module.scss";
- function Wall() {
-  
+import dayjs from "dayjs";
+import { editWallAutoApi, getWallAutoApi } from "@/store/action/B3Wall";
+import { MessageFu } from "@/utils/message";
+import WallTable from "./WallTable";
+const { RangePicker } = DatePicker;
+
+function Wall() {
+  // 获取自动播放信息
+  const getWallAutoApiFu = useCallback(async () => {
+    const res = await getWallAutoApi();
+    setValue0(res.data.isAuto);
+    setTime0(res.data.startTime + "," + res.data.endTime);
+  }, []);
+
+  useEffect(() => {
+    getWallAutoApiFu();
+  }, [getWallAutoApiFu]);
+
+  // 场景管理的编辑
+  const [edit, setEdit] = useState(false);
+
+  // 自动轮播开启关闭的展示
+  const [value0, setValue0] = useState(-1);
+
+  // 自动轮播开启关闭的修改
+  const [value1, setValue1] = useState(0);
+
+  // 自动轮播时间的展示
+  const [time0, setTime0] = useState(" , ");
+
+  // 自动轮播时间的修改
+  const [time1, setTime1] = useState<string[]>([]);
+
+  // 点击修改
+  const editAutoPlay = useCallback(() => {
+    setValue1(value0);
+    setTime1(time0.split(","));
+    setEdit(true);
+  }, [time0, value0]);
+
+  // 时间选择器改变
+  const timeChange = (date: any, dateString: any) => {
+    setTime1(dateString);
+  };
+
+  // 点击确定
+  const btnOk = useCallback(async () => {
+    const obj = {
+      endTime: time1[1],
+      startTime: time1[0],
+      isAuto: value1,
+    };
+    const res: any = await editWallAutoApi(obj);
+    if (res.code === 0) {
+      MessageFu.success("修改成功!");
+      getWallAutoApiFu();
+    }
+    setEdit(false);
+  }, [getWallAutoApiFu, time1, value1]);
+
   return (
     <div className={styles.Wall}>
-      <h1>Wall</h1>
+
+
+      <div className="pageTitlt">万物墙管理</div>
+
+        {/* 初始页面盒子 */}
+        <div></div>
+
+
+      <div className="wallTopBox">
+        <div className="titleTxt">
+          场景管理
+          <Tooltip title="当超过15秒未操作时，将在场景&emsp;&emsp;讲述/游览/赏析/临时展&emsp;&emsp;间循环播放，每个场景播放30秒">
+            <div className="inco">
+              <ExclamationCircleFilled />
+            </div>
+          </Tooltip>
+        </div>
+        {edit ? (
+          // 修改信息
+          <div className="edit">
+            <div>自动轮播：</div>
+            <Radio.Group
+              onChange={(e) => setValue1(e.target.value)}
+              value={value1}
+            >
+              <Radio value={0}>关闭</Radio>
+              <Radio value={1}>开启</Radio>
+            </Radio.Group>
+            &emsp;
+            <RangePicker
+              allowClear={false}
+              defaultValue={[
+                dayjs(time1[0], "YYYY/MM/DD"),
+                dayjs(time1[1], "YYYY/MM/DD"),
+              ]}
+              onChange={timeChange}
+            />
+            &emsp;
+            <Button type="primary" onClick={btnOk}>
+              确定
+            </Button>
+            &emsp;
+            <Popconfirm
+              title="放弃编辑后，信息将不会保存!"
+              okText="放弃"
+              cancelText="取消"
+              onConfirm={() => setEdit(false)}
+            >
+              <Button>取消</Button>
+            </Popconfirm>
+          </div>
+        ) : (
+          // 展示信息
+          <div className="txt">
+            <div>自动轮播：</div>
+            <div>{value0 ? "开启" : "关闭"}&emsp;|&emsp;</div>
+            <div>
+              {time0.split(",")[0]} 至 {time0.split(",")[1]}
+            </div>
+            &emsp;&emsp;
+            <Button type="primary" onClick={editAutoPlay}>
+              修改
+            </Button>
+          </div>
+        )}
+      </div>
+      {/* 表格相关 */}
+      <WallTable />
     </div>
-  )
+  );
 }
 
 const MemoWall = React.memo(Wall);