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.1
yuan_yi 3 years ago
parent
d18dfa9c30 27594bada8
commit
85b64e95c4
4 changed files with 292 additions and 159 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      code/VideoAccess-VCMP/web/client/assets/images/background/setup.png
  2. 214
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
  3. 33
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
  4. 204
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

BIN
code/VideoAccess-VCMP/web/client/assets/images/background/setup.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 945 B

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

@ -1,110 +1,148 @@
import React, { useState } from 'react'
import { Modal,Form,Row,Col,Spin } from '@douyinfe/semi-ui';
import React, { useState ,useRef} from 'react'
import { Modal,Form,Row,Col,Spin,Notification } from '@douyinfe/semi-ui';
import { IconTickCircle } from '@douyinfe/semi-icons';
function nvrModal(props){
const {modalName}=props
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 [step,setstep] = useState(0)//第几步
const [okText,setokText] = useState('测试校验')//ok弹框text 右边
const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边
const opts ={//添加完成确认后通知
title:'Hi',
content:'添加成功',
duration:3
}
function showDialog() {//打开弹框
setVisible(true);
}
function handleOk() {//点击弹框确定
// setVisible(false);
setloading(true);
setTimeout(() => {
setloadingTip('...接受成功')
setTimeout(()=>{
setloadingTip('已完成')
function handleOk() {//点击弹框确定 右边按钮
if(step==0){
form.current.validate()
.then(values=>{//表单校验成功
setloading(true);
setTimeout(() => {
setstep(1);
setloading(false);
setloadingTip('...接受成功')
setTimeout(()=>{
setloadingTip('已完成')
setTimeout(() => {
setstep(1);
setokText('确认');
setcancelText('上一步');
setloading(false);
}, 2000);
},2000)
}, 2000);
},2000)
}, 2000);
})
.catch(errors=>{//表单校验失败
console.log('errors',errors);
})
}
else{
Notification.success(opts)
setVisible(false);
}
}
function handleAfterClose(){//在关闭之后
console.log('after');
setstep(0);
setokText('测试校验');
setcancelText('取消');
}
function handleCancel() {//点击弹框取消 左边按钮
if(step==0){
setVisible(false);
}
else{
setstep(0);
setokText('测试校验');
setcancelText('取消');
}
}
function handleCancel() {//点击弹框取消
setVisible(false);
function handleLocation(){//高德经纬度
console.log('handleLocationhandleLocation');
}
return (
<>
<div onClick={showDialog}>{props.modalName}</div>
<Modal
title="添加NVR"
okText="测试校验"
// cancelText 取消按钮
visible={visible}
onOk={handleOk}
height={386}
width={607}
afterClose={handleAfterClose} //>=1.16.0
onCancel={handleCancel}
>
<Spin tip={loadingTip} spinning={isloading}>
{step==0?<div style={{paddingLeft:16+'px'}}>
<Form
labelPosition='left'
labelAlign='left'
labelWidth= '90px'
onValueChange={values=>console.log(values)}>
<Row>
<Col span={12}>
<Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }}
rules={[
{ required: true, message: '请输入设备编号' }
]}/>
</Col>
<Col span={12}>
<Form.Input field='Use11rName' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/>
</Col>
<Col span={24}>
<Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
rules={[
{ required: true, message: '请输入设备名称、常用项目或位置定义' }
]}/>
</Col>
<Col span={24}>
<Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421+'px' }}>
<Form.Select.Option value="abc">Semi</Form.Select.Option>
<Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
<Form.Select.Option value="toutiao">今日头条</Form.Select.Option>
<div onClick={showDialog}>{modalName}</div>
<Modal
title="添加NVR"
okText={okText}
cancelText={cancelText} //取消按钮
visible={visible}
onOk={handleOk}
width={607}
afterClose={handleAfterClose}
onCancel={handleCancel}
>
<Spin tip={loadingTip} spinning={isloading}>
{step==0?<div style={{paddingLeft:16}}>
<Form
labelPosition='left'
labelAlign='left'
labelWidth= '90px'
onValueChange={values=>console.log(values)}
getFormApi={formApi => form.current = formApi}>
<Row>
<Col span={12}>
<Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }}
rules={[
{ required: true, message: '请输入设备编号' }
]}/>
</Col>
<Col span={12}>
<Form.Input field='Use11rName' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/>
</Col>
<Col span={24}>
<Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
rules={[
{ required: true, message: '请输入设备名称、常用项目或位置定义' }
]}/>
</Col>
<Col span={24}>
<Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421 }}>
<Form.Select.Option value="abc">Semi</Form.Select.Option>
<Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
<Form.Select.Option value="toutiao">今日头条</Form.Select.Option>
</Form.Select>
</Col>
<Col span={24} style={{display:'flex',alignItems:'center'}}>
<Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
</Col>
<Col span={24} style={{display:'flex'}}>
<Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
rules={[
{ required: true, message: '请输入或拾取高德经纬度坐标' }
]}/>
<div style={{
width:32,
height:32,
background:"#1859C1",
marginLeft:4+'px',
display:'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: "pointer",
borderRadius: 3+'px'}}>
<img src="../../../assets/images/background/location.png" width={16} height={20}/>
</div>
</Col>
</Row>
</Form>
</div>:
<div >
<div style={{marginTop:50,display: 'flex', justifyContent: 'center'}}>
<IconTickCircle style={{color:'#04B234',fontSize:60}}/>
</div>
<div style={{marginTop:20,display: 'flex', justifyContent: 'center'}}>
已完成NVR设备测试和校验，是否确认添加？
</div>
{ 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}}>
<div style={{paddingTop:50,display: 'flex', justifyContent: 'center'}}>
<IconTickCircle style={{color:'#04B234',fontSize:60}}/>
</div>
<div style={{marginTop:20,display: 'flex', justifyContent: 'center'}}>
已完成NVR设备测试和校验，是否确认添加？
</div>
}
</Spin>
</Modal>
</div>
}
</Spin>
</Modal>
</>
);
}

