“修复诱捕器选择设备为空问题”

minggao/src/page/commandCenter/taskRegulator.vue

@@ -111,7 +111,7 @@
       >
         <el-table-column prop="ind" label="序号" width="80">
           <template slot-scope="scope">
-            <span>{{ ((page-1)*20)+scope.row.ind}}</span>
+            <span>{{ (page - 1) * 20 + scope.row.ind }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="task_id" label="任务编号" width="100">
@@ -351,12 +351,26 @@
             prop="checkList"
             style="width: 90%"
           >
-            <ul class="form_ul">
-              <li class="form_li">
-                <span class="form_li_tltie">+</span>
-                <span class="form_li_add" @click="addrDevice">去选择</span>
-              </li>
-
+            <div class="operation">
+              <span class="form_li_tltie">+</span>
+              <span class="form_li_add" @click="addrDevice">去选择</span>
+              <span
+                class="form_li_add"
+                @click="deviceDelDataall"
+                v-if="ybqCheckList.length"
+                >清除所有({{ ybqCheckList.length }}台)</span
+              >
+              <div v-if="ybqCheckList.length">
+                <el-input
+                  placeholder="设备编号"
+                  v-model="operationvalue"
+                  size="mini"
+                  clearable
+                >
+                </el-input>
+              </div>
+            </div>
+            <ul class="form_ul" v-if="ybqCheckList.length">
               <!-- 设备列表 -->
               <li
                 class="form_li"
@@ -369,7 +383,16 @@
                     src="../../assets/images/taskRegulator/1.png"
                     alt=""
                   />
-                  <span>{{ item.name }}</span>
+                  <span
+                    :style="{
+                      color:
+                        item.name.indexOf(operationvalue) != -1 &&
+                        operationvalue != ''
+                          ? '#409eff'
+                          : '',
+                    }"
+                    >{{ item.name }}</span
+                  >
                 </div>
               </li>
             </ul>
@@ -457,7 +480,14 @@
           >
           </el-input>
         </li>
-
+        <li class="device_seek_list">
+          <el-button
+            :type="checkall ? '' : 'success'"
+            size="mini"
+            @click="allsel"
+            >{{ checkall ? "取消全选" : "全选" }}</el-button
+          >
+        </li>
         <!-- 搜索 -->
         <li class="device_seek_list">
           <el-button type="success" size="mini" @change="ybqSearchData"
@@ -473,7 +503,7 @@
             :label="item.value"
             v-for="item in ybqData"
             :key="item.value"
-            >{{ item.label }}</el-checkbox
+            ><span style="color: #000">{{ item.label }}</span></el-checkbox
           >
         </el-checkbox-group>
         <el-empty v-if="ybqData.length == 0" :image-size="200"></el-empty>
@@ -481,11 +511,11 @@
 
       <!-- 分页 -->
       <el-pagination
-        style="margin: 60px 0 0 0"
-        :page-size="10"
+        style="margin: 30px 0 0 0"
+        :page-size="36"
         @current-change="ybqNemPage"
         :current-page="page2"
-        v-if="ybqData.length > 36"
+        v-if="listSum > 36"
         background
         layout="prev, pager, next, jumper"
         :total="listSum"
@@ -494,6 +524,9 @@
 
       <span slot="footer" class="dialog-footer">
         <el-button size="mini" @click="ybqAddEnsure">取 消</el-button>
+        <el-button size="mini" type="primary" @click="selecttrue"
+          >保 存</el-button
+        >
         <el-button size="mini" type="primary" @click="deviceVisible = false"
           >确 定</el-button
         >
@@ -652,6 +685,10 @@ export default {
       isClick: true, // 防止重复弹框
       btnShow: false, // 防止导出数据重复下载
       submitBtn: false, // 防止弹框确定按钮重复请求
+      checkall: false, //全选
+      checkListcopy: [], //选择列表存储
+      ybqDatacopy: [], //总数居列表
+      operationvalue: "",
     };
   },
   //监听属性 类似于data概念
