2022/2/11 指挥中心模块开发

minggao/config/index.js

@@ -15,7 +15,7 @@ module.exports = {
         target: 'http://192.168.1.17:12345', //翟毅飞
         // target: 'http://192.168.1.77:12345', //曹世祥
         changeOrigin: true,
-        pathRewrite: { 
+        pathRewrite: {
           '^/api': '/api' //重写接口
         }
       },
@@ -29,7 +29,7 @@ module.exports = {
     notifyOnErrors: true,
     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 
-    
+
     /**
      * Source Maps
      */

minggao/src/page/commandCenter/laboratory.vue

@@ -205,11 +205,12 @@
         </li>
 
         <li class="fill_list1" v-if="fillList.length !== 0">
-          <div v-for="(item, index) in fillList" :key="index">
+          <div v-for="(item, index) in fillList" :key="item.ind">
             <el-select
-              v-model="item.value"
+              v-model="models[index]"
               size="mini"
               clearable
+              @change="compileInsect($event, item, index)"
               placeholder="请选择"
             >
               <el-option
@@ -224,6 +225,7 @@
             <el-input
               placeholder="请输入内容"
               size="mini"
+              @change="compileInsect($event, item, index)"
               v-model="item.num"
               clearable
               type="number"
@@ -231,7 +233,7 @@
             >
             </el-input>
 
-            <span>删除</span>
+            <span @click="delInsect(item)">删除</span>
           </div>
         </li>
 
@@ -265,7 +267,7 @@
       </ul>
       <!-- <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false"
+        <el-button type="primary" @click="compileInsect"
           >确 定</el-button
         >
       </span> -->
@@ -323,6 +325,8 @@ export default {
       // 已识别
       examineObj: {}, // 选中的对象值
       fillList: [], // 填报详情数据
+      // models: Array(fillList.length).fill(''), // 填报select数据
+      models: null, // 填报select数据
       insectVal: "", // 添加 - 有害生物
       numVal: "", // 添加 - 数量
       loading1: false, // 加载
@@ -490,12 +494,6 @@ export default {
         });
     },
 
-    // 填报
-    // filing(data) {
-    //   this.examineObj = data;
-    //   this.dialogVisible = true;
-    // },
-
     // 填报、编辑事件  （表格中的操作）
     examine(data) {
       // console.log(data);
@@ -509,9 +507,9 @@ export default {
         }),
       })
         .then((res) => {
-          // if (res.data.data.length !== 0) {
             var data = res.data.data;
             var list = [];
+            var arr = []
             data.forEach((item, index) => {
               var obj = {};
               obj["value"] = item.id;
@@ -519,11 +517,11 @@ export default {
               obj["num"] = item.pest_number;
               obj["ind"] = index;
               list.push(obj);
+              arr.push(item.id)
             });
-            console.log(list);
             this.fillList = list;
+            this.models = arr
             this.dialogVisible = true;
-          // }
         })
         .catch((err) => {
           console.log(err);
@@ -533,11 +531,18 @@ export default {
     // 添加有害生物
     addInsect() {
       if (this.insectVal !== "" && this.numVal !== "") {
-        var list = [];
-        var obj = {};
-        obj["pest_name"] = this.insectVal;
-        obj["pest_number"] = this.numVal;
-        list.push(obj);
+        
+        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 obj1 = {};
+        obj1["pest_name"] = this.insectVal;
+        obj1["pest_number"] = Number(this.numVal);
+        array = [...array, obj1]
 
         this.$confirm("此操作将新增有害生物, 是否继续?", "提示", {
           confirmButtonText: "确定",
@@ -550,7 +555,7 @@ 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(list), // 害虫数组
+                pest_list: JSON.stringify(array), // 害虫数组
               }),
             })
               .then((res) => {
@@ -584,6 +589,113 @@ export default {
         });
       }
     },
+
+    // 删除有害生物
+    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.$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.loading1 = false
+          }).catch((err) => {
+            this.loading1 = false
+          })
+        }).catch(() => {
+          this.$message({
+            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)
+      })
+      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)
+          this.$message({
+            type: 'info',
+            message: '已取消编辑'
+          });          
+        });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -660,6 +772,7 @@ export default {
         span {
           line-height: 30px;
           color: #1890ff;
+          cursor: pointer;
         }
       }
     }

minggao/src/page/commandCenter/realTime.vue

@@ -350,7 +350,7 @@ export default {
       data: [],
       defaultProps: {
         children: "childrens",
-        label: "org_name",
+        label: "org_name"
       },
 
       // 分页
@@ -385,11 +385,12 @@ export default {
       input: "", //发送框
       iconShow: true,
       // 文本消息功能
-      url: "ws://192.168.1.17:12345/api/api_gateway?method=control_center.real_time.im_message",
+      url:
+        "ws://192.168.1.17:12345/api/api_gateway?method=control_center.real_time.im_message",
       websock: null,
       getUserObj: {}, // 获取到当前点击的行数据
       msgList: [], //当前点击的账号消息列表
-      userName: "",
+      userName: ""
     };
   },
   //监听属性 类似于data概念
@@ -402,7 +403,7 @@ export default {
         this.fullHeight = val;
         this.timer = true;
         let that = this;
-        setTimeout(function () {
+        setTimeout(function() {
           //防止过度调用监测事件，导致卡顿
           that.timer = false;
         }, 400);
@@ -432,7 +433,7 @@ export default {
         this.notTensile(); // 停止拉流
         this.notLogin(); //退出房间
       }
-    },
+    }
   },
   //方法集合
   methods: {
@@ -470,20 +471,20 @@ export default {
         data: this.qs.stringify({
           page: this.page,
           page_item: "100000000",
-          org_name: "",
-        }),
+          org_name: ""
+        })
       })
