deartibers
2 years ago
8 changed files with 200 additions and 348 deletions
@ -0,0 +1,121 @@ |
|||||
|
import React, { useState, useEffect } from "react"; |
||||
|
import { |
||||
|
Modal, |
||||
|
CheckboxGroup, |
||||
|
Checkbox, |
||||
|
} from "@douyinfe/semi-ui"; |
||||
|
|
||||
|
function Setup(props) { |
||||
|
const { |
||||
|
close, |
||||
|
tableType, |
||||
|
tableList |
||||
|
} = props; |
||||
|
const [check, setCheck] = useState([]); |
||||
|
|
||||
|
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; |
||||
|
|
||||
|
useEffect(() => { |
||||
|
//获取是否勾选信息 |
||||
|
const checkItem = localStorage.getItem(tableType); |
||||
|
setCheck(checkItem?JSON.parse(checkItem) : []) |
||||
|
ischeck(); |
||||
|
}, []); |
||||
|
function ischeck(value) { |
||||
|
if (check.length >= 8) { |
||||
|
if (check.includes(value)) { |
||||
|
return false; |
||||
|
} else { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Modal |
||||
|
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={true} |
||||
|
style={{ width: 600 }} |
||||
|
onOk={() => { |
||||
|
localStorage.setItem(tableType, JSON.stringify(check)); |
||||
|
close(); |
||||
|
}} |
||||
|
onCancel={() => { |
||||
|
close(); |
||||
|
}} |
||||
|
> |
||||
|
<CheckboxGroup |
||||
|
style={{ width: "100%", fontSize: 14 }} |
||||
|
key="primary1" |
||||
|
direction="horizontal" |
||||
|
defaultValue={check} |
||||
|
aria-label="表格属性设置" |
||||
|
onChange={(check) => { |
||||
|
setCheck(check); |
||||
|
ischeck(); |
||||
|
}} |
||||
|
> |
||||
|
{tableList.map((item,index)=>{ |
||||
|
return( |
||||
|
<div |
||||
|
key={index} |
||||
|
style={{ |
||||
|
width: 550, |
||||
|
border: "1px solid #EAEAEA", |
||||
|
padding: "0px 5px", |
||||
|
borderRadius: 4, |
||||
|
marginBottom: "20px", |
||||
|
}} |
||||
|
> |
||||
|
<div |
||||
|
style={{ |
||||
|
borderBottom: "1px solid #EAEAEA", |
||||
|
marginLeft: "10px", |
||||
|
padding: "8px 0px", |
||||
|
}} |
||||
|
> |
||||
|
{item.title} |
||||
|
</div> |
||||
|
<div style={{ padding: "15px 12px", width: 530 }}> |
||||
|
{item.list.map((itm) => { |
||||
|
return ( |
||||
|
<Checkbox |
||||
|
key={itm.value} |
||||
|
value={itm.value} |
||||
|
style={checkboxcss} |
||||
|
disabled={ischeck(itm.value)} |
||||
|
> |
||||
|
{itm.name} |
||||
|
</Checkbox> |
||||
|
); |
||||
|
})} |
||||
|
</div> |
||||
|
</div> |
||||
|
)})} |
||||
|
</CheckboxGroup> |
||||
|
</Modal> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
export default Setup; |
||||
@ -1,191 +0,0 @@ |
|||||
import React, { useState, useEffect } from "react"; |
|
||||
import { |
|
||||
Modal, |
|
||||
CheckboxGroup, |
|
||||
Checkbox, |
|
||||
} from "@douyinfe/semi-ui"; |
|
||||
|
|
||||
function Setup(props) { |
|
||||
const { |
|
||||
visible, |
|
||||
close, |
|
||||
SETUPS, |
|
||||
CAMERAS, |
|
||||
cameraSetup, |
|
||||
} = props; |
|
||||
const [check, setCheck] = useState([]); |
|
||||
|
|
||||
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; |
|
||||
|
|
||||
useEffect(() => { |
|
||||
//获取是否勾选信息 |
|
||||
const nvrItem = localStorage.getItem(SETUPS); |
|
||||
const cameraItem = localStorage.getItem(CAMERAS); |
|
||||
if (cameraSetup) { |
|
||||
setCheck(cameraItem ? JSON.parse(cameraItem) : []); |
|
||||
} else { |
|
||||
setCheck(nvrItem ? JSON.parse(nvrItem) : []); |
|
||||
} |
|
||||
ischeck(); |
|
||||
}, []); |
|
||||
|
|
||||
const equipmentNVR = [ |
|
||||
{ name: "设备厂家", value: "manufactor" }, |
|
||||
{ name: "添加账号", value: "accountNumber" }, |
|
||||
{ name: "通道数", value: "passageway" }, |
|
||||
{ name: "端口", value: "port" }, |
|
||||
{ name: "设备状态", value: "state" }, |
|
||||
{ name: "创建时间", value: "time" }, |
|
||||
]; |
|
||||
const projectNVR = [ |
|
||||
{ name: "项目名称", value: "name" }, |
|
||||
{ name: "pcode", value: "pcode" }, |
|
||||
{ name: "结构物", value: "structure" }, |
|
||||
]; |
|
||||
const equipmentCamera = [ |
|
||||
{ name: "设备厂家", value: "manufactor" }, |
|
||||
{ name: "接入类型", value: "type" }, |
|
||||
{ name: "设备状态", value: "state" }, |
|
||||
{ name: "云台支持", value: "support" }, |
|
||||
{ name: "内存卡信息", value: "memoryCard" }, |
|
||||
{ name: "设备创建时间", value: "time" }, |
|
||||
{ name: "设备添加账号", value: "account" }, |
|
||||
]; |
|
||||
const projectCamera = [ |
|
||||
{ name: "项目名称", value: "name" }, |
|
||||
{ name: "pcode", value: "pcode" }, |
|
||||
{ name: "结构物", value: "structure" }, |
|
||||
{ name: "测点", value: "measuringPoint" }, |
|
||||
{ name: "监测因素", value: "factor" }, |
|
||||
]; |
|
||||
|
|
||||
function ischeck(value) { |
|
||||
if (check.length >= 8) { |
|
||||
if (check.includes(value)) { |
|
||||
return false; |
|
||||
} else { |
|
||||
return true; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<Modal |
|
||||
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(check)) |
|
||||
: localStorage.setItem(SETUPS, JSON.stringify(check)); |
|
||||
close(); |
|
||||
}} |
|
||||
onCancel={() => { |
|
||||
close(); |
|
||||
}} |
|
||||
> |
|
||||
<CheckboxGroup |
|
||||
style={{ width: "100%", fontSize: 14 }} |
|
||||
key="primary1" |
|
||||
direction="horizontal" |
|
||||
defaultValue={check} |
|
||||
aria-label="表格属性设置" |
|
||||
onChange={(check) => { |
|
||||
setCheck(check); |
|
||||
ischeck(); |
|
||||
}} |
|
||||
> |
|
||||
<div |
|
||||
style={{ |
|
||||
width: 550, |
|
||||
border: "1px solid #EAEAEA", |
|
||||
padding: "0px 5px", |
|
||||
borderRadius: 4, |
|
||||
marginBottom: "20px", |
|
||||
}} |
|
||||
> |
|
||||
<div |
|
||||
style={{ |
|
||||
borderBottom: "1px solid #EAEAEA", |
|
||||
marginLeft: "10px", |
|
||||
padding: "8px 0px", |
|
||||
}} |
|
||||
> |
|
||||
设备信息 |
|
||||
</div> |
|
||||
<div style={{ padding: "15px 12px", width: 530 }}> |
|
||||
{(cameraSetup ? equipmentCamera : equipmentNVR).map((item) => { |
|
||||
return ( |
|
||||
<Checkbox |
|
||||
key={item.value} |
|
||||
value={item.value} |
|
||||
style={checkboxcss} |
|
||||
disabled={ischeck(item.value)} |
|
||||
> |
|
||||
{item.name} |
|
||||
</Checkbox> |
|
||||
); |
|
||||
})} |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div |
|
||||
style={{ |
|
||||
width: 550, |
|
||||
border: "1px solid #EAEAEA", |
|
||||
padding: "0px 5px", |
|
||||
borderRadius: 4, |
|
||||
}} |
|
||||
> |
|
||||
<div |
|
||||
style={{ |
|
||||
borderBottom: "1px solid #EAEAEA", |
|
||||
|
|
||||
marginLeft: "10px", |
|
||||
padding: "8px 0px", |
|
||||
}} |
|
||||
> |
|
||||
项目信息 |
|
||||
</div> |
|
||||
<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> |
|
||||
); |
|
||||
})} |
|
||||
</div> |
|
||||
</div> |
|
||||
</CheckboxGroup> |
|
||||
</Modal> |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
export default Setup; |
|
||||
@ -1,138 +0,0 @@ |
|||||
import React, { useState, useEffect } from "react"; |
|
||||
import { |
|
||||
Modal, |
|
||||
CheckboxGroup, |
|
||||
Checkbox, |
|
||||
} from "@douyinfe/semi-ui"; |
|
||||
|
|
||||
function Setup(props) { |
|
||||
const { |
|
||||
visible, |
|
||||
close, |
|
||||
CODE,//错误码 |
|
||||
PIGEON,//信鸽 |
|
||||
pigeonSetup, |
|
||||
} = props; |
|
||||
const [check, setCheck] = useState([]); |
|
||||
|
|
||||
const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" }; |
|
||||
|
|
||||
useEffect(() => { |
|
||||
//获取是否勾选信息 |
|
||||
const codeItem = localStorage.getItem(CODE); |
|
||||
const pigeonItem = localStorage.getItem(PIGEON); |
|
||||
if (pigeonSetup) { |
|
||||
setCheck(pigeonItem ? JSON.parse(pigeonItem) : []); |
|
||||
} else { |
|
||||
setCheck(codeItem ? JSON.parse(codeItem) : []); |
|
||||
} |
|
||||
ischeck(); |
|
||||
}, []); |
|
||||
|
|
||||
const equipmentCode = [//状态码管理 |
|
||||
{ name: "常规解决方案", value: "manufactor" }, |
|
||||
{ name: "状态频率", value: "accountNumber" }, |
|
||||
]; |
|
||||
const equipmentCarrierpigeon = [//信鸽服务 |
|
||||
{ name: "策略类型", value: "manufactor" }, |
|
||||
{ name: "推送机制", value: "type" }, |
|
||||
{ name: "监听设备数量", value: "state" }, |
|
||||
{ name: "累计推送次数", value: "support" }, |
|
||||
]; |
|
||||
|
|
||||
function ischeck(value) { |
|
||||
if (check.length >= 8) { |
|
||||
if (check.includes(value)) { |
|
||||
return false; |
|
||||
} else { |
|
||||
return true; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<Modal |
|
||||
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={() => { |
|
||||
pigeonSetup |
|
||||
? localStorage.setItem(PIGEON, JSON.stringify(check)) |
|
||||
: localStorage.setItem(CODE, JSON.stringify(check)); |
|
||||
close(); |
|
||||
}} |
|
||||
onCancel={() => { |
|
||||
close(); |
|
||||
}} |
|
||||
> |
|
||||
<CheckboxGroup |
|
||||
style={{ width: "100%", fontSize: 14 }} |
|
||||
key="primary1" |
|
||||
direction="horizontal" |
|
||||
defaultValue={check} |
|
||||
aria-label="表格属性设置" |
|
||||
onChange={(check) => { |
|
||||
setCheck(check); |
|
||||
ischeck(); |
|
||||
}} |
|
||||
> |
|
||||
<div |
|
||||
style={{ |
|
||||
width: 550, |
|
||||
border: "1px solid #EAEAEA", |
|
||||
padding: "0px 5px", |
|
||||
borderRadius: 4, |
|
||||
marginBottom: "20px", |
|
||||
}} |
|
||||
> |
|
||||
<div |
|
||||
style={{ |
|
||||
borderBottom: "1px solid #EAEAEA", |
|
||||
marginLeft: "10px", |
|
||||
padding: "8px 0px", |
|
||||
}} |
|
||||
> |
|
||||
{pigeonSetup?'推送信息':'状态码信息'} |
|
||||
</div> |
|
||||
<div style={{ padding: "15px 12px", width: 530 }}> |
|
||||
{(pigeonSetup ? equipmentCarrierpigeon : equipmentCode).map((item) => { |
|
||||
return ( |
|
||||
<Checkbox |
|
||||
key={item.value} |
|
||||
value={item.value} |
|
||||
style={checkboxcss} |
|
||||
disabled={ischeck(item.value)} |
|
||||
> |
|
||||
{item.name} |
|
||||
</Checkbox> |
|
||||
); |
|
||||
})} |
|
||||
</div> |
|
||||
</div> |
|
||||
</CheckboxGroup> |
|
||||
</Modal> |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
export default Setup; |
|
||||
Loading…
Reference in new issue