From 5744fe52b8fa000cefbce9e842c58fad8e822054 Mon Sep 17 00:00:00 2001
From: wenlele <wen.lele@free-sun.com.cn>
Date: Thu, 28 Apr 2022 13:44:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/assets/images/background/setup.png | Bin 0 -> 945 bytes
 .../equipmentWarehouse/components/setup.jsx   |  33 +++
 .../equipmentWarehouse/containers/nvr.jsx     | 204 ++++++++++++------
 3 files changed, 166 insertions(+), 71 deletions(-)
 create mode 100644 code/VideoAccess-VCMP/web/client/assets/images/background/setup.png
 create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx

diff --git a/code/VideoAccess-VCMP/web/client/assets/images/background/setup.png b/code/VideoAccess-VCMP/web/client/assets/images/background/setup.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e3944ebc78ba79ec87b9310cbcf771b6038d080
GIT binary patch
literal 945
zcmV;i15W&jP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00001b5ch_0Itp)
z=>Px&Ye_^wR9Hu~m|cj~RTRa4D@jZ#$w)J-hlI$CaEOeu2h%bkB%+5jLiEK5ViYA4
zoQfn1KOT}P5M`<d#XwM~2o1}=$d9NYCPvd96km*rd?=r)75nm^%gkTzz2_XK^D@J|
zYp=c7`|N%8zM|mRei>K=T;Ia{0`Rt^o?Lq68rYr-98R=*SkkA7*aoabP(<g|L?^FE
z+K`AX7PK39I?>7dl9nW5^99)+4}1&Undsy+@PMS>67eHbW_v8~T95!ofIdklZI1y~
z0_%VqQ^_mbMc^%9gQUM~-w&(+?gPG#;*b=WOCw}^JMe7H;g`TQz`dD5>hLo_RNt)H
z7keZ%uR!xs+YX1vN-p{p3JvpzBz@kjGTR~SC@^~z$V(^&fG$b@G$LesIq*&i(<s_>
zOX`*FiNGmf@+gv*P{sYaJp^q9)|4>(4>sFF&{^QtLh^IKe&BoH58yUnCh!<AwSe<N
z2>J$y-jH*mZ@d8Pko0%m(DnpiHSi)3|EHesLeO2n$G|O#R=)%DCH>F|Z~H;uld6w(
zf}a2u4OQ8ss>&YkU}a$5P|xV(p{n3W-$xy=eLz&%#SyQ)?YIkFZH#wIdL~84aE$GP
zz=9Tb$0fxx(l~WNgTRb74(CXUJC}8AKMEXZVKgWy3L#t2pTI;(|7NMl1m~peCrNjt
z@K;Y!l>JpH_;@UU^TVHxluP}Kq?<Z9upK?^GhlirZ0-B=z``i|7zaKCrX>(emh@{o
zob8yW)+caX4)R_I`myS+DI8Bq+SftQGT_}5vddt4LQssCHzX2772X}WZiTPz&vQUD
z#h5fxP83Q%@Mg*5x>nMb6fY&1((z-xq}SU-DF(fm%Tps1Rn{-*@RbZ`9{^h=eKlN|
z?dZtS1haQOVEK@s_#0bBvxR4bdy}NtMjFTV8`XA_LD7Wn8jT@8Mv&&FVms3H1u!mC
zQ54D(^-f)1gCe(wfGJU3EgXyxR7ELz+C7<fXh71>bwO8Gd;6SfCE6+JwC(tOXyB^<
z;&F+f%*c#@XI(to*8wp|-8_t?p0e0}H)i&sMwJ0;vjkP?hzanKHiEi=ZG}<VTq39!
zc)pFGmtv1E6tts6&|+Xu8$mHS?5$FkGk!$Mo+=R(HW8(zz_r!pQU8IWFhKAh;*LIj
T=tnCm00000NkvXXu0mjf-*mhN

literal 0
HcmV?d00001

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
new file mode 100644
index 0000000..276670b
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import { Modal, CheckboxGroup, Checkbox } from "@douyinfe/semi-ui";
+
+function Setup(props) {
+  const { dispatch, actions, user, loading, visible, close, editData } = props;
+  return (
+    <Modal
+      title="基本对话框"
+      visible={visible}
+      onOk={() => {
+        close();
+      }}
+      onCancel={() => {
+        close();
+      }}
+    >
+      <CheckboxGroup
+        options={[
+          { label: "抖音", value: "abc" },
+          { label: "火山", value: "hotsoon" },
+          { label: "皮皮虾", value: "pipixia" },
+          { label: "今日头条", value: "toutiao" },
+        ]}
+        style={{ width: "100%" }}
+        direction="horizontal"
+        defaultValue={["hotsoon"]}
+        onChange={()=>{}}
+      />
+    </Modal>
+  );
+}
+
+export default Setup;
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 ae58a53..9796cce 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
@@ -1,11 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
 import "../style.less";
-import NvrModal from "../components/nvrModal"
+import NvrModal from "../components/nvrModal";
+import Setup from "../components/setup";
 
 const NvrHeader = (props) => {
   const { dispatch, actions, user, loading } = props;
+  const [setup, setSetup] = useState(false);
 
   const screen = {
     width: 193,
@@ -16,7 +18,6 @@ const NvrHeader = (props) => {
   const columns = [
     {
       title: "序号",
-      align: "center",
       render: (text, record, index) => {
         return index + 1;
       },
@@ -24,8 +25,8 @@ const NvrHeader = (props) => {
     {
       title: "设备名称",
       //   dataIndex: "name",///
-      align: "center",
       width: 200,
+      background: "red",
       render: (text, record, index) => {
         return (
           <div>
@@ -45,34 +46,30 @@ const NvrHeader = (props) => {
     },
     {
       title: "设备厂家",
-      align: "center",
       dataIndex: "size",
     },
     {
       title: "SIP地址",
-      align: "center",
       dataIndex: "owner",
     },
     {
       title: "端口号",
-      align: "center",
       dataIndex: "updateTime",
     },
     {
       title: "通道数",
-      align: "center",
       dataIndex: "nameIconSrc",
     },
     {
       title: "操作",
-      align: "center",
+      width: "20%",
       dataIndex: "",
       render: (y) => {
         return (
           <>
-            <Button>修改</Button>
-            <Button>查看</Button>
-            <Button>删除</Button>
+            <Button theme="borderless">修改</Button>
+            <Button theme="borderless">查看</Button>
+            <Button theme="borderless">删除</Button>
           </>
         );
       },
@@ -109,45 +106,53 @@ const NvrHeader = (props) => {
   ];
   return (
     <>
-      <div style={{position:''}}>
-                <video id='nvrBanner' autoPlay loop muted style={{ width: '100%', objectFit: 'cover', height: 171 }} src='/assets/video/nvr_banner.mp4' type='video/mp4' />
-                <div style={{position: 'absolute',top:12}}>
-                    <div
-                        style={{
-                            fontSize: 22 + "px",
-                            paddingTop: 15 + "px",
-                            marginLeft: 21 + "px",
-                        }}
-                    >
-                        NVR管理
-                    </div>
-                    <div
-                        style={{
-                            fontSize: 14 + "px",
-                            paddingTop: 18 + "px",
-                            marginLeft: 20 + "px",
-                        }}
-                    >
-                        对NVR（网络硬盘录像机）设备节点的管理
-                    </div>
-                    <div
-                        style={{
-                            fontSize: 14 + "px",
-                            marginTop: 28 + "px",
-                            marginLeft: 21 + "px",
-                            width: 89 + "px",
-                            height: 32 + "px",
-                            lineHeight: 32 + "px",
-                            textAlign: "center",
-                            backgroundColor: "#D9EAFF",
-                            color: "#1859C1",
-                            cursor: "pointer",
-                        }}
-                    >
-                        <NvrModal modalName="添加NVR"/>
-                    </div>
-                </div>
-            </div>
+      <div style={{ position: "" }}>
+        <video
+          id="nvrBanner"
+          autoPlay
+          loop
+          muted
+          style={{ width: "100%", objectFit: "cover", height: 171 }}
+          src="/assets/video/nvr_banner.mp4"
+          type="video/mp4"
+        />
+        <div style={{ position: "absolute", top: 12 }}>
+          <div
+            style={{
+              fontSize: 22 + "px",
+              paddingTop: 15 + "px",
+              marginLeft: 21 + "px",
+            }}
+          >
+            NVR管理
+          </div>
+          <div
+            style={{
+              fontSize: 14 + "px",
+              paddingTop: 18 + "px",
+              marginLeft: 20 + "px",
+            }}
+          >
+            对NVR（网络硬盘录像机）设备节点的管理
+          </div>
+          <div
+            style={{
+              fontSize: 14 + "px",
+              marginTop: 28 + "px",
+              marginLeft: 21 + "px",
+              width: 89 + "px",
+              height: 32 + "px",
+              lineHeight: 32 + "px",
+              textAlign: "center",
+              backgroundColor: "#D9EAFF",
+              color: "#1859C1",
+              cursor: "pointer",
+            }}
+          >
+            <NvrModal modalName="添加NVR" />
+          </div>
+        </div>
+      </div>
       <div
         style={{
           width: "100%",
@@ -215,7 +220,7 @@ const NvrHeader = (props) => {
           </Form>
           <div
             style={{
-              width: 0,
+              width: 150,
               display: "flex",
               justifyContent: "flex-end",
               alignItems: "flex-end",
@@ -228,8 +233,8 @@ const NvrHeader = (props) => {
                 width: 65,
                 height: 30,
                 borderRadius: 3,
-                marginBottom: "20px",
-                marginRight: "20px",
+                marginBottom: 20,
+                marginRight: 20,
               }}
             >
               搜素
@@ -243,7 +248,7 @@ const NvrHeader = (props) => {
                 backGround: "#FFFFFF",
                 borderRadius: 3,
                 border: "1px solid #D9D9D9",
-                marginBottom: "20px",
+                marginBottom: 20,
               }}
             >
               重置
@@ -251,8 +256,15 @@ const NvrHeader = (props) => {
           </div>
         </div>
       </div>
-      <Table
-        title={
+      <div style={{ background: "#FFFFFF", marginTop: 5 }}>
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "13px 20px",
+          }}
+        >
           <div
             style={{
               width: 64,
@@ -266,24 +278,74 @@ const NvrHeader = (props) => {
           >
             设备列表
           </div>
-        }
-        columns={columns}
-        dataSource={data}
-        pagination={false}
-        bordered={false}
-      />
+          <div>
+            <Button
+              style={{
+                width: 32,
+                height: 32,
+                background: "#D9D9D9",
+                borderadius: 3,
+                marginRight: 20,
+              }}
+              type="primary"
+              key="primary"
+              onClick={() => {
+                setSetup(true);
+              }}
+            >
+              <img
+                src="../../../../assets/images/background/setup.png"
+                alt="设置"
+                style={{ width: 18, height: 18 }}
+              />
+            </Button>
+            <Button
+              style={{
+                width: 65,
+                height: 32,
+                background: "#FFFFFF",
+                borderRadius: 3,
+                border: "1px solid #1859C1",
+              }}
+            >
+              导出
+            </Button>
+          </div>
+        </div>
+        <Table
+          columns={columns}
+          dataSource={data}
+          pagination={false}
+          bordered={false}
+          empty="暂无数据"
+          style={{ padding: "0px 20px" }}
+        />
+        {setup ? (
+          <Setup
+            visible={true}
+            close={() => {
+              setSetup(false);
+              // setEditData(null)
+            }}
+            // reportType={reportType}
+            // editData={editData}
+          />
+        ) : (
+          ""
+        )}
+      </div>
     </>
   );
 };
 
-function mapStateToProps (state) {
-    const { auth, global, members } = state;
-    return {
-        loading: members.isRequesting,
-        user: auth.user,
-        actions: global.actions,
-        members: members.data,
-    };
+function mapStateToProps(state) {
+  const { auth, global, members } = state;
+  return {
+    loading: members.isRequesting,
+    user: auth.user,
+    actions: global.actions,
+    members: members.data,
+  };
 }
 
 export default connect(mapStateToProps)(NvrHeader);