-        .then((res) => {
+        .then(res => {
           if (res.data.data.page_list.length !== 0) {
             var obj = {
               org_name: "全部",
-              id: "",
+              id: ""
             };
             var data = res.data.data.page_list;
             this.data = [obj, ...data]; // 左侧组织列表
           }
         })
-        .catch((err) => {
+        .catch(err => {
           console.log(err);
         });
     },
@@ -498,9 +499,9 @@ export default {
           page_item: "10",
           real_name: this.nameVal, //用户名称
           mobile: this.phoneVal, // 电话
-          org_id: this.org_id,
-        }),
-      }).then((res) => {
+          org_id: this.org_id
+        })
+      }).then(res => {
         if (res.data.data.page_item !== 0) {
           var data = res.data.data.page_list;
           var list = [];
@@ -526,8 +527,8 @@ export default {
         recv_user_id: data.user_id,
         data: {
           msg_status: false,
-          msg_info: "",
-        },
+          msg_info: ""
+        }
       };
       console.log(data);
       this.websock.send(JSON.stringify(obj));
@@ -548,8 +549,8 @@ export default {
         recv_user_id: data.user_id,
         data: {
           msg_status: false,
-          msg_info: "",
-        },
+          msg_info: ""
+        }
       };
       this.websock.send(JSON.stringify(obj));
       // // 登录房间
@@ -615,10 +616,10 @@ export default {
     // 当音视频通话关闭时的回调
     handleClose(done) {
       this.$confirm("目前正在音视频通话中,确认关闭？")
-        .then((_) => {
+        .then(_ => {
           done();
         })
-        .catch((_) => {});
+        .catch(_ => {});
     },
 
     // 发送消息
@@ -627,7 +628,7 @@ export default {
         this.$message({
           message: "不能发送空白消息！",
           type: "warning",
-          duration: 1500,
+          duration: 1500
         });
         this.input = "";
       } else {
@@ -638,8 +639,8 @@ export default {
             recv_user_id: this.getUserObj.user_id,
             data: {
               msg_status: false,
-              msg_info: this.input,
-            },
+              msg_info: this.input
+            }
           };
           var v = JSON.stringify(obj);
           this.websock.send(v);
@@ -686,11 +687,11 @@ export default {
         );
         // window.s = this.websock
 
-        this.websock.onopen = (event) => {
+        this.websock.onopen = event => {
           console.log("WebSocket：已连接");
           console.log(event);
         };
-        this.websock.onmessage = (event) => {
+        this.websock.onmessage = event => {
           console.log("WebSocket:消息");
           // console.log(JSON.parse(event.data));
           var data = JSON.parse(event.data);
@@ -727,8 +728,8 @@ export default {
               recv_user_id: this.getUserObj.user_id,
               data: {
                 msg_status: false,
-                msg_info: "",
-              },
+                msg_info: ""
+              }
             };
             this.websock.send(JSON.stringify(obj));
           } else if (data.action == "recv_video") {
@@ -745,7 +746,7 @@ export default {
                 { userID: this.UserID, userName: this.UserID },
                 { userUpdate: true }
               )
-              .then((result) => {
+              .then(result => {
                 if (result == true) {
                   this.plugFlow(); //推流
                   this.videoVisible = true;
@@ -753,11 +754,11 @@ export default {
               });
           }
         };
-        this.websock.onerror = (event) => {
+        this.websock.onerror = event => {
           console.log("WebSocket:发生错误 ");
           console.log(event);
         };
-        this.websock.onclose = (event) => {
+        this.websock.onclose = event => {
           console.log("WebSocket:已关闭");
           console.log(event);
         };
@@ -787,7 +788,7 @@ export default {
               this.$message({
                 message: "没人接听，请稍后重试",
                 type: "warning",
-                duration: 2500,
+                duration: 2500
               });
               this.videoVisible = false;
             }, 60000);
@@ -832,7 +833,7 @@ export default {
         }
       );
 
-      this.zg.on("publisherStateUpdate", (result) => {
+      this.zg.on("publisherStateUpdate", result => {
         // 推流状态更新回调
         console.log("推流状态更新");
       });
@@ -869,7 +870,7 @@ export default {
       } else {
         console.log("不兼容");
       }
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -887,10 +888,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .realTime_box {
   .card_box {
     display: flex;
@@ -1083,4 +1084,4 @@ export default {
     overflow-y: auto;
   }
 }
-</style>
+</style>

minggao/src/page/commandCenter/supervise.vue

@@ -0,0 +1,345 @@
+<!--  -->
+<template>
+  <div class="supervise_box">
+    <el-card :style="'height:' + fullHeight + 'px'">
+      <!-- 筛选 -->
+      <el-row>
+        <el-col>
+          <div class="search_box">
+            <!-- 监督人 -->
+            <el-select
+              filterable
+              v-model="input"
+              clearable
+              @change="searchData"
+              placeholder="请选择监督人"
+              size="mini"
+            >
+              <el-option
+                v-for="item in conductorList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <!-- 监督形式 -->
+            <el-select
+              filterable
+              v-model="input2"
+              clearable
+              @change="searchData"
+              placeholder="请选择监督形式"
+              size="mini"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <!-- 时间筛选 -->
+            <el-date-picker
+              size="mini"
+              v-model="value"
+              @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>
+
+              <el-button type="primary" size="mini" @click="exportData"
+                >导出数据</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="180"> </el-table-column>
+        <el-table-column prop="supervisor_user" label="监督人" width="180">
+        </el-table-column>
+        <el-table-column prop="supervisor_type" label="监督形式">
+        </el-table-column>
+        <el-table-column prop="supervisor_depa" label="监督单位">
+        </el-table-column>
+        <el-table-column prop="supervisor_msg" label="监督情况">
+        </el-table-column>
+        <el-table-column prop="supervisor_time" label="监督时间">
+        </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: "", // 监督人
+      conductorList: [], // 监督人 - 列表
+      input2: "", // 监督形式
+      // 监督形式 - 列表
+      options: [
+        {
+          value: "远程监督",
+          label: "远程监督"
+        },
+        {
+          value: "现场监督",
+          label: "现场监督"
+        }
+      ],
+      value: "", // 时间筛选
+      startTime: "", // 开始时间
+      endTime: "", // 结束时间
+
+      // 表格
+      tableData: [],
+      loading: false, // 加载
+
+      // 分页
+      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_record_list",
+        data: this.qs.stringify({
+          page: this.page,
+          page_item: "10",
+          supervisor_user_id: this.input, // 监督人id
+          start_time: this.startTime, // 开始时间
+          end_time: this.endTime, // 结束时间
+          supervisor_type: this.input2 // 监督形式
+        })
+      })
+        .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;
+        });
+    },
+
+    // 监督人列表
+    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;
+        }
+      });
+    },
+
+    // 搜索
+    searchData() {
+      this.loading = true;
+      this.tableData = [];
+      this.tableList();
+    },
+
+    // 重置
+    reset() {
+      this.input = ""; // 监督人
+      this.input2 = ""; // 监督形式
+      this.value = ""; // 时间筛选
+      this.startTime = ""; // 开始时间
+      this.endTime = ""; // 结束时间
+      this.loading = true;
+      this.tableData = [];
+      this.tableList();
+    },
+
+    // 导出数据
+    exportData() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.supervisor_export",
+        responseType: "blob"
+      })
+        .then(res => {
+          this.downloadFile(res, "监督记录.xls");
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+
+    // 流文件下载
+    downloadFile(res, name) {
+      let link = document.createElement("a");
+      link.href = window.URL.createObjectURL(new Blob([res.data]));
+      link.target = "_blank";
+      // 文件名和格式
+      link.download = name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+
+    // 分页
+    newPage(page) {
+      this.page = page;
+      this.tableList();
+    },
+
+    // 查看
+    examineDetail(data) {
+      this.$router.push({
+        path: "/index/superviseDetails",
+        query: {
+          id: data.id
+        }
+      });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.loading = true;
+    this.get_boderHeight(); // 动态获取浏览器高度
+    this.conductorAxios(); // 监督人 - 筛选列表
+    this.tableList(); // 表格
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.supervise_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;
+  }
+}
+</style>

minggao/src/page/commandCenter/superviseDetails.vue

@@ -0,0 +1,337 @@
+<!--  -->
+<template>
+  <div class="superviseDetails_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">有害生物</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务监督人：</span>
+                  <span class="list_div_val">胡军</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">监督时间：</span>
+                  <span class="list_div_val">2022-01-14 16:00:00</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">监督形式：</span>
+                  <span class="list_div_val">胡适</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">监督单位：</span>
+                  <span class="list_div_val">刑天</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">监督情况：</span>
+                  <span class="list_div_val">已完成</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+
+        <!-- 任务信息 -->
+        <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>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务监督人：</span>
+                  <span class="list_div_val">胡军</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务时间：</span>
+                  <span class="list_div_val">2022-01-14 16:00:00</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务发布人：</span>
+                  <span class="list_div_val">胡适</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务处理人：</span>
+                  <span class="list_div_val">刑天</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务状态：</span>
+                  <span class="list_div_val">已完成</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">任务类型：</span>
+                  <span class="list_div_val"
+                    >去安徽监测点的诱捕器虫类手机一下,记得拍照</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>
+                  <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>
+                </div>
+
+                <div class="list_sing_div">
+                  <span class="list_div_tlt">签到时间：</span>
+                  <span class="list_div_val">2022-2-8 12:00:00</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+
+        <!-- 任务填报信息 -->
+        <el-col :span="24">
+          <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>
+                  <el-table-column prop="name" label="姓名" width="180">
+                  </el-table-column>
+                  <el-table-column prop="address" label="地址">
+                  </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" v-for="item in reportList" :key="item">
+                {{ item }}
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      fullHeight: document.documentElement.clientHeight - 116, //
+
+      // 任务填报信息
+      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 弄"
+        }
+      ],
+
+      // 任务汇报
+      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;
+        })();
+      };
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.superviseDetails_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;
+  }
+}
+</style>

