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 1/3] =?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;
     }
   }
 }

From 6cee1f65329a845af8b79619ac2dc09d71697a01 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Mon, 29 May 2023 23:28:19 +0800
Subject: [PATCH 2/3] =?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             | 241 +++++++++++++++---
 .../components/searchBox.vue                  |  87 +++++--
 .../correlationEquipment2/index.vue           |  12 +-
 3 files changed, 279 insertions(+), 61 deletions(-)

diff --git a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
index 898f634..00eff83 100644
--- a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
@@ -1,24 +1,24 @@
 <template>
   <div>
-    <div class="equipment_table_video">
+    <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.equipment"
+              v-model="search.deviceName"
               placeholder="输入设备名称搜索"
             ></el-input>
           </el-form-item>
           <el-form-item>
             <el-input
-              v-model="search.channel_code"
+              v-model="search.gbsChannelNo"
               placeholder="输入通道国际编码搜索"
             ></el-input>
           </el-form-item>
           <el-form-item>
             <el-input
-              v-model="search.equipment_ip"
+              v-model="search.deviceIp"
               placeholder="输入设备IP搜索"
             ></el-input>
           </el-form-item>
@@ -46,7 +46,7 @@
         >
           <el-table-column type="selection" width="55"> </el-table-column>
           <el-table-column
-            v-for="item in table_column"
+            v-for="item in table_column_video"
             :key="item.prop"
             :prop="item.prop"
             :label="item.label"
@@ -70,17 +70,114 @@
           </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 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="perception_search.deviceName"
+              placeholder="输入设备名称搜索"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="perception_search.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">
+          <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"
+          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="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="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>
 </template>
 <script>
+import { getVideoList } from "@/api/correlationEquipment";
 export default {
   data() {
     return {
+      table_flag: true,
+      // 视频查询
       search: {
-        equipment: "",
-        channel_code: "",
-        equipment_ip: "",
+        deviceName: "",
+        gbsChannelNo: "",
+        deviceIp: "",
+      },
+      // 智能查询
+      perception_search: {
+        deviceName: "",
+        deviceIp: "",
       },
       btn_list: [
         { value: "1", label: "新增", icon: "plus" },
@@ -88,8 +185,7 @@ export default {
         { value: "3", label: "导入", icon: "bottom-right" },
         { value: "4", label: "导出", icon: "top-left" },
       ],
-      table_data:[],
-      table_column: [],
+      table_data: [],
       table_column_video: [
         { prop: "gbsChannelNo", label: "通道国际编码", width: "200" },
         { prop: "gbsNvrNo", label: "NVR设备编码", width: "200" },
@@ -97,21 +193,52 @@ export default {
         { prop: "deviceVideoSubTypeCn", label: "设备类型", width: "200" },
         { prop: "deviceIp", label: "设备IP" },
       ],
+      table_column_perception:[
+        { prop: "deviceName", label: "设备名称", width: "270" },
+        { prop: "devicePerceptionSubTypeCn", label: "设备类型" },
+        { prop: "deviceIp", label: "设备IP" },
+        { prop: "orientationCn", label: "进出方向" },
+      ],
+      pageSize: 0,
+      pageNum: 0,
+      only_params: {},
+      total: 0,
     };
   },
   created() {
     this.table_column = this.table_column_video;
   },
   methods: {
-    obtain_table_data(data,params) {
-       console.log('data_1',data);
-       this.table_data = data.rows
-       console.log('params_1',params);
+    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);
     },
     // 视频设备查询
-    video_search() {},
+    video_search() {
+      this.only_params = Object.assign(this.only_params, this.search);
+      getVideoList(this.only_params).then((res) => {
+        this.table_data = res.rows;
+        this.total = res.total;
+      });
+    },
     // 视频设备重置
-    video_reset() {},
+    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) => {
+        this.table_data = res.rows;
+        this.total = res.total;
+      });
+    },
     table_header({ row, rowIndex }) {
       console.log(row);
       console.log(rowIndex);
@@ -119,11 +246,19 @@ 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;
+      });
+    },
   },
 };
 </script>
 <style lang="less" scoped>
