diff --git a/src/views/systemManagement/correlationEquipment2/components/deletePerception.vue b/src/views/systemManagement/correlationEquipment/components/deletePerception.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment2/components/deletePerception.vue
rename to src/views/systemManagement/correlationEquipment/components/deletePerception.vue
diff --git a/src/views/systemManagement/correlationEquipment2/components/deleteVideo.vue b/src/views/systemManagement/correlationEquipment/components/deleteVideo.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment2/components/deleteVideo.vue
rename to src/views/systemManagement/correlationEquipment/components/deleteVideo.vue
diff --git a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
index 41ffa34..d890e1d 100644
--- a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
@@ -1,261 +1,390 @@
 <template>
-  <!-- 设备表格 -->
-  <div class="equipment_data">
-    <p>{{ table_title }}</p>
-    <!-- 查询表 -->
-    <div v-if="display_search" class="equipment_data_search">
-      <el-form :inline="true" :model="search" class="search_data">
-        <el-form-item>
-          <el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
-        </el-form-item>
-        <el-form-item>
+  <div>
+    <div v-if="table_flag" class="equipment_table_video">
+      <div class="table_title">视频监控设备列表</div>
+      <div class="table_search">
+        <el-form :model="search" class="table_search_form">
           <el-form-item>
-            <el-input v-model="search.channel_code" placeholder="输入通道国际编码搜索"></el-input>
+            <el-input
+              v-model="search.deviceName"
+              placeholder="输入设备名称搜索"
+            ></el-input>
           </el-form-item>
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="search.equipment_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_data">
-        <el-form-item>
-          <el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
-        </el-form-item>
-        <el-form-item>
           <el-form-item>
-            <el-input v-model="search.ip" placeholder="输入IP名称搜索"></el-input>
+            <el-input
+              v-model="search.gbsChannelNo"
+              placeholder="输入通道国际编码搜索"
+            ></el-input>
           </el-form-item>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="onSubmit">搜索</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="reset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <!-- 增删按钮 -->
-    <div class="equipment_data_btn">
-      <el-button v-for="item in btnList" :key="item.value" @click="openDialog(item.value)">
-        <i :class="`el-icon-${item.icon}`" />
-        {{ item.label }}</el-button>
-    </div>
-    <!-- 表格 -->
-    <div class="equipment_data_table">
-      <el-table :cell-style="{ background: 'revert' }" :header-cell-style="table_header" :data="pushTableData"
-        :highlight-current-row="true" height="250">
-        <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column v-for="item in tableColumn" :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" class="operation" @click="openDialog('2', scope.row)">编辑
-            </el-button>
-            <el-button size="small" class="operation" @click="openDialog('5', scope.row)">详情
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+          <el-form-item>
+            <el-input
+              v-model="search.deviceIp"
+              placeholder="输入设备IP搜索"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="video_search">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="video_reset">重置</el-button>
+          </el-form-item>
+        </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)"
+        >
+          <i :class="`el-icon-${item.icon}`" />
+          {{ item.label }}</el-button
+        >
+      </div>
+      <div class="table_video">
+        <el-table
+          :cell-style="{ background: 'revert' }"
+          :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>
+          <el-table-column
+            v-for="item in table_column_video"
+            :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"
+                class="operation"
+                @click="open_video_dialog('5', scope.row)"
+                >编辑
+              </el-button>
+              <el-button
+                size="small"
+                class="operation"
+                @click="open_video_dialog('6', scope.row)"
+                >详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="table_pagination">
+        <el-pagination
+          :background="true"
+          @current-change="handleCurrentChange"
+          :page-sizes="[5]"
+          :page-size="pageSize"
+          :current-page="pageNum"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
     </div>
-    <div class="equipment_data_pagination">
-      <el-pagination :background="true" @current-change="handleCurrentChange" :page-sizes="[4]" :page-size="PageSize"
-        :current-page="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pushTableData.length">
-      </el-pagination>
+    <div v-else class="equipment_table_perception">
+      <div class="table_title">智能感知设备列表</div>
+      <div class="table_search">
+        <el-form :model="search" class="table_search_form">
+          <el-form-item>
+            <el-input
+              v-model="search_p.deviceName"
+              placeholder="输入设备名称搜索"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="search_p.deviceIp"
+              placeholder="输入设备IP搜索"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="perception_search">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="perception_reset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="table_btn_list">
+        <el-button
+          v-for="item in btn_list"
+          :key="item.value"
+          @click="open_perception_dialog(item.value)"
+        >
+          <i :class="`el-icon-${item.icon}`" />
+          {{ item.label }}</el-button
+        >
+      </div>
+      <div class="table_perception">
+        <el-table
+          :cell-style="{ background: 'revert' }"
+          :header-cell-style="table_header"
+          :data="table_data"
+          :highlight-current-row="true"
+          @selection-change="handle_perception_change"
+          height="336"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column
+            v-for="item in table_column_perception"
+            :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"
+                class="operation"
+                @click="open_perception_dialog('5', scope.row)"
+                >编辑
+              </el-button>
+              <el-button
+                size="small"
+                class="operation"
+                @click="open_perception_dialog('6', scope.row)"
+                >详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="table_pagination">
+        <el-pagination
+          :background="true"
+          @current-change="handleCurrentChangePerception"
+          :page-sizes="[5]"
+          :page-size="pageSize"
+          :current-page="pageNum"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
     </div>
-    <AddVideoDialog ref="addVideoDialog"></AddVideoDialog>
-    <AddPerceptionDialog ref="addPerceptionDialog"></AddPerceptionDialog>
-    <UploadDialog ref="uploadDialog"></UploadDialog>
-    <DeriveDialog ref="deriveDialog" :table_title="table_title"></DeriveDialog>
+    <!-- 视频设备表单弹窗 -->
+    <VideoForm ref="videoForm" @refresh_video="refresh_video"></VideoForm>
+    <!-- 删除视频设备表单弹窗 -->
+    <DeleteVideo ref="deleteVideo" @refresh_video="refresh_video"></DeleteVideo>
+    <!-- 导入视频设备弹窗 -->
+    <ImportVideo ref="importVideo"></ImportVideo>
+    <!-- 导出视频设备弹窗 -->
+    <ExportVideo ref="exportVideo"></ExportVideo>
+    <!-- 智能设备表单弹窗 -->
+    <PerceptionForm
+      ref="perceptionForm"
+      @refresh_perception="refresh_perception"
+    ></PerceptionForm>
+    <!-- 删除智能设备表单弹窗 -->
+    <DeletePerception
+      ref="deletePerception"
+      @refresh_perception="refresh_perception"
+    ></DeletePerception>
+    <!-- 导入智能设备弹窗 -->
+    <ImportPerception ref="importPerception"></ImportPerception>
+    <!-- 导出智能设备弹窗 -->
+    <ExportPerception ref="exportPerception"></ExportPerception>
   </div>
 </template>
 <script>
