yangsen
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