10 changed files with 1977 additions and 575 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; |
|
||||
@ -0,0 +1,299 @@ |
|||||
|
import React, { useState, useRef, useEffect, useImperativeHandle } from "react"; |
||||
|
import { connect } from "react-redux"; |
||||
|
import { Modal, Form, Row, Col, Spin } from "@douyinfe/semi-ui"; |
||||
|
import { IconTickCircle } from "@douyinfe/semi-icons"; |
||||
|
|
||||
|
import moment from "moment"; |
||||
|
|
||||
|
function pushModal (props) { |
||||
|
const { modalName, pushRef } = props; |
||||
|
const { dispatch, actions, vender, close } = props; |
||||
|
const pushData = props.pushData || {}; //修改时传来的值 |
||||
|
const form = useRef(); |
||||
|
const [visible, setVisible] = useState(false); //是否显示弹框 |
||||
|
const [isloading, setloading] = useState(false); //是否显示loading |
||||
|
const [loadingTip, setloadingTip] = useState("获取中...请稍后..."); //loading tip的值 |
||||
|
const [step, setstep] = useState("none"); //第几步 |
||||
|
const [okText, setokText] = useState("测试校验"); //ok弹框text 右边 |
||||
|
const [cancelText, setcancelText] = useState("取消"); //取消弹框text 左边 |
||||
|
const [formObj, setformObj] = useState(); //接口入参 |
||||
|
|
||||
|
function showDialog () { |
||||
|
//打开弹框 |
||||
|
setVisible(true); |
||||
|
} |
||||
|
function positionForm (val) { |
||||
|
let zz = /^(-?\d+)(\.\d+)?$/; |
||||
|
if (!val) { |
||||
|
return "请输入或拾取高德经纬度坐标"; |
||||
|
} else if (val.split(",").length != 2) { |
||||
|
return "请输入格式为116.354169,39.835452的经纬度坐标"; |
||||
|
} else if (!zz.test(val.split(",")[0])) { |
||||
|
return "只能填写数字"; |
||||
|
} else if (!zz.test(val.split(",")[1])) { |
||||
|
return "只能填写数字"; |
||||
|
} else { |
||||
|
return ""; |
||||
|
} |
||||
|
} |
||||
|
function handleOk () { |
||||
|
//点击弹框确定 右边按钮 |
||||
|
if (step == "none") { |
||||
|
form.current |
||||
|
.validate() |
||||
|
.then((values) => { |
||||
|
//表单校验 |
||||
|
console.log(values) |
||||
|
let valuesObj = JSON.parse(JSON.stringify(values)); |
||||
|
valuesObj.longitude = values.position.split(",")[0]; |
||||
|
valuesObj.latitude = values.position.split(",")[1]; |
||||
|
delete valuesObj.position; |
||||
|
if (pushData.id) { |
||||
|
valuesObj.id = pushData.id; |
||||
|
} |
||||
|
var front = new moment(); //验证前时间 |
||||
|
setloading(true); |
||||
|
dispatch( |
||||
|
actions.equipmentWarehouse.getCheck({ |
||||
|
serialNo: valuesObj.serialNo, |
||||
|
}) |
||||
|
).then((res) => { |
||||
|
var after = new moment(); //验证后时间 |
||||
|
var duration = moment.duration(after.diff(front))._data.milliseconds; |
||||
|
if (res.success) { |
||||
|
setTimeout( |
||||
|
() => { |
||||
|
setloadingTip("已完成"); |
||||
|
setTimeout(() => { |
||||
|
setstep("block"); |
||||
|
setloading(false); |
||||
|
setokText("确认"); |
||||
|
setcancelText("上一步"); |
||||
|
setloadingTip("获取中...请稍后..."); |
||||
|
}, 1000); |
||||
|
}, |
||||
|
duration > 2000 ? 0 : 2000 - duration |
||||
|
); |
||||
|
} else { |
||||
|
setTimeout( |
||||
|
() => { |
||||
|
setloadingTip("校验失败"); |
||||
|
setTimeout(() => { |
||||
|
setstep("none"); |
||||
|
setloading(false); |
||||
|
setokText("测试校验"); |
||||
|
setcancelText("取消"); |
||||
|
setloadingTip("获取中...请稍后..."); |
||||
|
}, 1000); |
||||
|
}, |
||||
|
duration > 2000 ? 0 : 2000 - duration |
||||
|
); |
||||
|
} |
||||
|
}); |
||||
|
setformObj(valuesObj); |
||||
|
}) |
||||
|
.catch((errors) => { |
||||
|
//表单校验失败 |
||||
|
console.log("errors", errors); |
||||
|
}); |
||||
|
} else { |
||||
|
dispatch(actions.equipmentWarehouse.addchangepush(formObj)).then((res) => { |
||||
|
setVisible(false); |
||||
|
close(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
function handleAfterClose () { |
||||
|
//在关闭之后 |
||||
|
setstep("none"); |
||||
|
setokText("测试校验"); |
||||
|
setcancelText("取消"); |
||||
|
} |
||||
|
function handleCancel () { |
||||
|
//点击弹框取消 左边按钮 |
||||
|
if (step == "none") { |
||||
|
setVisible(false); |
||||
|
} else { |
||||
|
setstep("none"); |
||||
|
setokText("测试校验"); |
||||
|
setcancelText("取消"); |
||||
|
} |
||||
|
} |
||||
|
function handleLocation () { |
||||
|
//高德经纬度 |
||||
|
window.open("https://lbs.amap.com/tools/picker", "_blank"); |
||||
|
} |
||||
|
useImperativeHandle(pushRef, () => ({ |
||||
|
//传给父组件方法 |
||||
|
//aa即为子组件暴露给父组件的方法 |
||||
|
pushNumber: () => formObj.serialNo |
||||
|
})); |
||||
|
return ( |
||||
|
<> |
||||
|
<div onClick={showDialog}>{modalName == "add" ? "创建推送" : "修改"}</div> |
||||
|
<Modal |
||||
|
title={modalName == "add" ? "创建推送" : "修改"} |
||||
|
okText={okText} |
||||
|
cancelText={cancelText} //取消按钮 |
||||
|
visible={visible} |
||||
|
onOk={handleOk} |
||||
|
width={782} |
||||
|
height={720} |
||||
|
afterClose={handleAfterClose} |
||||
|
onCancel={handleCancel} |
||||
|
> |
||||
|
<Spin tip={loadingTip} spinning={isloading}> |
||||
|
<div |
||||
|
style={{ |
||||
|
paddingLeft: 16, |
||||
|
display: step == "none" ? "block" : "none", |
||||
|
}} |
||||
|
> |
||||
|
<Form |
||||
|
allowEmpty |
||||
|
labelPosition="left" |
||||
|
labelAlign="left" |
||||
|
labelWidth="90px" |
||||
|
onValueChange={(values) => console.log(values)} |
||||
|
getFormApi={(formApi) => (form.current = formApi)} |
||||
|
> |
||||
|
<Row> |
||||
|
<Col span={12}> |
||||
|
<Form.Input |
||||
|
maxLength="39" |
||||
|
field="serialNo" |
||||
|
label="设备编号:" |
||||
|
initValue={pushData.serialNo || ""} |
||||
|
placeholder="请输入设备编号" |
||||
|
style={{ width: 149 }} |
||||
|
rules={[{ required: true, message: "请输入设备编号" }]} |
||||
|
/> |
||||
|
</Col> |
||||
|
<Col span={12}> |
||||
|
<Form.InputNumber |
||||
|
formatter={(value) => `${value}`.replace(/\D/g, "")} |
||||
|
hideButtons={true} |
||||
|
maxLength="15" |
||||
|
field="regionCode" |
||||
|
label="行政区区码:" |
||||
|
initValue={pushData.regionCode || ""} |
||||
|
placeholder="请输入行政区区码" |
||||
|
style={{ width: 149 }} |
||||
|
/> |
||||
|
</Col> |
||||
|
<Col span={24}> |
||||
|
<Form.Input |
||||
|
maxLength="36" |
||||
|
field="name" |
||||
|
label="设备名称:" |
||||
|
initValue={pushData.name || ""} |
||||
|
placeholder="请输入设备名称" |
||||
|
style={{ width: 421 }} |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: "请输入设备名称、常用项目或位置定义", |
||||
|
}, |
||||
|
]} |
||||
|
/> |
||||
|
</Col> |
||||
|
<Col span={24}> |
||||
|
<Form.Select |
||||
|
label="设备厂家:" |
||||
|
field="venderId" |
||||
|
initValue={pushData.venderId || null} |
||||
|
placeholder="请选择设备厂家" |
||||
|
style={{ width: 421 }} |
||||
|
rules={[{ required: true, message: "请选择设备厂家" }]} |
||||
|
> |
||||
|
{vender.map((item, index) => ( |
||||
|
<Form.Select.Option key={index} value={item.id}> |
||||
|
{item.name} |
||||
|
</Form.Select.Option> |
||||
|
))} |
||||
|
</Form.Select> |
||||
|
</Col> |
||||
|
<Col span={24} style={{ display: "flex" }}> |
||||
|
<Form.Input |
||||
|
maxLength="39" |
||||
|
field="position" |
||||
|
label="安装位置:" |
||||
|
initValue={ |
||||
|
pushData.longitude && pushData.latitude |
||||
|
? pushData.longitude + "," + pushData.latitude |
||||
|
: "" |
||||
|
} |
||||
|
placeholder="请输入或拾取高德经纬度坐标" |
||||
|
style={{ width: 386 }} |
||||
|
validate={positionForm} |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: "请输入或拾取高德经纬度坐标", |
||||
|
}, |
||||
|
]} |
||||
|
/> |
||||
|
<div |
||||
|
style={{ |
||||
|
width: 32, |
||||
|
height: 32, |
||||
|
background: "#1859C1", |
||||
|
marginLeft: 4, |
||||
|
display: "flex", |
||||
|
justifyContent: "center", |
||||
|
alignItems: "center", |
||||
|
cursor: "pointer", |
||||
|
marginTop: 12, |
||||
|
borderRadius: 3 + "px", |
||||
|
}} |
||||
|
onClick={handleLocation} |
||||
|
> |
||||
|
<img |
||||
|
src="../../../assets/images/background/location.png" |
||||
|
width={16} |
||||
|
height={20} |
||||
|
/> |
||||
|
</div> |
||||
|
</Col> |
||||
|
</Row> |
||||
|
</Form> |
||||
|
</div> |
||||
|
|
||||
|
<div style={{ height: 224, display: step }}> |
||||
|
<div |
||||
|
style={{ |
||||
|
paddingTop: 50, |
||||
|
display: "flex", |
||||
|
justifyContent: "center", |
||||
|
}} |
||||
|
> |
||||
|
<IconTickCircle style={{ color: "#04B234", fontSize: 60 }} /> |
||||
|
</div> |
||||
|
<div |
||||
|
style={{ |
||||
|
marginTop: 20, |
||||
|
display: "flex", |
||||
|
justifyContent: "center", |
||||
|
}} |
||||
|
> |
||||
|
是否确认创建推送？ |
||||
|
</div> |
||||
|
</div> |
||||
|
</Spin> |
||||
|
</Modal> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global, members, vender } = state; |
||||
|
return { |
||||
|
loading: members.isRequesting, |
||||
|
user: auth.user, |
||||
|
actions: global.actions, |
||||
|
members: members.data, |
||||
|
vender: vender.data || [], //设备厂家 |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(pushModal); |
||||
Loading…
Reference in new issue