2022/2/8 指挥中心实验室识别、任务管理

minggao/src/page/commandCenter/laboratory.vue

@@ -7,19 +7,28 @@
         <el-col>
           <div class="search_box">
             <!-- 任务处理人 -->
-            <el-input
-              size="mini"
-              placeholder="请输入任务处理人"
-              style="width: 15%"
-              v-model.trim="input"
-              @change="searchData"
+            <el-select
+              filterable
+              v-model="input"
               clearable
+              @change="searchData"
+              placeholder="请选择任务处理人"
+              size="mini"
             >
-            </el-input>
+              <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="value"
+              @change="searchData"
               clearable
               placeholder="请选择任务状态"
               size="mini"
@@ -59,7 +68,12 @@
       </el-row>
 
       <!-- 列表 -->
-      <el-table :data="tableData" stripe style="width: 100%">
+      <el-table
+        :data="tableData"
+        stripe
+        v-loading="loading"
+        style="width: 100%"
+      >
         <el-table-column prop="serial" label="序号" width="100">
         </el-table-column>
         <el-table-column prop="trap_number" label="设备编号" width="120">
@@ -83,6 +97,9 @@
         >
         </el-table-column>
         <el-table-column prop="report_time" label="带回时间" width="280">
+          <template slot-scope="scope">
+            <span>{{ scope.row.report_time || "暂无" }}</span>
+          </template>
         </el-table-column>
         <el-table-column prop="discern_status" label="任务状态" width="280">
           <template slot-scope="scope">
@@ -142,7 +159,7 @@
             <a
               v-if="scope.row.discern_status == '已接收'"
               class="reset"
-              @click="filing(scope.row)"
+              @click="examine(scope.row)"
               href="javascript:;"
               >填报</a
             >
@@ -152,7 +169,7 @@
               class="reset"
               href="javascript:;"
               @click="examine(scope.row)"
-              >已识别</a
+              >编辑</a
             >
           </template>
         </el-table-column>
@@ -175,66 +192,83 @@
     <!-- 填报弹框 -->
     <el-dialog
       title="填报"
+      v-loading="loading1"
       :visible.sync="dialogVisible"
       width="30%"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
     >
       <ul class="fill_ul">
-        <li class="fill_list">
+        <li class="fill_listTlt">
           <div class="fill_tltie">有害生物</div>
-          <div class="fill_div">
+          <div class="fill_tltie">数量</div>
+        </li>
+
+        <li class="fill_list1" v-if="fillList.length !== 0">
+          <div v-for="(item, index) in fillList" :key="index">
             <el-select
-              v-model="value2"
+              v-model="item.value"
               size="mini"
               clearable
               placeholder="请选择"
             >
               <el-option
-                v-for="item in options1"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="item1 in fillList"
+                :key="item1.value"
+                :label="item1.label"
+                :value="item1.value"
               >
               </el-option>
             </el-select>
+
+            <el-input
+              placeholder="请输入内容"
+              size="mini"
+              v-model="item.num"
+              clearable
+              type="number"
+              style="width: 30%"
+            >
+            </el-input>
+
+            <span>删除</span>
           </div>
-          <!-- <el-select
-            v-model="value2"
+        </li>
+
+        <!-- 添加 -->
+        <li class="fill_list">
+          <el-input
+            placeholder="请输入有害生物"
             size="mini"
+            v-model="insectVal"
             clearable
-            placeholder="请选择"
+            style="width: 37%; margin: 0 0 0 -8px"
           >
-            <el-option
-              v-for="item in options1"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select> -->
-        </li>
-        <li class="fill_list">
-          <div class="fill_tltie">数量</div>
+          </el-input>
+
           <el-input
-            placeholder="请输入内容"
+            placeholder="请输入数量"
             size="mini"
-            v-model="input2"
+            v-model="numVal"
             clearable
+            type="number"
+            style="width: 30%"
           >
           </el-input>
-        </li>
 
-        <li class="fill_list">
-          <span>删除</span>
+          <span
+            style="color: #000; font-size: 30px; cursor: pointer"
+            @click="addInsect()"
+            >+</span
+          >
         </li>
       </ul>
-      <span slot="footer" class="dialog-footer">
+      <!-- <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogVisible = false"
           >确 定</el-button
         >
-      </span>
+      </span> -->
     </el-dialog>
   </div>
 </template>
@@ -249,26 +283,19 @@ export default {
 
       // 筛选
       input: "", // 任务处理人
+      conductorList: [], // 任务处理人列表
       options: [
         {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
+          value: "待接收",
+          label: "待接收",
         },
         {
-          value: "选项4",
-          label: "龙须面",
+          value: "已接收",
+          label: "已接收",
         },
         {
-          value: "选项5",
-          label: "北京烤鸭",
+          value: "已填报",
+          lanbel: "已填报",
         },
       ],
       value: "", // 任务状态
@@ -282,31 +309,23 @@ export default {
       tableSum: 0, // 总页数
 
       // 填报弹框
-      dialogVisible: true,
+      dialogVisible: false,
       options1: [
         {
           value: "选项1",
           label: "黄金糕",
         },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
       ],
       value2: "",
       input2: "",
+      loading: false, // 加载
+
+      // 已识别
+      examineObj: {}, // 选中的对象值
+      fillList: [], // 填报详情数据
+      insectVal: "", // 添加 - 有害生物
+      numVal: "", // 添加 - 数量
+      loading1: false, // 加载
     };
   },
   //监听属性 类似于data概念
