diff --git a/code/VideoAccess-VCMP/web/.vscode/settings.json b/code/VideoAccess-VCMP/web/.vscode/settings.json index f5f67f5..d365bb1 100644 --- a/code/VideoAccess-VCMP/web/.vscode/settings.json +++ b/code/VideoAccess-VCMP/web/.vscode/settings.json @@ -1,4 +1,4 @@ // 将设置放入此文件中以覆盖默认值和用户设置。 { - "editor.fontSize": 16, + "editor.fontSize": 12, } \ No newline at end of file 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 d2c111f..a36e2eb 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,65 +8,117 @@ import { } from "@douyinfe/semi-ui"; function Setup(props) { - const { dispatch, actions, user, loading, visible, close, editData } = props; + const { dispatch, actions, user, loading, visible, close, SETUPS } = props; + const [checkeds, setCheckeds] = useState([]); + const [check, setCheck] = useState([]); + + + + + const checkboxcss = { width: "21%", height: 16, marginBottom: "20px" }; + + useEffect(() => { + //获取是否勾选信息 + const ISgetItem = localStorage.getItem(SETUPS); + setCheck(ISgetItem ? JSON.parse(ISgetItem):[]); + }, []); + return ( { + localStorage.setItem(SETUPS, JSON.stringify(checkeds)); close(); }} onCancel={() => { close(); }} > -
{ + setCheckeds(checked); }} > -
- 设备信息 -
- { - console.log(checked); +
-
-
-
项目信息
- { - console.log(checked); + > +
+ 设备信息 +
+
+ + 设备厂家 + + + 添加账号 + + + 通道数 + + + 端口 + + + 设备状态 + + + 创建时间 + +
+
+ +
-
+ > +
+ 项目信息 +
+
+ + 项目名称 + + + things名称 + + + things数量 + +
+
+
); } diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx new file mode 100644 index 0000000..2eb8d1f --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx @@ -0,0 +1,74 @@ +import React, { useState, useEffect } from "react"; +import { SideSheet, Tabs, TabPane } from "@douyinfe/semi-ui"; + +function SideSheets(props) { + const { dispatch, actions, user, loading, visible, close, SETUPS } = props; + const [checkeds, setCheckeds] = useState([]); + const [check, setCheck] = useState([]); + const list = [ + { name: "1111", a: "a", b: "B", c: "C", d: "C" }, + { name: "2222", a: "a", b: "B", c: "C", d: "C" }, + { name: "3333", a: "a", b: "B", c: "C", d: "C" }, + { name: "4444", a: "a", b: "B", c: "C", d: "C" }, + ]; + const styles = { + width: 180, + textAlign: "center", + background: "#FFFFFF", + padding: "12px 17px", + margin: "30px 0 0 10px", + lineHeight: "20px", + + }; + + useEffect(() => {}, []); + + return ( + { + close(); + }} + > + + + {list.map((item) => { + return ( +
+
+ {item.name} +
+
{item.a}
+
{item.b}
+
{item.c}
+
{item.d}
+
+ ); + })} +
+ + 快速起步 + +
+
+ ); +} + +export default SideSheets; 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 c58be70..e2f6062 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 @@ -4,20 +4,19 @@ import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui"; import "../style.less"; import NvrModal from "../components/nvrModal"; import Setup from "../components/setup"; +import SideSheets from "../components/sideSheet"; const NvrHeader = (props) => { const { dispatch, actions, user, loading } = props; const [setup, setSetup] = useState(false); + const [sideSheet, setSideSheet] = useState(false); + const [setupp, setSetupp] = useState([]); + const SETUPS = "setups"; - const screen = { - width: 193, - marginRight: 20, - marginBottom: 16, - color: "rgba(0, 0, 0, 0.65)", - }; const columns = [ { title: "序号", + render: (text, record, index) => { return index + 1; }, @@ -36,29 +35,19 @@ const NvrHeader = (props) => { width: "10px", height: "10px", borderRadius: "50%", - display: "inline-block",marginRight:"10px" - }} /> + display: "inline-block", + marginRight: "10px", + }} + /> {record.name} ); }, }, - { - title: "设备厂家", - dataIndex: "size", - }, { title: "SIP地址", dataIndex: "owner", }, - { - title: "端口号", - dataIndex: "updateTime", - }, - { - title: "通道数", - dataIndex: "nameIconSrc", - }, { title: "操作", width: "20%", @@ -67,14 +56,96 @@ const NvrHeader = (props) => { // console.log(row); return ( <> - - + + ); }, }, ]; + + useEffect(() => { + attribute(); + }, []); + //获取表格属性设置 + function attribute() { + const arr = localStorage.getItem(SETUPS) + ? JSON.parse(localStorage.getItem(SETUPS)) + : []; + + const column = [ + { + title: "设备厂家", + dataIndex: "size", + key: "a", + }, + { + title: "添加张账号", + dataIndex: "size", + key: "b", + }, + { + title: "通道数", + dataIndex: "size", + key: "c", + }, + { + title: "端口", + dataIndex: "size", + key: "d", + }, + { + title: "设备状态", + dataIndex: "size", + key: "e", + }, + { + title: "创建时间", + dataIndex: "size", + key: "f", + }, + { + title: "项目名称", + dataIndex: "size", + key: "g", + }, + { + title: "things名称", + dataIndex: "updateTime", + key: "h", + }, + { + title: "things数量", + dataIndex: "updateTime", + key: "i", + }, + ]; + 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)", + }; + const data = [ { key: "1", @@ -295,7 +366,7 @@ const NvrHeader = (props) => { }} > 设置 @@ -314,18 +385,22 @@ const NvrHeader = (props) => { {setup ? ( { setSetup(false); + attribute(); // setEditData(null) }} // reportType={reportType} @@ -334,6 +409,17 @@ const NvrHeader = (props) => { ) : ( "" )} + + {sideSheet ? ( + { + setSideSheet(false); + }} + /> + ) : ( + [] + )} );