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
Unified 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 React, { useState ,useRef} from 'react'
import { Modal,Form,Row,Col,Spin } from '@douyinfe/semi-ui'; import { Modal,Form,Row,Col,Spin,Notification } from '@douyinfe/semi-ui';
import { IconTickCircle } from '@douyinfe/semi-icons'; import { IconTickCircle } from '@douyinfe/semi-icons';
function nvrModal(props){ function nvrModal(props){
const {modalName}=props
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(0)//第几步
const [okText,setokText] = useState('测试校验')//ok弹框text 右边
const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边
const opts ={//添加完成确认后通知
title:'Hi',
content:'添加成功',
duration:3
}
function showDialog() {//打开弹框 function showDialog() {//打开弹框
setVisible(true); setVisible(true);
} }
function handleOk() {//点击弹框确定 function handleOk() {//点击弹框确定 右边按钮
// setVisible(false); if(step==0){
setloading(true); form.current.validate()
setTimeout(() => { .then(values=>{//表单校验成功
setloadingTip('...接受成功') setloading(true);
setTimeout(()=>{
setloadingTip('已完成')
setTimeout(() => { setTimeout(() => {
setstep(1); setloadingTip('...接受成功')
setloading(false); setTimeout(()=>{
setloadingTip('已完成')
setTimeout(() => {
setstep(1);
setokText('确认');
setcancelText('上一步');
setloading(false);
}, 2000);
},2000)
}, 2000); }, 2000);
},2000) })
}, 2000); .catch(errors=>{//表单校验失败
console.log('errors',errors);
})
}
else{
Notification.success(opts)
setVisible(false);
}
} }
function handleAfterClose(){//在关闭之后 function handleAfterClose(){//在关闭之后
console.log('after'); setstep(0);
setokText('测试校验');
setcancelText('取消');
}
function handleCancel() {//点击弹框取消 左边按钮
if(step==0){
setVisible(false);
}
else{
setstep(0);
setokText('测试校验');
setcancelText('取消');
}
} }
function handleCancel() {//点击弹框取消 function handleLocation(){//高德经纬度
setVisible(false); console.log('handleLocationhandleLocation');
} }
return ( return (
<> <>
<div onClick={showDialog}>{props.modalName}</div> <div onClick={showDialog}>{modalName}</div>
<Modal <Modal
title="添加NVR" title="添加NVR"
okText="测试校验" okText={okText}
// cancelText 取消按钮 cancelText={cancelText} //取消按钮
visible={visible} visible={visible}
onOk={handleOk} onOk={handleOk}
height={386} width={607}
width={607} afterClose={handleAfterClose}
afterClose={handleAfterClose} //>=1.16.0 onCancel={handleCancel}
onCancel={handleCancel} >
> <Spin tip={loadingTip} spinning={isloading}>
<Spin tip={loadingTip} spinning={isloading}> {step==0?<div style={{paddingLeft:16}}>
{step==0?<div style={{paddingLeft:16+'px'}}> <Form
<Form 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}>
<Row> <Row>
<Col span={12}> <Col span={12}>
<Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }} <Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }}
rules={[ rules={[
{ required: true, message: '请输入设备编号' } { required: true, message: '请输入设备编号' }
]}/> ]}/>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Input field='Use11rName' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/> <Form.Input field='Use11rName' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/>
</Col> </Col>
<Col span={24}> <Col span={24}>
<Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }} <Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
rules={[ rules={[
{ required: true, message: '请输入设备名称、常用项目或位置定义' } { required: true, message: '请输入设备名称、常用项目或位置定义' }
]}/> ]}/>
</Col> </Col>
<Col span={24}> <Col span={24}>
<Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421+'px' }}> <Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421 }}>
<Form.Select.Option value="abc">Semi</Form.Select.Option> <Form.Select.Option value="abc">Semi</Form.Select.Option>
<Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option> <Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
<Form.Select.Option value="toutiao">今日头条</Form.Select.Option> <Form.Select.Option value="toutiao">今日头条</Form.Select.Option>
</Form.Select> </Form.Select>
</Col> </Col>
<Col span={24} style={{display:'flex',alignItems:'center'}}> <Col span={24} style={{display:'flex'}}>
<Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }} <Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
rules={[ rules={[
{ required: true, message: '请输入或拾取高德经纬度坐标' } { required: true, message: '请输入或拾取高德经纬度坐标' }
]}/> ]}/>
<div style={{ <div style={{
width:32, width:32,
height:32, height:32,
background:"#1859C1", background:"#1859C1",
marginLeft:4+'px', marginLeft:4,
display:'flex', display:'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
cursor: "pointer", cursor: "pointer",
borderRadius: 3+'px'}}> marginTop:12,
<img src="../../../assets/images/background/location.png" width={16} height={20}/> borderRadius: 3+'px'}}
</div> onClick={handleLocation}>
</Col> <img src="../../../assets/images/background/location.png" width={16} height={20}/>
</Row> </div>
</Form> </Col>
</div>: </Row>
<div > </Form>
<div style={{marginTop:50,display: 'flex', justifyContent: 'center'}}> </div>
<IconTickCircle style={{color:'#04B234',fontSize:60}}/> ://下一步
</div> <div style={{height:224}}>
<div style={{marginTop:20,display: 'flex', justifyContent: 'center'}}> <div style={{paddingTop:50,display: 'flex', justifyContent: 'center'}}>
已完成NVR设备测试和校验，是否确认添加？ <IconTickCircle style={{color:'#04B234',fontSize:60}}/>
</div> </div>
<div style={{marginTop:20,display: 'flex', justifyContent: 'center'}}>
已完成NVR设备测试和校验，是否确认添加？
</div> </div>
} </div>
</Spin> }
</Modal> </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 { connect } from "react-redux";
import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui"; import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
import "../style.less"; import "../style.less";
import NvrModal from "../components/nvrModal" import NvrModal from "../components/nvrModal";
import Setup from "../components/setup";
const NvrHeader = (props) => { const NvrHeader = (props) => {
const { dispatch, actions, user, loading } = props; const { dispatch, actions, user, loading } = props;
const [setup, setSetup] = useState(false);
const screen = { const screen = {
width: 193, width: 193,
@ -16,7 +18,6 @@ const NvrHeader = (props) => {
const columns = [ const columns = [
{ {
title: "序号", title: "序号",
align: "center",
render: (text, record, index) => { render: (text, record, index) => {
return index + 1; return index + 1;
}, },
@ -24,8 +25,8 @@ const NvrHeader = (props) => {
{ {
title: "设备名称", title: "设备名称",
// dataIndex: "name",/// // dataIndex: "name",///
align: "center",
width: 200, width: 200,
background: "red",
render: (text, record, index) => { render: (text, record, index) => {
return ( return (
<div> <div>
@ -45,34 +46,30 @@ const NvrHeader = (props) => {
}, },
{ {
title: "设备厂家", title: "设备厂家",
align: "center",
dataIndex: "size", dataIndex: "size",
}, },
{ {
title: "SIP地址", title: "SIP地址",
align: "center",
dataIndex: "owner", dataIndex: "owner",
}, },
{ {
title: "端口号", title: "端口号",
align: "center",
dataIndex: "updateTime", dataIndex: "updateTime",
}, },
{ {
title: "通道数", title: "通道数",
align: "center",
dataIndex: "nameIconSrc", dataIndex: "nameIconSrc",
}, },
{ {
title: "操作", title: "操作",
align: "center", width: "20%",
dataIndex: "", dataIndex: "",
render: (y) => { render: (y) => {
return ( return (
<> <>
<Button>修改</Button> <Button theme="borderless"><NvrModal modalName="修改" /></Button>
<Button>查看</Button> <Button theme="borderless">查看</Button>
<Button>删除</Button> <Button theme="borderless">删除</Button>
</> </>
); );
}, },
@ -109,45 +106,53 @@ const NvrHeader = (props) => {
]; ];
return ( return (
<> <>
<div style={{position:''}}> <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' /> <video
<div style={{position: 'absolute',top:12}}> id="nvrBanner"
<div autoPlay
style={{ loop
fontSize: 22 + "px", muted
paddingTop: 15 + "px", style={{ width: "100%", objectFit: "cover", height: 171 }}
marginLeft: 21 + "px", src="/assets/video/nvr_banner.mp4"
}} type="video/mp4"
> />
NVR管理 <div style={{ position: "absolute", top: 12 }}>
</div> <div
<div style={{
style={{ fontSize: 22 + "px",
fontSize: 14 + "px", paddingTop: 15 + "px",
paddingTop: 18 + "px", marginLeft: 21 + "px",
marginLeft: 20 + "px", }}
}} >
> NVR管理
对NVR（网络硬盘录像机）设备节点的管理 </div>
</div> <div
<div style={{
style={{ fontSize: 14 + "px",
fontSize: 14 + "px", paddingTop: 18 + "px",
marginTop: 28 + "px", marginLeft: 20 + "px",
marginLeft: 21 + "px", }}
width: 89 + "px", >
height: 32 + "px", 对NVR（网络硬盘录像机）设备节点的管理
lineHeight: 32 + "px", </div>
textAlign: "center", <div
backgroundColor: "#D9EAFF", style={{
color: "#1859C1", fontSize: 14 + "px",
cursor: "pointer", marginTop: 28 + "px",
}} marginLeft: 21 + "px",
> width: 89 + "px",
<NvrModal modalName="添加NVR"/> height: 32 + "px",
</div> lineHeight: 32 + "px",
</div> textAlign: "center",
</div> backgroundColor: "#D9EAFF",
color: "#1859C1",
cursor: "pointer",
}}
>
<NvrModal modalName="添加NVR" />
</div>
</div>
</div>
<div <div
style={{ style={{
width: "100%", width: "100%",
@ -215,7 +220,7 @@ const NvrHeader = (props) => {
</Form> </Form>
<div <div
style={{ style={{
width: 0, width: 150,
display: "flex", display: "flex",
justifyContent: "flex-end", justifyContent: "flex-end",
alignItems: "flex-end", alignItems: "flex-end",
@ -228,8 +233,8 @@ const NvrHeader = (props) => {
width: 65, width: 65,
height: 30, height: 30,
borderRadius: 3, borderRadius: 3,
marginBottom: "20px", marginBottom: 20,
marginRight: "20px", marginRight: 20,
}} }}
> >
搜素 搜素
@ -243,7 +248,7 @@ const NvrHeader = (props) => {
backGround: "#FFFFFF", backGround: "#FFFFFF",
borderRadius: 3, borderRadius: 3,
border: "1px solid #D9D9D9", border: "1px solid #D9D9D9",
marginBottom: "20px", marginBottom: 20,
}} }}
> >
重置 重置
@ -251,8 +256,15 @@ const NvrHeader = (props) => {
</div> </div>
</div> </div>
</div> </div>
<Table <div style={{ background: "#FFFFFF", marginTop: 5 }}>
title={ <div
style={{
width: "100%",
display: "flex",
justifyContent: "space-between",
padding: "13px 20px",
}}
>
<div <div
style={{ style={{
width: 64, width: 64,
@ -266,24 +278,74 @@ const NvrHeader = (props) => {
> >
设备列表 设备列表
</div> </div>
} <div>
columns={columns} <Button
dataSource={data} style={{
pagination={false} width: 32,
bordered={false} 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) { function mapStateToProps(state) {
const { auth, global, members } = state; const { auth, global, members } = 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,
}; };
} }
export default connect(mapStateToProps)(NvrHeader); export default connect(mapStateToProps)(NvrHeader);

Write Preview
Loading…
Cancel
Save