From 94d0963b91d0287a7196881e684453b29ae82f17 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Mon, 8 May 2023 08:44:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E8=81=94=E8=AE=BE=E5=A4=87=E8=81=94?=
 =?UTF-8?q?=E8=B0=832?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/correlationEquipment/index.js         |  42 +-
 src/assets/js/eventBus.js                     |   3 +
 .../components/companyDataDialog.vue          |  19 +-
 .../systemManagement/companyList/index.vue    |  39 +-
 ...{addDIalog.vue => addPerceptionDialog.vue} |  90 ++--
 .../components/addVideoDialog.vue             | 451 ++++++++++++++++++
 .../components/deriveDialog.vue               |   1 +
 .../components/equipmentTable.vue             | 254 ++++++++--
 .../components/searchBox.vue                  | 117 ++++-
 .../components/uploadDialog.vue               |  48 +-
 .../correlationEquipment/index.vue            | 179 +++++--
 src/views/systemManagement/index.vue          |   2 +-
 12 files changed, 1093 insertions(+), 152 deletions(-)
 create mode 100644 src/assets/js/eventBus.js
 rename src/views/systemManagement/correlationEquipment/components/{addDIalog.vue => addPerceptionDialog.vue} (80%)
 create mode 100644 src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue

diff --git a/src/api/correlationEquipment/index.js b/src/api/correlationEquipment/index.js
index b4d2927..00a86a1 100644
--- a/src/api/correlationEquipment/index.js
+++ b/src/api/correlationEquipment/index.js
@@ -1,6 +1,14 @@
 // 系统管理模块接口
 import request from '@/utils/request'
