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