minggao/src/page/commandCenter/superviseLog.vue

@@ -0,0 +1,328 @@
+<!--  -->
+<template>
+  <div class="superviseLog_box">
+    <el-card :style="'height:' + fullHeight + 'px'">
+      <el-row>
+        <el-col>
+          <div class="search_box">
+            <!-- 监测人员 -->
+            <el-select
+              filterable
+              v-model="input"
+              clearable
+              @change="searchData"
+              placeholder="请选择监测人员"
+              size="mini"
+            >
+              <el-option
+                v-for="item in conductorList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <!-- 时间筛选 -->
+            <el-date-picker
+              size="mini"
+              v-model="value"
+              @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>
+              <el-button type="primary" size="mini" @click="exportData"
+                >导出数据</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="180"> </el-table-column>
+        <el-table-column prop="owner_user" label="监测人员" width="180">
+        </el-table-column>
+        <el-table-column prop="monitor_time" label="监测时间">
+        </el-table-column>
+        <el-table-column prop="weather" label="天气"> </el-table-column>
+        <el-table-column prop="temperature" label="温度"> </el-table-column>
+        <el-table-column prop="address" label="地点"> </el-table-column>
+        <el-table-column prop="monitor_time" label="提交时间">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <a
+              href="javascript:;"
+              class="reset"
+              @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, //
+
+      // 筛选
+      conductorList: [], // 监测人员 - 筛选列表
+      input: "", // 监测人员
+      value: "", // 时间筛选
+      startTime: "", //开始时间
+      endTime: "", // 结束时间
+
+      // 表格
+      tableData: [],
+      loading: false, // 加载
+
+      // 分页
+      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.monitor_log_list",
+        data: this.qs.stringify({
+          page: this.page, // 当前页码
+          page_item: "10", //
+          monitor_user_id: "", // 监测人id
+          start_time: this.startTime, // 开始时间
+          end_time: this.endTime // 结束时间
+        })
+      })
+        .then(res => {
+          if (res.data.data.total_item !== 0) {
+            var data = res.data.data.page_list;
+            this.tableSum = res.data.data.total_item;
+            var list = [];
+            data.forEach((item, index) => {
+              item.ind = index + 1;
+              item.temperature =
+                item.temperature !== "" || item.temperature !== undefined
+                  ? item.temperature + "°C"
+                  : "暂无";
+              list.push(item);
+            });
+            this.tableData = list;
+          }
+          this.loading = false;
+        })
+        .catch(err => {
+          this.loading = false;
+        });
+    },
+
+    // 筛选列表 - 监测人员
+    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;
+          }
+        })
+        .catch(err => {});
+    },
+
+    // 筛选
+    searchData() {
+      if (this.value) {
+        this.startTime = this.formatTime(this.value[0], "yyyy-MM-dd");
+        this.endTime = this.formatTime(this.value[1], "yyyy-MM-dd");
+      } else {
+        this.startTime = "";
+        this.endTime = "";
+      }
+      this.loading = true;
+      this.tableData = [];
+      this.tableList();
+    },
+
+    // 重置
+    reset() {
+      this.input = ""; // 监测人员
+      this.value = ""; // 时间筛选
+      this.startTime = ""; // 开始时间
+      this.endTime = ""; // 结束时间
+      this.tableData = [];
+      this.loading = true;
+      this.tableList();
+    },
+
+    // 下页
+    newPage(page) {
+      this.page = page;
+      this.tableList();
+    },
+
+    // 查看
+    examineDetail(data) {
+      this.$router.push({
+        path: "/index/superviseLogDetails",
+        query: {
+          id: data.id
+        }
+      });
+    },
+
+    // 导出数据
+    exportData() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.monitor_log_export",
+        responseType: "blob"
+      })
+        .then(res => {
+          this.downloadFile(res, "监测日志.xls");
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+
+    // 流文件下载
+    downloadFile(res, name) {
+      let link = document.createElement("a");
+      link.href = window.URL.createObjectURL(new Blob([res.data]));
+      link.target = "_blank";
+      // 文件名和格式
+      link.download = name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.loading = true;
+    this.get_boderHeight(); // 动态获取浏览器高度
+    this.tableList(); // 表格列表数据
+    this.conductorAxios(); // 筛选 - 监测人员列表
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.superviseLog_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/superviseLogDetails.vue

@@ -0,0 +1,233 @@
+<!--  -->
+<template>
+  <div class="superviseLogDetails_box">
+    <el-card :style="'height:' + fullHeight + 'px'">
+      <el-row>
+        <!-- 监督信息 -->
+        <el-col :span="24">
+          <div class="list_box">
+            <div class="list_tlt">
+              <span>监督信息</span>
+            </div>
+
+            <ul class="list_ul">
+              <li class="list_li">
+                <div class="list_div">
+                  <span class="list_div_tlt">监测人员：</span>
+                  <span class="list_div_val">{{
+                    superviseList.owner_user
+                  }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">监督时间：</span>
+                  <span class="list_div_val">{{
+                    superviseList.monitor_time
+                  }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">提交时间：</span>
+                  <span class="list_div_val">{{
+                    superviseList.create_time
+                  }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">天气：</span>
+                  <span class="list_div_val">{{ superviseList.weather }}</span>
+                </div>
+
+                <div class="list_div">
+                  <span class="list_div_tlt">监测地点：</span>
+                  <span class="list_div_val">{{ superviseList.address }}</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+
+        <!-- 监测内容 -->
+        <el-col :span="24">
+          <div class="list_box">
+            <div class="list_tlt">监测内容</div>
+            <ul class="list_table_ul">
+              <li class="list_li">
+                <el-table :data="tableData" style="width: 100%">
+                  <el-table-column prop="title" label="事项"></el-table-column>
+                  <el-table-column
+                    prop="message"
+                    label="内容"
+                  ></el-table-column>
+                  <el-table-column prop="img_list" label="图像信息">
+                    <template slot-scope="scope">
+                      <span
+                        class="span_img"
+                        v-if="scope.row.img_list.length !== 0"
+                      >
+                        <img
+                          :src="item"
+                          alt=""
+                          v-for="item in scope.row.img_list"
+                          :key="item"
+                        />
+                      </span>
+                      <span v-else>暂无图像信息</span>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      fullHeight: document.documentElement.clientHeight - 116, //
+
+      // 监督信息
+      superviseList: {},
+      // 监测内容
+      tableData: []
+    };
+  },
+  //监听属性 类似于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() {
+      console.log(this.$route.query.id);
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.monitor_log_info",
+        data: this.qs.stringify({
+          record_id: this.$route.query.id
+        })
+      })
+        .then(res => {
+          console.log(res.data.data);
+          if (res.data.data.total_item !== 0) {
+            var data = res.data.data;
+            this.superviseList = data.monitor_info; // 监督信息
+            var list = [];
+            data.page_list.forEach(item => {
+              item.img_list = JSON.parse(item.img_list);
+              list.push(item);
+            });
+            this.tableData = list; // 监测内容
+          }
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.get_boderHeight(); // 动态获取浏览器高度
+    this.detailsData(); // 详情界面数据
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.superviseLogDetails_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_div_tlt {
+            text-align: right;
+            width: 78px;
+            display: inline-block;
+          }
+        }
+      }
+    }
+
+    // 监测内容
+    .list_table_ul {
+      margin: 20px 0 0 0;
+      padding: 20px 40px 20px 40px;
+      .list_li {
+        display: flex;
+        flex-wrap: wrap;
+        .list_div {
+          margin: 0 0 25px 0;
+          width: 33%;
+          font-size: 14px;
+          color: #333333;
+        }
+      }
+    }
+  }
+
+  /deep/.el-card {
+    overflow: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

minggao/src/page/commandCenter/taskRegulator.vue

@@ -21,68 +21,65 @@
                 :label="item.label"
                 :value="item.value"
               >
-                </el-option>
+              </el-option>
             </el-select>
 
-              <!-- 任务派发人 -->
-              <el-select
-                filterable
-                v-model="input2"
-                clearable
-                @change="searchData"
-                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-select
+              filterable
+              v-model="input2"
+              clearable
+              @change="searchData"
+              placeholder="请选择任务监督人"
+              size="mini"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
               >
-                <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-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-date-picker>
+              </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">
+            <div class="btn_box">
               <el-button type="primary" size="mini" @click="searchData"
                 >搜索</el-button
               >
-              <el-button size="mini" @click="reset"
-                >重置</el-button
-              >
+              <el-button size="mini" @click="reset">重置</el-button>
 
-              <el-button type="primary" size="mini" @click="reset"
+              <el-button type="primary" size="mini" @click="addTask"
                 >新增任务</el-button
               >
 
@@ -99,64 +96,52 @@
         :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="任务发布人">
+        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="supervisor_user"
-          label="任务监督人">
+        <el-table-column prop="task_type" label="任务类型"> </el-table-column>
+        <el-table-column prop="operator_user" label="任务处理人">
         </el-table-column>
-        <el-table-column
-          prop="start_time"
-          label="任务时间">
+        <el-table-column prop="owner_user" label="任务发布人">
         </el-table-column>
-        <el-table-column
-          prop="end_time"
-          label="任务完成时间">
+        <el-table-column prop="supervisor_user" label="任务监督人">
         </el-table-column>
-        <el-table-column
-          prop="task_status"
-          label="任务状态">
+        <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="任务完成时间">
         </el-table-column>
-        <el-table-column 
-          label="操作">
-          <template>
-            <a
-              class="reset"
-              href="javascript:;"
-              >查看</a
+        <el-table-column prop="task_status" label="任务状态">
+          <template slot-scope="scope">
+            <span
+              v-if="scope.row.task_status == '进行中'"
+              style="color: #E6A23C; font-weight: 550;"
+              >{{ scope.row.task_status }}</span
             >
-            <a
-              class="reset"
-              href="javascript:;"
-              >编辑</a
+            <span
+              v-else-if="scope.row.task_status == '已完成'"
+              style="color: #67C23A; font-weight: 550;"
+              >{{ scope.row.task_status }}</span
             >
+            <!-- <span
+              v-else-if="scope.row.is_overdue == true"
+              style="color: red;"
+              >{{ scocpe.row.task_status }}</span
+            > -->
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
             <a
               class="reset"
               href="javascript:;"
-              >删除</a
+              @click="examineDetail(scope.row)"
+              >查看</a
             >
-          </template>  
+            <a class="reset" href="javascript:;">编辑</a>
+            <a class="reset" href="javascript:;">删除</a>
+          </template>
         </el-table-column>
       </el-table>
 
@@ -175,6 +160,221 @@
       </el-pagination>
     </el-card>
 
+    <!-- 新增任务 -->
+    <el-dialog
+      title="发布任务"
+      :visible.sync="dialogVisible"
+      width="45%"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <div style="display: flex; flex-wrap: wrap;">
+          <!-- 任务处理人 -->
+          <el-form-item label="任务处理人" prop="region">
+            <el-select
+              clearable
+              multiple
+              filterable
+              size="mini"
+              v-model="ruleForm.region"
+              placeholder="请选择任务处理人"
+            >
+              <el-option
+                v-for="(item, index) in conductorList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- 任务监督人 -->
+          <el-form-item label="任务监督人" prop="overseer">
+            <el-select
+              clearable
+              size="mini"
+              multiple
+              filterable
+              v-model="ruleForm.overseer"
+              placeholder="请选择任务监督人"
+            >
+              <el-option
+                v-for="(item, index) in options"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- 任务时间 -->
+          <el-form-item label="任务时间" required>
+            <el-col :span="11">
+              <el-form-item prop="date">
+                <el-date-picker
+                  clearable
+                  v-model="ruleForm.date"
+                  type="date"
+                  size="mini"
+                  placeholder="选择日期"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-form-item>
+
+          <!-- 任务类型 -->
+          <el-form-item label="任务类型" prop="type">
+            <el-select
+              size="mini"
+              v-model="ruleForm.type"
+              clearable
+              placeholder="请选择任务类型"
+            >
+              <el-option
+                v-for="(item, index) in typeList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+
+        <!-- 诱捕器 -->
+        <transition name="el-zoom-in-center">
+          <el-form-item
+            v-if="ruleForm.type == '有害生物监测'"
+            label="诱捕器"
+            prop="device"
+            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>
+
+              <!-- 设备列表 -->
+              <li class="form_li" v-for="item in 20" :key="item">
+                <div>
+                  <img src="../../assets/images/taskRegulator/1.png" alt="" />
+                  <span>设备编号</span>
+                </div>
+              </li>
+            </ul>
+          </el-form-item>
+        </transition>
+
+        <!-- 任务描述 -->
+        <el-form-item label="任务描述" prop="desc" style="width: 86%;">
+          <el-input
+            size="mini"
+            type="textarea"
+            resize="none"
+            v-model="ruleForm.desc"
+            :rows="5"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="resetForm('ruleForm')">取消</el-button>
+          <el-button type="primary" @click="submitForm('ruleForm')"
+            >发布</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+
+    <!-- 选择诱捕器 -->
+    <el-dialog
+      title="选择诱捕器"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :visible.sync="deviceVisible"
+      width="45%"
+    >
+      <!-- 筛选 -->
+      <ul class="device_seek">
+        <!-- 监测点 -->
+        <li class="device_seek_list">
+          <el-select
+            clearable
+            multiple
+            filterable
+            size="mini"
+            v-model="deviceForm.monitorDot"
+            placeholder="监测点"
+          >
+            <el-option
+              v-for="(item, index) in conductorList"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </li>
+
+        <!-- 组织 -->
+        <li class="device_seek_list">
+          <el-select
+            clearable
+            multiple
+            filterable
+            size="mini"
+            v-model="deviceForm.tissue"
+            placeholder="组织"
+          >
+            <el-option
+              v-for="(item, index) in conductorList"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </li>
+
+        <!-- 设备编号 -->
+        <li class="device_seek_list">
+          <el-input
+            placeholder="设备编号"
+            v-model="deviceForm.serial"
+            size="mini"
+            clearable
+          >
+          </el-input>
+        </li>
+
+        <!-- 搜索 -->
+        <li class="device_seek_list">
+          <el-button type="success" size="mini">搜索</el-button>
+        </li>
+      </ul>
+
+      <!-- 设备列表 -->
+      <div>
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox
+            label="设备编号12"
+            v-for="item in 130"
+            :key="item"
+          ></el-checkbox>
+        </el-checkbox-group>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="deviceVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="deviceVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -190,13 +390,22 @@ export default {
       // 筛选
       input: "", // 任务处理人
       conductorList: [], // 任务处理人 - 列表
-      input2: "", // 任务派发人
-      options: [], // 任务派发人 - 列表
+      input2: "", // 任务监督人
+      options: [], // 任务监督人 - 列表
       value: "", // 任务状态
-      options2: [], // 任务状态 - 列表
-      value2: '', //时间筛选
-      startTime: '', // 开始时间
-      endTime: '', // 结束时间
+      options2: [
+        {
+          value: "进行中",
+          label: "进行中"
+        },
+        {
+          value: "已完成",
+          label: "已完成"
+        }
+      ], // 任务状态 - 列表
+      value2: "", //时间筛选
+      startTime: "", // 开始时间
+      endTime: "", // 结束时间
 
       // 表格
       tableData: [],
@@ -205,10 +414,85 @@ export default {
       // 分页
       page: 1, // 当前页码
       tableSum: 0, // 总页码
+
+      // 新增任务弹框
+      dialogVisible: false,
+      ruleForm: {
+        region: [], // 任务处理人
+        overseer: [], // 任务监督人
+        date: "", // 任务时间
+        type: "", // 任务类型
+        device: "", // 诱捕器
+        desc: "" // 任务描述
+      },
+      rules: {
+        region: [
+          { required: true, message: "请选择任务处理人", trigger: "change" }
+        ],
+        overseer: [
+          { required: true, message: "请选择任务监督人", trigger: "change" }
+        ],
+        date: [
+          { required: true, message: "请选择任务时间", trigger: "change" }
+        ],
+        type: [
+          { required: true, message: "请选择任务类型", trigger: "change" }
+        ],
+        device: [
+          { required: true, message: "请选择诱捕器", trigger: "change" }
+        ],
+        desc: [{ required: true, message: "请填写任务描述", trigger: "blur" }]
+      },
+      // 任务类型
+      typeList: [
+        {
+          value: "有害生物监测",
+          label: "有害生物监测"
+        },
+        {
+          value: "入境口岸监测调查",
+          label: "入境口岸监测调查"
+        },
+        {
+          value: "外来有害杂草监测",
+          label: "外来有害杂草监测"
+        },
+        {
+          value: "其他监测任务",
+          label: "其他监测任务"
+        },
+        {
+          value: "挂放",
+          label: "挂放"
+        },
+        {
+          value: "维护",
+          label: "维护"
+        }
+      ],
+
+      // 选择诱捕器
+      deviceVisible: false,
+      deviceForm: {
+        monitorDot: "", // 监测点
+        tissue: "", // 组织
+        serial: "" // 设备编号
+      },
+      checkList: ["选中且禁用", "复选框 A"] // 设备列表
     };
   },
   //监听属性 类似于data概念
-  computed: {},
+  computed: {
+    // 新增任务 - 任务处理人
+    region() {
+      return this.ruleForm.region;
+    },
+
+    // 新增任务 - 任务监督人
+    overseer() {
+      return this.ruleForm.overseer;
+    }
+  },
   //监控data中的数据变化
   watch: {
     fullHeight(val) {
@@ -223,6 +507,91 @@ export default {
         }, 400);
       }
     },
