表格修改

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>查看</Button>
-            <Button>删除</Button>
+            <Button theme="borderless">修改</Button>
+            <Button theme="borderless">查看</Button>
+            <Button theme="borderless">删除</Button>
           </>
         );
       },
@@ -109,9 +106,17 @@ 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={{ 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",
@@ -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,12 +278,62 @@ const NvrHeader = (props) => {
           >
             设备列表
           </div>
-        }
+          <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>
     </>
   );
 };