From f468021def171992b36ff189105f1219f4b09f9d Mon Sep 17 00:00:00 2001 From: wenlele Date: Mon, 6 Jun 2022 17:43:07 +0800 Subject: [PATCH] =?UTF-8?q?NVR=E6=B7=BB=E5=8A=A0=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E7=9A=84=E6=B5=8B=E8=AF=95=E6=A0=A1=E9=AA=8C=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/client/src/components/index.js | 4 +- .../web/client/src/components/reminderBox.jsx | 45 +++ .../equipmentWarehouse/actions/nvr.js | 14 + .../components/nvrModal.jsx | 377 +++++++++++------- .../components/sideSheet.jsx | 16 +- .../equipmentWarehouse/containers/nvr.jsx | 15 + .../web/client/src/utils/webapi.js | 1 + 7 files changed, 328 insertions(+), 144 deletions(-) create mode 100644 code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx diff --git a/code/VideoAccess-VCMP/web/client/src/components/index.js b/code/VideoAccess-VCMP/web/client/src/components/index.js index 531e165..959c940 100644 --- a/code/VideoAccess-VCMP/web/client/src/components/index.js +++ b/code/VideoAccess-VCMP/web/client/src/components/index.js @@ -1,8 +1,10 @@ 'use strict'; import SimpleFileDownButton from './simpleFileDownButton' import Coming from './coming' +import ReminderBox from './reminderBox' export { SimpleFileDownButton, - Coming + Coming, + ReminderBox }; diff --git a/code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx b/code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx new file mode 100644 index 0000000..162c4a4 --- /dev/null +++ b/code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx @@ -0,0 +1,45 @@ +import { Button, Checkbox, Modal } from "@douyinfe/semi-ui"; +import React from "react"; + +const ReminderBox = ({title, wait, toadd,visible,onOk}) => { + return ( + + {title} + + } + icon={ + + } + footer={ +
+ console.log(checked)} + aria-label="Checkbox 示例" + style={{ width: 100 }} + > + 不在提醒 + +
+ + +
+
+ } + // visible={false} + visible={visible} + > + ); +}; + +export default ReminderBox; diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js index 1c45006..e833cd9 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js @@ -89,3 +89,17 @@ export function getExport() { reducer: { name: "" }, }); } + + +export function getCheck(data) { + return (dispatch) => + basicAction({ + type: "post", + dispatch: dispatch, + data, + actionType: "GET_CHECK", + url: `${ApiTable.getCheck}`, + msg: { option: "" }, //校验nvr信息 + reducer: { name: "" }, + }); +} \ No newline at end of file diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx index 374c715..c3efa6d 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx @@ -1,177 +1,284 @@ -import React, { useState ,useRef} from 'react' +import React, { useState, useRef, useEffect } from "react"; import { connect } from "react-redux"; -import { Modal,Form,Row,Col,Spin } from '@douyinfe/semi-ui'; -import { IconTickCircle } from '@douyinfe/semi-icons'; -function nvrModal(props){ - const {modalName}=props - const { dispatch, actions,vender,close } = props; - const nvrData = props.nvrData||{}//修改时传来的值 +import { Modal, Form, Row, Col, Spin } from "@douyinfe/semi-ui"; +import { IconTickCircle } from "@douyinfe/semi-icons"; + +import moment from "moment"; + +function nvrModal(props) { + const { modalName } = props; + const { dispatch, actions, vender, close } = props; + const nvrData = props.nvrData || {}; //修改时传来的值 const form = useRef(); - const [visible, setVisible] = useState(false);//是否显示弹框 - const [isloading,setloading] = useState(false);//是否显示loading - const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值 - const [step,setstep] = useState(0)//第几步 - const [okText,setokText] = useState('测试校验')//ok弹框text 右边 - const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边 - const [formObj,setformObj] = useState()//接口入参 - function showDialog() {//打开弹框 + 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(); //接口入参 + + useEffect(() => { + console.log(props.user.id); + }, []); + + 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 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==0){ - form.current.validate() - .then(values=>{//表单校验成功 - let valuesObj=JSON.parse(JSON.stringify(values)) - valuesObj.longitude=values.position.split(',')[0] - valuesObj.latitude=values.position.split(',')[1] - delete valuesObj.position - if(nvrData.id){ - valuesObj.id=nvrData.id - } - setformObj(valuesObj) - setloading(true); - setTimeout(() => { - setloadingTip('...接受成功') - setTimeout(()=>{ - setloadingTip('已完成') - setTimeout(() => { - setstep(1); - setokText('确认'); - setcancelText('上一步'); - setloading(false); - }, 1000); - }, 1000) - }, 1000); - }) - .catch(errors=>{//表单校验失败 - console.log('errors',errors); - }) - } - else{ - dispatch(actions.equipmentWarehouse.addchangeNvr(formObj)).then(res => { + 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 (nvrData.id) { + valuesObj.id = nvrData.id; + } + var x = new moment(); + setloading(true); + dispatch( + actions.equipmentWarehouse.getCheck({ + serialNo: valuesObj.serialNo, + }) + ).then((res) => { + console.log(res); + var y = new moment(); + var duration = moment.duration(y.diff(x))._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.addchangeNvr(formObj)).then((res) => { setVisible(false); close(); - }) + }); } } - function handleAfterClose(){//在关闭之后 - setstep(0); - setokText('测试校验'); - setcancelText('取消'); + function handleAfterClose() { + //在关闭之后 + setstep("none"); + setokText("测试校验"); + setcancelText("取消"); } - function handleCancel() {//点击弹框取消 左边按钮 - if(step==0){ + function handleCancel() { + //点击弹框取消 左边按钮 + if (step == "none") { setVisible(false); - } - else{ - setstep(0); - setokText('测试校验'); - setcancelText('取消'); + } else { + setstep("none"); + setokText("测试校验"); + setcancelText("取消"); } } - function handleLocation(){//高德经纬度 - window.open('https://lbs.amap.com/tools/picker','_blank') + function handleLocation() { + //高德经纬度 + window.open("https://lbs.amap.com/tools/picker", "_blank"); } return ( <> -
{modalName=='add'?'添加NVR':'修改'}
+
{modalName == "add" ? "添加NVR" : "修改"}
- {step==0?
-
+ console.log(values)} - getFormApi={formApi => form.current = formApi}> + labelPosition="left" + labelAlign="left" + labelWidth="90px" + onValueChange={(values) => console.log(values)} + getFormApi={(formApi) => (form.current = formApi)} + > - + - `${value}`.replace(/\D/g, '')} hideButtons={true} maxLength='15' field='regionCode' label='行政区区码:' initValue={nvrData.regionCode||''} placeholder='请输入行政区区码' style={{ width:149 }}/> + `${value}`.replace(/\D/g, "")} + hideButtons={true} + maxLength="15" + field="regionCode" + label="行政区区码:" + initValue={nvrData.regionCode || ""} + placeholder="请输入行政区区码" + style={{ width: 149 }} + /> - + - - {vender.map((item,index)=>( - {item.name} + + {vender.map((item, index) => ( + + {item.name} + ))} - - + -
- + { + required: true, + message: "请输入或拾取高德经纬度坐标", + }, + ]} + /> +
+
- ://下一步 -
-
- + +
+
+
-
+
已完成NVR设备测试和校验，是否确认添加？
- } @@ -179,14 +286,14 @@ function nvrModal(props){ } function mapStateToProps(state) { - const { auth, global, members,vender } = state; + const { auth, global, members, vender } = state; return { loading: members.isRequesting, user: auth.user, actions: global.actions, members: members.data, - vender:vender.data||[],//设备厂家 + vender: vender.data || [], //设备厂家 }; } -export default connect(mapStateToProps)(nvrModal); \ No newline at end of file +export default connect(mapStateToProps)(nvrModal); diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx index 5c8d92e..7bd5b36 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx @@ -260,7 +260,7 @@ function SideSheets(props) {
{item.name} {nvrDetails[item.key]} @@ -330,14 +330,14 @@ function SideSheets(props) { width: 150, display: "inline-block", textAlign: "right", - fontWeight: "600", + fontWeight: "400", color: "rgba(0, 0, 0, 0.45)", }} > {item.name} {item.key == "type" ? accessType.find( @@ -430,7 +430,7 @@ function SideSheets(props) { width: 150, display: "inline-block", textAlign: "right", - fontWeight: "600", + fontWeight: "400", color: "rgba(0, 0, 0, 0.45)", }} > @@ -438,7 +438,7 @@ function SideSheets(props) { @@ -514,7 +514,7 @@ function SideSheets(props) { border: "1px solid rgba(151, 151, 151, 0.2)", margin: "16px 0 0 36px", color: "rgba(0, 0, 0, 0.85)", - fontWeight: "600", + fontWeight: "400", }} >
{ const [search, setearch] = useState({}); //搜索条件 const [rowId, setRowId] = useState(); //表格数据id const [load, setLoad] = useState(); //骨架屏是否显现 + const [reminder, setReminder] = useState(true); //提醒弹框 + const api = useRef(); const SETUPS = "setups"; @@ -379,6 +383,7 @@ const NvrHeader = (props) => { { ) : ( [] )} + { + // dispatch(push('/equipmentWarehouse/camera')); + setReminder(false) + }} + />
); diff --git a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js index b104540..72a302d 100644 --- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js +++ b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js @@ -15,6 +15,7 @@ export const ApiTable = { delNvr: "nvr/{nvrId}", getNvrDetails: "nvr/detail/{nvrId}", //获取nvr详情 getExport: "camera/export", //nvr表格数据导出 + getCheck:"nvr/verify", //校验nvr信息 getCamera: "camera/project", // 获取摄像头列表 putForbidden: "camera/banned", //禁用摄像头