From cd8e7878d04bc5fa25935ae2eac200d261634bd0 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Mon, 29 May 2023 20:52:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/equipmentTable.vue             | 508 ++++++++----------
 .../components/searchBox.vue                  |  36 +-
 .../correlationEquipment2/index.vue           |  18 +-
 3 files changed, 221 insertions(+), 341 deletions(-)

diff --git a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
index dfa5c19..898f634 100644
--- a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
@@ -1,339 +1,251 @@
 <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="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.equipment"
+              placeholder="输入设备名称搜索"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="search.channel_code"
+              placeholder="输入通道国际编码搜索"
+            ></el-input>
+          </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="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="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 class="table_btn_list">
+        <el-button v-for="item in btn_list" :key="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"
+          height="336"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column
+            v-for="item in table_column"
+            :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>
   </div>
 </template>
 <script>
-import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
 export default {
-  name: "SearchBox",
-  props: {
-    only_params: {}, // 主页传来的查询入参，会在本页面添加更多查询入参
-  },
   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" },
+      search: {
+        equipment: "",
+        channel_code: "",
+        equipment_ip: "",
+      },
+      btn_list: [
+        { value: "1", label: "新增", icon: "plus" },
+        { value: "2", label: "删除", icon: "delete" },
+        { value: "3", label: "导入", icon: "bottom-right" },
+        { value: "4", label: "导出", icon: "top-left" },
       ],
-      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" },
+      table_data:[],
+      table_column: [],
+      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" },
       ],
-      perception_btn_img_src: require("@/assets/companyFile/intelligence02.png"),
-      perception_text: "智能感知设备",
-      check_push_table_data: {}, // 复选框查询的表格数据传递给表格
     };
   },
+  created() {
+    this.table_column = this.table_column_video;
+  },
   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 = []; // 视频设备复选框清空
-      delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
-      this.only_params.deviceVideoSubType = ""; // 按钮查视频设备的全部
-      getVideoList(this.only_params).then((res) => {
-        console.log("res_video", res);
-        this.check_push_table_data = res;
-        let data_params = {
-          data: this.check_push_table_data,
-          params: this.only_params,
-        };
-        this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
-      });
-    },
-    // 智能设备按钮查全部
-    perception_all_check() {
-      this.perception_checkgroup = []; //智能设备复选框清空
-      this.video_checkgroup = []; // 视频设备复选框清空
-      delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
-      this.only_params.devicePerceptionSubType = ""; // 按钮查智能设备的全部
-      getVideoList(this.only_params).then((res) => {
-        console.log("res_video", res);
-        this.check_push_table_data = res;
-        let data_params = {
-          data: this.check_push_table_data,
-          params: this.only_params,
-        };
-        this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
-      });
+    obtain_table_data(data,params) {
+       console.log('data_1',data);
+       this.table_data = data.rows
+       console.log('params_1',params);
     },
-    // 视频设备复选查询
-    video_check_search(e, value) {
-      if (e) {
-        // 点击
-        delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
-        this.perception_checkgroup = []; //智能设备复选框清空
-        this.devicePerceptionSubTypes = []; // 智能查询参数清空
-        this.deviceVideoSubTypes.push(value); // 收集视频类型查询入参
-        this.only_params.deviceVideoSubType =
-          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
-        getVideoList(this.only_params).then((res) => {
-          console.log("res_video", res);
-          this.check_push_table_data = res;
-          let data_params = {
-            data: this.check_push_table_data,
-            params: this.only_params,
-          };
-          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
-        });
-      } else {
-        // 取消
-        delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
-        this.perception_checkgroup = []; //智能设备复选框清空
-        this.devicePerceptionSubTypes = []; // 智能查询参数清空
-        this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter(
-          (item) => item != value
-        ); // 收集视频类型查询入参
-        this.only_params.deviceVideoSubType =
-          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
-        getVideoList(this.only_params).then((res) => {
-          console.log("res_video", res);
-          this.check_push_table_data = res;
-          let data_params = {
-            data: this.check_push_table_data,
-            params: this.only_params,
-          };
-          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
-        });
-      }
-    },
-    // 智能设备复选查询
-    perception_check_search(e, value) {
-      if (e) {
-        // 点击
-        delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
-        this.video_checkgroup = []; // 视频设备复选框清空
-        this.deviceVideoSubTypes = []; // 视频设备复选框清空
-        this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参
-        this.only_params.devicePerceptionSubType =
-          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
-        getPerceptionList(this.only_params).then((res) => {
-          this.check_push_table_data = res;
-          let data_params = {
-            data: this.check_push_table_data,
-            params: this.only_params,
-          };
-          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
-        });
-      } else {
-        // 取消
-        delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
-        this.video_checkgroup = []; // 视频设备复选框清空
-        this.deviceVideoSubTypes = []; // 视频设备复选框清空
-        this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter(
-          (item) => item != value
-        ); // 收集智能类型查询入参
-        this.only_params.devicePerceptionSubType =
-          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
-        getPerceptionList(this.only_params).then((res) => {
-          this.check_push_table_data = res;
-          let data_params = {
-            data: this.check_push_table_data,
-            params: this.only_params,
-          };
-          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
-        });
-      }
+    // 视频设备查询
+    video_search() {},
+    // 视频设备重置
+    video_reset() {},
+    table_header({ row, rowIndex }) {
+      console.log(row);
+      console.log(rowIndex);
+      return {
+        color: "#fff",
+      };
     },
   },
 };
 </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;
