表格功能完成

3 years ago · b9ac39955c
6 changed files with 255 additions and 37 deletions
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/actions/nvr.js
@ -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',
+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' }
+      actionType: "GET_MEMBERS",
+      url: `${ApiTable.getEnterprisesMembers.replace("{enterpriseId}", orgId)}`,
+      msg: { error: "获取用户列表失败" },
+      reducer: { name: "members" },
    });
 }

-export function getNvr (query) {
-    return dispatch => basicAction({
-        type: 'get',
+export function getNvr(query) {
+  return (dispatch) =>
+    basicAction({
+      type: "get",
      dispatch: dispatch,
-        actionType: 'GET_NVR',
-        query:query,
+      actionType: "GET_NVR",
+      query: query,
      url: `${ApiTable.getNvr}`,
-        msg: { option: '获取nvr列表信息' },
-        reducer: { name: 'equipmentWarehouseNvr' }
+      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" },
    });
 }
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.jsx
@ -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>
    </>
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.less
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cameraModal.less
@ -0,0 +1,6 @@
+.semi-radio-cardRadioGroup_checked .cloud{
+  color: #1859C1;
+}
+.semi-radio-cardRadioGroup_checked .voice{
+  color: #1859C1;
+}
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
@ -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{
+      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);
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
@ -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>
--- a/code/VideoAccess-VCMP/web/client/src/utils/webapi.js
+++ b/code/VideoAccess-VCMP/web/client/src/utils/webapi.js
@ -10,6 +10,8 @@ export const ApiTable = {
    getEnterprisesMembers: 'enterprises/{enterpriseId}/members',

    getNvr:'nvr',
+    getVender:'vender',
+    nvr:'nvr'
 };

 export const RouteTable = {