视频管理系统(nvr):增删改查以及表格的渲染

public/js/config.js

@@ -5,7 +5,7 @@ var COMPANY = ''; //通用
 // var COMPANY='longguang'; //龙光地产
 // var COMPANY='zhengwu'
 // var COMPANY='shenbai'; //沈白高铁
-// COMPANY = 'henan' // 河南
+// COMPANY = 'henan' // 河南春笋
 // COMPANY = 'xingxuan'
 
 

src/assets/i18n/langs/cn/videoManage.js

@@ -100,6 +100,8 @@ export default {
     aiDeployment: 'AI布防',
     getOrganId: '获取组织id',
     uploadThirdParty: '上传第三方平台',
+    nvrDeviceManage:'nvr设备管理',
+    pluginManage:'设备监测插件管理',
     group: '所属分组',
     pleaseSelect: '请选择',
     isAiDistinguish: '是否具有AI识别功能',

src/assets/js/api/equipmentCenter/cameraList.js

@@ -1,7 +1,7 @@
 /**
  * api接口统一管理
  */
-import {post} from '../../http'
+import {post,get} from '../../http'
 
 export const addVideoItemApi = data => post('xmgl/videoItem/add', data); //添加视频设备列表信息
 export const editVideoItemApi = data => post('xmgl/videoItem/edit', data); //编辑视频设备列表信息
@@ -35,3 +35,9 @@ export const getVideoGroupApi = data => post('xmgl/videoGroup/list', data);
 
 // 上传第三方平台
 export const sendVideoInfoApi = data => post('xmgl/videoItem/sendVideoInfo', data); 
+
+// nvr设备管理
+export const getvideoNvrApi = data => get('/xmgl/videoNvr/selectPage', data); //获取数据
+export const addvideoNvrApi = data => post('/xmgl/videoNvr/addVideoNvr', data); //新增设备
+export const editvideoNvrApi = data => post('/xmgl/videoNvr/updateVideoNvr', data); //编辑设备
+export const delvideoNvrApi = data =>  get('/xmgl/videoNvr/deleteById', data); //删除设备

src/assets/js/http.js

@@ -85,7 +85,8 @@ if (process.env.NODE_ENV == 'development') {
 
 // tag: 河南
 if (COMPANY == 'henan') {
-  axios.defaults.baseURL = 'http://124.71.178.44:100/'
+  // axios.defaults.baseURL = 'http://124.71.178.44:100/'  // 备注 2022 10 12 后端说作废
+  axios.defaults.baseURL = 'http://139.9.66.234:6324/' // 2022 10 12 邱平毅 创建的服务器地址
 }
 
 // axios.defaults.baseURL = store.getters.BASEURL //'http://124.71.178.44:100/'axios.defaults.timeout = 600000;

src/views/equipmentCenter/videoManage/cameraList_lc.vue

@@ -9,7 +9,16 @@
                              align="center"></el-table-column>
             <el-table-column v-else prop="serialNumber" :label="videoInfo.videoType==3?$t('message.videoManage.dialog_newVideo.cameraCode'):$t('message.videoManage.equipment_list.serial_number')"
                              align="center"></el-table-column>
-
+            <el-table-column prop="deviceState" align="center" label="设备在线状态">
+                <template slot-scope="scope">
+                    {{scope.row.deviceState == 1 ? '在线' : '离线'}}
+                </template>
+            </el-table-column>
+            <el-table-column prop="ip" align="center"
+                             label="设备ip"
+            ></el-table-column>
+            <el-table-column prop="nvrSn" align="center" label="nvr编号">
+            </el-table-column>
             <el-table-column prop="serialNumber" :label="$t('message.videoManage.equipment_list.deviceTypeTitle')"
                              align="center">
                             <template slot-scope="scope">

src/views/equipmentCenter/videoManage/videoConfig.vue

@@ -32,7 +32,7 @@
                                     class="flex content_data"
                                     v-for="(item,index) in groupList"
                                     :key="index"
-                                    :class="{'active':activeGroupIndex===index }"
+                                    :class="{'active' : activeGroupIndex === index }"
                                     @click="changeGroupFn(item,index)"
                             >
                                 <div :title="item.groupName" style="width: 110px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.groupName}}</div>
@@ -109,6 +109,21 @@
                         <!-- 上传第三方平台 -->
                         {{$t('message.videoManage.uploadThirdParty')}}
                         </el-button>
+                        <!--  nvr设备管理-->
+                        <el-button 
+                                @click="nvrDeviceManage"
+                                type="primary"
+                                size="medium"
+                        >
+                        {{$t('message.videoManage.nvrDeviceManage')}}
+                        </el-button>
+                         <!--  设备监测插件管理-->
+                        <el-button 
+                                type="primary"
+                                size="medium"
+                        >
+                        {{$t('message.videoManage.pluginManage')}}
+                        </el-button>
                     </div>
                     <vue-scroll style="height:calc(100% - 34px)">
                         <camera-list v-if="videoType===1" @editDevice="edit" ref="camera"></camera-list>
@@ -118,6 +133,104 @@
 
             </div>
         </div>
+        <!-- nvr -->
+        <el-dialog :modal-append-to-body="false" title="nvr设备管理" :visible.sync="nvrDevice"
+                   width="1200px" :close-on-click-modal="false">
+            <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                <el-form-item label="nvr名称">
+                  <el-input v-model="formInline.name" placeholder="请输入" clearable></el-input>
+                </el-form-item>
+                <el-form-item label="nvr编号">
+                    <el-input v-model="formInline.nvrSn" placeholder="请输入" clearable></el-input>
+                </el-form-item>
+                <el-form-item label="硬件ip">
+                    <el-input v-model="formInline.ip" placeholder="请输入" clearable></el-input>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSearch">查询</el-button>
+                  <el-button type="primary" @click="onAdd">新增</el-button>
+                </el-form-item>
+                </el-form>
+                <el-table :data="tableData" style="width:100%">
+                    <el-table-column prop="name" label="nvr名称"></el-table-column>
+                    <el-table-column prop="nvrSn" label="nvr编号"></el-table-column>
+                    <el-table-column prop="ip" label="硬件ip"></el-table-column>
+                    <el-table-column prop="deviceState" label="设备状态">
+                      <template slot-scope="scope">
+                        {{scope.row.deviceState == 1 ? '在线' : '离线'}}
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="操作" align="center">
+                     <template slot-scope="scope">
+                      <el-button
+                        size="mini"
+                        @click="editBtn(scope.row)">编辑</el-button>
+                      <el-button
+                        size="mini"
+                        type="danger"
+                        @click="deleteBtn(scope.row)">删除</el-button>
+                     </template>
+                    </el-table-column>
+                </el-table>
+                <div class="pagerBox">
+                  <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page="pageNo"
+                    :page-sizes="pageSizes"
+                    :page-size="pageSize"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    background
+                    :total="total">
+                  </el-pagination>
+                </div>
+          </el-dialog>
+          <!-- 新增的弹窗 -->
+          <el-dialog :modal-append-to-body="false" :title="nvrTitle" :visible.sync="addDevice"
+                   width="667px" :close-on-click-modal="false">
+             <el-form  
+                ref="addForm"
+                :rules="rules1"
+                size="medium"
+                label-width="140px"
+                label-position="right"
+                :model="addFormData">
+              <el-form-item label="硬件ip" prop="ip">
+                <el-input
+                    clearable
+                    type="text"
+                    v-model="addFormData.ip"
+                    placeholder="请输入硬件ip"
+                ></el-input>
+             </el-form-item>
+             <el-form-item label="nvr名称" prop="name">
+                <el-input
+                    clearable
+                    type="text"
+                    v-model="addFormData.name"
+                    placeholder="请输入nvr名称"
+                ></el-input>
+             </el-form-item>
+             <el-form-item label="nvr编号" prop="nvrSn">
+                <el-input
+                    clearable
+                    type="text"
+                    v-model="addFormData.nvrSn"
+                    placeholder="请输入nvr编号"
+                ></el-input>
+             </el-form-item>
+               <el-form-item label="设备状态" prop="deviceState">
+                 <el-select v-model="addFormData.deviceState" placeholder="请选择">
+                  <el-option label="在线" :value="1"></el-option>
+                  <el-option label="离线" :value="2"></el-option>
+                 </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="addDevice = false">取 消</el-button>
+                   <el-button type="primary" @click="addDeviceSubmit">确 定</el-button>
+                </el-form-item>
+             </el-form>           
+          </el-dialog>
         <!-- 配置视频类型 -->
         <el-dialog :modal-append-to-body="false" :title="$t('message.videoManage.dialog_video_config.title')" :visible.sync="configDialog"
                    width="667px" :close-on-click-modal="false"
@@ -252,6 +365,16 @@
                     <el-form-item :label="$t('message.videoManage.sort')">
                         <el-input-number style="width:auto" v-model="currentVideoTypeDetail.sortNum" :placeholder="$t('message.videoManage.theSmaller')"></el-input-number>
                     </el-form-item>
+                    <el-form-item label="设备ip" prop="ip">
+                        <el-input
+                                  v-model="currentVideoTypeDetail.ip"
+                                  :placeholder="$t('message.videoManage.placeholder')"></el-input>
+                    </el-form-item>
+                    <el-form-item label="设备NVR" prop="nvrId">
+                        <el-input
+                                  v-model="currentVideoTypeDetail.nvrId"
+                                  :placeholder="$t('message.videoManage.placeholder')"></el-input>
+                    </el-form-item>
                 </el-form>
                 <div class="dialog-footer">
                     <!--取消-->
@@ -288,7 +411,7 @@
                         <el-input v-model="currentVideoTypeDetail.appId"
                                   :placeholder="$t('message.videoManage.placeholder')"></el-input>
                     </el-form-item>
-                    <el-form-item v-if="videoType!='7'":label="$t('message.videoManage.dialog_account_config.appSecret')">
+                    <el-form-item v-if="videoType!='7'" :label="$t('message.videoManage.dialog_account_config.appSecret')">
                         <el-input v-model="currentVideoTypeDetail.appSecret"
                                   :placeholder="$t('message.videoManage.placeholder')"></el-input>
                     </el-form-item>
@@ -451,7 +574,11 @@
         getHikVideoRegionsApi,saveHikVideoCamerasInfoListApi,
         addVideoGroupApi,deleteVideoGroupApi,editVideoGroupApi,
         getVideoGroupApi,
-        sendVideoInfoApi
+        sendVideoInfoApi,
+        getvideoNvrApi,
+        addvideoNvrApi,
+        editvideoNvrApi,
+        delvideoNvrApi
     } from "@/assets/js/api/equipmentCenter/cameraList";
     import {
   getProjectChilderSystemUserListApi
@@ -469,7 +596,33 @@
                     accountConfig: false,
                     equipment: false,
                     playPattern: false,
-                    name: ''
+                    name: '',
+                },
+                nvrDevice:false, //nvr弹窗
+                formInline:{
+                    name:'',
+                    nvrSn:'',
+                    ip:''
+                },
+                addFormData:{
+                    ip:"",
+                    deviceState:"", //设备在线状态
+                    name:"",
+                    nvrSn:"",
+                },
+                addDevice:false,
+                nvrTitle:'',
+                mode:1,
+                pageNo:1,
+                pageSizes:[5,10,20,50],
+                pageSize:10,
+                total:0,
+                tableData:[],
+                rules1:{
+                    ip:[{ required: true, message: this.$t('message.videoManage.required'), trigger: 'blur' },],
+                    deviceState:[{ required: true, message: this.$t('message.videoManage.required'), trigger: 'blur' },], 
+                    name:[{ required: true, message: this.$t('message.videoManage.required'), trigger: 'blur' },],
+                    nvrSn:[{ required: true, message: this.$t('message.videoManage.required'), trigger: 'blur' },],
                 },
                 account_Config: {},
                 projectVideoConfigList: [],
@@ -484,6 +637,8 @@
                     alarmPushWorkerId:[],
                     sortNum:'',
                     groupId:'',
+                    ip:'',
+                    nvrId:'',
                     aiFunctionType:0
                     // appSecret: '0a5836c68a7edabcc78e6a18f05bb317'
                 },