-.equipment_table_video {
+.equipment_table_video,
+.equipment_table_perception {
   .table_title {
     color: #fff;
     text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
@@ -230,22 +365,64 @@ export default {
     }
   }
   /deep/.el-button.operation {
-      width: 40px;
-      height: 30px;
-      text-align: center;
-      background-color: rgb(35 52 56);
-      border: 0px;
-      color: #fff;
-    }
+    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;
+
+      /deep/.el-pagination__total {
+        color: #fff;
+      }
+
+      /deep/.el-input__inner {
+        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/.btn-next {
+        border-radius: 0px;
+        background: #3c4b4a;
+        color: #fff;
+      }
+
+      /deep/ .el-pager {
+        li {
+          background: #3c4b4a !important;
+        }
+      }
     }
+  }
 }
 </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 71a2697..7adc432 100644
--- a/src/views/systemManagement/correlationEquipment2/components/searchBox.vue
+++ b/src/views/systemManagement/correlationEquipment2/components/searchBox.vue
@@ -86,6 +86,7 @@ export default {
       perception_btn_img_src: require("@/assets/companyFile/intelligence02.png"),
       perception_text: "智能感知设备",
       check_push_table_data: {}, // 复选框查询的表格数据传递给表格
+      flag: true,
     };
   },
   methods: {
@@ -101,55 +102,83 @@ export default {
     video_all_check() {
       this.perception_checkgroup = []; //智能设备复选框清空
       this.video_checkgroup = []; // 视频设备复选框清空
-      delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
-      this.only_params.deviceVideoSubType = ""; // 按钮查视频设备的全部
+      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); // 传给父亲，再转给兄弟Table
+        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 = []; // 视频设备复选框清空
-      delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
-      this.only_params.devicePerceptionSubType = ""; // 按钮查智能设备的全部
-      getVideoList(this.only_params).then((res) => {
+      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); // 传给父亲，再转给兄弟Table
+        this.$emit(
+          "push_data_to_table",
+          this.check_push_table_data,
+          this.only_params,
+          this.flag
+        ); // 传给父亲，再转给兄弟Table
       });
     },
     // 视频设备复选查询
     video_check_search(e, value) {
       if (e) {
         // 点击
-        delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
+        delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
         this.perception_checkgroup = []; //智能设备复选框清空
         this.devicePerceptionSubTypes = []; // 智能查询参数清空
         this.deviceVideoSubTypes.push(value); // 收集视频类型查询入参
-        this.only_params.deviceVideoSubType =
-          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
+        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); // 传给父亲，再转给兄弟Table
+          this.$emit(
+            "push_data_to_table",
+            this.check_push_table_data,
+            this.only_params,
+            this.flag
+          ); // 传给父亲，再转给兄弟Table
         });
       } else {
         // 取消
-        delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
+        delete this.only_params.devicePerceptionSubTypes; // 删除智能查询携带的入参
         this.perception_checkgroup = []; //智能设备复选框清空
         this.devicePerceptionSubTypes = []; // 智能查询参数清空
         this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter(
           (item) => item != value
         ); // 收集视频类型查询入参
-        this.only_params.deviceVideoSubType =
-          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
+        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); // 传给父亲，再转给兄弟Table
+          this.$emit(
+            "push_data_to_table",
+            this.check_push_table_data,
+            this.only_params,
+            this.flag
+          ); // 传给父亲，再转给兄弟Table
         });
       }
     },
@@ -157,29 +186,41 @@ export default {
     perception_check_search(e, value) {
       if (e) {
         // 点击
-        delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
+        delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
         this.video_checkgroup = []; // 视频设备复选框清空
         this.deviceVideoSubTypes = []; // 视频设备复选框清空
         this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参
-        this.only_params.devicePerceptionSubType =
-          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
+        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); // 传给父亲，再转给兄弟Table
+          this.$emit(
+            "push_data_to_table",
+            this.check_push_table_data,
+            this.only_params,
+            this.flag
+          ); // 传给父亲，再转给兄弟Table
         });
       } else {
         // 取消
-        delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
+        delete this.only_params.deviceVideoSubTypes; // 删除视频查询携带的入参
         this.video_checkgroup = []; // 视频设备复选框清空
         this.deviceVideoSubTypes = []; // 视频设备复选框清空
         this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter(
           (item) => item != value
         ); // 收集智能类型查询入参
-        this.only_params.devicePerceptionSubType =
-          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
+        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); // 传给父亲，再转给兄弟Table
+          this.$emit(
+            "push_data_to_table",
+            this.check_push_table_data,
+            this.only_params,
+            this.flag
+          ); // 传给父亲，再转给兄弟Table
         });
       }
     },
