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
commit
85b64e95c4
  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

Binary file not shown.

After

Width:  |  Height:  |  Size: 945 B

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

@ -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('测试校验')//oktext
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

@ -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

@ -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);

Loading…
Cancel
Save