表格设置完成

code/VideoAccess-VCMP/web/.vscode/settings.json

@@ -1,4 +1,4 @@
 // 将设置放入此文件中以覆盖默认值和用户设置。
 {
-    "editor.fontSize": 16,
+    "editor.fontSize": 12,
 }

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 (
     <Modal
       title="表格属性设置"
       visible={visible}
       style={{ width: 580 }}
       onOk={() => {
+        localStorage.setItem(SETUPS, JSON.stringify(checkeds));
         close();
       }}
       onCancel={() => {
         close();
       }}
     >
-      <div
-        style={{
-          width: 529,
-          height: 121,
-          border: "1px solid #EAEAEA",
-          padding: "0px 5px",
-          borderRadius: 4,
+      <CheckboxGroup
+        style={{ width: "100%", fontSize: 14 }}
+        key="primary1"
+        direction="horizontal"
+        defaultValue={check}
+        aria-label="表格属性设置"
+        onChange={(checked) => {
+          setCheckeds(checked);
         }}
       >
-        <div style={{ borderBottom: "1px solid #EAEAEA", fontSize: 14,marginLeft:"10px",padding: "8px 0px",}}>
-          设备信息
-        </div>
-        <CheckboxGroup
-          options={[
-            { label: "设备厂家", value: "a" },
-            { label: "添加账号", value: "b" },
-            { label: "通道数", value: "c" },
-            { label: "端口", value: "d" },
-            { label: "设备状态", value: "e" },
-            { label: "创建时间", value: "f" },
-          ]}
-          style={{ width: "100%",fontSize: 14 }}
-          direction="horizontal"
-          defaultValue={["hotsoon"]}
-        //   name={style}
-          onChange={(checked) => {
-            console.log(checked);
+        <div
+          style={{
+            width: 529,
+            height: 121,
+            border: "1px solid #EAEAEA",
+            padding: "0px 5px",
+            borderRadius: 4,
+            marginBottom: "20px",
           }}
-        />
-      </div>
-      <div style={{ width: 529, height: 92 ,borderRadius: 4,border: "1px solid #EAEAEA",}}>
-        <div>项目信息</div>
-        <CheckboxGroup
-          options={[
-            { label: "项目名称", value: "g" },
-            { label: "things名称", value: "h" },
-            { label: "things数量", value: "i" },
-          ]}
-          style={{ width: "100%", }}
-          direction="horizontal"
-          defaultValue={["hotsoon"]}
-          onChange={(checked) => {
-            console.log(checked);
+        >
+          <div
+            style={{
+              borderBottom: "1px solid #EAEAEA",
+              marginLeft: "10px",
+              padding: "8px 0px",
+            }}
+          >
+            设备信息
+          </div>
+          <div style={{ padding: "15px 30px" }}>
+            <Checkbox value="a" style={checkboxcss}>
+              设备厂家
+            </Checkbox>
+            <Checkbox value="b" style={checkboxcss}>
+              添加账号
+            </Checkbox>
+            <Checkbox value="c" style={checkboxcss}>
+              通道数
+            </Checkbox>
+            <Checkbox value="d" style={checkboxcss}>
+              端口
+            </Checkbox>
+            <Checkbox value="e" style={checkboxcss}>
+              设备状态
+            </Checkbox>
+            <Checkbox value="f" style={checkboxcss}>
+              创建时间
+            </Checkbox>
+          </div>
+        </div>
+
+        <div
+          style={{
+            width: 529,
+            height: 92,
+            border: "1px solid #EAEAEA",
+            padding: "0px 5px",
+            borderRadius: 4,
           }}
-        />
-      </div>
+        >
+          <div
+            style={{
+              borderBottom: "1px solid #EAEAEA",
+
+              marginLeft: "10px",
+              padding: "8px 0px",
+            }}
+          >
+            项目信息
+          </div>
+          <div style={{ padding: "15px 30px" }}>
+            <Checkbox value="g" style={checkboxcss}>
+              项目名称
+            </Checkbox>
+            <Checkbox value="h" style={checkboxcss}>
+              things名称
+            </Checkbox>
+            <Checkbox value="i" style={checkboxcss}>
+              things数量
+            </Checkbox>
+          </div>
+        </div>
+      </CheckboxGroup>
     </Modal>
   );
 }

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 (
+    <SideSheet
+      visible={visible}
+      title="智慧设备NVR"
+      style={{ background: "#F9FBFF" }}
+      size="large"
+      onCancel={() => {
+        close();
+      }}
+    >
+      <Tabs type="line">
+        <TabPane tab="项目信息" itemKey="1">
+          {list.map((item) => {
+            return (
+              <div
+                key={item.name}
+                style={{
+                  display: "inline-block",
+                  width: 200,
+                  margin: "12px 8px",
+                }}
+              >
+                <div
+                  style={{
+                    lineHeight: "32px",
+                    background: "#1859C1",
+                    borderRadius: 3,
+                    textAlign: "center",
+                  }}
+                >
+                  {item.name}
+                </div>
+                <div style={styles}>{item.a}</div>
+                <div style={styles}>{item.b}</div>
+                <div style={styles}>{item.c}</div>
+                <div style={styles}>{item.d}</div>
+              </div>
+            );
+          })}
+        </TabPane>
+        <TabPane tab="设备信息" itemKey="2">
+          快速起步
+        </TabPane>
+      </Tabs>
+    </SideSheet>
+  );
+}
+
+export default SideSheets;

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}
           </div>
         );
       },
     },
-    {
-      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 (
           <>
-            <Button theme="borderless"><NvrModal nvrData={row} modalName="revise" /></Button>
-            <Button theme="borderless">查看</Button>
+            <Button theme="borderless">
+              <NvrModal nvrData={row} modalName="revise" />
+            </Button>
+            <Button
+              theme="borderless"
+              onClick={() => {
+                setSideSheet(true);
+              }}
+            >
+              查看
+            </Button>
             <Button theme="borderless">删除</Button>
           </>
         );
       },
     },
   ];
+
+  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) => {
               }}
             >
               <img
-                src="../../../../assets/images/background/setup.png"
+                src="/assets/images/background/setup.png"
                 alt="设置"
                 style={{ width: 18, height: 18 }}
               />
@@ -314,18 +385,22 @@ const NvrHeader = (props) => {
           </div>
         </div>
         <Table
-          columns={columns}
+          columns={setupp}
           dataSource={data}
           pagination={false}
           bordered={false}
           empty="暂无数据"
-          style={{ padding: "0px 20px" }}
+          style={{
+            padding: "0px 20px",
+          }}
         />
         {setup ? (
           <Setup
             visible={true}
+            SETUPS={SETUPS}
             close={() => {
               setSetup(false);
+              attribute();
               // setEditData(null)
             }}
             // reportType={reportType}
@@ -334,6 +409,17 @@ const NvrHeader = (props) => {
         ) : (
           ""
         )}
+
+        {sideSheet ? (
+          <SideSheets
+            visible={true}
+            close={() => {
+              setSideSheet(false);
+            }}
+          />
+        ) : (
+          []
+        )}
       </div>
     </>
   );