Merge branch 'dev_trial' of https://gitea.free-sun.vip/free-sun/FS-IOT into dev_trial

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

@@ -1,15 +1,63 @@
-'use strict';
+"use strict";
 
-import { basicAction } from '@peace/utils'
+import { basicAction } from "@peace/utils";
-import { ApiTable } from '$utils'
+import { ApiTable } from "$utils";
 
 export function getMembers(orgId) {
-    return dispatch => basicAction({
+  return (dispatch) =>
-        type: 'get',
+    basicAction({
+      type: "get",
       dispatch: dispatch,
-        actionType: 'GET_MEMBERS',
+      actionType: "GET_MEMBERS",
-        url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
+      url: `${ApiTable.getEnterprisesMembers.replace("{enterpriseId}", orgId)}`,
-        msg: { error: '获取用户列表失败' },
+      msg: { error: "获取用户列表失败" },
-        reducer: { name: 'members' }
+      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 delNvr(orgId) {
+    return (dispatch) =>
+      basicAction({
+        type: "del",
+        dispatch: dispatch,
+        actionType: "DEL_NVR",
+        url: `${ApiTable.delNvr.replace("{nvrId}", orgId)}`,
+        msg: { option: "删除NVR" },
+        reducer: { name: "" },
+      });
+  }
+export function addchangeNvr(data) {
+  return (dispatch) =>
+    basicAction({
+      type: "post",
+      dispatch: dispatch,
+      data,
+      actionType: "ADD_CHANGE_NVR",
+      url: `${ApiTable.nvr}`,
+    });
+}
+
+export function getVender() {
+  //获取设备厂商
+  return (dispatch) =>
+    basicAction({
+      type: "get",
+      dispatch: dispatch,
+      actionType: "GET_VENDER",
+      url: `${ApiTable.getVender}`,
+      msg: { error: "获取设备厂商失败" },
+      reducer: { name: "vender" },
     });
 }

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

@@ -1,15 +1,20 @@
 import React, { useState ,useRef} from 'react'
+import { connect } from "react-redux";
 import { Modal,Form,Row,Col,Spin,Notification,Button } from '@douyinfe/semi-ui';
 import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons';
-function nvrModal(props){
+import "./cameraModal.less";
+function cameraModal(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:'添加成功',
@@ -86,7 +91,7 @@ function nvrModal(props){
     }
   }
   function handleLocation(){//高德经纬度
-    console.log('handleLocationhandleLocation');
+    window.open('https://lbs.amap.com/tools/picker','_blank')
   }
   function handleChoose(id){//选择摄像头接入类型
     setclickNum(id);
@@ -193,10 +198,153 @@ 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>
     </>
   );
 }
+function mapStateToProps(state) {
+  const { auth, global, members } = state;
+  return {
+    loading: members.isRequesting,
+    user: auth.user,
+    actions: global.actions,
+    members: members.data,
+  };
+}
 
-export default nvrModal
+export default connect(mapStateToProps)(cameraModal);

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;
+}

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,vender,close } = props;
+  const nvrData = props.nvrData||{}//修改时传来的值
+  console.log('nvrDatanvrDatanvrData',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,37 @@ 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]
+        delete valuesObj.position
+        if(nvrData.id){
+          valuesObj.id=nvrData.id
+        }
+        console.log('valuesObjvaluesObj',valuesObj);
+        setformObj(valuesObj)
         setloading(true);
         setTimeout(() => {
           setloadingTip('...接受成功')
@@ -43,8 +74,11 @@ function nvrModal(props){
       
     }
     else{
+      dispatch(actions.equipmentWarehouse.addchangeNvr(formObj)).then(res => {
         Notification.success(opts)
         setVisible(false);
+        close();
+      })
     }
   }
   function handleAfterClose(){//在关闭之后
@@ -63,7 +97,7 @@ function nvrModal(props){
     }
   }
   function handleLocation(){//高德经纬度
-    console.log('handleLocationhandleLocation');
+    window.open('https://lbs.amap.com/tools/picker','_blank')
   }
   return (
     <>
@@ -81,6 +115,7 @@ function nvrModal(props){
         <Spin tip={loadingTip} spinning={isloading}>
           {step==0?<div style={{paddingLeft:16}}>
             <Form 
+              allowEmpty
               labelPosition='left'
               labelAlign='left'
               labelWidth= '90px'
@@ -88,29 +123,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.serialNo||''} 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='行政区区码:' initValue={nvrData.regionCode||''} placeholder='请输入行政区区码' style={{ width:149 }}/>
                 </Col>
                 <Col span={24}>
-                  <Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
+                  <Form.Input maxLength='36' field='name' label='设备名称:'  initValue={nvrData.name||''} placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
                   rules={[
                     { required: true, message: '请输入设备名称、常用项目或位置定义' }
                   ]}/>
                 </Col>
                 <Col span={24}>
-                  <Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421 }}>
+                  <Form.Select label="设备厂家:" field='venderId' initValue={nvrData.venderId||''} placeholder='请选择设备厂家' style={{ width: 421 }}>
-                    <Form.Select.Option value="abc">Semi</Form.Select.Option>
+                    {vender.map((item,index)=>(
-                    <Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
+                      <Form.Select.Option key={index} value={item.id}>{item.name}</Form.Select.Option>
-                    <Form.Select.Option value="toutiao">今日头条</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='安装位置:' initValue={nvrData.longitude&&nvrData.latitude?nvrData.longitude+','+nvrData.latitude:''} placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
+                  validate={positionForm}
                     rules={[
                     { required: true, message: '请输入或拾取高德经纬度坐标' }
                   ]}/>
@@ -148,4 +184,15 @@ function nvrModal(props){
   );
 }
 
-export default nvrModal
+function mapStateToProps(state) {
+  const { auth, global, members,vender } = state;
+  return {
+    loading: members.isRequesting,
+    user: auth.user,
+    actions: global.actions,
+    members: members.data,
+    vender:vender.data||[],//设备厂家
+  };
+}
+
+export default connect(mapStateToProps)(nvrModal);

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

@@ -6,19 +6,48 @@ function SideSheets(props) {
   const [checkeds, setCheckeds] = useState([]);
   const [check, setCheck] = useState([]);
   const list = [
-    { name: "1111", a: "a", b: "B", c: "C", d: "C" },
+    {
-    { name: "2222", a: "a", b: "B", c: "C", d: "C" },
+      name: "项目名称",
-    { name: "3333", a: "a", b: "B", c: "C", d: "C" },
+      a: "南昌县智慧环保",
-    { name: "4444", a: "a", b: "B", c: "C", d: "C" },
+      b: "南昌县智慧环保",
+      c: "南昌市市政隧道综合管理平台",
+      d: "C",
+    },
+    { name: "关联结构物", a: "a", b: "B", c: "C", d: "C" },
+    { name: "关联测点", a: "a", b: "B", c: "C", d: "C" },
+    { name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
   ];
+  const IFname = [
+    "设备名称：",
+    "设备编号：",
+    "接入方式：",
+    "厂商：",
+    "添加账号：",
+    "添加时间：",
+    "行政区别：",
+    "设备安装位置：",
+    "SIP服务编号:",
+    "SIP域:",
+    "SIP端口号:",
+    "通道数量:",
+    "心跳周期:",
+    "最大心跳次数:",
+    "注册密码:",
+    "注册有效期::",
+    "接入识别模块:",
+  ];
+  console.log(IFname);
   const styles = {
     width: 180,
     textAlign: "center",
-    background: "#FFFFFF",
+    // background: "#FFFFFF",
+    background: "url(/assets/images/background/backGround.png)",
+    backgroundSize: "100% 100%",
     padding: "12px 17px",
     margin: "30px 0 0 10px",
     lineHeight: "20px",
-    
+    position: "relative",
+    zIndex: 5,
   };
 
   useEffect(() => {}, []);
@@ -35,12 +64,12 @@ function SideSheets(props) {
     >
       <Tabs type="line">
         <TabPane tab="项目信息" itemKey="1">
+          <div style={{ display: "flex", justifyContent: "space-evenly" }}>
             {list.map((item) => {
               return (
                 <div
                   key={item.name}
                   style={{
-                  display: "inline-block",
                     width: 200,
                     margin: "12px 8px",
                   }}
@@ -62,9 +91,12 @@ function SideSheets(props) {
                 </div>
               );
             })}
+          </div>
         </TabPane>
         <TabPane tab="设备信息" itemKey="2">
-          快速起步
+          {IFname.map((item, index) => {
+            return index;
+          })}
         </TabPane>
       </Tabs>
     </SideSheet>

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

@@ -1,31 +1,47 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
-import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
+import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
 import "../style.less";
 import NvrModal from "../components/nvrModal";
 import Setup from "../components/setup";
 import SideSheets from "../components/sideSheet";
 
 const NvrHeader = (props) => {
-  const { dispatch, actions, user, loading } = props;
+  const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
+  const { equipmentWarehouse } = actions;
   const [setup, setSetup] = useState(false);
   const [sideSheet, setSideSheet] = useState(false);
   const [setupp, setSetupp] = useState([]);
+  const [venderList, setvenderList] = useState([]); //厂商信息
+  const [query, setQuery] = useState({ limit: 10, page: 0 });
   const SETUPS = "setups";
 
+  useEffect(() => {
+    dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
+      setvenderList(res.payload.data);
+    });
+    //初始化表格显示设置
+    localStorage.setItem(SETUPS, JSON.stringify(["a", "c", "d", "e"]));
+    attribute();
+  }, []);
+
+  useEffect(() => {
+    equipmentGetNvr();
+  }, [query]);
+
+  function equipmentGetNvr() {
+    dispatch(equipmentWarehouse.getNvr(query));
+  }
   const columns = [
     {
       title: "序号",
-
       render: (text, record, index) => {
         return index + 1;
       },
     },
     {
       title: "设备名称",
-      //   dataIndex: "name",///
+      dataIndex: "name",
-      width: 200,
-      background: "red",
       render: (text, record, index) => {
         return (
           <div>
@@ -57,7 +73,14 @@ const NvrHeader = (props) => {
         return (
           <>
             <Button theme="borderless">
-              <NvrModal nvrData={row} modalName="revise" />
+              <NvrModal
+                nvrData={row}
+                modalName="revise"
+                venderList={venderList}
+                close={() => {
+                  equipmentGetNvr();
+                }}
+              />
             </Button>
             <Button
               theme="borderless"
@@ -67,16 +90,16 @@ const NvrHeader = (props) => {
             >
               查看
             </Button>
-            <Button theme="borderless">删除</Button>
+            <Button theme="borderless" onClick={()=>{
+               dispatch(equipmentWarehouse.delNvr(row.id));
+               equipmentGetNvr();
+            }}>删除</Button>
           </>
         );
       },
     },
   ];
 
-  useEffect(() => {
-    attribute();
-  }, []);
   //获取表格属性设置
   function attribute() {
     const arr = localStorage.getItem(SETUPS)
@@ -86,22 +109,22 @@ const NvrHeader = (props) => {
     const column = [
       {
         title: "设备厂家",
-        dataIndex: "size",
+        dataIndex: "venderId",
         key: "a",
       },
       {
-        title: "添加张账号",
+        title: "添加账号",
-        dataIndex: "size",
+        dataIndex: "createUserId",
         key: "b",
       },
       {
         title: "通道数",
-        dataIndex: "size",
+        dataIndex: "channelCount",
         key: "c",
       },
       {
         title: "端口",
-        dataIndex: "size",
+        dataIndex: "port",
         key: "d",
       },
       {
@@ -111,7 +134,7 @@ const NvrHeader = (props) => {
       },
       {
         title: "创建时间",
-        dataIndex: "size",
+        dataIndex: "createTime",
         key: "f",
       },
       {
@@ -139,6 +162,7 @@ const NvrHeader = (props) => {
     setSetupp(columns);
   }
 
+  //条件赛选样式
   const screen = {
     width: 193,
     marginRight: 20,
@@ -146,35 +170,6 @@ const NvrHeader = (props) => {
     color: "rgba(0, 0, 0, 0.65)",
   };
 
-  const data = [
-    {
-      key: "1",
-      name: "智能设备NVR1",
-      nameIconSrc: "12",
-      size: "飞尚科技1",
-      owner: "192.168.1.1",
-      updateTime: "5000",
-      avatarBg: "red",
-    },
-    {
-      key: "2",
-      name: "智能设备NVR2",
-      nameIconSrc: "8",
-      size: "飞尚科技2",
-      owner: "192.168.1.3",
-      updateTime: "5001",
-      avatarBg: "green",
-    },
-    {
-      key: "3",
-      name: "智能设备NVR3",
-      nameIconSrc: "9",
-      size: "飞尚科技3",
-      owner: "192.168.1.2",
-      updateTime: "5002",
-      avatarBg: "green",
-    },
-  ];
   return (
     <>
       <div style={{ position: "" }}>
@@ -220,7 +215,13 @@ const NvrHeader = (props) => {
               cursor: "pointer",
             }}
           >
-            <NvrModal modalName="add" />
+            <NvrModal
+              modalName="add"
+              venderList={venderList}
+              close={() => {
+                equipmentGetNvr();
+              }}
+            />
           </div>
         </div>
       </div>
@@ -249,7 +250,6 @@ const NvrHeader = (props) => {
         <div style={{ display: "flex" }}>
           <Form
             onSubmit={(values) => console.log(values)}
-            // labelPosition='top'
             layout="horizontal"
             style={{ position: "relative", width: "100%", flex: 1 }}
           >
@@ -266,8 +266,13 @@ const NvrHeader = (props) => {
               field="type1"
               placeholder="全部"
             >
-              <Form.Select.Option value="f1">飞尚科技1</Form.Select.Option>
+              {venderList.map((item) => {
-              <Form.Select.Option value="f2">飞尚科技2</Form.Select.Option>
+                return (
+                  <Form.Select.Option key={item.id} value={item.id}>
+                    {item.name}
+                  </Form.Select.Option>
+                );
+              })}
             </Form.Select>
             <Form.Select
               label="状态查询："
@@ -308,6 +313,7 @@ const NvrHeader = (props) => {
                 marginBottom: 20,
                 marginRight: 20,
               }}
+              onClick={() => {}}
             >
               搜素
             </Button>
@@ -386,14 +392,36 @@ const NvrHeader = (props) => {
         </div>
         <Table
           columns={setupp}
-          dataSource={data}
+          dataSource={equipmentWarehouseNvr.data}
-          pagination={false}
           bordered={false}
           empty="暂无数据"
           style={{
             padding: "0px 20px",
           }}
+          pagination={false}
         />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            padding: "20px 20px",
+          }}
+        >
+          <span style={{ lineHeight: "30px" }}>
+            共{equipmentWarehouseNvr.total}个设备
+          </span>
+          <Pagination
+            className="22"
+            total={equipmentWarehouseNvr.total}
+            showSizeChanger
+            pageSizeOpts={[10, 20, 30, 40]}
+            onChange={(currentPage, pageSize) => {
+              setQuery({ limit: pageSize, page: currentPage - 1 });
+              console.log(currentPage, pageSize);
+            }}
+          />
+        </div>
+
         {setup ? (
           <Setup
             visible={true}
@@ -401,10 +429,7 @@ const NvrHeader = (props) => {
             close={() => {
               setSetup(false);
               attribute();
-              // setEditData(null)
             }}
-            // reportType={reportType}
-            // editData={editData}
           />
         ) : (
           ""
@@ -426,12 +451,13 @@ const NvrHeader = (props) => {
 };
 
 function mapStateToProps(state) {
-  const { auth, global, members } = state;
+  const { auth, global, members, equipmentWarehouseNvr } = state;
   return {
     loading: members.isRequesting,
     user: auth.user,
     actions: global.actions,
     members: members.data,
+    equipmentWarehouseNvr: equipmentWarehouseNvr.data || [],
   };
 }
 

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

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