Browse Source

表格

release_0.0.1
wenlele 3 years ago
parent
commit
3f5742570b
  1. 2
      code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx
  2. 228
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

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

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

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

@ -1,10 +1,111 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Card } from "@douyinfe/semi-ui"; import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
import "../style.less"; import "../style.less";
const NvrHeader = (props) => { const NvrHeader = (props) => {
const { dispatch, actions, user, loading } = 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 ( return (
<> <>
<div className="NvrHeader"> <div className="NvrHeader">
@ -43,7 +144,130 @@ const NvrHeader = (props) => {
添加NVR 添加NVR
</div> </div>
</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}
/>
</> </>
); );
}; };

Loading…
Cancel
Save