Browse Source

列表的设置选择问题

release_0.0.1
wenlele 3 years ago
parent
commit
70d75b164a
  1. 49
      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

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

@ -19,7 +19,6 @@ function Setup(props) {
CAMERAS,
cameraSetup,
} = props;
const [checkeds, setCheckeds] = useState([]);
const [check, setCheck] = useState([]);
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };
@ -32,6 +31,7 @@ function Setup(props) {
} else {
setCheck(ISgetItem1 ? JSON.parse(ISgetItem1) : []);
}
ischeck();
}, []);
const equipmentNVR = [
@ -64,15 +64,46 @@ function Setup(props) {
{ name: "监测因素", value: "factor" },
];
function ischeck(value) {
if (check.length >= 8) {
if (check.includes(value)) {
return false;
} else {
return true;
}
}
}
return (
<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}
style={{ width: 600 }}
onOk={() => {
cameraSetup
? localStorage.setItem(CAMERAS, JSON.stringify(checkeds))
: localStorage.setItem(SETUPS, JSON.stringify(checkeds));
? localStorage.setItem(CAMERAS, JSON.stringify(check))
: localStorage.setItem(SETUPS, JSON.stringify(check));
close();
}}
onCancel={() => {
@ -85,9 +116,9 @@ function Setup(props) {
direction="horizontal"
defaultValue={check}
aria-label="表格属性设置"
// disabled={true}
onChange={(checked) => {
setCheckeds(checked);
onChange={(check) => {
setCheck(check);
ischeck();
}}
>
<div
@ -115,6 +146,7 @@ function Setup(props) {
key={item.value}
value={item.value}
style={checkboxcss}
disabled={ischeck(item.value)}
>
{item.name}
</Checkbox>
@ -141,13 +173,14 @@ function Setup(props) {
>
项目信息
</div>
<div style={{ padding: "15px 12px", width: 530 }}>
<div style={{ padding: "15px 12px", width: 530 }}>
{(cameraSetup ? projectCamera : projectNVR).map((item) => {
return (
<Checkbox
key={item.value}
value={item.value}
style={checkboxcss}
disabled={ischeck(item.value)}
>
{item.name}
</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" },
];
const IFname = [
"设备名称:",
"设备编号:",
"接入方式:",
"厂商:",
"添加账号:",
"添加时间:",
"行政区别:",
"设备安装位置:",
"SIP服务编号:",
"SIP域:",
"SIP端口号:",
"通道数量:",
"心跳周期:",
"最大心跳次数:",
"注册密码:",
"注册有效期::",
"接入识别模块:",
{ name: "设备名称:", value: "" },
{ name: "设备编号:", value: "" },
{ name: "接入方式:", value: "" },
{ name: "厂商:", value: "" },
{ name: "添加账号:", value: "" },
{ name: "添加时间:", value: "" },
{ name: "行政区别:", value: "" },
{ name: "设备安装位置:", value: "" },
{ name: "SIP服务编号:", value: "" },
{ name: "SIP域:", value: "" },
{ 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);
const styles = {
width: 180,
@ -94,9 +113,7 @@ function SideSheets(props) {
</div>
</TabPane>
<TabPane tab="设备信息" itemKey="2">
{IFname.map((item, index) => {
return index;
})}
{pp()}
</TabPane>
</Tabs>
</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 { connect } from "react-redux";
import moment from 'moment'
import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
import "../style.less";
import NvrModal from "../components/nvrModal";
@ -142,6 +143,9 @@ const NvrHeader = (props) => {
title: "创建时间",
dataIndex: "createTime",
key: "f",
render: (text, r, index) => {
return moment(r.createTime).format('YYYY-MM-DD HH:MM:SS')
},
},
{
title: "项目名称",

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

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

Loading…
Cancel
Save