-// 字典表查询
+// 字典表查询 
+export function commonDict(params) {
+    return request({
+        url: '/common/dict/list',
+        method: 'get',
+        params
+    })
+}
+// 企业名称树形数据
 export function getAllData(params) {
     return request({
         url: 'safety/tbAreacodeInfo/listAndVideo',
@@ -8,3 +16,35 @@ export function getAllData(params) {
         params
     })
 }
+// 右侧视频监控设备查询List
+export function getVideoList(params) {
+    return request({
+        url: '/safety/tbDeviceVideoInfo/list',
+        method: 'post',
+        params
+    })
+}
+// 右侧智能感知设备查询List
+export function getPerceptionList(params) {
+    return request({
+        url: '/safety/tbDevicePerceptionInfo/list',
+        method: 'post',
+        params
+    })
+}
+// 厂家查询 
+export function getCompanyList(params) {
+    return request({
+        url: 'safety/system/enterpriseList',
+        method: 'get',
+        params
+    })
+}
+// 新增视频监控
+export function addVideoList(params) {
+    return request({
+        url: '/safety/tbDeviceVideoInfo/insert',
+        method: 'get',
+        params
+    })
+}
\ No newline at end of file
diff --git a/src/assets/js/eventBus.js b/src/assets/js/eventBus.js
new file mode 100644
index 0000000..3e98d8c
--- /dev/null
+++ b/src/assets/js/eventBus.js
@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export default new Vue
\ No newline at end of file
diff --git a/src/views/systemManagement/companyList/components/companyDataDialog.vue b/src/views/systemManagement/companyList/components/companyDataDialog.vue
index 880e996..7bfcfe7 100644
--- a/src/views/systemManagement/companyList/components/companyDataDialog.vue
+++ b/src/views/systemManagement/companyList/components/companyDataDialog.vue
@@ -227,7 +227,7 @@
     </div>
     <div slot="footer" class="dialog-footer">
       <el-button @click="saveFormData">确 定</el-button>
-      <el-button>取 消</el-button>
+      <el-button @click="closeForm">取 消</el-button>
     </div>
   </el-dialog>
 </template>
@@ -294,6 +294,7 @@ export default {
       this.visible = true;
       if (num === 1) {
         this.dialogTitle = "新建";
+        this.form = {};
       } else if (num === 2) {
         this.dialogTitle = "查看档案";
       } else if (num === 3) {
@@ -372,9 +373,8 @@ export default {
     // 确定数据
     saveFormData() {
       const params = this.form;
-      console.log('this.form',this.form);
+      console.log("this.form", this.form);
       if (this.dialogTitle === "新建") {
-        console.log(1111111);
         postCompanyList(params).then((res) => {
           if (res.code === 200) {
             this.$message.success("新建成功");
@@ -397,6 +397,9 @@ export default {
       }
       this.$emit("back");
     },
+    closeForm() {
+      this.visible = false;
+    }
   },
 };
 </script>
@@ -493,7 +496,6 @@ export default {
   .jurisdiction {
     background: url("~@/assets/companyFile/242112.png") no-repeat !important;
     background-size: 100% 100% !important;
-    margin-top: px;
   }
   /* 为适应上传图片表单布局把企业工商表单拆分 */
   .commerceMessage_one {
@@ -541,11 +543,11 @@ export default {
     .el-form-item {
       width: 100%;
       .el-form-item__label {
-        width: 15%;
+        width: 14.5%;
       }
       .el-form-item__content {
         .el-input__inner {
-          width: 650px;
+          width: 760px;
         }
       }
       .el-checkbox-group {
@@ -567,8 +569,9 @@ export default {
       }
       .el-textarea {
         .el-textarea__inner {
-          max-height: 80px;
-          width: 650px;
+          height: 120px;
+          max-height: 120px;
+          width: 760px;
           border-radius: 0px;
           background: #3c4b4a;
           border: 0.5px dashed;
diff --git a/src/views/systemManagement/companyList/index.vue b/src/views/systemManagement/companyList/index.vue
index e71837d..e2ff6a5 100644
--- a/src/views/systemManagement/companyList/index.vue
+++ b/src/views/systemManagement/companyList/index.vue
@@ -33,7 +33,7 @@
             <ul>
               <li v-for="item in company_data" :key="item.id">
                 <img :src="item.picUrl" alt="" />
-                <span class="company_name"> {{ item.companyAddress }} </span>
+                <span class="company_name"> {{ item.companyName }} </span>
                 <div class="company_label">
                   <div
                     class="company_label_data"
@@ -43,15 +43,19 @@
                     {{ val }}
                   </div>
                 </div>
-                <span class="company_unit"> {{ item.companyName }}</span>
+                <span class="company_unit"> {{ item.companyAddress }}</span>
                 <!-- 遮罩层 -->
                 <div class="image_mask">
                   <div class="btn">
-                    <button class="check" @click="openDialog(2)">
+                    <button class="check" @click="jump()">
                       查看档案
                     </button>
-                    <button class="change" @click="openDialog(3, item)">编辑</button>
-                    <button class="clear" @click="openDialog(4,item)">删除</button>
+                    <button class="change" @click="openDialog(3, item)">
+                      编辑
+                    </button>
+                    <button class="clear" @click="openDialog(4, item)">
+                      删除
+                    </button>
                   </div>
                 </div>
               </li>
@@ -102,13 +106,13 @@ export default {
     this.getData();
   },
   methods: {
-    openDialog(num,item) {
+    openDialog(num, item) {
       if (num === 4) {
         // 打开删除弹窗
-        this.$refs.clearDialog.open(num,item);
+        this.$refs.clearDialog.open(num, item);
       } else {
         console.log(num);
-        this.$refs.companyDataDialog.open(num,item);
+        this.$refs.companyDataDialog.open(num, item);
       }
     },
     // 请求数据
@@ -153,7 +157,10 @@ export default {
     },
     // 弹窗关闭时刷新
     back() {
-      this.getData()
+      this.getData();
+    },
+    jump() {
+      this.$router.push('/home/archives') 
     }
   },
 };
@@ -261,6 +268,9 @@ export default {
         flex-wrap: wrap;
         padding-left: 0px;
         li {
+          display: flex;
+          justify-content: center;
+          align-items: center;
           margin-left: 2.5%;
           position: relative;
           list-style: none;
@@ -270,8 +280,8 @@ export default {
           border: 1px solid #fff;
           box-sizing: border-box;
           img {
-            margin-left: 1%;
-            margin-top: 1.2%;
+            margin-left: 0.5%;
+            margin-top: 0.6%;
             width: 99%;
             height: 98%;
           }
@@ -322,9 +332,10 @@ export default {
             /* 图片鼠标经过按钮 */
             .btn {
               margin-left: 25%;
-              margin-top: 30%;
+              margin-top: 25%;
               button {
-                height: 40px;
+                height: 60px;
+                padding: 20px;
                 margin-right: 25px;
                 font-size: 18px;
                 color: #fff;
@@ -377,7 +388,7 @@ export default {
     /* 底部分页展示区域 */
     .footer {
       .el-pagination {
-        margin-left: 59%;
+        margin-left: 50%;
         /deep/.el-pagination__total {
           color: #fff;
         }
diff --git a/src/views/systemManagement/correlationEquipment/components/addDIalog.vue b/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
similarity index 80%
rename from src/views/systemManagement/correlationEquipment/components/addDIalog.vue
rename to src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
index c3831ee..6b0ee52 100644
--- a/src/views/systemManagement/correlationEquipment/components/addDIalog.vue
+++ b/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
@@ -1,15 +1,28 @@
 <template>
-  <!-- 新建或者修改 -->
-  <el-dialog class="dialog" :title="dialogTitle" :visible.sync="visible" :close-on-click-modal="false" width="970px">
+  <!-- 智能感应新建或者修改 -->
+  <el-dialog
+    class="dialog"
+    :title="dialogTitle"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="970px"
+  >
     <div class="form_body">
       <!-- 设备基础信息表单 -->
       <div class="equipment_form">
         <p>设备基础信息</p>
         <el-form ref="equipmentForm" :model="equipmentForm">
           <el-form-item label="企业名称">
-            <el-select v-model="equipmentForm.company.villageName" placeholder="请选择企业">
-              <el-option v-for="item in equipmentForm.company" :key="item.villageCode" :label="item.villageName"
-                :value="item.villageCode">
+            <el-select
+              v-model="equipmentForm.company.villageName"
+              placeholder="请选择企业"
+            >
+              <el-option
+                v-for="item in equipmentForm.company"
+                :key="item.villageCode"
+                :label="item.villageName"
+                :value="item.villageCode"
+              >
               </el-option>
             </el-select>
           </el-form-item>
@@ -19,21 +32,23 @@
           <el-form-item label="设备IP">
             <el-input v-model="equipmentForm.ip"></el-input>
           </el-form-item>
-          <el-form-item label="设备大类">
-            <el-input v-model="equipmentForm.big"></el-input>
-          </el-form-item>
-          <el-form-item label="设备小类">
-            <el-input v-model="equipmentForm.small"></el-input>
-          </el-form-item>
           <el-form-item label="登录账号">
             <el-input v-model="equipmentForm.passUser"></el-input>
           </el-form-item>
           <el-form-item label="登录密码">
             <el-input v-model="equipmentForm.passNum"></el-input>
           </el-form-item>
+          <el-form-item label="设备大类">
+            <el-input v-model="equipmentForm.big"></el-input>
+          </el-form-item>
+          <el-form-item label="是否卡口">
+            <el-input v-model="equipmentForm.mouse"></el-input>
+          </el-form-item>
+          <el-form-item label="设备小类">
+            <el-input v-model="equipmentForm.small"></el-input>
+          </el-form-item>
         </el-form>
       </div>
-      <el-divider></el-divider>
       <!-- 视频通道信息表单 -->
       <div class="video_form">
         <p>视频通道信息</p>
@@ -52,7 +67,6 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-divider></el-divider>
       <!-- 设备位置信息表单 -->
       <div class="equipment_address_form">
         <p>设备位置信息</p>
@@ -76,9 +90,16 @@
             <el-input v-model="addressForm.U3D_hight"></el-input>
           </el-form-item>
           <el-form-item label="设备方位">
-            <el-select v-model="addressForm.equipment_orientation.orientationCode" placeholder="请选择设备方位">
-              <el-option v-for="item in addressForm.equipment_orientation" :key="item.orientationCode"
-                :label="item.orientation" :value="item.orientationCode">
+            <el-select
+              v-model="addressForm.equipment_orientation.orientationCode"
+              placeholder="请选择设备方位"
+            >
+              <el-option
+                v-for="item in addressForm.equipment_orientation"
+                :key="item.orientationCode"
+                :label="item.orientation"
+                :value="item.orientationCode"
+              >
               </el-option>
             </el-select>
           </el-form-item>
@@ -87,7 +108,6 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-divider></el-divider>
       <!-- 设备其他信息表单 -->
       <div class="other_form">
         <p>设备其他信息</p>
@@ -119,10 +139,10 @@
     </div>
   </el-dialog>
 </template>
-<script>
-import { debounce } from '@/utils/publicMethod_lxy/debounce.js'
+  <script>
+import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
 export default {
-  name: "addDialog",
+  name: "addPerceptionDialog",
   data() {
     return {
       visible: false,
@@ -130,6 +150,7 @@ export default {
       equipmentForm: {
         // 设备基础信息表单
         company: [],
+        mouse:'',
       },
       // 视频通道信息表单
       videoForm: {
@@ -165,12 +186,12 @@ export default {
       this.visible = true;
     },
     saveFormData: debounce(function () {
-      this.$message.success('232324234')
-    }, 300)
+      this.$message.success("232324234");
+    }, 300),
   },
 };
 </script>
-<style lang="less" scoped>
+  <style lang="less" scoped>
 /deep/.el-dialog {
   .el-dialog__title {
     color: #fff;
@@ -218,16 +239,30 @@ export default {
   .form_body {
     height: 600px;
     overflow-y: scroll;
+    p {
+      padding-top: 15px;
+      margin-left: 17px;
+      font-size: 16px;
+      color: #fff;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
+  }
+  .equipment_form,
+  .video_form,
+  .equipment_address_form,
+  .other_form {
+    background: url("~@/assets/companyFile/242112.png") no-repeat !important;
+    background-size: 100% 100% !important;
   }
 
   .form_body::-webkit-scrollbar {
-    width: 10px;
+    width: 6px;
     background-color: #5e666a;
     border-radius: 4px;
   }
 
   .form_body::-webkit-scrollbar-thumb {
-    width: 9px;
+    width: 5px;
     background-color: #3c4b4a;
     border-radius: 4px;
   }
@@ -242,7 +277,7 @@ export default {
     .el-form-item {
       /* 表单域名跟input浮动布局 */
       display: flex;
-      width: 30%;
+      width: 50%;
 
       .el-form-item__label {
         width: 40%;
@@ -252,8 +287,9 @@ export default {
 
       .el-form-item__content {
         .el-input__inner {
-          width: 170px;
+          width: 300px;
           border-radius: 0px;
+          border: 0.5px dashed;
           background: #3c4b4a;
           color: #fff;
         }
diff --git a/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue b/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue
new file mode 100644
index 0000000..07b7f95
--- /dev/null
+++ b/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue
@@ -0,0 +1,451 @@
+<template>
+  <!-- 视频监控新建或者修改 -->
+  <el-dialog
+    class="dialog"
+    :title="dialogTitle"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="970px"
+  >
+    <div class="form_body">
+      <!-- 设备基础信息表单 -->
+      <div class="equipment_form">
+        <p>设备基础信息</p>
+        <el-form
+          ref="equipmentForm"
+          :model="form"
+          :rules="rules"
+          :disabled="disabled"
+        >
+          <el-form-item label="企业名称" prop="companyName">
+            <el-select v-model="form.companyName" placeholder="请选择企业">
+              <el-option
+                v-for="item in form.company"
+                :key="item.id"
+                :label="item.companyName"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备名称" prop="deviceName">
+            <el-input v-model="form.deviceName"></el-input>
+          </el-form-item>
+          <el-form-item label="设备IP" prop="deviceIp">
+            <el-input v-model="form.deviceIp"></el-input>
+          </el-form-item>
+          <el-form-item label="设备大类" prop="deviceParentType">
+            <el-select
+              v-model="form.deviceParentType"
+              placeholder="请选择设备大类"
+            >
+              <el-option
+                v-for="item in form.perception_type"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备小类" prop="deviceVideoSubType">
+            <el-select
+              v-model="form.deviceVideoSubType"
+              placeholder="请选择设备小类"
+            >
+              <el-option
+                v-for="item in form.video_type"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="登录账号">
+            <el-input v-model="form.account"></el-input>
+          </el-form-item>
+          <el-form-item label="登录密码">
+            <el-input v-model="form.password"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 视频通道信息表单 -->
+      <div class="video_form">
+        <p>视频通道信息</p>
+        <el-form
+          ref="videoForm"
+          :model="form"
+          :rules="rules"
+          :disabled="disabled"
+        >
+          <el-form-item label="通道编码" prop="gbsChannelNo">
+            <el-input v-model="form.gbsChannelNo"></el-input>
+          </el-form-item>
+          <el-form-item label="NVR编码" prop="gbsNvrNo">
+            <el-input v-model="form.gbsNvrNo"></el-input>
+          </el-form-item>
+          <el-form-item label="通道号">
+            <el-input v-model="form.channelNo"></el-input>
+          </el-form-item>
+          <el-form-item label="RTSP流地址">
+            <el-input v-model="form.rtspAddress"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 设备位置信息表单 -->
+      <div class="equipment_address_form">
+        <p>设备位置信息</p>
+        <el-form
+          ref="addressForm"
+          :model="form"
+          :rules="rules"
+          :disabled="disabled"
+        >
+          <el-form-item label="设备经度">
+            <el-input v-model="form.longitude" prop="longitude"></el-input>
+          </el-form-item>
+          <el-form-item label="设备纬度">
+            <el-input v-model="form.latitude" prop="latitude"></el-input>
+          </el-form-item>
+          <el-form-item label="U3D经度">
+            <el-input v-model="form.u3dLongitude"></el-input>
+          </el-form-item>
+          <el-form-item label="U3D纬度">
+            <el-input v-model="form.u3dLatitude"></el-input>
+          </el-form-item>
+          <el-form-item label="设备高度">
+            <el-input v-model="form.deviceHeight"></el-input>
+          </el-form-item>
+          <el-form-item label="U3D高度">
+            <el-input v-model="form.u3dHeight"></el-input>
+          </el-form-item>
+          <el-form-item label="设备方位">
+            <el-select v-model="form.orientation" placeholder="请选择设备方位">
+              <el-option
+                v-for="item in form.orientation_types"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="安装位置" prop="deviceAddress">
+            <el-input v-model="form.deviceAddress"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 设备其他信息表单 -->
+      <div class="other_form">
+        <p>设备其他信息</p>
+        <el-form ref="otherForm" :model="form" :disabled="disabled">
+          <el-form-item label="设备品牌">
+            <el-input v-model="form.deviceBrand"></el-input>
+          </el-form-item>
+          <el-form-item label="设备厂家">
+            <el-input v-model="form.manufactor"></el-input>
+          </el-form-item>
+          <el-form-item label="厂家联系电话">
+            <el-input v-model="form.manufactorPhone"></el-input>
+          </el-form-item>
+          <el-form-item label="SN号">
+            <el-input v-model="form.deviceSn"></el-input>
+          </el-form-item>
+          <el-form-item label="设备MAC">
+            <el-input v-model="form.deviceMac"></el-input>
+          </el-form-item>
+          <el-form-item label="设备端口">
+            <el-input v-model="form.devicePort"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="saveFormData('equipmentForm','videoForm','addressForm','otherForm')">保 存</el-button>
+      <el-button>取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  commonDict,
+  getCompanyList,
+  addVideoList,
+} from "@/api/correlationEquipment";
+import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
+export default {
+  name: "addVideoDialog",
+  data() {
+    return {
+      visible: false,
+      dialogTitle: "新建",
+      form: {
+        // 设备基础信息表单
+        companyId: "",
+        companyName: "",
+        company: [],
+        deviceName: "",
+        deviceIp: "",
+        deviceVideoParentType: "",
+        deviceParentType: "", // 大类
+        video_type: [],
+        deviceVideoSubType: "", // 小类
+        perception_type: [],
+        account: "",
+        password: "",
+        // 视频通道信息表单
+        gbsChannelNo: "",
+        gbsNvrNo: "",
+        channelNo: "",
+        rtspAddress: "",
+        // 设备位置信息表单
+        longitude: "",
+        latitude: "",
+        u3dLongitude: "",
+        u3dLatitude: "",
+        deviceHeight: "",
+        u3dHeight: "",
+        orientation: "",
+        orientation_types: [],
+        deviceAddress: "",
+        // 设备其他信息表单
+        deviceBrand: "",
+        manufactor: "",
+        manufactorPhone: "",
+        deviceSn: "",
+        deviceMac: "",
+        devicePort: "",
+        isDoorwayVideo: "",
+        isShowVideo: "",
+      },
+      disabled: false, // 表单是否禁用
+      rules: {
+        companyName: [
+          { required: true, message: "请选择企业", trigger: "change" },
+        ],
+        deviceName: [
+          { required: true, message: "请填写设备名称", trigger: "blur" },
+        ],
+        deviceIp: [
+          { required: true, message: "请填写设备ip", trigger: "blur" },
+        ],
+        deviceParentType: [
+          { required: true, message: "请选择设备大类", trigger: "change" },
+        ],
+        deviceVideoSubType: [
+          { required: true, message: "请选择设备小类", trigger: "change" },
+        ],
+        gbsChannelNo: [
+          { required: true, message: "请输入通道编码", trigger: "blur" },
+        ],
+        gbsNvrNo: [
+          { required: true, message: "请输入NVR编码", trigger: "blur" },
+        ],
+        longitude: [
+          { required: true, message: "请输入设备经度", trigger: "blur" },
+        ],
+        latitude: [
+          { required: true, message: "请输入设备经度", trigger: "blur" },
+        ],
+        deviceAddress: [
+          { required: true, message: "请输入安装位置", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    const params = {
+      dictType: "device_video_sub_type",
+    };
+    commonDict(params).then((res) => {
+      this.form.video_type = res.data;
+    });
+    const val = {
+      dictType: "device_perception_sub_type",
+    };
+    commonDict(val).then((res) => {
+      this.form.perception_type = res.data;
+    });
+    const param_op = {
+      dictType: "orientation",
+    };
+    commonDict(param_op).then((res) => {
+      this.form.orientation_types = res.data;
+    });
+    getCompanyList().then((res) => {
+      this.form.company = res.data;
+    });
+  },
+  methods: {
+    open(num, row) {
+      this.visible = true;
+      if (num === "1") {
+        this.dialogTitle = "新建";
+      } else if (num === "2") {
+        this.dialogTitle = "编辑";
+        this.form = row;
+      } else if (num === "5") {
+        this.dialogTitle = "详情";
+        this.form = row;
+        this.disabled = true
+      }
+    },
+    saveFormData: debounce(function (formName1,formName2,formName3) {
+      this.$refs[formName1].validate((valid1) => {
+        console.log('valid1',valid1);
+        if (valid1) {
+          this.$message.warning("请填入必填项");
+        } else {
+          return false;
+        }
+      }); // 设备基础必填验证
+      this.$refs[formName2].validate((valid2) => {
+        console.log('valid2',valid2);
+        if (valid2) {
+          this.$message.warning("请填入必填项");
+        } else {
+          return false;
+        }
+      }); // 视频通道信息必填验证
+      this.$refs[formName3].validate((valid3) => {
+        console.log('valid3',valid3);
+        if (valid3) {
+          this.$message.warning("请填入必填项");
+        } else {
+          return false;
+        }
+      }); // 视频通道信息必填验证
+      delete this.form.company;
+      delete this.form.video_type;
+      delete this.form.perception_type;
+      delete this.form.orientation_types;
+      const params = this.form;
+      console.log("this.form", this.form);
+      if (this.dialogTitle === "新建") {
+        addVideoList(params).then((res) => {
+          console.log("res78", res);
+          if (res.code === 200) {
+            this.visible = false;
+          } else {
+            this.$message.warning("新建失败");
+          }
+        });
+      }
+    }, 300),
+  },
+};
+</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: 720px;
+
+  /* 关闭弹窗叉号 */
+  .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;
+    }
+  }
+
+  .el-button {
+    width: 70px;
+    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;
+  }
+
+  .form_body {
+    height: 600px;
+    overflow-y: scroll;
+    p {
+      padding-top: 15px;
+      margin-left: 17px;
+      font-size: 16px;
+      color: #fff;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
+  }
+  .equipment_form,
+  .video_form,
+  .equipment_address_form,
+  .other_form {
+    background: url("~@/assets/companyFile/242112.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+
+  .form_body::-webkit-scrollbar {
+    width: 6px;
+    background-color: #5e666a;
+    border-radius: 4px;
+  }
+
+  .form_body::-webkit-scrollbar-thumb {
+    width: 5px;
+    background-color: #3c4b4a;
+    border-radius: 4px;
+  }
+
+  .el-form {
+    /* 表单内容浮动布局，多行多列表单 */
+    width: 900px !important;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .el-form-item {
+      /* 表单域名跟input浮动布局 */
+      display: flex;
+      width: 50%;
+
+      .el-form-item__label {
+        width: 40%;
+        text-align: center;
+        color: #fff;
+      }
+
+      .el-form-item__content {
+        .el-input__inner {
+          width: 300px;
+          border-radius: 0px;
+          border: 0.5px dashed;
+          background: #3c4b4a;
+          color: #fff;
+        }
+
+        /* 查询框点击颜色变化 */
+        .el-input__inner:focus,
+        .el-input__inner:hover {
+          border-color: #1b3736;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemManagement/correlationEquipment/components/deriveDialog.vue b/src/views/systemManagement/correlationEquipment/components/deriveDialog.vue
index b11f153..2c40e90 100644
--- a/src/views/systemManagement/correlationEquipment/components/deriveDialog.vue
+++ b/src/views/systemManagement/correlationEquipment/components/deriveDialog.vue
@@ -39,6 +39,7 @@ export default {
 /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%;
diff --git a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
index efa8a30..6381174 100644
--- a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
@@ -1,9 +1,39 @@
 <template>
   <!-- 设备表格 -->
   <div class="equipment_data">
-    <p>智能感知设备列表</p>
+    <p>{{ table_title }}</p>
     <!-- 查询表 -->
-    <div class="equipment_data_search">
+    <div v-if="display_search" class="equipment_data_search">
+      <el-form :inline="true" :model="search" class="search">
+        <el-form-item>
+          <el-input
+            v-model="search.equipemnt"
+            placeholder="输入设备名称搜索"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="search.channel_code"
+              placeholder="输入通道国际编码搜索"
+            ></el-input>
+          </el-form-item>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="search.equipemnt_ip"
+            placeholder="输入设备IP搜索"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="onSubmitVideo">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="resetVideo">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div v-else class="equipment_data_search">
       <el-form :inline="true" :model="search" class="search">
         <el-form-item>
           <el-input
@@ -23,7 +53,7 @@
           <el-button @click="onSubmit">搜索</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button @click="onSubmit">重置</el-button>
+          <el-button @click="reset">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -43,8 +73,7 @@
       <el-table
         :cell-style="{ background: 'revert', 'text-align': 'center' }"
         :header-cell-style="table_header"
-        :data="tableData"
-        height="380"
+        :data="pushTableData"
         :highlight-current-row="true"
       >
         <el-table-column type="selection" width="55"> </el-table-column>
@@ -53,17 +82,21 @@
           :key="item.prop"
           :prop="item.prop"
           :label="item.label"
+          :width="item.width"
         ></el-table-column>
         <el-table-column prop="operation" label="操作">
           <template slot-scope="scope">
-            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+            <el-button
+              size="small"
+              class="operation"
+              @click="openDialog('2', scope.row)"
               >编辑
             </el-button>
             <el-button
               size="small"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
-              >删除
+              class="operation"
+              @click="openDialog('5', scope.row)"
+              >详情
             </el-button>
           </template>
         </el-table-column>
@@ -72,37 +105,47 @@
     <div class="equipment_data_pagination">
       <el-pagination
         :background="true"
-        @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        :current-page="currentPage4"
         :page-sizes="[4]"
         :page-size="100"
         layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
+        :total="pushTableData.length"
       >
       </el-pagination>
     </div>
-    <AddDialog ref="addDialog"></AddDialog>
+    <AddVideoDialog ref="addVideoDialog"></AddVideoDialog>
+    <AddPerceptionDialog ref="addPerceptionDialog"></AddPerceptionDialog>
     <UploadDialog ref="uploadDialog"></UploadDialog>
     <DeriveDialog ref="deriveDialog"></DeriveDialog>
   </div>
 </template>
 <script>
-import AddDialog from "./addDIalog";
+import AddVideoDialog from "./addVideoDialog";
+import AddPerceptionDialog from "./addPerceptionDialog";
 import UploadDialog from "./uploadDialog";
 import DeriveDialog from "./deriveDialog";
+import bus from "@/assets/js/eventBus.js";
+import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
 export default {
   name: "EquipmentTable",
   components: {
-    AddDialog,
+    AddPerceptionDialog,
+    AddVideoDialog,
     UploadDialog,
     DeriveDialog,
   },
+  props: {
+    pushTableData: [],
+  },
   data() {
     return {
+      table_title: "视频监控设备列表", // 表格主题
+      display_search: true, // 判断展示对应查询项
       search: {
         equipment: "",
         ip: "",
+        channel_code: "",
+        equipemnt_ip: "",
       },
       btnList: [
         { value: "1", label: "新增", icon: "plus" },
@@ -110,24 +153,135 @@ export default {
         { value: "3", label: "导入", icon: "bottom-right" },
         { value: "4", label: "导出", icon: "top-left" },
       ],
-      tableColumn: [
-        { prop: "villageName", label: "设备名称" },
-        { prop: "passTimeCn", label: "设备类型" },
-        { prop: "deviceAddress", label: "设备IP" },
-        { prop: "cameraIp", label: "设备经度" },
-        { prop: "imageTypeCn", label: "设备维度" },
-        { prop: "imageTypeC", label: "进出方向" },
+      tableColumn: [],
+      tableData: [],
+      // 视频表头
+      tableColumn_video: [
+        { prop: "gbsChannelNo", label: "通道国际编码", width: "200" },
+        { prop: "gbsNvrNo", label: "NVR设备编码", width: "200" },
+        { prop: "deviceName", label: "设备名称", width: "270" },
+        { prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" },
+        { prop: "deviceIp", label: "设备IP" },
+        // { prop: "deviceBrand", label: "设备品牌" },
+        // { prop: "longitude", label: "设备经度" },
+        // { prop: "latitude", label: "设备维度" },
+      ],
+      // 智能表头
+      tableColumn_preception: [
+        { prop: "deviceName", label: "设备名称",width: "270" },
+        { prop: "devicePerceptionParentTypeCn", label: "设备类型" },
+        { prop: "deviceIp", label: "设备IP" },
+        // { prop: "longitude", label: "设备经度" },
+        // { prop: "latitude", label: "设备维度" },
+        { prop: "orientationCn", label: "进出方向" },
       ],
       total: 0, // 信息总数
     };
   },
+  created() {
+    this.tableColumn = this.tableColumn_video; // 初始加载为视频监控表
+  },
+  mounted() {
+    bus.$on("send", (data) => {
+      this.table_title = data.title;
+      if (this.table_title === "视频监控设备列表") {
+        this.display_search = true;
+        this.tableColumn = this.tableColumn_video;
+      } else if (this.table_title === "智能感知设备列表") {
+        this.display_search = false;
+        this.tableColumn = this.tableColumn_preception;
+      }
+      this.pushTableData = data.pushTableData;
+    });
+  },
   methods: {
-    openDialog(num) {
+    // 智能搜索
+    onSubmit() {
+      const val = {
+        pageSize: 4,
+        pageNum: 1,
+        deviceIp: this.search.ip,
+        deviceName: this.search.equipment,
+      };
+      getPerceptionList(val).then((res) => {
+        if (res.code === 200) {
+          // res.row传给右下方表格数据
+          this.pushTableData = res.rows;
+        } else {
+          this.$message.warning("查询智能感知设备列表失败");
+        }
+      });
+    },
+    reset() {
+      // 重置
+      (this.search.equipment = ""), (this.search.ip = "");
+      const val = {
+        pageSize: 4,
+        pageNum: 1,
+      };
+      getPerceptionList(val).then((res) => {
+        if (res.code === 200) {
+          // res.row传给右下方表格数据
+          this.pushTableData = res.rows;
+        } else {
+          this.$message.warning("查询智能感知设备列表失败");
+        }
+      });
+    },
+    // 视频搜索
+    onSubmitVideo() {
+      const val = {
+        pageSize: 4,
+        pageNum: 1,
+        gbsChannelNo: this.search.channel_code,
+        deviceIp: this.search.equipemnt_ip,
+        deviceName: this.search.equipment,
+      };
+      getVideoList(val).then((res) => {
+        if (res.code === 200) {
+          // res.row传给右下方表格数据
+          this.pushTableData = res.rows;
+        } else {
+          this.$message.warning("查询视频监控设备列表失败");
+        }
+      });
+    },
+    resetVideo() {
+      // 重置
+      (this.search.channel_code = ""),
+        (this.search.equipemnt_ip = ""),
+        (this.search.equipment = "");
+      const val = {
+        pageSize: 4,
+        pageNum: 1,
+      };
+      getVideoList(val).then((res) => {
+        if (res.code === 200) {
+          // res.row传给右下方表格数据
+          this.pushTableData = res.rows;
+        } else {
+          this.$message.warning("查询视频监控设备列表失败");
+        }
+      });
+    },
+    openDialog(num, row) {
       console.log(num, "num");
       if (num === "1") {
         // 新增弹窗
         console.log(num, "num");
-        this.$refs.addDialog.open();
+        if (this.table_title === "视频监控设备列表") {
+          this.$refs.addVideoDialog.open(num);
+        } else if (this.table_title === "智能感知设备列表") {
+          this.$refs.addPerceptionDialog.open(num);
+        }
+      } else if (num === "2") {
+        // 编辑弹窗
+        console.log("rowww", row);
+        if (this.table_title === "视频监控设备列表") {
+          this.$refs.addVideoDialog.open(num, row);
+        } else if (this.table_title === "智能感知设备列表") {
+          this.$refs.addPerceptionDialog.open(num,row);
+        }
       } else if (num === "3") {
         // 导入弹窗
         this.$refs.uploadDialog.open();
@@ -135,6 +289,15 @@ export default {
         // 导出弹窗
         this.$refs.deriveDialog.open();
       }
+      else if (num === "5") {
+        // 编辑弹窗
+        console.log("rowww", row);
+        if (this.table_title === "视频监控设备列表") {
+          this.$refs.addVideoDialog.open(num, row);
+        } else if (this.table_title === "智能感知设备列表") {
+          this.$refs.addPerceptionDialog.open(num,row);
+        }
+      }
     },
     table_header({ row, rowIndex }) {
       console.log(row);
@@ -144,6 +307,7 @@ export default {
         color: "#fff",
       };
     },
+    handleCurrentChange() {},
   },
 };
 </script>
@@ -151,6 +315,7 @@ export default {
 .equipment_data {
   p {
     color: #fff;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
     margin-left: 10px;
   }
 
@@ -187,22 +352,6 @@ export default {
       color: #fff;
       border-radius: 0px !important;
       background: #323f43;
-      // .el-icon-add {
-      //   background: url("~@/assets/companyFile/addicon.png") center no-repeat;
-      //   font-size: 14px;
-      // }
-      // .el-icon-delete {
-      //   background: url("~@/assets/companyFile/deleteicon.png") center no-repeat;
-      //   font-size: 14px;
-      // }
-      // .el-icon-up {
-      //   background: url("~@/assets/companyFile/upicon.png") center no-repeat;
-      //   font-size: 14px;
-      // }
-      // .el-icon-down {
-      //   background: url("~@/assets/companyFile/downicon.png") center no-repeat;
-      //   font-size: 14px;
-      // }
     }
     .el-button:focus,
     .el-button:hover {
@@ -225,6 +374,7 @@ export default {
     }
 
     /deep/.el-table {
+      height: 35vh;
       thead {
         text-align: center;
         color: #fff;
@@ -244,6 +394,9 @@ export default {
           background-color: transparent;
         }
       }
+      tr {
+        background: #233438;
+      }
     }
 
     .el-table::before {
@@ -253,6 +406,22 @@ export default {
       width: 100%;
       height: 0px;
     }
+    /deep/.el-button.operation {
+      width: 40px;
+      height: 30px;
+      background-color: rgb(35 52 56);
+      border: 0px;
+      color: #fff;
+    }
+    /deep/.el-button.operation:hover,
+    .el-button.operation:focus {
+      width: 40px;
+      height: 30px;
+      background-color: rgb(35 52 56);
+      border: 0px;
+      color: #fff;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
   }
 
   .el-pagination {
@@ -281,6 +450,11 @@ export default {
       background: #3c4b4a;
       color: #fff;
     }
+    /deep/ .el-pager {
+      li {
+        background: #3c4b4a !important;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/correlationEquipment/components/searchBox.vue b/src/views/systemManagement/correlationEquipment/components/searchBox.vue
index a551ad1..0324a11 100644
--- a/src/views/systemManagement/correlationEquipment/components/searchBox.vue
+++ b/src/views/systemManagement/correlationEquipment/components/searchBox.vue
@@ -5,29 +5,81 @@
       <div class="searchBox_img_top">
         <img :src="searchBoxData.src" alt="" />
       </div>
-      <span>视频监控系统</span>
+      <span>{{ searchBoxData.img_text }}</span>
     </div>
-    <ul>
-      <li
+    <el-checkbox-group v-model="searchBoxData.company_types">
+      <el-checkbox
         class="searchBox_btn"
         v-for="item in searchBoxData.btnList"
         :key="item.value"
+        @change="sendClearList(item.type, item.value)"
+        :label="item.name"
+        name="type"
       >
-        <el-button> {{ item.name }} </el-button>
-      </li>
-    </ul>
+        {{ item.name }}
+      </el-checkbox>
+    </el-checkbox-group>
   </div>
 </template>
 <script>
+import bus from "@/assets/js/eventBus.js";
+import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
 export default {
   name: "searchBox",
   props: {
     searchBoxData: {},
   },
   data() {
-    return {};
+    return {
+      pushValue: {
+        title: "",
+        pushTableData: [],
+      },
+    };
   },
   created() {},
+  methods: {
+    async sendClearList(item, value) {
+      this.$emit("clearList"); // 先执行清空邻复选框
+      // 切换表格标题
+      if (item === "1") {
+        this.pushValue.title = "视频监控设备列表";
+        // 根据企业标签查询视频数据
+        const val = {
+          pageSize: 4,
+          pageNum: 1,
+          deviceVideoSubType: value,
+        };
+        await getVideoList(val).then((res) => {
+          if (res.code === 200) {
+            console.log("resVideoList1", res.rows);
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          } else {
+            this.$message.warning("查询视频监控设备列表失败");
+          }
+        });
+      } else if (item === "2") {
+        this.pushValue.title = "智能感知设备列表";
+        const val = {
+          pageSize: 4,
+          pageNum: 1,
+          devicePerceptionSubType: value,
+        };
+        await getPerceptionList(val).then((res) => {
+          if (res.code === 200) {
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          } else {
+            this.$message.warning("查询智能感知设备列表失败");
+          }
+        });
+      }
+      bus.$emit("send", this.pushValue);
+      console.log("value", value);
+      // deviceVideoSubType
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -59,30 +111,55 @@ export default {
       margin-top: 7%;
     }
   }
-  ul {
+  /deep/.el-checkbox-group {
     width: 70%;
     overflow: hidden;
     display: flex;
     justify-content: space-between;
     flex-flow: wrap;
-    padding: 0px 0px 0px 10px;
-  }
-  .searchBox_btn {
-    list-style: none;
-    width: 30%;
-    .el-button {
-      width: 100%;
+    padding: 15px 0px 0px 10px;
+    .el-checkbox {
+      width: 30%;
+      height: 4vh;
+      text-align: center;
+      line-height: 4vh;
       border: 1px solid #4a6072;
       color: #fff;
       border-radius: 0px !important;
       background: #323f43;
+      margin-right: 0px;
+      .el-checkbox__label {
+        color: #fff;
+        padding-left: 0px;
+      }
+    }
+    .el-checkbox.is-checked {
+      background: #495461;
+      border-radius: 0px;
+      border: 1px solid;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
     }
-    .el-button:focus,
-    .el-button:hover {
-      color: #34e1b3;
-      background: url("~@/assets/companyFile/891771.png") no-repeat !important;
-      background-size: 100% 100% !important;
+    .el-checkbox__inner {
+      display: none;
     }
+    // .searchBox_btn {
+    //   list-style: none;
+    //   width: 30%;
+    //   .el-button {
+    //     width: 100%;
+    //     border: 1px solid #4a6072;
+    //     color: #fff;
+    //     border-radius: 0px !important;
+    //     background: #323f43;
+    //   }
+    //   .el-button:focus,
+    //   .el-button:hover {
+    //     color: #34e1b3;
+    //     text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    //     background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+    //     background-size: 100% 100% !important;
+    //   }
+    // }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/correlationEquipment/components/uploadDialog.vue b/src/views/systemManagement/correlationEquipment/components/uploadDialog.vue
index 1e93a68..20c6b20 100644
--- a/src/views/systemManagement/correlationEquipment/components/uploadDialog.vue
+++ b/src/views/systemManagement/correlationEquipment/components/uploadDialog.vue
@@ -7,7 +7,28 @@
     :close-on-click-modal="false"
     width="500px"
   >
-    123
+    <div class="up_main">
+      <el-upload
+        class="upload-demo"
+        action="https://jsonplaceholder.typicode.com/posts/"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        :before-remove="beforeRemove"
+        multiple
+        :limit="1"
+        :on-exceed="handleExceed"
+        :file-list="fileList"
+      >
+        <div class="up_btn">
+          <p slot="tip">
+          上传文档:
+        </p>
+        <el-button icon="el-icon-folder-opened">点击上传</el-button>
+        <p slot="tip">模板下载</p>
+        </div>
+        <p slot="tip">支持文件类型：.xlsx 格式</p>
+      </el-upload>
+    </div>
     <div slot="footer" class="dialog-footer">
       <el-button @click="confrim">确 定</el-button>
       <el-button>取 消</el-button>
@@ -15,7 +36,7 @@
   </el-dialog>
 </template>
 <script>
-import {debounce} from '@/utils/publicMethod_lxy/debounce.js'
+import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
 export default {
   name: "UploadDialog",
   data() {
@@ -27,9 +48,9 @@ export default {
     open() {
       this.visible = true;
     },
-    confrim:debounce(function() {
-        this.$message.success('232324234')
-    },300)
+    confrim: debounce(function () {
+      this.$message.success("232324234");
+    }, 300),
   },
 };
 </script>
@@ -37,6 +58,7 @@ export default {
 /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%;
@@ -57,9 +79,23 @@ export default {
       font-size: 16px;
       color: #fff;
     }
+    .up_main {
+      width: 100%;
+      height: 24vh;
+      background-image: url("~@/assets/companyFile/27812.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .up_btn {
+        width: 400px;
+        display: flex;
+      }
+    }
   }
   .el-button {
-    width: 70px;
+    width: 120px;
     border: 1px solid #4a6072;
     color: #fff;
     border-radius: 0px !important;
diff --git a/src/views/systemManagement/correlationEquipment/index.vue b/src/views/systemManagement/correlationEquipment/index.vue
index 29fa79c..f81fd2e 100644
--- a/src/views/systemManagement/correlationEquipment/index.vue
+++ b/src/views/systemManagement/correlationEquipment/index.vue
@@ -21,20 +21,27 @@
                 v-model="searchCompany"
               >
               </el-input>
-              <div class="cardBodyLeft_search_button">
+              <div class="cardBodyLeft_search_button" @click="searchCom()">
                 <i class="el-icon-search"></i>
               </div>
             </div>
             <el-divider></el-divider>
             <!-- 公司树数据 -->
             <div class="cardBodyLeft_footer">
-              <el-tree :data="companyTreeData">
+              <el-tree
+                ref="company_tree"
+                :data="companyTreeData"
+                :props="defaultProps"
+                @node-click="handleNodeClick"
+                node-key="subAreaCode"
+                :default-expand-all="defaultExpandAll"
+              >
                 <span
                   slot-scope="{ node }"
-                  :title="node.areaName"
+                  :title="node.label"
                   class="el-tree-node__label node-label"
                 >
-                  {{ node.areaName }}
+                  {{ node.label }}
                 </span>
               </el-tree>
             </div>
@@ -48,16 +55,21 @@
                 <SearchBox
                   ref="searchBox"
                   :searchBoxData="searchBox_left_text"
+                  @clearList="clearList('1')"
                 ></SearchBox>
               </div>
               <div class="intelligence">
                 <SearchBox
                   ref="searchBox"
                   :searchBoxData="searchBox_right_text"
+                  @clearList="clearList('2')"
                 ></SearchBox>
               </div>
             </div>
-            <EquipmentTable ref="equipmentTable"></EquipmentTable>
+            <EquipmentTable
+              ref="equipmentTable"
+              :pushTableData="pushTableData"
+            ></EquipmentTable>
           </div>
         </div>
       </el-card>
@@ -67,7 +79,7 @@
 <script>
 import SearchBox from "./components/searchBox.vue";
 import EquipmentTable from "./components/equipmentTable.vue";
-import { getAllData } from "@/api/correlationEquipment";
+import { getAllData, getVideoList } from "@/api/correlationEquipment";
 export default {
   name: "correlationEquipment",
   components: {
@@ -78,53 +90,130 @@ export default {
     return {
       searchCompany: "", // 公司搜索
       companyTreeData: [], // 公司单位树
+      defaultProps: {
+        children: "children",
+        label: "areaName",
+      },
       searchBox_left_text: {}, // 给子查询盒子传递字符和图片地址
+      searchBox_right_text: {},
+      pushTableData: [],
+      defaultExpandAll: true, // 控制公司树默认展开
     };
   },
-  async created() {
-    await getAllData().then((res) => {
+  created() {
+    // 默认打开宁波查询
+    const params = {
+      areaName: "宁波",
+    };
+    getAllData(params).then((res) => {
       if (res.code === 200) {
         console.log("res", res);
         // 树形赋值
-        this.companyTreeData = res.data
-        console.log('this.companyTreeData', this.companyTreeData);
+        this.companyTreeData = res.data;
+        console.log("this.companyTreeData1", this.companyTreeData);
+        // 树形数据生成后，默认展示右下方表格数据
+        const val = {
+          pageSize: 4,
+          pageNum: 1,
+        };
+        getVideoList(val).then((res) => {
+          if (res.code === 200) {
+            console.log("resVideoList", res.rows);
+            // res.row传给右下方表格数据
+            this.pushTableData = res.rows;
+          }
+        });
+      } else {
+        this.$message.warning("企业名称查询失败");
       }
     });
     // 给子查询盒子传递字符和图片地址
     // 左边盒子
     this.searchBox_left_text = {
       src: require("@/assets/companyFile/camera.png"),
-      img_text: "视频监控系统",
+      img_text: "视频监控设备",
       btnList: [
-        { value: "1", name: "公共区域" },
-        { value: "2", name: "地下车库" },
-        { value: "3", name: "全景监控" },
-        { value: "4", name: "人脸抓拍" },
-        { value: "5", name: "电梯监控" },
-        { value: "6", name: "人体测温" },
-        { value: "7", name: "车辆抓拍" },
-        { value: "8", name: "人脸门禁" },
-        { value: "9", name: "高空抛物" },
+        { value: "1", name: "公共区域", type: "1" },
+        { value: "2", name: "地下车库", type: "1" },
+        { value: "3", name: "全景监控", type: "1" },
+        { value: "5", name: "人脸抓拍", type: "1" },
+        { value: "6", name: "电梯监控", type: "1" },
+        { value: "7", name: "人体测温", type: "1" },
+        { value: "8", name: "车辆抓拍", type: "1" },
+        { value: "9", name: "人脸门禁", type: "1" },
+        { value: "4", name: "高空抛物", type: "1" },
       ],
+      company_types: [],
     };
     // 右边盒子
     this.searchBox_right_text = {
       src: require("@/assets/companyFile/intelligence.png"),
-      img_text: "智能感知系统",
+      img_text: "智能感知设备",
       btnList: [
-        { value: "1", name: "车辆抓拍" },
-        { value: "2", name: "人脸抓拍" },
-        { value: "3", name: "门禁设备" },
-        { value: "4", name: "高抛抓拍" },
-        { value: "5", name: "全结构化" },
-        { value: "6", name: "智能烟感" },
-        { value: "7", name: "访客机" },
-        { value: "8", name: "多为设备" },
-        { value: "9", name: "WIFI设备" },
+        { value: "2", name: "车辆抓拍", type: "2" },
+        { value: "1", name: "人脸抓拍", type: "2" },
+        { value: "3", name: "门禁设备", type: "2" },
+        { value: "4", name: "高抛抓拍", type: "2" },
+        { value: "6", name: "全结构化", type: "2" },
+        { value: "7", name: "智能烟感", type: "2" },
+        { value: "8", name: "访客机", type: "2" },
+        { value: "10", name: "多维设备", type: "2" },
+        { value: "11", name: "WIFI设备", type: "2" },
       ],
+      company_types: [],
     };
   },
-  methods: {},
+  methods: {
+    // 企业名称放大镜查询
+    searchCom() {
+      const params = {
+        areaName: this.searchCompany,
+      };
+      getAllData(params).then((res) => {
+        if (res.code === 200) {
+          console.log("res", res);
+          // 树形赋值
+          this.companyTreeData = res.data;
+          console.log("this.companyTreeData", this.companyTreeData);
+        } else {
+          this.$message.warning("企业名称查询失败");
+        }
+      });
+    },
+    handleNodeClick(data) {
+      console.log("data", data);
+      // 视频查询List
+      const params = {
+        pageSize: 4,
+        pageNum: 1,
+        deviceVideoSubType: data.subAreaCode,
+      };
+      getVideoList(params).then((res) => {
+        if (res.code === 200) {
+          console.log("resVideoList", res.rows);
+          // res.row传给右下方表格数据
+          this.pushTableData = res.rows;
+        }
+      });
+      // 智能查询List
+      // const paramsPerception = {
+      //   devicePerceptionSubType: data.subAreaCode,
+      // };
+      // getPerceptionList(paramsPerception).then((res) => {
+      //   if (res.code === 200) {
+      //     console.log("resPerceptionList", res);
+      //   }
+      // });
+    },
+    clearList(num) {
+      console.log("num", num);
+      if (num === "1") {
+        this.searchBox_right_text.company_types = [];
+      } else if (num === "2") {
+        this.searchBox_left_text.company_types = [];
+      }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -155,7 +244,7 @@ export default {
   .cardBody {
     width: 100%;
     display: flex;
-    height: calc(100vh - 215px);
+    height: 80vh;
     /* 左侧 */
     .cardBodyLeft {
       width: 25%;
@@ -206,7 +295,14 @@ export default {
           box-shadow: 5px 5px 10px #126a58;
           border-radius: 4px;
           background: #293738;
-          color: #fff;
+          color: #fff !important;
+          /deep/.el-tree-node__content {
+            border: 0.5px dashed white;
+            height: 50px;
+          }
+          .el-tree-node__label.node-label {
+            font-size: 18px;
+          }
           .node-label {
             /* 树形数据横向过长添加展开 */
             width: 100%;
@@ -216,15 +312,27 @@ export default {
           }
           /* hover节点时的背景颜色 */
           ::v-deep .el-tree-node__content:hover {
-            background: #126a58;
+            background: #495461;
             color: #fff;
+            text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
           }
           /* 节点选中的背景颜色 */
           ::v-deep .el-tree-node:focus > .el-tree-node__content {
-            background: #1b3736;
+            background: #495461;
             color: #fff;
+            text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
           }
         }
+        .el-tree::-webkit-scrollbar {
+          width: 9px;
+          background-color: #5e666a;
+          border-radius: 4px;
+        }
+        .el-tree::-webkit-scrollbar-thumb {
+          width: 8px;
+          background-color: #3c4b4a;
+          border-radius: 4px;
+        }
       }
     }
     /* 竖分割线 */
@@ -239,6 +347,7 @@ export default {
         height: 18px;
         color: #fff;
         font-size: 18px;
+        text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
       }
       width: 75%;
       height: 100%;
diff --git a/src/views/systemManagement/index.vue b/src/views/systemManagement/index.vue
index 5ed6dc4..8d370c8 100644
--- a/src/views/systemManagement/index.vue
+++ b/src/views/systemManagement/index.vue
@@ -32,7 +32,7 @@ export default {
   .el-aside {
     margin-top: 15px; /* 给左上角logo留空间 -> 后面固定都给15px */
     margin-left: 15px;
-    width: 13% !important; /* 控制侧边导航栏宽度 */
+    width: 11% !important; /* 控制侧边导航栏宽度 */
     height: 100%;
   }
   .el-main {