@@ -494,7 +649,13 @@
                 formRules:{
                     videoName:[
                         { required: true, message: this.$t('message.videoManage.required'), trigger: 'blur' }, // 必填
-                    ]
+                    ],
+                    ip:[
+                        { required: true, message: this.$t('message.videoManage.required'), trigger: 'blur' }, // 必填  
+                    ],
+                    nvrId:[
+                        { required: true, message: this.$t('message.videoManage.required'), trigger: 'blur' }, // 必填
+                    ],
                 },COMPANY:COMPANY,
                 accountList:[],
                 organizationID:'',
@@ -522,6 +683,87 @@
         },
         components: {cameraList,cameraListLc},
         methods: {
+            // nvr设备管理弹窗
+            nvrDeviceManage(){
+                this.nvrDevice = true
+                this.getvideoNvrList()
+            },
+            getvideoNvrList(){
+                let data = this.formInline
+                data.projectSn = this.projectSn
+                data.size=this.pageSize
+                data.current = this.pageNo, 
+                getvideoNvrApi(data).then((res)=>{
+                    this.tableData = res.result.records
+                    this.total = res.result.total
+                })
+            },
+            handleSizeChange(val) {
+                this.pageSize = val
+                this.getvideoNvrList()
+            },
+            handleCurrentChange(val) {
+                this.pageNo = val
+                this.getvideoNvrList()
+             },
+            onSearch(){
+                this.getvideoNvrList()
+            },
+            onAdd(){
+                this.addFormData = {}
+                this.addDevice = true,
+                this.nvrTitle = '新增nvr设备'
+                this.mode = 1
+            },
+            editBtn(val){
+                this.addFormData = val
+                this.addDevice = true,
+                this.nvrTitle = '编辑nvr设备'
+                this.mode = 2
+            },
+            deleteBtn(val){
+                this.$confirm('删除当前nvr设备,相关联的摄像头也将被删除,确认删除吗？, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+             }).then(() => {
+                delvideoNvrApi({id: val.id}).then(res=>{
+                  if(res.code == 200){
+                    this.$message({
+                       type: 'success',
+                        message: '删除成功!'
+                     });
+                     this.getvideoNvrList();
+                   }
+                 })
+                }).catch(() => {
+                  this.$message({
+                    type: 'info',
+                    message: '已取消删除'
+                  });          
+             })
+            },
+            addDeviceSubmit(){
+                let data = this.addFormData
+                data.projectSn = this.projectSn
+                if(this.mode == 1){
+                    addvideoNvrApi(data).then((res)=>{
+                        if(res.code == 200){
+                            this.$message.success('新增成功!')
+                            this.getvideoNvrList()
+                            this.addDevice = false
+                        }
+                    })
+                }else{
+                    editvideoNvrApi(data).then((res)=>{
+                        if(res.code == 200){
+                            this.$message.success('编辑成功!')
+                            this.getvideoNvrList()
+                            this.addDevice = false
+                        }
+                    })
+                }
+            },
             uploadThirdParty(){
                 sendVideoInfoApi({projectSn: this.projectSn}).then(res=>{
                     // console.log(res)
@@ -724,7 +966,10 @@
                     groupId:this.currentVideoTypeDetail.groupId,
                     sortNum:this.currentVideoTypeDetail.sortNum,
                     aiFunctionType:this.currentVideoTypeDetail.aiFunctionType,
+                    ip:this.currentVideoTypeDetail.ip,
+                    nvrId:this.currentVideoTypeDetail.nvrId,
                 }
+                console.log('传入的参数',params)
                 console.log(this.currentVideoTypeDetail.aiFunctionType);
                 if(this.currentVideoTypeDetail.alarmPushWorkerId&&this.currentVideoTypeDetail.alarmPushWorkerId.length>0){
                     params.alarmPushWorkerId=this.currentVideoTypeDetail.alarmPushWorkerId.join(',')