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

表格功能完成

release_0.0.1
wenlele 3 years ago
parent
c23c764238 981dc894c4
commit
b9ac39955c
6 changed files with 255 additions and 37 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. 69
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
  2. 140
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
  3. 6
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.less
  4. 65
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
  5. 10
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
  6. 2
      code/VideoAccess-VCMP/web/client/src/utils/webapi.js

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

@ -1,27 +1,54 @@
'use strict';
"use strict";
import { basicAction } from '@peace/utils'
import { ApiTable } from '$utils'
import { basicAction } from "@peace/utils";
import { ApiTable } from "$utils";
export function getMembers (orgId) {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_MEMBERS',
url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
msg: { error: '获取用户列表失败' },
reducer: { name: 'members' }
export function getMembers(orgId) {
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_MEMBERS",
url: `${ApiTable.getEnterprisesMembers.replace("{enterpriseId}", orgId)}`,
msg: { error: "获取用户列表失败" },
reducer: { name: "members" },
});
}
export function getNvr (query) {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_NVR',
query:query,
url: `${ApiTable.getNvr}`,
msg: { option: '获取nvr列表信息' },
reducer: { name: 'equipmentWarehouseNvr' }
export function getNvr(query) {
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_NVR",
query: query,
url: `${ApiTable.getNvr}`,
msg: { option: "获取nvr列表信息" },
reducer: { name: "equipmentWarehouseNvr" },
});
}
}
export function addchangeNvr(data) {
return (dispatch) =>
basicAction({
type: "post",
dispatch: dispatch,
data,
actionType: "ADD_CHANGE_NVR",
url: `${ApiTable.nvr}`,
msg: { option: "添加/修改" },
});
}
export function getVender() {
//获取设备厂商
return (dispatch) =>
basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_VENDER",
url: `${ApiTable.getVender}`,
msg: { error: "获取设备厂商失败" },
reducer: { name: "vender" },
});
}

140
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
View File