@@ -700,6 +737,7 @@ export default {
     // 选择诱捕器弹框
     deviceVisible(val) {
       if (val == false) {
+        this.checkall = false;
         this.ybqData = []; // 诱捕器设备列表
         this.deviceForm.monitorDot = ""; // 监测点
         this.deviceForm.tissue = ""; // 组织
@@ -709,20 +747,23 @@ export default {
         this.pointData = []; // 监测点列表
       }
     },
-    checkList(val) {
+    checkListcopy(val) {
       console.log(val);
       this.ybqCheckList = [];
       this.ruleForm.checkList = [];
       for (let i = 0; i < val.length; i++) {
-        for (let j = 0; j < this.ybqData.length; j++) {
-          // if (val[i] === this.ybqData[j].value)
-          if (val[i] === this.ybqData[j].value) {
-            this.ybqCheckList.push({ id: val[i], name: this.ybqData[j].label });
+        for (let j = 0; j < this.ybqDatacopy.length; j++) {
+          // console.log(val[i],this.ybqDatacopy[j].value)
+          if (val[i] === this.ybqDatacopy[j].value) {
+            this.ybqCheckList.push({
+              id: val[i],
+              name: this.ybqDatacopy[j].label,
+            });
             this.ruleForm.checkList.push(val[i]);
           }
         }
       }
-      console.log(this.ruleForm.checkList);
+      // console.log(this.ruleForm.checkList);
     },
 
     "ruleForm.type"(newVal, oldVal) {
@@ -1157,6 +1198,38 @@ export default {
               list.push(obj);
             });
             this.ybqData = list;
+            console.log(this.ybqData);
+          }
+          this.loading5 = false;
+        })
+        .catch((err) => {
+          this.loading5 = false;
+        });
+    },
+    ybqList2() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=monitor_manage.trap_manage.trap_list",
+        data: this.qs.stringify({
+          trap_number: this.deviceForm.serial, // 设备编号
+          point_id: this.deviceForm.monitorDot, // 设备所属监测点id
+          org_id: this.deviceForm.tissue, // 设备所属组织id
+          trap_status: "", // 诱捕器状态 0停用 1正常
+          page: 1, // 页码
+          page_size: "999999999999", //每页数量，默认为10
+        }),
+      })
+        .then((res) => {
+          if (res.data.data.total_item !== 0) {
+            var data = res.data.data;
+            var list = [];
+            data.page_list.forEach((item) => {
+              var obj = {};
+              obj["value"] = item.trap_id;
+              obj["label"] = item.trap_number;
+              list.push(obj);
+            });
+            this.ybqDatacopy = list;
           }
           this.loading5 = false;
         })
@@ -1164,7 +1237,6 @@ export default {
           this.loading5 = false;
         });
     },
-
     // 新建任务 - 诱捕器 - 筛选项 - 组织、监测点 - 列表
     ybqScreenList() {
       this.$axios({
@@ -1208,14 +1280,48 @@ export default {
     ybqSearchData() {
       this.loading5 = true;
       this.ybqData = [];
+      this.page2 = 1;
+      this.checkall = false;
+      this.checkList = [];
       this.ybqList();
+      // this.ybqList2()
+    },
+    allsel() {
+      this.checkall = !this.checkall;
+      if (this.checkall) {
+        for (var i = 0; i < this.ybqData.length; i++) {
+          this.checkList.push(this.ybqData[i].value);
+        }
+      } else {
+        this.checkList = [];
+      }
+      console.log(this.ruleForm.checkList);
+      // this.ruleForm.checkList = this.ybqData
+    },
+    selecttrue() {
+      for (var i = 0; i < this.checkList.length; i++) {
+        var index = this.checkListcopy.indexOf(this.checkList[i]);
+        if (index == -1) {
+          this.checkListcopy.push(this.checkList[i]);
+        }
+      }
+      if (document.getElementsByClassName("el-message").length == 0) {
+        this.$message({
+          type: "success",
+          message: "保存成功!",
+          duration: 1500,
+        });
+      }
+      console.log(this.checkListcopy);
     },
-
     // 新建任务 - 诱捕器 - 列表 - 分页
     ybqNemPage(page) {
       this.page2 = page;
       this.ybqData = [];
+      this.checkall = false;
+      this.checkList = [];
       this.ybqList();
+      this.ybqList2();
     },
 
     // 新建任务 - 诱捕器  - 取消
@@ -1238,7 +1344,10 @@ export default {
     deviceDelData(index) {
       this.$delete(this.ybqCheckList, index);
     },
-
+    deviceDelDataall() {
+      this.ybqCheckList = [];
+      this.checkListcopy = [];
+    },
     // 新建任务 - 诱捕器 - 添加
     addrDevice() {
       this.loading5 = true;
@@ -1254,6 +1363,7 @@ export default {
       }
       // console.log(this.checkList);
       this.ybqList(); // 设备列表
+      this.ybqList2();
       this.ybqScreenList(); // 设备筛选列表
       this.deviceVisible = true;
     },
@@ -1364,10 +1474,21 @@ export default {
     width: 130px;
   }
 
+  .operation {
+    display: flex;
+    color: #1890ff;
+    .form_li_add {
+      cursor: pointer;
+      color: #1890ff;
+      margin-right: 15px;
+    }
+  }
   .form_ul {
     // border: 1px solid #000;
     display: flex;
     flex-wrap: wrap;
+    height: 200px;
+    overflow-y: auto;
     .form_li {
       margin: 0 25px 0 0;
       div {
@@ -1387,10 +1508,6 @@ export default {
         cursor: pointer;
         font-size: 15px;
       }
-      .form_li_add {
-        cursor: pointer;
-        color: #1890ff;
-      }
     }
   }
 

minggao/src/util/http.js

@@ -19,11 +19,11 @@ Vue.prototype.DOMIN = DOMIN
 Vue.prototype.wsUrl = wsUrl // 实时通信Url
 Vue.prototype.mapJson = mapJson //请求地图json,不带端口号
 // console.log(DOMIN)
-// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
-// axios.defaults.timeout = 30000;
-// axios.defaults.withCredentials = true //axios请求时携带session
-// axios.defaults.crossDomain = true
-// axios.defaults.baseURL = DOMIN
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+axios.defaults.timeout = 30000;
+axios.defaults.withCredentials = true //axios请求时携带session
+axios.defaults.crossDomain = true
+axios.defaults.baseURL = DOMIN
 
 
 // axios请求前的拦截