upp

src/pages/A1Camera/index.tsx

@@ -35,30 +35,50 @@ function A1Camera() {
     pageNum: 1,
   });
 
+  const tableSelectRef = useRef({} as TableSelectType);
+
+  useEffect(() => {
+    tableSelectRef.current = { ...tableSelect };
+  }, [tableSelect]);
+
   // 输入框的改变
-  const txtTimeRef = useRef(-1);
   const txtChangeFu = useCallback(
     (txt: string, key: "cameraSn" | "searchKey") => {
-      clearTimeout(txtTimeRef.current);
-      txtTimeRef.current = window.setTimeout(() => {
-        setTableSelect({ ...tableSelect, [key]: txt, pageNum: 1 });
-      }, 500);
+      setTableSelect({ ...tableSelect, [key]: txt });
     },
     [tableSelect]
   );
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(-1);
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setTableSelect({ ...tableSelect, pageNum: 1 });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, [tableSelect]);
+
   // 发送接口的函数
   const getListFu = useCallback(() => {
     const obj = {
-      ...tableSelect,
-      status: tableSelect.status === "全部" ? "" : tableSelect.status,
-      typeIn: tableSelect.typeIn === "全部" ? "" : tableSelect.typeIn,
+      ...tableSelectRef.current,
+      status:
+        tableSelectRef.current.status === "全部"
+          ? ""
+          : tableSelectRef.current.status,
+      typeIn:
+        tableSelectRef.current.typeIn === "全部"
+          ? ""
+          : tableSelectRef.current.typeIn,
     };
     dispatch(A1_APIgetlist(obj));
-  }, [dispatch, tableSelect]);
+  }, [dispatch]);
 
   useEffect(() => {
     getListFu();
-  }, [getListFu]);
+  }, [getListFu, timeKey]);
 
   // 从仓库获取列表
   const A1TableList = useSelector(
@@ -68,6 +88,9 @@ function A1Camera() {
   const paginationChange = useCallback(
     () => (pageNum: number, pageSize: number) => {
       setTableSelect({ ...tableSelect, pageNum, pageSize });
+      setTimeout(() => {
+        setTimeKey(Date.now());
+      }, 50);
     },
     [tableSelect]
   );
@@ -99,6 +122,9 @@ function A1Camera() {
     });
 
     if (res.code === 0) {
+      if (res.data.records.length <= 0)
+        return MessageFu.warning("当前搜索条件没有数据!");
+
       const option = {
         fileName: name,
         datas: [
@@ -228,6 +254,9 @@ function A1Camera() {
       pageSize: 10,
       pageNum: 1,
     });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
   }, []);
 
   // 点击新增和编辑的数据
@@ -285,9 +314,7 @@ function A1Camera() {
             <Select
               style={{ width: 150 }}
               value={tableSelect.status}
-              onChange={(e) =>
-                setTableSelect({ ...tableSelect, status: e, pageNum: 1 })
-              }
+              onChange={(e) => setTableSelect({ ...tableSelect, status: e })}
               options={options1}
             />
           </div>
@@ -297,9 +324,7 @@ function A1Camera() {
             <Select
               style={{ width: 150 }}
               value={tableSelect.typeIn}
-              onChange={(e) =>
-                setTableSelect({ ...tableSelect, typeIn: e, pageNum: 1 })
-              }
+              onChange={(e) => setTableSelect({ ...tableSelect, typeIn: e })}
               options={options2}
             />
           </div>
@@ -307,6 +332,10 @@ function A1Camera() {
         {/* 右侧按钮 */}
         <div className="A1top2">
           <Button onClick={resetSelectFu}>重置</Button>&emsp;
+          <Button type="primary" onClick={clickSearch}>
+            查询
+          </Button>
+          &emsp;
           <Button
             type="primary"
             onClick={() => setOpenInfo({ id: -1, txt: "新增" })}

src/pages/A2Psychz/index.tsx

@@ -94,15 +94,23 @@ function A2Psychz() {
   // 点击搜索的 时间戳
   const [timeKey, setTimeKey] = useState(-1);
 
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setTableSelect({ ...tableSelect, pageNum: 1 });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, [tableSelect]);
+
   // 发送接口的函数
   const getListFu = useCallback(() => {
     const objTemp: any = {};
 
     if (tableSelectRef.current.siteArr) {
       const temp = tableSelectRef.current.siteArr;
-      objTemp.province = temp[0];
-      objTemp.city = temp[1];
-      objTemp.region = temp[2];
+      objTemp.province = temp[0] || "";
+      objTemp.city = temp[1] || "";
+      objTemp.region = temp[2] || "";
     }
 
     const obj = {
@@ -119,7 +127,7 @@ function A2Psychz() {
   // 输入框的改变
   const txtChangeFu = useCallback(
     (txt: string, key: "pmUser" | "searchKey") => {
-      setTableSelect({ ...tableSelect, [key]: txt, pageNum: 1 });
+      setTableSelect({ ...tableSelect, [key]: txt });
     },
     [tableSelect]
   );
@@ -273,9 +281,9 @@ function A2Psychz() {
 
     if (tableSelectRef.current.siteArr) {
       const temp = tableSelectRef.current.siteArr;
-      objTemp.province = temp[0];
-      objTemp.city = temp[1];
-      objTemp.region = temp[2];
+      objTemp.province = temp[0] || "";
+      objTemp.city = temp[1] || "";
+      objTemp.region = temp[2] || "";
     }
 
     const res = await A2_APIgetlistDerive({
@@ -358,6 +366,7 @@ function A2Psychz() {
             <span>站址地区：</span>
 
             <Cascader
+              changeOnSelect
               style={{ width: 240 }}
               options={optionsCity}
               value={tableSelect.siteArr}
@@ -366,7 +375,6 @@ function A2Psychz() {
                 setTableSelect({
                   ...tableSelect,
                   siteArr: e as string[],
-                  pageNum: 1,
                 })
               }
             />
@@ -403,9 +411,7 @@ function A2Psychz() {
               <Select
                 style={{ width: 150 }}
                 value={tableSelect.typeIn}
-                onChange={(e) =>
-                  setTableSelect({ ...tableSelect, typeIn: e, pageNum: 1 })
-                }
+                onChange={(e) => setTableSelect({ ...tableSelect, typeIn: e })}
                 options={options1}
               />
             </div>
@@ -413,7 +419,7 @@ function A2Psychz() {
           {/* 按钮 */}
           <div>
             <Button onClick={resetSelectFu}>重置</Button>&emsp;
-            <Button type="primary" onClick={() => setTimeKey(Date.now())}>
+            <Button type="primary" onClick={clickSearch}>
               查询
             </Button>
             &emsp;

src/pages/B1Plan/B1tab1.tsx

@@ -0,0 +1,290 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { B2FromDataArer } from "./data";
+import { useDispatch, useSelector } from "react-redux";
+import { B1_APIgetlistArea } from "@/store/action/B1Plan";
+import { RootState } from "@/store";
+import { B1tableAreaType } from "@/types";
+import { Button, Cascader, Table } from "antd";
+import { MessageFu } from "@/utils/message";
+import dayjs from "dayjs";
+import ExportJsonExcel from "js-export-excel";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { mapDataAll2 } from "../C1User/AddUser/city";
+
+const tableSelectTemp: B2FromDataArer = {
+  // 按机房统计
+  siteArr: undefined,
+  province: "",
+  city: "",
+};
+
+const topTypeArr = ["区域", "机房"] as ("机房" | "区域")[];
+
+type Props = {
+  topType: "区域" | "机房";
+  setTopType: (val: "机房", arrTemp?: string[]) => void;
+};
+
+function B1tab1({ topType, setTopType }: Props) {
+  // 切换 区域 和 机房
+  const setTopTypeFu = useCallback(
+    (value: "区域" | "机房", flag?: string) => {
+      if (value === "区域") return;
+
+      if (flag) {
+        const arrTemp = flag.split("/");
+
+        // 传给父组件
+        setTopType("机房", arrTemp);
+      } else setTopType("机房");
+    },
+    [setTopType]
+  );
+
+  const dispatch = useDispatch();
+
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState<B2FromDataArer>({
+    ...tableSelectTemp,
+  });
+
+  const tableSelectRef = useRef({} as B2FromDataArer);
+
+  useEffect(() => {
+    tableSelectRef.current = { ...tableSelect };
+  }, [tableSelect]);
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(-1);
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setTableSelect({ ...tableSelect });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, [tableSelect]);
+
+  // 发送接口的函数
+  const getListFu = useCallback(() => {
+    const objTemp: any = {};
+
+    if (tableSelectRef.current.siteArr) {
+      const temp = tableSelectRef.current.siteArr;
+      objTemp.province = temp[0] || "";
+      objTemp.city = temp[1] || "";
+      objTemp.region = temp[2] || "";
+    }
+    dispatch(B1_APIgetlistArea({ ...tableSelectRef.current, ...objTemp }));
+  }, [dispatch]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu, timeKey]);
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setTableSelect({ ...tableSelectTemp });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, []);
+
+  // 从仓库获取列表
+  const B1TableList = useSelector(
+    (state: RootState) => state.B1Plan.B1TableListArea
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "站址地区",
+        render: (item: B1tableAreaType) => item.id || "空",
+      },
+      {
+        title: "机房总数",
+        render: (item: B1tableAreaType) => item.pcsRoom || 0,
+      },
+      {
+        title: "上传场景",
+        render: (item: B1tableAreaType) => item.pcsScene || 0,
+      },
+      {
+        title: "完成场景计算",
+        render: (item: B1tableAreaType) => item.pcsCalculate || 0,
+      },
+      {
+        title: "初审通过",
+        render: (item: B1tableAreaType) => item.pcsFirst || 0,
+      },
+      {
+        title: "审核通过",
+        render: (item: B1tableAreaType) => item.pcsPass || 0,
+      },
+      {
+        title: "审核驳回",
+        render: (item: B1tableAreaType) => item.pcsReject || 0,
+      },
+      {
+        title: "场景推送成功",
+        render: (item: B1tableAreaType) => item.pcsPushScene || 0,
+      },
+      {
+        title: "链接推送成功",
+        render: (item: B1tableAreaType) => item.pcsPushLink || 0,
+      },
+      {
+        title: "Json推送成功",
+        render: (item: B1tableAreaType) => item.pcsPushJson || 0,
+      },
+      {
+        title: "操作",
+        render: (item: B1tableAreaType) => (
+          <>
+            {/* 带完善 */}
+            <Button size="small" type="text">
+              按日期查看
+            </Button>
+            <Button
+              size="small"
+              type="text"
+              disabled={!item.id}
+              onClick={() => setTopTypeFu("机房", item.id)}
+            >
+              按机房查看
+            </Button>
+          </>
+        ),
+      },
+    ];
+  }, [setTopTypeFu]);
+  // 点击导出
+  const deriveFu = useCallback(async () => {
+    if (B1TableList.list.length === 0)
+      return MessageFu.warning("当前搜索条件没有数据!");
+    const name = "进度统计" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");
+
+    const option = {
+      fileName: name,
+      datas: [
+        {
+          sheetData: B1TableList.list.map((v: B1tableAreaType) => ({
+            ...v,
+            id: v.id || "（空）",
+          })),
+          sheetName: name,
+          sheetFilter: [
+            "id",
+            "pcsRoom",
+            "pcsScene",
+            "pcsCalculate",
+            "pcsFirst",
+            "pcsPass",
+            "pcsReject",
+            "pcsPushScene",
+            "pcsPushLink",
+            "pcsPushJson",
+          ],
+          sheetHeader: [
+            "站址地区",
+            "机房总数",
+            "上传场景",
+            "完成场景计算",
+            "初审通过",
+            "审核通过",
+            "审核驳回",
+            "场景推送成功",
+            "链接推送成功",
+            "Json推送成功",
+          ],
+          columnWidths: [10, 5, 5, 5, 5, 5, 5, 5, 5, 5],
+        },
+      ],
+    };
+
+    const toExcel = new ExportJsonExcel(option); //new
+    toExcel.saveExcel(); //保存
+  }, [B1TableList.list]);
+
+  return (
+    <>
+      <div className="pageTitle">
+        进度统计&emsp;
+        <ExclamationCircleOutlined rev={undefined} />
+        <div>
+          当存在重复的机房编码时，请在[场景审核]中删除多余场景码后，重新统计
+        </div>
+      </div>
+      {/* 顶部筛选 */}
+      <div className="B1top">
+        <div className="B1topSon">
+          <div className="B1topRow">
+            {topTypeArr.map((v) => (
+              <Button
+                onClick={() => setTopTypeFu(v)}
+                type={v === topType ? "primary" : "default"}
+                key={v}
+              >
+                按{v}统计
+              </Button>
+            ))}
+          </div>
+
+          <div className="B1topRow">
+            <span>站址地区：</span>
+            <Cascader
+              changeOnSelect
+              value={tableSelect.siteArr}
+              style={{ width: 160 }}
+              options={mapDataAll2}
+              placeholder="全部"
+              onChange={(e) =>
+                setTableSelect({
+                  ...tableSelect,
+                  siteArr: e as string[],
+                })
+              }
+            />
+          </div>
+        </div>
+        <div className="B1topSon B1topSon2">
+          <div></div>
+          <div>
+            <Button onClick={resetSelectFu}>重置</Button>&emsp;
+            <Button type="primary" onClick={clickSearch}>
+              查询
+            </Button>
+            &emsp;
+            <Button type="primary" onClick={deriveFu}>
+              导出表格
+            </Button>
+          </div>
+        </div>
+      </div>
+      {/* 表格主体 */}
+      <div className="tableMain">
+        <Table
+          scroll={{ y: 578 }}
+          dataSource={B1TableList.list}
+          columns={columns}
+          rowKey="id"
+          pagination={false}
+        />
+      </div>
+      {/*  右下角的列表数量 */}
+      <div className="tableNumBox">
+        共 <span>{B1TableList.total}</span> 条数据
+      </div>
+    </>
+  );
+}
+
+const MemoB1tab1 = React.memo(B1tab1);
+
+export default MemoB1tab1;

src/pages/B1Plan/B1tab2.tsx

@@ -0,0 +1,453 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Button,
+  Cascader,
+  Checkbox,
+  Input,
+  Select,
+  Table,
+  Tooltip,
+} from "antd";
+import {
+  B1options1,
+  B1options1Obj,
+  B1options2,
+  B1options2Obj,
+  B1options3,
+  B2FromDataType,
+} from "./data";
+import {
+  ExclamationCircleOutlined,
+  QuestionCircleOutlined,
+} from "@ant-design/icons";
+import { useDispatch, useSelector } from "react-redux";
+
+import { RootState } from "@/store";
+import { B1tableType } from "@/types";
+import ExportJsonExcel from "js-export-excel";
+import { MessageFu } from "@/utils/message";
+import dayjs from "dayjs";
+import { mapDataAll1 } from "../C1User/AddUser/city";
+import { B1_APIgetlist, B1_APIgetlistAll } from "@/store/action/B1Plan";
+import { forwardRef, useImperativeHandle } from "react";
+
+const tableSelectTemp: B2FromDataType = {
+  // 按机房统计
+  siteArr: undefined,
+  isUploadScene: 1,
+  province: "",
+  city: "",
+  region: "",
+  searchKey: "",
+  pmUser: "",
+  auditStatus: "",
+  pushStatus: "",
+  jsonStatus: "",
+  pageSize: 10,
+  pageNum: 1,
+};
+
+const topTypeArr = ["区域", "机房"] as ("机房" | "区域")[];
+
+type Props = {
+  topType: "区域" | "机房";
+  setTopType: (val: "区域") => void;
+  ref: any;
+};
+
+function B1tab1({ topType, setTopType }: Props, ref: any) {
+  // 切换 区域 和 机房
+  const setTopTypeFu = useCallback(
+    (value: "机房" | "区域") => {
+      if (value === "机房") return;
+
+      // 传给父组件
+      setTopType("区域");
+    },
+    [setTopType]
+  );
+
+  const dispatch = useDispatch();
+
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState<B2FromDataType>({
+    ...tableSelectTemp,
+  });
+
+  const tableSelectRef = useRef({} as B2FromDataType);
+
+  useEffect(() => {
+    tableSelectRef.current = { ...tableSelect };
+  }, [tableSelect]);
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(-1);
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setTableSelect({ ...tableSelect, pageNum: 1 });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, [tableSelect]);
+
+  // 发送接口的函数
+  const getListFu = useCallback(() => {
+    const objTemp: any = {};
+
+    if (tableSelectRef.current.siteArr) {
+      const temp = tableSelectRef.current.siteArr;
+      objTemp.province = temp[0] || "";
+      objTemp.city = temp[1] || "";
+      objTemp.region = temp[2] || "";
+    }
+
+    const obj = {
+      ...tableSelectRef.current,
+      ...objTemp,
+    };
+    dispatch(B1_APIgetlist(obj));
+  }, [dispatch]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu, timeKey]);
+
+  // 输入框的改变
+  const txtChangeFu = useCallback(
+    (txt: string, key: "pmUser" | "searchKey") => {
+      setTableSelect({ ...tableSelect, [key]: txt });
+    },
+    [tableSelect]
+  );
+
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1);
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setInputKey(Date.now());
+    setTableSelect({ ...tableSelectTemp });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, []);
+
+  // 从仓库获取列表
+  const B1TableList: any = useSelector(
+    (state: RootState) => state.B1Plan.B1TableList
+  );
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setTableSelect({ ...tableSelect, pageNum, pageSize });
+      setTimeout(() => {
+        setTimeKey(Date.now());
+      }, 50);
+    },
+    [tableSelect]
+  );
+
+  // 给父组件调用，设置站址地区
+  const fatherFu = useCallback((obj: any) => {
+    setTableSelect({ ...tableSelectTemp, ...obj });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, []);
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    fatherFu,
+  }));
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "站址名称",
+        render: (item: B1tableType) => item.name || "（空）",
+      },
+      {
+        title: "站址编号",
+        render: (item: B1tableType) => item.siteNum || "（空）",
+      },
+      {
+        title: "站址地区",
+        render: (item: B1tableType) =>
+          !item.province && !item.city && !item.region
+            ? "（空）"
+            : `${item.province}-${item.city}-${item.region}`,
+      },
+      {
+        title: "机房编码",
+        dataIndex: "roomNum",
+      },
+      {
+        title: "项目经理",
+        render: (item: B1tableType) => item.pmName || "（空）",
+      },
+      {
+        title: "场景码",
+        render: (item: B1tableType) => item.sceneCode || "（空）",
+      },
+      {
+        title: "场景审核状态",
+        render: (item: B1tableType) =>
+          Reflect.get(B1options1Obj, item.auditStatus) || "（空）",
+      },
+      {
+        title: "场景推送状态",
+        render: (item: B1tableType) => (
+          <>
+            {Reflect.get(B1options2Obj, item.pushStatus) || "（空）"}
+            <span style={{ cursor: "pointer" }} hidden={!item.pushDesc}>
+              <Tooltip title={item.pushDesc}>
+                &nbsp;
+                <QuestionCircleOutlined rev={undefined} />
+              </Tooltip>
+            </span>
+          </>
+        ),
+      },
+      {
+        title: "Json推送状态",
+        render: (item: B1tableType) =>
+          Reflect.get(B1options2Obj, item.jsonStatus) || "（空）",
+      },
+    ];
+  }, []);
+  // 点击导出
+  const deriveFu = useCallback(async () => {
+    if (B1TableList.list.length === 0)
+      return MessageFu.warning("当前搜索条件没有数据!");
+    const name = "进度统计" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");
+    const objTemp: any = {};
+
+    if (tableSelectRef.current.siteArr) {
+      const temp = tableSelectRef.current.siteArr;
+      objTemp.province = temp[0] || "";
+      objTemp.city = temp[1 || ""];
+      objTemp.region = temp[2] || "";
+    }
+
+    const res = await B1_APIgetlistAll({
+      ...tableSelectRef.current,
+      ...objTemp,
+      pageNum: 1,
+      pageSize: 99999,
+    });
+
+    if (res.code === 0) {
+      if (res.data.records.length <= 0)
+        return MessageFu.warning("当前搜索条件没有数据!");
+
+      const option = {
+        fileName: name,
+        datas: [
+          {
+            sheetData: res.data.records.map((v: B1tableType) => ({
+              name: v.name || "（空）",
+              siteNum: v.siteNum || "（空）",
+              myCity:
+                !v.province && !v.city && !v.region
+                  ? "（空）"
+                  : `${v.province}-${v.city}-${v.region}`,
+              roomNum: v.roomNum,
+              pmName: v.pmName || "（空）",
+              sceneCode: v.sceneCode || "（空）",
+              auditStatus:
+                Reflect.get(B1options1Obj, v.auditStatus) || "（空）",
+              pushStatus: Reflect.get(B1options2Obj, v.pushStatus) || "（空）",
+              jsonStatus: Reflect.get(B1options2Obj, v.jsonStatus) || "（空）",
+            })),
+            sheetName: name,
+            sheetFilter: [
+              "name",
+              "siteNum",
+              "myCity",
+              "roomNum",
+              "pmName",
+              "sceneCode",
+              "auditStatus",
+              "pushStatus",
+              "jsonStatus",
+            ],
+            sheetHeader: [
+              "站址名称",
+              "站址编号",
+              "站址地区",
+              "机房编码",
+              "项目经理",
+              "场景码",
+              "场景审核状态",
+              "场景推送状态",
+              "Json推送状态",
+            ],
+            columnWidths: [10, 10, 10, 10, 10, 10, 10, 10, 10],
+          },
+        ],
+      };
+
+      const toExcel = new ExportJsonExcel(option); //new
+      toExcel.saveExcel(); //保存
+    }
+  }, [B1TableList.list.length]);
+
+  return (
+    <>
+      <div className="pageTitle">
+        进度统计&emsp;
+        <ExclamationCircleOutlined rev={undefined} />
+        <div>
+          当存在重复的机房编码时，请在[场景审核]中删除多余场景码后，重新统计
+        </div>
+      </div>
+      {/* 顶部筛选 */}
+      <div className="B1top">
+        <div className="B1topSon">
+          <div className="B1topRow">
+            {topTypeArr.map((v) => (
+              <Button
+                onClick={() => setTopTypeFu(v)}
+                type={v === topType ? "primary" : "default"}
+                key={v}
+              >
+                按{v}统计
+              </Button>
+            ))}
+          </div>
+          <div className="B1topRow">
+            <span>搜索项：</span>
+            <Input
+              key={inputKey}
+              maxLength={24}
+              style={{ width: 323 }}
+              placeholder="请输入站址名称/站置编号/机房编码,最多24字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
+            />
+          </div>
+          <div className="B1topRow">
+            <span>站址地区：</span>
+            <Cascader
+              changeOnSelect
+              value={tableSelect.siteArr}
+              style={{ width: 160 }}
+              options={mapDataAll1}
+              placeholder="全部"
+              onChange={(e) =>
+                setTableSelect({
+                  ...tableSelect,
+                  siteArr: e as string[],
+                })
+              }
+            />
+          </div>
+          <div className="B1topRow">
+            <span>项目经理：</span>
+            <Input
+              key={inputKey}
+              maxLength={10}
+              style={{ width: 200 }}
+              placeholder="请输入姓名,最多10字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "pmUser")}
+            />
+          </div>
+        </div>
+        <div className="B1topSon B1topSon2">
+          <div>
+            <div className="B1topRow">
+              <span>场景审核：</span>
+              <Select
+                style={{ width: 200 }}
+                value={tableSelect.auditStatus}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, auditStatus: e })
+                }
+                options={B1options1}
+              />
+            </div>
+            <div className="B1topRow">
+              <span>场景推送：</span>
+              <Select
+                style={{ width: 200 }}
+                value={tableSelect.pushStatus}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, pushStatus: e })
+                }
+                options={B1options2}
+              />
+            </div>
+            <div className="B1topRow">
+              <span>Json推送：</span>
+              <Select
+                style={{ width: 200 }}
+                value={tableSelect.jsonStatus}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, jsonStatus: e })
+                }
+                options={B1options3}
+              />
+            </div>
+            <div className="B1topRowCheck">
+              <Checkbox
+                checked={tableSelect.isUploadScene === 0}
+                onChange={(e) => {
+                  setInputKey(Date.now());
+                  setTableSelect({
+                    ...tableSelect,
+                    isUploadScene: e.target.checked ? 0 : 1,
+                  });
+                }}
+              >
+                仅查看未上传的机房
+              </Checkbox>
+            </div>
+          </div>
+          <div>
+            <Button onClick={resetSelectFu}>重置</Button>&emsp;
+            <Button type="primary" onClick={clickSearch}>
+              查询
+            </Button>
+            &emsp;
+            <Button type="primary" onClick={deriveFu}>
+              导出表格
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableMain">
+        <Table
+          scroll={{ y: 578 }}
+          dataSource={B1TableList.list}
+          columns={columns}
+          rowKey="idKey"
+          pagination={{
+            showQuickJumper: true,
+            position: ["bottomCenter"],
+            showSizeChanger: true,
+            current: tableSelect.pageNum,
+            pageSize: tableSelect.pageSize,
+            total: B1TableList.total,
+            onChange: paginationChange(),
+          }}
+        />
+      </div>
+      {/*  右下角的列表数量 */}
+      <div className="tableNumBox">
+        共 <span>{B1TableList.total}</span> 条数据
+      </div>
+    </>
+  );
+}
+
+export default forwardRef(B1tab1);

