From 6915209046d95ae4f2e88a4997a746917a638213 Mon Sep 17 00:00:00 2001 From: deartibers <947466799@qq.com> Date: Tue, 12 Jul 2022 15:08:21 +0800 Subject: [PATCH] =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=A0=81=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E5=92=8C=E4=BF=A1=E9=B8=BD=E6=9C=8D=E5=8A=A1=E4=B8=BB=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/sections/offline/components/setup.jsx | 138 ++++ .../offline/containers/carrierpigeon.jsx | 598 +++++++++++++++++- .../offline/containers/statuscode.jsx | 597 ++++++++++++++++- 3 files changed, 1309 insertions(+), 24 deletions(-) create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/offline/components/setup.jsx diff --git a/code/VideoAccess-VCMP/web/client/src/sections/offline/components/setup.jsx b/code/VideoAccess-VCMP/web/client/src/sections/offline/components/setup.jsx new file mode 100644 index 0000000..99ddc86 --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/offline/components/setup.jsx @@ -0,0 +1,138 @@ +import React, { useState, useEffect } from "react"; +import { + Modal, + CheckboxGroup, + Checkbox, +} from "@douyinfe/semi-ui"; + +function Setup(props) { + const { + visible, + close, + CODE,//错误码 + PIGEON,//信鸽 + pigeonSetup, + } = props; + const [check, setCheck] = useState([]); + + const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; + + useEffect(() => { + //获取是否勾选信息 + const codeItem = localStorage.getItem(CODE); + const pigeonItem = localStorage.getItem(PIGEON); + if (pigeonSetup) { + setCheck(pigeonItem ? JSON.parse(pigeonItem) : []); + } else { + setCheck(codeItem ? JSON.parse(codeItem) : []); + } + ischeck(); + }, []); + + const equipmentCode = [//状态码管理 + { name: "常规解决方案", value: "manufactor" }, + { name: "状态频率", value: "accountNumber" }, + ]; + const equipmentCarrierpigeon = [//信鸽服务 + { name: "策略类型", value: "manufactor" }, + { name: "推送机制", value: "type" }, + { name: "监听设备数量", value: "state" }, + { name: "累计推送次数", value: "support" }, + ]; + + function ischeck(value) { + if (check.length >= 8) { + if (check.includes(value)) { + return false; + } else { + return true; + } + } + } + + return ( + + 表格属性设置 + + {check.length}/8 + + + } + visible={visible} + style={{ width: 600 }} + onOk={() => { + pigeonSetup + ? localStorage.setItem(PIGEON, JSON.stringify(check)) + : localStorage.setItem(CODE, JSON.stringify(check)); + close(); + }} + onCancel={() => { + close(); + }} + > + { + setCheck(check); + ischeck(); + }} + > +
+
+ {pigeonSetup?'推送信息':'状态码信息'} +
+
+ {(pigeonSetup ? equipmentCarrierpigeon : equipmentCode).map((item) => { + return ( + + {item.name} + + ); + })} +
+
+ + + ); +} + +export default Setup; diff --git a/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx b/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx index 695cb73..e86ffea 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/carrierpigeon.jsx @@ -1,20 +1,594 @@ -import React, { useEffect } from 'react'; -import { connect } from 'react-redux'; -import { Coming } from '$components' -import '../style.less' +import React, { useState, useEffect, useRef } from "react"; +import { connect } from "react-redux"; +import moment from "moment"; +import { Button, Form, Table, Pagination, Skeleton, Popconfirm, Popover, Tag, } from "@douyinfe/semi-ui"; +import "../style.less"; +import { ApiTable } from "$utils"; +import Setup from "../components/setup"; +// import SideSheets from "../components/sideSheet"; +// import { skeletonScreen } from "../components/skeletonScreen"; +// import { ReminderBox } from "../../../components/index"; + +export const accessType = [ + { name: "萤石云", key: "yingshi" }, + { name: "NVR", key: "nvr" }, + { name: "IPC", key: "ipc" }, + { name: "级联", key: "cascade" }, +]; const Carrierpigeon = (props) => { + const { history, dispatch, actions, user, loading, equipmentWarehouseNvr } = props; + const { equipmentWarehouse } = actions; + const [setup, setSetup] = useState(false); + const [sideSheet, setSideSheet] = useState(false); + const [setupp, setSetupp] = useState([]); + const [venderList, setvenderList] = useState([]); //厂商信息 + const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 + const [search, setearch] = useState({}); //搜索条件 + const [rowId, setRowId] = useState(); //表格数据id + const [reminder, setReminder] = useState(false); //提醒弹框 + const api = useRef(); + const searchData = useRef(search) + const limits = useRef(); //每页实际条数 + const page = useRef(query.page); + const PIGEON = "pigeon"; + const USER = "user" + props.user.id + const nvrRef = useRef(); //获取子组件的设备编号 - return ( - - ) -} + useEffect(() => { + dispatch(actions.equipmentWarehouse.getVender()).then((res) => { + setvenderList(res.payload.data); + attribute(res.payload.data); + }); + //初始化表格显示设置 + localStorage.getItem(PIGEON) == null + ? localStorage.setItem( + PIGEON, + JSON.stringify(["manufactor", "type","state","support"]) + ) + : ""; + }, []); + + useEffect(() => { + equipmentGetNvr(); + }, [query, search]); + + const equipmentGetNvr = () => { + searchData.current = { ...query, ...search } + dispatch(equipmentWarehouse.getNvr(searchData.current)).then((res) => { + limits.current = res.payload.data.data.length + }); + } + + function equipmentStatus (data) { + switch (data) { + case "ON": + return "在线" + case "ONLINE": + return "在线" + case "OFF": + return "离线" + default: + return "未知" + }F + } + + function colorStatus (data) { + switch (data) { + case "ON": + return "#04B234" + case "ONLINE": + return "#04B234" + case "OFF": + return "rgba(0, 0, 0, 0.45)" + default: + return "#1859C1" + } + } + const columns = [ + { + title: "序号", + render: (_, record, index) => { + return index + 1; + }, + }, + { + title: "设备名称", + dataIndex: "name", + render: (_, r, index) => { + console.log(r); + return r.name + }, + }, + { + title: "SIP地址", + dataIndex: "owner", + render: (_, r, index) => { + return r?.gbNvr?.sipip + }, + }, + { + title: "操作", + width: "20%", + dataIndex: "", + render: (_, row) => { + return ( +
+ + + { + dispatch(equipmentWarehouse.delNvr(row.id)).then(() => { + if (page.current > 0 && limits.current < 2) { + setQuery({ limit: 10, page: page.current - 1 }) + } else { + setQuery({ limit: 10, page: page.current }) + } + }); + }} + > + + +
+ ); + }, + }, + ]; + + //获取表格属性设置 + function attribute (data) { + const arr = localStorage.getItem(PIGEON) + ? JSON.parse(localStorage.getItem(PIGEON)) + : []; + + const column = [ + { + title: "设备厂家", + dataIndex: "venderId", + key: "manufactor", + render: (_, r, index) => { + let manufactorName = data.find((item) => item.id == r.venderId); + return manufactorName ? manufactorName.name : ""; + }, + }, + { + title: "添加账号", + dataIndex: "createUserId", + key: "accountNumber", + render: (_, r, index) => { + return r?.createUser?.name + }, + }, + { + title: "通道数", + dataIndex: "channelCount", + key: "passageway", + }, + { + title: "端口", + dataIndex: "port", + key: "port", + }, + { + title: "设备状态", + dataIndex: "size", + key: "state", + render: (_, r, index) => { + let status = r.gbNvr; + return ( +
+ + {status ? equipmentStatus(status.online) : ""} +
+ ); + }, + }, + { + title: "创建时间", + dataIndex: "createTime", + key: "time", + render: (_, r, index) => { + return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); + }, + }, + { + title: "项目名称", + dataIndex: "", + key: "name", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r, "name", "projects") + }, + }, + { + title: "pcode", + dataIndex: "", + key: "pcode", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r, "url", "projects") + }, + }, + { + title: "结构物", + dataIndex: "", + key: "structure", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r, "name") + }, + }, + ]; + for (let i = 0; i < arr.length; i++) { + let colum = column.filter((item) => { + return item.key === arr[i]; + }); + columns.splice(i + 2, 0, colum[0]); + } + setSetupp(columns); + } + + //表格请求数据中station属性数据的展示 + function station (r, name, projects) { + let data = [] + if (projects == "projects") { + r.station.map((v) => { + if (v.structure.projects.length > 0) { + v.structure.projects.map((item) => data.push(item[name])) + } + }) + } else { + r.station.map((v, index) => data.push(v.structure[name])) + } + let dataSet = [...(new Set(data))] + return dataSet.length > 0 ? 1 ?
{dataSet.map((v, index) =>
{v}
)}
: "" + } + > + {dataSet.length > 1 ? `${dataSet[0]}...` : dataSet.length > 0 ? dataSet[0] : ""} + : "" + + } + + //条件赛选样式 + const screen = { + width: 193, + marginRight: 20, + marginBottom: 16, + color: "rgba(0, 0, 0, 0.65)", + }; + + return ( + <> +
+
+
+
+ 筛选条件 +
+
+
console.log(values)} + // onValueChange={values=>console.log(values)} + getFormApi={(formApi) => (api.current = formApi)} + layout="horizontal" + style={{ position: "relative", width: "100%", flex: 1 }} + > + + + 全部 + 短信通知 + 邮件通知 + + +
+ + +
+
+
+
+
+
+ 策略详情 +
+
+ +
+
+ + s)} + dataSource={equipmentWarehouseNvr.data} + bordered={false} + empty="暂无数据" + style={{ + padding: "0px 20px", + }} + pagination={false} + /> + + +
+ + 共{equipmentWarehouseNvr.total}个设备 + + { + setQuery({ limit: pageSize, page: currentPage - 1 }); + page.current = currentPage - 1 + }} + /> +
+ + {setup ? ( + { + setSetup(false); + attribute(venderList); + }} + /> + ) : ( + "" + )} + + {/* {sideSheet ? ( + { + setSideSheet(false); + }} + /> + ) : ( + [] + )} */} + {/* { + history.push({ pathname: '/equipmentWarehouse/camera', query: { addNvr: true, serialNo: nvrRef.current.nvrNumber() } }); + localStorage.setItem('vcmp_selected_sider', JSON.stringify("camera")) + setReminder(false) + }} + close={() => { + setReminder(false) + }} + /> */} + + + ); +}; function mapStateToProps (state) { - const { auth } = state; - return { - user: auth.user, - }; + const { auth, global, members, equipmentWarehouseNvr } = state; + return { + loading: equipmentWarehouseNvr.isRequesting && !equipmentWarehouseNvr.data, + user: auth.user, + actions: global.actions, + members: members.data, + equipmentWarehouseNvr: equipmentWarehouseNvr.data || {}, + }; } export default connect(mapStateToProps)(Carrierpigeon); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/statuscode.jsx b/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/statuscode.jsx index 7117612..eeb8b53 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/statuscode.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/statuscode.jsx @@ -1,20 +1,593 @@ -import React, { useEffect } from 'react'; -import { connect } from 'react-redux'; -import { Coming } from '$components' -import '../style.less' +import React, { useState, useEffect, useRef } from "react"; +import { connect } from "react-redux"; +import moment from "moment"; +import { Button, Form, Table, Pagination, Skeleton, Popconfirm, Popover, Tag, } from "@douyinfe/semi-ui"; +import "../style.less"; +import { ApiTable } from "$utils"; +import Setup from "../components/setup"; +// import SideSheets from "../components/sideSheet"; +// import { skeletonScreen } from "../components/skeletonScreen"; +// import { ReminderBox } from "../../../components/index"; + +export const accessType = [ + { name: "萤石云", key: "yingshi" }, + { name: "NVR", key: "nvr" }, + { name: "IPC", key: "ipc" }, + { name: "级联", key: "cascade" }, +]; const Statuscode = (props) => { + const { history, dispatch, actions, user, loading, equipmentWarehouseNvr } = props; + const { equipmentWarehouse } = actions; + const [setup, setSetup] = useState(false); + const [sideSheet, setSideSheet] = useState(false); + const [setupp, setSetupp] = useState([]); + const [venderList, setvenderList] = useState([]); //厂商信息 + const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 + const [search, setearch] = useState({}); //搜索条件 + const [rowId, setRowId] = useState(); //表格数据id + const [reminder, setReminder] = useState(false); //提醒弹框 + const api = useRef(); + const searchData = useRef(search) + const limits = useRef(); //每页实际条数 + const page = useRef(query.page); + const CODE = "code"; + const USER = "user" + props.user.id + const nvrRef = useRef(); //获取子组件的设备编号 - return ( - - ) -} + useEffect(() => { + dispatch(actions.equipmentWarehouse.getVender()).then((res) => { + setvenderList(res.payload.data); + attribute(res.payload.data); + }); + //初始化表格显示设置 + localStorage.getItem(CODE) == null + ? localStorage.setItem( + CODE, + JSON.stringify(["manufactor", "accountNumber"]) + ) + : ""; + }, []); + + useEffect(() => { + equipmentGetNvr(); + }, [query, search]); + + const equipmentGetNvr = () => { + searchData.current = { ...query, ...search } + dispatch(equipmentWarehouse.getNvr(searchData.current)).then((res) => { + limits.current = res.payload.data.data.length + }); + } + + function equipmentStatus (data) { + switch (data) { + case "ON": + return "在线" + case "ONLINE": + return "在线" + case "OFF": + return "离线" + default: + return "未知" + }F + } + + function colorStatus (data) { + switch (data) { + case "ON": + return "#04B234" + case "ONLINE": + return "#04B234" + case "OFF": + return "rgba(0, 0, 0, 0.45)" + default: + return "#1859C1" + } + } + const columns = [ + { + title: "序号", + render: (_, record, index) => { + return index + 1; + }, + }, + { + title: "设备名称", + dataIndex: "name", + render: (_, r, index) => { + console.log(r); + return r.name + }, + }, + { + title: "SIP地址", + dataIndex: "owner", + render: (_, r, index) => { + return r?.gbNvr?.sipip + }, + }, + { + title: "操作", + width: "20%", + dataIndex: "", + render: (_, row) => { + return ( +
+ + + { + dispatch(equipmentWarehouse.delNvr(row.id)).then(() => { + if (page.current > 0 && limits.current < 2) { + setQuery({ limit: 10, page: page.current - 1 }) + } else { + setQuery({ limit: 10, page: page.current }) + } + }); + }} + > + + +
+ ); + }, + }, + ]; + + //获取表格属性设置 + function attribute (data) { + const arr = localStorage.getItem(CODE) + ? JSON.parse(localStorage.getItem(CODE)) + : []; + + const column = [ + { + title: "设备厂家", + dataIndex: "venderId", + key: "manufactor", + render: (_, r, index) => { + let manufactorName = data.find((item) => item.id == r.venderId); + return manufactorName ? manufactorName.name : ""; + }, + }, + { + title: "添加账号", + dataIndex: "createUserId", + key: "accountNumber", + render: (_, r, index) => { + return r?.createUser?.name + }, + }, + { + title: "通道数", + dataIndex: "channelCount", + key: "passageway", + }, + { + title: "端口", + dataIndex: "port", + key: "port", + }, + { + title: "设备状态", + dataIndex: "size", + key: "state", + render: (_, r, index) => { + let status = r.gbNvr; + return ( +
+ + {status ? equipmentStatus(status.online) : ""} +
+ ); + }, + }, + { + title: "创建时间", + dataIndex: "createTime", + key: "time", + render: (_, r, index) => { + return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); + }, + }, + { + title: "项目名称", + dataIndex: "", + key: "name", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r, "name", "projects") + }, + }, + { + title: "pcode", + dataIndex: "", + key: "pcode", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r, "url", "projects") + }, + }, + { + title: "结构物", + dataIndex: "", + key: "structure", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r, "name") + }, + }, + ]; + for (let i = 0; i < arr.length; i++) { + let colum = column.filter((item) => { + return item.key === arr[i]; + }); + columns.splice(i + 2, 0, colum[0]); + } + setSetupp(columns); + } + + //表格请求数据中station属性数据的展示 + function station (r, name, projects) { + let data = [] + if (projects == "projects") { + r.station.map((v) => { + if (v.structure.projects.length > 0) { + v.structure.projects.map((item) => data.push(item[name])) + } + }) + } else { + r.station.map((v, index) => data.push(v.structure[name])) + } + let dataSet = [...(new Set(data))] + return dataSet.length > 0 ? 1 ?
{dataSet.map((v, index) =>
{v}
)}
: "" + } + > + {dataSet.length > 1 ? `${dataSet[0]}...` : dataSet.length > 0 ? dataSet[0] : ""} + : "" + + } + + //条件赛选样式 + const screen = { + width: 193, + marginRight: 20, + marginBottom: 16, + color: "rgba(0, 0, 0, 0.65)", + }; + + return ( + <> +
+
+
+
+ 筛选条件 +
+
+
console.log(values)} + // onValueChange={values=>console.log(values)} + getFormApi={(formApi) => (api.current = formApi)} + layout="horizontal" + style={{ position: "relative", width: "100%", flex: 1 }} + > + + + 全部 + 启用 + 禁用 + + + 全部 + 已设置 + 未设置 + + +
+ + +
+
+
+
+
+
+ 状态码详情 +
+
+ + +
+
+ +
s)} + dataSource={equipmentWarehouseNvr.data} + bordered={false} + empty="暂无数据" + style={{ + padding: "0px 20px", + }} + pagination={false} + /> + + +
+ + 共{equipmentWarehouseNvr.total}个设备 + + { + setQuery({ limit: pageSize, page: currentPage - 1 }); + page.current = currentPage - 1 + }} + /> +
+ + {setup ? ( + { + setSetup(false); + attribute(venderList); + }} + /> + ) : ( + "" + )} + + {/* {sideSheet ? ( + { + setSideSheet(false); + }} + /> + ) : ( + [] + )} */} + {/* { + history.push({ pathname: '/equipmentWarehouse/camera', query: { addNvr: true, serialNo: nvrRef.current.nvrNumber() } }); + localStorage.setItem('vcmp_selected_sider', JSON.stringify("camera")) + setReminder(false) + }} + close={() => { + setReminder(false) + }} + /> */} + + + ); +}; function mapStateToProps (state) { - const { auth } = state; - return { - user: auth.user, - }; + const { auth, global, members, equipmentWarehouseNvr } = state; + return { + loading: equipmentWarehouseNvr.isRequesting && !equipmentWarehouseNvr.data, + user: auth.user, + actions: global.actions, + members: members.data, + equipmentWarehouseNvr: equipmentWarehouseNvr.data || {}, + }; } export default connect(mapStateToProps)(Statuscode);