表格修改

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;

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 theme="borderless">修改</Button>
-            <Button>查看</Button>
+            <Button theme="borderless">查看</Button>
-            <Button>删除</Button>
+            <Button theme="borderless">删除</Button>
           </>
         );
       },
@@ -109,45 +106,53 @@ const NvrHeader = (props) => {
   ];
   return (
     <>
-      <div style={{position:''}}>
+      <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' />
+        <video
-                <div style={{position: 'absolute',top:12}}>
+          id="nvrBanner"
-                    <div
+          autoPlay
-                        style={{
+          loop
-                            fontSize: 22 + "px",
+          muted
-                            paddingTop: 15 + "px",
+          style={{ width: "100%", objectFit: "cover", height: 171 }}
-                            marginLeft: 21 + "px",
+          src="/assets/video/nvr_banner.mp4"
-                        }}
+          type="video/mp4"
-                    >
+        />
-                        NVR管理
+        <div style={{ position: "absolute", top: 12 }}>
-                    </div>
+          <div
-                    <div
+            style={{
-                        style={{
+              fontSize: 22 + "px",
-                            fontSize: 14 + "px",
+              paddingTop: 15 + "px",
-                            paddingTop: 18 + "px",
+              marginLeft: 21 + "px",
-                            marginLeft: 20 + "px",
+            }}
-                        }}
+          >
-                    >
+            NVR管理
-                        对NVR（网络硬盘录像机）设备节点的管理
+          </div>
-                    </div>
+          <div
-                    <div
+            style={{
-                        style={{
+              fontSize: 14 + "px",
-                            fontSize: 14 + "px",
+              paddingTop: 18 + "px",
-                            marginTop: 28 + "px",
+              marginLeft: 20 + "px",
-                            marginLeft: 21 + "px",
+            }}
-                            width: 89 + "px",
+          >
-                            height: 32 + "px",
+            对NVR（网络硬盘录像机）设备节点的管理
-                            lineHeight: 32 + "px",
+          </div>
-                            textAlign: "center",
+          <div
-                            backgroundColor: "#D9EAFF",
+            style={{
-                            color: "#1859C1",
+              fontSize: 14 + "px",
-                            cursor: "pointer",
+              marginTop: 28 + "px",
-                        }}
+              marginLeft: 21 + "px",
-                    >
+              width: 89 + "px",
-                        <NvrModal modalName="添加NVR"/>
+              height: 32 + "px",
-                    </div>
+              lineHeight: 32 + "px",
-                </div>
+              textAlign: "center",
-            </div>
+              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",
+                marginBottom: 20,
-                marginRight: "20px",
+                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
+      <div style={{ background: "#FFFFFF", marginTop: 5 }}>
-        title={
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "13px 20px",
+          }}
+        >
           <div
             style={{
               width: 64,
@@ -266,24 +278,74 @@ const NvrHeader = (props) => {
           >
             设备列表
           </div>
-        }
+          <div>
-        columns={columns}
+            <Button
-        dataSource={data}
+              style={{
-        pagination={false}
+                width: 32,
-        bordered={false}
+                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) {
+function mapStateToProps(state) {
-    const { auth, global, members } = state;
+  const { auth, global, members } = state;
-    return {
+  return {
-        loading: members.isRequesting,
+    loading: members.isRequesting,
-        user: auth.user,
+    user: auth.user,
-        actions: global.actions,
+    actions: global.actions,
-        members: members.data,
+    members: members.data,
-    };
+  };
 }
 
 export default connect(mapStateToProps)(NvrHeader);