查询功能样式完成

code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js

@@ -45,6 +45,7 @@ export function addchangeNvr(data) {
       dispatch: dispatch,
       data,
       actionType: "ADD_CHANGE_NVR",
+      msg: { option: "添加/修改" },
       url: `${ApiTable.nvr}`,
     });
 }

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

@@ -1,10 +1,19 @@
 import React, { useState, useEffect } from "react";
 import { SideSheet, Tabs, TabPane } from "@douyinfe/semi-ui";
+import copy from "copy-to-clipboard";
 
 function SideSheets(props) {
-  const { dispatch, actions, user, loading, visible, close, SETUPS ,cameraSetup} = props;
+  const {
-  const [checkeds, setCheckeds] = useState([]);
+    dispatch,
-  const [check, setCheck] = useState([]);
+    actions,
+    user,
+    loading,
+    visible,
+    close,
+    SETUPS,
+    cameraSetup,
+  } = props;
+  const [clickStyle, setclickStyle] = useState();
   const list = [
     {
       name: "项目名称",
@@ -38,16 +47,39 @@ function SideSheets(props) {
     { name: "注册密码：", value: "**********" },
     { name: "注册有效期：:", value: "3600s" },
     { name: "接入识别模块：", value: "sssss" },
-    { name: "通道1", value1: "145641201564-1", value2: "哦哦哦我我我喔噢喔喔我" },
+    {
+      name: "通道1",
+      value1: "145641201564-1",
+      value2: "哦哦哦我我我喔噢喔喔我",
+    },
     { name: "通道2", value1: "145641201564-2", value2: "哦哦哦哦哦噢噢欧欧哦" },
   ];
+  const sewage = [
+    { name: "设备名称：", value: "消火栓呼呼呼呼" },
+    { name: "SIP编号/设备编号：", value: "D50F2049010B" },
+    { name: "接入方式：", value: "NJBJ858G68H" },
+    { name: "厂商：", value: "哇哇哇哇哇" },
+    { name: "添加账号：", value: "Superadmin" },
+    { name: "添加时间：", value: "2022-09-09" },
+    {
+      name: "设备安装位置：",
+      value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
+    },
+    { name: "HLS地址", value: "" },
+    { name: "FLV地址", value: "" },
+    { name: "RTMP地址", value: "" },
+    { name: "EZOPEN地址", value: "" },
+    { name: "ONVIF地址", value: "" },
+    { name: "云储存地址", value: "" },
+    { name: "本地储存地址", value: "" },
+  ];
   function pp() {
     let str = [];
-    console.log(IFname.length);
+    for (let i = 0; i < (cameraSetup ? sewage : IFname).length; i++) {
-    for (let i = 0; i < IFname.length; i++) {
       if (i === 0) {
         str.push(
-          <div key="Basic_information"
+          <div
+            key="Basic_information"
             style={{
               fontWeight: "600",
               color: "#1859C1",
@@ -58,7 +90,7 @@ function SideSheets(props) {
           </div>
         );
       }
-      if (i === 8) {
+      if (cameraSetup ? i == 7 : i == 8) {
         str.push(
           <div key="Access_information">
             <img
@@ -73,12 +105,12 @@ function SideSheets(props) {
                 margin: "15px 0 0 40px",
               }}
             >
-              接入信息
+              {cameraSetup ? "复制直播地址" : "接入信息"}
             </div>
           </div>
         );
       }
-      if (i === 17) {
+      if (cameraSetup ? i == 12 : i == 17) {
         str.push(
           <div key="Camera_information">
             <img
@@ -93,14 +125,19 @@ function SideSheets(props) {
                 margin: "15px 0 0 40px",
               }}
             >
-              摄像头信息
+              {cameraSetup ? "复制回收地址" : "摄像头信息"}
             </div>
           </div>
         );
       }
-      if ((0 <= i && i < 6) || (i > 7 && i <= 16)) {
+      if (
+        cameraSetup ? 0 <= i && i < 6 : (0 <= i && i < 6) || (i > 7 && i <= 16)
+      ) {
         str.push(
-          <div key={i} style={{ width: "50%", display: "inline-block", marginTop: 20 }}>
+          <div
+            key={i}
+            style={{ width: "50%", display: "inline-block", marginTop: 20 }}
+          >
             <span
               style={{
                 width: 150,
@@ -110,15 +147,15 @@ function SideSheets(props) {
                 color: "rgba(0, 0, 0, 0.45)",
               }}
             >
-              {IFname[i].name}
+              {(cameraSetup ? sewage : IFname)[i].name}
             </span>
             <span style={{ fontWeight: "600", color: " #34383E" }}>
-              {IFname[i].value}
+              {(cameraSetup ? sewage : IFname)[i].value}
             </span>
           </div>
         );
       }
-      if (i > 5 && i < 8) {
+      if (cameraSetup ? i == 6 : i > 5 && i < 8) {
         str.push(
           <div key={i} style={{ marginTop: 14 }}>
             <span
@@ -130,19 +167,32 @@ function SideSheets(props) {
                 color: "rgba(0, 0, 0, 0.45)",
               }}
             >
-              {IFname[i].name}
+              {(cameraSetup ? sewage : IFname)[i].name}
             </span>
             <span style={{ fontWeight: "600", color: " #34383E" }}>
-              {IFname[i].value}
+              {(cameraSetup ? sewage : IFname)[i].value}
             </span>
           </div>
         );
       }
-      if (i > 16) {
+      if (cameraSetup ? i > 6 && i < 14 : i > 16) {
         str.push(
           <div
             key={i}
-            style={{
+            style={
+              cameraSetup
+                ? {
+                    width: 120,
+                    height: 130,
+                    display: "inline-block",
+                    borderRadius: 4,
+                    border: "1px solid #D9D9D9",
+                    margin: "20px 0 0 40px",
+                    textAlign: "center",
+                    color: clickStyle == sewage[i].name ? "white" : "",
+                    background: clickStyle == sewage[i].name ? "#1859C1" : "",
+                  }
+                : {
                     width: "40%",
                     display: "inline-block",
                     borderRadius: 4,
@@ -150,19 +200,83 @@ function SideSheets(props) {
                     margin: "16px 0 0 36px",
                     color: "rgba(0, 0, 0, 0.85)",
                     fontWeight: "600",
-            }}
+                  }
+            }
+            onClick={
+              cameraSetup
+                ? (e) => {
+                    copy(sewage[i].name);
+                    // alert("复制成功");
+                    setclickStyle(sewage[i].name);
+                  }
+                : ""
+            }
           >
             <div
-              style={{
+              style={
+                cameraSetup
+                  ? {}
+                  : {
                       padding: "8px 10px",
                       borderBottom: "1px solid rgba(151, 151, 151, 0.2)",
-              }}
+                    }
+              }
             >
-              <img src="/assets/images/background/camera.png" style={{marginRight:10}} />
+              <img
-              {IFname[i].name}
+                src={`/assets/images/background/${
+                  cameraSetup
+                    ? i < 12
+                      ? clickStyle == sewage[i].name
+                        ? "sewage_camera2"
+                        : "sewage_camera1"
+                      : clickStyle == sewage[i].name
+                      ? "store2"
+                      : "store1"
+                    : "camera"
+                }.png`}
+                style={
+                  cameraSetup ? { margin: "20px 0 8px 0" } : { marginRight: 10 }
+                }
+              />
+              <div
+                style={
+                  cameraSetup
+                    ? {}
+                    : {
+                        display: "inline-block",
+                      }
+                }
+              >
+                {cameraSetup ? (
+                  <>
+                    {sewage[i].name}
+                    <img
+                      src={`/assets/images/background/${
+                        clickStyle == sewage[i].name ? "copy2" : "copy1"
+                      }.png`}
+                      style={{
+                        paddingBottom: 10,
+                        display: "inline-block",
+                        width: 10,
+                        height: 20,
+                      }}
+                    />
+                  </>
+                ) : (
+                  IFname[i].name
+                )}
+              </div>
             </div>
+            {cameraSetup ? (
+              ""
+            ) : (
+              <>
                 <p style={{ margin: "16px 0 0 30px " }}>{IFname[i].value1}</p>
-            <p style={{margin:"16px 0 20px 30px "}}>{IFname[i].value2}</p>
+                <p style={{ margin: "16px 0 20px 30px " }}>
+                  {IFname[i].value2}
+                </p>
+              </>
+            )}
           </div>
         );
       }
@@ -219,7 +333,10 @@ function SideSheets(props) {
                       textAlign: "center",
                     }}
                   >
-                    <img src={`/assets/images/background/projectIcon${index}.png`} style={{marginRight:10}} />
+                    <img
+                      src={`/assets/images/background/projectIcon${index}.png`}
+                      style={{ marginRight: 10 }}
+                    />
                     {item.name}
                   </div>
                   <div style={styles}>{item.a}</div>

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

@@ -324,7 +324,7 @@ const CameraHeader = (props) => {
               <Form.Select.Option value="yes">在线</Form.Select.Option>
               <Form.Select.Option value="no">离线</Form.Select.Option>
             </Form.Select>
-            <Form.Select
+            {/* <Form.Select
               label="关联项目："
               labelPosition="left"
               field="type3"
@@ -337,7 +337,7 @@ const CameraHeader = (props) => {
               <Form.Select.Option value="智慧水务">
                 飞尚科技2
               </Form.Select.Option>
-            </Form.Select>
+            </Form.Select> */}
           </Form>
           <div
             style={{

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
-import moment from 'moment'
+import moment from "moment";
 import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
 import "../style.less";
 import NvrModal from "../components/nvrModal";
@@ -144,7 +144,7 @@ const NvrHeader = (props) => {
         dataIndex: "createTime",
         key: "f",
         render: (text, r, index) => {
-          return  moment(r.createTime).format('YYYY-MM-DD HH:MM:SS')
+          return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
         },
       },
       {
@@ -297,7 +297,7 @@ const NvrHeader = (props) => {
               <Form.Select.Option value="yes">在线</Form.Select.Option>
               <Form.Select.Option value="no">离线</Form.Select.Option>
             </Form.Select>
-            <Form.Select
+            {/* <Form.Select
               label="关联项目："
               labelPosition="left"
               field="type3"
@@ -310,7 +310,7 @@ const NvrHeader = (props) => {
               <Form.Select.Option value="智慧水务">
                 飞尚科技2
               </Form.Select.Option>
-            </Form.Select>
+            </Form.Select> */}
           </Form>
           <div
             style={{
@@ -339,7 +339,6 @@ const NvrHeader = (props) => {
                         item.name.indexOf(values.name) > -1 &&
                         item.venderId === values.venderId
                       );
-                       
                     })
                   );
                 });

code/VideoAccess-VCMP/web/package.json

@@ -60,6 +60,7 @@
         "@vitejs/plugin-react": "^1.3.1",
         "@vitejs/plugin-react-refresh": "^1.3.6",
         "args": "^5.0.1",
+        "copy-to-clipboard": "^3.3.1",
         "cross-env": "^7.0.3",
         "fs-web-server-scaffold": "^1.0.6",
         "koa-better-http-proxy": "^0.2.5",