@ -1,15 +1,19 @@
import React, { useState ,useRef} from 'react'
import { Modal,Form,Row,Col,Spin,Notification,Button } from '@douyinfe/semi-ui';
import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons';
import "./cameraModal.less";
function nvrModal(props){
const { TextArea } = Form;
const {modalName,visible,close}=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 [okText,setokText] = useState('测试校验')//ok弹框text 右边
const [okText,setokText] = useState('确定')//ok弹框text 右边
const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边
const [cloud,setcloud] = useState('')
const [voice,setvoice] = useState('')
const opts ={//添加完成确认后通知
title:'Hi',
content:'添加成功',
@ -193,6 +197,140 @@ function nvrModal(props){
</div>
</div>
</div>
<div>
<Form
labelPosition='left'
labelAlign='left'
labelWidth= '115px'
onValueChange={values=>console.log(values)}
getFormApi={formApi => form.current = formApi}>
<Row>
<Col span={12}>
<Form.Input field='UserName' label='设备名称:' initValue={''} placeholder='请输入设备名称、常用项目或位置定义' style={{ width:307 }}
rules={[
{ required: true, message: '请输入设备名称' }
]}/>
</Col>
<Col span={12}>
<Form.RadioGroup
label="云台支持:"
field='role'
type='pureCard'
direction='horizontal'
style={{padding:0}}
rules={[
{ required: true, message: '请选择云台支持' }
]}
onChange={(checked) => {
console.log(checked.target.value);
if(checked.target.value=='yes'){
setcloud('yes')
}
else{
setcloud('no')
}
}}>
<Form.Radio value="yes" style={{width:58,height:30,padding:0,margin:0,background:'#F9F9F9'}}>
<div className='cloud' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}>
支持
</div>
{cloud=='yes'?<div style={{position: 'absolute', top: '-2px', right: '-1px'}}>
<img src="/assets/images/background/formchoose.png" alt="1" />
</div>:''}
</Form.Radio>
<Form.Radio value="no" style={{width:58,height:30,padding:0,margin:0,marginLeft:18,background:'#F9F9F9'}}>
<div className='cloud' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}>
不支持
</div>
{cloud=='no'?<div style={{position: 'absolute', top: '-2px', right: '-1px'}}>
<img src="/assets/images/background/formchoose.png" alt="1" />
</div>:''}
</Form.Radio>
</Form.RadioGroup>
</Col>
<Col span={12}>
<Form.Input field='Use11rName11' label='设备厂家:' placeholder='请选择设备厂家' style={{ width:307 }}/>
</Col>
<Col span={12}>
<div style={{display:'flex'}}>
<Form.Select label="内存:" field='business2' placeholder='未安装' style={{ width:92 }}>
<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>
<div style={{marginLeft:18}}>
<Form.RadioGroup
labelWidth= '76px'
label="语音支持:"
field='role2'
type='pureCard'
direction='horizontal'
style={{padding:0}}
onChange={(checked) => {
console.log(checked.target.value);
if(checked.target.value=='yes'){
setvoice('yes')
}
else{
setvoice('no')
}
}}>
<Form.Radio value="yes" style={{width:58,height:30,padding:0,margin:0,background:'#F9F9F9'}}>
<div className='voice' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}>
支持
</div>
{voice=='yes'?<div style={{position: 'absolute', top: '-2px', right: '-1px'}}>
<img src="/assets/images/background/formchoose.png" alt="1" />
</div>:''}
</Form.Radio>
<Form.Radio value="no" style={{width:58,height:30,padding:0,margin:0,marginLeft:18,background:'#F9F9F9'}}>
<div className='voice' style={{width:58,height:30,textAlign:'center',lineHeight:'30px'}}>
不支持
</div>
{voice=='no'?<div style={{position: 'absolute', top: '-2px', right: '-1px'}}>
<img src="/assets/images/background/formchoose.png" alt="1" />
</div>:''}
</Form.Radio>
</Form.RadioGroup>
</div>
</div>
</Col>
<Col span={12}>
<div style={{display:'flex'}}>
<Form.Input field='Use11rName1312' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:270 }}
rules={[
{ 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>
</div>
<div>
<Form.Input field='UserName11' label='设备编号接入:' initValue={''} placeholder='请输入设备编号' style={{ width:307 }}/>
</div>
</Col>
<Col span={12}>
<TextArea
style={{ width:320, height: 90 }}
field='description'
label='RTMP地址接入:'
placeholder='请输入RTMP地址接入'
/>
</Col>
</Row>
</Form>
</div>
</Spin>
</Modal>
</>

6
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.less
View File

@ -0,0 +1,6 @@
.semi-radio-cardRadioGroup_checked .cloud{
color: #1859C1;
}
.semi-radio-cardRadioGroup_checked .voice{
color: #1859C1;
}

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

@ -1,9 +1,12 @@
import React, { useState ,useRef} from 'react'
import { connect } from "react-redux";
import { Modal,Form,Row,Col,Spin,Notification } from '@douyinfe/semi-ui';
import { IconTickCircle } from '@douyinfe/semi-icons';
function nvrModal(props){
const {modalName}=props
const nvrData = props.nvrData||{}
const { dispatch, actions, user, loading } = props;
const venderList=props.venderList||[]//设备厂家
const nvrData = props.nvrData||{}//修改时传来的值
const form = useRef();
const [visible, setVisible] = useState(false);//是否显示弹框
const [isloading,setloading] = useState(false);//是否显示loading
@ -11,6 +14,7 @@ function nvrModal(props){
const [step,setstep] = useState(0)//第几步
const [okText,setokText] = useState('测试校验')//ok弹框text 右边
const [cancelText,setcancelText] = useState('取消')//取消弹框text 左边
const [formObj,setformObj] = useState()//接口入参
const opts ={//添加完成确认后通知
title:'Hi',
content:'添加成功',
@ -19,10 +23,32 @@ function nvrModal(props){
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 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]
setformObj(valuesObj)
setloading(true);
setTimeout(() => {
setloadingTip('...接受成功')
@ -43,8 +69,10 @@ function nvrModal(props){
}
else{
Notification.success(opts)
setVisible(false);
dispatch(actions.equipmentWarehouse.addchangeNvr(formObj)).then(res => {
Notification.success(opts)
setVisible(false);
})
}
}
function handleAfterClose(){//在关闭之后
@ -63,7 +91,7 @@ function nvrModal(props){
}
}
function handleLocation(){//高德经纬度
console.log('handleLocationhandleLocation');
window.open('https://lbs.amap.com/tools/picker','_blank')
}
return (
<>
@ -88,29 +116,30 @@ function nvrModal(props){
getFormApi={formApi => form.current = formApi}>
<Row>
<Col span={12}>
<Form.Input field='UserName' label='设备编号:' initValue={nvrData.name||''} placeholder='请输入设备编号' style={{ width:149 }}
<Form.Input maxLength='39' field='serialNo' label='设备编号:' initValue={nvrData.name||''} placeholder='请输入设备编号' style={{ width:149 }}
rules={[
{ required: true, message: '请输入设备编号' }
]}/>
</Col>
<Col span={12}>
<Form.Input field='Use11rName' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/>
<Form.Input maxLength='15' field='regionCode' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/>
</Col>
<Col span={24}>
<Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
<Form.Input maxLength='36' field='name' 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 label="设备厂家:" field='venderId' placeholder='请选择设备厂家' style={{ width: 421 }}>
{venderList.map((item,index)=>(
<Form.Select.Option key={index} value={item.id}>{item.name}</Form.Select.Option>
))}
</Form.Select>
</Col>
<Col span={24} style={{display:'flex'}}>
<Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
<Form.Input maxLength='39' field='position' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
validate={positionForm}
rules={[
{ required: true, message: '请输入或拾取高德经纬度坐标' }
]}/>
@ -148,4 +177,14 @@ function nvrModal(props){
);
}
export default nvrModal
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)(nvrModal);

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

@ -15,6 +15,12 @@ const NvrHeader = (props) => {
const [pagination, setPagination] = useState({limit:10,page:0});
const SETUPS = "setups";
const [venderList,setvenderList] =useState([]);
useEffect(() => {
dispatch(actions.equipmentWarehouse.getVender()).then(res => {
setvenderList(res.payload.data)
})
}, [])
const columns = [
{
@ -57,7 +63,7 @@ const NvrHeader = (props) => {
return (
<>
<Button theme="borderless">
<NvrModal nvrData={row} modalName="revise" />
<NvrModal nvrData={row} modalName="revise" venderList={venderList}/>
</Button>
<Button
theme="borderless"
@ -198,7 +204,7 @@ console.log(equipmentWarehouseNvr);
cursor: "pointer",
}}
>
<NvrModal modalName="add" />
<NvrModal modalName="add" venderList={venderList} />
</div>
</div>
</div>

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

@ -10,6 +10,8 @@ export const ApiTable = {
getEnterprisesMembers: 'enterprises/{enterpriseId}/members',
getNvr:'nvr',
getVender:'vender',
nvr:'nvr'
};
export const RouteTable = {

Write Preview
Loading…
Cancel
Save