Browse Source

列表的设置选择问题

release_0.0.1
wenlele 3 years ago
parent
commit
70d75b164a
  1. 47
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
  2. 57
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  3. 4
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
  4. 2
      code/VideoAccess-VCMP/web/package.json

47
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx

@ -19,7 +19,6 @@ function Setup(props) {
CAMERAS, CAMERAS,
cameraSetup, cameraSetup,
} = props; } = props;
const [checkeds, setCheckeds] = useState([]);
const [check, setCheck] = useState([]); const [check, setCheck] = useState([]);
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
@ -32,6 +31,7 @@ function Setup(props) {
} else { } else {
setCheck(ISgetItem1 ? JSON.parse(ISgetItem1) : []); setCheck(ISgetItem1 ? JSON.parse(ISgetItem1) : []);
} }
ischeck();
}, []); }, []);
const equipmentNVR = [ const equipmentNVR = [
@ -64,15 +64,46 @@ function Setup(props) {
{ name: "监测因素", value: "factor" }, { name: "监测因素", value: "factor" },
]; ];
function ischeck(value) {
if (check.length >= 8) {
if (check.includes(value)) {
return false;
} else {
return true;
}
}
}
return ( return (
<Modal <Modal
title="表格属性设置" title={
<div>
表格属性设置
<span
style={{
width: 50,
lineHeight: "19px",
display: "inline-block",
color: "white",
textAlign: "center",
marginLeft: 6,
background:
check.length == 8
? "rgba(40, 123, 255, 1)"
: "rgba(176, 176, 176, 1)",
}}
>
{check.length}/8
</span>
</div>
}
visible={visible} visible={visible}
style={{ width: 600 }} style={{ width: 600 }}
onOk={() => { onOk={() => {
cameraSetup cameraSetup
? localStorage.setItem(CAMERAS, JSON.stringify(checkeds)) ? localStorage.setItem(CAMERAS, JSON.stringify(check))
: localStorage.setItem(SETUPS, JSON.stringify(checkeds)); : localStorage.setItem(SETUPS, JSON.stringify(check));
close(); close();
}} }}
onCancel={() => { onCancel={() => {
@ -85,9 +116,9 @@ function Setup(props) {
direction="horizontal" direction="horizontal"
defaultValue={check} defaultValue={check}
aria-label="表格属性设置" aria-label="表格属性设置"
// disabled={true} onChange={(check) => {
onChange={(checked) => { setCheck(check);
setCheckeds(checked); ischeck();
}} }}
> >
<div <div
@ -115,6 +146,7 @@ function Setup(props) {
key={item.value} key={item.value}
value={item.value} value={item.value}
style={checkboxcss} style={checkboxcss}
disabled={ischeck(item.value)}
> >
{item.name} {item.name}
</Checkbox> </Checkbox>
@ -148,6 +180,7 @@ function Setup(props) {
key={item.value} key={item.value}
value={item.value} value={item.value}
style={checkboxcss} style={checkboxcss}
disabled={ischeck(item.value)}
> >
{item.name} {item.name}
</Checkbox> </Checkbox>

57
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx

@ -18,24 +18,43 @@ function SideSheets(props) {
{ name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" }, { name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
]; ];
const IFname = [ const IFname = [
"设备名称:", { name: "设备名称:", value: "" },
"设备编号:", { name: "设备编号:", value: "" },
"接入方式:", { name: "接入方式:", value: "" },
"厂商:", { name: "厂商:", value: "" },
"添加账号:", { name: "添加账号:", value: "" },
"添加时间:", { name: "添加时间:", value: "" },
"行政区别:", { name: "行政区别:", value: "" },
"设备安装位置:", { name: "设备安装位置:", value: "" },
"SIP服务编号:", { name: "SIP服务编号:", value: "" },
"SIP域:", { name: "SIP域:", value: "" },
"SIP端口号:", { name: "SIP端口号:", value: "" },
"通道数量:", { name: "通道数量:", value: "" },
"心跳周期:", { name: "心跳周期:", value: "" },
"最大心跳次数:", { name: "最大心跳次数:", value: "" },
"注册密码:", { name: "注册密码:", value: "" },
"注册有效期::", { name: "注册有效期::", value: "" },
"接入识别模块:", { name: "接入识别模块:", value: "" },
]; ];
function pp() {
let str = [];
console.log(IFname.length);
for (let i = 0; i < IFname.length; i++) {
if (i === 0) {
str.push(<div>基础</div>);
}
if (0 <= i && i < 6) {
console.log(IFname[i].name);
str.push(
<div>
<span>{IFname[i].name}</span>
<span>{IFname[i].value}</span>
</div>
);
}
}
return str;
}
console.log(IFname); console.log(IFname);
const styles = { const styles = {
width: 180, width: 180,
@ -94,9 +113,7 @@ function SideSheets(props) {
</div> </div>
</TabPane> </TabPane>
<TabPane tab="设备信息" itemKey="2"> <TabPane tab="设备信息" itemKey="2">
{IFname.map((item, index) => { {pp()}
return index;
})}
</TabPane> </TabPane>
</Tabs> </Tabs>
</SideSheet> </SideSheet>

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

@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import moment from 'moment'
import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui"; import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
import "../style.less"; import "../style.less";
import NvrModal from "../components/nvrModal"; import NvrModal from "../components/nvrModal";
@ -142,6 +143,9 @@ const NvrHeader = (props) => {
title: "创建时间", title: "创建时间",
dataIndex: "createTime", dataIndex: "createTime",
key: "f", key: "f",
render: (text, r, index) => {
return moment(r.createTime).format('YYYY-MM-DD HH:MM:SS')
},
}, },
{ {
title: "项目名称", title: "项目名称",

2
code/VideoAccess-VCMP/web/package.json

@ -65,7 +65,7 @@
"koa-better-http-proxy": "^0.2.5", "koa-better-http-proxy": "^0.2.5",
"koa-proxy": "^1.0.0-alpha.3", "koa-proxy": "^1.0.0-alpha.3",
"koa-view": "^2.1.4", "koa-view": "^2.1.4",
"moment": "^2.22.0", "moment": "^2.29.3",
"npm": "^7.20.6", "npm": "^7.20.6",
"perfect-scrollbar": "^1.5.5", "perfect-scrollbar": "^1.5.5",
"socket.io-client": "^4.5.0", "socket.io-client": "^4.5.0",

Loading…
Cancel
Save