列表的设置选择问题

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx

@@ -19,7 +19,6 @@ function Setup(props) {
     CAMERAS,
     cameraSetup,
   } = props;
-  const [checkeds, setCheckeds] = useState([]);
   const [check, setCheck] = useState([]);
   const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
 
@@ -32,6 +31,7 @@ function Setup(props) {
     } else {
       setCheck(ISgetItem1 ? JSON.parse(ISgetItem1) : []);
     }
+    ischeck();
   }, []);
 
   const equipmentNVR = [
@@ -64,15 +64,46 @@ function Setup(props) {
     { name: "监测因素", value: "factor" },
   ];
 
+  function ischeck(value) {
+    if (check.length >= 8) {
+      if (check.includes(value)) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+  }
+
   return (
     <Modal
-      title="表格属性设置"
+      title={
+        <div>
+          表格属性设置
+          <span
+            style={{
+              width: 50,
+              lineHeight: "19px",
+              display: "inline-block",
+
+              color: "white",
+              textAlign: "center",
+              marginLeft: 6,
+              background:
+                check.length == 8
+                  ? "rgba(40, 123, 255, 1)"
+                  : "rgba(176, 176, 176, 1)",
+            }}
+          >
+            {check.length}/8
+          </span> 
+        </div>
+      }
       visible={visible}
       style={{ width: 600 }}
       onOk={() => {
         cameraSetup
-          ? localStorage.setItem(CAMERAS, JSON.stringify(checkeds))
-          : localStorage.setItem(SETUPS, JSON.stringify(checkeds));
+          ? localStorage.setItem(CAMERAS, JSON.stringify(check))
+          : localStorage.setItem(SETUPS, JSON.stringify(check));
         close();
       }}
       onCancel={() => {
@@ -85,9 +116,9 @@ function Setup(props) {
         direction="horizontal"
         defaultValue={check}
         aria-label="表格属性设置"
-        // disabled={true}
-        onChange={(checked) => {
-          setCheckeds(checked);
+        onChange={(check) => {
+          setCheck(check);
+          ischeck();
         }}
       >
         <div
@@ -115,6 +146,7 @@ function Setup(props) {
                   key={item.value}
                   value={item.value}
                   style={checkboxcss}
+                  disabled={ischeck(item.value)}
                 >
                   {item.name}
                 </Checkbox>
@@ -141,13 +173,14 @@ function Setup(props) {
           >
             项目信息
           </div>
-          <div style={{  padding: "15px 12px", width: 530 }}>
+          <div style={{ padding: "15px 12px", width: 530 }}>
             {(cameraSetup ? projectCamera : projectNVR).map((item) => {
               return (
                 <Checkbox
                   key={item.value}
                   value={item.value}
                   style={checkboxcss}
+                  disabled={ischeck(item.value)}
                 >
                   {item.name}
                 </Checkbox>

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx

@@ -18,24 +18,43 @@ function SideSheets(props) {
     { name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
   ];
   const IFname = [
-    "设备名称：",
-    "设备编号：",
-    "接入方式：",
-    "厂商：",
-    "添加账号：",
-    "添加时间：",
-    "行政区别：",
-    "设备安装位置：",
-    "SIP服务编号:",
-    "SIP域:",
-    "SIP端口号:",
-    "通道数量:",
-    "心跳周期:",
-    "最大心跳次数:",
-    "注册密码:",
-    "注册有效期::",
-    "接入识别模块:",
+    { name: "设备名称：", value: "" },
+    { name: "设备编号：", value: "" },
+    { name: "接入方式：", value: "" },
+    { name: "厂商：", value: "" },
+    { name: "添加账号：", value: "" },
+    { name: "添加时间：", value: "" },
+    { name: "行政区别：", value: "" },
+    { name: "设备安装位置：", value: "" },
+    { name: "SIP服务编号:", value: "" },
+    { name: "SIP域:", value: "" },
+    { name: "SIP端口号:", value: "" },
+    { name: "通道数量:", value: "" },
+    { name: "心跳周期:", value: "" },
+    { name: "最大心跳次数:", value: "" },
+    { name: "注册密码:", value: "" },
+    { name: "注册有效期::", value: "" },
+    { name: "接入识别模块:", value: "" },
   ];
+  function pp() {
+    let str = [];
+    console.log(IFname.length);
+    for (let i = 0; i < IFname.length; i++) {
+      if (i === 0) {
+        str.push(<div>基础</div>);
+      }
+      if (0 <= i && i < 6) {
+        console.log(IFname[i].name);
+        str.push(
+          <div>
+            <span>{IFname[i].name}</span>
+            <span>{IFname[i].value}</span>
+          </div>
+        );
+      }
+    }
+    return str;
+  }
   console.log(IFname);
   const styles = {
     width: 180,
@@ -94,9 +113,7 @@ function SideSheets(props) {
           </div>
         </TabPane>
         <TabPane tab="设备信息" itemKey="2">
-          {IFname.map((item, index) => {
-            return index;
-          })}
+          {pp()}
         </TabPane>
       </Tabs>
     </SideSheet>

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
+import moment from 'moment'
 import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
 import "../style.less";
 import NvrModal from "../components/nvrModal";
@@ -142,6 +143,9 @@ const NvrHeader = (props) => {
         title: "创建时间",
         dataIndex: "createTime",
         key: "f",
+         render: (text, r, index) => {
+          return  moment(r.createTime).format('YYYY-MM-DD HH:MM:SS')
+        },
       },
       {
         title: "项目名称",

code/VideoAccess-VCMP/web/package.json

@@ -65,7 +65,7 @@
         "koa-better-http-proxy": "^0.2.5",
         "koa-proxy": "^1.0.0-alpha.3",
         "koa-view": "^2.1.4",
-        "moment": "^2.22.0",
+        "moment": "^2.29.3",
         "npm": "^7.20.6",
         "perfect-scrollbar": "^1.5.5",
         "socket.io-client": "^4.5.0",