diff --git a/src/views/systemManagement/correlationEquipment2/index.vue b/src/views/systemManagement/correlationEquipment2/index.vue
index b2edeb2..dce060f 100644
--- a/src/views/systemManagement/correlationEquipment2/index.vue
+++ b/src/views/systemManagement/correlationEquipment2/index.vue
@@ -96,7 +96,7 @@ export default {
         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);
+        this.push_data_to_table(this.push_table_data,this.only_params,true);
       });
     });
   },
@@ -135,11 +135,11 @@ export default {
       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);
+        this.push_data_to_table(this.push_table_data,this.only_params,true);
       });
     },
-    push_data_to_table(data,params) {
-      this.$refs.equipmentTable.obtain_table_data(data,params);
+    push_data_to_table(data,params,flag) {
+      this.$refs.equipmentTable.obtain_table_data(data,params,flag);
     },
   },
 };
@@ -305,12 +305,12 @@ export default {
   .right {
     width: 64vw;
     height: 78vh;
-    border: 0.1px solid #485f6c;
+    // border: 0.1px solid #485f6c;
     .right_table {
       margin-top: 1vh;
       width: 64vw;
       height: 52vh;
-      border: 0.1px solid #485f6c;
+      // border: 0.1px solid #485f6c;
     }
   }
 }

From 25b878018258d0cb0dfc5cabc0d6cce40f96dbda Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Tue, 30 May 2023 13:57:29 +0800
Subject: [PATCH 3/3] =?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             |  52 ++-
 .../components/videoForm.vue                  | 349 ++++++++++++++++++
 2 files changed, 395 insertions(+), 6 deletions(-)
 create mode 100644 src/views/systemManagement/correlationEquipment2/components/videoForm.vue

diff --git a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
index 00eff83..8a42a95 100644
--- a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
@@ -31,7 +31,7 @@
         </el-form>
       </div>
       <div class="table_btn_list">
-        <el-button v-for="item in btn_list" :key="item.value">
+        <el-button v-for="item in btn_list" :key="item.value" @click="open_video_dialog(item.value)">
           <i :class="`el-icon-${item.icon}`" />
           {{ item.label }}</el-button
         >
@@ -89,13 +89,13 @@
         <el-form :model="search" class="table_search_form">
           <el-form-item>
             <el-input
-              v-model="perception_search.deviceName"
+              v-model="search_p.deviceName"
               placeholder="输入设备名称搜索"
             ></el-input>
           </el-form-item>
           <el-form-item>
             <el-input
-              v-model="perception_search.deviceIp"
+              v-model="search_p.deviceIp"
               placeholder="输入设备IP搜索"
             ></el-input>
           </el-form-item>
@@ -150,7 +150,7 @@
       <div class="table_pagination">
         <el-pagination
           :background="true"
-          @current-change="handleCurrentChange"
+          @current-change="handleCurrentChangePerception"
           :page-sizes="[5]"
           :page-size="pageSize"
           :current-page="pageNum"
@@ -160,11 +160,17 @@
         </el-pagination>
       </div>
     </div>
+    <!-- 视频设备表单弹窗 -->
+    <VideoForm ref="videoForm"></VideoForm>
   </div>
 </template>
 <script>
