up-推送管理

src/pages/A2Psychz/AddPsychz/index.module.scss

@@ -26,6 +26,9 @@
         transform: translateX(-50%);
 
       }
+      textarea{
+        min-height: 60px !important;
+      }
 
       .e_row {
         display: flex;

src/pages/A2Psychz/AddPsychz/index.tsx

@@ -25,6 +25,7 @@ import { RootState } from "@/store";
 import { A2_APIadd, A2_APIgetInfo } from "@/store/action/A2Psychz";
 import { MessageFu } from "@/utils/message";
 import { getTokenInfo } from "@/utils/storage";
+import TextArea from "antd/es/input/TextArea";
 
 type Props = {
   openInfo: A1addType;
@@ -80,7 +81,8 @@ function AddPsychz({ openInfo, closeFu, upTableFu, addTableFu }: Props) {
     async (value: any) => {
       setIsOk(true);
 
-      if (roomList.filter((v) => v).length <= 0) return;
+      const tempArr = roomList.filter((v) => v && v.length >= 24);
+      if (roomList.length > tempArr.length) return;
 
       // 校验新增的时候的机房编码
       if (numIsAgain) return;
@@ -155,7 +157,7 @@ function AddPsychz({ openInfo, closeFu, upTableFu, addTableFu }: Props) {
             name="address"
             getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
           >
-            <Input maxLength={20} showCount placeholder="请输入内容" />
+            <TextArea placeholder="请输入内容" showCount maxLength={50} />
           </Form.Item>
 
           <Form.Item
@@ -208,7 +210,7 @@ function AddPsychz({ openInfo, closeFu, upTableFu, addTableFu }: Props) {
                   className={classNames(
                     "e_rowRrow",
                     roomList.length >= 10 ? "e_rowRrowIconHide" : "",
-                    isOk && !v ? "e_rowRrowErr" : "",
+                    isOk && (!v || v.length < 24) ? "e_rowRrowErr" : "",
                     openInfo.txt === "编辑" ? "e_rowRrowEdit" : ""
                   )}
                   key={i}
@@ -236,17 +238,21 @@ function AddPsychz({ openInfo, closeFu, upTableFu, addTableFu }: Props) {
                   <Input
                     value={v}
                     onChange={(e) => {
+                      console.log(e.target.value.replace(/[^\d]/g, ""));
+
                       setRoomList(
                         roomList.map((c, ci) =>
-                          ci === i ? e.target.value.replace(/\s+/g, "") : c
+                          ci === i ? e.target.value.replace(/[^\d]/g, "") : c
                         )
                       );
                     }}
-                    maxLength={20}
+                    maxLength={24}
                     showCount
-                    placeholder="请输入内容"
+                    placeholder="请输24位纯数字"
                   />
-                  <div className="e_rowRrowTit">请输入机房编码!</div>
+                  <div className="e_rowRrowTit">
+                    {v.length === 0 ? "请输入机房编码!" : "请输入24位纯数字!"}
+                  </div>
                 </div>
               ))}
             </div>

src/pages/B3Push/data.ts

@@ -0,0 +1,10 @@
+export type B3FromDataType= {
+  jsonStatus: "" | 0 | 2 | 3;
+  pmUser: string;
+  pushStatus: "" | 0 | 2 | 3;
+  searchKey: string;
+  site: undefined|string[];
+  siteLevel: 2;
+  pageSize: number;
+  pageNum: number;
+}

src/pages/B3Push/index.module.scss

@@ -1,5 +1,53 @@
-.B3Push{
-  :global{
-    
+.B3Push {
+  :global {
+    .pageTitle {
+      &>span {
+        font-size: 14px;
+        color: #999;
+      }
+    }
+
+    .B3top {
+      background-color: #fff;
+      border-radius: 10px;
+      padding: 15px 24px;
+
+      .B3topSon {
+        display: flex;
+
+        .B3topRow {
+          margin-right: 20px;
+
+          // 级联选择器的 placeholder
+          .ant-select-selection-placeholder {
+            color: black;
+          }
+        }
+      }
+
+      .B3topSon2 {
+        margin-top: 15px;
+        display: flex;
+        justify-content: space-between;
+
+        &>div {
+          display: flex;
+        }
+      }
+    }
+
+    .tableMain {
+      border-radius: 10px;
+      margin-top: 15px;
+      height: calc(100% - 127px);
+      background-color: #fff;
+
+      .ant-table-body {
+        height: 578px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+
+      }
+    }
   }
 }

src/pages/B3Push/index.tsx

@@ -1,12 +1,354 @@
-import React from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
- function B3Push() {
-  
+import {
+  Button,
+  Cascader,
+  Input,
+  Popconfirm,
+  Select,
+  Table,
+  Tooltip,
+} from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import mapDataAll from "../C1User/AddUser/city";
+import { B3FromDataType } from "./data";
+import { B1options2, B1options2Obj } from "../B1Plan/data";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { B3_APIgetlist, B3_APIpush } from "@/store/action/B3Push";
+import { RootState } from "@/store";
+import { B3tableType } from "@/types";
+import { MessageFu } from "@/utils/message";
+
+function B3Push() {
+  const dispatch = useDispatch();
+
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState<B3FromDataType>({
+    jsonStatus: "",
+    pmUser: "",
+    pushStatus: "",
+    searchKey: "",
+    site: undefined,
+    siteLevel: 2,
+    pageSize: 10,
+    pageNum: 1,
+  });
+
+  // 发送接口的函数
+  const getListFu = useCallback(() => {
+    const obj = {
+      ...tableSelect,
+      site: tableSelect.site ? tableSelect.site[1] : null,
+    };
+    dispatch(B3_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({
+      jsonStatus: "",
+      pmUser: "",
+      pushStatus: "",
+      searchKey: "",
+      site: undefined,
+      siteLevel: 2,
+      pageSize: 10,
+      pageNum: 1,
+    });
+  }, []);
+
+  // 从仓库获取列表
+  const B3TableList = useSelector(
+    (state: RootState) => state.B3Push.B3TableList
+  );
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setTableSelect({ ...tableSelect, pageNum, pageSize });
+    },
+    [tableSelect]
+  );
+
+  // 关于表格的多选
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const selectedRef = useRef([] as string[]);
+
+  // 清空选中
+  // setSelectedRowKeys([]);
+
+  // 点击推送
+  const pushsTit = useRef([0, 0, 0]);
+
+  const pushFu = useCallback(
+    async (code: string) => {
+      const res = await B3_APIpush(code.split(","));
+
+      if (res.code === 0) {
+        MessageFu.success("推送成功!");
+        getListFu();
+      }
+    },
+    [getListFu]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "机房编码",
+        render: (item: B3tableType) => item.roomNum || "（空）",
+      },
+      {
+        title: "站址地区",
+        render: (item: B3tableType) =>
+          !item.province && !item.city
+            ? "（空）"
+            : `${item.province} - ${item.city}`,
+      },
+      {
+        title: "项目经理",
+        render: (item: B3tableType) => {
+          if (item.creatorId === 1) return "管理员";
+          else {
+            return item.pmName || "匿名";
+          }
+        },
+      },
+      {
+        title: "场景码",
+        render: (item: B3tableType) => item.sceneCode || "（空）",
+      },
+      {
+        title: "场景推送状态",
+        render: (item: B3tableType) => (
+          <>
+            {Reflect.get(B1options2Obj, item.pushStatus) || "（空）"}
+            <span style={{ cursor: "pointer" }} hidden={!item.pushDesc}>
+              <Tooltip title={item.pushDesc}>
+                &nbsp;
+                <QuestionCircleOutlined rev={undefined} />
+              </Tooltip>
+            </span>
+          </>
+        ),
+      },
+      {
+        title: "场景推送时间",
+        render: (item: B3tableType) => item.pushTime || "（空）",
+      },
+      {
+        title: "Json类型",
+        render: (item: B3tableType) =>
+          item.jsonType === 1 ? "算法" : "人工" || "（空）",
+      },
+      {
+        title: "Json更新时间",
+        render: (item: B3tableType) => item.jsonUpdateTime || "（空）",
+      },
+      {
+        title: "Json推送状态",
+        render: (item: B3tableType) => (
+          <>
+            {Reflect.get(B1options2Obj, item.jsonStatus) || "（空）"}
+            <span style={{ cursor: "pointer" }} hidden={!item.jsonDesc}>
+              <Tooltip title={item.jsonDesc}>
+                &nbsp;
+                <QuestionCircleOutlined rev={undefined} />
+              </Tooltip>
+            </span>
+          </>
+        ),
+      },
+      {
+        title: "Json推送时间",
+        render: (item: B3tableType) => item.jsonPushTime || "（空）",
+      },
+      {
+        title: "操作",
+        render: (item: B3tableType) => (
+          <Button
+            size="small"
+            type="text"
+            onClick={() => pushFu(item.sceneCode)}
+          >
+            推送
+          </Button>
+        ),
+      },
+    ];
+  }, [pushFu]);
+
   return (
     <div className={styles.B3Push}>
-      <h1>B3Push</h1>
+      <div className="pageTitle">
+        进度统计&emsp;<span>仅显示审核通过的场景</span>
+      </div>
+      {/*顶部筛选 */}
+      <div className="B3top">
+        <div className="B3topSon">
+          <div className="B3topRow">
+            <span>搜索项：</span>
+            <Input
+              key={inputKey}
+              maxLength={10}
+              style={{ width: 260 }}
+              placeholder="请输入机房编码/场景码，最多10字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
+            />
+          </div>
+
+          <div className="B3topRow">
+            <span>站址地区：</span>
+            <Cascader
+              value={tableSelect.site}
+              style={{ width: 200 }}
+              options={mapDataAll}
+              placeholder="全部"
+              onChange={(e) =>
+                setTableSelect({ ...tableSelect, site: e as string[] })
+              }
+            />
+          </div>
+
+          <div className="B3topRow">
+            <span>项目经理：</span>
+            <Input
+              key={inputKey}
+              maxLength={10}
+              style={{ width: 200 }}
+              placeholder="请输入姓名,最多10字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "pmUser")}
+            />
+          </div>
+        </div>
+        <div className="B3topSon B3topSon2">
+          <div>
+            <div className="B3topRow">
+              <span>场景推送状态：</span>
+              <Select
+                style={{ width: 194 }}
+                value={tableSelect.jsonStatus}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, jsonStatus: e, pageNum: 1 })
+                }
+                options={B1options2}
+              />
+            </div>
+            <div className="B3topRow">
+              <span>Json推送状态：</span>
+              <Select
+                style={{ width: 194 }}
+                value={tableSelect.pushStatus}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, pushStatus: e, pageNum: 1 })
+                }
+                options={B1options2}
+              />
+            </div>
+          </div>
+          <div>
+            <Button onClick={resetSelectFu}>重置</Button>&emsp;
+            <Popconfirm
+              placement="bottomRight"
+              title={
+                <>
+                  请确定是否推送所选文件?
+                  <br /> 当前共选中{pushsTit.current[0]}个机房编码 <br />共
+                  {pushsTit.current[1]}个场景可推送，{pushsTit.current[2]}
+                  个Json文件可推送
+                </>
+              }
+              okText="推送"
+              cancelText="取消"
+              onConfirm={() => pushFu(selectedRef.current.join(","))}
+              okButtonProps={{ loading: false }}
+              disabled={selectedRowKeys.length <= 0}
+            >
+              <Button type="primary" disabled={selectedRowKeys.length <= 0}>
+                批量推送
+              </Button>
+            </Popconfirm>
+            &nbsp;
+            <Tooltip title="仅推送审核通过 且 未推送或推送失败的文件">
+              <QuestionCircleOutlined
+                rev={undefined}
+                style={{ cursor: "pointer" }}
+              />
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableMain">
+        <Table
+          rowSelection={{
+            type: "checkbox",
+            selectedRowKeys,
+            onChange: (keys: React.Key[], arr) => {
+              // 用于表格数据的勾选状态在页面显示
+              setSelectedRowKeys(keys);
+
+              // 用于发送接口的code数组
+              selectedRef.current = arr.map((v) => v.sceneCode);
+
+              // 用于批量推送的文字提示
+              pushsTit.current = [
+                arr.length,
+                arr.filter((v) => v.pushStatus !== 2).length,
+                arr.filter((v) => v.jsonStatus !== 2).length,
+              ];
+            },
+            getCheckboxProps: (item) => {
+              return {
+                disabled: !(item.pushStatus !== 2 && item.jsonStatus !== 2),
+              };
+            },
+          }}
+          scroll={{ y: 578 }}
+          dataSource={B3TableList.list}
+          columns={columns}
+          rowKey="id"
+          pagination={{
+            showQuickJumper: true,
+            position: ["bottomCenter"],
+            showSizeChanger: true,
+            current: tableSelect.pageNum,
+            pageSize: tableSelect.pageSize,
+            total: B3TableList.total,
+            onChange: paginationChange(),
+          }}
+        />
+      </div>
     </div>
