src/api/correlationEquipment/index.js

@@ -48,6 +48,29 @@ export function addVideoList(params) {
         params
     })
 }
+// 修改视频监控
+export function changeVideoList(params) {
+    return request({
+        url: '/safety/tbDeviceVideoInfo/update',
+        method: 'post',
+        params
+    })
+}
+// 删除视频监控  
+export function deleteVideo(params) {
+    return request({
+        url: '/safety/tbDeviceVideoInfo?' + params,
+        method: 'delete',
+    })
+}
+// 导入视频监控
+export function importVideoList(params) {
+    return request({
+        url: '/safety/tbDeviceVideoInfo/importData',
+        method: 'post',
+        params
+    })
+}
 // 新增智能感应
 export function addPerceptionList(params) {
     return request({

src/utils/publicMethod_lxy/validator.js

@@ -0,0 +1,29 @@
+// 表单校验准则
+
+// 是否为合法IP地址
+export function validateIP(rule, value,callback) {
+    if(value==''||value==undefined||value==null){
+      callback();
+    }else {
+      const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+      if ((!reg.test(value)) && value != '') {
+        callback(new Error('请输入正确的IP地址'));
+      } else {
+        callback();
+      }
+    }
+  }
+  // 经度
+  export function checkLon(rule, value, callback) {
+    if (value) {
+      value += ''
+      if (value.match(/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/)) {
+        callback()
+      } else {
+        callback(new Error('经度为-180~180,小数限7位!'))
+      }
+    } else {
+      callback()
+    }
+  }
+  

src/views/head.vue

@@ -20,7 +20,7 @@
         <div class="shu"></div>
         <!-- <el-menu-item index="6" route="/home">应用超市</el-menu-item>
         <div class="shu"></div> -->
-        <el-menu-item index="7" route="/home/systemManagement">系统管理</el-menu-item>
+        <el-menu-item index="7" route="/home/systemManagement/safeIndex">系统管理</el-menu-item>
         <div class="shu"></div>
       </el-menu>
       <div class="jingGuan">

src/views/systemManagement/correlationEquipment2/components/deleteVideo.vue

@@ -0,0 +1,104 @@
+<template>
+  <!-- 删除文件 -->
+  <el-dialog
+    class="dialog"
+    title="删除"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="500px"
+    @close="close"
+  >
+    <div class="main_text">确认删除该数据？</div>
+    <div class="form_btn" slot="footer">
+      <el-button @click="save_delete">确 定</el-button>
+      <el-button @click="close">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { deleteVideo } from "@/api/correlationEquipment";
+export default {
+  name: "DeleteVideo",
+  data() {
+    return {
+      visible: false,
+      data: {},
+      id: "",
+    };
+  },
+  methods: {
+    open(val) {
+      this.visible = true;
+      this.id = val[0].id;
+    },
+    save_delete() {
+      const params = `idList=${this.id}`;
+      deleteVideo(params).then((res) => {
+        console.log(res);
+        this.$message.success("删除成功");
+        this.$emit("refresh_video");
+        this.visible = false;
+      }).catch(err=>{
+        console.log(err);
+        this.$message.warning('删除失败')
+        this.$emit("refresh_video");
+        this.visible = false;
+      });
+    },
+    close() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+  background-image: url("~@/assets/companyFile/dialogBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 400px;
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #fff;
+      font-size: 18px;
+    }
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+    p {
+      font-size: 16px;
+      color: #fff;
+    }
+    .main_text {
+      width: 470px;
+      height: 280px;
+      color: #fff;
+      text-align: center;
+      line-height: 280px;
+      font-size: 35px;
+      font-weight: 500;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
+  }
+  .el-button {
+    width: 120px;
+    border: 1px solid #4a6072;
+    color: #fff;
+    border-radius: 0px !important;
+    background: #323f43;
+  }
+  .el-button:focus,
+  .el-button:hover {
+    color: #34e1b3;
+    background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+}
+</style>

src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue

@@ -31,7 +31,11 @@
         </el-form>
       </div>
       <div class="table_btn_list">
-        <el-button v-for="item in btn_list" :key="item.value" @click="open_video_dialog(item.value)">
+        <el-button
+          v-for="item in btn_list"
+          :key="item.value"
+          @click="open_video_dialog(item.value)"
+        >
           <i :class="`el-icon-${item.icon}`" />
           {{ item.label }}</el-button
         >
@@ -42,6 +46,7 @@
           :header-cell-style="table_header"
           :data="table_data"
           :highlight-current-row="true"
+          @selection-change="handle_video_change"
           height="336"
         >
           <el-table-column type="selection" width="55"> </el-table-column>
@@ -57,13 +62,13 @@
               <el-button
                 size="small"
                 class="operation"
-                @click="openDialog('2', scope.row)"
+                @click="open_video_dialog('5', scope.row)"
                 >编辑
               </el-button>
               <el-button
                 size="small"
                 class="operation"
-                @click="openDialog('5', scope.row)"
+                @click="open_video_dialog('6', scope.row)"
                 >详情
               </el-button>
             </template>
@@ -161,15 +166,19 @@
       </div>
     </div>
     <!-- 视频设备表单弹窗 -->
-    <VideoForm ref="videoForm"></VideoForm>
+    <VideoForm ref="videoForm" @refresh_video="refresh_video"></VideoForm>
+    <!-- 删除视频设备表单弹窗 -->
+    <DeleteVideo ref="deleteVideo" @refresh_video="refresh_video"></DeleteVideo>
   </div>
 </template>
 <script>
 import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
-import VideoForm from './videoForm'
+import VideoForm from "./videoForm";
+import DeleteVideo from "./deleteVideo";
 export default {
   components: {
-    VideoForm
+    VideoForm,
+    DeleteVideo,
   },
   data() {
     return {
@@ -205,6 +214,7 @@ export default {
         { prop: "deviceIp", label: "设备IP" },
         { prop: "orientationCn", label: "进出方向" },
       ],
+      handle_video: "",
       pageSize: 0,
       pageNum: 0,
       only_params: {},
@@ -216,7 +226,7 @@ export default {
   },
   methods: {
     obtain_table_data(data, params, flag) {
-      this.table_flag = flag
+      this.table_flag = flag;
       console.log("data_1", data);
       this.table_data = data.rows;
       this.total = data.total;
@@ -225,6 +235,13 @@ export default {
       this.only_params = params;
       console.log("params_1", params);
     },
+    // 刷新视频表格
+    refresh_video() {
+      getVideoList(this.only_params).then((res) => {
+        this.table_data = res.rows;
+        this.total = res.total;
+      });
+    },
     // 视频设备查询
     video_search() {
       this.only_params = Object.assign(this.only_params, this.search);
@@ -247,26 +264,46 @@ export default {
     },
     // 智能查询
     perception_search() {
-      this.only_params = Object.assign(this.only_params, this.search_p)
-      getPerceptionList(this.only_params).then(res=>{
+      this.only_params = Object.assign(this.only_params, this.search_p);
+      getPerceptionList(this.only_params).then((res) => {
         this.table_data = res.rows;
         this.total = res.total;
-      })
+      });
     },
     // 智能重置
     perception_reset() {
       // 查询项清空
-      this.search_p.deviceIp = ""
-      this.search_p.deviceName = ""
-      this.only_params = Object.assign(this.only_params, this.search_p)
-      getPerceptionList(this.only_params).then(res=>{
+      this.search_p.deviceIp = "";
+      this.search_p.deviceName = "";
+      this.only_params = Object.assign(this.only_params, this.search_p);
+      getPerceptionList(this.only_params).then((res) => {
         this.table_data = res.rows;
         this.total = res.total;
-      })
+      });
+    },
+    open_video_dialog(num, row) {
+      if (num === "1") {
+        // 新增视频设备
+        this.$refs.videoForm.open(num);
+      } else if (num === "2") {
+        // 删除视频设备
+        if (this.handle_video.length != 1) {
+          this.$message.warning("请选择一条表格数据");
+        } else {
+          this.$refs.deleteVideo.open(this.handle_video);
+        }
+      } else if (num === "5") {
+        // 修改视频设备
+        this.$refs.videoForm.open(num, row);
+      } else if (num === '6') {
+        // 详情视频设备
+        this.$refs.videoForm.open(num, row);
+      }
     },
-    open_video_dialog(num) {
-      // 打开视频设备表单
-      this.$refs.videoForm.open(num)
+    // 选择视频表格数据
+    handle_video_change(val) {
+      console.log("val_handle", val);
+      this.handle_video = val;
     },
     table_header({ row, rowIndex }) {
       console.log(row);
@@ -287,10 +324,10 @@ export default {
     handleCurrentChangePerception(val) {
       console.log(`当前页: ${val}`);
       this.only_params.pageNum = val;
-      getPerceptionList(this.only_params).then(res=>{
+      getPerceptionList(this.only_params).then((res) => {
         this.table_data = res.rows;
-      })
-    }
+      });
+    },
   },
 };
 </script>

src/views/systemManagement/correlationEquipment2/components/importVideo.vue

@@ -0,0 +1,12 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+</style>

src/views/systemManagement/correlationEquipment2/components/videoForm.vue

@@ -9,20 +9,20 @@
     width="970px"
   >
     <div class="form_body">
-      <el-form ref="form" :model="form" :rules="rules">
+      <el-form ref="form" :model="form" :rules="rules" :disabled="disabled">
         <el-form-item> <p>设备基础信息</p> </el-form-item>
         <el-form-item> </el-form-item>
         <el-form-item label="企业名称" prop="companyName">
           <el-select
-            ref="companySelect"
             v-model="form.companyName"
             placeholder="请选择企业"
+            @change="company_change"
           >
             <el-option
               v-for="item in form_list.company"
               :key="item.id"
               :label="item.companyName"
-              :value="item.id"
+              :value="item.companyName"
             >
             </el-option>
           </el-select>
@@ -34,30 +34,32 @@
         <el-form-item label="设备IP" prop="deviceIp">
           <el-input v-model="form.deviceIp"></el-input>
         </el-form-item>
-        <el-form-item label="设备大类" prop="deviceVideoParentType">
+        <el-form-item label="设备大类" prop="deviceVideoParentTypeCn">
           <el-select
-            v-model="form.deviceVideoParentType"
+            v-model="form.deviceVideoParentTypeCn"
             placeholder="请选择设备大类"
+            @change="parent_change"
           >
             <el-option
               v-for="item in form_list.parent_type"
               :key="item.dictValue"
               :label="item.dictLabel"
-              :value="item.dictValue"
+              :value="item.dictLabel"
             >
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="设备小类" prop="deviceVideoSubType">
+        <el-form-item label="设备小类" prop="deviceVideoSubTypeCn">
           <el-select
-            v-model="form.deviceVideoSubType"
+            v-model="form.deviceVideoSubTypeCn"
             placeholder="请选择设备小类"
+            @change="son_change"
           >
             <el-option
               v-for="item in form_list.son_type"
               :key="item.dictValue"
               :label="item.dictLabel"
-              :value="item.dictValue"
+              :value="item.dictLabel"
             >
             </el-option>
           </el-select>
@@ -102,13 +104,17 @@
         <el-form-item label="U3D高度" prop="u3dHeight">
           <el-input v-model="form.u3dHeight"></el-input>
         </el-form-item>
-        <el-form-item label="设备方位" prop="orientation">
-          <el-select v-model="form.orientation" placeholder="请选择设备方位">
+        <el-form-item label="设备方位" prop="orientationCn">
+          <el-select
+            v-model="form.orientationCn"
+            placeholder="请选择设备方位"
+            @change="orientation_change"
+          >
             <el-option
-              v-for="item in form_list.orientation_types"
+              v-for="item in form_list.orientation_type"
               :key="item.dictValue"
               :label="item.dictLabel"
-              :value="item.dictValue"
+              :value="item.dictLabel"
             >
             </el-option>
           </el-select>
@@ -138,24 +144,36 @@
         </el-form-item>
       </el-form>
     </div>
-    <div class="form_btn" slot="footer">
+    <div v-if="!disabled" class="form_btn" slot="footer">
       <el-button @click="save">保 存</el-button>
       <el-button @click="close">取 消</el-button>
     </div>
   </el-dialog>
 </template>
 <script>
+import {
+  commonDict,
+  getCompanyList,
+  addVideoList,
+  changeVideoList,
+} from "@/api/correlationEquipment";
+// import { validateIP } from "@/utils/publicMethod_lxy/validator";
+
 export default {
+  name: "VideoForm",
   data() {
     return {
       visible: false,
       title: "新建",
       form: {
+        companyId: "",
         companyName: "",
         deviceName: "",
         deviceIp: "",
         deviceVideoParentType: "",
+        deviceVideoParentTypeCn: "",
         deviceVideoSubType: "",
+        deviceVideoSubTypeCn: "",
         account: "",
         password: "",
         gbsChannelNo: "",
@@ -169,6 +187,7 @@ export default {
         deviceHeight: "",
         u3dHeight: "",
         orientation: "",
+        orientationCn: "",
         deviceAddress: "",
         deviceBrand: "",
         manufactor: "",
@@ -181,8 +200,10 @@ export default {
         company: [],
         parent_type: [],
         son_type: [],
-        orientation_types: [],
+        orientation_type: [],
       },
+      num: "", // 判断是新增修改等何种形式进入表单
+      disabled: false, // 详情时表单禁选
       rules: {
         companyName: [
           { required: true, message: "请选择企业", trigger: "change" },
@@ -191,25 +212,69 @@ export default {
           { required: true, message: "请填写设备名称", trigger: "blur" },
         ],
         deviceIp: [
-          { required: true, message: "请填写设备ip", trigger: "blur" },
+          {
+            required: true,
+            message: "请填写正确的设备ip",
+            pattern:
+              /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
+            trigger: "blur",
+          },
         ],
-        deviceVideoParentType: [
+        deviceVideoParentTypeCn: [
           { required: true, message: "请选择设备大类", trigger: "change" },
         ],
-        deviceVideoSubType: [
+        deviceVideoSubTypeCn: [
           { required: true, message: "请选择设备小类", trigger: "change" },
         ],
         gbsChannelNo: [
-          { required: true, message: "请输入通道编码", trigger: "blur" },
+          {
+            required: true,
+            message: "请输入20位通道编码",
+            pattern: /^[0-9]{20}$/,
+            trigger: "blur",
+          },
         ],
         gbsNvrNo: [
-          { required: true, message: "请输入NVR编码", trigger: "blur" },
+          {
+            required: true,
+            message: "请输入20位NVR编码",
+            pattern: /^[0-9]{20}$/,
+            trigger: "blur",
+          },
         ],
         longitude: [
-          { required: true, message: "请输入设备经度", trigger: "blur" },
+          {
+            required: true,
+            pattern:
+              /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/, // eslint-disable-line
+            message: "请输入设备经度 -180~180(保留小数点后六位)",
+            trigger: "blur",
+          },
         ],
         latitude: [
-          { required: true, message: "请输入设备经度", trigger: "blur" },
+          {
+            required: true,
+            pattern:
+              /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/, // eslint-disable-line
+            message: "请输入设备纬度 -90~90(保留小数点后六位）",
+            trigger: "blur",
+          },
+        ],
+        u3dLongitude: [
+          {
+            pattern:
+              /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/, // eslint-disable-line
+            message: "请输入u3d经度 -180~180(保留小数点后六位)",
+            trigger: "blur",
+          },
+        ],
+        u3dLatitude: [
+          {
+            pattern:
+              /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/, // eslint-disable-line
+            message: "请输入u3d设备纬度 -90~90(保留小数点后六位）",
+            trigger: "blur",
+          },
         ],
         deviceAddress: [
           { required: true, message: "请输入安装位置", trigger: "blur" },
@@ -218,15 +283,121 @@ export default {
     };
   },
   methods: {
-    open() {
+    async open(num, row) {
       this.visible = true;
+      this.num = num;
+      await this.obtain_select_list(); // 请求下拉
+      if (num === "1") {
+        this.title = "新建";
+        this.disabled = false;
+        this.form = {
+          companyId: "",
+          companyName: "",
+          deviceName: "",
+          deviceIp: "",
+          deviceVideoParentType: "",
+          deviceVideoParentTypeCn: "",
+          deviceVideoSubType: "",
+          deviceVideoSubTypeCn: "",
+          account: "",
+          password: "",
+          gbsChannelNo: "",
+          gbsNvrNo: "",
+          channelNo: "",
+          rtspAddress: "",
+          longitude: "",
+          latitude: "",
+          u3dLongitude: "",
+          u3dLatitude: "",
+          deviceHeight: "",
+          u3dHeight: "",
+          orientation: "",
+          orientationCn: "",
+          deviceAddress: "",
+          deviceBrand: "",
+          manufactor: "",
+          manufactorPhone: "",
+          deviceSn: "",
+          deviceMac: "",
+          devicePort: "",
+        };
+      } else if (num === "5") {
+        this.title = "修改";
+        this.form = Object.assign(this.form, row);
+        this.disabled = false;
+        console.log("trrr", this.form);
+      } else if (num ===  '6') {
+        this.title = "详情"
+        this.form = Object.assign(this.form, row);
+        this.disabled = true;
+      }
+    },
+    // 请求本表单下拉list
+    obtain_select_list() {
+      // 请求企业名称下拉
+      getCompanyList().then((res) => {
+        this.form_list.company = res.data;
+        console.log("this.form_list.company", this.form_list.company);
+      });
+      // 请求设备大类下拉
+      commonDict({ dictType: "device_perception_sub_type" }).then((res) => {
+        this.form_list.parent_type = res.data;
+      });
+      // 请求设备小类下拉
+      commonDict({ dictType: "device_video_sub_type" }).then((res) => {
+        this.form_list.son_type = res.data;
+      });
+      // 请求设备方位下拉
+      commonDict({ dictType: "orientation" }).then((res) => {
+        this.form_list.orientation_type = res.data;
+      });
+    },
+    // 选中企业下拉
+    company_change(val) {
+      this.form.companyId = this.form_list.company.find(
+        (item) => item.companyName === val
+      ).id;
+    },
+    // 选中大类下拉
+    parent_change(val) {
+      this.form.deviceVideoParentType = this.form_list.parent_type.find(
+        (item) => item.dictLabel === val
+      ).dictValue;
+    },
+    // 选中小类下拉
+    son_change(val) {
+      this.form.deviceVideoSubType = this.form_list.son_type.find(
+        (item) => item.dictLabel === val
+      ).dictValue;
+    },
+    // 选中方向下拉
+    orientation_change(val) {
+      this.form.orientation = this.form_list.orientation_type.find(
+        (item) => item.dictLabel === val
+      ).dictValue;
     },
     save() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
-          console.log('submit');
+          console.log("this.form_a", this.form); // 传给后台的表单数据
+          if (this.num === "1") {
+            addVideoList(this.form).then((res) => {
+              this.visible = false;
+              console.log(res);
+              this.$message.success("新建数据成功");
+              // 新建数据成功后，表格刷新
+              this.$emit("refresh_video");
+            });
+          } else if (this.num === "5") {
+            changeVideoList(this.form).then((res) => {
+              this.visible = false;
+              console.log(res);
+              this.$message.success("修改数据成功");
+              this.$emit("refresh_video");
+            });
+          }
         } else {
-          this.$message.warning('请填入必填项')
+          this.$message.warning("请填入必填项");
           return false;
         }
       });

src/views/systemManagement/safeIndex/index.vue

@@ -368,7 +368,7 @@ export default {
   }
 }
 /deep/.el-input__inner {
-  width: 3vw;
+  width: 3.5vw;
   border-radius: 0px;
   font-size: 16px;
   background: #3c4b4a;
@@ -379,7 +379,7 @@ export default {
     .el-form-item__content {
       .el-input {
         .el-input__inner {
-          width: 3vw;
+          width: 3.5vw;
           border: 0px;
           border-radius: 0px;
           background: rgba(165, 42, 42, 0);