-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";
+import VideoForm from "./videoForm";
+import DeleteVideo from "./deleteVideo";
+import ImportVideo from "./importVideo";
+import ExportVideo from "./exportVideo";
+import PerceptionForm from "./perceptionForm";
+import DeletePerception from "./deletePerception";
+import ImportPerception from "./importPerception";
+import ExportPerception from "./exportPerception"
 export default {
-  name: "EquipmentTable",
+  name:'EquipmentTable',
   components: {
-    AddPerceptionDialog,
-    AddVideoDialog,
-    UploadDialog,
-    DeriveDialog,
-  },
-  props: {
-    pushTableData: [],
-    only_params: {},
+    VideoForm,
+    DeleteVideo,
+    ImportVideo,
+    ExportVideo,
+    PerceptionForm,
+    DeletePerception,
+    ImportPerception,
+    ExportPerception,
   },
   data() {
     return {
-      table_title: "视频监控设备列表", // 表格主题
-      display_search: true, // 判断展示对应查询项
-      search_params_table: {}, // 承接传过来的表格查询入参
+      table_flag: true,
+      // 视频查询
       search: {
-        equipment: "",
-        ip: "",
-        channel_code: "",
-        equipemnt_ip: "",
+        deviceName: "",
+        gbsChannelNo: "",
+        deviceIp: "",
+      },
+      // 智能查询
+      search_p: {
+        deviceName: "",
+        deviceIp: "",
       },
-      btnList: [
+      btn_list: [
         { value: "1", label: "新增", icon: "plus" },
         { value: "2", label: "删除", icon: "delete" },
         { value: "3", label: "导入", icon: "bottom-right" },
         { value: "4", label: "导出", icon: "top-left" },
       ],
-      tableColumn: [],
-      tableData: [],
-      // 视频表头
-      tableColumn_video: [
+      table_data: [],
+      table_column_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: [
+      table_column_perception: [
         { prop: "deviceName", label: "设备名称", width: "270" },
         { prop: "devicePerceptionSubTypeCn", label: "设备类型" },
         { prop: "deviceIp", label: "设备IP" },
-        // { prop: "longitude", label: "设备经度" },
-        // { prop: "latitude", label: "设备维度" },
         { prop: "orientationCn", label: "进出方向" },
       ],
-      table_params: {}, // 本页面查询入参
-      pageSize: 4,
-      pageNum: 1,
-      total: 0, // 信息总数
+      handle_video: "", // 选中视频表格数据
+      handle_perception: "", // 选中智能表格数据
+      pageSize: 0,
+      pageNum: 0,
+      only_params: {},
+      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;
-      this.only_params = data.search_params; // 如果点击了标签查询
-      console.log("this.pushTableData", this.pushTableData);
-      this.search_params_table = data.search_params;
-    });
+    this.table_column = this.table_column_video;
   },
   methods: {
-    // 智能搜索
-    onSubmit() {
-      this.only_params = {
-        pageSize: this.pageSize,
-        pageNum: this.pageNum,
-        deviceIp: this.search.ip,
-        deviceName: this.search.equipment,
-      };
-      Object.assign(this.only_params, this.search_params_table);
-      getPerceptionList(this.only_params).then((res) => {
-        // res.row传给右下方表格数据
-        this.pushTableData = res.rows;
+    obtain_table_data(data, params, flag) {
+      this.table_flag = flag;
+      console.log("data_1", data);
+      this.table_data = data.rows;
+      this.total = data.total;
+      this.pageSize = params.pageSize;
+      this.pageNum = params.pageNum;
+      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;
       });
     },
-    // 智能搜索重置
-    reset() {
-      (this.search.equipment = ""), (this.search.ip = "");
-      this.only_params = {
-        pageSize: this.pageSize,
-        pageNum: this.pageNum,
-        deviceIp: this.search.ip,
-        deviceName: this.search.equipment,
-      };
-      Object.assign(this.only_params, this.search_params_table);
+    refresh_perception() {
       getPerceptionList(this.only_params).then((res) => {
-        // res.row传给右下方表格数据
-        this.pushTableData = res.rows;
+        this.table_data = res.rows;
+        this.total = res.total;
       });
     },
-    // 视频搜索
-    onSubmitVideo() {
-      this.only_params = {
-        pageSize: this.pageSize,
-        pageNum: this.pageNum,
-        gbsChannelNo: this.search.channel_code,
-        deviceIp: this.search.equipemnt_ip,
-        deviceName: this.search.equipment,
-      };
-      Object.assign(this.only_params, this.search_params_table);
+    // 视频设备查询
+    video_search() {
+      this.only_params = Object.assign(this.only_params, this.search);
       getVideoList(this.only_params).then((res) => {
-        // res.row传给右下方表格数据
-        this.pushTableData = res.rows;
+        this.table_data = res.rows;
+        this.total = res.total;
       });
     },
-    // 视频搜索重置
-    resetVideo() {
-      (this.search.channel_code = ""),
-        (this.search.equipemnt_ip = ""),
-        (this.search.equipment = "");
-      this.only_params = {
-        pageSize: this.pageSize,
-        pageNum: this.pageNum,
-        gbsChannelNo: this.search.channel_code,
-        deviceIp: this.search.equipemnt_ip,
-        deviceName: this.search.equipment,
-      };
-      Object.assign(this.only_params, this.search_params_table);
+    // 视频设备重置
+    video_reset() {
+      // 查询项清空
+      this.search.gbsChannelNo = "";
+      this.search.deviceName = "";
+      this.search.deviceIp = "";
+      this.only_params = Object.assign(this.only_params, this.search);
       getVideoList(this.only_params).then((res) => {
-        // res.row传给右下方表格数据
-        this.pushTableData = res.rows;
+        this.table_data = res.rows;
+        this.total = res.total;
+      });
+    },
+    // 智能查询
+    perception_search() {
+      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.table_data = res.rows;
+        this.total = res.total;
       });
     },
-    openDialog(num, row) {
-      console.log(num, "num");
+    // 视频设备增删改导
+    open_video_dialog(num, row) {
       if (num === "1") {
-        // 新增弹窗
-        console.log(num, "num");
-        if (this.table_title === "视频监控设备列表") {
-          this.$refs.addVideoDialog.open(num);
-        } else if (this.table_title === "智能感知设备列表") {
-          this.$refs.addPerceptionDialog.open(num);
-        }
+        // 新增视频设备
+        this.$refs.videoForm.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);
+        // 删除视频设备
+        if (this.handle_video.length != 1) {
+          this.$message.warning("请选择一条表格数据");
+        } else {
+          this.$refs.deleteVideo.open(this.handle_video);
         }
       } else if (num === "3") {
-        // 导入弹窗
-        this.$refs.uploadDialog.open();
+        // 导入视频设备
+        this.$refs.importVideo.open();
       } else if (num === "4") {
-        // 导出弹窗
-        this.$refs.deriveDialog.open();
+        // 导出视频设备
+        this.$refs.exportVideo.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);
+        // 修改视频设备
+        this.$refs.videoForm.open(num, row);
+      } else if (num === "6") {
+        // 详情视频设备
+        this.$refs.videoForm.open(num, row);
+      }
+    },
+    // 智能感应增删改导
+    open_perception_dialog(num, row) {
+      if (num === "1") {
+        // 新增智能感知
+        this.$refs.perceptionForm.open(num);
+      } else if (num === "2") {
+        // 删除智能设备
+        if (this.handle_perception.length != 1) {
+          this.$message.warning("请选择一条表格数据");
+        } else {
+          this.$refs.deletePerception.open(this.handle_perception);
         }
+      } else if (num === "3") {
+        // 导入智能设备
+        this.$refs.importPerception.open();
+      } else if (num === "4") {
+        // 导出智能设备
+        this.$refs.exportPerception.open();
+      } else if (num === "5") {
+        // 修改智能设备
+        this.$refs.perceptionForm.open(num, row);
+      } else if (num === "6") {
+        // 详情视频设备
+        this.$refs.perceptionForm.open(num, row);
       }
     },
+    // 选择视频表格数据
+    handle_video_change(val) {
+      console.log("val_handle", val);
+      this.handle_video = val;
+    },
+    // 选择智能表格数据
+    handle_perception_change(val) {
+      this.handle_perception = val;
+    },
     table_header({ row, rowIndex }) {
       console.log(row);
       console.log(rowIndex);
@@ -263,42 +392,53 @@ export default {
         color: "#fff",
       };
     },
+    // 视频表格分页
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
-      this.only_params.pageNum = val
-      console.log('this.only_params', this.only_params);
-      if (this.table_title === "视频监控设备列表") {
-        getVideoList(this.only_params).then((res) => {
-          this.pushTableData = res.rows;
-        });
-      } else if (this.table_title === "智能感知设备列表") {
-        getPerceptionList(this.only_params).then((res) => {
-          this.pushTableData = res.rows;
-        });
-      }
+      this.only_params.pageNum = val;
+      getVideoList(this.only_params).then((res) => {
+        this.table_data = res.rows;
+      });
+    },
+    // 智能表格分页
+    handleCurrentChangePerception(val) {
+      console.log(`当前页: ${val}`);
+      this.only_params.pageNum = val;
+      getPerceptionList(this.only_params).then((res) => {
+        this.table_data = res.rows;
+      });
     },
   },
 };
 </script>
 <style lang="less" scoped>
-.equipment_data {
-  p {
+.equipment_table_video,
+.equipment_table_perception {
+  .table_title {
     color: #fff;
     text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
     margin-left: 10px;
+    font-size: 17px;
   }
-
-  .equipment_data_search {
-    margin-left: 12px;
-
+  .table_search {
+    margin-top: 1vh;
+    width: 64vw;
+    height: 4vh;
+    .table_search_form {
+      display: flex;
+      .el-form-item {
+        margin-left: 0.5vw;
+      }
+    }
     /deep/.el-input__inner {
       border-radius: 0px 0px 0px 0px;
       background: #3c4b4a;
       color: #fff;
+      width: 10vw;
     }
 
     .el-button {
-      width: 100%;
+      width: 4vw;
       border: 1px solid #4a6072;
       color: #fff;
       border-radius: 0px !important;
@@ -312,10 +452,9 @@ export default {
       background-size: 100% 100% !important;
     }
   }
-
-  .equipment_data_btn {
-    margin-left: 12px;
-
+  .table_btn_list {
+    width: 64vw;
+    height: 5vh;
     .el-button {
       width: 90px;
       height: 5vh;
@@ -325,134 +464,120 @@ export default {
       background: url("~@/assets/companyFile/btn1.png") no-repeat !important;
       background-size: 100% 100% !important;
     }
-
     .el-button:focus,
     .el-button:hover {
       filter: brightness(200%);
       text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
     }
   }
-
-  .equipment_data_table {
-    width: calc(100% - 30px);
-    margin-top: 12px;
-    margin-left: 12px;
-    height: 27vh;
-
-    .el-table,
-    .el-table__expanded-cell {
+  .table_video {
+    width: 64vw;
+    height: 34vh;
+    margin-left: 10px;
+  }
+  /deep/.el-table {
+    width: 98.2%;
+    .el-table__body-wrapper {
+      overflow: auto;
+      background: #233438;
       color: #fff;
-      background-color: transparent;
-
-    }
-
-    /deep/.el-table {
-      .el-table__body-wrapper {
-
-        overflow: auto;
-
-        &::-webkit-scrollbar {
-          width: 3px;
-        }
-
-        // 滚动条里面默认的小方块,自定义样式
-        &::-webkit-scrollbar-thumb {
-          background: #4CF993;
-          border-radius: 2px;
-        }
-
-        // 滚动条里面的轨道
-        &::-webkit-scrollbar-track {
-          background: transparent;
-        }
+      &::-webkit-scrollbar {
+        width: 3px;
+      }
 
+      // 滚动条里面默认的小方块,自定义样式
+      &::-webkit-scrollbar-thumb {
+        background: #4cf993;
+        border-radius: 2px;
       }
 
-      thead {
-        text-align: center;
-        color: #fff;
-        font-weight: 500;
-        background: linear-gradient(to right,
-            #284f49,
-            #2f6363,
-            #233b38) !important;
+      // 滚动条里面的轨道
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+    }
 
-        & th {
-          background-color: transparent;
-        }
+    thead {
+      text-align: center;
+      color: #fff;
+      font-weight: 500;
+      background: linear-gradient(
+        to right,
+        #284f49,
+        #2f6363,
+        #233b38
+      ) !important;
 
-        & tr {
-          background-color: transparent;
-        }
+      & th {
+        background-color: transparent;
       }
 
-      tr {
-        background: #233438;
+      & tr {
+        background-color: transparent;
       }
     }
 
-    .el-table::before {
-      //去除底部白线
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 0px;
-    }
-
-    /deep/.el-button.operation {
-      width: 40px;
-      height: 30px;
-      background-color: rgb(35 52 56);
-      border: 0px;
-      color: #fff;
+    tr {
+      background: #233438;
     }
+  }
+  /deep/.el-button.operation {
+    width: 40px;
+    height: 30px;
+    background-color: rgb(35 52 56);
+    border: 0px;
+    color: #2fabdc;
+  }
 
-    /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);
-    }
+  /deep/.el-button.operation:hover,
+  .el-button.operation:focus {
+    width: 40px;
+    height: 30px;
+    background-color: rgb(35 52 56 0);
+    border: 0px;
+    color: #2fabdc;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
   }
+  .table_pagination {
+    width: 64vw;
+    height: 5vh;
+    .el-pagination {
+      margin-left: 50%;
+      margin-top: 2vh;
 
-  .el-pagination {
-    margin-left: 50%;
+      /deep/.el-pagination__total {
+        color: #fff;
+      }
 
-    /deep/.el-pagination__total {
-      color: #fff;
-    }
+      /deep/.el-input__inner {
+        border-radius: 0px;
+        background: #3c4b4a;
+        color: #fff;
+      }
 
-    /deep/.el-input__inner {
-      border-radius: 0px;
-      background: #3c4b4a;
-      color: #fff;
-    }
+      /deep/.btn-prev {
+        border-radius: 0px;
+        background: #3c4b4a;
+        color: #fff;
+      }
 
-    /deep/.btn-prev {
-      border-radius: 0px;
-      background: #3c4b4a;
-      color: #fff;
-    }
+      /deep/ul {
+        li {
+          background: #3c4b4a;
+          color: #fff;
+        }
+      }
 
-    /deep/ul {
-      li {
+      /deep/.btn-next {
+        border-radius: 0px;
         background: #3c4b4a;
         color: #fff;
       }
-    }
 
-    /deep/.btn-next {
-      border-radius: 0px;
-      background: #3c4b4a;
-      color: #fff;
-    }
-
-    /deep/ .el-pager {
-      li {
-        background: #3c4b4a !important;
+      /deep/ .el-pager {
+        li {
+          background: #3c4b4a !important;
+        }
       }
     }
   }
diff --git a/src/views/systemManagement/correlationEquipment2/components/exportPerception.vue b/src/views/systemManagement/correlationEquipment/components/exportPerception.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment2/components/exportPerception.vue
rename to src/views/systemManagement/correlationEquipment/components/exportPerception.vue
diff --git a/src/views/systemManagement/correlationEquipment2/components/exportVideo.vue b/src/views/systemManagement/correlationEquipment/components/exportVideo.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment2/components/exportVideo.vue
rename to src/views/systemManagement/correlationEquipment/components/exportVideo.vue
diff --git a/src/views/systemManagement/correlationEquipment2/components/importPerception.vue b/src/views/systemManagement/correlationEquipment/components/importPerception.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment2/components/importPerception.vue
rename to src/views/systemManagement/correlationEquipment/components/importPerception.vue
diff --git a/src/views/systemManagement/correlationEquipment2/components/importVideo.vue b/src/views/systemManagement/correlationEquipment/components/importVideo.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment2/components/importVideo.vue
rename to src/views/systemManagement/correlationEquipment/components/importVideo.vue
diff --git a/src/views/systemManagement/correlationEquipment2/components/perceptionForm.vue b/src/views/systemManagement/correlationEquipment/components/perceptionForm.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment2/components/perceptionForm.vue
rename to src/views/systemManagement/correlationEquipment/components/perceptionForm.vue
diff --git a/src/views/systemManagement/correlationEquipment/components/searchBox.vue b/src/views/systemManagement/correlationEquipment/components/searchBox.vue
index b8ddc3f..7adc432 100644
--- a/src/views/systemManagement/correlationEquipment/components/searchBox.vue
+++ b/src/views/systemManagement/correlationEquipment/components/searchBox.vue
@@ -1,252 +1,332 @@
 <template>
-  <!-- 关联设备的右侧查询盒子 -->
-  <div class="searchBox_body">
-    <div class="searchBox_img">
-      <el-button
-        class="searchBox_img_top"
-        @click="change_types(searchBoxData.typesAll)"
-      >
-        <img :src="searchBoxData.src" alt="" />
-      </el-button>
-      <span>{{ searchBoxData.img_text }}</span>
+  <!-- 视频设备、智能设备查询 -->
+  <div class="search_box">
+    <div class="box_title">设备列表</div>
+    <div class="search_check">
+      <!-- 视频设备查询条件 -->
+      <div class="video_check">
+        <div class="video_btn">
+          <el-button class="video_button" @click="video_all_check">
+            <img :src="video_btn_img_src" alt="" />
+          </el-button>
+          <div class="video_text">{{ video_text }}</div>
+        </div>
+        <el-checkbox-group v-model="video_checkgroup">
+          <el-checkbox
+            class="video_checks"
+            v-for="item in video_btn_list"
+            :key="item.value"
+            :label="item.name"
+            @change="video_check_search($event, item.value)"
+          >
+            {{ item.name }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+      <!-- 智能设备查询条件 -->
+      <div class="perception_check">
+        <div class="perception_btn">
+          <el-button class="perception_button" @click="perception_all_check">
+            <img :src="perception_btn_img_src" alt="" />
+          </el-button>
+          <div class="perception_text">{{ perception_text }}</div>
+        </div>
+        <el-checkbox-group v-model="perception_checkgroup">
+          <el-checkbox
+            class="perception_checks"
+            v-for="item in perception_btn_list"
+            :key="item.value"
+            :label="item.name"
+            @change="perception_check_search($event, item.value)"
+          >
+            {{ item.name }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
     </div>
-    <el-checkbox-group v-model="searchBoxData.company_types">
-      <el-checkbox
-        class="searchBox_btn"
-        v-for="item in searchBoxData.btnList"
-        :key="item.value"
-        @change="sendClearList($event, item.type, item.value)"
-        :label="item.name"
-        name="type"
-      >
-        {{ 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",
+  name: "SearchBox",
   props: {
-    searchBoxData: {},
+    only_params: {}, // 主页传来的查询入参，会在本页面添加更多查询入参
   },
   data() {
     return {
-      pushValue: {
-        title: "",
-        pushTableData: [],
-        search_params:{}, // 最新的查询入参
-      },
-      types_params_list: [], // 选中视频企业类型对应的id
-      per_types_params_list: [], // 选中智能企业类型对应的id
-      back_types:'', // 通知树形，是视频检索还是智能检索
+      video_checkgroup: [], // 视频设备复选框双向绑定
+      deviceVideoSubTypes: [], // 视频设备点击查询添加参数
+      video_btn_list: [
+        { 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" },
+      ],
+      video_btn_img_src: require("@/assets/companyFile/camera03.png"),
+      video_text: "视频监控设备",
+      perception_checkgroup: [], // 智能设备复选框双向绑定
+      devicePerceptionSubTypes: [], // 智能设备点击查询添加参数
+      perception_btn_list: [
+        { 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" },
+      ],
+      perception_btn_img_src: require("@/assets/companyFile/intelligence02.png"),
+      perception_text: "智能感知设备",
+      check_push_table_data: {}, // 复选框查询的表格数据传递给表格
+      flag: true,
     };
   },
-  created() {},
   methods: {
-    async sendClearList(e, item, value) {
+    clear_search_list() {
+      this.video_checkgroup = []; // 视频设备复选框清空
+      this.perception_checkgroup = []; //智能设备复选框清空
+      this.deviceVideoSubTypes = []; // 视频设备复选框清空
+      this.devicePerceptionSubTypes = []; // 智能查询参数清空
+      delete this.only_params.deviceVideoSubType;
+      delete this.only_params.devicePerceptionSubType;
+    },
+    // 视频设备按钮查全部
+    video_all_check() {
+      this.perception_checkgroup = []; //智能设备复选框清空
+      this.video_checkgroup = []; // 视频设备复选框清空
+      this.deviceVideoSubTypes = []
+      this.devicePerceptionSubTypes = [];
+      delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
+      this.only_params.deviceVideoSubTypes = ""; // 按钮查视频设备的全部
+      this.flag = true;
+      getVideoList(this.only_params).then((res) => {
+        console.log("res_video", res);
+        this.check_push_table_data = res;
+        this.$emit(
+          "push_data_to_table",
+          this.check_push_table_data,
+          this.only_params,
+          this.flag
+        ); // 传给父亲，再转给兄弟Table
+      });
+    },
+    // 智能设备按钮查全部
+    perception_all_check() {
+      this.perception_checkgroup = []; //智能设备复选框清空
+      this.video_checkgroup = []; // 视频设备复选框清空
+      this.deviceVideoSubTypes = []
+      this.devicePerceptionSubTypes = [];
+      delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
+      this.only_params.devicePerceptionSubTypes = ""; // 按钮查智能设备的全部
+      this.flag = false;
+      getPerceptionList(this.only_params).then((res) => {
+        console.log("res_video", res);
+        this.check_push_table_data = res;
+        this.$emit(
+          "push_data_to_table",
+          this.check_push_table_data,
+          this.only_params,
+          this.flag
+        ); // 传给父亲，再转给兄弟Table
+      });
+    },
+    // 视频设备复选查询
+    video_check_search(e, value) {
       if (e) {
-        // 单点确定要查询的时候
-        // 复选框单独点击时查询表格数据
-        this.$emit("clearList"); // 先执行清空邻复选框
-        // 切换表格标题
-        console.log("item123", item);
-        if (item === "1") {
-          this.back_types = item
-          this.$emit('backTypes', this.back_types) // 通知树形
-          this.types_params_list.push(value);
-          this.pushValue.title = "视频监控设备列表";
-          // 根据企业标签查询视频数据
-          this.pushValue.search_params = {
-            pageSize: 4,
-            pageNum: 1,
-            deviceVideoSubTypes: "",
-          };
-          this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString();
-          await getVideoList(this.pushValue.search_params).then((res) => {
-            console.log("resVideoList1", res.rows);
-            // res.row传给右下方表格数据
-            this.pushValue.pushTableData = res.rows;
-          });
-        } else if (item === "2") {
-          this.back_types = item
-          this.$emit('backTypes', this.back_types) // 通知树形
-          this.per_types_params_list.push(value);
-          this.pushValue.title = "智能感知设备列表";
-          this.pushValue.search_params = {
-            pageSize: 4,
-            pageNum: 1,
-            devicePerceptionSubTypes: "",
-          };
-          this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list
-            .sort()
-            .toString();
-          await getPerceptionList(this.pushValue.search_params).then((res) => {
-            // res.row传给右下方表格数据
-            this.pushValue.pushTableData = res.rows;
-          });
-        }
-        bus.$emit("send", this.pushValue);
-        console.log("value", value);
+        // 点击
+        delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
+        this.perception_checkgroup = []; //智能设备复选框清空
+        this.devicePerceptionSubTypes = []; // 智能查询参数清空
+        this.deviceVideoSubTypes.push(value); // 收集视频类型查询入参
+        this.only_params.deviceVideoSubTypes =
+          this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
+        this.flag = true;
+        getVideoList(this.only_params).then((res) => {
+          console.log("res_video", res);
+          this.check_push_table_data = res;
+          this.$emit(
+            "push_data_to_table",
+            this.check_push_table_data,
+            this.only_params,
+            this.flag
+          ); // 传给父亲，再转给兄弟Table
+        });
       } else {
-        // 复选框单独点击时查询表格数据
-        console.log("e1111", e);
-        this.$emit("clearList"); // 先执行清空邻复选框
-        // 切换表格标题
-        console.log("item123", item);
-        if (item === "1") {
-          this.back_types = item
-          this.$emit('backTypes', this.back_types) // 通知树形
-          console.log("this.types_params_list2", this.types_params_list);
-          console.log("value", value);
-          this.types_params_list = this.types_params_list.filter(
-            (val) => val != value
-          ); // 取消选中的标签查询
-          console.log("this.types_params_list3", this.types_params_list);
-          this.pushValue.title = "视频监控设备列表";
-          // 根据企业标签查询视频数据
-          this.pushValue.search_params = {
-            pageSize: 4,
-            pageNum: 1,
-            deviceVideoSubTypes: "",
-          };
-          this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString();
-          await getVideoList(this.pushValue.search_params).then((res) => {
-            console.log("resVideoList1", res.rows);
-            // res.row传给右下方表格数据
-            this.pushValue.pushTableData = res.rows;
-          });
-        } else if (item === "2") {
-          this.back_types = item
-          this.$emit('backTypes', this.back_types) // 通知树形
-          this.per_types_params_list = this.per_types_params_list.filter(
-            (item) => item != value
-          );
-          this.pushValue.title = "智能感知设备列表";
-          this.pushValue.search_params = {
-            pageSize: 4,
-            pageNum: 1,
-            devicePerceptionSubTypes: "",
-          };
-          this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list
-            .sort()
-            .toString();
-          await getPerceptionList(this.pushValue.search_params).then((res) => {
-            // res.row传给右下方表格数据
-            this.pushValue.pushTableData = res.rows;
-          });
-        }
-        bus.$emit("send", this.pushValue);
+        // 取消
+        delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
+        this.perception_checkgroup = []; //智能设备复选框清空
+        this.devicePerceptionSubTypes = []; // 智能查询参数清空
+        this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter(
+          (item) => item != value
+        ); // 收集视频类型查询入参
+        this.only_params.deviceVideoSubTypes =
+          this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
+        this.flag = true;
+        getVideoList(this.only_params).then((res) => {
+          console.log("res_video", res);
+          this.check_push_table_data = res;
+          this.$emit(
+            "push_data_to_table",
+            this.check_push_table_data,
+            this.only_params,
+            this.flag
+          ); // 传给父亲，再转给兄弟Table
+        });
       }
     },
-    async change_types(num) {
-      // 标签按钮左侧图标点击
-      this.$emit("clearList"); // 先执行清空邻复选框
-      this.types_params_list = []; // 点击按钮全查的时候，要让单点查询的记录清空掉
-      this.per_types_params_list = [];
-      this.searchBoxData.company_types = [];
-      if (num === "1") {
-        // 视频监控全标签查
-        this.back_types = num
-        this.$emit('backTypes', this.back_types) // 通知树形
-        this.pushValue.title = "视频监控设备列表";
-        this.pushValue.search_params = {
-          pageSize: 4,
-          pageNum: 1,
-          // deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
-        };
-        await getVideoList(this.pushValue.search_params).then((res) => {
-          console.log("resVideoList1", res.rows);
-          // res.row传给右下方表格数据
-          this.pushValue.pushTableData = res.rows;
+    // 智能设备复选查询
+    perception_check_search(e, value) {
+      if (e) {
+        // 点击
+        delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
+        this.video_checkgroup = []; // 视频设备复选框清空
+        this.deviceVideoSubTypes = []; // 视频设备复选框清空
+        this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参
+        this.only_params.devicePerceptionSubTypes =
+          this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
+        this.flag = false;
+        getPerceptionList(this.only_params).then((res) => {
+          this.check_push_table_data = res;
+          this.$emit(
+            "push_data_to_table",
+            this.check_push_table_data,
+            this.only_params,
+            this.flag
+          ); // 传给父亲，再转给兄弟Table
         });
-      } else if (num === "2") {
-        console.log("num123", num);
-        this.back_types = num
-        this.$emit('backTypes', this.back_types) // 通知树形
-        // 智能感知全标签查
-        this.pushValue.title = "智能感知设备列表";
-        this.pushValue.search_params = {
-          pageSize: 4,
-          pageNum: 1,
-          // devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11",
-        };
-        await getPerceptionList(this.pushValue.search_params).then((res) => {
-          // res.row传给右下方表格数据
-          this.pushValue.pushTableData = res.rows;
+      } else {
+        // 取消
+        delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
+        this.video_checkgroup = []; // 视频设备复选框清空
+        this.deviceVideoSubTypes = []; // 视频设备复选框清空
+        this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter(
+          (item) => item != value
+        ); // 收集智能类型查询入参
+        this.only_params.devicePerceptionSubTypes =
+          this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
+        this.flag = false;
+        getPerceptionList(this.only_params).then((res) => {
+          this.check_push_table_data = res;
+          this.$emit(
+            "push_data_to_table",
+            this.check_push_table_data,
+            this.only_params,
+            this.flag
+          ); // 传给父亲，再转给兄弟Table
         });
       }
-      bus.$emit("send", this.pushValue);
-      // const types_arr = this.searchBoxData.btnList.map((item) => ({
-      //   name: item.name,
-      // }));
-      // const types_text = types_arr.map((item) => item.name);
-      // console.log("types_text", types_text);
-      // console.log(
-      //   "this.searchBoxData.company_types",
-      //   this.searchBoxData.company_types.length
-      // );
-      // // 全选或者全不选操作
-      // if (this.searchBoxData.company_types.length === 9) {
-      //   this.searchBoxData.company_types = []; // 置空，全不选
-      // } else if (
-      //   this.searchBoxData.company_types.length != 0 &&
-      //   this.searchBoxData.company_types.length != 9
-      // ) {
-      //   this.searchBoxData.company_types = types_text; // 没全选，则全选
-      // } else if (this.searchBoxData.company_types.length === 0) {
-      //   this.searchBoxData.company_types = types_text; // 没选，也全选
-      // }
     },
   },
 };
 </script>
 <style lang="less" scoped>
-.searchBox_body {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  .searchBox_img {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    width: 22%;
-    height: 100%;
+.search_box {
+  margin: 0 auto;
+  margin-top: 1vh;
+  width: 63vw;
+  height: 24vh;
+  //   border: 0.1px solid #485f6c;
+  .box_title {
+    width: 63vw;
+    height: 2vh;
     color: #fff;
-    text-align: center;
-    font-size: 15px;
-    .searchBox_img_top {
-      background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
-      background-size: 100% 100% !important;
-      width: 5vw;
-      height: 10vh;
-      margin: 0px auto;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+  .search_check {
+    margin-top: 1vh;
+    width: 63vw;
+    height: 20vh;
+    // border: 0.1px solid #485f6c;
+    display: flex;
+    justify-content: space-between;
+    // 视频设备复选框盒子
+    .video_check {
+      width: 31vw;
+      height: 20vh;
+      border: 0.1px solid #485f6c;
       display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 0px;
-      img {
-        width: 1.8vw;
-        height: 3.6vh;
+      color: #fff;
+      text-align: center;
+      // 按钮区域
+      .video_btn {
+        width: 7vw;
+        height: 20vh;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .video_button {
+          background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
+          background-size: 100% 100% !important;
+          width: 5vw;
+          height: 10vh;
+          margin: 0px auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 0px;
+          img {
+            width: 1.8vw;
+            height: 3.6vh;
+          }
+        }
+        .video_button:focus,
+        .video_button:hover {
+          filter: brightness(170%);
+        }
       }
     }
-    .searchBox_img_top:focus,
-    .searchBox_img_top:hover {
-      filter: brightness(170%);
-    }
-    span {
-      margin-top: 7%;
+    // 智能设备复选框盒子
+    .perception_check {
+      width: 31vw;
+      height: 20vh;
+      border: 0.1px solid #485f6c;
+      display: flex;
+      color: #fff;
+      text-align: center;
+      // 按钮区域
+      .perception_btn {
+        width: 7vw;
+        height: 20vh;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .perception_button {
+          background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
+          background-size: 100% 100% !important;
+          width: 5vw;
+          height: 10vh;
+          margin: 0px auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 0px;
+          img {
+            width: 1.8vw;
+            height: 3.6vh;
+          }
+        }
+        .perception_button:focus,
+        .perception_button:hover {
+          filter: brightness(170%);
+        }
+      }
     }
   }
   /deep/.el-checkbox-group {
-    width: 70%;
+    width: 24vw;
     overflow: hidden;
     display: flex;
     justify-content: space-between;
     flex-flow: wrap;
-    padding: 15px 0px 0px 10px;
+    padding: 20px 5px 0px 5px;
     .el-checkbox {
       width: 30%;
       height: 4vh;
@@ -271,24 +351,6 @@ export default {
     .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/correlationEquipment2/components/videoForm.vue b/src/views/systemManagement/correlationEquipment/components/videoForm.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment2/components/videoForm.vue
rename to src/views/systemManagement/correlationEquipment/components/videoForm.vue
diff --git a/src/views/systemManagement/correlationEquipment/index.vue b/src/views/systemManagement/correlationEquipment/index.vue
index 139e0bf..dce060f 100644
--- a/src/views/systemManagement/correlationEquipment/index.vue
+++ b/src/views/systemManagement/correlationEquipment/index.vue
@@ -1,244 +1,157 @@
 <template>
   <!-- 关联设备 -->
-  <div>
-    <div class="main">
-      <!-- 卡片标题 -->
-      <el-card class="box-card">
-        <div class="topZS"></div>
-        <div class="bottomZS"></div>
-        <div slot="header" class="clearfix">
-          <span>关联设备</span>
-        </div>
-        <!-- 内容 -->
-        <div class="cardBody">
-          <!-- 左侧 -->
-          <div class="cardBodyLeft">
-            <!-- 左侧搜索框 -->
-            <div class="cardBodyLeft_search">
-              <el-input
-                class="cardBodyLeft_search_input"
-                placeholder="输入企业名称搜索"
-                v-model="searchCompany"
-              >
-              </el-input>
-              <div class="cardBodyLeft_search_button" @click="searchCom()">
-                <i class="el-icon-search"></i>
-              </div>
-            </div>
-            <!-- 公司树数据 -->
-            <div class="cardBodyLeft_footer">
-              <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.label"
-                  class="el-tree-node__label node-label"
-                >
-                  {{ node.label }}
-                </span>
-              </el-tree>
-            </div>
-          </div>
-          <el-divider direction="vertical"></el-divider>
-          <!-- 右侧 -->
-          <div class="cardBodyRight">
-            <p>设备列表</p>
-            <div class="cardBodyRight_search">
-              <div class="video">
-                <SearchBox
-                  ref="searchBox"
-                  :searchBoxData="searchBox_left_text"
-                  @clearList="clearList('1')"
-                  @backTypes="backTypes"
-                ></SearchBox>
-              </div>
-              <div class="intelligence">
-                <SearchBox
-                  ref="searchBox"
-                  :searchBoxData="searchBox_right_text"
-                  @clearList="clearList('2')"
-                  @backTypes="backTypes"
-                ></SearchBox>
-              </div>
-            </div>
-            <EquipmentTable
-              ref="equipmentTable"
-              :pushTableData="pushTableData"
-              :only_params="only_params"
-            ></EquipmentTable>
+  <el-card class="box-card">
+    <div class="topZS"></div>
+    <div class="bottomZS"></div>
+    <div slot="header" class="clearfix">
+      <span>关联设备</span>
+    </div>
+    <div class="cardBody">
+      <div class="left_tree">
+        <div class="left_search">
+          <el-input
+            class="left_search_input"
+            placeholder="输入企业名称搜索"
+            v-model="search_company"
+          >
+          </el-input>
+          <div class="left_search_button" @click="search_com()">
+            <i class="el-icon-search"></i>
           </div>
         </div>
-      </el-card>
+        <!-- 公司树数据 -->
+        <div class="cardBodyLeft_footer">
+          <el-tree
+            ref="company_tree"
+            :data="company_tree_data"
+            :props="defaultProps"
+            @node-click="handle_node_click"
+            node-key="subAreaCode"
+            :default-expand-all="defaultExpandAll"
+          >
+            <span
+              slot-scope="{ node }"
+              :title="node.label"
+              class="el-tree-node__label node-label"
+            >
+              {{ node.label }}
+            </span>
+          </el-tree>
+        </div>
+      </div>
+      <div class="right">
+        <SearchBox
+          ref="searchBox"
+          :only_params="only_params"
+          @push_data_to_table="push_data_to_table"
+        ></SearchBox>
+        <!-- 右下方表格区域 -->
+        <div class="right_table">
+          <EquipmentTable
+            ref="equipmentTable"
+            :push_table_data="push_table_data"
+          ></EquipmentTable>
+        </div>
+      </div>
     </div>
-  </div>
+  </el-card>
 </template>
-<script>
-import SearchBox from "./components/searchBox.vue";
-import EquipmentTable from "./components/equipmentTable.vue";
-import {
-  getAllData,
-  getVideoList,
-  getPerceptionList,
-} from "@/api/correlationEquipment";
+  <script>
+import { getAllData, getVideoList } from "@/api/correlationEquipment";
+import SearchBox from "./components/searchBox";
+import EquipmentTable from "./components/equipmentTable";
 export default {
-  name: "correlationEquipment",
+  name: "correlationEquipment2",
   components: {
     SearchBox,
     EquipmentTable,
   },
   data() {
     return {
-      searchCompany: "", // 公司搜索
-      companyTreeData: [], // 公司单位树
+      search_company: "",
+      company_tree_data: [], // 公司单位树
       defaultProps: {
         children: "children",
         label: "areaName",
       },
-      searchBox_left_text: {}, // 给子查询盒子传递字符和图片地址
-      searchBox_right_text: {},
-      pushTableData: [],
       defaultExpandAll: true, // 控制公司树默认展开
-      obtain_types: "", // 获得通知树形查询视频或者智能
-      only_params:{}, // 承接本页面最新状态下的查询入参，传给表格分页
+      only_params: {}, // 此为最终查询参数 一直查到表格查询
+      push_table_data: {}, // 传给右下方表格的数据
     };
   },
   created() {
-    // 默认打开宁波查询
     this.only_params = {
-      areaName: "宁波",
+      pageSize: 5,
+      pageNum: 1,
     };
-    getAllData(this.only_params).then((res) => {
-      if (res.code === 200) {
-        console.log("resning", res);
-        // 树形赋值
-        this.companyTreeData = res.data;
-        console.log("this.companyTreeData1", this.companyTreeData);
-        // 树形数据生成后，默认展示右下方表格数据
-        this.only_params = {
-          pageSize: 4,
-          pageNum: 1,
-          deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
-        };
-        getVideoList(this.only_params).then((res) => {
-          console.log("resVideoList", res.rows);
-          // res.row传给右下方表格数据
-          this.pushTableData = res.rows;
-        });
-      } else {
-        this.$message.warning("企业名称查询失败");
-      }
+    // 页面打开默认宁波查询
+    getAllData({ areaName: "宁波" }).then((res) => {
+      console.log("resning", res);
+      // 树形赋值
+      this.company_tree_data = res.data;
+      console.log("this.company_tree_data", this.company_tree_data);
+      // 与此同时，要展示右下方的表格数据
+      // 页面展开默认视频设备表格
+      getVideoList(this.only_params).then((res) => {
+        console.log("resVideoList", res.rows); //res.rows  res.total
+        // 传给右下方表格数据
+        this.push_table_data = res;
+        this.push_data_to_table(this.push_table_data,this.only_params,true);
+      });
     });
-    // 给子查询盒子传递字符和图片地址
-    // 左边盒子
-    this.searchBox_left_text = {
-      src: require("@/assets/companyFile/camera03.png"),
-      img_text: "视频监控设备",
-      btnList: [
-        { 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: [],
-      typesAll: "1",
-    };
-    // 右边盒子
-    this.searchBox_right_text = {
-      src: require("@/assets/companyFile/intelligence02.png"),
-      img_text: "智能感知设备",
-      btnList: [
-        { 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: [],
-      typesAll: "2",
-    };
   },
   methods: {
     // 企业名称放大镜查询
-    searchCom() {
-      this.only_params = {
-        areaName: this.searchCompany,
-      };
-      getAllData(this.only_params).then((res) => {
-        // 树形赋值
-        this.companyTreeData = res.data;
-        console.log("this.companyTreeData", this.companyTreeData);
-      });
+    // 支持模糊查询
+    search_com() {
+      getAllData({
+        areaName: this.search_company === "" ? "宁波" : this.search_company,
+      })
+        .then((res) => {
+          // 树形赋值
+          this.company_tree_data = res.data;
+          console.log("this.company_tree_data", this.company_tree_data);
+        })
+        .catch((err) => {
+          console.log("err", err);
+          this.$message.warning("查询失败,请输入正确查询条件");
+          this.company_tree_data = ""; // 清空树数据
+        });
     },
-    handleNodeClick(data) {
+    handle_node_click(data) {
       console.log("data123", data);
       // 视频查询List
-      this.searchBox_right_text.company_types = []; // 把视频和智能的已选标签清空
-      this.searchBox_left_text.company_types = [];
-      if (this.obtain_types === "" || this.obtain_types === "1") {
-        // 携带公司名查视频全部
-        this.only_params = {
-          pageSize: 4,
-          pageNum: 1,
-          company_id: data.subAreaCode, // 按选中公司名字检索视频监控数据
-          deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
-        };
-        getVideoList(this.only_params).then((res) => {
-          console.log("resVideoList", res.rows);
-          // res.row传给右下方表格数据
-          this.pushTableData = res.rows;
-        });
-      } else if (this.obtain_types === "2") {
-        // 携带公司名查智能全部
-        this.only_params = {
-          pageSize: 4,
-          pageNum: 1,
-          company_id: data.subAreaCode, // 按选中公司名字检索视频监控数据
-          devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11",
-        };
-        getPerceptionList(this.only_params).then((res) => {
-          if (res.code === 200) {
-            console.log("resVideoList", res.rows);
-            // res.row传给右下方表格数据
-            this.pushTableData = res.rows;
-          }
-        });
-      }
-    },
-    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 = [];
-      }
+      // 把视频和智能的已选标签清空
+      //   this.searchBox_right_text.company_types = [];
+      //   this.searchBox_left_text.company_types = [];
+      // 点击树数据时携带公司名查视频全部 点击就切回查视频设备
+      this.only_params = {
+        pageSize: 5,
+        pageNum: 1,
+        companyId: data.subAreaCode, // 按选中公司名字检索视频设备数据
+        // deviceVideoSubType: "1,2,3,4,5,6,7,8,9",
+      };
+      this.$refs.searchBox.clear_search_list();
+      getVideoList(this.only_params).then((res) => {
+        console.log("resVideoList", res.rows);
+        this.push_table_data = res;
+        this.push_data_to_table(this.push_table_data,this.only_params,true);
+      });
     },
-    backTypes(num) {
-      console.log("num0000", num);
-      this.obtain_types = num;
+    push_data_to_table(data,params,flag) {
+      this.$refs.equipmentTable.obtain_table_data(data,params,flag);
     },
   },
 };
 </script>
-<style lang="less" scoped>
+  <style lang="less" scoped>
 /* card统一样式 */
 .el-card.box-card.is-always-shadow {
-  height: calc(100vh - 116px); /* 控制card布局高度,用于适配 */
+  border: 0px;
+  height: 88.5vh; /* 控制card布局高度,用于适配 */
   position: relative;
+  background: url("~@/assets/companyFile/22136.png") no-repeat !important;
+  background-size: 100% 100% !important;
 }
 /* card统一样式 */
 /deep/.el-card__header {
@@ -252,189 +165,152 @@ export default {
     }
   }
 }
-.main {
-  height: 100%;
-  .el-card.box-card.is-always-shadow {
-    background: url("~@/assets/companyFile/22136.png") no-repeat !important;
-    background-size: 100% 100% !important;
-    border: 0px;
-  }
-  .cardBody {
-    width: 100%;
-    display: flex;
-    height: 80vh;
-    /* 左侧 */
-    .cardBodyLeft {
-      width: 25%;
-      height: 75vh;
-      background: rgba(23, 36, 36, 0.4);
-      border: 0.5px solid #485f6c;
-      border-radius: 4px;
-      .cardBodyLeft_search {
-        display: flex;
-        margin-top: 5%;
-        margin-left: 5%;
-        width: 90%;
-        height: 40px;
-        .cardBodyLeft_search_input ::v-deep {
-          /* 查询框 */
-          width: 90%;
-          .el-input__inner {
-            border-radius: 4px 0px 0px 4px;
-            background: #3c4b4a;
-            color: #fff;
-          }
-          /* 查询框点击颜色变化 */
-          .el-input__inner:focus,
-          .el-input__inner:hover {
-            border-color: #1b3736;
-          }
+.cardBody {
+  display: flex;
+  justify-content: space-between;
+  .left_tree {
+    width: 20vw;
+    height: 78vh;
+    border: 0.1px solid #485f6c;
+    background: linear-gradient(#314241, #1b2929, #121e1d);
+    .left_search {
+      display: flex;
+      margin-top: 5%;
+      margin-left: 5%;
+      width: 90%;
+      height: 40px;
+      .left_search_input ::v-deep {
+        /* 查询框 */
+        width: 87%;
+        .el-input__inner {
+          border-radius: 4px 0px 0px 4px;
+          background: #3c4b4a;
+          color: #fff;
         }
-        .cardBodyLeft_search_button {
-          width: 10%;
-          height: 100%;
-          border-radius: 0px 4px 4px 0px;
-          background: #0e3936;
-          text-align: center;
-          font-size: 28px;
-          cursor: pointer;
-          .el-icon-search {
-            color: #fff;
-            padding: 12% 0;
-          }
+        /* 查询框点击颜色变化 */
+        .el-input__inner:focus,
+        .el-input__inner:hover {
+          border-color: #1b3736;
         }
-        .cardBodyLeft_search_button:focus,
-        .cardBodyLeft_search_button:hover {
-          /* 放大镜点击特效 */
-          background: #126a58;
+      }
+      .left_search_button {
+        width: 13%;
+        height: 100%;
+        border-radius: 0px 4px 4px 0px;
+        background: #0e3936;
+        text-align: center;
+        font-size: 28px;
+        cursor: pointer;
+        .el-icon-search {
+          color: #fff;
+          padding: 12% 0;
         }
       }
-      .cardBodyLeft_footer {
-        width: 90%;
-        margin-left: 5%;
-        margin-top: 3vh;
-        height: 69vh;
-        .el-tree {
-          /* 树形数据过长添加滚动条 */
-          height: 65vh;
-          overflow: auto;
-          // box-shadow: 5px 5px 10px #126a58;
-          border-radius: 4px;
-          background: #293738;
-          color: #fff !important;
-          /deep/.el-tree-node__content {
-            height: 50px;
-          }
-          .el-tree-node__label.node-label {
-            display: flex;
-            font-size: 18px;
-          }
-          /* 去掉树形数据前面的三角形 */
-          /deep/.el-icon-caret-right:before {
-            content: "";
-          }
-          .node-label {
-            /* 树形数据横向过长添加展开 */
-            width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-          /* hover节点时的背景颜色 */
-          ::v-deep .el-tree-node__content:hover {
-            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: #495461;
-            color: #fff;
-            text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
-          }
+      .left_search_button:focus,
+      .left_search_button:hover {
+        /* 放大镜点击特效 */
+        background: #126a58;
+      }
+    }
+    .cardBodyLeft_footer {
+      width: 90%;
+      margin-left: 5%;
+      margin-top: 3vh;
+      height: 69vh;
+      .el-tree {
+        /* 树形数据过长添加滚动条 */
+        height: 65vh;
+        overflow: auto;
+        // box-shadow: 5px 5px 10px #126a58;
+        border-radius: 4px;
+        //   background: #293738;
+        background: rgba(0, 0, 0, 0);
+        border: 0.1px solid #485f6c;
+        color: #fff !important;
+        /deep/.el-tree-node__content {
+          height: 50px;
         }
-        // 没有展开且有子节点
-        .el-tree /deep/ .el-icon-caret-right:before {
-          background: url("~@/assets/companyFile/add.png") no-repeat;
-          content: "";
-          display: block;
-          width: 23px;
-          height: 23px;
-          font-size: 23px;
-          background-size: 23px;
+        .el-tree-node__label.node-label {
+          display: flex;
+          font-size: 16px;
         }
-        // 已经展开且有子节点
-        .el-tree
-          /deep/
-          .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
-          background: url("~@/assets/companyFile/add.png") no-repeat;
+        /* 去掉树形数据前面的三角形 */
+        /deep/.el-icon-caret-right:before {
           content: "";
-          display: block;
-          width: 23px;
-          height: 23px;
-          font-size: 23px;
-          background-size: 23px;
         }
-        // 没有子节点 minus
-        .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
-          background: url("~@/assets/companyFile/minus.png") no-repeat;
-          content: "";
-          display: block;
-          width: 23px;
-          height: 23px;
-          font-size: 23px;
-          background-size: 23px;
+        .node-label {
+          /* 树形数据横向过长添加展开 */
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
-        .el-tree::-webkit-scrollbar {
-          width: 9px;
-          background-color: #5e666a;
-          border-radius: 4px;
+        /* hover节点时的背景颜色 */
+        ::v-deep .el-tree-node__content:hover {
+          background: #495461;
+          color: #fff;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
         }
-        .el-tree::-webkit-scrollbar-thumb {
-          width: 8px;
-          background-color: #3c4b4a;
-          border-radius: 4px;
+        /* 节点选中的背景颜色 */
+        ::v-deep .el-tree-node:focus > .el-tree-node__content {
+          background: #495461;
+          color: #fff;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
         }
       }
-    }
-    /* 竖分割线 */
-    .el-divider.el-divider--vertical {
-      opacity: 0;
-      margin-left: 13px;
-      height: 100%;
-    }
-    /* 右侧 */
-    .cardBodyRight {
-      p {
-        margin-left: 10px;
-        height: 18px;
-        color: #fff;
-        font-size: 18px;
-        text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+      // 没有展开且有子节点
+      .el-tree /deep/ .el-icon-caret-right:before {
+        background: url("~@/assets/companyFile/add.png") no-repeat;
+        content: "";
+        display: block;
+        width: 23px;
+        height: 23px;
+        font-size: 23px;
+        background-size: 23px;
       }
-      width: 74%;
-      height: 75vh;
-      border-radius: 4px;
-      background: rgba(31, 45, 49, 0.4);
-      border: 0.5px solid #485f6c;
-      .cardBodyRight_search {
-        display: flex;
-        justify-content: space-evenly;
-        width: 63vw;
-        height: 20vh;
-        .video {
-          width: 48%;
-          height: 100%;
-          background: #3b5153;
-          border-radius: 4px;
-        }
-        .intelligence {
-          width: 48%;
-          height: 100%;
-          background: #3b5153;
-          border-radius: 4px;
-        }
+      // 已经展开且有子节点
+      .el-tree
+        /deep/
+        .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+        background: url("~@/assets/companyFile/add.png") no-repeat;
+        content: "";
+        display: block;
+        width: 23px;
+        height: 23px;
+        font-size: 23px;
+        background-size: 23px;
+      }
+      // 没有子节点 minus
+      .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
+        background: url("~@/assets/companyFile/minus.png") no-repeat;
+        content: "";
+        display: block;
+        width: 23px;
+        height: 23px;
+        font-size: 23px;
+        background-size: 23px;
       }
+      .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;
+      }
+    }
+  }
+  .right {
+    width: 64vw;
+    height: 78vh;
+    // border: 0.1px solid #485f6c;
+    .right_table {
+      margin-top: 1vh;
+      width: 64vw;
+      height: 52vh;
+      // border: 0.1px solid #485f6c;
     }
   }
 }
diff --git a/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue b/src/views/systemManagement/correlationEquipment2/components/addPerceptionDialog.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
rename to src/views/systemManagement/correlationEquipment2/components/addPerceptionDialog.vue
diff --git a/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue b/src/views/systemManagement/correlationEquipment2/components/addVideoDialog.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue
rename to src/views/systemManagement/correlationEquipment2/components/addVideoDialog.vue
diff --git a/src/views/systemManagement/correlationEquipment/components/deriveDialog.vue b/src/views/systemManagement/correlationEquipment2/components/deriveDialog.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment/components/deriveDialog.vue
rename to src/views/systemManagement/correlationEquipment2/components/deriveDialog.vue
diff --git a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
index d890e1d..41ffa34 100644
--- a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
@@ -1,390 +1,261 @@
 <template>
-  <div>
-    <div v-if="table_flag" class="equipment_table_video">
-      <div class="table_title">视频监控设备列表</div>
-      <div class="table_search">
-        <el-form :model="search" class="table_search_form">
+  <!-- 设备表格 -->
+  <div class="equipment_data">
+    <p>{{ table_title }}</p>
+    <!-- 查询表 -->
+    <div v-if="display_search" class="equipment_data_search">
+      <el-form :inline="true" :model="search" class="search_data">
+        <el-form-item>
+          <el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
+        </el-form-item>
+        <el-form-item>
           <el-form-item>
-            <el-input
-              v-model="search.deviceName"
-              placeholder="输入设备名称搜索"
-            ></el-input>
+            <el-input v-model="search.channel_code" placeholder="输入通道国际编码搜索"></el-input>
           </el-form-item>
-          <el-form-item>
-            <el-input
-              v-model="search.gbsChannelNo"
-              placeholder="输入通道国际编码搜索"
-            ></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-input
-              v-model="search.deviceIp"
-              placeholder="输入设备IP搜索"
-            ></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="video_search">搜索</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="video_reset">重置</el-button>
-          </el-form-item>
-        </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)"
-        >
-          <i :class="`el-icon-${item.icon}`" />
-          {{ item.label }}</el-button
-        >
-      </div>
-      <div class="table_video">
-        <el-table
-          :cell-style="{ background: 'revert' }"
-          :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>
-          <el-table-column
-            v-for="item in table_column_video"
-            :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"
-                class="operation"
-                @click="open_video_dialog('5', scope.row)"
-                >编辑
-              </el-button>
-              <el-button
-                size="small"
-                class="operation"
-                @click="open_video_dialog('6', scope.row)"
-                >详情
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="table_pagination">
-        <el-pagination
-          :background="true"
-          @current-change="handleCurrentChange"
-          :page-sizes="[5]"
-          :page-size="pageSize"
-          :current-page="pageNum"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="search.equipment_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_table_perception">
-      <div class="table_title">智能感知设备列表</div>
-      <div class="table_search">
-        <el-form :model="search" class="table_search_form">
+    <div v-else class="equipment_data_search">
+      <el-form :inline="true" :model="search" class="search_data">
+        <el-form-item>
+          <el-input v-model="search.equipment" placeholder="输入设备名称搜索"></el-input>
+        </el-form-item>
+        <el-form-item>
           <el-form-item>
-            <el-input
-              v-model="search_p.deviceName"
-              placeholder="输入设备名称搜索"
-            ></el-input>
+            <el-input v-model="search.ip" placeholder="输入IP名称搜索"></el-input>
           </el-form-item>
-          <el-form-item>
-            <el-input
-              v-model="search_p.deviceIp"
-              placeholder="输入设备IP搜索"
-            ></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="perception_search">搜索</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="perception_reset">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <div class="table_btn_list">
-        <el-button
-          v-for="item in btn_list"
-          :key="item.value"
-          @click="open_perception_dialog(item.value)"
-        >
-          <i :class="`el-icon-${item.icon}`" />
-          {{ item.label }}</el-button
-        >
-      </div>
-      <div class="table_perception">
-        <el-table
-          :cell-style="{ background: 'revert' }"
-          :header-cell-style="table_header"
-          :data="table_data"
-          :highlight-current-row="true"
-          @selection-change="handle_perception_change"
-          height="336"
-        >
-          <el-table-column type="selection" width="55"> </el-table-column>
-          <el-table-column
-            v-for="item in table_column_perception"
-            :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"
-                class="operation"
-                @click="open_perception_dialog('5', scope.row)"
-                >编辑
-              </el-button>
-              <el-button
-                size="small"
-                class="operation"
-                @click="open_perception_dialog('6', scope.row)"
-                >详情
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="table_pagination">
-        <el-pagination
-          :background="true"
-          @current-change="handleCurrentChangePerception"
-          :page-sizes="[5]"
-          :page-size="pageSize"
-          :current-page="pageNum"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="onSubmit">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 增删按钮 -->
+    <div class="equipment_data_btn">
+      <el-button v-for="item in btnList" :key="item.value" @click="openDialog(item.value)">
+        <i :class="`el-icon-${item.icon}`" />
+        {{ item.label }}</el-button>
     </div>
-    <!-- 视频设备表单弹窗 -->
-    <VideoForm ref="videoForm" @refresh_video="refresh_video"></VideoForm>
-    <!-- 删除视频设备表单弹窗 -->
-    <DeleteVideo ref="deleteVideo" @refresh_video="refresh_video"></DeleteVideo>
-    <!-- 导入视频设备弹窗 -->
-    <ImportVideo ref="importVideo"></ImportVideo>
-    <!-- 导出视频设备弹窗 -->
-    <ExportVideo ref="exportVideo"></ExportVideo>
-    <!-- 智能设备表单弹窗 -->
-    <PerceptionForm
-      ref="perceptionForm"
-      @refresh_perception="refresh_perception"
-    ></PerceptionForm>
-    <!-- 删除智能设备表单弹窗 -->
-    <DeletePerception
-      ref="deletePerception"
-      @refresh_perception="refresh_perception"
-    ></DeletePerception>
-    <!-- 导入智能设备弹窗 -->
-    <ImportPerception ref="importPerception"></ImportPerception>
-    <!-- 导出智能设备弹窗 -->
-    <ExportPerception ref="exportPerception"></ExportPerception>
+    <!-- 表格 -->
+    <div class="equipment_data_table">
+      <el-table :cell-style="{ background: 'revert' }" :header-cell-style="table_header" :data="pushTableData"
+        :highlight-current-row="true" height="250">
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column v-for="item in tableColumn" :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" class="operation" @click="openDialog('2', scope.row)">编辑
+            </el-button>
+            <el-button size="small" class="operation" @click="openDialog('5', scope.row)">详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="equipment_data_pagination">
+      <el-pagination :background="true" @current-change="handleCurrentChange" :page-sizes="[4]" :page-size="PageSize"
+        :current-page="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pushTableData.length">
+      </el-pagination>
+    </div>
+    <AddVideoDialog ref="addVideoDialog"></AddVideoDialog>
+    <AddPerceptionDialog ref="addPerceptionDialog"></AddPerceptionDialog>
+    <UploadDialog ref="uploadDialog"></UploadDialog>
+    <DeriveDialog ref="deriveDialog" :table_title="table_title"></DeriveDialog>
   </div>
 </template>
 <script>
+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";
-import VideoForm from "./videoForm";
-import DeleteVideo from "./deleteVideo";
-import ImportVideo from "./importVideo";
-import ExportVideo from "./exportVideo";
-import PerceptionForm from "./perceptionForm";
-import DeletePerception from "./deletePerception";
-import ImportPerception from "./importPerception";
-import ExportPerception from "./exportPerception"
 export default {
-  name:'EquipmentTable',
+  name: "EquipmentTable",
   components: {
-    VideoForm,
-    DeleteVideo,
-    ImportVideo,
-    ExportVideo,
-    PerceptionForm,
-    DeletePerception,
-    ImportPerception,
-    ExportPerception,
+    AddPerceptionDialog,
+    AddVideoDialog,
+    UploadDialog,
+    DeriveDialog,
+  },
+  props: {
+    pushTableData: [],
+    only_params: {},
   },
   data() {
     return {
-      table_flag: true,
-      // 视频查询
+      table_title: "视频监控设备列表", // 表格主题
+      display_search: true, // 判断展示对应查询项
+      search_params_table: {}, // 承接传过来的表格查询入参
       search: {
-        deviceName: "",
-        gbsChannelNo: "",
-        deviceIp: "",
-      },
-      // 智能查询
-      search_p: {
-        deviceName: "",
-        deviceIp: "",
+        equipment: "",
+        ip: "",
+        channel_code: "",
+        equipemnt_ip: "",
       },
-      btn_list: [
+      btnList: [
         { value: "1", label: "新增", icon: "plus" },
         { value: "2", label: "删除", icon: "delete" },
         { value: "3", label: "导入", icon: "bottom-right" },
         { value: "4", label: "导出", icon: "top-left" },
       ],
-      table_data: [],
-      table_column_video: [
+      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: "设备维度" },
       ],
-      table_column_perception: [
+      // 智能表头
+      tableColumn_preception: [
         { prop: "deviceName", label: "设备名称", width: "270" },
         { prop: "devicePerceptionSubTypeCn", label: "设备类型" },
         { prop: "deviceIp", label: "设备IP" },
+        // { prop: "longitude", label: "设备经度" },
+        // { prop: "latitude", label: "设备维度" },
         { prop: "orientationCn", label: "进出方向" },
       ],
-      handle_video: "", // 选中视频表格数据
-      handle_perception: "", // 选中智能表格数据
-      pageSize: 0,
-      pageNum: 0,
-      only_params: {},
-      total: 0,
+      table_params: {}, // 本页面查询入参
+      pageSize: 4,
+      pageNum: 1,
+      total: 0, // 信息总数
     };
   },
   created() {
-    this.table_column = this.table_column_video;
+    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;
+      this.only_params = data.search_params; // 如果点击了标签查询
+      console.log("this.pushTableData", this.pushTableData);
+      this.search_params_table = data.search_params;
+    });
   },
   methods: {
-    obtain_table_data(data, params, flag) {
-      this.table_flag = flag;
-      console.log("data_1", data);
-      this.table_data = data.rows;
-      this.total = data.total;
-      this.pageSize = params.pageSize;
-      this.pageNum = params.pageNum;
-      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;
+    // 智能搜索
+    onSubmit() {
+      this.only_params = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        deviceIp: this.search.ip,
+        deviceName: this.search.equipment,
+      };
+      Object.assign(this.only_params, this.search_params_table);
+      getPerceptionList(this.only_params).then((res) => {
+        // res.row传给右下方表格数据
+        this.pushTableData = res.rows;
       });
     },
-    refresh_perception() {
+    // 智能搜索重置
+    reset() {
+      (this.search.equipment = ""), (this.search.ip = "");
+      this.only_params = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        deviceIp: this.search.ip,
+        deviceName: this.search.equipment,
+      };
+      Object.assign(this.only_params, this.search_params_table);
       getPerceptionList(this.only_params).then((res) => {
-        this.table_data = res.rows;
-        this.total = res.total;
+        // res.row传给右下方表格数据
+        this.pushTableData = res.rows;
       });
     },
-    // 视频设备查询
-    video_search() {
-      this.only_params = Object.assign(this.only_params, this.search);
+    // 视频搜索
+    onSubmitVideo() {
+      this.only_params = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        gbsChannelNo: this.search.channel_code,
+        deviceIp: this.search.equipemnt_ip,
+        deviceName: this.search.equipment,
+      };
+      Object.assign(this.only_params, this.search_params_table);
       getVideoList(this.only_params).then((res) => {
-        this.table_data = res.rows;
-        this.total = res.total;
+        // res.row传给右下方表格数据
+        this.pushTableData = res.rows;
       });
     },
-    // 视频设备重置
-    video_reset() {
-      // 查询项清空
-      this.search.gbsChannelNo = "";
-      this.search.deviceName = "";
-      this.search.deviceIp = "";
-      this.only_params = Object.assign(this.only_params, this.search);
+    // 视频搜索重置
+    resetVideo() {
+      (this.search.channel_code = ""),
+        (this.search.equipemnt_ip = ""),
+        (this.search.equipment = "");
+      this.only_params = {
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        gbsChannelNo: this.search.channel_code,
+        deviceIp: this.search.equipemnt_ip,
+        deviceName: this.search.equipment,
+      };
+      Object.assign(this.only_params, this.search_params_table);
       getVideoList(this.only_params).then((res) => {
-        this.table_data = res.rows;
-        this.total = res.total;
-      });
-    },
-    // 智能查询
-    perception_search() {
-      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.table_data = res.rows;
-        this.total = res.total;
+        // res.row传给右下方表格数据
+        this.pushTableData = res.rows;
       });
     },
-    // 视频设备增删改导
-    open_video_dialog(num, row) {
+    openDialog(num, row) {
+      console.log(num, "num");
       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);
+        // 新增弹窗
+        console.log(num, "num");
+        if (this.table_title === "视频监控设备列表") {
+          this.$refs.addVideoDialog.open(num);
+        } else if (this.table_title === "智能感知设备列表") {
+          this.$refs.addPerceptionDialog.open(num);
         }
-      } else if (num === "3") {
-        // 导入视频设备
-        this.$refs.importVideo.open();
-      } else if (num === "4") {
-        // 导出视频设备
-        this.$refs.exportVideo.open();
-      } else if (num === "5") {
-        // 修改视频设备
-        this.$refs.videoForm.open(num, row);
-      } else if (num === "6") {
-        // 详情视频设备
-        this.$refs.videoForm.open(num, row);
-      }
-    },
-    // 智能感应增删改导
-    open_perception_dialog(num, row) {
-      if (num === "1") {
-        // 新增智能感知
-        this.$refs.perceptionForm.open(num);
       } else if (num === "2") {
-        // 删除智能设备
-        if (this.handle_perception.length != 1) {
-          this.$message.warning("请选择一条表格数据");
-        } else {
-          this.$refs.deletePerception.open(this.handle_perception);
+        // 编辑弹窗
+        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.importPerception.open();
+        // 导入弹窗
+        this.$refs.uploadDialog.open();
       } else if (num === "4") {
-        // 导出智能设备
-        this.$refs.exportPerception.open();
+        // 导出弹窗
+        this.$refs.deriveDialog.open();
       } else if (num === "5") {
-        // 修改智能设备
-        this.$refs.perceptionForm.open(num, row);
-      } else if (num === "6") {
-        // 详情视频设备
-        this.$refs.perceptionForm.open(num, row);
+        // 编辑弹窗
+        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);
+        }
       }
     },
-    // 选择视频表格数据
-    handle_video_change(val) {
-      console.log("val_handle", val);
-      this.handle_video = val;
-    },
-    // 选择智能表格数据
-    handle_perception_change(val) {
-      this.handle_perception = val;
-    },
     table_header({ row, rowIndex }) {
       console.log(row);
       console.log(rowIndex);
@@ -392,53 +263,42 @@ export default {
         color: "#fff",
       };
     },
-    // 视频表格分页
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
-      this.only_params.pageNum = val;
-      getVideoList(this.only_params).then((res) => {
-        this.table_data = res.rows;
-      });
-    },
-    // 智能表格分页
-    handleCurrentChangePerception(val) {
-      console.log(`当前页: ${val}`);
-      this.only_params.pageNum = val;
-      getPerceptionList(this.only_params).then((res) => {
-        this.table_data = res.rows;
-      });
+      this.only_params.pageNum = val
+      console.log('this.only_params', this.only_params);
+      if (this.table_title === "视频监控设备列表") {
+        getVideoList(this.only_params).then((res) => {
+          this.pushTableData = res.rows;
+        });
+      } else if (this.table_title === "智能感知设备列表") {
+        getPerceptionList(this.only_params).then((res) => {
+          this.pushTableData = res.rows;
+        });
+      }
     },
   },
 };
 </script>
 <style lang="less" scoped>
-.equipment_table_video,
-.equipment_table_perception {
-  .table_title {
+.equipment_data {
+  p {
     color: #fff;
     text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
     margin-left: 10px;
-    font-size: 17px;
   }
-  .table_search {
-    margin-top: 1vh;
-    width: 64vw;
-    height: 4vh;
-    .table_search_form {
-      display: flex;
-      .el-form-item {
-        margin-left: 0.5vw;
-      }
-    }
+
+  .equipment_data_search {
+    margin-left: 12px;
+
     /deep/.el-input__inner {
       border-radius: 0px 0px 0px 0px;
       background: #3c4b4a;
       color: #fff;
-      width: 10vw;
     }
 
     .el-button {
-      width: 4vw;
+      width: 100%;
       border: 1px solid #4a6072;
       color: #fff;
       border-radius: 0px !important;
@@ -452,9 +312,10 @@ export default {
       background-size: 100% 100% !important;
     }
   }
-  .table_btn_list {
-    width: 64vw;
-    height: 5vh;
+
+  .equipment_data_btn {
+    margin-left: 12px;
+
     .el-button {
       width: 90px;
       height: 5vh;
@@ -464,120 +325,134 @@ export default {
       background: url("~@/assets/companyFile/btn1.png") no-repeat !important;
       background-size: 100% 100% !important;
     }
+
     .el-button:focus,
     .el-button:hover {
       filter: brightness(200%);
       text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
     }
   }
-  .table_video {
-    width: 64vw;
-    height: 34vh;
-    margin-left: 10px;
-  }
-  /deep/.el-table {
-    width: 98.2%;
-    .el-table__body-wrapper {
-      overflow: auto;
-      background: #233438;
+
+  .equipment_data_table {
+    width: calc(100% - 30px);
+    margin-top: 12px;
+    margin-left: 12px;
+    height: 27vh;
+
+    .el-table,
+    .el-table__expanded-cell {
       color: #fff;
-      &::-webkit-scrollbar {
-        width: 3px;
-      }
+      background-color: transparent;
 
-      // 滚动条里面默认的小方块,自定义样式
-      &::-webkit-scrollbar-thumb {
-        background: #4cf993;
-        border-radius: 2px;
-      }
+    }
+
+    /deep/.el-table {
+      .el-table__body-wrapper {
+
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+          width: 3px;
+        }
+
+        // 滚动条里面默认的小方块,自定义样式
+        &::-webkit-scrollbar-thumb {
+          background: #4CF993;
+          border-radius: 2px;
+        }
+
+        // 滚动条里面的轨道
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
 
-      // 滚动条里面的轨道
-      &::-webkit-scrollbar-track {
-        background: transparent;
       }
-    }
 
-    thead {
-      text-align: center;
-      color: #fff;
-      font-weight: 500;
-      background: linear-gradient(
-        to right,
-        #284f49,
-        #2f6363,
-        #233b38
-      ) !important;
+      thead {
+        text-align: center;
+        color: #fff;
+        font-weight: 500;
+        background: linear-gradient(to right,
+            #284f49,
+            #2f6363,
+            #233b38) !important;
 
-      & th {
-        background-color: transparent;
+        & th {
+          background-color: transparent;
+        }
+
+        & tr {
+          background-color: transparent;
+        }
       }
 
-      & tr {
-        background-color: transparent;
+      tr {
+        background: #233438;
       }
     }
 
-    tr {
-      background: #233438;
+    .el-table::before {
+      //去除底部白线
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 0px;
     }
-  }
-  /deep/.el-button.operation {
-    width: 40px;
-    height: 30px;
-    background-color: rgb(35 52 56);
-    border: 0px;
-    color: #2fabdc;
-  }
 
-  /deep/.el-button.operation:hover,
-  .el-button.operation:focus {
-    width: 40px;
-    height: 30px;
-    background-color: rgb(35 52 56 0);
-    border: 0px;
-    color: #2fabdc;
-    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    /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);
+    }
   }
-  .table_pagination {
-    width: 64vw;
-    height: 5vh;
-    .el-pagination {
-      margin-left: 50%;
-      margin-top: 2vh;
 
-      /deep/.el-pagination__total {
-        color: #fff;
-      }
+  .el-pagination {
+    margin-left: 50%;
 
-      /deep/.el-input__inner {
-        border-radius: 0px;
-        background: #3c4b4a;
-        color: #fff;
-      }
+    /deep/.el-pagination__total {
+      color: #fff;
+    }
 
-      /deep/.btn-prev {
-        border-radius: 0px;
-        background: #3c4b4a;
-        color: #fff;
-      }
+    /deep/.el-input__inner {
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
 
-      /deep/ul {
-        li {
-          background: #3c4b4a;
-          color: #fff;
-        }
-      }
+    /deep/.btn-prev {
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
 
-      /deep/.btn-next {
-        border-radius: 0px;
+    /deep/ul {
+      li {
         background: #3c4b4a;
         color: #fff;
       }
+    }
 
-      /deep/ .el-pager {
-        li {
-          background: #3c4b4a !important;
-        }
+    /deep/.btn-next {
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+
+    /deep/ .el-pager {
+      li {
+        background: #3c4b4a !important;
       }
     }
   }
diff --git a/src/views/systemManagement/correlationEquipment2/components/searchBox.vue b/src/views/systemManagement/correlationEquipment2/components/searchBox.vue
index 7adc432..b8ddc3f 100644
--- a/src/views/systemManagement/correlationEquipment2/components/searchBox.vue
+++ b/src/views/systemManagement/correlationEquipment2/components/searchBox.vue
@@ -1,332 +1,252 @@
 <template>
-  <!-- 视频设备、智能设备查询 -->
-  <div class="search_box">
-    <div class="box_title">设备列表</div>
-    <div class="search_check">
-      <!-- 视频设备查询条件 -->
-      <div class="video_check">
-        <div class="video_btn">
-          <el-button class="video_button" @click="video_all_check">
-            <img :src="video_btn_img_src" alt="" />
-          </el-button>
-          <div class="video_text">{{ video_text }}</div>
-        </div>
-        <el-checkbox-group v-model="video_checkgroup">
-          <el-checkbox
-            class="video_checks"
-            v-for="item in video_btn_list"
-            :key="item.value"
-            :label="item.name"
-            @change="video_check_search($event, item.value)"
-          >
-            {{ item.name }}</el-checkbox
-          >
-        </el-checkbox-group>
-      </div>
-      <!-- 智能设备查询条件 -->
-      <div class="perception_check">
-        <div class="perception_btn">
-          <el-button class="perception_button" @click="perception_all_check">
-            <img :src="perception_btn_img_src" alt="" />
-          </el-button>
-          <div class="perception_text">{{ perception_text }}</div>
-        </div>
-        <el-checkbox-group v-model="perception_checkgroup">
-          <el-checkbox
-            class="perception_checks"
-            v-for="item in perception_btn_list"
-            :key="item.value"
-            :label="item.name"
-            @change="perception_check_search($event, item.value)"
-          >
-            {{ item.name }}</el-checkbox
-          >
-        </el-checkbox-group>
-      </div>
+  <!-- 关联设备的右侧查询盒子 -->
+  <div class="searchBox_body">
+    <div class="searchBox_img">
+      <el-button
+        class="searchBox_img_top"
+        @click="change_types(searchBoxData.typesAll)"
+      >
+        <img :src="searchBoxData.src" alt="" />
+      </el-button>
+      <span>{{ searchBoxData.img_text }}</span>
     </div>
+    <el-checkbox-group v-model="searchBoxData.company_types">
+      <el-checkbox
+        class="searchBox_btn"
+        v-for="item in searchBoxData.btnList"
+        :key="item.value"
+        @change="sendClearList($event, item.type, item.value)"
+        :label="item.name"
+        name="type"
+      >
+        {{ 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",
+  name: "searchBox",
   props: {
-    only_params: {}, // 主页传来的查询入参，会在本页面添加更多查询入参
+    searchBoxData: {},
   },
   data() {
     return {
-      video_checkgroup: [], // 视频设备复选框双向绑定
-      deviceVideoSubTypes: [], // 视频设备点击查询添加参数
-      video_btn_list: [
-        { 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" },
-      ],
-      video_btn_img_src: require("@/assets/companyFile/camera03.png"),
-      video_text: "视频监控设备",
-      perception_checkgroup: [], // 智能设备复选框双向绑定
-      devicePerceptionSubTypes: [], // 智能设备点击查询添加参数
-      perception_btn_list: [
-        { 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" },
-      ],
-      perception_btn_img_src: require("@/assets/companyFile/intelligence02.png"),
-      perception_text: "智能感知设备",
-      check_push_table_data: {}, // 复选框查询的表格数据传递给表格
-      flag: true,
+      pushValue: {
+        title: "",
+        pushTableData: [],
+        search_params:{}, // 最新的查询入参
+      },
+      types_params_list: [], // 选中视频企业类型对应的id
+      per_types_params_list: [], // 选中智能企业类型对应的id
+      back_types:'', // 通知树形，是视频检索还是智能检索
     };
   },
+  created() {},
   methods: {
-    clear_search_list() {
-      this.video_checkgroup = []; // 视频设备复选框清空
-      this.perception_checkgroup = []; //智能设备复选框清空
-      this.deviceVideoSubTypes = []; // 视频设备复选框清空
-      this.devicePerceptionSubTypes = []; // 智能查询参数清空
-      delete this.only_params.deviceVideoSubType;
-      delete this.only_params.devicePerceptionSubType;
-    },
-    // 视频设备按钮查全部
-    video_all_check() {
-      this.perception_checkgroup = []; //智能设备复选框清空
-      this.video_checkgroup = []; // 视频设备复选框清空
-      this.deviceVideoSubTypes = []
-      this.devicePerceptionSubTypes = [];
-      delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
-      this.only_params.deviceVideoSubTypes = ""; // 按钮查视频设备的全部
-      this.flag = true;
-      getVideoList(this.only_params).then((res) => {
-        console.log("res_video", res);
-        this.check_push_table_data = res;
-        this.$emit(
-          "push_data_to_table",
-          this.check_push_table_data,
-          this.only_params,
-          this.flag
-        ); // 传给父亲，再转给兄弟Table
-      });
-    },
-    // 智能设备按钮查全部
-    perception_all_check() {
-      this.perception_checkgroup = []; //智能设备复选框清空
-      this.video_checkgroup = []; // 视频设备复选框清空
-      this.deviceVideoSubTypes = []
-      this.devicePerceptionSubTypes = [];
-      delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
-      this.only_params.devicePerceptionSubTypes = ""; // 按钮查智能设备的全部
-      this.flag = false;
-      getPerceptionList(this.only_params).then((res) => {
-        console.log("res_video", res);
-        this.check_push_table_data = res;
-        this.$emit(
-          "push_data_to_table",
-          this.check_push_table_data,
-          this.only_params,
-          this.flag
-        ); // 传给父亲，再转给兄弟Table
-      });
-    },
-    // 视频设备复选查询
-    video_check_search(e, value) {
+    async sendClearList(e, item, value) {
       if (e) {
-        // 点击
-        delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
-        this.perception_checkgroup = []; //智能设备复选框清空
-        this.devicePerceptionSubTypes = []; // 智能查询参数清空
-        this.deviceVideoSubTypes.push(value); // 收集视频类型查询入参
-        this.only_params.deviceVideoSubTypes =
-          this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
-        this.flag = true;
-        getVideoList(this.only_params).then((res) => {
-          console.log("res_video", res);
-          this.check_push_table_data = res;
-          this.$emit(
-            "push_data_to_table",
-            this.check_push_table_data,
-            this.only_params,
-            this.flag
-          ); // 传给父亲，再转给兄弟Table
-        });
+        // 单点确定要查询的时候
+        // 复选框单独点击时查询表格数据
+        this.$emit("clearList"); // 先执行清空邻复选框
+        // 切换表格标题
+        console.log("item123", item);
+        if (item === "1") {
+          this.back_types = item
+          this.$emit('backTypes', this.back_types) // 通知树形
+          this.types_params_list.push(value);
+          this.pushValue.title = "视频监控设备列表";
+          // 根据企业标签查询视频数据
+          this.pushValue.search_params = {
+            pageSize: 4,
+            pageNum: 1,
+            deviceVideoSubTypes: "",
+          };
+          this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString();
+          await getVideoList(this.pushValue.search_params).then((res) => {
+            console.log("resVideoList1", res.rows);
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          });
+        } else if (item === "2") {
+          this.back_types = item
+          this.$emit('backTypes', this.back_types) // 通知树形
+          this.per_types_params_list.push(value);
+          this.pushValue.title = "智能感知设备列表";
+          this.pushValue.search_params = {
+            pageSize: 4,
+            pageNum: 1,
+            devicePerceptionSubTypes: "",
+          };
+          this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list
+            .sort()
+            .toString();
+          await getPerceptionList(this.pushValue.search_params).then((res) => {
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          });
+        }
+        bus.$emit("send", this.pushValue);
+        console.log("value", value);
       } else {
-        // 取消
-        delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
-        this.perception_checkgroup = []; //智能设备复选框清空
-        this.devicePerceptionSubTypes = []; // 智能查询参数清空
-        this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter(
-          (item) => item != value
-        ); // 收集视频类型查询入参
-        this.only_params.deviceVideoSubTypes =
-          this.deviceVideoSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
-        this.flag = true;
-        getVideoList(this.only_params).then((res) => {
-          console.log("res_video", res);
-          this.check_push_table_data = res;
-          this.$emit(
-            "push_data_to_table",
-            this.check_push_table_data,
-            this.only_params,
-            this.flag
-          ); // 传给父亲，再转给兄弟Table
-        });
+        // 复选框单独点击时查询表格数据
+        console.log("e1111", e);
+        this.$emit("clearList"); // 先执行清空邻复选框
+        // 切换表格标题
+        console.log("item123", item);
+        if (item === "1") {
+          this.back_types = item
+          this.$emit('backTypes', this.back_types) // 通知树形
+          console.log("this.types_params_list2", this.types_params_list);
+          console.log("value", value);
+          this.types_params_list = this.types_params_list.filter(
+            (val) => val != value
+          ); // 取消选中的标签查询
+          console.log("this.types_params_list3", this.types_params_list);
+          this.pushValue.title = "视频监控设备列表";
+          // 根据企业标签查询视频数据
+          this.pushValue.search_params = {
+            pageSize: 4,
+            pageNum: 1,
+            deviceVideoSubTypes: "",
+          };
+          this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString();
+          await getVideoList(this.pushValue.search_params).then((res) => {
+            console.log("resVideoList1", res.rows);
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          });
+        } else if (item === "2") {
+          this.back_types = item
+          this.$emit('backTypes', this.back_types) // 通知树形
+          this.per_types_params_list = this.per_types_params_list.filter(
+            (item) => item != value
+          );
+          this.pushValue.title = "智能感知设备列表";
+          this.pushValue.search_params = {
+            pageSize: 4,
+            pageNum: 1,
+            devicePerceptionSubTypes: "",
+          };
+          this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list
+            .sort()
+            .toString();
+          await getPerceptionList(this.pushValue.search_params).then((res) => {
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          });
+        }
+        bus.$emit("send", this.pushValue);
       }
     },
-    // 智能设备复选查询
-    perception_check_search(e, value) {
-      if (e) {
-        // 点击
-        delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
-        this.video_checkgroup = []; // 视频设备复选框清空
-        this.deviceVideoSubTypes = []; // 视频设备复选框清空
-        this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参
-        this.only_params.devicePerceptionSubTypes =
-          this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
-        this.flag = false;
-        getPerceptionList(this.only_params).then((res) => {
-          this.check_push_table_data = res;
-          this.$emit(
-            "push_data_to_table",
-            this.check_push_table_data,
-            this.only_params,
-            this.flag
-          ); // 传给父亲，再转给兄弟Table
+    async change_types(num) {
+      // 标签按钮左侧图标点击
+      this.$emit("clearList"); // 先执行清空邻复选框
+      this.types_params_list = []; // 点击按钮全查的时候，要让单点查询的记录清空掉
+      this.per_types_params_list = [];
+      this.searchBoxData.company_types = [];
+      if (num === "1") {
+        // 视频监控全标签查
+        this.back_types = num
+        this.$emit('backTypes', this.back_types) // 通知树形
+        this.pushValue.title = "视频监控设备列表";
+        this.pushValue.search_params = {
+          pageSize: 4,
+          pageNum: 1,
+          // deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
+        };
+        await getVideoList(this.pushValue.search_params).then((res) => {
+          console.log("resVideoList1", res.rows);
+          // res.row传给右下方表格数据
+          this.pushValue.pushTableData = res.rows;
         });
-      } else {
-        // 取消
-        delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
-        this.video_checkgroup = []; // 视频设备复选框清空
-        this.deviceVideoSubTypes = []; // 视频设备复选框清空
-        this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter(
-          (item) => item != value
-        ); // 收集智能类型查询入参
-        this.only_params.devicePerceptionSubTypes =
-          this.devicePerceptionSubTypes.sort((a,b)=>{return a-b}).toString(); // 这个入参可能会有变化
-        this.flag = false;
-        getPerceptionList(this.only_params).then((res) => {
-          this.check_push_table_data = res;
-          this.$emit(
-            "push_data_to_table",
-            this.check_push_table_data,
-            this.only_params,
-            this.flag
-          ); // 传给父亲，再转给兄弟Table
+      } else if (num === "2") {
+        console.log("num123", num);
+        this.back_types = num
+        this.$emit('backTypes', this.back_types) // 通知树形
+        // 智能感知全标签查
+        this.pushValue.title = "智能感知设备列表";
+        this.pushValue.search_params = {
+          pageSize: 4,
+          pageNum: 1,
+          // devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11",
+        };
+        await getPerceptionList(this.pushValue.search_params).then((res) => {
+          // res.row传给右下方表格数据
+          this.pushValue.pushTableData = res.rows;
         });
       }
+      bus.$emit("send", this.pushValue);
+      // const types_arr = this.searchBoxData.btnList.map((item) => ({
+      //   name: item.name,
+      // }));
+      // const types_text = types_arr.map((item) => item.name);
+      // console.log("types_text", types_text);
+      // console.log(
+      //   "this.searchBoxData.company_types",
+      //   this.searchBoxData.company_types.length
+      // );
+      // // 全选或者全不选操作
+      // if (this.searchBoxData.company_types.length === 9) {
+      //   this.searchBoxData.company_types = []; // 置空，全不选
+      // } else if (
+      //   this.searchBoxData.company_types.length != 0 &&
+      //   this.searchBoxData.company_types.length != 9
+      // ) {
+      //   this.searchBoxData.company_types = types_text; // 没全选，则全选
+      // } else if (this.searchBoxData.company_types.length === 0) {
+      //   this.searchBoxData.company_types = types_text; // 没选，也全选
+      // }
     },
   },
 };
 </script>
 <style lang="less" scoped>
-.search_box {
-  margin: 0 auto;
-  margin-top: 1vh;
-  width: 63vw;
-  height: 24vh;
-  //   border: 0.1px solid #485f6c;
-  .box_title {
-    width: 63vw;
-    height: 2vh;
-    color: #fff;
-    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
-  }
-  .search_check {
-    margin-top: 1vh;
-    width: 63vw;
-    height: 20vh;
-    // border: 0.1px solid #485f6c;
+.searchBox_body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .searchBox_img {
     display: flex;
-    justify-content: space-between;
-    // 视频设备复选框盒子
-    .video_check {
-      width: 31vw;
-      height: 20vh;
-      border: 0.1px solid #485f6c;
+    justify-content: center;
+    flex-direction: column;
+    width: 22%;
+    height: 100%;
+    color: #fff;
+    text-align: center;
+    font-size: 15px;
+    .searchBox_img_top {
+      background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
+      background-size: 100% 100% !important;
+      width: 5vw;
+      height: 10vh;
+      margin: 0px auto;
       display: flex;
-      color: #fff;
-      text-align: center;
-      // 按钮区域
-      .video_btn {
-        width: 7vw;
-        height: 20vh;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        .video_button {
-          background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
-          background-size: 100% 100% !important;
-          width: 5vw;
-          height: 10vh;
-          margin: 0px auto;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border: 0px;
-          img {
-            width: 1.8vw;
-            height: 3.6vh;
-          }
-        }
-        .video_button:focus,
-        .video_button:hover {
-          filter: brightness(170%);
-        }
+      justify-content: center;
+      align-items: center;
+      border: 0px;
+      img {
+        width: 1.8vw;
+        height: 3.6vh;
       }
     }
-    // 智能设备复选框盒子
-    .perception_check {
-      width: 31vw;
-      height: 20vh;
-      border: 0.1px solid #485f6c;
-      display: flex;
-      color: #fff;
-      text-align: center;
-      // 按钮区域
-      .perception_btn {
-        width: 7vw;
-        height: 20vh;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        .perception_button {
-          background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
-          background-size: 100% 100% !important;
-          width: 5vw;
-          height: 10vh;
-          margin: 0px auto;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border: 0px;
-          img {
-            width: 1.8vw;
-            height: 3.6vh;
-          }
-        }
-        .perception_button:focus,
-        .perception_button:hover {
-          filter: brightness(170%);
-        }
-      }
+    .searchBox_img_top:focus,
+    .searchBox_img_top:hover {
+      filter: brightness(170%);
+    }
+    span {
+      margin-top: 7%;
     }
   }
   /deep/.el-checkbox-group {
-    width: 24vw;
+    width: 70%;
     overflow: hidden;
     display: flex;
     justify-content: space-between;
     flex-flow: wrap;
-    padding: 20px 5px 0px 5px;
+    padding: 15px 0px 0px 10px;
     .el-checkbox {
       width: 30%;
       height: 4vh;
@@ -351,6 +271,24 @@ export default {
     .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/correlationEquipment2/components/uploadDialog.vue
similarity index 100%
rename from src/views/systemManagement/correlationEquipment/components/uploadDialog.vue
rename to src/views/systemManagement/correlationEquipment2/components/uploadDialog.vue
diff --git a/src/views/systemManagement/correlationEquipment2/index.vue b/src/views/systemManagement/correlationEquipment2/index.vue
index dce060f..139e0bf 100644
--- a/src/views/systemManagement/correlationEquipment2/index.vue
+++ b/src/views/systemManagement/correlationEquipment2/index.vue
@@ -1,157 +1,244 @@
 <template>
   <!-- 关联设备 -->
-  <el-card class="box-card">
-    <div class="topZS"></div>
-    <div class="bottomZS"></div>
-    <div slot="header" class="clearfix">
-      <span>关联设备</span>
-    </div>
-    <div class="cardBody">
-      <div class="left_tree">
-        <div class="left_search">
-          <el-input
-            class="left_search_input"
-            placeholder="输入企业名称搜索"
-            v-model="search_company"
-          >
-          </el-input>
-          <div class="left_search_button" @click="search_com()">
-            <i class="el-icon-search"></i>
-          </div>
-        </div>
-        <!-- 公司树数据 -->
-        <div class="cardBodyLeft_footer">
-          <el-tree
-            ref="company_tree"
-            :data="company_tree_data"
-            :props="defaultProps"
-            @node-click="handle_node_click"
-            node-key="subAreaCode"
-            :default-expand-all="defaultExpandAll"
-          >
-            <span
-              slot-scope="{ node }"
-              :title="node.label"
-              class="el-tree-node__label node-label"
-            >
-              {{ node.label }}
-            </span>
-          </el-tree>
+  <div>
+    <div class="main">
+      <!-- 卡片标题 -->
+      <el-card class="box-card">
+        <div class="topZS"></div>
+        <div class="bottomZS"></div>
+        <div slot="header" class="clearfix">
+          <span>关联设备</span>
         </div>
-      </div>
-      <div class="right">
-        <SearchBox
-          ref="searchBox"
-          :only_params="only_params"
-          @push_data_to_table="push_data_to_table"
-        ></SearchBox>
-        <!-- 右下方表格区域 -->
-        <div class="right_table">
-          <EquipmentTable
-            ref="equipmentTable"
-            :push_table_data="push_table_data"
-          ></EquipmentTable>
+        <!-- 内容 -->
+        <div class="cardBody">
+          <!-- 左侧 -->
+          <div class="cardBodyLeft">
+            <!-- 左侧搜索框 -->
+            <div class="cardBodyLeft_search">
+              <el-input
+                class="cardBodyLeft_search_input"
+                placeholder="输入企业名称搜索"
+                v-model="searchCompany"
+              >
+              </el-input>
+              <div class="cardBodyLeft_search_button" @click="searchCom()">
+                <i class="el-icon-search"></i>
+              </div>
+            </div>
+            <!-- 公司树数据 -->
+            <div class="cardBodyLeft_footer">
+              <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.label"
+                  class="el-tree-node__label node-label"
+                >
+                  {{ node.label }}
+                </span>
+              </el-tree>
+            </div>
+          </div>
+          <el-divider direction="vertical"></el-divider>
+          <!-- 右侧 -->
+          <div class="cardBodyRight">
+            <p>设备列表</p>
+            <div class="cardBodyRight_search">
+              <div class="video">
+                <SearchBox
+                  ref="searchBox"
+                  :searchBoxData="searchBox_left_text"
+                  @clearList="clearList('1')"
+                  @backTypes="backTypes"
+                ></SearchBox>
+              </div>
+              <div class="intelligence">
+                <SearchBox
+                  ref="searchBox"
+                  :searchBoxData="searchBox_right_text"
+                  @clearList="clearList('2')"
+                  @backTypes="backTypes"
+                ></SearchBox>
+              </div>
+            </div>
+            <EquipmentTable
+              ref="equipmentTable"
+              :pushTableData="pushTableData"
+              :only_params="only_params"
+            ></EquipmentTable>
+          </div>
         </div>
-      </div>
+      </el-card>
     </div>
-  </el-card>
+  </div>
 </template>
-  <script>
-import { getAllData, getVideoList } from "@/api/correlationEquipment";
-import SearchBox from "./components/searchBox";
-import EquipmentTable from "./components/equipmentTable";
+<script>
+import SearchBox from "./components/searchBox.vue";
+import EquipmentTable from "./components/equipmentTable.vue";
+import {
+  getAllData,
+  getVideoList,
+  getPerceptionList,
+} from "@/api/correlationEquipment";
 export default {
-  name: "correlationEquipment2",
+  name: "correlationEquipment",
   components: {
     SearchBox,
     EquipmentTable,
   },
   data() {
     return {
-      search_company: "",
-      company_tree_data: [], // 公司单位树
+      searchCompany: "", // 公司搜索
+      companyTreeData: [], // 公司单位树
       defaultProps: {
         children: "children",
         label: "areaName",
       },
+      searchBox_left_text: {}, // 给子查询盒子传递字符和图片地址
+      searchBox_right_text: {},
+      pushTableData: [],
       defaultExpandAll: true, // 控制公司树默认展开
-      only_params: {}, // 此为最终查询参数 一直查到表格查询
-      push_table_data: {}, // 传给右下方表格的数据
+      obtain_types: "", // 获得通知树形查询视频或者智能
+      only_params:{}, // 承接本页面最新状态下的查询入参，传给表格分页
     };
   },
   created() {
+    // 默认打开宁波查询
     this.only_params = {
-      pageSize: 5,
-      pageNum: 1,
+      areaName: "宁波",
     };
-    // 页面打开默认宁波查询
-    getAllData({ areaName: "宁波" }).then((res) => {
-      console.log("resning", res);
-      // 树形赋值
-      this.company_tree_data = res.data;
-      console.log("this.company_tree_data", this.company_tree_data);
-      // 与此同时，要展示右下方的表格数据
-      // 页面展开默认视频设备表格
-      getVideoList(this.only_params).then((res) => {
-        console.log("resVideoList", res.rows); //res.rows  res.total
-        // 传给右下方表格数据
-        this.push_table_data = res;
-        this.push_data_to_table(this.push_table_data,this.only_params,true);
-      });
+    getAllData(this.only_params).then((res) => {
+      if (res.code === 200) {
+        console.log("resning", res);
+        // 树形赋值
+        this.companyTreeData = res.data;
+        console.log("this.companyTreeData1", this.companyTreeData);
+        // 树形数据生成后，默认展示右下方表格数据
+        this.only_params = {
+          pageSize: 4,
+          pageNum: 1,
+          deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
+        };
+        getVideoList(this.only_params).then((res) => {
+          console.log("resVideoList", res.rows);
+          // res.row传给右下方表格数据
+          this.pushTableData = res.rows;
+        });
+      } else {
+        this.$message.warning("企业名称查询失败");
+      }
     });
+    // 给子查询盒子传递字符和图片地址
+    // 左边盒子
+    this.searchBox_left_text = {
+      src: require("@/assets/companyFile/camera03.png"),
+      img_text: "视频监控设备",
+      btnList: [
+        { 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: [],
+      typesAll: "1",
+    };
+    // 右边盒子
+    this.searchBox_right_text = {
+      src: require("@/assets/companyFile/intelligence02.png"),
+      img_text: "智能感知设备",
+      btnList: [
+        { 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: [],
+      typesAll: "2",
+    };
   },
   methods: {
     // 企业名称放大镜查询
-    // 支持模糊查询
-    search_com() {
-      getAllData({
-        areaName: this.search_company === "" ? "宁波" : this.search_company,
-      })
-        .then((res) => {
-          // 树形赋值
-          this.company_tree_data = res.data;
-          console.log("this.company_tree_data", this.company_tree_data);
-        })
-        .catch((err) => {
-          console.log("err", err);
-          this.$message.warning("查询失败,请输入正确查询条件");
-          this.company_tree_data = ""; // 清空树数据
-        });
-    },
-    handle_node_click(data) {
-      console.log("data123", data);
-      // 视频查询List
-      // 把视频和智能的已选标签清空
-      //   this.searchBox_right_text.company_types = [];
-      //   this.searchBox_left_text.company_types = [];
-      // 点击树数据时携带公司名查视频全部 点击就切回查视频设备
+    searchCom() {
       this.only_params = {
-        pageSize: 5,
-        pageNum: 1,
-        companyId: data.subAreaCode, // 按选中公司名字检索视频设备数据
-        // deviceVideoSubType: "1,2,3,4,5,6,7,8,9",
+        areaName: this.searchCompany,
       };
-      this.$refs.searchBox.clear_search_list();
-      getVideoList(this.only_params).then((res) => {
-        console.log("resVideoList", res.rows);
-        this.push_table_data = res;
-        this.push_data_to_table(this.push_table_data,this.only_params,true);
+      getAllData(this.only_params).then((res) => {
+        // 树形赋值
+        this.companyTreeData = res.data;
+        console.log("this.companyTreeData", this.companyTreeData);
       });
     },
-    push_data_to_table(data,params,flag) {
-      this.$refs.equipmentTable.obtain_table_data(data,params,flag);
+    handleNodeClick(data) {
+      console.log("data123", data);
+      // 视频查询List
+      this.searchBox_right_text.company_types = []; // 把视频和智能的已选标签清空
+      this.searchBox_left_text.company_types = [];
+      if (this.obtain_types === "" || this.obtain_types === "1") {
+        // 携带公司名查视频全部
+        this.only_params = {
+          pageSize: 4,
+          pageNum: 1,
+          company_id: data.subAreaCode, // 按选中公司名字检索视频监控数据
+          deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
+        };
+        getVideoList(this.only_params).then((res) => {
+          console.log("resVideoList", res.rows);
+          // res.row传给右下方表格数据
+          this.pushTableData = res.rows;
+        });
+      } else if (this.obtain_types === "2") {
+        // 携带公司名查智能全部
+        this.only_params = {
+          pageSize: 4,
+          pageNum: 1,
+          company_id: data.subAreaCode, // 按选中公司名字检索视频监控数据
+          devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11",
+        };
+        getPerceptionList(this.only_params).then((res) => {
+          if (res.code === 200) {
+            console.log("resVideoList", res.rows);
+            // res.row传给右下方表格数据
+            this.pushTableData = res.rows;
+          }
+        });
+      }
+    },
+    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 = [];
+      }
+    },
+    backTypes(num) {
+      console.log("num0000", num);
+      this.obtain_types = num;
     },
   },
 };
 </script>
-  <style lang="less" scoped>
+<style lang="less" scoped>
 /* card统一样式 */
 .el-card.box-card.is-always-shadow {
-  border: 0px;
-  height: 88.5vh; /* 控制card布局高度,用于适配 */
+  height: calc(100vh - 116px); /* 控制card布局高度,用于适配 */
   position: relative;
-  background: url("~@/assets/companyFile/22136.png") no-repeat !important;
-  background-size: 100% 100% !important;
 }
 /* card统一样式 */
 /deep/.el-card__header {
@@ -165,153 +252,190 @@ export default {
     }
   }
 }
-.cardBody {
-  display: flex;
-  justify-content: space-between;
-  .left_tree {
-    width: 20vw;
-    height: 78vh;
-    border: 0.1px solid #485f6c;
-    background: linear-gradient(#314241, #1b2929, #121e1d);
-    .left_search {
-      display: flex;
-      margin-top: 5%;
-      margin-left: 5%;
-      width: 90%;
-      height: 40px;
-      .left_search_input ::v-deep {
-        /* 查询框 */
-        width: 87%;
-        .el-input__inner {
-          border-radius: 4px 0px 0px 4px;
-          background: #3c4b4a;
-          color: #fff;
+.main {
+  height: 100%;
+  .el-card.box-card.is-always-shadow {
+    background: url("~@/assets/companyFile/22136.png") no-repeat !important;
+    background-size: 100% 100% !important;
+    border: 0px;
+  }
+  .cardBody {
+    width: 100%;
+    display: flex;
+    height: 80vh;
+    /* 左侧 */
+    .cardBodyLeft {
+      width: 25%;
+      height: 75vh;
+      background: rgba(23, 36, 36, 0.4);
+      border: 0.5px solid #485f6c;
+      border-radius: 4px;
+      .cardBodyLeft_search {
+        display: flex;
+        margin-top: 5%;
+        margin-left: 5%;
+        width: 90%;
+        height: 40px;
+        .cardBodyLeft_search_input ::v-deep {
+          /* 查询框 */
+          width: 90%;
+          .el-input__inner {
+            border-radius: 4px 0px 0px 4px;
+            background: #3c4b4a;
+            color: #fff;
+          }
+          /* 查询框点击颜色变化 */
+          .el-input__inner:focus,
+          .el-input__inner:hover {
+            border-color: #1b3736;
+          }
         }
-        /* 查询框点击颜色变化 */
-        .el-input__inner:focus,
-        .el-input__inner:hover {
-          border-color: #1b3736;
+        .cardBodyLeft_search_button {
+          width: 10%;
+          height: 100%;
+          border-radius: 0px 4px 4px 0px;
+          background: #0e3936;
+          text-align: center;
+          font-size: 28px;
+          cursor: pointer;
+          .el-icon-search {
+            color: #fff;
+            padding: 12% 0;
+          }
         }
-      }
-      .left_search_button {
-        width: 13%;
-        height: 100%;
-        border-radius: 0px 4px 4px 0px;
-        background: #0e3936;
-        text-align: center;
-        font-size: 28px;
-        cursor: pointer;
-        .el-icon-search {
-          color: #fff;
-          padding: 12% 0;
+        .cardBodyLeft_search_button:focus,
+        .cardBodyLeft_search_button:hover {
+          /* 放大镜点击特效 */
+          background: #126a58;
         }
       }
-      .left_search_button:focus,
-      .left_search_button:hover {
-        /* 放大镜点击特效 */
-        background: #126a58;
-      }
-    }
-    .cardBodyLeft_footer {
-      width: 90%;
-      margin-left: 5%;
-      margin-top: 3vh;
-      height: 69vh;
-      .el-tree {
-        /* 树形数据过长添加滚动条 */
-        height: 65vh;
-        overflow: auto;
-        // box-shadow: 5px 5px 10px #126a58;
-        border-radius: 4px;
-        //   background: #293738;
-        background: rgba(0, 0, 0, 0);
-        border: 0.1px solid #485f6c;
-        color: #fff !important;
-        /deep/.el-tree-node__content {
-          height: 50px;
+      .cardBodyLeft_footer {
+        width: 90%;
+        margin-left: 5%;
+        margin-top: 3vh;
+        height: 69vh;
+        .el-tree {
+          /* 树形数据过长添加滚动条 */
+          height: 65vh;
+          overflow: auto;
+          // box-shadow: 5px 5px 10px #126a58;
+          border-radius: 4px;
+          background: #293738;
+          color: #fff !important;
+          /deep/.el-tree-node__content {
+            height: 50px;
+          }
+          .el-tree-node__label.node-label {
+            display: flex;
+            font-size: 18px;
+          }
+          /* 去掉树形数据前面的三角形 */
+          /deep/.el-icon-caret-right:before {
+            content: "";
+          }
+          .node-label {
+            /* 树形数据横向过长添加展开 */
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          /* hover节点时的背景颜色 */
+          ::v-deep .el-tree-node__content:hover {
+            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: #495461;
+            color: #fff;
+            text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+          }
         }
-        .el-tree-node__label.node-label {
-          display: flex;
-          font-size: 16px;
+        // 没有展开且有子节点
+        .el-tree /deep/ .el-icon-caret-right:before {
+          background: url("~@/assets/companyFile/add.png") no-repeat;
+          content: "";
+          display: block;
+          width: 23px;
+          height: 23px;
+          font-size: 23px;
+          background-size: 23px;
         }
-        /* 去掉树形数据前面的三角形 */
-        /deep/.el-icon-caret-right:before {
+        // 已经展开且有子节点
+        .el-tree
+          /deep/
+          .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+          background: url("~@/assets/companyFile/add.png") no-repeat;
           content: "";
+          display: block;
+          width: 23px;
+          height: 23px;
+          font-size: 23px;
+          background-size: 23px;
         }
-        .node-label {
-          /* 树形数据横向过长添加展开 */
-          width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
+        // 没有子节点 minus
+        .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
+          background: url("~@/assets/companyFile/minus.png") no-repeat;
+          content: "";
+          display: block;
+          width: 23px;
+          height: 23px;
+          font-size: 23px;
+          background-size: 23px;
         }
-        /* hover节点时的背景颜色 */
-        ::v-deep .el-tree-node__content:hover {
-          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;
         }
-        /* 节点选中的背景颜色 */
-        ::v-deep .el-tree-node:focus > .el-tree-node__content {
-          background: #495461;
-          color: #fff;
-          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        .el-tree::-webkit-scrollbar-thumb {
+          width: 8px;
+          background-color: #3c4b4a;
+          border-radius: 4px;
         }
       }
-      // 没有展开且有子节点
-      .el-tree /deep/ .el-icon-caret-right:before {
-        background: url("~@/assets/companyFile/add.png") no-repeat;
-        content: "";
-        display: block;
-        width: 23px;
-        height: 23px;
-        font-size: 23px;
-        background-size: 23px;
-      }
-      // 已经展开且有子节点
-      .el-tree
-        /deep/
-        .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
-        background: url("~@/assets/companyFile/add.png") no-repeat;
-        content: "";
-        display: block;
-        width: 23px;
-        height: 23px;
-        font-size: 23px;
-        background-size: 23px;
-      }
-      // 没有子节点 minus
-      .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
-        background: url("~@/assets/companyFile/minus.png") no-repeat;
-        content: "";
-        display: block;
-        width: 23px;
-        height: 23px;
-        font-size: 23px;
-        background-size: 23px;
-      }
-      .el-tree::-webkit-scrollbar {
-        width: 9px;
-        background-color: #5e666a;
-        border-radius: 4px;
+    }
+    /* 竖分割线 */
+    .el-divider.el-divider--vertical {
+      opacity: 0;
+      margin-left: 13px;
+      height: 100%;
+    }
+    /* 右侧 */
+    .cardBodyRight {
+      p {
+        margin-left: 10px;
+        height: 18px;
+        color: #fff;
+        font-size: 18px;
+        text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
       }
-      .el-tree::-webkit-scrollbar-thumb {
-        width: 8px;
-        background-color: #3c4b4a;
-        border-radius: 4px;
+      width: 74%;
+      height: 75vh;
+      border-radius: 4px;
+      background: rgba(31, 45, 49, 0.4);
+      border: 0.5px solid #485f6c;
+      .cardBodyRight_search {
+        display: flex;
+        justify-content: space-evenly;
+        width: 63vw;
+        height: 20vh;
+        .video {
+          width: 48%;
+          height: 100%;
+          background: #3b5153;
+          border-radius: 4px;
+        }
+        .intelligence {
+          width: 48%;
+          height: 100%;
+          background: #3b5153;
+          border-radius: 4px;
+        }
       }
     }
   }
-  .right {
-    width: 64vw;
-    height: 78vh;
-    // border: 0.1px solid #485f6c;
-    .right_table {
-      margin-top: 1vh;
-      width: 64vw;
-      height: 52vh;
-      // border: 0.1px solid #485f6c;
-    }
-  }
 }
 </style>
\ No newline at end of file