2022/2/12

minggao/package.json

@@ -53,7 +53,7 @@
     "swiper": "^3.4.2",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
-    "v-viewer": "^1.6.4",
+    "v-viewer": "^1.5.1",
     "vue-highcharts": "^0.1.0",
     "vue-lazyload": "^1.3.3",
     "vue-loader": "^13.3.0",

minggao/src/page/commandCenter/laboratory.vue

@@ -12,7 +12,7 @@
               v-model="input"
               clearable
               @change="searchData"
-              placeholder="请选择任务处理人"
+              placeholder="请选择任务处理人/实际处理人"
               size="mini"
             >
               <el-option
@@ -96,7 +96,16 @@
           width="180"
         >
         </el-table-column>
-        <el-table-column prop="report_time" label="带回时间" width="280">
+        <el-table-column
+          prop="actual_operator_name"
+          label="实际处理人"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.actual_operator_name || "暂无" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="report_time" label="带回时间">
           <template slot-scope="scope">
             <span>{{ scope.row.report_time || "暂无" }}</span>
           </template>
@@ -289,16 +298,16 @@ export default {
       options: [
         {
           value: "待接收",
-          label: "待接收",
+          label: "待接收"
         },
         {
           value: "已接收",
-          label: "已接收",
+          label: "已接收"
         },
         {
           value: "已填报",
-          lanbel: "已填报",
-        },
+          lanbel: "已填报"
+        }
       ],
       value: "", // 任务状态
       value1: "", // 时间筛选
@@ -315,8 +324,8 @@ export default {
       options1: [
         {
           value: "选项1",
-          label: "黄金糕",
-        },
+          label: "黄金糕"
+        }
       ],
       value2: "",
       input2: "",
@@ -325,11 +334,12 @@ export default {
       // 已识别
       examineObj: {}, // 选中的对象值
       fillList: [], // 填报详情数据
+      spareData: [], // 填报详情备用数据
       // models: Array(fillList.length).fill(''), // 填报select数据
       models: null, // 填报select数据
       insectVal: "", // 添加 - 有害生物
       numVal: "", // 添加 - 数量
-      loading1: false, // 加载
+      loading1: false // 加载
     };
   },
   //监听属性 类似于data概念
@@ -342,7 +352,7 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function () {
+        setTimeout(function() {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
@@ -353,8 +363,9 @@ export default {
     dialogVisible(val) {
       if (val == false) {
         this.fillList = [];
+        this.spareData = []; // 备用数据
       }
-    },
+    }
   },
   //方法集合
   methods: {
@@ -412,10 +423,10 @@ export default {
           operator_user_id: this.input, // 任务处理人id
           start_time: this.startTime, // 开始时间
           end_time: this.endTime, // 结束时间
-          task_status: this.value, // 任务状态
-        }),
+          task_status: this.value // 任务状态
+        })
       })
