diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx index 3ff8a59..89371eb 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx @@ -6,7 +6,7 @@ function nvrModal(props){ const {modalName}=props const { dispatch, actions, user, loading,vender,close } = props; const nvrData = props.nvrData||{}//修改时传来的值 - console.log('nvrDatanvrDatanvrData',nvrData); + // console.log('nvrDatanvrDatanvrData',nvrData); const form = useRef(); const [visible, setVisible] = useState(false);//是否显示弹框 const [isloading,setloading] = useState(false);//是否显示loading diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx index a36e2eb..e151b81 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx @@ -8,28 +8,71 @@ import { } from "@douyinfe/semi-ui"; function Setup(props) { - const { dispatch, actions, user, loading, visible, close, SETUPS } = props; + const { + dispatch, + actions, + user, + loading, + visible, + close, + SETUPS, + CAMERAS, + cameraSetup, + } = props; const [checkeds, setCheckeds] = useState([]); const [check, setCheck] = useState([]); - - - - - const checkboxcss = { width: "21%", height: 16, marginBottom: "20px" }; + const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; useEffect(() => { //获取是否勾选信息 - const ISgetItem = localStorage.getItem(SETUPS); - setCheck(ISgetItem ? JSON.parse(ISgetItem):[]); + const ISgetItem1 = localStorage.getItem(SETUPS); + const ISgetItem2 = localStorage.getItem(CAMERAS); + if (cameraSetup) { + setCheck(ISgetItem2 ? JSON.parse(ISgetItem2) : []); + } else { + setCheck(ISgetItem1 ? JSON.parse(ISgetItem1) : []); + } }, []); + const equipmentNVR = [ + { name: "设备厂家", value: "a" }, + { name: "添加账号", value: "b" }, + { name: "通道数", value: "c" }, + { name: "端口", value: "d" }, + { name: "设备状态", value: "e" }, + { name: "创建时间", value: "f" }, + ]; + const projectNVR = [ + { name: "项目名称", value: "g" }, + { name: "things名称", value: "h" }, + { name: "things数量", value: "i" }, + ]; + const equipmentCamera = [ + { name: "设备厂家", value: "manufactor" }, + { name: "接入类型", value: "type" }, + { name: "设备状态", value: "state" }, + { name: "云台支持", value: "support" }, + { name: "内存卡信息", value: "memoryCard" }, + { name: "设备创建时间", value: "time" }, + { name: "设备添加账号", value: "account" }, + ]; + const projectCamera = [ + { name: "项目名称", value: "name" }, + { name: "pcode", value: "pcode" }, + { name: "结构物", value: "structure" }, + { name: "测点", value: "measuringPoint" }, + { name: "监测因素", value: "factor" }, + ]; + return ( { - localStorage.setItem(SETUPS, JSON.stringify(checkeds)); + cameraSetup + ? localStorage.setItem(CAMERAS, JSON.stringify(checkeds)) + : localStorage.setItem(SETUPS, JSON.stringify(checkeds)); close(); }} onCancel={() => { @@ -42,14 +85,14 @@ function Setup(props) { direction="horizontal" defaultValue={check} aria-label="表格属性设置" + // disabled={true} onChange={(checked) => { setCheckeds(checked); }} >
设备信息
-
- - 设备厂家 - - - 添加账号 - - - 通道数 - - - 端口 - - - 设备状态 - - - 创建时间 - +
+ {(cameraSetup ? equipmentCamera : equipmentNVR).map((item) => { + return ( + + {item.name} + + ); + })}
项目信息
-
- - 项目名称 - - - things名称 - - - things数量 - +
+ {(cameraSetup ? projectCamera : projectNVR).map((item) => { + return ( + + {item.name} + + ); + })}
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 050cba6..6c1138d 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 @@ -1,12 +1,202 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; -import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui"; +import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui"; import "../style.less"; import CameraModal from "../components/cameraModal"; +import NvrModal from "../components/nvrModal"; +import Setup from "../components/setup"; +import SideSheets from "../components/sideSheet"; const CameraHeader = (props) => { - const [cameraModal,setCameraModal] = useState(false) - const [modalName,setModalName] = useState('') + const { dispatch, actions, user, loading, equipmentWarehouseNvr } = 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 { equipmentWarehouse } = actions; + const api = useRef(); + const CAMERAS = "cameras"; + + useEffect(() => { + dispatch(actions.equipmentWarehouse.getVender()).then((res) => { + setvenderList(res.payload.data); + }); + //初始化表格显示设置 + localStorage.setItem( + CAMERAS, + JSON.stringify(["state", "type", "manufactor"]) + ); + attribute(); + }, []); + + useEffect(() => { + equipmentGetNvr(); + }, [query]); + + function equipmentGetNvr() { + dispatch(equipmentWarehouse.getNvr(query)); + } + const columns = [ + { + title: "序号", + render: (text, record, index) => { + return index + 1; + }, + }, + { + title: "设备名称", + dataIndex: "name", + render: (text, record, index) => { + return ( +
+ + {record.name} +
+ ); + }, + }, + + { + title: "操作", + width: "20%", + dataIndex: "", + render: (_, row) => { + // console.log(row); + return ( + <> + + + + + + + ); + }, + }, + ]; + + //获取表格属性设置 + function attribute() { + const arr = localStorage.getItem(CAMERAS) + ? JSON.parse(localStorage.getItem(CAMERAS)) + : []; + + const column = [ + { + title: "设备厂家", + dataIndex: "venderId", + key: "manufactor", + }, + { + title: "接入类型", + dataIndex: "createUserId", + key: "type", + }, + { + title: "设备状态", + dataIndex: "channelCount", + key: "state", + }, + { + title: "云台支持", + dataIndex: "port", + key: "support", + }, + { + title: "内存卡信息", + dataIndex: "size", + key: "memoryCard", + }, + { + title: "设备创建时间", + dataIndex: "createTime", + key: "time", + }, + { + title: "设备添加账号", + dataIndex: "size", + key: "account", + }, + { + title: "项目名称", + dataIndex: "updateTime", + key: "name", + }, + { + title: "pcode", + dataIndex: "updateTime", + key: "pcode", + }, + { + title: "结构物", + dataIndex: "updateTime", + key: "structure", + }, + { + title: "测点", + dataIndex: "updateTime", + key: "measuringPoint", + }, + { + title: "监测因素", + dataIndex: "updateTime", + key: "factor", + }, + ]; + 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); + } + + //条件赛选样式 + const screen = { + width: 193, + marginRight: 20, + marginBottom: 16, + color: "rgba(0, 0, 0, 0.65)", + }; + return ( <>
@@ -52,7 +242,7 @@ const CameraHeader = (props) => { cursor: "pointer", }} onClick={() => { - setModalName('add') + setModalName("add"); setCameraModal(true); }} > @@ -60,25 +250,287 @@ const CameraHeader = (props) => {
- {cameraModal? - { - setCameraModal(false); - // setEditData(null) - }} - modalName={modalName} />:''} + +
+
+ 筛选条件 +
+
+
console.log(values)} + // onValueChange={values=>console.log(values)} + getFormApi={(formApi) => (api.current = formApi)} + layout="horizontal" + style={{ position: "relative", width: "100%", flex: 1 }} + > + + + 111 + 111111 + + + {venderList.map((item) => { + return ( + + {item.name} + + ); + })} + + + 在线 + 离线 + + + + 飞尚科技1 + + + 飞尚科技2 + + + +
+ + +
+
+
+
+
+
+ 设备列表 +
+
+ + +
+
+ +
+ + 共{equipmentWarehouseNvr.total}个设备 + + { + setQuery({ limit: pageSize, page: currentPage - 1 }); + }} + /> +
+ + {setup ? ( + { + setSetup(false); + attribute(); + setcameraSetup(false); + }} + /> + ) : ( + "" + )} + + {sideSheet ? ( + { + setSideSheet(false); + }} + /> + ) : ( + [] + )} + + + {cameraModal ? ( + { + setCameraModal(false); + // setEditData(null) + }} + modalName={modalName} + /> + ) : ( + "" + )} ); }; function mapStateToProps(state) { - const { auth, global, members } = state; + const { auth, global, members, equipmentWarehouseNvr } = state; return { loading: members.isRequesting, user: auth.user, actions: global.actions, members: members.data, + equipmentWarehouseNvr: equipmentWarehouseNvr.data || [], }; } diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx index f3bac4a..496fc41 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui"; import "../style.less"; @@ -14,6 +14,7 @@ const NvrHeader = (props) => { const [setupp, setSetupp] = useState([]); const [venderList, setvenderList] = useState([]); //厂商信息 const [query, setQuery] = useState({ limit: 10, page: 0 }); + const api = useRef(); const SETUPS = "setups"; useEffect(() => { @@ -90,10 +91,15 @@ const NvrHeader = (props) => { > 查看 - + ); }, @@ -250,11 +256,14 @@ const NvrHeader = (props) => {
console.log(values)} + // onValueChange={values=>console.log(values)} + getFormApi={(formApi) => (api.current = formApi)} layout="horizontal" style={{ position: "relative", width: "100%", flex: 1 }} > { label="厂家筛选：" labelPosition="left" style={screen} - field="type1" + field="venderId" placeholder="全部" > {venderList.map((item) => { @@ -291,8 +300,12 @@ const NvrHeader = (props) => { style={screen} placeholder="全部" > - 飞尚科技1 - 飞尚科技2 + + 飞尚科技1 + + + 飞尚科技2 +
{ marginBottom: 20, marginRight: 20, }} - onClick={() => {}} + onClick={() => { + api.current.validate().then((values) => { + console.log(values); + console.log( + equipmentWarehouseNvr.data.filter((item) => { + return ( + item.name.indexOf(values.name) > -1 && + item.venderId === values.venderId + ); + + }) + ); + }); + console.log(equipmentWarehouseNvr.data); + }} > 搜素 @@ -414,10 +441,10 @@ const NvrHeader = (props) => { className="22" total={equipmentWarehouseNvr.total} showSizeChanger + currentPage={query.page + 1} pageSizeOpts={[10, 20, 30, 40]} onChange={(currentPage, pageSize) => { setQuery({ limit: pageSize, page: currentPage - 1 }); - console.log(currentPage, pageSize); }} />