From 377503cbcbb3def126a42c0f8264f2121fa0f252 Mon Sep 17 00:00:00 2001 From: yuan_yi <1650192445@qq.com> Date: Wed, 1 Jun 2022 10:24:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=AE=9E=E6=93=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../equipmentWarehouse/containers/camera.jsx | 1286 ++++++++--------- 1 file changed, 643 insertions(+), 643 deletions(-) diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx index 1494564..b98287a 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx @@ -2,16 +2,16 @@ import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; import moment from "moment"; import { - Button, - Form, - Input, - Row, - Table, - Pagination, - Popover, - Tag, - Skeleton, - Popconfirm, + Button, + Form, + Input, + Row, + Table, + Pagination, + Popover, + Tag, + Skeleton, + Popconfirm, } from "@douyinfe/semi-ui"; import { SimpleFileDownButton } from '$components' import "../style.less"; @@ -23,473 +23,473 @@ import { skeletonScreen } from "../components/skeletonScreen"; import { accessType } from "./nvr"; const CameraHeader = (props) => { - const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props; - const [cameraModal, setCameraModal] = useState(false); - const [modalName, setModalName] = useState(""); - const [setup, setSetup] = useState(false); - const [sideSheet, setSideSheet] = useState(false); - const [cameraSetup, setcameraSetup] = 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 [load, setLoad] = useState(); //骨架屏是否显现 + const { dispatch, actions, user, loading, equipmentWarehouseCamera } = props; + const [cameraModal, setCameraModal] = useState(false); + const [modalName, setModalName] = useState(""); + const [setup, setSetup] = useState(false); + const [sideSheet, setSideSheet] = useState(false); + const [cameraSetup, setcameraSetup] = 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 [load, setLoad] = useState(); //骨架屏是否显现 - const { equipmentWarehouse } = actions; - const api = useRef(); - const CAMERAS = "cameras"; + const { equipmentWarehouse } = actions; + const api = useRef(); + const CAMERAS = "cameras"; - useEffect(() => { - setLoad(loading); - dispatch(actions.equipmentWarehouse.getVender()).then((res) => { - setvenderList(res.payload.data); - attribute(res.payload.data); - }); - //初始化表格显示设置 - localStorage.getItem(CAMERAS) == null - ? localStorage.setItem( - CAMERAS, - JSON.stringify(["state", "type", "manufactor"]) - ) - : ""; - console.log(equipmentWarehouseCamera); - }, []); + useEffect(() => { + setLoad(loading); + dispatch(actions.equipmentWarehouse.getVender()).then((res) => { + setvenderList(res.payload.data); + attribute(res.payload.data); + }); + //初始化表格显示设置 + localStorage.getItem(CAMERAS) == null + ? localStorage.setItem( + CAMERAS, + JSON.stringify(["state", "type", "manufactor"]) + ) + : ""; + console.log(equipmentWarehouseCamera); + }, []); - useEffect(() => { - equipmentGetCamera(); - }, [query, search]); + useEffect(() => { + equipmentGetCamera(); + }, [query, search]); - function equipmentGetCamera() { - dispatch(equipmentWarehouse.getCamera({ ...query, ...search })); - } + function equipmentGetCamera () { + dispatch(equipmentWarehouse.getCamera({ ...query, ...search })); + } - const columns = [ - { - title: "序号", - render: (text, record, index) => { - return index + 1; + const columns = [ + { + title: "序号", + render: (text, record, index) => { + return index + 1; + }, }, - }, - { - title: "设备名称", - dataIndex: "name", - render: (text, record, index) => { - return ( -
- - {record.name} -
- ); + { + title: "设备名称", + dataIndex: "name", + render: (text, record, index) => { + return ( +
+ + {record.name} +
+ ); + }, }, - }, - { - title: "操作", - width: "20%", - dataIndex: "", - render: (_, row) => { - return ( -
- - - {row.forbidden ? ( - - ) : ( - { - dispatch( - equipmentWarehouse.putForbidden( - { - cameraId: row.id, - forbidden: !row.forbidden, - }, - row.forbidden - ) - ).then(() => { - equipmentGetCamera(); - }); - }} - > - - - )} + { + title: "操作", + width: "20%", + dataIndex: "", + render: (_, row) => { + return ( +
+ + + {row.forbidden ? ( + + ) : ( + { + dispatch( + equipmentWarehouse.putForbidden( + { + cameraId: row.id, + forbidden: !row.forbidden, + }, + row.forbidden + ) + ).then(() => { + equipmentGetCamera(); + }); + }} + > + + + )} - { - dispatch(equipmentWarehouse.delNvr(row.id)).then(() => { - equipmentGetCamera(); - }); - }} - > - - -
- ); + { + dispatch(equipmentWarehouse.delNvr(row.id)).then(() => { + equipmentGetCamera(); + }); + }} + > + + +
+ ); + }, }, - }, - ]; + ]; - //获取表格属性设置 - function attribute(data) { - const arr = localStorage.getItem(CAMERAS) - ? JSON.parse(localStorage.getItem(CAMERAS)) - : []; + //获取表格属性设置 + function attribute (data) { + const arr = localStorage.getItem(CAMERAS) + ? JSON.parse(localStorage.getItem(CAMERAS)) + : []; - 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: "cameraAbility.type", - key: "type", - render: (_, r, index) => { - let access = accessType.find((item) => item.key == r.type); - return access ? access.name : ""; - }, - }, - { - title: "设备状态", - dataIndex: "channelCount", - key: "state", - }, - { - title: "云台支持", - dataIndex: "port", - key: "support", - }, - { - title: "内存卡信息", - dataIndex: "memoryCard", - key: "memoryCard", - }, - { - title: "设备创建时间", - dataIndex: "createTime", - key: "time", - render: (text, r, index) => { - return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); - }, - }, - { - title: "设备添加账号", - dataIndex: "size", - key: "account", - }, - { - title: "项目名称", - dataIndex: "updateTime", - key: "name", - render: (_, r, index) => { - return r.station.length == 0 - ? "" - : r.station.map((item, index) => { - return item.structure.projects.length == 0 + 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: "cameraAbility.type", + key: "type", + render: (_, r, index) => { + let access = accessType.find((item) => item.key == r.type); + return access ? access.name : ""; + }, + }, + { + title: "设备状态", + dataIndex: "channelCount", + key: "state", + }, + { + title: "云台支持", + dataIndex: "port", + key: "support", + }, + { + title: "内存卡信息", + dataIndex: "memoryCard", + key: "memoryCard", + }, + { + title: "设备创建时间", + dataIndex: "createTime", + key: "time", + render: (text, r, index) => { + return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS"); + }, + }, + { + title: "设备添加账号", + dataIndex: "size", + key: "account", + }, + { + title: "项目名称", + dataIndex: "updateTime", + key: "name", + render: (_, r, index) => { + return r.station.length == 0 ? "" - : station( - r.station[0].structure.projects[0].name, - item.structure.projects, - "name" - ); - }); - }, - }, - { - title: "pcode", - dataIndex: "updateTime", - key: "pcode", - render: (_, r, index) => { - return r.station.length == 0 - ? "" - : r.station.map((item, index) => { - return item.structure.projects.length == 0 + : r.station.map((item, index) => { + return item.structure.projects.length == 0 + ? "" + : station( + r.station[0].structure.projects[0].name, + item.structure.projects, + "name" + ); + }); + }, + }, + { + title: "pcode", + dataIndex: "updateTime", + key: "pcode", + render: (_, r, index) => { + return r.station.length == 0 ? "" - : station( - r.station[0].structure.projects[0].url, - item.structure.projects, - "url" - ); - }); - }, - }, - { - title: "结构物", - dataIndex: "", - key: "structure", - render: (_, r, index) => { - return r.station.length == 0 - ? "" - : station(r.station[0].structure.name, r.station, "structure.name"); - }, - }, - { - title: "测点", - dataIndex: "updateTime", - key: "measuringPoint", - render: (_, r, index) => { - return r.station.length == 0 - ? "" - : station(r.station[0].name, r.station, "name"); - }, - }, - { - title: "监测因素", - dataIndex: "updateTime", - key: "factor", - render: (_, r, index) => { - return r.station.length == 0 - ? "" - : station(r.station[0].factor.name, r.station, "factor.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); - } + : r.station.map((item, index) => { + return item.structure.projects.length == 0 + ? "" + : station( + r.station[0].structure.projects[0].url, + item.structure.projects, + "url" + ); + }); + }, + }, + { + title: "结构物", + dataIndex: "", + key: "structure", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r.station[0].structure.name, r.station, "structure.name"); + }, + }, + { + title: "测点", + dataIndex: "updateTime", + key: "measuringPoint", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r.station[0].name, r.station, "name"); + }, + }, + { + title: "监测因素", + dataIndex: "updateTime", + key: "factor", + render: (_, r, index) => { + return r.station.length == 0 + ? "" + : station(r.station[0].factor.name, r.station, "factor.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(first, whole, name) { - return ( - - {whole.map((v, index) => { - let names = ""; - switch (name) { - case "name": - names = v[name]; - break; - case "url": - names = v[name]; - break; - case "structure.name": - names = v.structure.name; - break; - case "factor.name": - names = v.factor.name; - break; - default: - break; - } - return
{names}
; - })} - - } - > - {first}... - - ); - } - //条件赛选样式 - const screen = { - width: 193, - marginRight: 20, - marginBottom: 16, - color: "rgba(0, 0, 0, 0.65)", - }; + //表格请求数据中station属性数据的展示 + function station (first, whole, name) { + return ( + + {whole.map((v, index) => { + let names = ""; + switch (name) { + case "name": + names = v[name]; + break; + case "url": + names = v[name]; + break; + case "structure.name": + names = v.structure.name; + break; + case "factor.name": + names = v.factor.name; + break; + default: + break; + } + return
{names}
; + })} + + } + > + {first}... + + ); + } + //条件赛选样式 + const screen = { + width: 193, + marginRight: 20, + marginBottom: 16, + color: "rgba(0, 0, 0, 0.65)", + }; - return ( - <> -
-
-
-
-
- 设备列表 -
-
-