提交

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: "",
+        deviceName: "",
-        channel_code: "",
+        gbsChannelNo: "",
-        equipment_ip: "",
+        deviceIp: "",
+      },
+      // 智能查询
+      perception_search: {
+        deviceName: "",
+        deviceIp: "",
       },
       btn_list: [
         { value: "1", label: "新增", icon: "plus" },
@@ -89,7 +186,6 @@ export default {
         { value: "4", label: "导出", icon: "top-left" },
       ],
       table_data: [],
-      table_column: [],
       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) {
+    obtain_table_data(data, params,flag) {
-       console.log('data_1',data);
+      this.table_flag = flag
-       this.table_data = data.rows
+      console.log("data_1", data);
-       console.log('params_1',params);
+      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);
@@ -232,20 +367,62 @@ export default {
   /deep/.el-button.operation {
     width: 40px;
     height: 30px;
-      text-align: center;
     background-color: rgb(35 52 56);
     border: 0px;
-      color: #fff;
+    color: #2fabdc;
   }
 
   /deep/.el-button.operation:hover,
   .el-button.operation:focus {
     width: 40px;
     height: 30px;
-      background-color: rgb(35 52 56);
+    background-color: rgb(35 52 56 0);
     border: 0px;
-      color: #fff;
+    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>

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.deviceVideoSubTypes = []
-      this.only_params.deviceVideoSubType = ""; // 按钮查视频设备的全部
+      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.deviceVideoSubTypes = []
-      this.only_params.devicePerceptionSubType = ""; // 按钮查智能设备的全部
+      this.devicePerceptionSubTypes = [];
-      getVideoList(this.only_params).then((res) => {
+      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.only_params.deviceVideoSubTypes =
-          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
+          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.only_params.deviceVideoSubTypes =
-          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
+          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.only_params.devicePerceptionSubTypes =
-          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
+          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.only_params.devicePerceptionSubTypes =
-          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
+          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
         });
       }
     },

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) {
+    push_data_to_table(data,params,flag) {
-      this.$refs.equipmentTable.obtain_table_data(data,params);
+      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;
     }
   }
 }