+.equipment_table_video {
+  .table_title {
     color: #fff;
     text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    margin-left: 10px;
+    font-size: 17px;
   }
-  .search_check {
+  .table_search {
     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;
+    width: 64vw;
+    height: 4vh;
+    .table_search_form {
       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%);
-        }
+      .el-form-item {
+        margin-left: 0.5vw;
       }
     }
-    // 智能设备复选框盒子
-    .perception_check {
-      width: 31vw;
-      height: 20vh;
-      border: 0.1px solid #485f6c;
-      display: flex;
+    /deep/.el-input__inner {
+      border-radius: 0px 0px 0px 0px;
+      background: #3c4b4a;
       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%);
-        }
-      }
+      width: 10vw;
     }
-  }
-  /deep/.el-checkbox-group {
-    width: 24vw;
-    overflow: hidden;
-    display: flex;
-    justify-content: space-between;
-    flex-flow: wrap;
-    padding: 20px 5px 0px 5px;
-    .el-checkbox {
-      width: 30%;
-      height: 4vh;
-      text-align: center;
-      line-height: 4vh;
+
+    .el-button {
+      width: 4vw;
       border: 1px solid #4a6072;
       color: #fff;
       border-radius: 0px !important;
       background: #323f43;
-      margin-right: 0px;
-      .el-checkbox__label {
-        color: #fff;
-        padding-left: 0px;
-      }
     }
-    .el-checkbox.is-checked {
-      background: #495461;
-      border-radius: 0px;
-      border: 1px solid;
+
+    .el-button:focus,
+    .el-button:hover {
+      border: 1px solid#34e1b3;
+      background: url("~@/assets/companyFile/2121.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+  .table_btn_list {
+    width: 64vw;
+    height: 5vh;
+    .el-button {
+      width: 90px;
+      height: 5vh;
+      color: #fff;
+      border: 0px;
+      border-radius: 0px !important;
+      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);
     }
-    .el-checkbox__inner {
-      display: none;
+  }
+  .table_video {
+    width: 64vw;
+    height: 34vh;
+  }
+  /deep/.el-table {
+    .el-table__body-wrapper {
+      overflow: auto;
+      background: #233438;
+      color: #fff;
+      &::-webkit-scrollbar {
+        width: 3px;
+      }
+
+      // 滚动条里面默认的小方块,自定义样式
+      &::-webkit-scrollbar-thumb {
+        background: #4cf993;
+        border-radius: 2px;
+      }
+
+      // 滚动条里面的轨道
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+    }
+
+    thead {
+      text-align: center;
+      color: #fff;
+      font-weight: 500;
+      background: linear-gradient(
+        to right,
+        #284f49,
+        #2f6363,
+        #233b38
+      ) !important;
+
+      & th {
+        background-color: transparent;
+      }
+
+      & tr {
+        background-color: transparent;
+      }
+    }
+
+    tr {
+      background: #233438;
     }
   }
+  /deep/.el-button.operation {
+      width: 40px;
+      height: 30px;
+      text-align: center;
+      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);
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/correlationEquipment2/components/searchBox.vue b/src/views/systemManagement/correlationEquipment2/components/searchBox.vue
index dfa5c19..71a2697 100644
--- a/src/views/systemManagement/correlationEquipment2/components/searchBox.vue
+++ b/src/views/systemManagement/correlationEquipment2/components/searchBox.vue
@@ -106,11 +106,7 @@ export default {
       getVideoList(this.only_params).then((res) => {
         console.log("res_video", res);
         this.check_push_table_data = res;
-        let data_params = {
-          data: this.check_push_table_data,
-          params: this.only_params,
-        };
-        this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+        this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
       });
     },
     // 智能设备按钮查全部
@@ -122,11 +118,7 @@ export default {
       getVideoList(this.only_params).then((res) => {
         console.log("res_video", res);
         this.check_push_table_data = res;
-        let data_params = {
-          data: this.check_push_table_data,
-          params: this.only_params,
-        };
-        this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+       this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
       });
     },
     // 视频设备复选查询
@@ -142,11 +134,7 @@ export default {
         getVideoList(this.only_params).then((res) => {
           console.log("res_video", res);
           this.check_push_table_data = res;
-          let data_params = {
-            data: this.check_push_table_data,
-            params: this.only_params,
-          };
-          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+          this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
         });
       } else {
         // 取消
@@ -161,11 +149,7 @@ export default {
         getVideoList(this.only_params).then((res) => {
           console.log("res_video", res);
           this.check_push_table_data = res;
-          let data_params = {
-            data: this.check_push_table_data,
-            params: this.only_params,
-          };
-          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+          this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
         });
       }
     },
@@ -181,11 +165,7 @@ export default {
           this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
         getPerceptionList(this.only_params).then((res) => {
           this.check_push_table_data = res;
-          let data_params = {
-            data: this.check_push_table_data,
-            params: this.only_params,
-          };
-          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+          this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
         });
       } else {
         // 取消
@@ -199,11 +179,7 @@ export default {
           this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
         getPerceptionList(this.only_params).then((res) => {
           this.check_push_table_data = res;
-          let data_params = {
-            data: this.check_push_table_data,
-            params: this.only_params,
-          };
-          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+          this.$emit("push_data_to_table", this.check_push_table_data,this.only_params); // 传给父亲，再转给兄弟Table
         });
       }
     },
diff --git a/src/views/systemManagement/correlationEquipment2/index.vue b/src/views/systemManagement/correlationEquipment2/index.vue
index a3a6807..b2edeb2 100644
--- a/src/views/systemManagement/correlationEquipment2/index.vue
+++ b/src/views/systemManagement/correlationEquipment2/index.vue
@@ -96,11 +96,7 @@ export default {
         console.log("resVideoList", res.rows); //res.rows  res.total
         // 传给右下方表格数据
         this.push_table_data = res;
-        let data_params = {
-          data: this.push_table_data,
-          params: this.only_params,
-        };
-        this.push_data_to_table(data_params);
+        this.push_data_to_table(this.push_table_data,this.only_params);
       });
     });
   },
@@ -139,15 +135,11 @@ export default {
       getVideoList(this.only_params).then((res) => {
         console.log("resVideoList", res.rows);
         this.push_table_data = res;
-        let data_params = {
-          data: this.push_table_data,
-          params: this.only_params,
-        };
-        this.push_data_to_table(data_params);
+        this.push_data_to_table(this.push_table_data,this.only_params);
       });
     },
-    push_data_to_table(data_params) {
-      this.$refs.equipmentTable.obtain_table_data(data_params);
+    push_data_to_table(data,params) {
+      this.$refs.equipmentTable.obtain_table_data(data,params);
     },
   },
 };
@@ -318,7 +310,7 @@ export default {
       margin-top: 1vh;
       width: 64vw;
       height: 52vh;
-      //   border: 0.1px solid #485f6c;
+      border: 0.1px solid #485f6c;
     }
   }
 }