+
+    // 任务处理人 - 筛选
+    input(val) {
+      if (val !== "") {
+        var name = "";
+        this.conductorList.forEach(item => {
+          if (item.value == val) {
+            name = item.label;
+          }
+        });
+        for (var i = 0; i < this.options.length; i++) {
+          if (this.options[i].label == name) {
+            this.$delete(this.options, i);
+          }
+        }
+      } else if (val == "") {
+        this.conductorAxios();
+      }
+    },
+
+    // 任务监督人 - 筛选
+    input2(val) {
+      if (val !== "") {
+        var name = "";
+        this.options.forEach(item => {
+          if (item.value == val) {
+            name = item.label;
+          }
+        });
+        for (var i = 0; i < this.conductorList.length; i++) {
+          if (this.conductorList[i].label == name) {
+            this.$delete(this.conductorList, i);
+          }
+        }
+      } else if (val == "") {
+        this.conductorAxios();
+      }
+    },
+
+    // 新增任务 - 任务处理人
+    region(newVal, oldVal) {
+      if (newVal.length !== 0) {
+        var ind = Number(newVal.length - 1);
+        this.conductorList.forEach((item, index) => {
+          var obj = {};
+          if (newVal[ind]) {
+            if (item.value == newVal[ind]) {
+              for (var i = 0; i < this.options.length; i++) {
+                if (this.options[i].label == item.label) {
+                  this.$delete(this.options, i);
+                }
+              }
+            }
+          }
+        });
+      } else {
+        this.conductorAxios();
+      }
+    },
+    // 新增任务 - 任务监督人
+    overseer(newVal, oldVal) {
+      if (newVal.length !== 0) {
+        var ind = Number(newVal.length - 1);
+        this.options.forEach((item, index) => {
+          if (newVal[ind]) {
+            if (item.value == newVal[ind]) {
+              for (var i = 0; i < this.conductorList.length; i++) {
+                if (this.conductorList[i].label == item.label) {
+                  this.$delete(this.conductorList, i);
+                }
+              }
+            }
+          }
+        });
+      } else {
+        this.conductorAxios();
+      }
+    },
+
+    // 新增任务弹框
+    dialogVisible(val) {
+      if (val == false) {
+        this.conductorAxios();
+      }
+    }
   },
   //方法集合
   methods: {
@@ -238,14 +607,26 @@ export default {
     },
 
     // 筛选
-    searchData() {},
+    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.loading = true;
+      this.tableData = [];
+      this.tableList();
+    },
 
     // 重置
     reset() {},
 
     // 分页
     newPage(page) {
-      this.page = page
+      this.page = page;
     },
 
     // 表格数据