@@ -325,6 +344,13 @@ export default {
         }, 400);
       }
     },
+
+    // 填报弹框
+    dialogVisible(val) {
+      if (val == false) {
+        this.fillList = [];
+      }
+    },
   },
   //方法集合
   methods: {
@@ -340,14 +366,35 @@ export default {
     },
 
     // 筛选
-    searchData() {},
+    searchData() {
+      // 对时间筛选中获取到的时间进行处理
+      if (this.value1) {
+        this.startTime = this.formatTime(this.value1[0], "yyyy-MM-dd");
+        this.endTime = this.formatTime(this.value1[1], "yyyy-MM-dd");
+      } else {
+        this.startTime = "";
+        this.endTime = "";
+      }
+      this.loading = true;
+      this.tableData = [];
+      this.tableList();
+    },
 
     // 重置
-    reset() {},
+    reset() {
+      this.input = "";
+      this.value = "";
+      this.value1 = "";
+      this.startTime = "";
+      this.endTime = "";
+      this.loading = true;
+      this.tableList();
+    },
 
     // 下页
     newPage(page) {
       this.page = page;
+      this.tableList();
     },
 
     // 表格数据
@@ -358,15 +405,13 @@ export default {
         data: this.qs.stringify({
           page: this.page,
           page_item: 10,
-          operator_user_id: "", // 任务处理人id
-          owner_user_id: "", //任务发布人id
+          operator_user_id: this.input, // 任务处理人id
           start_time: this.startTime, // 开始时间
           end_time: this.endTime, // 结束时间
           task_status: this.value, // 任务状态
         }),
       })
         .then((res) => {
-          console.log(res.data.data.page_list);
           if (res.data.data.total_item !== 0) {
             this.tableSum = res.data.data.total_item;
             var data = res.data.data.page_list;
@@ -375,15 +420,37 @@ export default {
               item.serial = index + 1;
               list.push(item);
             });
-            console.log(list);
             this.tableData = list;
           }
+          this.loading = false;
         })
         .catch((err) => {
-          console.log(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.operator_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) => {});
+    },
+
     // 确认接收
     receive(data) {
       this.$confirm("此操作将确认接收, 是否继续?", "提示", {
@@ -392,33 +459,140 @@ export default {
         type: "warning",
       })
         .then(() => {
-          this.$message({
-            type: "success",
-            message: "接收成功!",
-          });
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=control_center.task.discern_modify",
+            data: this.qs.stringify({
+              record_id: data.id, // 任务id
+            }),
+          })
+            .then((res) => {
+              if (res.data.data == true) {
+                this.$message({
+                  type: "success",
+                  message: "接收成功!",
+                  duration: 1500,
+                });
+                this.loading = true;
+                this.tableList();
+              }
+            })
+            .catch((err) => {
+              console.log(err);
+            });
         })
         .catch(() => {
           this.$message({
             type: "info",
             message: "已取消接收",
+            duration: 1500,
           });
         });
     },
 
     // 填报
-    filing(data) {
-      this.dialogVisible = true;
+    // filing(data) {
+    //   this.examineObj = data;
+    //   this.dialogVisible = true;
+    // },
+
+    // 填报、编辑事件  （表格中的操作）
+    examine(data) {
+      // console.log(data);
+      this.examineObj = data;
+      // 填报记录详情接口
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.trap_pest_record_info",
+        data: this.qs.stringify({
+          trap_record_id: data.id, // 任务id
+        }),
+      })
+        .then((res) => {
+          // if (res.data.data.length !== 0) {
+            var data = res.data.data;
+            var list = [];
+            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);
+            });
+            console.log(list);
+            this.fillList = list;
+            this.dialogVisible = true;
+          // }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
 
