表格

code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx

@@ -18,7 +18,7 @@ const Login = props => {
 
     useEffect(() => {
         if (user && user.authorized) {
-            dispatch(push('/example/e1'));
+            dispatch(push('/equipmentWarehouse/nvr'));
         }
     }, [user])
 

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

@@ -1,10 +1,111 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import { Card } from "@douyinfe/semi-ui";
+import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
 import "../style.less";
 
 const NvrHeader = (props) => {
   const { dispatch, actions, user, loading } = props;
+
+  const screen = {
+    width: 193,
+    marginRight: 20,
+    marginBottom: 16,
+    color: "rgba(0, 0, 0, 0.65)",
+  };
+  const columns = [
+    {
+      title: "序号",
+      align: "center",
+      render: (text, record, index) => {
+        return index + 1;
+      },
+    },
+    {
+      title: "设备名称",
+      //   dataIndex: "name",///
+      align: "center",
+      width: 200,
+      render: (text, record, index) => {
+        return (
+          <div>
+            <span
+              style={{
+                backgroundColor: record.avatarBg,
+                width: "10px",
+                height: "10px",
+                borderRadius: "50%",
+                display: "inline-block",
+              }}
+            ></span>
+            {record.name}
+          </div>
+        );
+      },
+    },
+    {
+      title: "设备厂家",
+      align: "center",
+      dataIndex: "size",
+    },
+    {
+      title: "SIP地址",
+      align: "center",
+      dataIndex: "owner",
+    },
+    {
+      title: "端口号",
+      align: "center",
+      dataIndex: "updateTime",
+    },
+    {
+      title: "通道数",
+      align: "center",
+      dataIndex: "nameIconSrc",
+    },
+    {
+      title: "操作",
+      align: "center",
+      dataIndex: "",
+      render: (y) => {
+        return (
+          <>
+            <Button>修改</Button>
+            <Button>查看</Button>
+            <Button>删除</Button>
+          </>
+        );
+      },
+    },
+  ];
+  const data = [
+    {
+      key: "1",
+      name: "智能设备NVR1",
+      nameIconSrc: "12",
+      size: "飞尚科技1",
+      owner: "192.168.1.1",
+      updateTime: "5000",
+      avatarBg: "red",
+    },
+    {
+      key: "2",
+      name: "智能设备NVR2",
+      nameIconSrc: "8",
+      size: "飞尚科技2",
+      owner: "192.168.1.3",
+      updateTime: "5001",
+      avatarBg: "green",
+    },
+    {
+      key: "3",
+      name: "智能设备NVR3",
+      nameIconSrc: "9",
+      size: "飞尚科技3",
+      owner: "192.168.1.2",
+      updateTime: "5002",
+      avatarBg: "green",
+    },
+  ];
   return (
     <>
       <div className="NvrHeader">
@@ -43,7 +144,130 @@ const NvrHeader = (props) => {
           添加NVR
         </div>
       </div>
-      <Card title="筛选条件" headerLine={false}></Card>
+      <div
+        style={{
+          width: "100%",
+          background: "#FFFFFF",
+          borderRadius: 3,
+          padding: "8px 20px",
+          marginTop: 20,
+        }}
+      >
+        <div
+          style={{
+            height: 22,
+            fontSize: 16,
+            fontFamily: "PingFangSC-Medium, PingFang SC",
+            fontWeight: "bold",
+            color: " rgba(0, 0, 0, 0.85)",
+            lineHeight: "22px",
+            marginBottom: 16,
+          }}
+        >
+          筛选条件
+        </div>
+        <div style={{ display: "flex" }}>
+          <Form
+            onSubmit={(values) => console.log(values)}
+            // labelPosition='top'
+            layout="horizontal"
+            style={{ position: "relative", width: "100%", flex: 1 }}
+          >
+            <Form.Input
+              field="设备搜索："
+              placeholder="请输入设备名称"
+              labelPosition="left"
+              style={screen}
+            />
+            <Form.Select
+              label="厂家筛选："
+              labelPosition="left"
+              style={screen}
+              placeholder="全部"
+            >
+              <Form.Select.Option value="f1">飞尚科技1</Form.Select.Option>
+              <Form.Select.Option value="f2">飞尚科技2</Form.Select.Option>
+            </Form.Select>
+            <Form.Select
+              label="状态查询："
+              labelPosition="left"
+              field="type"
+              style={screen}
+              placeholder="全部"
+            >
+              <Form.Select.Option value="yes">在线</Form.Select.Option>
+              <Form.Select.Option value="no">离线</Form.Select.Option>
+            </Form.Select>
+            <Form.Select
+              label="关联项目："
+              labelPosition="left"
+              field="type"
+              style={screen}
+              placeholder="全部"
+            >
+              <Form.Select.Option value="oper ">飞尚科技1</Form.Select.Option>
+              <Form.Select.Option value="r">飞尚科技2</Form.Select.Option>
+            </Form.Select>
+          </Form>
+          <div
+            style={{
+              width: 0,
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "flex-end",
+            }}
+          >
+            <Button
+              theme="solid"
+              type="primary"
+              style={{
+                width: 65,
+                height: 30,
+                borderRadius: 3,
+                marginBottom: "20px",
+                marginRight: "20px",
+              }}
+            >
+              搜素
+            </Button>
+            <Button
+              theme="light"
+              type="primary"
+              style={{
+                width: 65,
+                height: 30,
+                backGround: "#FFFFFF",
+                borderRadius: 3,
+                border: "1px solid #D9D9D9",
+                marginBottom: "20px",
+              }}
+            >
+              重置
+            </Button>
+          </div>
+        </div>
+      </div>
+      <Table
+        title={
+          <div
+            style={{
+              width: 64,
+              height: 22,
+              fontSize: 16,
+              fontfAmily: "PingFangSC-Medium, PingFang SC",
+              fontWeight: "bold",
+              color: "rgba(0, 0, 0, 0.85)",
+              lineHeight: "22px",
+            }}
+          >
+            设备列表
+          </div>
+        }
+        columns={columns}
+        dataSource={data}
+        pagination={false}
+        bordered={false}
+      />
     </>
   );
 };