@@ -255,49 +636,106 @@ export default {
         url: "/api/api_gateway?method=control_center.task.task_list",
         data: this.qs.stringify({
           page: this.page, //当前页码
-          page_item: '10',
+          page_item: "10",
           operator_user_id: this.input, // 任务处理人id
           owner_user_id: this.input2, // 任务发布id
           start_time: this.startTime, // 开始时间
           end_time: this.endTime, // 结束时间
-          task_status: this.value, // 任务状态
+          task_status: this.value // 任务状态
         })
-      }).then((res) => {
-        if (res.data.data.total_item !== 0) {
-          var data = res.data.data.page_list
-          this.tableSum = res.data.data.total_item
-          var list = []
-          data.forEach((item, index) => {
-            item.ind = index
-            list.push(item)
-          });     
-          console.log(list)     
-          this.tableData = list  
-          this.loading = false
+      })
+        .then(res => {
+          if (res.data.data.total_item !== 0) {
+            var data = res.data.data.page_list;
+            this.tableSum = res.data.data.total_item;
+            var list = [];
+            data.forEach((item, index) => {
+              item.ind = index;
+              list.push(item);
+            });
+            console.log(list);
+            this.tableData = list;
+          }
+          this.loading = false;
+        })
+        .catch(err => {
+          this.loading = false;
+          console.log(err);
+        });
+    },
+
+    // 筛选列表 - 任务处理人
+    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.operator_user_list; // 处理人
+            var data1 = 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;
+
+            // 监督人
+            var list1 = [];
+            data1.forEach(item => {
+              var obj = {};
+              obj["value"] = item.user_id;
+              obj["label"] = item.real_name;
+              list1.push(obj);
+            });
+            this.options = list1;
+          }
+        })
+        .catch(err => {});
+    },
+
+    // 新建任务 - 弹框
+    addTask() {
+      this.dialogVisible = true;
+    },
+
+    // 新建任务 - 发布
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
         }