-import { getVideoList } from "@/api/correlationEquipment";
+import { getVideoList,getPerceptionList } from "@/api/correlationEquipment";
+import VideoForm from './videoForm'
 export default {
+  components:{
+    VideoForm
+  },
   data() {
     return {
       table_flag: true,
@@ -175,7 +181,7 @@ export default {
         deviceIp: "",
       },
       // 智能查询
-      perception_search: {
+      search_p: {
         deviceName: "",
         deviceIp: "",
       },
@@ -239,6 +245,29 @@ export default {
         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;
+      })
+    },
+    open_video_dialog(num) {
+      // 打开视频设备表单
+      this.$refs.videoForm.open(num)
+    },
     table_header({ row, rowIndex }) {
       console.log(row);
       console.log(rowIndex);
@@ -246,6 +275,7 @@ export default {
         color: "#fff",
       };
     },
+    // 视频表格分页
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       this.only_params.pageNum = val;
@@ -253,6 +283,14 @@ export default {
         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>
@@ -318,8 +356,10 @@ export default {
   .table_video {
     width: 64vw;
     height: 34vh;
+    margin-left: 10px;
   }
   /deep/.el-table {
+    width: 98.2%;
     .el-table__body-wrapper {
       overflow: auto;
       background: #233438;
diff --git a/src/views/systemManagement/correlationEquipment2/components/videoForm.vue b/src/views/systemManagement/correlationEquipment2/components/videoForm.vue
new file mode 100644
index 0000000..244c750
--- /dev/null
+++ b/src/views/systemManagement/correlationEquipment2/components/videoForm.vue
@@ -0,0 +1,349 @@
+<template>
+  <!-- 视频新增、编辑、查看表单 -->
+  <el-dialog
+    class="dialog"
+    :title="title"
+    :visible.sync="visible"
+    @close="close()"
+    :close-on-click-modal="false"
+    width="970px"
+  >
+    <div class="form_body">
+      <el-form ref="form" :model="form" :rules="rules">
+        <el-form-item> <p>设备基础信息</p> </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="企业名称" prop="companyName">
+          <el-select
+            ref="companySelect"
+            v-model="form.companyName"
+            placeholder="请选择企业"
+          >
+            <el-option
+              v-for="item in form_list.company"
+              :key="item.id"
+              :label="item.companyName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="设备名称" prop="deviceName">
+          <el-input v-model="form.deviceName"></el-input>
+        </el-form-item>
+        <el-form-item label="设备IP" prop="deviceIp">
+          <el-input v-model="form.deviceIp"></el-input>
+        </el-form-item>
+        <el-form-item label="设备大类" prop="deviceVideoParentType">
+          <el-select
+            v-model="form.deviceVideoParentType"
+            placeholder="请选择设备大类"
+          >
+            <el-option
+              v-for="item in form_list.parent_type"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备小类" prop="deviceVideoSubType">
+          <el-select
+            v-model="form.deviceVideoSubType"
+            placeholder="请选择设备小类"
+          >
+            <el-option
+              v-for="item in form_list.son_type"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="登录账号" prop="account">
+          <el-input v-model="form.account"></el-input>
+        </el-form-item>
+        <el-form-item label="登录密码" prop="password">
+          <el-input v-model="form.password"></el-input>
+        </el-form-item>
+        <el-form-item> <p>视频通道信息</p> </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="通道编码" prop="gbsChannelNo">
+          <el-input v-model="form.gbsChannelNo"></el-input>
+        </el-form-item>
+        <el-form-item label="NVR编码" prop="gbsNvrNo">
+          <el-input v-model="form.gbsNvrNo"></el-input>
+        </el-form-item>
+        <el-form-item label="通道号" prop="channelNo">
+          <el-input v-model="form.channelNo"></el-input>
+        </el-form-item>
+        <el-form-item label="RTSP流地址" prop="rtspAddress">
+          <el-input v-model="form.rtspAddress"></el-input>
+        </el-form-item>
+        <el-form-item> <p>设备位置信息</p> </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="设备经度" prop="longitude">
+          <el-input v-model="form.longitude"></el-input>
+        </el-form-item>
+        <el-form-item label="设备纬度" prop="latitude">
+          <el-input v-model="form.latitude"></el-input>
+        </el-form-item>
+        <el-form-item label="U3D经度" prop="u3dLongitude">
+          <el-input v-model="form.u3dLongitude"></el-input>
+        </el-form-item>
+        <el-form-item label="U3D纬度" prop="u3dLatitude">
+          <el-input v-model="form.u3dLatitude"></el-input>
+        </el-form-item>
+        <el-form-item label="设备高度" prop="deviceHeight">
+          <el-input v-model="form.deviceHeight"></el-input>
+        </el-form-item>
+        <el-form-item label="U3D高度" prop="u3dHeight">
+          <el-input v-model="form.u3dHeight"></el-input>
+        </el-form-item>
+        <el-form-item label="设备方位" prop="orientation">
+          <el-select v-model="form.orientation" placeholder="请选择设备方位">
+            <el-option
+              v-for="item in form_list.orientation_types"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="安装位置" prop="deviceAddress">
+          <el-input v-model="form.deviceAddress"></el-input>
+        </el-form-item>
+        <el-form-item> <p>设备其他信息</p> </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="设备品牌" prop="deviceBrand">
+          <el-input v-model="form.deviceBrand"></el-input>
+        </el-form-item>
+        <el-form-item label="设备厂家" prop="manufactor">
+          <el-input v-model="form.manufactor"></el-input>
+        </el-form-item>
+        <el-form-item label="厂家联系电话" prop="manufactorPhone">
+          <el-input v-model="form.manufactorPhone"></el-input>
+        </el-form-item>
+        <el-form-item label="SN号" prop="deviceSn">
+          <el-input v-model="form.deviceSn"></el-input>
+        </el-form-item>
+        <el-form-item label="设备MAC" prop="deviceMac">
+          <el-input v-model="form.deviceMac"></el-input>
+        </el-form-item>
+        <el-form-item label="设备端口" prop="devicePort">
+          <el-input v-model="form.devicePort"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="form_btn" slot="footer">
+      <el-button @click="save">保 存</el-button>
+      <el-button @click="close">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      title: "新建",
+      form: {
+        companyName: "",
+        deviceName: "",
+        deviceIp: "",
+        deviceVideoParentType: "",
+        deviceVideoSubType: "",
+        account: "",
+        password: "",
+        gbsChannelNo: "",
+        gbsNvrNo: "",
+        channelNo: "",
+        rtspAddress: "",
+        longitude: "",
+        latitude: "",
+        u3dLongitude: "",
+        u3dLatitude: "",
+        deviceHeight: "",
+        u3dHeight: "",
+        orientation: "",
+        deviceAddress: "",
+        deviceBrand: "",
+        manufactor: "",
+        manufactorPhone: "",
+        deviceSn: "",
+        deviceMac: "",
+        devicePort: "",
+      },
+      form_list: {
+        company: [],
+        parent_type: [],
+        son_type: [],
+        orientation_types: [],
+      },
+      rules: {
+        companyName: [
+          { required: true, message: "请选择企业", trigger: "change" },
+        ],
+        deviceName: [
+          { required: true, message: "请填写设备名称", trigger: "blur" },
+        ],
+        deviceIp: [
+          { required: true, message: "请填写设备ip", trigger: "blur" },
+        ],
+        deviceVideoParentType: [
+          { required: true, message: "请选择设备大类", trigger: "change" },
+        ],
+        deviceVideoSubType: [
+          { required: true, message: "请选择设备小类", trigger: "change" },
+        ],
+        gbsChannelNo: [
+          { required: true, message: "请输入通道编码", trigger: "blur" },
+        ],
+        gbsNvrNo: [
+          { required: true, message: "请输入NVR编码", trigger: "blur" },
+        ],
+        longitude: [
+          { required: true, message: "请输入设备经度", trigger: "blur" },
+        ],
+        latitude: [
+          { required: true, message: "请输入设备经度", trigger: "blur" },
+        ],
+        deviceAddress: [
+          { required: true, message: "请输入安装位置", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    save() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          console.log('submit');
+        } else {
+          this.$message.warning('请填入必填项')
+          return false;
+        }
+      });
+    },
+    // 关闭弹窗
+    close() {
+      // 表单清空
+      this.$refs["form"].resetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+  background-image: url("~@/assets/companyFile/dialogBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 750px;
+
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #fff;
+      font-size: 18px;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    p {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+}
+.form_body {
+  margin-top: 3%;
+  height: 600px;
+  overflow-y: scroll;
+  background: url("~@/assets/companyFile/242112.png") no-repeat;
+  background-size: 100% 100%;
+  p {
+    padding-top: 15px;
+    margin-left: 17px;
+    font-size: 16px;
+    color: #fff;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+}
+.form_body::-webkit-scrollbar {
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+
+.form_body::-webkit-scrollbar-thumb {
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+.form_btn {
+  .el-button {
+    width: 70px;
+    border: 1px solid #4a6072;
+    color: #fff;
+    border-radius: 0px !important;
+    background: #323f43;
+  }
+
+  .el-button:focus,
+  .el-button:hover {
+    color: #34e1b3;
+    background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+}
+/deep/.el-form {
+  /* 表单内容浮动布局，多行多列表单 */
+  width: 900px !important;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: 2vh;
+  .el-form-item {
+    /* 表单域名跟input浮动布局 */
+    display: flex;
+    width: 50%;
+
+    .el-form-item__label {
+      width: 40%;
+      text-align: center;
+      color: #fff;
+    }
+
+    .el-form-item__content {
+      .el-input__inner {
+        width: 300px;
+        border-radius: 0px;
+        // border: 0.5px dashed;
+        background: #3c4b4a;
+        color: #fff;
+      }
+
+      /* 查询框点击颜色变化 */
+      .el-input__inner:focus,
+      .el-input__inner:hover {
+        border-color: #1b3736;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file