upp

src/pages/B2Scene/MateNum.tsx

@@ -0,0 +1,142 @@
+import React, { useCallback, useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Modal } from "antd";
+import TextArea from "antd/es/input/TextArea";
+import { B2_APImateNum } from "@/store/action/B2Scene";
+import { MessageFu } from "@/utils/message";
+import ExportJsonExcel from "js-export-excel";
+import dayjs from "dayjs";
+
+type ListType = {
+  cameraSn: string;
+  link: string;
+  region: string;
+  roomNum: string;
+  sceneCode: string;
+  sceneName: string;
+  shootTime: string;
+  siteName: string;
+  siteNum: string;
+};
+
+type Props = {
+  closeFu: () => void;
+};
+
+function MateNum({ closeFu }: Props) {
+  const [txt, setTxt] = useState("");
+
+  const [list, setList] = useState<ListType[]>([]);
+
+  // 点击匹配
+  const mateFu = useCallback(async () => {
+    const data = txt.split(",");
+
+    const res = await B2_APImateNum(data);
+    if (res.code === 0) {
+      MessageFu.success("匹配成功!");
+      setList(res.data || []);
+    }
+  }, [txt]);
+
+  // 有效条数
+  const numOk = useMemo(() => {
+    const arr = list.filter((v) => v.roomNum) || [];
+    return arr.length;
+  }, [list]);
+
+  // 点击导出
+  const deriveFu = useCallback(async () => {
+    const name = "匹配机房编码" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");
+
+    const option = {
+      fileName: name,
+      datas: [
+        {
+          sheetData: list.map((v) => ({
+            siteName: v.siteName || "空",
+            siteNum: v.siteNum || "空",
+            roomNum: v.roomNum || "空",
+            region: v.region || "空",
+            sceneCode: v.sceneCode || "空",
+            cameraSn: v.cameraSn || "空",
+            shootTime: v.shootTime || "空",
+            sceneName: v.sceneName || "空",
+            link: v.link || "空",
+          })),
+          sheetName: name,
+          sheetFilter: [
+            "siteName",
+            "siteNum",
+            "roomNum",
+            "region",
+            "sceneCode",
+            "cameraSn",
+            "shootTime",
+            "sceneName",
+            "link",
+          ],
+          sheetHeader: [
+            "站址名称",
+            "站址编码",
+            "机房实物编码",
+            "区域",
+            "场景编码",
+            "相机SN吗",
+            "采集日期",
+            "场景名称",
+            "全景链接",
+          ],
+          columnWidths: [10, 10, 10, 10, 10, 10, 10, 10, 10],
+        },
+      ],
+    };
+
+    const toExcel = new ExportJsonExcel(option); //new
+    toExcel.saveExcel(); //保存
+  }, [list]);
+
+  return (
+    <Modal
+      wrapClassName={styles.MateNum}
+      open={true}
+      title="匹配机房编码"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="B2mMain">
+        <TextArea
+          placeholder="请输入场景编码，并以 , 隔开（' , '需使用英文输入法）"
+          value={txt}
+          onChange={(e) => setTxt(e.target.value.replace(/\s+/g, ""))}
+        />
+
+        <br />
+        <br />
+
+        <div className="B2mTit" hidden={list.length <= 0}>
+          当前匹配信息总条数：{list.length}&emsp;&emsp;有效条数：
+          {numOk}&emsp;&emsp;无效条数：{list.length - numOk}
+        </div>
+        <div className="B2mBtn">
+          <div>
+            <Button type="primary" disabled={txt.length <= 0} onClick={mateFu}>
+              {list.length > 0 ? "重新" : ""}匹配
+            </Button>
+            &emsp;
+            <Button type="primary" hidden={list.length <= 0} onClick={deriveFu}>
+              导出表格
+            </Button>
+          </div>
+
+          <Button onClick={closeFu}>关闭</Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoMateNum = React.memo(MateNum);
+
+export default MemoMateNum;

src/pages/B2Scene/index.module.scss

@@ -232,4 +232,32 @@
       }
     }
   }
+}
+
+// 匹配机房编码
+.MateNum {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+
+      .B2mMain {
+        border-top: 1px solid #ccc;
+        padding-top: 15px;
+
+        textarea{
+          height: 400px !important;
+        }
+  
+        .B2mBtn {
+          display: flex;
+          justify-content: space-between;
+        }
+
+      }
+    }
+  }
 }

src/pages/B2Scene/index.tsx

@@ -36,6 +36,7 @@ import clasNames from "classnames";
 import { mapDataAll1 } from "../C1User/AddUser/city";
 import LookReDo from "./LookReDo";
 import EditNum from "./EditNum";
+import MateNum from "./MateNum";
 
 function B2Scene() {
   const dispatch = useDispatch();
@@ -434,6 +435,9 @@ function B2Scene() {
   // 查看重复的场景
   const [lookReDo, setLookReDo] = useState(false);
 
+  // 匹配机房编码
+  const [mateNum, setMateNum] = useState(false);
+
   return (
     <div className={styles.B2Scene}>
       <div className="pageTitle">场景审核</div>
@@ -456,6 +460,7 @@ function B2Scene() {
           <div className="B2topRow">
             <span>站址地区：</span>
             <Cascader
+              disabled={!!tableSelect.isSiteEmpty}
               changeOnSelect
               value={tableSelect.siteArr}
               style={{ width: 250 }}
@@ -472,6 +477,7 @@ function B2Scene() {
               onChange={(e) =>
                 setTableSelect({
                   ...tableSelect,
+                  siteArr: e.target.checked ? undefined : tableSelect.siteArr,
                   isSiteEmpty: e.target.checked ? 1 : 0,
                 })
               }
@@ -508,6 +514,8 @@ function B2Scene() {
             </div>
           </div>
           <div>
+            <Button onClick={() => setMateNum(true)}>匹配机房编码</Button>
+            &emsp;
             <Button onClick={() => setLookReDo(true)}>查看重复的场景</Button>
             &emsp;
             <Button onClick={resetSelectFu}>重置</Button>&emsp;
@@ -577,6 +585,9 @@ function B2Scene() {
         />
       ) : null}
 
+      {/* 匹配机房编码 */}
+      {mateNum ? <MateNum closeFu={() => setMateNum(false)} /> : null}
+
       {/*  右下角的列表数量 */}
       <div className="tableNumBox">
         共 <span>{B2TableList.total}</span> 条数据

src/store/action/B2Scene.ts

@@ -71,3 +71,10 @@ export const B2_APIeditNum = (id: number, num: string) => {
 export const B2_APInumIsOk = (num: string) => {
   return http.get(`cms/scene/room/exist/${num}`);
 };
+
+/**
+ * 匹配机房编码
+ */
+export const B2_APImateNum = (data: string[]) => {
+  return http.post("cms/scene/getListBySceneCodes", data);
+};