-      }).catch((err) => {
-        this.loading = false
-        console.log(err)
       });
     },
+
+    // 新建任务 - 取消
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+
+    // 新建任务 - 诱捕器 - 添加
+    addrDevice() {
+      this.deviceVisible = true;
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.loading = true
+    this.loading = true;
     this.tableList(); // 表格数据
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+    this.conductorAxios(); // 筛选列表 - 任务处理人
+  }
 };
 </script>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .taskRegulator_box {
   // 搜索
   .search_box {
@@ -327,6 +765,59 @@ export default {
   /deep/.el-card {
     overflow: hidden;
     overflow-y: auto;
-   }
+  }
+
+  // 新增弹框
+  /deep/.el-form-item {
+    width: 50%;
+  }
+  /deep/.el-date-editor {
+    width: 195px;
+  }
+  /deep/.el-form-item__error {
+    width: 130px;
+  }
+
+  .form_ul {
+    // border: 1px solid #000;
+    display: flex;
+    flex-wrap: wrap;
+    .form_li {
+      margin: 0 25px 0 0;
+      div {
+        position: relative;
+        img {
+          cursor: pointer;
+          position: absolute;
+          right: -10px;
+          top: 4px;
+          width: 15px;
+          height: 15px;
+        }
+        span {
+        }
+      }
+      .form_li_tltie {
+        cursor: pointer;
+        font-size: 15px;
+      }
+      .form_li_add {
+        cursor: pointer;
+        color: #1890ff;
+      }
+    }
+  }
+
+  // 诱捕器选择弹框
+  .device_seek {
+    display: flex;
+    justify-content: space-between;
+    .device_seek_list {
+    }
+  }
+
+  /deep/.el-checkbox {
+    margin: 10px 30px 10px 0;
+  }
 }
-</style>
+</style>

minggao/src/page/commandCenter/taskRegulatorDetails.vue

@@ -1,143 +1,119 @@
 <!--  -->
 <template>
-    <div class='taskRegulatorDetails_box'>
-        <el-card :style="'height:' + fullHeight + 'px'">
-            <el-row>
+  <div class="taskRegulatorDetails_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>
 
-                <!-- 任务信息 -->
-                <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>
+                </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>
-                                </div>
+                <div class="list_div">
+                  <span class="list_div_tlt">任务监督人：</span>
+                  <span class="list_div_val">胡军</span>
+                </div>
 
-                                <div class="list_div">
-                                    <span class="list_div_tlt">任务监督人：</span>
-                                    <span class="list_div_val">胡军</span>
-                                </div>
+                <div class="list_div">
+                  <span class="list_div_tlt">任务时间：</span>
+                  <span class="list_div_val">2022-01-14 16:00:00</span>
+                </div>
 
-                                <div class="list_div">
-                                    <span class="list_div_tlt">任务时间：</span>
-                                    <span class="list_div_val">2022-01-14 16:00:00</span>
-                                </div>
+                <div class="list_div">
+                  <span class="list_div_tlt">任务发布人：</span>
+                  <span class="list_div_val">胡适</span>
+                </div>
 
-                                <div class="list_div">
-                                    <span class="list_div_tlt">任务发布人：</span>
-                                    <span class="list_div_val">胡适</span>
-                                </div>
+                <div class="list_div">
+                  <span class="list_div_tlt">任务处理人：</span>
+                  <span class="list_div_val">刑天</span>
+                </div>
 
-                                <div class="list_div">
-                                    <span class="list_div_tlt">任务处理人：</span>
-                                    <span class="list_div_val">刑天</span>
-                                </div>
+                <div class="list_div">
+                  <span class="list_div_tlt">任务状态：</span>
+                  <span class="list_div_val">已完成</span>
+                </div>
 
-                                <div class="list_div">
-                                    <span class="list_div_tlt">任务状态：</span>
-                                    <span class="list_div_val">已完成</span>
-                                </div>
+                <div class="list_div">
+                  <span class="list_div_tlt">任务类型：</span>
+                  <span class="list_div_val"
+                    >去安徽监测点的诱捕器虫类手机一下,记得拍照</span
+                  >
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-col>
 
-                                <div class="list_div">
-                                    <span class="list_div_tlt">任务类型：</span>
-                                    <span class="list_div_val">去安徽监测点的诱捕器虫类手机一下,记得拍照</span>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </el-col>
+        <!-- 签到信息 -->
+        <el-col :span="24">
+          <div class="list_box">
+            <div class="list_tlt">签到信息</div>
 
-                <!-- 签到信息 -->
-                <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>
+                  <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>
+                </div>
 
-                        <ul class="list_ul">
-                            <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>
-                                </div>
+                <div class="list_sing_div">
+                  <span class="list_div_tlt">签到时间：</span>
+                  <span class="list_div_val">2022-2-8 12:00:00</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-col>
 
-                                <div class="list_sing_div">
-                                    <span class="list_div_tlt">签到时间：</span>
-                                    <span class="list_div_val">2022-2-8 12:00:00</span>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </el-col>
+        <!-- 任务填报信息 -->
+        <el-col :span="24">
+          <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>
+                  <el-table-column prop="name" label="姓名" width="180">
+                  </el-table-column>
+                  <el-table-column prop="address" label="地址">
+                  </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_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>
-                                    <el-table-column
-                                        prop="name"
-                                        label="姓名"
-                                        width="180"
-                                    >
-                                    </el-table-column>
-                                    <el-table-column
-                                        prop="address"
-                                        label="地址"
-                                    >
-                                    </el-table-column>
-                                </el-table>
-                            </li>
-                        </ul>
-                        
-                    </div>
-                </el-col>
+        <!-- 任务汇报 -->
+        <el-col :span="24">
+          <div class="list_box">
+            <div class="list_tlt">任务汇报</div>
 
-                <!-- 任务汇报 -->
-                <el-col :span="24">
-                    <div class="list_box">
-                        <div class="list_tlt">任务汇报</div>
-
-                        <ul class="list_report_ul">
-                            <li class="list_report_li" v-for="item in reportList" :key="item">
-                                {{ item }}
-                            </li>
-                        </ul>
-                    </div>
-                </el-col>
-            </el-row>
-        </el-card>
-    </div>
+            <ul class="list_report_ul">
+              <li class="list_report_li" v-for="item in reportList" :key="item">
+                {{ item }}
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
 </template>
 
 <script>
@@ -178,8 +154,8 @@ export default {
         "1、今天做了检测完成任务了没有",
         "2、途中发生了什么事情",
         "3、对这次任务有什么总结",
-        "4、我对这次任务有哪些建议",
-      ],
+        "4、我对这次任务有哪些建议"
+      ]
     };
   },
   //监听属性 类似于data概念
