|
|
@@ -0,0 +1,383 @@
|
|
|
+import React, {
|
|
|
+ useCallback,
|
|
|
+ useEffect,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+} from "react";
|
|
|
+import styles from "./index.module.scss";
|
|
|
+import { useDispatch, useSelector } from "react-redux";
|
|
|
+import { B4FromDataType } from "./data";
|
|
|
+import { B4_APIgetlist, B4_APIgetlistAll } from "@/store/action/B4JsonPush";
|
|
|
+import { RootState } from "@/store";
|
|
|
+import { B4tableType } from "@/types";
|
|
|
+import { B1options2, B1options2Obj } from "../B1Plan/data";
|
|
|
+import { Button, Cascader, Input, Select, Table, Tooltip } from "antd";
|
|
|
+import { QuestionCircleOutlined } from "@ant-design/icons";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import ExportJsonExcel from "js-export-excel";
|
|
|
+import { mapDataAll1 } from "../C1User/AddUser/city";
|
|
|
+
|
|
|
+function B4JsonPush() {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+
|
|
|
+ // 筛选和分页
|
|
|
+ const [tableSelect, setTableSelect] = useState<B4FromDataType>({
|
|
|
+ siteArr: undefined,
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ region: "",
|
|
|
+ pmUser: "",
|
|
|
+ jsonStatus: "",
|
|
|
+ linkStatus: "",
|
|
|
+ searchKey: "",
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ });
|
|
|
+
|
|
|
+ const tableSelectRef = useRef({} as B4FromDataType);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ tableSelectRef.current = { ...tableSelect };
|
|
|
+ }, [tableSelect]);
|
|
|
+
|
|
|
+ // 点击搜索的 时间戳
|
|
|
+ const [timeKey, setTimeKey] = useState(-1);
|
|
|
+
|
|
|
+ // 发送接口的函数
|
|
|
+ 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(B4_APIgetlist(obj));
|
|
|
+ }, [dispatch]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getListFu();
|
|
|
+ }, [getListFu, timeKey]);
|
|
|
+
|
|
|
+ // 输入框的改变
|
|
|
+ const txtChangeFu = useCallback(
|
|
|
+ (txt: string, key: "pmUser" | "searchKey") => {
|
|
|
+ setTableSelect({ ...tableSelect, [key]: txt });
|
|
|
+ },
|
|
|
+ [tableSelect]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 点击搜索
|
|
|
+ const clickSearch = useCallback(() => {
|
|
|
+ setTableSelect({ ...tableSelect, pageNum: 1 });
|
|
|
+ setTimeout(() => {
|
|
|
+ setTimeKey(Date.now());
|
|
|
+ }, 50);
|
|
|
+ }, [tableSelect]);
|
|
|
+
|
|
|
+ // 点击重置
|
|
|
+ const [inputKey, setInputKey] = useState(1);
|
|
|
+ const resetSelectFu = useCallback(() => {
|
|
|
+ // 把2个输入框和时间选择器清空
|
|
|
+ setInputKey(Date.now());
|
|
|
+ setTableSelect({
|
|
|
+ siteArr: undefined,
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ region: "",
|
|
|
+ pmUser: "",
|
|
|
+ jsonStatus: "",
|
|
|
+ linkStatus: "",
|
|
|
+ searchKey: "",
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ setTimeKey(Date.now());
|
|
|
+ }, 50);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 从仓库获取列表
|
|
|
+ const B4TableList = useSelector(
|
|
|
+ (state: RootState) => state.B4JsonPush.B4TableList
|
|
|
+ );
|
|
|
+
|
|
|
+ // 页码变化
|
|
|
+ const paginationChange = useCallback(
|
|
|
+ () => (pageNum: number, pageSize: number) => {
|
|
|
+ setTableSelect({ ...tableSelect, pageNum, pageSize });
|
|
|
+ setTimeout(() => {
|
|
|
+ setTimeKey(Date.now());
|
|
|
+ }, 50);
|
|
|
+ },
|
|
|
+ [tableSelect]
|
|
|
+ );
|
|
|
+
|
|
|
+ const columns = useMemo(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ title: "机房编码",
|
|
|
+ render: (item: B4tableType) => item.roomNum || "（空）",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "站址地区",
|
|
|
+ render: (item: B4tableType) =>
|
|
|
+ !item.province && !item.city && !item.region
|
|
|
+ ? "（空）"
|
|
|
+ : `${item.province}-${item.city}-${item.region}`,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "项目经理",
|
|
|
+ render: (item: B4tableType) => {
|
|
|
+ if (item.creatorId === 1) return "管理员";
|
|
|
+ else {
|
|
|
+ return item.pmName || "（空）";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "场景码",
|
|
|
+ render: (item: B4tableType) => item.sceneCode || "（空）",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "链接推送状态",
|
|
|
+ render: (item: B4tableType) => (
|
|
|
+ <>
|
|
|
+ {Reflect.get(B1options2Obj, item.pushLinkStatus) || "（空）"}
|
|
|
+ <span style={{ cursor: "pointer" }} hidden={!item.pushLinkDesc}>
|
|
|
+ <Tooltip title={item.pushLinkDesc}>
|
|
|
+
|
|
|
+ <QuestionCircleOutlined rev={undefined} />
|
|
|
+ </Tooltip>
|
|
|
+ </span>
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "状态更新时间",
|
|
|
+ render: (item: B4tableType) => item.pushLinkTime || "（空）",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "Json推送状态",
|
|
|
+ render: (item: B4tableType) => (
|
|
|
+ <>
|
|
|
+ {Reflect.get(B1options2Obj, item.jsonStatus) || "（空）"}
|
|
|
+ <span style={{ cursor: "pointer" }} hidden={!item.jsonDesc}>
|
|
|
+ <Tooltip title={item.jsonDesc}>
|
|
|
+
|
|
|
+ <QuestionCircleOutlined rev={undefined} />
|
|
|
+ </Tooltip>
|
|
|
+ </span>
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "状态更新时间",
|
|
|
+ render: (item: B4tableType) => item.jsonUpdateTime || "（空）",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 点击导出
|
|
|
+ const deriveFu = useCallback(async () => {
|
|
|
+ if (B4TableList.total > 30000)
|
|
|
+ return MessageFu.warning(
|
|
|
+ "只支持导出最多30000条数据。请增加筛选条件，并重新尝试"
|
|
|
+ );
|
|
|
+
|
|
|
+ if (B4TableList.list.length === 0)
|
|
|
+ return MessageFu.warning("当前搜索条件没有数据!");
|
|
|
+ const name = "Json推送" + 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 B4_APIgetlistAll({
|
|
|
+ ...tableSelect,
|
|
|
+ ...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: B4tableType) => ({
|
|
|
+ roomNum: v.roomNum || "（空）",
|
|
|
+ myCity:
|
|
|
+ !v.province && !v.city && !v.region
|
|
|
+ ? "（空）"
|
|
|
+ : `${v.province}-${v.city}-${v.region}`,
|
|
|
+ pmName: v.creatorId === 1 ? "管理员" : v.pmName || "（空）",
|
|
|
+ sceneCode: v.sceneCode || "（空）",
|
|
|
+ pushLinkStatus:
|
|
|
+ Reflect.get(B1options2Obj, v.pushLinkStatus) || "（空）",
|
|
|
+ pushLinkDesc: v.pushLinkDesc || "（空）",
|
|
|
+ pushLinkTime: v.pushLinkTime || "（空）",
|
|
|
+ jsonStatus: Reflect.get(B1options2Obj, v.jsonStatus) || "（空）",
|
|
|
+ jsonDesc: v.jsonDesc || "（空）",
|
|
|
+ jsonUpdateTime: v.jsonUpdateTime || "（空）",
|
|
|
+ })),
|
|
|
+ sheetName: name,
|
|
|
+ sheetFilter: [
|
|
|
+ "roomNum",
|
|
|
+ "myCity",
|
|
|
+ "pmName",
|
|
|
+ "sceneCode",
|
|
|
+ "pushLinkStatus",
|
|
|
+ "pushLinkDesc",
|
|
|
+ "pushLinkTime",
|
|
|
+ "jsonStatus",
|
|
|
+ "jsonDesc",
|
|
|
+ "jsonUpdateTime",
|
|
|
+ ],
|
|
|
+ sheetHeader: [
|
|
|
+ "机房编码",
|
|
|
+ "站址地区",
|
|
|
+ "项目经理",
|
|
|
+ "场景码",
|
|
|
+ "链接推送状态",
|
|
|
+ "链接推送状态描述",
|
|
|
+ "状态更新时间",
|
|
|
+ "Json推送状态",
|
|
|
+ "Json推送状态描述",
|
|
|
+ "状态更新时间",
|
|
|
+ ],
|
|
|
+ columnWidths: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ const toExcel = new ExportJsonExcel(option); //new
|
|
|
+ toExcel.saveExcel(); //保存
|
|
|
+ }
|
|
|
+ }, [B4TableList.list.length, B4TableList.total, tableSelect]);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.B4JsonPush}>
|
|
|
+ <div className="pageTitle">Json推送</div>
|
|
|
+ {/*顶部筛选 */}
|
|
|
+ <div className="B4top">
|
|
|
+ <div className="B4topSon">
|
|
|
+ <div className="B4topRow">
|
|
|
+ <span>搜索项：</span>
|
|
|
+ <Input
|
|
|
+ key={inputKey}
|
|
|
+ maxLength={24}
|
|
|
+ style={{ width: 260 }}
|
|
|
+ placeholder="请输入机房编码/场景码，最多24字"
|
|
|
+ allowClear
|
|
|
+ onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="B4topRow">
|
|
|
+ <span>站址地区：</span>
|
|
|
+ <Cascader
|
|
|
+ changeOnSelect
|
|
|
+ value={tableSelect.siteArr}
|
|
|
+ style={{ width: 200 }}
|
|
|
+ options={mapDataAll1}
|
|
|
+ placeholder="全部"
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, siteArr: e as string[] })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="B4topRow">
|
|
|
+ <span>项目经理：</span>
|
|
|
+ <Input
|
|
|
+ key={inputKey}
|
|
|
+ maxLength={10}
|
|
|
+ style={{ width: 200 }}
|
|
|
+ placeholder="请输入姓名,最多10字"
|
|
|
+ allowClear
|
|
|
+ onChange={(e) => txtChangeFu(e.target.value, "pmUser")}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="B4topSon B4topSon2">
|
|
|
+ <div>
|
|
|
+ <div className="B4topRow">
|
|
|
+ <span>链接推送状态：</span>
|
|
|
+ <Select
|
|
|
+ style={{ width: 194 }}
|
|
|
+ value={tableSelect.linkStatus}
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, linkStatus: e })
|
|
|
+ }
|
|
|
+ options={B1options2}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className="B4topRow">
|
|
|
+ <span>Json推送状态：</span>
|
|
|
+ <Select
|
|
|
+ style={{ width: 194 }}
|
|
|
+ value={tableSelect.jsonStatus}
|
|
|
+ onChange={(e) =>
|
|
|
+ setTableSelect({ ...tableSelect, jsonStatus: e })
|
|
|
+ }
|
|
|
+ options={B1options2}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <Button onClick={resetSelectFu}>重置</Button> 
|
|
|
+ <Button type="primary" onClick={clickSearch}>
|
|
|
+ 查询
|
|
|
+ </Button>
|
|
|
+  
|
|
|
+ <Button type="primary" onClick={deriveFu}>
|
|
|
+ 导出表格
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 表格主体 */}
|
|
|
+ <div className="tableMain">
|
|
|
+ <Table
|
|
|
+ scroll={{ y: 578 }}
|
|
|
+ dataSource={B4TableList.list}
|
|
|
+ columns={columns}
|
|
|
+ rowKey="id"
|
|
|
+ pagination={{
|
|
|
+ showQuickJumper: true,
|
|
|
+ position: ["bottomCenter"],
|
|
|
+ showSizeChanger: true,
|
|
|
+ current: tableSelect.pageNum,
|
|
|
+ pageSize: tableSelect.pageSize,
|
|
|
+ total: B4TableList.total,
|
|
|
+ onChange: paginationChange(),
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {/* 右下角的列表数量 */}
|
|
|
+ <div className="tableNumBox">
|
|
|
+ 共 <span>{B4TableList.total}</span> 条数据
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const MemoB4JsonPush = React.memo(B4JsonPush);
|
|
|
+
|
|
|
+export default MemoB4JsonPush;
|
