|
@@ -1,12 +1,341 @@
|
|
|
-import React from "react";
|
|
|
+import React, {
|
|
|
+ useCallback,
|
|
|
+ useEffect,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+} from "react";
|
|
|
import styles from "./index.module.scss";
|
|
|
- function B1Plan() {
|
|
|
-
|
|
|
+import { Button, Cascader, Input, Select, Table, Tooltip } from "antd";
|
|
|
+import mapDataAll from "../C1User/AddUser/city";
|
|
|
+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";
|
|
|
+
|
|
|
+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);
|
|
|
+ },
|
|
|
+ [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) => {
|
|
|
+ if (item.creatorId === 1) return "管理员";
|
|
|
+ else {
|
|
|
+ return 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}>
|
|
|
+
|
|
|
+ <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.creatorId === 1 ? "管理员" : 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]);
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.B1Plan}>
|
|
|
- <h1>B1Plan</h1>
|
|
|
+ <div className="pageTitle">
|
|
|
+ 进度统计 
|
|
|
+ <ExclamationCircleOutlined rev={undefined} />
|
|
|
+ <div>
|
|
|
+ 当存在重复的机房编码时,请在[场景审核]中删除多余场景码后,重新统计
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/* 顶部筛选 */}
|
|
|
+ <div className="B1top">
|
|
|
+ <div className="B1topSon">
|
|
|
+ <div className="B1topRow">
|
|
|
+ <span>搜索项:</span>
|
|
|
+ <Input
|
|
|
+ key={inputKey}
|
|
|
+ maxLength={10}
|
|
|
+ style={{ width: 323 }}
|
|
|
+ placeholder="请输入站址名称/站置编号/机房编码,最多10字"
|
|
|
+ allowClear
|
|
|
+ onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="B1topRow">
|
|
|
+ <span>站址地区:</span>
|
|
|
+ <Cascader
|
|
|
+ value={tableSelect.site}
|
|
|
+ style={{ width: 160 }}
|
|
|
+ options={mapDataAll}
|
|
|
+ placeholder="全部"
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, site: 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: 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> 
|
|
|
+ <Button type="primary" onClick={deriveFu}>
|
|
|
+ 导出表格
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
</div>
|
|
|
- )
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
const MemoB1Plan = React.memo(B1Plan);
|