@@ -225,7 +201,7 @@ export default {
   activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .taskRegulatorDetails_box {
   // 任务信息
   .list_box {
@@ -277,43 +253,41 @@ export default {
 
     // 任务填报信息
     .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;
-            }
-
-            
+      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;
-        }
+      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;
-   }
+    background-color: #f6f8fa;
+  }
 
-   /deep/.el-card {
+  /deep/.el-card {
     overflow: hidden;
     overflow-y: auto;
-   }
+  }
 }
-</style>
+</style>

minggao/src/page/systemmanger/customsManger.vue

@@ -285,7 +285,6 @@ export default {
 
     // 请求下页数据
     newPage(page) {
-      // console.log(page);
       this.page = page;
       this.tabListData();
     },
@@ -375,7 +374,6 @@ export default {
         }),
       })
         .then((res) => {
-          // console.log(res.data.data);
           if (res.data.data.total_item !== 0) {
             this.treeDataSource = res.data.data.page_list;
             this.tableSum = res.data.data.total_item;
@@ -385,7 +383,6 @@ export default {
           }
         })
         .catch((err) => {
-          // console.log(err);
         });
     },
 
@@ -411,11 +408,6 @@ export default {
 </script>
 <style lang='less' scoped>
 .customsManger_box {
-  // /deep/.el-card__body {
-  //   overflow: hidden;
-  //   overflow-y: auto;
-  // }
-
   /deep/.el-card {
     overflow: hidden;
     overflow-y: auto;

minggao/src/router/index.js

@@ -20,28 +20,31 @@ 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 supervise = () => import('@/Page/commandCenter/supervise') //监督记录
+const superviseDetails = () => import('@/Page/commandCenter/superviseDetails') //监督记录 - 详情
+const superviseLog = () => import('@/Page/commandCenter/superviseLog') //监测日志
+const superviseLogDetails = () => import('@/Page/commandCenter/superviseLogDetails') //监测日志 - 详情
 
 // *****************测报系统**********************
-import cbd from '@/page/forecasting/cbd/Cbd'//首页
-import cbdDataDetails from '@/page/forecasting/cbd/DataDetails'//数据详情
-import cbdDataPhotos from '@/page/forecasting/cbd/cbdDataPhotos'//图片详情
-import PestsStats from '@/page/forecasting/cbd/pestsStats'//害虫统计
-import tongji from '@/page/forecasting/cbd/tongji'//害虫分析
-import deviceTongji from '@/page/forecasting/cbd/deviceTongji'//害虫排行
+import cbd from '@/page/forecasting/cbd/Cbd' //首页
+import cbdDataDetails from '@/page/forecasting/cbd/DataDetails' //数据详情
+import cbdDataPhotos from '@/page/forecasting/cbd/cbdDataPhotos' //图片详情
+import PestsStats from '@/page/forecasting/cbd/pestsStats' //害虫统计
+import tongji from '@/page/forecasting/cbd/tongji' //害虫分析
+import deviceTongji from '@/page/forecasting/cbd/deviceTongji' //害虫排行
 
 // ********************监控**************************
 import monitor from '@/page/monitor/Monitor'
 import photoView from '@/page/monitor/PhotoView'
 //*********************诱捕器系统********************
-import trap from '@/page/forecasting/trap/trap'//诱捕器
-import fillinrecord from '@/page/forecasting/trap/fillinrecord'//填报记录
-import bait from '@/page/forecasting/trap/bait'//填报记录
+import trap from '@/page/forecasting/trap/trap' //诱捕器
+import fillinrecord from '@/page/forecasting/trap/fillinrecord' //填报记录
+import bait from '@/page/forecasting/trap/bait' //填报记录
 
 Vue.use(Router)
 
 export default new Router({
-  routes: [
-    {
+  routes: [{
       path: '/',
       name: 'Login',
       component: Login
@@ -129,6 +132,34 @@ export default new Router({
             title: '任务管理详情'
           }
         },
+        {
+          path: 'supervise',
+          component: supervise,
+          meta: {
+            title: '监督记录'
+          }
+        },
+        {
+          path: 'superviseDetails',
+          component: superviseDetails,
+          meta: {
+            title: '监督记录详情'
+          }
+        },
+        {
+          path: 'superviseLog',
+          component: superviseLog,
+          meta: {
+            title: '监测日志'
+          }
+        },
+        {
+          path: 'superviseLogDetails',
+          component: superviseLogDetails,
+          meta: {
+            title: '监测日志详情'
+          }
+        },
         //------------------指挥中心--------------------------
         {
           path: 'cbd',
@@ -175,7 +206,7 @@ export default new Router({
           path: 'bait',
           component: bait
         },
-        
+
       ]
     },
   ]