-  )
+  );
 }
 
 const MemoB3Push = React.memo(B3Push);

src/store/action/B3Push.ts

@@ -0,0 +1,24 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+/**
+ * 获取 进度统计 表格列表（存到仓库）
+ */
+export const B3_APIgetlist = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/push/pageList", data);
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records,
+        total: res.data.total,
+      };
+      dispatch({ type: "B3/getList", payload: obj });
+    }
+  };
+};
+
+/**
+ * 点击推送
+ */
+export const B3_APIpush = (arr: string[]) => {
+  return http.post(`cms/push/send`, { sceneCodes: arr });
+};

src/store/reducer/B3Push.ts

@@ -0,0 +1,27 @@
+import { B3tableType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  B3TableList: {
+    list: [] as B3tableType[],
+    total: 0,
+  },
+};
+
+// 定义 action 类型
+type Props = {
+  type: "B3/getList";
+  payload: { list: B3tableType[]; total: number };
+};
+
+// reducer
+export default function Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "B3/getList":
+      return { ...state, B3TableList: action.payload };
+    default:
+      return state;
+  }
+}

src/store/reducer/index.ts

@@ -7,6 +7,7 @@ import A1Camera from "./A1Camera";
 import A2Psychz from "./A2Psychz";
 import B1Plan from "./B1Plan";
 import B2Scene from "./B2Scene";
+import B3Push from "./B3Push";
 import C1User from "./C1User";
 import C2Log from "./C2Log";
 
@@ -17,6 +18,7 @@ const rootReducer = combineReducers({
   A2Psychz,
   B1Plan,
   B2Scene,
+  B3Push,
   C1User,
   C2Log,
 });

src/types/api/B3Push.d.ts

@@ -0,0 +1,20 @@
+export type B3tableType = {
+  city: string;
+  createTime: string;
+  creatorId: number;
+  creatorName: string;
+  id: number;
+  jsonDesc: string;
+  jsonStatus: number;
+  jsonPushTime: string;
+  jsonType: number;
+  pmName: string;
+  province: string;
+  pushDesc: string;
+  pushStatus: number;
+  pushTime: string;
+  roomNum: string;
+  sceneCode: string;
+  updateTime: string;
+  jsonUpdateTime:string
+};

src/types/index.d.ts

@@ -3,5 +3,6 @@ export * from './api/A1Camera'
 export * from './api/A2Psychz'
 export * from './api/B1Plan'
 export * from './api/B2Scene'
+export * from './api/B3Push'
 export * from './api/C1User'
 export * from './api/C2Log'