-        .then((res) => {
+        .then(res => {
           if (res.data.data.total_item !== 0) {
             this.tableSum = res.data.data.total_item;
             var data = res.data.data.page_list;
@@ -428,7 +439,7 @@ export default {
           }
           this.loading = false;
         })
-        .catch((err) => {
+        .catch(err => {
           this.loading = false;
         });
     },
@@ -438,12 +449,18 @@ export default {
       this.$axios({
         method: "POST",
         url: "/api/api_gateway?method=control_center.task.task_user_list",
+        data: this.qs.stringify({
+          user_type: "operator", // 用户类型，operator（任务处理人）, supervisor（任务监督人）, owner（任务发布人）
+          operator_id: "", // 已经选择的任务处理人id
+          supervisor_id: "", // 已经选择的任务监督人id
+          owner_id: "" // 已经选择的任务发布人id
+        })
       })
-        .then((res) => {
-          if (res.data.data.operator_user_list.length !== 0) {
-            var data = res.data.data.operator_user_list;
+        .then(res => {
+          if (res.data.data.length !== 0) {
+            var data = res.data.data;
             var list = [];
-            data.forEach((item) => {
+            data.forEach(item => {
               var obj = {};
               obj["value"] = item.user_id;
               obj["label"] = item.real_name;
@@ -452,7 +469,7 @@ export default {
             this.conductorList = list;
           }
         })
-        .catch((err) => {});
+        .catch(err => {});
     },
 
     // 确认接收
@@ -460,28 +477,28 @@ export default {
       this.$confirm("此操作将确认接收, 是否继续?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning",
+        type: "warning"
       })
         .then(() => {
           this.$axios({
             method: "POST",
             url: "/api/api_gateway?method=control_center.task.discern_modify",
             data: this.qs.stringify({
-              record_id: data.id, // 任务id
-            }),
+              record_id: data.id // 任务id
+            })
           })
-            .then((res) => {
+            .then(res => {
               if (res.data.data == true) {
                 this.$message({
                   type: "success",
                   message: "接收成功!",
-                  duration: 1500,
+                  duration: 1500
                 });
                 this.loading = true;
                 this.tableList();
               }
             })
-            .catch((err) => {
+            .catch(err => {
               console.log(err);
             });
         })
@@ -489,7 +506,7 @@ export default {
           this.$message({
             type: "info",
             message: "已取消接收",
-            duration: 1500,
+            duration: 1500
           });
         });
     },
@@ -501,29 +518,31 @@ export default {
       // 填报记录详情接口
       this.$axios({
         method: "POST",
-        url: "/api/api_gateway?method=control_center.task.trap_pest_record_info",
+        url:
+          "/api/api_gateway?method=control_center.task.trap_pest_record_info",
         data: this.qs.stringify({
-          trap_record_id: data.id, // 任务id
-        }),
+          trap_record_id: data.id // 任务id
+        })
       })
-        .then((res) => {
-            var data = res.data.data;
-            var list = [];
-            var arr = []
-            data.forEach((item, index) => {
-              var obj = {};
-              obj["value"] = item.id;
-              obj["label"] = item.pest_name;
-              obj["num"] = item.pest_number;
-              obj["ind"] = index;
-              list.push(obj);
-              arr.push(item.id)
-            });
-            this.fillList = list;
-            this.models = arr
-            this.dialogVisible = true;
+        .then(res => {
+          var data = res.data.data;
+          var list = [];
+          var arr = [];
+          data.forEach((item, index) => {
+            var obj = {};
+            obj["value"] = item.id;
+            obj["label"] = item.pest_name;
+            obj["num"] = item.pest_number;
+            obj["ind"] = index;
+            list.push(obj);
+            arr.push(item.id);
+          });
+          this.fillList = list;
+          this.spareData = list; // 备用数据
+          this.models = arr;
+          this.dialogVisible = true;
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err);
         });
     },
@@ -531,23 +550,22 @@ export default {
     // 添加有害生物
     addInsect() {
       if (this.insectVal !== "" && this.numVal !== "") {
-        
-        var array = []
+        var array = [];
         for (var i = 0; i < this.fillList.length; i++) {
-          var obj = {}
-          obj['pest_name'] = this.fillList[i].label
-          obj['pest_number'] = this.fillList[i].num
-          array.push(obj)
+          var obj = {};
+          obj["pest_name"] = this.fillList[i].label;
+          obj["pest_number"] = this.fillList[i].num;
+          array.push(obj);
         }
         var obj1 = {};
         obj1["pest_name"] = this.insectVal;
         obj1["pest_number"] = Number(this.numVal);
-        array = [...array, obj1]
+        array = [...array, obj1];
 
         this.$confirm("此操作将新增有害生物, 是否继续?", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
-          type: "warning",
+          type: "warning"
         })
           .then(() => {
             this.$axios({
@@ -555,22 +573,22 @@ export default {
               url: "/api/api_gateway?method=control_center.task.discern_add",
               data: this.qs.stringify({
                 record_id: this.examineObj.id, // 任务id
-                pest_list: JSON.stringify(array), // 害虫数组
-              }),
+                pest_list: JSON.stringify(array) // 害虫数组
+              })
             })
-              .then((res) => {
+              .then(res => {
                 if (res.data.message == "") {
                   this.$message({
                     type: "success",
                     message: "添加成功!",
-                    duration: 1500,
+                    duration: 1500
                   });
                   this.examine(this.examineObj);
                 }
                 this.insectVal = "";
                 this.numVal = "";
               })
-              .catch((err) => {
+              .catch(err => {
                 console.log(err);
               });
           })
@@ -578,124 +596,131 @@ export default {
             this.$message({
               type: "info",
               message: "已取消添加",
-              duration: 1500,
+              duration: 1500
             });
           });
       } else {
         this.$message({
           type: "info",
           message: "请将信息填写完整！",
-          duration: 1500,
+          duration: 1500
         });
       }
     },
 
     // 删除有害生物
     delInsect(data) {
-      this.$confirm('此操作将永久删除该有害生物, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.loading1 = true
-          var list = this.fillList
-          list.splice(data.ind, 1)
-          var arr = []
-          list.forEach((item) => {
-            var obj = {}
-            obj['pest_name'] = item.label
-            obj['pest_number'] = item.num
-            arr.push(obj)
-          })  
+      this.$confirm("此操作将永久删除该有害生物, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.loading1 = true;
+          var list = this.fillList;
+          list.splice(data.ind, 1);
+          var arr = [];
+          list.forEach(item => {
+            var obj = {};
+            obj["pest_name"] = item.label;
+            obj["pest_number"] = item.num;
+            arr.push(obj);
+          });
           this.$axios({
             method: "POST",
             url: "/api/api_gateway?method=control_center.task.discern_add",
             data: this.qs.stringify({
               record_id: this.examineObj.id, // 任务id
-              pest_list: JSON.stringify(arr), // 害虫数组
+              pest_list: JSON.stringify(arr) // 害虫数组
             })
-          }).then((res) => {
-            if (res.data.message == "") {
-              this.$message({
-                type: "success",
-                message: "删除成功!",
-                duration: 1500,
-              });
-              this.examine(this.examineObj);
-            }
-            this.loading1 = false
-          }).catch((err) => {
-            this.loading1 = false
           })
-        }).catch(() => {
+            .then(res => {
+              if (res.data.message == "") {
+                this.$message({
+                  type: "success",
+                  message: "删除成功!",
+                  duration: 1500
+                });
+                this.examine(this.examineObj);
+              }
+              this.loading1 = false;
+            })
+            .catch(err => {
+              this.loading1 = false;
+            });
+        })
+        .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消删除',
-            duration: 1500,
-          });          
+            type: "info",
+            message: "已取消删除",
+            duration: 1500
+          });
         });
     },
 
     // 编辑有害生物
     compileInsect(e, data, index) {
-      // this.loading1 = true
-      var list = this.fillList
-      var newList = []
-      // 下拉框数据改变处理
-      for (var i = 0; i < list.length; i++) {
-        var obj = {}
-        if (e == list[i].value) {
-          obj['pest_name'] = list[i].label
-          obj['pest_number'] = data.num
-          newList.push(obj)
-        }
-      }
-      // 修改数据为可发送到后端接口数据
-      var arr = []
-      list.forEach((item) => {
-        var obj = {}
-        obj['pest_name'] = item.label
-        obj['pest_number'] = item.num
-        arr.push(obj)
+      this.$confirm("此操作将编辑该有害生物, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
       })
-      arr.splice(index, 1, ...newList)
-       this.$confirm('此操作将编辑该有害生物, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          // this.$axios({
-          //   method: "POST",
-          //   url: "/api/api_gateway?method=control_center.task.discern_add",
-          //   data: this.qs.stringify({
-          //     record_id: this.examineObj.id, // 任务id
-          //     pest_list: JSON.stringify(arr), // 害虫数组
-          //   }),
-          // })
-          //   .then((res) => {
-          //     if (res.data.message == "") {
-          //       this.$message({
-          //         type: "success",
-          //         message: "编辑成功!",
-          //         duration: 1500,
-          //       });
-          //       this.examine(this.examineObj);
-          //     }
-          //     this.insectVal = "";
-          //     this.numVal = "";
-          //   })
-          //   .catch((err) => {
-          //     console.log(err);
-          //   });
-        }).catch(() => {
-          this.$set(this.fillList, index, data)
-          console.log(this.fillList)
+        .then(() => {
+          this.$set(this.models, index, e);
+          var list = this.spareData;
+          var newList = [];
+          // 下拉框数据改变处理
+          for (var i = 0; i < list.length; i++) {
+            var obj = {};
+            if (e == list[i].value) {
+              obj["pest_name"] = list[i].label;
+              obj["pest_number"] = data.num;
+              newList.push(obj);
+            }
+          }
+          // 修改数据为可发送到后端接口数据
+          var arr = [];
+          var list = this.fillList;
+          list.forEach(item => {
+            var obj = {};
+            obj["pest_name"] = item.label;
+            obj["pest_number"] = item.num;
+            arr.push(obj);
+          });
+          arr.splice(index, 1, ...newList);
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=control_center.task.discern_add",
+            data: this.qs.stringify({
+              record_id: this.examineObj.id, // 任务id
+              pest_list: JSON.stringify(arr) // 害虫数组
+            })
+          })
+            .then(res => {
+              if (res.data.message == "") {
+                this.$message({
+                  type: "success",
+                  message: "编辑成功!",
+                  duration: 1500
+                });
+                this.examine(this.examineObj);
+              }
+              this.insectVal = "";
+              this.numVal = "";
+            })
+            .catch(err => {
+              console.log(err);
+            });
+        })
+        .catch(() => {
+          this.loading1 = false;
+          this.$set(this.models, index, this.fillList[index].value);
           this.$message({
-            type: 'info',
-            message: '已取消编辑'
-          });          
+            type: "info",
+            message: "已取消编辑"
+          });
         });
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -712,10 +737,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .laboratory_box {
   // 搜索
   .search_box {
@@ -783,4 +808,4 @@ export default {
     overflow-y: auto;
   }
 }
-</style>
+</style>

minggao/src/page/commandCenter/supervise.vue

@@ -61,8 +61,9 @@
               >
               <el-button size="mini" @click="reset">重置</el-button>
 
-              <el-button type="primary" size="mini" @click="exportData"
-                >导出数据</el-button
+              <el-button type="primary" size="mini" @click="exportData">
+                <i v-if="loadingShow" class="el-icon-loading"></i>
+                导出数据</el-button
               >
             </div>
           </div>
@@ -142,6 +143,7 @@ export default {
       value: "", // 时间筛选
       startTime: "", // 开始时间
       endTime: "", // 结束时间
+      loadingShow: false, // 导出加载
 
       // 表格
       tableData: [],
@@ -219,20 +221,28 @@ export default {
     conductorAxios() {
       this.$axios({
         method: "POST",
-        url: "/api/api_gateway?method=control_center.task.task_user_list"
-      }).then(res => {
-        if (res.data.data.operator_user_list.length !== 0) {
-          var data = res.data.data.supervisor_user_list; // 监督人
-          var list = [];
-          data.forEach(item => {
-            var obj = {};
-            obj["value"] = item.user_id;
-            obj["label"] = item.real_name;
-            list.push(obj);
-          });
-          this.conductorList = list;
-        }
-      });
+        url: "/api/api_gateway?method=control_center.task.task_user_list",
+        data: this.qs.stringify({
+          user_type: "supervisor", // 用户类型，operator（任务处理人）, supervisor（任务监督人）, owner（任务发布人）
+          operator_id: "", // 已经选择的任务处理人id
+          supervisor_id: "", // 已经选择的任务监督人id
+          owner_id: "" // 已经选择的任务发布人id
+        })
+      })
+        .then(res => {
+          if (res.data.data.length !== 0) {
+            var data = res.data.data;
+            var list = [];
+            data.forEach(item => {
+              var obj = {};
+              obj["value"] = item.user_id;
+              obj["label"] = item.real_name;
+              list.push(obj);
+            });
+            this.conductorList = list;
+          }
+        })
+        .catch(err => {});
     },
 
     // 搜索
@@ -256,6 +266,7 @@ export default {
 
     // 导出数据
     exportData() {
+      this.loadingShow = true;
       this.$axios({
         method: "POST",
         url: "/api/api_gateway?method=control_center.task.supervisor_export",
@@ -263,9 +274,11 @@ export default {
       })
         .then(res => {
           this.downloadFile(res, "监督记录.xls");
+          this.loadingShow = false;
         })
         .catch(err => {
-          console.log(err);
+          this.loadingShow = false;
+          // console.log(err);
         });
     },
 

minggao/src/page/commandCenter/superviseAdmin.vue

@@ -0,0 +1,450 @@
+<!--  -->
+<template>
+  <div class="superviseAdmin_box">
+    <el-card :style="'height:' + fullHeight + 'px'">
+      <!-- 筛选 -->
+      <el-row>
+        <el-col>
+          <div class="search_box">
+            <!-- 任务处理人 -->
+            <el-select
+              filterable
+              :loading="loading2"
+              v-model="input"
+              clearable
+              @change="searchData"
+              @focus="selectList('operator')"
+              placeholder="请选择任务处理人/实际处理人"
+              size="mini"
+            >
+              <el-option
+                v-for="item in conductorList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <!-- 任务发布人 -->
+            <!-- <el-input
+              style="width: 14%"
+              @change="searchData"
+              :loading="loading3"
+              @focus="selectList('owner')"
+              placeholder="请输入任务发布人"
+              v-model="input2"
+              size="mini"
+              clearable
+            >
+            </el-input> -->
+            <el-select
+              filterable
+              :loading="loading3"
+              v-model="input2"
+              clearable
+              @change="searchData"
+              @focus="selectList('owner')"
+              placeholder="请选择任务发布人"
+              size="mini"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <!-- 任务状态 -->
+            <el-select
+              filterable
+              v-model="value"
+              @change="searchData"
+              clearable
+              placeholder="请选择任务状态"
+              size="mini"
+            >
+              <el-option
+                v-for="item in options2"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <!-- 时间筛选 -->
+            <el-date-picker
+              size="mini"
+              v-model="value2"
+              @change="searchData"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              align="right"
+            >
+            </el-date-picker>
+
+            <div class="btn_box">
+              <el-button type="primary" size="mini" @click="searchData"
+                >搜索</el-button
+              >
+              <el-button size="mini" @click="reset">重置</el-button>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 表格 -->
+      <el-table
+        :data="tableData"
+        v-loading="loading"
+        stripe
+        style="width: 100%"
+      >
+        <el-table-column prop="ind" label="序号" width="80"> </el-table-column>
+        <el-table-column prop="task_id" label="任务编号" width="100">
+        </el-table-column>
+        <el-table-column prop="task_type" label="任务类型"> </el-table-column>
+        <el-table-column prop="operator_user" label="任务处理人">
+        </el-table-column>
+        <el-table-column prop="owner_user" label="任务发布人">
+        </el-table-column>
+        <el-table-column prop="supervisor_user" label="任务监督人">
+        </el-table-column>
+        <el-table-column prop="start_time" label="任务时间"></el-table-column>
+        <el-table-column prop="start_time" label="任务结束"></el-table-column>
+        <el-table-column prop="end_time" label="任务完成时间">
+          <template slot-scope="scope">
+            <span>{{ scope.row.end_time || "暂无" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="task_status" label="任务状态">
+          <template slot-scope="scope">
+            <div v-for="(item, index) in type_status" :key="index">
+              <span
+                v-if="item.name == scope.row.task_status"
+                :style="'color:' + item.color + '; font-weight: 550'"
+                >{{ scope.row.task_status }}</span
+              >
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <a
+              class="reset"
+              href="javascript:;"
+              @click="examineDetail(scope.row)"
+              >查看</a
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        style="margin: 60px 0 0 0"
+        :page-size="10"
+        @current-change="newPage"
+        :current-page="page"
+        v-if="tableData.length > 0"
+        background
+        layout="prev, pager, next, jumper"
+        :total="tableSum"
+      >
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      fullHeight: document.documentElement.clientHeight - 116, //
+
+      // 筛选
+      input: "", // 任务处理人
+      loading2: false,
+      conductorList: [], // 任务处理人 - 列表
+      input2: "", // 任务发布人
+      loading3: false,
+      options: [], // 任务发布人 - 列表
+      value: "", // 任务状态
+      options2: [
+        {
+          value: "未开始",
+          label: "未开始"
+        },
+        {
+          value: "处理中",
+          label: "处理中"
+        },
+        {
+          value: "已完成",
+          label: "已完成"
+        },
+        {
+          value: "未处理",
+          label: "未处理"
+        },
+        {
+          value: "逾期完成",
+          label: "逾期完成"
+        }
+      ], // 任务状态 - 列表
+      value2: "", // 时间筛选
+      startTime: "", // 开始时间
+      endTime: "", // 结束时间
+
+      // 表格
+      tableData: [],
+      loading: false, // 加载
+      // 任务状态展示
+      type_status: [
+        {
+          name: "未开始",
+          color: "#E6A23C"
+        },
+        {
+          name: "处理中",
+          color: "#E6A23C"
+        },
+        {
+          name: "已完成",
+          color: "#67C23A"
+        },
+        {
+          name: "未处理",
+          color: "#F56C6C"
+        },
+        {
+          name: "逾期完成",
+          color: "#409EFF"
+        }
+      ],
+
+      // 分页
+      page: 1, // 当前页码
+      tableSum: 0 // 总页码
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    fullHeight(val) {
+      //监控浏览器高度变化
+      if (!this.timer) {
+        this.fullHeight = val;
+        this.timer = true;
+        let that = this;
+        setTimeout(function() {
+          //防止过度调用监测事件，导致卡顿
+          that.timer = false;
+        }, 400);
+      }
+    }
+  },
+  //方法集合
+  methods: {
+    //动态获取浏览器高度
+    get_boderHeight() {
+      const that = this;
+      window.onresize = () => {
+        return (() => {
+          window.fullHeight = document.documentElement.clientHeight;
+          that.fullHeight = window.fullHeight;
+        })();
+      };
+    },
+
+    // 表格
+    tableList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.supervisor_list",
+        data: this.qs.stringify({
+          page: this.page,
+          page_item: "10",
+          operator_user_id: this.input, // 处理人
+          owner_user_id: this.input2, // 发布人id
+          start_time: this.startTime, // 开始时间
+          end_time: this.endTime, // 结束时间
+          task_status: this.value // 任务状态
+        })
+      })
+        .then(res => {
+          if (res.data.data.total_item !== 0) {
+            var data = res.data.data;
+            this.tableSum = data.total_item;
+            var list = [];
+            data.page_list.forEach((item, index) => {
+              item.ind = index + 1;
+              list.push(item);
+            });
+            this.tableData = list;
+          }
+          this.loading = false;
+        })
+        .catch(err => {
+          this.loading = false;
+        });
+    },
+
+    // 搜索
+    searchData() {
+      if (this.value2) {
+        this.startTime = this.formatTime(this.value2[0], "yyyy-MM-dd");
+        this.endTime = this.formatTime(this.value2[1], "yyyy-MM-dd");
+      } else {
+        this.startTime = "";
+        this.endTime = "";
+      }
+      this.tableData = [];
+      this.loading = true;
+      this.tableList();
+    },
+
+    // 筛选列表 - 任务处理人、任务发布人
+    selectList(type) {
+      if (type == "operator") {
+        // 任务处理人
+        var a = ""; //任务处理人
+        var b = ""; //任务监督人
+        var c = this.input2; //任务发布人
+        this.loading2 = true;
+      } else if (type == "owner") {
+        // 任务发布人
+        var a = this.input; //任务处理人
+        var b = ""; //任务监督人
+        var c = ""; //任务发布人
+        this.loading3 = true;
+      }
+      this.conductorAxios(type, a, b, c);
+    },
+
+    // 筛选列表 - 处理人
+    conductorAxios(type, a, b, c) {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.task_user_list",
+        data: this.qs.stringify({
+          user_type: type, // 用户类型，operator（任务处理人）, supervisor（任务监督人）, owner（任务发布人）
+          operator_id: a, // 已经选择的任务处理人id
+          supervisor_id: b, // 已经选择的任务监督人id
+          owner_id: c // 已经选择的任务发布人id
+        })
+      })
+        .then(res => {
+          if (res.data.data.length !== 0) {
+            var data = res.data.data;
+            var list = [];
+            data.forEach(item => {
+              var obj = {};
+              obj["value"] = item.user_id;
+              obj["label"] = item.real_name;
+              list.push(obj);
+            });
+            if (type == "operator") {
+              // 任务处理人
+              this.loading2 = false;
+              this.conductorList = list;
+            } else if (type == "owner") {
+              // 任务发布人
+              this.loading3 = false;
+              this.options = list;
+            }
+          }
+        })
+        .catch(err => {});
+    },
+
+    // 重置
+    reset() {
+      this.input = ""; // 处理人
+      this.input2 = ""; // 发布人
+      this.value = ""; // 任务状态
+      this.value2 = ""; // 时间筛选
+      this.startTime = ""; // 开始时间
+      this.endTime = ""; // 结束时间
+      this.tableData = [];
+      this.loading = true;
+      this.tableList();
+    },
+
+    // 下页
+    newPage(page) {
+      this.page = page;
+      this.tableData = [];
+      this.loading = true;
+      this.tableList();
+    },
+
+    // 查看
+    examineDetail(data) {
+      this.$router.push({
+        path: "/index/superviseAdminDetails",
+        query: {
+          id: data.task_id
+        }
+      });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.loading = true;
+    this.get_boderHeight(); // 动态获取浏览器高度
+    this.tableList(); // 表格
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.superviseAdmin_box {
+  // 搜索
+  .search_box {
+    display: flex;
+    /deep/.el-select {
+      margin: 0 15px 0 0;
+    }
+    /deep/.el-input {
+      margin: 0 15px 0 0;
+    }
+    .btn_box {
+      margin: 0 0 0 15px;
+    }
+
+    /deep/.el-range-editor--mini.el-input__inner {
+      width: 20%;
+    }
+  }
+
+  a {
+    text-decoration: none;
+  }
+  .reset {
+    color: #1890ff;
+  }
+
+  /deep/.el-card {
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

minggao/src/page/commandCenter/superviseAdminDetails.vue

@@ -0,0 +1,370 @@
+<!--  -->
+<template>
+  <div class="superviseAdminDetails_box">
+    <el-card :style="'height:' + fullHeight + 'px'">
+      <el-row>
+        <!-- 任务信息 -->
+        <el-col :span="24">
+          <div class="list_box">
+            <div class="list_tlt">
+              <span>任务信息</span>
+              <el-button type="primary" size="mini">监督</el-button>
+            </div>
+
+            <ul class="list_ul">
+              <li class="list_li">
+                <div class="list_div">
+                  <span class="list_div_tlt">任务类型：</span>
+                  <span class="list_div_val">{{ taskObj.task_type }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务监督人：</span>
+                  <span class="list_div_val">{{
+                    taskObj.supervisor_user
+                  }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务时间：</span>
+                  <span class="list_div_val">{{ taskObj.start_time }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务发布人：</span>
+                  <span class="list_div_val">{{ taskObj.owner_user }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务处理人：</span>
+                  <span class="list_div_val">{{ taskObj.operator_user }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务状态：</span>
+                  <span class="list_div_val">{{ taskObj.task_status }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务描述：</span>
+                  <span class="list_div_val">{{ taskObj.tesk_msg }}</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+
+        <!-- 签到信息 -->
+        <el-col :span="24">
+          <div class="list_box">
+            <div class="list_tlt">签到信息</div>
+
+            <ul class="list_ul">
+              <li class="list_sing_li">
+                <div class="list_sing_div">
+                  <span class="list_div_tlt">签到图片：</span>
+                  <p
+                    v-if="taskObj.img_list.length !== 0"
+                    style="display: flex;"
+                  >
+                    <span
+                      class="list_div_img"
+                      v-for="(item, index) in taskObj.img_list"
+                      :key="index"
+                    >
+                      <img v-viewer :src="item" alt="" />
+                    </span>
+                  </p>
+                  <span>暂无签到图片</span>
+                </div>
+
+                <div class="list_sing_div">
+                  <span class="list_div_tlt">签到时间：</span>
+                  <span class="list_div_val">{{
+                    taskObj.end_time || "暂无"
+                  }}</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+
+        <!-- 任务填报信息 -->
+        <el-col :span="24" v-if="taskObj.task_type == '有害生物监测'">
+          <div class="list_box">
+            <div class="list_tlt">任务填报信息</div>
+            <ul class="list_table_ul">
+              <li class="list_li">
+                <el-table :data="tableData" stripe style="width: 100%">
+                  <el-table-column prop="trap_number" label="设备编号">
+                  </el-table-column>
+                  <el-table-column prop="monitor_point" label="监测点">
+                  </el-table-column>
+                  <el-table-column prop="inducer_type" label="诱剂">
+                  </el-table-column>
+                  <el-table-column prop="report_status" label="有害生物登记">
+                    <template slot-scope="scope">
+                      <span
+                        v-if="scope.row.report_status == '已登记'"
+                        @click="examine(scope.row)"
+                        style="color: #409EFF; cursor: pointer;"
+                        >查看</span
+                      >
+                      <span v-else>{{ scope.row.report_status || "无" }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="report_time" label="录入时间">
+                    <template slot-scope="scope">
+                      <span>{{ scope.row.report_time || "无" }}</span>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+
+        <!-- 任务汇报 -->
+        <el-col :span="24">
+          <div class="list_box">
+            <div class="list_tlt">任务汇报</div>
+
+            <ul class="list_report_ul">
+              <li class="list_report_li">{{ taskObj.report_msg || "暂无" }}</li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 填报信息弹框 -->
+    <el-dialog
+      :title="titleData"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      width="30%"
+    >
+      <ul class="insect_ul">
+        <li
+          class="insect_list"
+          v-for="(item, index) in insectList"
+          :key="index"
+        >
+          <div>{{ item.pest_name + "：" }}</div>
+          <div style="margin: 0 0 0 20px">{{ item.pest_number }}</div>
+        </li>
+      </ul>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      fullHeight: document.documentElement.clientHeight - 116, //
+
+      // 详情总数据
+      taskObj: {},
+
+      // 任务填报信息
+      tableData: [],
+      dialogVisible: false, // 弹框
+      titleData: "", // 弹框标题
+      insectList: [], //害虫列表
+
+      // 任务汇报
+      reportList: [
+        "1、今天做了检测完成任务了没有",
+        "2、途中发生了什么事情",
+        "3、对这次任务有什么总结",
+        "4、我对这次任务有哪些建议"
+      ]
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    fullHeight(val) {
+      //监控浏览器高度变化
+      if (!this.timer) {
+        this.fullHeight = val;
+        this.timer = true;
+        let that = this;
+        setTimeout(function() {
+          //防止过度调用监测事件，导致卡顿
+          that.timer = false;
+        }, 400);
+      }
+    }
+  },
+  //方法集合
+  methods: {
+    //动态获取浏览器高度
+    get_boderHeight() {
+      const that = this;
+      window.onresize = () => {
+        return (() => {
+          window.fullHeight = document.documentElement.clientHeight;
+          that.fullHeight = window.fullHeight;
+        })();
+      };
+    },
+
+    // 详情界面数据
+    detailsData() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.task_info",
+        data: this.qs.stringify({
+          task_id: this.$route.query.id
+        })
+      })
+        .then(res => {
+          if (res.data.data) {
+            var data = res.data.data;
+            data.img_list = JSON.parse(data.img_list);
+            this.taskObj = data;
+            this.tableData = data.trap_record_list;
+          }
+          this.loading = false;
+        })
+        .catch(err => {
+          this.loading = false;
+          console.log(err);
+        });
+    },
+
+    // 查看
+    examine(data) {
+      this.titleData = "设备编号：" + data.trap_number;
+      this.insectList = data.pest_list;
+      this.dialogVisible = true;
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.loading = true; // 加载
+    this.get_boderHeight(); // 动态获取浏览器高度
+    this.detailsData(); //详情界面数据
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.superviseAdminDetails_box {
+  // 任务信息
+  .list_box {
+    margin: 0 0 20px 0;
+    .list_tlt {
+      display: flex;
+      justify-content: space-between;
+      width: 95%;
+      margin: 0 auto;
+      font-size: 20px;
+    }
+
+    .list_ul {
+      margin: 20px 0 0 0;
+      padding: 20px 40px 20px 40px;
+      background: #f6f8fa;
+      .list_li {
+        display: flex;
+        flex-wrap: wrap;
+        .list_div {
+          margin: 0 0 25px 0;
+          width: 33%;
+          font-size: 14px;
+          color: #333333;
+        }
+      }
+
+      .list_sing_li {
+        display: flex;
+        justify-content: space-between;
+        .list_sing_div {
+          margin: 0 0 25px 0;
+          width: 33%;
+          font-size: 14px;
+          display: flex;
+          color: #333333;
+          .list_div_img {
+            width: 113px;
+            margin: 0 15px 0 0;
+            display: flex;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    // 任务填报信息
+    .list_table_ul {
+      margin: 20px 0 0 0;
+      padding: 20px 40px 20px 40px;
+      // background: #f6f8fa;
+      .list_li {
+        display: flex;
+        flex-wrap: wrap;
+        .list_div {
+          margin: 0 0 25px 0;
+          width: 33%;
+          font-size: 14px;
+          color: #333333;
+        }
+      }
+    }
+
+    // 任务汇报
+    .list_report_ul {
+      margin: 20px 0 0 0;
+      padding: 20px 40px 20px 40px;
+      background: #f6f8fa;
+      .list_report_li {
+        font-size: 14px;
+        margin: 0 0 10px 0;
+        color: #333333;
+      }
+    }
+  }
+
+  /deep/.el-table th.el-table__cell {
+    background-color: #f6f8fa;
+  }
+
+  /deep/.el-card {
+    overflow: hidden;
+    overflow-y: auto;
+  }
+
+  // 害虫弹框
+  .insect_ul {
+    .insect_list {
+      display: flex;
+      margin: 0 0 20px 0;
+      div {
+        font-size: 18px;
+        width: 20%;
+        text-align: right;
+        margin: 0px 0 0 -35px;
+      }
+    }
+  }
+}
+</style>

minggao/src/page/commandCenter/superviseLog.vue

@@ -41,8 +41,9 @@
                 >搜索</el-button
               >
               <el-button size="mini" @click="reset">重置</el-button>
-              <el-button type="primary" size="mini" @click="exportData"
-                >导出数据</el-button
+              <el-button type="primary" size="mini" @click="exportData">
+                <i v-if="loadingShow" class="el-icon-loading"></i>
+                导出数据</el-button
               >
             </div>
           </div>
@@ -109,6 +110,7 @@ export default {
       value: "", // 时间筛选
       startTime: "", //开始时间
       endTime: "", // 结束时间
+      loadingShow: false, // 导出加载
 
       // 表格
       tableData: [],
@@ -188,12 +190,17 @@ export default {
     conductorAxios() {
       this.$axios({
         method: "POST",
-        url: "/api/api_gateway?method=control_center.task.task_user_list"
+        url: "/api/api_gateway?method=control_center.task.task_user_list",
+        data: this.qs.stringify({
+          user_type: "supervisor", // 用户类型，operator（任务处理人）, supervisor（任务监督人）, owner（任务发布人）
+          operator_id: "", // 已经选择的任务处理人id
+          supervisor_id: "", // 已经选择的任务监督人id
+          owner_id: "" // 已经选择的任务发布人id
+        })
       })
         .then(res => {
-          if (res.data.data.operator_user_list.length !== 0) {
-            var data = res.data.data.supervisor_user_list; // 监督人
-            // 监督人
+          if (res.data.data.length !== 0) {
+            var data = res.data.data;
             var list = [];
             data.forEach(item => {
               var obj = {};
@@ -250,6 +257,7 @@ export default {
 
     // 导出数据
     exportData() {
+      this.loadingShow = true;
       this.$axios({
         method: "POST",
         url: "/api/api_gateway?method=control_center.task.monitor_log_export",
@@ -257,9 +265,11 @@ export default {
       })
         .then(res => {
           this.downloadFile(res, "监测日志.xls");
+          this.loadingShow = false;
         })
         .catch(err => {
-          console.log(err);
+          this.loadingShow = false;
+          // console.log(err);
         });
     },
 

minggao/src/page/commandCenter/superviseLogDetails.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="superviseLogDetails_box">
-    <el-card :style="'height:' + fullHeight + 'px'">
+    <el-card :style="'height:' + fullHeight + 'px'" v-loading="loading">
       <el-row>
         <!-- 监督信息 -->
         <el-col :span="24">
@@ -97,7 +97,8 @@ export default {
       // 监督信息
       superviseList: {},
       // 监测内容
-      tableData: []
+      tableData: [],
+      loading: false // 加载
     };
   },
   //监听属性 类似于data概念
@@ -141,7 +142,6 @@ export default {
         })
       })
         .then(res => {
-          console.log(res.data.data);
           if (res.data.data.total_item !== 0) {
             var data = res.data.data;
             this.superviseList = data.monitor_info; // 监督信息
@@ -152,9 +152,10 @@ export default {
             });
             this.tableData = list; // 监测内容
           }
+          this.loading = false;
         })
         .catch(err => {
-          console.log(err);
+          this.loading = false;
         });
     }
   },
@@ -162,6 +163,7 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    this.loading = true;
     this.get_boderHeight(); // 动态获取浏览器高度
     this.detailsData(); // 详情界面数据
   },

minggao/src/page/commandCenter/taskRegulatorDetails.vue

@@ -1,53 +1,52 @@
 <!--  -->
 <template>
   <div class="taskRegulatorDetails_box">
-    <el-card :style="'height:' + fullHeight + 'px'">
+    <el-card :style="'height:' + fullHeight + 'px'" v-loading="loading">
       <el-row>
         <!-- 任务信息 -->
         <el-col :span="24">
           <div class="list_box">
             <div class="list_tlt">
               <span>任务信息</span>
-              <el-button type="primary" size="mini">监督</el-button>
             </div>
 
             <ul class="list_ul">
               <li class="list_li">
                 <div class="list_div">
                   <span class="list_div_tlt">任务类型：</span>
-                  <span class="list_div_val">有害生物</span>
+                  <span class="list_div_val">{{ taskObj.task_type }}</span>
                 </div>
 
                 <div class="list_div">
                   <span class="list_div_tlt">任务监督人：</span>
-                  <span class="list_div_val">胡军</span>
+                  <span class="list_div_val">{{
+                    taskObj.supervisor_user
+                  }}</span>
                 </div>
 
                 <div class="list_div">
                   <span class="list_div_tlt">任务时间：</span>
-                  <span class="list_div_val">2022-01-14 16:00:00</span>
+                  <span class="list_div_val">{{ taskObj.start_time }}</span>
                 </div>
 
                 <div class="list_div">
                   <span class="list_div_tlt">任务发布人：</span>
-                  <span class="list_div_val">胡适</span>
+                  <span class="list_div_val">{{ taskObj.owner_user }}</span>
                 </div>
 
                 <div class="list_div">
                   <span class="list_div_tlt">任务处理人：</span>
-                  <span class="list_div_val">刑天</span>
+                  <span class="list_div_val">{{ taskObj.operator_user }}</span>
                 </div>
 
                 <div class="list_div">
                   <span class="list_div_tlt">任务状态：</span>
-                  <span class="list_div_val">已完成</span>
+                  <span class="list_div_val">{{ taskObj.task_status }}</span>
                 </div>
 
                 <div class="list_div">
-                  <span class="list_div_tlt">任务类型：</span>
-                  <span class="list_div_val"
-                    >去安徽监测点的诱捕器虫类手机一下,记得拍照</span
-                  >
+                  <span class="list_div_tlt">任务描述：</span>
+                  <span class="list_div_val">{{ taskObj.tesk_msg }}</span>
                 </div>
               </li>
             </ul>
@@ -63,17 +62,26 @@
               <li class="list_sing_li">
                 <div class="list_sing_div">
                   <span class="list_div_tlt">签到图片：</span>
-                  <span class="list_div_img">
-                    <img src="../../assets/images/newImg/12.jpg" alt="" />
-                  </span>
-                  <span class="list_div_img">
-                    <img src="../../assets/images/newImg/12.jpg" alt="" />
-                  </span>
+                  <p
+                    v-if="taskObj.img_list.length !== 0"
+                    style="display: flex;"
+                  >
+                    <span
+                      class="list_div_img"
+                      v-for="(item, index) in taskObj.img_list"
+                      :key="index"
+                    >
+                      <img v-viewer :src="item" alt="" />
+                    </span>
+                  </p>
+                  <span v-else>暂无签到图片</span>
                 </div>
 
                 <div class="list_sing_div">
                   <span class="list_div_tlt">签到时间：</span>
-                  <span class="list_div_val">2022-2-8 12:00:00</span>
+                  <span class="list_div_val">{{
+                    taskObj.end_time || "暂无"
+                  }}</span>
                 </div>
               </li>
             </ul>
@@ -81,17 +89,33 @@
         </el-col>
 
         <!-- 任务填报信息 -->
-        <el-col :span="24">
+        <el-col :span="24" v-if="taskObj.task_type == '有害生物监测'">
           <div class="list_box">
             <div class="list_tlt">任务填报信息</div>
             <ul class="list_table_ul">
               <li class="list_li">
                 <el-table :data="tableData" stripe style="width: 100%">
-                  <el-table-column prop="date" label="日期" width="180">
+                  <el-table-column prop="trap_number" label="设备编号">
+                  </el-table-column>
+                  <el-table-column prop="monitor_point" label="监测点">
+                  </el-table-column>
+                  <el-table-column prop="inducer_type" label="诱剂">
                   </el-table-column>
-                  <el-table-column prop="name" label="姓名" width="180">
+                  <el-table-column prop="report_status" label="有害生物登记">
+                    <template slot-scope="scope">
+                      <span
+                        v-if="scope.row.report_status == '已登记'"
+                        @click="examine(scope.row)"
+                        style="color: #409EFF; cursor: pointer;"
+                        >查看</span
+                      >
+                      <span v-else>{{ scope.row.report_status || "无" }}</span>
+                    </template>
                   </el-table-column>
-                  <el-table-column prop="address" label="地址">
+                  <el-table-column prop="report_time" label="录入时间">
+                    <template slot-scope="scope">
+                      <span>{{ scope.row.report_time || "无" }}</span>
+                    </template>
                   </el-table-column>
                 </el-table>
               </li>
@@ -105,49 +129,58 @@
             <div class="list_tlt">任务汇报</div>
 
             <ul class="list_report_ul">
-              <li class="list_report_li" v-for="item in reportList" :key="item">
+              <!-- <li
+                class="list_report_li"
+                v-for="item in tabskObj.report_msg"
+                :key="item"
+              >
                 {{ item }}
-              </li>
+              </li> -->
+              <li class="list_report_li">{{ taskObj.report_msg || "暂无" }}</li>
             </ul>
           </div>
         </el-col>
       </el-row>
     </el-card>
+
+    <!-- 填报信息弹框 -->
+    <el-dialog
+      :title="titleData"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      width="30%"
+    >
+      <ul class="insect_ul">
+        <li
+          class="insect_list"
+          v-for="(item, index) in insectList"
+          :key="index"
+        >
+          <div>{{ item.pest_name + "：" }}</div>
+          <div style="margin: 0 0 0 20px">{{ item.pest_number }}</div>
+        </li>
+      </ul>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
-  //import引入的组件需要注入到对象中才能使用
   components: {},
   data() {
     //这里存放数据
     return {
       fullHeight: document.documentElement.clientHeight - 116, //
 
+      // 详情总数据
+      taskObj: {},
+
       // 任务填报信息
-      tableData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄"
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1517 弄"
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1519 弄"
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1516 弄"
-        }
-      ],
+      tableData: [],
+      dialogVisible: false, // 弹框
+      titleData: "", // 弹框标题
+      insectList: [], //害虫列表
 
       // 任务汇报
       reportList: [
@@ -155,7 +188,8 @@ export default {
         "2、途中发生了什么事情",
         "3、对这次任务有什么总结",
         "4、我对这次任务有哪些建议"
-      ]
+      ],
+      loading: false // 加载
     };
   },
   //监听属性 类似于data概念
@@ -186,12 +220,47 @@ export default {
           that.fullHeight = window.fullHeight;
         })();
       };
+    },
+
+    // 详情界面数据
+    detailsData() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.task_info",
+        data: this.qs.stringify({
+          task_id: this.$route.query.id
+        })
+      })
+        .then(res => {
+          if (res.data.data) {
+            var data = res.data.data;
+            data.img_list = JSON.parse(data.img_list);
+            this.taskObj = data;
+            this.tableData = data.trap_record_list;
+          }
+          this.loading = false;
+        })
+        .catch(err => {
+          this.loading = false;
+          console.log(err);
+        });
+    },
+
+    // 查看
+    examine(data) {
+      this.titleData = "设备编号：" + data.trap_number;
+      this.insectList = data.pest_list;
+      this.dialogVisible = true;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.loading = true; // 加载
+    this.get_boderHeight(); // 动态获取浏览器高度
+    this.detailsData(); //详情界面数据
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -289,5 +358,19 @@ export default {
     overflow: hidden;
     overflow-y: auto;
   }
+
+  // 害虫弹框
+  .insect_ul {
+    .insect_list {
+      display: flex;
+      margin: 0 0 20px 0;
+      div {
+        font-size: 18px;
+        width: 20%;
+        text-align: right;
+        margin: 0px 0 0 -35px;
+      }
+    }
+  }
 }
 </style>

minggao/src/router/index.js

@@ -20,6 +20,8 @@ const realTime = () => import('@/Page/commandCenter/realTime') //实时通信
 const laboratory = () => import('@/Page/commandCenter/laboratory') //实验室识别
 const taskRegulator = () => import('@/Page/commandCenter/taskRegulator') //任务管理
 const taskRegulatorDetails = () => import('@/Page/commandCenter/taskRegulatorDetails') //任务管理 - 详情
+const superviseAdmin = () => import('@/Page/commandCenter/superviseAdmin') //监督管理
+const superviseAdminDetails = () => import('@/Page/commandCenter/superviseAdminDetails') //监督管理 - 详情
 const supervise = () => import('@/Page/commandCenter/supervise') //监督记录
 const superviseDetails = () => import('@/Page/commandCenter/superviseDetails') //监督记录 - 详情
 const superviseLog = () => import('@/Page/commandCenter/superviseLog') //监测日志
@@ -133,6 +135,20 @@ export default new Router({
           }
         },
         {
+          path: 'superviseAdmin',
+          component: superviseAdmin,
+          meta: {
+            title: '监督管理'
+          }
+        },
+        {
+          path: 'superviseAdminDetails',
+          component: superviseAdminDetails,
+          meta: {
+            title: '监督管理详情'
+          }
+        },
+        {
           path: 'supervise',
           component: supervise,
           meta: {