-    // 已识别
-    examine(data) {},
+    // 添加有害生物
+    addInsect() {
+      if (this.insectVal !== "" && this.numVal !== "") {
+        var list = [];
+        var obj = {};
+        obj["pest_name"] = this.insectVal;
+        obj["pest_number"] = this.numVal;
+        list.push(obj);
+
+        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(list), // 害虫数组
+              }),
+            })
+              .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.$message({
+              type: "info",
+              message: "已取消添加",
+              duration: 1500,
+            });
+          });
+      } else {
+        this.$message({
+          type: "info",
+          message: "请将信息填写完整！",
+          duration: 1500,
+        });
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    this.loading = true;
     this.get_boderHeight(); // 动态获取浏览器高度
     this.tableList(); // 表格列表数据
+    this.conductorAxios(); // 筛选列表 - 任务处理人列表
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -459,21 +633,41 @@ export default {
 
   // 填报弹框
   .fill_ul {
-    // border: 1px solid #000;
-    // display: flex;
-    .fill_list {
-      .fill_div {
-        display: flex;
-      }
-      margin: 0 20px 0 0;
+    .fill_listTlt {
+      display: flex;
+      width: 50%;
+      margin: 0 0 0 24px;
+      justify-content: space-between;
       .fill_tltie {
         margin: 0 0 10px 0;
       }
+    }
+    .fill_list {
+      display: flex;
+      justify-content: space-around;
+      margin: 0 20px 10px 0;
       span {
-        line-height: 87px;
+        line-height: 30px;
         color: #1890ff;
       }
     }
+
+    .fill_list1 {
+      div {
+        display: flex;
+        justify-content: space-around;
+        margin: 0 20px 10px 0;
+        span {
+          line-height: 30px;
+          color: #1890ff;
+        }
+      }
+    }
+  }
+
+  /deep/.el-card {
+    overflow: hidden;
+    overflow-y: auto;
   }
 }
 </style>

minggao/src/page/commandCenter/realTime.vue

@@ -1078,8 +1078,9 @@ export default {
     height: 95px;
   }
 
-  // /deep/.el-dialog__body {
-  //   padding: 0;
-  // }
+  /deep/.el-card {
+    overflow: hidden;
+    overflow-y: auto;
+  }
 }
 </style>

minggao/src/page/commandCenter/taskRegulator.vue

@@ -0,0 +1,332 @@
+<!--  -->
+<template>
+  <div class="taskRegulator_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-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
+              >
+
+              <el-button type="primary" size="mini" @click="reset"
+                >新增任务</el-button
+              >
+
+              <el-button type="primary" 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="end_time"
+          label="任务完成时间">
+        </el-table-column>
+        <el-table-column
+          prop="task_status"
+          label="任务状态">
+        </el-table-column>
+        <el-table-column 
+          label="操作">
+          <template>
+            <a
+              class="reset"
+              href="javascript:;"
+              >查看</a
+            >
+            <a
+              class="reset"
+              href="javascript:;"
+              >编辑</a
+            >
+            <a
+              class="reset"
+              href="javascript:;"
+              >删除</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: "", // 任务状态
+      options2: [], // 任务状态 - 列表
+      value2: '', //时间筛选
+      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;
+        })();
+      };
+    },
+
+    // 筛选
+    searchData() {},
+
+    // 重置
+    reset() {},
+
+    // 分页
+    newPage(page) {
+      this.page = page
+    },
+
+    // 表格数据
+    tableList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.task_list",
+        data: this.qs.stringify({
+          page: this.page, //当前页码
+          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, // 任务状态
+        })
+      }).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)
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.loading = true
+    this.tableList(); // 表格数据
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.taskRegulator_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/taskRegulatorDetails.vue

@@ -0,0 +1,319 @@
+<!--  -->
+<template>
+    <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>
+
+                        <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>
+.taskRegulatorDetails_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/systemmanger/customsManger.vue

@@ -40,7 +40,7 @@
       ></tree-table>
 
       <!-- 分页 -->
-      <el-pagination
+      <!-- <el-pagination
         style="position: absolute; bottom: 0; left: 50%"
         :page-size="10"
         @current-change="newPage"
@@ -50,6 +50,17 @@
         layout="prev, pager, next, jumper"
         :total="tableSum"
       >
+      </el-pagination> -->
+
+      <el-pagination
+        :page-size="10"
+        @current-change="newPage"
+        :current-page="page"
+        v-if="treeDataSource.length > 0"
+        background
+        layout="prev, pager, next, jumper"
+        :total="tableSum"
+      >
       </el-pagination>
     </el-card>
 
@@ -400,7 +411,12 @@ export default {
 </script>
 <style lang='less' scoped>
 .customsManger_box {
-  /deep/.el-card__body {
+  // /deep/.el-card__body {
+  //   overflow: hidden;
+  //   overflow-y: auto;
+  // }
+
+  /deep/.el-card {
     overflow: hidden;
     overflow-y: auto;
   }

minggao/src/router/index.js

@@ -18,6 +18,8 @@ const dayRecord = () => import('@/Page/systemmanger/dayRecord') // 用户管理
 //---------------------------------------指挥中心----------------------------------------------------
 const realTime = () => import('@/Page/commandCenter/realTime') //实时通信
 const laboratory = () => import('@/Page/commandCenter/laboratory') //实验室识别
+const taskRegulator = () => import('@/Page/commandCenter/taskRegulator') //任务管理
+const taskRegulatorDetails = () => import('@/Page/commandCenter/taskRegulatorDetails') //任务管理 - 详情
 
 // *****************测报系统**********************
 import cbd from '@/page/forecasting/cbd/Cbd'//首页
@@ -113,6 +115,20 @@ export default new Router({
             title: '实验室识别'
           }
         },
+        {
+          path: 'taskRegulator',
+          component: taskRegulator,
+          meta: {
+            title: '任务管理'
+          }
+        },
+        {
+          path: 'taskRegulatorDetails',
+          component: taskRegulatorDetails,
+          meta: {
+            title: '任务管理详情'
+          }
+        },
         //------------------指挥中心--------------------------
         {
           path: 'cbd',