src/pages/B1Plan/PlanModal.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./index.module.scss";
+import { Button, Modal } from "antd";
+function PlanModal() {
+  return (
+    <Modal
+      wrapClassName={styles.PlanModal}
+      open={true}
+      title={``}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className="B1Mbtn">
+        <Button type="primary">关闭</Button>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoPlanModal = React.memo(PlanModal);
+
+export default MemoPlanModal;

src/pages/B1Plan/data.ts

@@ -1,7 +1,10 @@
 export type B2FromDataType = {
+  siteArr: undefined | string[];
+  isUploadScene: 1 | 0;
+  province: string;
+  city: string;
+  region: string;
   searchKey: string;
-  siteLevel: 2;
-  site: undefined | string[];
   pmUser: string;
   auditStatus: "" | 0 | 1 | 2 | 3;
   pushStatus: "" | 0 | 2 | 3;
@@ -10,6 +13,12 @@ export type B2FromDataType = {
   pageNum: number;
 };
 
+export type B2FromDataArer = {
+  siteArr: undefined | string[];
+  province: string;
+  city: string;
+};
+
 // 场景审核
 export const B1options1 = [
   {

src/pages/B1Plan/index copy.tsx

@@ -0,0 +1,576 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./index.module.scss";
+import {
+  Button,
+  Cascader,
+  Checkbox,
+  Input,
+  Select,
+  Table,
+  Tooltip,
+} from "antd";
+import {
+  B1options1,
+  B1options1Obj,
+  B1options2,
+  B1options2Obj,
+  B1options3,
+  B2FromDataType,
+} from "./data";
+import {
+  ExclamationCircleOutlined,
+  QuestionCircleOutlined,
+} from "@ant-design/icons";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  B1_APIgetlist,
+  B1_APIgetlistAll,
+  B1_APIgetlistArea,
+} from "@/store/action/B1Plan";
+import { RootState } from "@/store";
+import { B1tableAreaType, B1tableType } from "@/types";
+import ExportJsonExcel from "js-export-excel";
+import { MessageFu } from "@/utils/message";
+import dayjs from "dayjs";
+import { mapDataAll1, mapDataAll2 } from "../C1User/AddUser/city";
+
+const tableSelectTemp: B2FromDataType = {
+  // 按机房统计
+  siteArr: undefined,
+  isUploadScene: 1,
+  province: "",
+  city: "",
+  region: "",
+  searchKey: "",
+  pmUser: "",
+  auditStatus: "",
+  pushStatus: "",
+  jsonStatus: "",
+  pageSize: 10,
+  pageNum: 1,
+};
+
+const topTypeArr = ["区域", "机房"] as ("机房" | "区域")[];
+
+function B1Plan() {
+  const [topTyep, setTopType] = useState<"区域" | "机房">("区域");
+  const topTyepRef = useRef<"区域" | "机房">("区域");
+
+  // 切换 区域 和 机房
+  const setTopTypeFu = useCallback((value: "区域" | "机房", falg?: string) => {
+    if (value === topTyepRef.current) return;
+    setTopType(value);
+    setInputKey(Date.now());
+
+    const objTemp: any = {};
+    if (falg) {
+      const arrTemp = falg.split("/");
+      objTemp.siteArr = arrTemp;
+      objTemp.province = arrTemp[0] || "";
+      objTemp.city = arrTemp[1 || ""];
+      objTemp.region = arrTemp[2] || "";
+    }
+
+    setTableSelect({ ...tableSelectTemp, ...objTemp });
+
+    topTyepRef.current = value;
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, []);
+
+  const dispatch = useDispatch();
+
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState<B2FromDataType>({
+    ...tableSelectTemp,
+  });
+
+  const tableSelectRef = useRef({} as B2FromDataType);
+
+  useEffect(() => {
+    tableSelectRef.current = { ...tableSelect };
+  }, [tableSelect]);
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(-1);
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setTableSelect({ ...tableSelect, pageNum: 1 });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, [tableSelect]);
+
+  // 发送接口的函数
+  const getListFu = useCallback(() => {
+    const objTemp: any = {};
+
+    if (tableSelectRef.current.siteArr) {
+      const temp = tableSelectRef.current.siteArr;
+      objTemp.province = temp[0] || "";
+      objTemp.city = temp[1] || "";
+      objTemp.region = temp[2] || "";
+    }
+
+    if (topTyepRef.current === "区域") {
+      dispatch(B1_APIgetlistArea({ ...tableSelectRef.current, ...objTemp }));
+    } else {
+      const obj = {
+        ...tableSelectRef.current,
+        ...objTemp,
+      };
+      dispatch(B1_APIgetlist(obj));
+    }
+  }, [dispatch]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu, timeKey]);
+
+  // 输入框的改变
+  const txtChangeFu = useCallback(
+    (txt: string, key: "pmUser" | "searchKey") => {
+      setTableSelect({ ...tableSelect, [key]: txt });
+    },
+    [tableSelect]
+  );
+
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1);
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setInputKey(Date.now());
+    setTableSelect({ ...tableSelectTemp });
+    setTimeout(() => {
+      setTimeKey(Date.now());
+    }, 50);
+  }, []);
+
+  // 从仓库获取列表
+  const B1TableList: any = useSelector((state: RootState) => {
+    return topTyep === "区域"
+      ? state.B1Plan.B1TableListArea
+      : state.B1Plan.B1TableList;
+  });
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setTableSelect({ ...tableSelect, pageNum, pageSize });
+      setTimeout(() => {
+        setTimeKey(Date.now());
+      }, 50);
+    },
+    [tableSelect]
+  );
+
+  // 按 区域统计 点击 表格的 查看明细
+  const [areaLook, setAreaLook] = useState({
+    type: "",
+  });
+
+  const columns = useMemo(() => {
+    return topTyep === "区域"
+      ? [
+          {
+            title: "站址地区",
+            render: (item: B1tableAreaType) => item.id || "空",
+          },
+          {
+            title: "机房总数",
+            render: (item: B1tableAreaType) => item.pcsRoom || 0,
+          },
+          {
+            title: "上传场景",
+            render: (item: B1tableAreaType) => item.pcsScene || 0,
+          },
+          {
+            title: "完成场景计算",
+            render: (item: B1tableAreaType) => item.pcsCalculate || 0,
+          },
+          {
+            title: "初审通过",
+            render: (item: B1tableAreaType) => item.pcsFirst || 0,
+          },
+          {
+            title: "审核通过",
+            render: (item: B1tableAreaType) => item.pcsPass || 0,
+          },
+          {
+            title: "审核驳回",
+            render: (item: B1tableAreaType) => item.pcsReject || 0,
+          },
+          {
+            title: "场景推送成功",
+            render: (item: B1tableAreaType) => item.pcsPushScene || 0,
+          },
+          {
+            title: "链接推送成功",
+            render: (item: B1tableAreaType) => item.pcsPushLink || 0,
+          },
+          {
+            title: "Json推送成功",
+            render: (item: B1tableAreaType) => item.pcsPushJson || 0,
+          },
+          {
+            title: "操作",
+            render: (item: B1tableAreaType) => (
+              <>
+                <Button size="small" type="text">
+                  按日期查看
+                </Button>
+                <Button
+                  size="small"
+                  type="text"
+                  disabled={!item.id}
+                  onClick={() => setTopTypeFu("机房", item.id)}
+                >
+                  按机房查看
+                </Button>
+              </>
+            ),
+          },
+        ]
+      : [
+          {
+            title: "站址名称",
+            render: (item: B1tableType) => item.name || "（空）",
+          },
+          {
+            title: "站址编号",
+            render: (item: B1tableType) => item.siteNum || "（空）",
+          },
+          {
+            title: "站址地区",
+            render: (item: B1tableType) =>
+              !item.province && !item.city && !item.region
+                ? "（空）"
+                : `${item.province}-${item.city}-${item.region}`,
+          },
+          {
+            title: "机房编码",
+            dataIndex: "roomNum",
+          },
+          {
+            title: "项目经理",
+            render: (item: B1tableType) => item.pmName || "（空）",
+          },
+          {
+            title: "场景码",
+            render: (item: B1tableType) => item.sceneCode || "（空）",
+          },
+          {
+            title: "场景审核状态",
+            render: (item: B1tableType) =>
+              Reflect.get(B1options1Obj, item.auditStatus) || "（空）",
+          },
+          {
+            title: "场景推送状态",
+            render: (item: B1tableType) => (
+              <>
+                {Reflect.get(B1options2Obj, item.pushStatus) || "（空）"}
+                <span style={{ cursor: "pointer" }} hidden={!item.pushDesc}>
+                  <Tooltip title={item.pushDesc}>
+                    &nbsp;
+                    <QuestionCircleOutlined rev={undefined} />
+                  </Tooltip>
+                </span>
+              </>
+            ),
+          },
+          {
+            title: "Json推送状态",
+            render: (item: B1tableType) =>
+              Reflect.get(B1options2Obj, item.jsonStatus) || "（空）",
+          },
+        ];
+  }, [setTopTypeFu, topTyep]);
+  // 点击导出
+  const deriveFu = useCallback(async () => {
+    if (B1TableList.list.length === 0)
+      return MessageFu.warning("当前搜索条件没有数据!");
+    const name = "进度统计" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");
+
+    if (topTyep === "区域") {
+      const option = {
+        fileName: name,
+        datas: [
+          {
+            sheetData: B1TableList.list.map((v: B1tableAreaType) => ({
+              ...v,
+              id: v.id || "（空）",
+            })),
+            sheetName: name,
+            sheetFilter: [
+              "id",
+              "pcsRoom",
+              "pcsScene",
+              "pcsCalculate",
+              "pcsFirst",
+              "pcsPass",
+              "pcsReject",
+              "pcsPushScene",
+              "pcsPushLink",
+              "pcsPushJson",
+            ],
+            sheetHeader: [
+              "站址地区",
+              "机房总数",
+              "上传场景",
+              "完成场景计算",
+              "初审通过",
+              "审核通过",
+              "审核驳回",
+              "场景推送成功",
+              "链接推送成功",
+              "Json推送成功",
+            ],
+            columnWidths: [10, 5, 5, 5, 5, 5, 5, 5, 5, 5],
+          },
+        ],
+      };
+
+      const toExcel = new ExportJsonExcel(option); //new
+      toExcel.saveExcel(); //保存
+    } else {
+      const objTemp: any = {};
+
+      if (tableSelectRef.current.siteArr) {
+        const temp = tableSelectRef.current.siteArr;
+        objTemp.province = temp[0] || "";
+        objTemp.city = temp[1 || ""];
+        objTemp.region = temp[2] || "";
+      }
+
+      const res = await B1_APIgetlistAll({
+        ...tableSelectRef.current,
+        ...objTemp,
+        pageNum: 1,
+        pageSize: 99999,
+      });
+
+      if (res.code === 0) {
+        if (res.data.records.length <= 0)
+          return MessageFu.warning("当前搜索条件没有数据!");
+
+        const option = {
+          fileName: name,
+          datas: [
+            {
+              sheetData: res.data.records.map((v: B1tableType) => ({
+                name: v.name || "（空）",
+                siteNum: v.siteNum || "（空）",
+                myCity:
+                  !v.province && !v.city && !v.region
+                    ? "（空）"
+                    : `${v.province}-${v.city}-${v.region}`,
+                roomNum: v.roomNum,
+                pmName: v.pmName || "（空）",
+                sceneCode: v.sceneCode || "（空）",
+                auditStatus:
+                  Reflect.get(B1options1Obj, v.auditStatus) || "（空）",
+                pushStatus:
+                  Reflect.get(B1options2Obj, v.pushStatus) || "（空）",
+                jsonStatus:
+                  Reflect.get(B1options2Obj, v.jsonStatus) || "（空）",
+              })),
+              sheetName: name,
+              sheetFilter: [
+                "name",
+                "siteNum",
+                "myCity",
+                "roomNum",
+                "pmName",
+                "sceneCode",
+                "auditStatus",
+                "pushStatus",
+                "jsonStatus",
+              ],
+              sheetHeader: [
+                "站址名称",
+                "站址编号",
+                "站址地区",
+                "机房编码",
+                "项目经理",
+                "场景码",
+                "场景审核状态",
+                "场景推送状态",
+                "Json推送状态",
+              ],
+              columnWidths: [10, 10, 10, 10, 10, 10, 10, 10, 10],
+            },
+          ],
+        };
+
+        const toExcel = new ExportJsonExcel(option); //new
+        toExcel.saveExcel(); //保存
+      }
+    }
+  }, [B1TableList.list, topTyep]);
+
+  return (
+    <div className={styles.B1Plan}>
+      <div className="pageTitle">
+        进度统计&emsp;
+        <ExclamationCircleOutlined rev={undefined} />
+        <div>
+          当存在重复的机房编码时，请在[场景审核]中删除多余场景码后，重新统计
+        </div>
+      </div>
+      {/* 顶部筛选 */}
+      <div className="B1top">
+        <div className="B1topSon">
+          <div className="B1topRow">
+            {topTypeArr.map((v) => (
+              <Button
+                onClick={() => setTopTypeFu(v)}
+                type={v === topTyep ? "primary" : "default"}
+                key={v}
+              >
+                按{v}统计
+              </Button>
+            ))}
+          </div>
+          <div className="B1topRow" hidden={topTyep === "区域"}>
+            <span>搜索项：</span>
+            <Input
+              key={inputKey}
+              maxLength={24}
+              style={{ width: 323 }}
+              placeholder="请输入站址名称/站置编号/机房编码,最多24字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
+            />
+          </div>
+          <div className="B1topRow">
+            <span>站址地区：</span>
+            <Cascader
+              changeOnSelect
+              value={tableSelect.siteArr}
+              style={{ width: 160 }}
+              options={topTyep === "区域" ? mapDataAll2 : mapDataAll1}
+              placeholder="全部"
+              onChange={(e) =>
+                setTableSelect({
+                  ...tableSelect,
+                  siteArr: e as string[],
+                })
+              }
+            />
+          </div>
+          <div className="B1topRow" hidden={topTyep === "区域"}>
+            <span>项目经理：</span>
+            <Input
+              key={inputKey}
+              maxLength={10}
+              style={{ width: 200 }}
+              placeholder="请输入姓名,最多10字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "pmUser")}
+            />
+          </div>
+        </div>
+        <div className="B1topSon B1topSon2">
+          <div>
+            <div className="B1topRow" hidden={topTyep === "区域"}>
+              <span>场景审核：</span>
+              <Select
+                style={{ width: 200 }}
+                value={tableSelect.auditStatus}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, auditStatus: e })
+                }
+                options={B1options1}
+              />
+            </div>
+            <div className="B1topRow" hidden={topTyep === "区域"}>
+              <span>场景推送：</span>
+              <Select
+                style={{ width: 200 }}
+                value={tableSelect.pushStatus}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, pushStatus: e })
+                }
+                options={B1options2}
+              />
+            </div>
+            <div className="B1topRow" hidden={topTyep === "区域"}>
+              <span>Json推送：</span>
+              <Select
+                style={{ width: 200 }}
+                value={tableSelect.jsonStatus}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, jsonStatus: e })
+                }
+                options={B1options3}
+              />
+            </div>
+            <div className="B1topRowCheck" hidden={topTyep === "区域"}>
+              <Checkbox
+                checked={tableSelect.isUploadScene === 0}
+                onChange={(e) => {
+                  setInputKey(Date.now());
+                  setTableSelect({
+                    ...tableSelect,
+                    isUploadScene: e.target.checked ? 0 : 1,
+                  });
+                }}
+              >
+                仅查看未上传的机房
+              </Checkbox>
+            </div>
+          </div>
+          <div>
+            <Button onClick={resetSelectFu}>重置</Button>&emsp;
+            <Button type="primary" onClick={clickSearch}>
+              查询
+            </Button>
+            &emsp;
+            <Button type="primary" onClick={deriveFu}>
+              导出表格
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableMain">
+        <Table
+          scroll={{ y: 578 }}
+          dataSource={B1TableList.list}
+          columns={columns}
+          rowKey="id"
+          pagination={
+            topTyep === "区域"
+              ? false
+              : {
+                  showQuickJumper: true,
+                  position: ["bottomCenter"],
+                  showSizeChanger: true,
+                  current: tableSelect.pageNum,
+                  pageSize: tableSelect.pageSize,
+                  total: B1TableList.total,
+                  onChange: paginationChange(),
+                }
+          }
+        />
+      </div>
+      {/*  右下角的列表数量 */}
+      <div className="tableNumBox">
+        共 <span>{B1TableList.total}</span> 条数据
+      </div>
+    </div>
+  );
+}
+
+const MemoB1Plan = React.memo(B1Plan);
+
+export default MemoB1Plan;

