设备信息和头部样式

code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx

@@ -1,46 +1,84 @@
-'use strict';
-import React from 'react';
-import { connect } from 'react-redux';
-import { Nav } from '@douyinfe/semi-ui';
+"use strict";
+import React from "react";
+import { connect } from "react-redux";
+import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
 
-const Header = props => {
-    const { dispatch, history, user, actions, socket } = props
+const Header = (props) => {
+  const { dispatch, history, user, actions, socket } = props;
 
   return (
-        <div style={{ position: 'relative', height: 60, minWidth: 520 }}>
-            <div style={{ float: 'left', paddingLeft: 32, fontSize: 16 }}>
-                <div style={{
-                    lineHeight: '60px', display: 'inline-block', fontSize: 20, textShadow: '0 4px 3px rgba(0, 0, 0, 0.2)',
-                    userSelect: 'none'
-                }}>
-                    飞尚物联
-                </div>
-            </div>
-            <div id="nav" style={{ float: 'right' }}>
-                <Nav mode={'horizontal'} onClick={({ itemKey }) => {
-                    if (itemKey == 'logout') {
+    <>
+      <Nav
+        mode={"horizontal"}
+        onClick={({ itemKey }) => {
+          if (itemKey == "logout") {
             dispatch(actions.auth.logout(user));
             if (socket) {
-                            socket.disconnect()
+              socket.disconnect();
             }
             history.push(`/signin`);
           }
-                }}>
-                    <Nav.Sub itemKey={'user'} text={<div style={{ display: 'inline-block' }}>{user && user.namePresent}</div>}>
-                        <Nav.Item itemKey={'logout'} text={'退出'} />
-                    </Nav.Sub>
-                </Nav>
-            </div>
+        }}
+        style={{
+          height: 60,
+          minWidth: 520,
+          background: "url(/assets/images/background/header.png)",
+          backgroundSize: "100% 100%",
+          color: "white",
+        }}
+        header={{
+          logo: (
+            <img
+              src="/assets/images/background/logo.png"
+              style={{ display: "inline-block", width: 280, height: 52}}
+            />
+          ),
+          text: "",
+        }}
+        footer={
+          <Nav.Sub
+            itemKey={"user"}
+            text={
+              <div
+                style={{
+                  marginLeft: 20,
+                  display: "inline-block",
+                  color: "white",
+                }}
+              >
+                <img
+                  src="/assets/images/background/notice.png"
+                  style={{
+                    display: "inline-block",
+                    width: 18,
+                    height: 18,
+                    position: "relative",
+                    top: 6,
+                    left: -10,
+                  }}
+                />
+
+                <Avatar size="small" color="light-blue" style={{ margin: 4 }}>
+                  <img src="/assets/images/avatar/6.png" />
+                </Avatar>
+                {user && user.namePresent}
               </div>
-    )
+            }
+          >
+            <Nav.Item itemKey={"logout"} text={"退出"} />
+          </Nav.Sub>
+        }
+      />
+    </>
+  );
 };
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
   const { global, auth, webSocket } = state;
   return {
     actions: global.actions,
     user: auth.user,
-        socket: webSocket.socket
+    socket: webSocket.socket,
   };
 }
 

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