33
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/setup.jsx
View File

@ -0,0 +1,33 @@
import React, { useState, useEffect } from "react";
import { Modal, CheckboxGroup, Checkbox } from "@douyinfe/semi-ui";
function Setup(props) {
const { dispatch, actions, user, loading, visible, close, editData } = props;
return (
<Modal
title="基本对话框"
visible={visible}
onOk={() => {
close();
}}
onCancel={() => {
close();
}}
>
<CheckboxGroup
options={[
{ label: "抖音", value: "abc" },
{ label: "火山", value: "hotsoon" },
{ label: "皮皮虾", value: "pipixia" },
{ label: "今日头条", value: "toutiao" },
]}
style={{ width: "100%" }}
direction="horizontal"
defaultValue={["hotsoon"]}
onChange={()=>{}}
/>
</Modal>
);
}
export default Setup;

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

@ -1,11 +1,13 @@
import React, { useEffect } from "react";
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
import "../style.less";
import NvrModal from "../components/nvrModal"
import NvrModal from "../components/nvrModal";
import Setup from "../components/setup";
const NvrHeader = (props) => {
const { dispatch, actions, user, loading } = props;
const [setup, setSetup] = useState(false);
const screen = {
width: 193,
@ -16,7 +18,6 @@ const NvrHeader = (props) => {
const columns = [
{
title: "序号",
align: "center",
render: (text, record, index) => {
return index + 1;
},
@ -24,8 +25,8 @@ const NvrHeader = (props) => {
{
title: "设备名称",
// dataIndex: "name",///
align: "center",
width: 200,
background: "red",
render: (text, record, index) => {
return (
<div>
@ -45,34 +46,30 @@ const NvrHeader = (props) => {
},
{
title: "设备厂家",
align: "center",
dataIndex: "size",
},
{
title: "SIP地址",
align: "center",
dataIndex: "owner",
},
{
title: "端口号",
align: "center",
dataIndex: "updateTime",
},
{
title: "通道数",
align: "center",
dataIndex: "nameIconSrc",
},
{
title: "操作",
align: "center",
width: "20%",
dataIndex: "",
render: (y) => {
return (
<>
<Button>修改</Button>
<Button>查看</Button>
<Button>删除</Button>
<Button theme="borderless"><NvrModal modalName="修改" /></Button>
<Button theme="borderless">查看</Button>
<Button theme="borderless">删除</Button>
</>
);
},
@ -109,45 +106,53 @@ const NvrHeader = (props) => {
];
return (
<>
<div style={{position:''}}>
<video id='nvrBanner' autoPlay loop muted style={{ width: '100%', objectFit: 'cover', height: 171 }} src='/assets/video/nvr_banner.mp4' type='video/mp4' />
<div style={{position: 'absolute',top:12}}>
<div
style={{
fontSize: 22 + "px",
paddingTop: 15 + "px",
marginLeft: 21 + "px",
}}
>
NVR管理
</div>
<div
style={{
fontSize: 14 + "px",
paddingTop: 18 + "px",
marginLeft: 20 + "px",
}}
>
对NVR（网络硬盘录像机）设备节点的管理
</div>
<div
style={{
fontSize: 14 + "px",
marginTop: 28 + "px",
marginLeft: 21 + "px",
width: 89 + "px",
height: 32 + "px",
lineHeight: 32 + "px",
textAlign: "center",
backgroundColor: "#D9EAFF",
color: "#1859C1",
cursor: "pointer",
}}
>
<NvrModal modalName="添加NVR"/>
</div>
</div>
</div>
<div style={{ position: "" }}>
<video
id="nvrBanner"
autoPlay
loop
muted
style={{ width: "100%", objectFit: "cover", height: 171 }}
src="/assets/video/nvr_banner.mp4"
type="video/mp4"
/>
<div style={{ position: "absolute", top: 12 }}>
<div
style={{
fontSize: 22 + "px",
paddingTop: 15 + "px",
marginLeft: 21 + "px",
}}
>
NVR管理
</div>
<div
style={{
fontSize: 14 + "px",
paddingTop: 18 + "px",
marginLeft: 20 + "px",
}}
>
对NVR（网络硬盘录像机）设备节点的管理
</div>
<div
style={{
fontSize: 14 + "px",
marginTop: 28 + "px",
marginLeft: 21 + "px",
width: 89 + "px",
height: 32 + "px",
lineHeight: 32 + "px",
textAlign: "center",
backgroundColor: "#D9EAFF",
color: "#1859C1",
cursor: "pointer",
}}
>
<NvrModal modalName="添加NVR" />
</div>
</div>
</div>
<div
style={{
width: "100%",
@ -215,7 +220,7 @@ const NvrHeader = (props) => {
</Form>
<div
style={{
width: 0,
width: 150,
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-end",
@ -228,8 +233,8 @@ const NvrHeader = (props) => {
width: 65,
height: 30,
borderRadius: 3,
marginBottom: "20px",
marginRight: "20px",
marginBottom: 20,
marginRight: 20,
}}
>
搜素
@ -243,7 +248,7 @@ const NvrHeader = (props) => {
backGround: "#FFFFFF",
borderRadius: 3,
border: "1px solid #D9D9D9",
marginBottom: "20px",
marginBottom: 20,
}}
>
重置
@ -251,8 +256,15 @@ const NvrHeader = (props) => {
</div>
</div>
</div>
<Table
title={
<div style={{ background: "#FFFFFF", marginTop: 5 }}>
<div
style={{
width: "100%",
display: "flex",
justifyContent: "space-between",
padding: "13px 20px",
}}
>
<div
style={{
width: 64,
@ -266,24 +278,74 @@ const NvrHeader = (props) => {
>
设备列表
</div>
}
columns={columns}
dataSource={data}
pagination={false}
bordered={false}
/>
<div>
<Button
style={{
width: 32,
height: 32,
background: "#D9D9D9",
borderadius: 3,
marginRight: 20,
}}
type="primary"
key="primary"
onClick={() => {
setSetup(true);
}}
>
<img
src="../../../../assets/images/background/setup.png"
alt="设置"
style={{ width: 18, height: 18 }}
/>
</Button>
<Button
style={{
width: 65,
height: 32,
background: "#FFFFFF",
borderRadius: 3,
border: "1px solid #1859C1",
}}
>
导出
</Button>
</div>
</div>
<Table
columns={columns}
dataSource={data}
pagination={false}
bordered={false}
empty="暂无数据"
style={{ padding: "0px 20px" }}
/>
{setup ? (
<Setup
visible={true}
close={() => {
setSetup(false);
// setEditData(null)
}}
// reportType={reportType}
// editData={editData}
/>
) : (
""
)}
</div>
</>
);
};
function mapStateToProps (state) {
const { auth, global, members } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,
};
function mapStateToProps(state) {
const { auth, global, members } = state;
return {
loading: members.isRequesting,
user: auth.user,
actions: global.actions,
members: members.data,
};
}
export default connect(mapStateToProps)(NvrHeader);

Write Preview
Loading…
Cancel
Save