src/pages/B1Plan/index.module.scss

@@ -1,5 +1,9 @@
 .B1Plan {
   :global {
+    .B1box{
+      width: 100%;
+      height: 100%;
+    }
     .pageTitle {
       display: flex;
       align-items: center;
@@ -15,6 +19,7 @@
       background-color: #fff;
       border-radius: 10px;
       padding: 15px 24px;
+      height: 109px;
 
       .B1topSon {
         display: flex;
@@ -29,6 +34,11 @@
         }
       }
 
+      .B1topRowCheck {
+        position: relative;
+        top: 3px;
+      }
+
       .B1topSon2 {
         display: flex;
         justify-content: space-between;
@@ -51,6 +61,24 @@
         overflow-y: auto !important;
         overflow-y: overlay !important;
 
+        .ant-table-cell {
+          padding: 8px !important;
+        }
+      }
+    }
+  }
+}
+
+.PlanModal{
+  :global{
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal {
+      width: 800px !important;
+      .B1Mbtn{
+        margin-top: 20px;
+        text-align: center;
       }
     }
   }

src/pages/B1Plan/index.tsx

@@ -1,336 +1,44 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useRef, useState } from "react";
 import styles from "./index.module.scss";
-import { Button, Cascader, Input, Select, Table, Tooltip } from "antd";
-import {
-  B1options1,
-  B1options1Obj,
-  B1options2,
-  B1options2Obj,
-  B1options3,
-  B2FromDataType,
-} from "./data";
-import {
-  ExclamationCircleOutlined,
-  QuestionCircleOutlined,
-} from "@ant-design/icons";
-import { useDispatch, useSelector } from "react-redux";
-import { B1_APIgetlist, B1_APIgetlistAll } from "@/store/action/B1Plan";
-import { RootState } from "@/store";
-import { B1tableType } from "@/types";
-import ExportJsonExcel from "js-export-excel";
-import { MessageFu } from "@/utils/message";
-import dayjs from "dayjs";
-import { mapDataAll1 } from "../C1User/AddUser/city";
-
+import B1tab1 from "./B1tab1";
+import B1tab2 from "./B1tab2";
 function B1Plan() {
-  const dispatch = useDispatch();
-
-  // 筛选和分页
-  const [tableSelect, setTableSelect] = useState<B2FromDataType>({
-    searchKey: "",
-    siteLevel: 2,
-    site: undefined,
-    pmUser: "",
-    auditStatus: "",
-    pushStatus: "",
-    jsonStatus: "",
-    pageSize: 10,
-    pageNum: 1,
-  });
-
-  // 发送接口的函数
-  const getListFu = useCallback(() => {
-    const obj = {
-      ...tableSelect,
-      site: tableSelect.site ? tableSelect.site[1] : null,
-    };
-    dispatch(B1_APIgetlist(obj));
-  }, [dispatch, tableSelect]);
-
-  useEffect(() => {
-    getListFu();
-  }, [getListFu]);
-
-  // 输入框的改变
-  const txtTimeRef = useRef(-1);
-  const txtChangeFu = useCallback(
-    (txt: string, key: "pmUser" | "searchKey") => {
-      clearTimeout(txtTimeRef.current);
-      txtTimeRef.current = window.setTimeout(() => {
-        setTableSelect({ ...tableSelect, [key]: txt, pageNum: 1 });
-      }, 500);
+  const [topType, setTopType] = useState<"机房" | "区域">("区域");
+
+  const sonSetTopTypeFu = useCallback(
+    (val: "机房" | "区域", arrTemp?: string[]) => {
+      setTopType(val);
+      if (arrTemp) {
+        // 设置 机房 组件  站址地区 回显
+        if (sonRef2.current) {
+          const objTemp: any = {};
+          objTemp.siteArr = arrTemp;
+          objTemp.province = arrTemp[0] || "";
+          objTemp.city = arrTemp[1 || ""];
+          objTemp.region = arrTemp[2] || "";
+
+          sonRef2.current.fatherFu(objTemp);
+        }
+      }
     },
-    [tableSelect]
+    []
   );
 
-  // 点击重置
-  const [inputKey, setInputKey] = useState(1);
-  const resetSelectFu = useCallback(() => {
-    // 把2个输入框和时间选择器清空
-    setInputKey(Date.now());
-    setTableSelect({
-      searchKey: "",
-      siteLevel: 2,
-      site: undefined,
-      pmUser: "",
-      auditStatus: "",
-      pushStatus: "",
-      jsonStatus: "",
-      pageSize: 10,
-      pageNum: 1,
-    });
-  }, []);
-
-  // 从仓库获取列表
-  const B1TableList = useSelector(
-    (state: RootState) => state.B1Plan.B1TableList
-  );
-
-  // 页码变化
-  const paginationChange = useCallback(
-    () => (pageNum: number, pageSize: number) => {
-      setTableSelect({ ...tableSelect, pageNum, pageSize });
-    },
-    [tableSelect]
-  );
-
-  const columns = useMemo(() => {
-    return [
-      {
-        title: "站址名称",
-        render: (item: B1tableType) => item.name || "（空）",
-      },
-      {
-        title: "站址编号",
-        render: (item: B1tableType) => item.siteNum || "（空）",
-      },
-      {
-        title: "站址地区",
-        render: (item: B1tableType) =>
-          !item.province && !item.city
-            ? "（空）"
-            : `${item.province} - ${item.city}`,
-      },
-      {
-        title: "机房编码",
-        dataIndex: "roomNum",
-      },
-      {
-        title: "项目经理",
-        render: (item: B1tableType) => item.pmName || "（空）",
-      },
-      {
-        title: "场景码",
-        render: (item: B1tableType) => item.sceneCode || "（空）",
-      },
-      {
-        title: "场景审核状态",
-        render: (item: B1tableType) =>
-          Reflect.get(B1options1Obj, item.auditStatus) || "（空）",
-      },
-      {
-        title: "场景推送状态",
-        render: (item: B1tableType) => (
-          <>
-            {Reflect.get(B1options2Obj, item.pushStatus) || "（空）"}
-            <span style={{ cursor: "pointer" }} hidden={!item.pushDesc}>
-              <Tooltip title={item.pushDesc}>
-                &nbsp;
-                <QuestionCircleOutlined rev={undefined} />
-              </Tooltip>
-            </span>
-          </>
-        ),
-      },
-      {
-        title: "Json推送状态",
-        render: (item: B1tableType) =>
-          Reflect.get(B1options2Obj, item.jsonStatus) || "（空）",
-      },
-    ];
-  }, []);
-  // 点击导出
-  const deriveFu = useCallback(async () => {
-    if (B1TableList.list.length === 0)
-      return MessageFu.warning("当前搜索条件没有数据!");
-    const name = "进度统计" + dayjs(new Date()).format("YYYY-MM-DD HH:mm");
-
-    const res = await B1_APIgetlistAll({
-      ...tableSelect,
-      site: tableSelect.site ? tableSelect.site[1] : null,
-      pageNum: 1,
-      pageSize: 99999,
-    });
-
-    if (res.code === 0) {
-      const option = {
-        fileName: name,
-        datas: [
-          {
-            sheetData: res.data.records.map((v: B1tableType) => ({
-              name: v.name || "（空）",
-              siteNum: v.siteNum || "（空）",
-              myCity:
-                !v.province && !v.city ? "（空）" : `${v.province} - ${v.city}`,
-              roomNum: v.roomNum,
-              pmName: v.pmName || "（空）",
-              sceneCode: v.sceneCode || "（空）",
-              auditStatus:
-                Reflect.get(B1options1Obj, v.auditStatus) || "（空）",
-              pushStatus: Reflect.get(B1options2Obj, v.pushStatus) || "（空）",
-              jsonStatus: Reflect.get(B1options2Obj, v.jsonStatus) || "（空）",
-            })),
-            sheetName: name,
-            sheetFilter: [
-              "name",
-              "siteNum",
-              "myCity",
-              "roomNum",
-              "pmName",
-              "sceneCode",
-              "auditStatus",
-              "pushStatus",
-              "jsonStatus",
-            ],
-            sheetHeader: [
-              "站址名称",
-              "站址编号",
-              "站址地区",
-              "机房编码",
-              "项目经理",
-              "场景码",
-              "场景审核状态",
-              "场景推送状态",
-              "Json推送状态",
-            ],
-            columnWidths: [10, 10, 10, 10, 10, 10, 10, 10, 10],
-          },
-        ],
-      };
-
-      const toExcel = new ExportJsonExcel(option); //new
-      toExcel.saveExcel(); //保存
-    }
-  }, [B1TableList.list.length, tableSelect]);
+  const sonRef2 = useRef<any>(null);
 
   return (
     <div className={styles.B1Plan}>
-      <div className="pageTitle">
-        进度统计&emsp;
-        <ExclamationCircleOutlined rev={undefined} />
-        <div>
-          当存在重复的机房编码时，请在[场景审核]中删除多余场景码后，重新统计
-        </div>
-      </div>
-      {/* 顶部筛选 */}
-      <div className="B1top">
-        <div className="B1topSon">
-          <div className="B1topRow">
-            <span>搜索项：</span>
-            <Input
-              key={inputKey}
-              maxLength={24}
-              style={{ width: 323 }}
-              placeholder="请输入站址名称/站置编号/机房编码,最多24字"
-              allowClear
-              onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
-            />
-          </div>
-          <div className="B1topRow">
-            <span>站址地区：</span>
-            <Cascader
-              value={tableSelect.site}
-              style={{ width: 160 }}
-              options={mapDataAll1}
-              placeholder="全部"
-              onChange={(e) =>
-                setTableSelect({
-                  ...tableSelect,
-                  site: e as string[],
-                  pageNum: 1,
-                })
-              }
-            />
-          </div>
-          <div className="B1topRow">
-            <span>项目经理：</span>
-            <Input
-              key={inputKey}
-              maxLength={10}
-              style={{ width: 200 }}
-              placeholder="请输入姓名,最多10字"
-              allowClear
-              onChange={(e) => txtChangeFu(e.target.value, "pmUser")}
-            />
-          </div>
-        </div>
-        <div className="B1topSon B1topSon2">
-          <div>
-            <div className="B1topRow">
-              <span>场景审核：</span>
-              <Select
-                style={{ width: 223 }}
-                value={tableSelect.auditStatus}
-                onChange={(e) =>
-                  setTableSelect({ ...tableSelect, auditStatus: e, pageNum: 1 })
-                }
-                options={B1options1}
-              />
-            </div>
-            <div className="B1topRow">
-              <span>场景推送：</span>
-              <Select
-                style={{ width: 223 }}
-                value={tableSelect.pushStatus}
-                onChange={(e) =>
-                  setTableSelect({ ...tableSelect, pushStatus: e, pageNum: 1 })
-                }
-                options={B1options2}
-              />
-            </div>
-            <div className="B1topRow">
-              <span>Json推送：</span>
-              <Select
-                style={{ width: 223 }}
-                value={tableSelect.jsonStatus}
-                onChange={(e) =>
-                  setTableSelect({ ...tableSelect, jsonStatus: e, pageNum: 1 })
-                }
-                options={B1options3}
-              />
-            </div>
-          </div>
-          <div>
-            <Button onClick={resetSelectFu}>重置</Button>&emsp;
-            <Button type="primary" onClick={deriveFu}>
-              导出表格
-            </Button>
-          </div>
-        </div>
+      <div className="B1box" hidden={topType === "机房"}>
+        <B1tab1
+          topType={topType}
+          setTopType={(val, arrTemp) => sonSetTopTypeFu(val, arrTemp)}
+        />
       </div>
-
-      {/* 表格主体 */}
-      <div className="tableMain">
-        <Table
-          scroll={{ y: 578 }}
-          dataSource={B1TableList.list}
-          columns={columns}
-          rowKey="id"
-          pagination={{
-            showQuickJumper: true,
-            position: ["bottomCenter"],
-            showSizeChanger: true,
-            current: tableSelect.pageNum,
-            pageSize: tableSelect.pageSize,
-            total: B1TableList.total,
-            onChange: paginationChange(),
-          }}
+      <div className="B1box" hidden={topType === "区域"}>
+        <B1tab2
+          topType={topType}
+          setTopType={(val) => sonSetTopTypeFu(val)}
+          ref={sonRef2}
         />
       </div>
     </div>

src/pages/C1User/AddUser/city.ts

@@ -6297,8 +6297,8 @@ temp.forEach((v) => {
   };
 
   temp1.push(obj1);
-  temp2.push(obj2)
+  temp2.push(obj2);
 });
 
-export const mapDataAll1 =temp1
-export const mapDataAll2 =temp2
+export const mapDataAll1 = temp1;
+export const mapDataAll2 = temp2;

src/store/action/B1Plan.ts

@@ -1,14 +1,17 @@
 import http from "@/utils/http";
 import { AppDispatch } from "..";
 /**
- * 获取 进度统计 表格列表（存到仓库）
+ * 获取 进度统计 表格列表（存到仓库）-按机房
  */
 export const B1_APIgetlist = (data: any) => {
   return async (dispatch: AppDispatch) => {
     const res = await http.post("cms/schedule/pageList", data);
     if (res.code === 0) {
       const obj = {
-        list: res.data.records,
+        list: res.data.records.map((v: any, index: number) => ({
+          ...v,
+          idKey: v.id + "" + index,
+        })),
         total: res.data.total,
       };
       dispatch({ type: "B1/getList", payload: obj });
@@ -17,8 +20,29 @@ export const B1_APIgetlist = (data: any) => {
 };
 
 /**
- * 获取 机房管理 表格列表（导出表格）
+ * 获取 机房管理 表格列表（导出表格）-按机房
  */
 export const B1_APIgetlistAll = (data: any) => {
   return http.post("cms/schedule/pageList", data);
 };
+
+/**
+ * 获取 进度统计 表格列表（存到仓库）-按区域
+ */
+export const B1_APIgetlistArea = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/schedule/report/region", data);
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.map((v: any) => ({
+          ...v,
+          id: `${v.province}${v.city ? "/" + v.city : ""}${
+            v.region ? "/" + v.region : ""
+          }`,
+        })),
+        total: res.data.length,
+      };
+      dispatch({ type: "B1/getListArea", payload: obj });
+    }
+  };
+};

src/store/reducer/B1Plan.ts

@@ -1,4 +1,4 @@
-import { B1tableType } from "@/types";
+import { B1tableAreaType, B1tableType } from "@/types";
 
 // 初始化状态
 const initState = {
@@ -7,13 +7,22 @@ const initState = {
     list: [] as B1tableType[],
     total: 0,
   },
+  B1TableListArea: {
+    list: [] as B1tableAreaType[],
+    total: 0,
+  },
 };
 
 // 定义 action 类型
-type Props = {
-  type: "B1/getList";
-  payload: { list: B1tableType[]; total: number };
-};
+type Props =
+  | {
+      type: "B1/getList";
+      payload: { list: B1tableType[]; total: number };
+    }
+  | {
+      type: "B1/getListArea";
+      payload: { list: B1tableAreaType[]; total: number };
+    };
 
 // reducer
 export default function Reducer(state = initState, action: Props) {
@@ -21,6 +30,8 @@ export default function Reducer(state = initState, action: Props) {
     // 获取列表数据
     case "B1/getList":
       return { ...state, B1TableList: action.payload };
+    case "B1/getListArea":
+      return { ...state, B1TableListArea: action.payload };
     default:
       return state;
   }

src/types/api/B1Plan.d.ts

@@ -2,7 +2,8 @@ export type B1tableType = {
   auditDesc: string;
   auditStatus: number;
   city: string;
-  creatorId:nulll|number
+  region: string;
+  creatorId: nulll | number;
   createTime: string;
   creatorName: string;
   id: number;
@@ -18,3 +19,16 @@ export type B1tableType = {
   siteNum: string;
   updateTime: string;
 };
+export type B1tableAreaType = {
+  id:string
+  pcsCalculate: number;
+  pcsFirst: number;
+  pcsPass: number;
+  pcsPushJson: number;
+  pcsPushLink: number;
+  pcsPushScene: number;
+  pcsReject: number;
+  pcsRoom: number;
+  pcsScene: number;
+  region: string;
+};

src/utils/http.ts

@@ -7,11 +7,11 @@ import { domShowFu } from "./domShow";
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
-  // process.env.NODE_ENV === "development"
-  //   ? "http://192.168.20.61:8057/api/"
-  //   : "";
+  process.env.NODE_ENV === "development"
+    ? "http://192.168.20.61:8057/api/"
+    : "";
   // process.env.NODE_ENV === "development" ? "https://tower3d.4dkankan.com" : ""; //正式环境
-  process.env.NODE_ENV === "development" ? "https://sit-tieta3d.4dage.com" : ""; //测试环境
+  // process.env.NODE_ENV === "development" ? "https://sit-tieta3d.4dage.com" : ""; //测试环境
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module "axios" {
@@ -25,10 +25,10 @@ declare module "axios" {
 // 创建 axios 实例
 const http = axios.create({
   // --------线下的地址不用加/api/
-  // baseURL: baseURL,
+  baseURL: baseURL,
 
   // --------打包或线上环境接口需要加上api/
-  baseURL: baseURL + "/api/",
+  // baseURL: baseURL + "/api/",
   timeout: 20000,
 });