@@ -2,7 +2,7 @@ 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 { dispatch, actions, user, loading, visible, close, SETUPS ,cameraSetup} = props;
   const [checkeds, setCheckeds] = useState([]);
   const [check, setCheck] = useState([]);
   const list = [
@@ -10,7 +10,7 @@ function SideSheets(props) {
       name: "项目名称",
       a: "南昌县智慧环保",
       b: "南昌县智慧环保",
-      c: "南昌市市政隧道综合管理平台",
+      c: "南昌市市政隧道综合管理平台cbj次哦爱吃此课程实地考察大检查的吃点【",
       d: "C",
     },
     { name: "关联结构物", a: "a", b: "B", c: "C", d: "C" },
@@ -18,54 +18,171 @@ function SideSheets(props) {
     { name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
   ];
   const IFname = [
-    { 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: "" },
+    { name: "设备名称：", value: "消火栓呼呼呼呼" },
+    { name: "设备编号：", value: "D50F2049010B" },
+    { name: "接入方式：", value: "NJBJ858G68H" },
+    { name: "厂商：", value: "哇哇哇哇哇" },
+    { name: "添加账号：", value: "Superadmin" },
+    { name: "添加时间：", value: "2022-09-09" },
+    { name: "行政区别：", value: "江西省-南昌市-南昌县" },
+    {
+      name: "设备安装位置：",
+      value: "江西省南昌县小蓝经开区江西飞尚科技有限公司",
+    },
+    { name: "SIP服务编号：", value: "1111111111" },
+    { name: "SIP域：", value: "KGU876J87" },
+    { name: "SIP端口号：", value: "KGU876J87" },
+    { name: "通道数量：", value: "16通道" },
+    { name: "心跳周期：", value: "3600s" },
+    { name: "最大心跳次数：", value: "3次" },
+    { name: "注册密码：", value: "**********" },
+    { name: "注册有效期：:", value: "3600s" },
+    { name: "接入识别模块：", value: "sssss" },
+    { name: "通道1", value1: "145641201564-1", value2: "哦哦哦我我我喔噢喔喔我" },
+    { name: "通道2", value1: "145641201564-2", value2: "哦哦哦哦哦噢噢欧欧哦" },
   ];
   function pp() {
     let str = [];
     console.log(IFname.length);
     for (let i = 0; i < IFname.length; i++) {
       if (i === 0) {
-        str.push(<div>基础</div>);
+        str.push(
+          <div key="Basic_information"
+            style={{
+              fontWeight: "600",
+              color: "#1859C1",
+              margin: "15px 0 0 40px",
+            }}
+          >
+            基础信息
+          </div>
+        );
       }
-      if (0 <= i && i < 6) {
-        console.log(IFname[i].name);
+      if (i === 8) {
         str.push(
-          <div>
-            <span>{IFname[i].name}</span>
-            <span>{IFname[i].value}</span>
+          <div key="Access_information">
+            <img
+              src="/assets/images/background/straightline.png"
+              alt="1"
+              style={{ width: 872, display: "block", marginTop: 24 }}
+            />
+            <div
+              style={{
+                fontWeight: "600",
+                color: "#1859C1",
+                margin: "15px 0 0 40px",
+              }}
+            >
+              接入信息
+            </div>
+          </div>
+        );
+      }
+      if (i === 17) {
+        str.push(
+          <div key="Camera_information">
+            <img
+              src="/assets/images/background/straightline.png"
+              alt="1"
+              style={{ width: 872, display: "block", marginTop: 24 }}
+            />
+            <div
+              style={{
+                fontWeight: "600",
+                color: "#1859C1",
+                margin: "15px 0 0 40px",
+              }}
+            >
+              摄像头信息
+            </div>
+          </div>
+        );
+      }
+      if ((0 <= i && i < 6) || (i > 7 && i <= 16)) {
+        str.push(
+          <div key={i} style={{ width: "50%", display: "inline-block", marginTop: 20 }}>
+            <span
+              style={{
+                width: 150,
+                display: "inline-block",
+                textAlign: "right",
+                fontWeight: "600",
+                color: "rgba(0, 0, 0, 0.45)",
+              }}
+            >
+              {IFname[i].name}
+            </span>
+            <span style={{ fontWeight: "600", color: " #34383E" }}>
+              {IFname[i].value}
+            </span>
+          </div>
+        );
+      }
+      if (i > 5 && i < 8) {
+        str.push(
+          <div key={i} style={{ marginTop: 14 }}>
+            <span
+              style={{
+                width: 150,
+                display: "inline-block",
+                textAlign: "right",
+                fontWeight: "600",
+                color: "rgba(0, 0, 0, 0.45)",
+              }}
+            >
+              {IFname[i].name}
+            </span>
+            <span style={{ fontWeight: "600", color: " #34383E" }}>
+              {IFname[i].value}
+            </span>
+          </div>
+        );
+      }
+      if (i > 16) {
+        str.push(
+          <div
+          key={i}
+            style={{
+              width: "40%",
+              display: "inline-block",
+              borderRadius: 4,
+              border: "1px solid rgba(151, 151, 151, 0.2)",
+              margin: "16px 0 0 36px",
+              color: "rgba(0, 0, 0, 0.85)",
+              fontWeight: "600",
+            }}
+          >
+            <div
+              style={{
+                padding: "8px 10px",
+                borderBottom: "1px solid rgba(151, 151, 151, 0.2)",
+              }}
+            >
+              <img src="/assets/images/background/camera.png" style={{marginRight:10}} />
+              {IFname[i].name}
+            </div>
+            <p style={{margin:"16px 0 0 30px "}}>{IFname[i].value1}</p>
+            <p style={{margin:"16px 0 20px 30px "}}>{IFname[i].value2}</p>
           </div>
         );
       }
     }
     return str;
   }
-  console.log(IFname);
   const styles = {
     width: 180,
+    height:64,
     textAlign: "center",
-    // background: "#FFFFFF",
     background: "url(/assets/images/background/backGround.png)",
     backgroundSize: "100% 100%",
-    padding: "12px 17px",
+    padding: "12px 17px 12px 17px",
     margin: "30px 0 0 10px",
-    lineHeight: "20px",
-    position: "relative",
+    lineHeight: "24px",
+    overflow: "hidden",
+    textOverflow:"ellipsis",
+    display: "-webkit-box",
+    WebkitLineClamp:"2",
+    WebkitBoxOrient:"vertical",
     zIndex: 5,
   };
 
@@ -74,7 +191,7 @@ function SideSheets(props) {
   return (
     <SideSheet
       visible={visible}
-      title="智慧设备NVR"
+      title={cameraSetup?"污水管理出出口":"智慧设备NVR"}
       style={{ background: "#F9FBFF" }}
       size="large"
       onCancel={() => {
@@ -84,7 +201,7 @@ function SideSheets(props) {
       <Tabs type="line">
         <TabPane tab="项目信息" itemKey="1">
           <div style={{ display: "flex", justifyContent: "space-evenly" }}>
-            {list.map((item) => {
+            {list.map((item,index) => {
               return (
                 <div
                   key={item.name}
@@ -97,10 +214,12 @@ function SideSheets(props) {
                     style={{
                       lineHeight: "32px",
                       background: "#1859C1",
+                      color: "#FFFFFF",
                       borderRadius: 3,
                       textAlign: "center",
                     }}
                   >
+                    <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

@@ -76,7 +76,7 @@ const CameraHeader = (props) => {
       render: (_, row) => {
         //   console.log(row);
         return (
-          <>
+          <div style={{ display: "flex" }}>
             <Button theme="borderless">
               <NvrModal
                 nvrData={row}
@@ -91,11 +91,12 @@ const CameraHeader = (props) => {
               theme="borderless"
               onClick={() => {
                 setSideSheet(true);
+                setcameraSetup(true);
               }}
             >
               查看
             </Button>
-            <Button theme="borderless" size="large">播放</Button>
+            <Button theme="borderless">播放</Button>
             <Button theme="borderless">禁用</Button>
             <Button
               theme="borderless"
@@ -106,7 +107,7 @@ const CameraHeader = (props) => {
             >
               删除
             </Button>
-          </>
+          </div>
         );
       },
     },
@@ -498,8 +499,10 @@ const CameraHeader = (props) => {
         {sideSheet ? (
           <SideSheets
             visible={true}
+            cameraSetup={cameraSetup}
             close={() => {
               setSideSheet(false);
+              setcameraSetup(false);
             }}
           />
         ) : (

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

@@ -73,7 +73,7 @@ const NvrHeader = (props) => {
       render: (_, row) => {
         //   console.log(row);
         return (
-          <>
+          <div style={{display: "flex"}}>
             <Button theme="borderless">
               <NvrModal
                 nvrData={row}
@@ -101,7 +101,7 @@ const NvrHeader = (props) => {
             >
               删除
             </Button>
-          </>
+          </div>
         );
       },
     },