free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'dev_trial' of https://gitea.free-sun.vip/free-sun/FS-IOT into dev_trial

release_0.0.2
yuan_yi 3 years ago
parent
12815a3cee f468021def
commit
0956159fc8
7 changed files with 328 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      code/VideoAccess-VCMP/web/client/src/components/index.js
  2. 45
      code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx
  3. 14
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
  4. 377
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
  5. 16
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  6. 15
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
  7. 1
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js

4
code/VideoAccess-VCMP/web/client/src/components/index.js
View File

@ -1,8 +1,10 @@
'use strict'; 'use strict';
import SimpleFileDownButton from './simpleFileDownButton' import SimpleFileDownButton from './simpleFileDownButton'
import Coming from './coming' import Coming from './coming'
import ReminderBox from './reminderBox'
export { export {
SimpleFileDownButton, SimpleFileDownButton,
Coming Coming,
ReminderBox
}; };

45
code/VideoAccess-VCMP/web/client/src/components/reminderBox.jsx
View File

@ -0,0 +1,45 @@
import { Button, Checkbox, Modal } from "@douyinfe/semi-ui";
import React from "react";
const ReminderBox = ({title, wait, toadd,visible,onOk}) => {
return (
<Modal
title={
<div style={{ fontSize: 14, lineHeight: "35px", marginLeft: 16 }}>
{title}
</div>
}
icon={
<img
src="../../assets/images/logo/figure.png"
style={{ width: 50, height: 50 }}
/>
}
footer={
<div
style={{
width: "100%",
display: "flex",
justifyContent: "space-between",
}}
>
<Checkbox
onChange={(checked) => console.log(checked)}
aria-label="Checkbox 示例"
style={{ width: 100 }}
>
不在提醒
</Checkbox>
<div>
<Button>{wait}</Button>
<Button theme="solid" onClick={onOk()}>{toadd}</Button>
</div>
</div>
}
// visible={false}
visible={visible}
></Modal>
);
};
export default ReminderBox;

14
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
View File

@ -89,3 +89,17 @@ export function getExport() {
reducer: { name: "" }, 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: "" },
});
}

377
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
View File

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

16
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
View File

@ -260,7 +260,7 @@ function SideSheets(props) {
<div <div
key={"name" + index} key={"name" + index}
style={{ style={{
fontWeight: "600", fontWeight: "400",
color: "#1859C1", color: "#1859C1",
margin: "15px 0 12px 40px", margin: "15px 0 12px 40px",
}} }}
@ -302,14 +302,14 @@ function SideSheets(props) {
width: 150, width: 150,
display: "inline-block", display: "inline-block",
textAlign: "right", textAlign: "right",
fontWeight: "600", fontWeight: "400",
color: "rgba(0, 0, 0, 0.45)", color: "rgba(0, 0, 0, 0.45)",
}} }}
> >
{item.name} {item.name}
</span> </span>
<span <span
style={{ fontWeight: "600", color: " #34383E" }} style={{ fontWeight: "400", color: " #34383E" }}
> >
{nvrDetails[item.key]} {nvrDetails[item.key]}
</span> </span>
@ -330,14 +330,14 @@ function SideSheets(props) {
width: 150, width: 150,
display: "inline-block", display: "inline-block",
textAlign: "right", textAlign: "right",
fontWeight: "600", fontWeight: "400",
color: "rgba(0, 0, 0, 0.45)", color: "rgba(0, 0, 0, 0.45)",
}} }}
> >
{item.name} {item.name}
</span> </span>
<span <span
style={{ fontWeight: "600", color: " #34383E" }} style={{ fontWeight: "400", color: " #34383E" }}
> >
{item.key == "type" {item.key == "type"
? accessType.find( ? accessType.find(
@ -430,7 +430,7 @@ function SideSheets(props) {
width: 150, width: 150,
display: "inline-block", display: "inline-block",
textAlign: "right", textAlign: "right",
fontWeight: "600", fontWeight: "400",
color: "rgba(0, 0, 0, 0.45)", color: "rgba(0, 0, 0, 0.45)",
}} }}
> >
@ -438,7 +438,7 @@ function SideSheets(props) {
</span> </span>
<span <span
style={{ style={{
fontWeight: "600", fontWeight: "400",
color: " #34383E", color: " #34383E",
}} }}
> >
@ -514,7 +514,7 @@ function SideSheets(props) {
border: "1px solid rgba(151, 151, 151, 0.2)", border: "1px solid rgba(151, 151, 151, 0.2)",
margin: "16px 0 0 36px", margin: "16px 0 0 36px",
color: "rgba(0, 0, 0, 0.85)", color: "rgba(0, 0, 0, 0.85)",
fontWeight: "600", fontWeight: "400",
}} }}
> >
<div <div

15
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { push } from 'react-router-redux';
import moment from "moment"; import moment from "moment";
import { import {
Button, Button,
@ -19,6 +20,7 @@ import NvrModal from "../components/nvrModal";
import Setup from "../components/setup"; import Setup from "../components/setup";
import SideSheets from "../components/sideSheet"; import SideSheets from "../components/sideSheet";
import { skeletonScreen } from "../components/skeletonScreen"; import { skeletonScreen } from "../components/skeletonScreen";
import { ReminderBox } from "../../../components/index";
export const accessType = [ export const accessType = [
{ name: "萤石云平台摄像头", key: "yingshi" }, { name: "萤石云平台摄像头", key: "yingshi" },
@ -39,6 +41,8 @@ const NvrHeader = (props) => {
const [search, setearch] = useState({}); //搜索条件 const [search, setearch] = useState({}); //搜索条件
const [rowId, setRowId] = useState(); //表格数据id const [rowId, setRowId] = useState(); //表格数据id
const [load, setLoad] = useState(); //骨架屏是否显现 const [load, setLoad] = useState(); //骨架屏是否显现
const [reminder, setReminder] = useState(true); //提醒弹框
const api = useRef(); const api = useRef();
const SETUPS = "setups"; const SETUPS = "setups";
@ -379,6 +383,7 @@ const NvrHeader = (props) => {
<Form.Input <Form.Input
label="设备搜索：" label="设备搜索："
field="keyword" field="keyword"
maxLength="36"
placeholder="请输入设备名称" placeholder="请输入设备名称"
labelPosition="left" labelPosition="left"
style={screen} style={screen}
@ -596,6 +601,16 @@ const NvrHeader = (props) => {
) : ( ) : (
[] []
)} )}
<ReminderBox
title="是否继续添加NVR摄像头？"
wait="再等等"
toadd="去添加"
visible={reminder}
onOk={()=>{
// dispatch(push('/equipmentWarehouse/camera'));
setReminder(false)
}}
/>
</div> </div>
</> </>
); );

1
code/VideoAccess-VCMP/web/client/src/utils/webapi.js
View File

@ -15,6 +15,7 @@ export const ApiTable = {
delNvr: "nvr/{nvrId}", delNvr: "nvr/{nvrId}",
getNvrDetails: "nvr/detail/{nvrId}", //获取nvr详情 getNvrDetails: "nvr/detail/{nvrId}", //获取nvr详情
getExport: "camera/export", //nvr表格数据导出 getExport: "camera/export", //nvr表格数据导出
getCheck:"nvr/verify", //校验nvr信息
getCamera: "camera/project", // 获取摄像头列表 getCamera: "camera/project", // 获取摄像头列表
putForbidden: "camera/banned", //禁用摄像头 putForbidden: "camera/banned", //禁用摄像头

Write Preview
Loading…
Cancel
Save