日常更新

minggao/config/index.js

@@ -12,8 +12,8 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        // target: 'http://192.168.1.17:12345', //翟毅飞
-        target: 'http://192.168.1.77:12345', //曹世祥
+        target: 'http://192.168.1.17:12345', //翟毅飞
+        // target: 'http://192.168.1.77:12345', //曹世祥
         changeOrigin: true,
         pathRewrite: {
           '^/api': '/api' //重写接口

minggao/src/page/home/index.vue

@@ -2,13 +2,29 @@
 <template>
   <div class="indexbox">
     <div class="menubox">
-      <div class="menubox_logo">
-        <img src="../../assets/logo.png" alt="" class="menubox_logo_img" />
-        <div class="menubox_logo_text">
-          <p>中国海关</p>
-          <p>CHINACUSTOMS</p>
-        </div>
+      <div class="index_title">
+        <img
+          :src="'http://192.168.1.17:12345' + imgurl"
+          alt=""
+          class="menubox_logo_img"
+        />
+        <p>{{ headline }}</p>
+      </div>
+      <div class="index_out">
+        <el-dropdown trigger="click" @command="quit">
+          <span class="el-dropdown-link">
+            <span>{{ username }}</span>
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="a">更改密码</el-dropdown-item>
+            <el-dropdown-item command="b">退出</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <!-- <p><i class="el-icon-switch-button" @click="quit"></i></p> -->
       </div>
+    </div>
+    <div class="contentbox">
       <div class="menubox_item">
         <el-menu
           default-active="2"
@@ -78,34 +94,57 @@
           </el-submenu>
         </el-menu>
       </div>
-    </div>
-    <div class="contentbox">
-      <div class="contentbox_top">
-        <div class="index_title">
-          <p>深圳海关外来入侵物种监测指挥中心</p>
+      <div class="contentbox_right">
+        <div class="contentbox_crumbs">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item
+              v-for="(item, index) in routerinfo"
+              :key="item.pur_id"
+              ><a
+                v-if="index == routerinfo.length - 2 && item.menu != ''"
+                :href="'/#/index/' + item.menu"
+                >{{ item.purview_name }}</a
+              ><a v-else>{{ item.purview_name }}</a></el-breadcrumb-item
+            >
+          </el-breadcrumb>
         </div>
-        <div class="index_out">
-          <p>{{ username }}</p>
-          <p><i class="el-icon-switch-button" @click="quit"></i></p>
+        <div class="contentbox_box">
+          <router-view />
         </div>
       </div>
-      <div class="contentbox_crumbs">
-        <el-breadcrumb separator="/">
-          <el-breadcrumb-item
-            v-for="(item, index) in routerinfo"
-            :key="item.pur_id"
-            ><a
-              v-if="index == routerinfo.length - 2 && item.menu!=''"
-              :href="'/#/index/'+item.menu"
-              >{{ item.purview_name }}</a
-            ><a v-else>{{ item.purview_name }}</a></el-breadcrumb-item
-          >
-        </el-breadcrumb>
-      </div>
-      <div class="contentbox_box">
-        <router-view />
-      </div>
     </div>
+    <el-dialog
+      title="提示"
+      :visible.sync="alterpassTF"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <div>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="110px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="原始密码：" prop="oldpass">
+            <el-input type="password" v-model="ruleForm.oldpass"></el-input>
+          </el-form-item>
+          <el-form-item label="新密码：" prop="newpass">
+            <el-input type="password" v-model="ruleForm.newpass"></el-input>
+          </el-form-item>
+          <el-form-item label="确认新密码：" prop="newpasstrue">
+            <el-input type="password" v-model="ruleForm.newpasstrue"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('ruleForm')" size="mini">取 消</el-button>
+        <el-button type="primary" @click="submitForm('ruleForm')" size="mini"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -117,6 +156,14 @@ export default {
   components: {},
   data() {
     //这里存放数据
+    var validatePass = (rule, value, callback) => {
+      console.log(value);
+      if (value == this.ruleForm.newpass) {
+        callback();
+      } else {
+        callback(new Error("俩次密码不一致，请重新确认密码！"));
+      }
+    };
     return {
       infodata: [],
       username: "",
@@ -124,6 +171,46 @@ export default {
       menuActiveId: "1",
       // menuOpeneds:["18"]
       routerinfo: [],
+      options: [],
+      value: "",
+      imgurl: "", //系统logo
+      headline: "", //系统标题
+      alterpassTF: false, //修改密码框
+      ruleForm: {
+        oldpass: "",
+        newpass: "",
+        newpasstrue: "",
+      },
+      rules: {
+        oldpass: [
+          { required: true, message: "请输入原始密码", trigger: "blur" },
+          {
+            min: 6,
+            max: 15,
+            message: "长度在 6 到 15 个字符",
+            trigger: "blur",
+          },
+        ],
+        newpass: [
+          { required: true, message: "请输入新密码", trigger: "blur" },
+          {
+            min: 6,
+            max: 15,
+            message: "长度在 6 到 15 个字符",
+            trigger: "blur",
+          },
+        ],
+        newpasstrue: [
+          { required: true, message: "请再次输入新密码", trigger: "blur" },
+          {
+            min: 6,
+            max: 15,
+            message: "长度在 6 到 15 个字符",
+            trigger: "blur",
+          },
+          { validator: validatePass, trigger: "blur" },
+        ],
+      },
     };
   },
   //监听属性 类似于data概念
@@ -149,29 +236,38 @@ export default {
         method: "POST",
         url: "/api/api_gateway?method=sysmenage.usermanager.user_info",
       }).then((res) => {
+        this.imgurl = res.data.data.theme_info.logo_url;
+        this.headline = res.data.data.theme_info.sys_name;
         this.routerdata = JSON.parse(JSON.stringify(res.data.data.children));
         this.infodata = res.data.data.children;
         console.log(this.routerdata);
         // this.infodata.shift();
-        localStorage.setItem('userID', res.data.data.im_user_id) // 存储当前登录账号的ID
-        this.infodata.shift();
+        localStorage.setItem("userID", res.data.data.im_user_id); // 存储当前登录账号的ID
         this.username = res.data.data.username;
         localStorage.setItem("usernme", this.username);
         this.routemap(this.routerdata);
       });
     },
-    quit() {
+    quit(e) {
       // user.login.logout_user
+      console.log(e);
+      if (e == "a") {
+        this.alterpassTF = true;
+      } else if (e == "b") {
+        this.outsystem()
+      }
+    },
+    outsystem(){
       this.$axios({
-        method: "POST",
-        url: "/api/api_gateway?method=sysmenage.usermanager.user_logout",
-      }).then((res) => {
-        if (res.data.data) {
-          localStorage.removeItem("session");
-          localStorage.removeItem("username");
-          this.$router.push("/Login");
-        }
-      });
+          method: "POST",
+          url: "/api/api_gateway?method=sysmenage.usermanager.user_logout",
+        }).then((res) => {
+          if (res.data.data) {
+            localStorage.removeItem("session");
+            localStorage.removeItem("username");
+            this.$router.push("/Login");
+          }
+        });
     },
     skip(path) {
       // console.log(this.$route);ssssss
@@ -179,6 +275,45 @@ export default {
         this.$router.push(path);
       }
     },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=app.my.app_change_pwd",
+            data: this.qs.stringify({
+              old_password: this.ruleForm.oldpass, //                必传      旧密码
+              new_password: this.ruleForm.newpass, //                必传      新密码
+              confirm_password: this.ruleForm.newpasstrue, //            必传      再次确认新密码
+            }),
+          }).then((res) => {
+            if (res.data.data) {
+              this.alterpassTF = false;
+              this.$message({
+                message: "修改成功！",
+                type: "success",
+              });
+              this.outsystem()
+            } else {
+              this.$message({
+                message: "修改失败！"+res.data.data.message,
+                type: "error",
+              });
+            }
+          });
+        } else {
+          this.$message({
+            message: "请完成信息填写！",
+            type: "warning",
+          });
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.alterpassTF = false;
+    },
     routemap(routerdata) {
       var newrouter = this.$route.path;
       var tf = routerdata.filter((item) => {
@@ -256,41 +391,44 @@ p {
   margin: 0;
 }
 .indexbox {
-  display: flex;
+  // display: flex;
 }
-.menubox_logo {
-  background-color: #0d3756;
-  margin: 0;
-  height: 62px;
-  width: 240px;
+.menubox {
+  width: 100%;
   display: flex;
-  .menubox_logo_img {
-    width: 40px;
-    height: 40px;
-    margin: 15px 15px 11px 30px;
-  }
-  .menubox_logo_text {
-    color: #fff;
-    margin-top: 18px;
+  height: 62px;
+  line-height: 62px;
+  justify-content: space-between;
+  padding: 0 15px;
+  box-sizing: border-box;
+  background-color: #fff;
+  box-shadow: 0 2px 3px -1px rgb(224, 219, 219); //底部阴影
+  .index_title {
+    display: flex;
+    .menubox_logo_img {
+      width: 40px;
+      height: 40px;
+      margin: 11px;
+    }
     p {
-      margin: 0;
       font-size: 18px;
-    }
-    p:last-child {
-      font-size: 12px;
-      margin-top: 5px;
+      font-weight: 700;
     }
   }
 }
-.menubox {
-  width: 240px;
-  height: 100vh;
+.contentbox {
+  // width: calc(100% - 240px);
+  display: flex;
   .menubox_item {
     height: calc(100vh - 62px);
     background-color: #0d3756;
     overflow-y: auto;
+    width: 226px;
+    /deep/.el-menu {
+      border: 0;
+    }
     /deep/.el-menu-vertical-demo {
-      width: 240px;
+      width: 220px;
     }
     /deep/.el-submenu__title {
       text-align: left;
@@ -327,6 +465,7 @@ p {
   /*滚动条样式*/
   ::-webkit-scrollbar {
     width: 6px;
+    // margin-left: -1px;
     /*height: 4px;*/
   }
   ::-webkit-scrollbar-thumb {
@@ -340,42 +479,25 @@ p {
     // border-radius: 0;
     background: rgba(0, 0, 0, 0.1);
   }
-}
-.contentbox {
-  width: calc(100% - 240px);
-  .contentbox_top {
-    display: flex;
-    justify-content: space-between;
-    height: 62px;
-    box-shadow: 0 2px 3px -1px rgb(224, 219, 219); //底部阴影
-    .index_title {
-      line-height: 62px;
-      font-size: 18px;
-      padding-left: 20px;
-      font-weight: 700;
-    }
-    .index_out {
-      display: flex;
-      line-height: 62px;
-      p:last-child {
-        margin: 0 15px;
+  .contentbox_right {
+    width: calc(100% - 226px);
+    margin: 10px auto 0;
+    .contentbox_crumbs {
+      width: 98%;
+      margin: 0;
+      /deep/.el-breadcrumb {
+        margin: 0 0 0 20px;
+        padding: 0 !important;
+        background-color: transparent !important;
       }
     }
-  }
-  .contentbox_crumbs {
-    width: 95%;
-    margin: 15px auto;
-    /deep/.el-breadcrumb {
-      padding: 0 !important;
-      background-color: transparent !important;
+    .contentbox_box {
+      width: 98%;
+      height: calc(100vh - 100px);
+      // background-color: chartreuse;
+      margin: 15px auto 0;
+      overflow-y: auto;
     }
   }
-  .contentbox_box {
-    width: 98%;
-    height: calc(100vh - 104px);
-    // background-color: chartreuse;
-    margin: 15px auto 0;
-    overflow-y: auto;
-  }
 }
 </style>

minggao/src/page/monitoring/monitoringtask.vue

@@ -0,0 +1,381 @@
+<!-- 监督任务管理 -->
+<template>
+  <div class="suptaskbox">
+    <div class="suptaskbox_serach">
+      <el-select
+        v-model="uservalue"
+        multiple
+        filterable
+        placeholder="请选择任务监督人"
+        size="mini"
+        collapse-tags
+      >
+        <el-option
+          v-for="item in useroptions"
+          :key="item.user_id"
+          :label="item.real_name"
+          :value="item.user_id"
+        >
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-model="monvalue"
+        type="monthrange"
+        range-separator="至"
+        start-placeholder="开始月份"
+        end-placeholder="结束月份"
+        size="mini"
+      >
+      </el-date-picker>
+      <el-button type="info" size="mini" @click="searchchilk">搜索</el-button>
+      <el-button type="warning" size="mini" @click="download"
+        >下载统计结果</el-button
+      >
+    </div>
+    <el-card class="box-card">
+      <div
+        :style="{ height: '100%', width: '100%' }"
+        id="mychartpie"
+        ref="mychartpie"
+      ></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import * as echarts from "echarts";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      monvalue: "", //月份
+      useroptions: [], //监测人员名单
+      uservalue: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    //监督人员列表
+    getuserlist() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.task_user_list",
+        data: this.qs.stringify({
+          user_type: "supervisor",
+        }),
+      }).then((res) => {
+        // console.log(res.data.data);
+        this.useroptions = res.data.data;
+      });
+    },
+    //任务列表 data_report.report.task_report
+    gettasklist(start_time, end_time) {
+      //   console.log(JSON.stringify(this.uservalue));
+      var operator_user_id_list = "";
+      if (this.uservalue.length != 0) {
+        operator_user_id_list = JSON.stringify(this.uservalue);
+      }
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=data_report.report.supervisor_report",
+        data: this.qs.stringify({
+          operator_user_id_list, // 非必填  任务处理人id数组  ['1', '2']
+          start_time, //月份
+          end_time, //结束
+        }),
+      }).then((res) => {
+        console.log(res.data.data);
+        // this.useroptions = res.data.data;
+        var tasklist = res.data.data;
+        var userlist = []; //任务人列表
+        var offtask = []; //已完成
+        for (var i = 0; i < tasklist.length; i++) {
+          userlist.push(tasklist[i].real_name);
+          offtask.push(tasklist[i].count);
+        }
+        this.init(userlist, offtask);
+      });
+    },
+    init(userlist, offtask) {
+      let categoryData = userlist;
+      let chartdata = offtask;
+      let backgroundColor = "rgba(255,255,255,1)";
+      let itemcolor = {
+        type: "linear",
+        colorStops: [
+          {
+            offset: 0,
+            color: "rgba(6, 120, 157,1)",
+          },
+          {
+            offset: 0.5,
+            color: "rgba(6, 120, 157,0.2)",
+          },
+          {
+            offset: 1,
+            color: "rgba(6, 120, 157,1)",
+          },
+        ],
+      };
+
+      var option = {
+        textStyle: {
+          color: "#c0c3cd",
+          fontSize: 14,
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            saveAsImage: {
+              backgroundColor: "#031245",
+            },
+            restore: {},
+          },
+          iconStyle: {
+            borderColor: "#c0c3cd",
+          },
+        },
+        legend: {
+          top: 10,
+          itemWidth: 8,
+          itemHeight: 8,
+          icon: "circle",
+          left: "center",
+          padding: 0,
+          textStyle: {
+            color: "#c0c3cd",
+            fontSize: 14,
+            padding: [2, 0, 0, 0],
+          },
+        },
+        color: ["#00D7E9", "rgba(0, 215, 233, 0.9)"],
+        grid: {
+          containLabel: true,
+          left: 40,
+          right: 20,
+          bottom: 40,
+          top: 40,
+        },
+        xAxis: {
+          axisLine: {
+            lineStyle: {
+              color: "#999",
+            },
+            show: true,
+          },
+          axisLabel: {
+            color: "#333",
+            fontSize: 14,
+            interval: 0,
+          },
+          
+          data: categoryData,
+          type: "category",
+        },
+        yAxis: {
+          nameTextStyle: {
+            color: "#c0c3cd",
+            padding: [0, 0, -10, 0],
+            fontSize: 14,
+          },
+          axisLabel: {
+            color: "#000",
+            fontSize: 14,
+          },
+          axisTick: {
+            lineStyle: {
+              color: "#668092",
+              width: 1,
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#335971",
+              // "type": "dashed"
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#333",
+              width: 1,
+              // "type": "dashed"
+            },
+            show: true,
+          },
+          name: "",
+        },
+        series: [
+          {
+            data: chartdata,
+            type: "bar",
+            barMaxWidth: "auto",
+            barWidth: 20,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                type: "linear",
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#00D7E9",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 167, 233,0.3)",
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: "top",
+              distance: 10,
+              color: "#00D7E9",
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1],
+            type: "pictorialBar",
+            barMaxWidth: "20",
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [20, 10],
+          },
+          {
+            data: chartdata,
+            type: "pictorialBar",
+            barMaxWidth: "20",
+
+            symbolPosition: "end",
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [20, 12],
+            zlevel: 2,
+          },
+        ],
+        tooltip: {
+          show: true,
+          formatter: "{b}:{c0}",
+        },
+      };
+      echarts.init(document.getElementById("mychartpie")).setOption(option);
+    },
+    searchchilk() {
+      //   console.log(this.monvalue, this.uservalue);
+      var start_time = this.timetag(0);
+      var end_time = this.timetag(1);
+      this.gettasklist(start_time, end_time);
+    },
+    timetag(i) {
+      var time = "";
+      if (this.monvalue.length != 0) {
+        time =
+          this.monvalue[i].getFullYear() +
+          "-" +
+          (this.monvalue[i].getMonth() + 1 < 10
+            ? "0" + (this.monvalue[i].getMonth() + 1)
+            : this.monvalue[i].getMonth() + 1);
+      }
+      return time;
+    },
+    download(start_time, end_time) {
+    //   var operator_user_id_list = "";
+    //   if (this.uservalue.length != 0) {
+    //     operator_user_id_list = JSON.stringify(this.uservalue);
+    //   }
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=data_report.report.supervisor_export",
+        // data: this.qs.stringify({
+        //   operator_user_id_list, // 非必填  任务处理人id数组  ['1', '2']
+        //   start_time, //月份
+        //   end_time, //结束
+        // }),
+        responseType: "blob",
+      }).then((res) => {
+        console.log(res.data.data);
+        this.downloadFile(res, "监督任务统计.xls");
+      });
+    },
+    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);
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getuserlist();
+    this.gettasklist();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.suptaskbox {
+  width: 100%;
+  height: 100%;
+  .suptaskbox_serach {
+    /deep/.el-select,
+    /deep/.el-date-editor {
+      width: 240px;
+    }
+    /deep/.el-button--info {
+      background-color: #409eff;
+      border-color: #409eff;
+      margin-left: 10px;
+    }
+  }
+  .box-card {
+    /deep/.el-card__body {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+    }
+    margin-top: 15px;
+    width: 98%;
+    height: 90%;
+    // #mychartpie {
+    //   width: 100%;
+    //   height: 100%;
+    //   div {
+    //     width: 100% !important;
+    //     height: 100% !important;
+    //     /deep/canvas {
+    //       width: 100% !important;
+    //       height: 100% !important;
+    //     }
+    //   }
+    // }
+    // #mychartpie>div{
+    //     width: 100% !important;
+    //     height: 100% !important;
+    // }
+  }
+}
+</style>

minggao/src/page/monitoring/supervisiontask.vue

@@ -0,0 +1,377 @@
+<!-- 监测任务管理 -->
+<template>
+  <div class="suptaskbox">
+    <div class="suptaskbox_serach">
+      <el-select
+        v-model="uservalue"
+        multiple
+        filterable 
+        placeholder="请选择任务监测人"
+        size="mini"
+        collapse-tags
+      >
+        <el-option
+          v-for="item in useroptions"
+          :key="item.user_id"
+          :label="item.real_name"
+          :value="item.user_id"
+        >
+        </el-option>
+      </el-select>
+      <el-date-picker
+        v-model="monvalue"
+        type="monthrange"
+        range-separator="至"
+        start-placeholder="开始月份"
+        end-placeholder="结束月份"
+        size="mini"
+      >
+      </el-date-picker>
+      <el-button type="info" size="mini" @click="searchchilk">搜索</el-button>
+      <el-button type="warning" size="mini" @click="download"
+        >下载统计结果</el-button
+      >
+    </div>
+    <el-card class="box-card">
+      <div
+        :style="{ height: '100%', width: '100%' }"
+        id="mychartpie"
+        ref="mychartpie"
+      ></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import * as echarts from "echarts";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      monvalue: "", //月份
+      useroptions: [], //监测人员名单
+      uservalue: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    //监督人员列表
+    getuserlist() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=control_center.task.task_user_list",
+        data: this.qs.stringify({
+          user_type: "operator",
+        }),
+      }).then((res) => {
+        // console.log(res.data.data);
+        this.useroptions = res.data.data;
+      });
+    },
+    //任务列表 data_report.report.task_report
+    gettasklist(start_time, end_time) {
+      //   console.log(JSON.stringify(this.uservalue));
+      var operator_user_id_list = "";
+      if (this.uservalue.length != 0) {
+        operator_user_id_list = JSON.stringify(this.uservalue);
+      }
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=data_report.report.task_report",
+        data: this.qs.stringify({
+          operator_user_id_list, // 非必填  任务处理人id数组  ['1', '2']
+          start_time, //月份
+          end_time, //结束
+        }),
+      }).then((res) => {
+        console.log(res.data.data);
+        // this.useroptions = res.data.data;
+        var tasklist = res.data.data;
+        var nonetask = []; //未完成
+        var userlist = []; //任务人列表
+        var offtask = []; //已完成
+        var overdueoff = []; //逾期已完成
+        for (var i = 0; i < tasklist.length; i++) {
+          nonetask.push(tasklist[i].unend_count);
+          overdueoff.push(tasklist[i].overdue_end_count);
+          userlist.push(tasklist[i].real_name);
+          offtask.push(tasklist[i].end_count);
+        }
+        this.init(nonetask, overdueoff, userlist, offtask);
+      });
+    },
+    init(nonetask, overdueoff, userlist, offtask) {
+      //   nonetask; //未完成
+      //   userlist; //任务人列表
+      //   offtask; //已完成
+      //   overdueoff; //逾期已完成
+      var sumlist = [];
+      var sumlist2 = [];
+      for (var i = 0; i < nonetask.length; i++) {
+        sumlist[i] = nonetask[i] + overdueoff[i] + offtask[i];
+        sumlist2[i] = nonetask[i] + offtask[i];
+      }
+      console.log(sumlist);
+      var option = {
+        tooltip: {},
+        legend: {
+          show: true,
+          top: "8%",
+        },
+        grid: {
+          left: "3%",
+          right: "3%",
+          bottom: "5%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: userlist,
+          axisLine: {
+            lineStyle: {
+              color: "#999",
+            },
+            show: true,
+          },
+          axisLabel: {
+            color: "#333",
+            fontSize: 14,
+            interval: 0,
+          },
+          nameTextStyle: {
+            color: "#ff0",
+            padding: [0, 0, -10, 0],
+            fontSize: 14,
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#333",
+              width: 1,
+              // "type": "dashed"
+            },
+            show: true,
+          },
+        },
+        series: [
+          {
+            name: "已完成任务数量",
+            type: "bar",
+            stack: "account",
+            barWidth: 26,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: "linear",
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgb(164,215,251,0.3)",
+                  },
+                  {
+                    offset: 1,
+                    color: "#369ef6",
+                  },
+                ],
+              },
+            },
+            data: offtask,
+          },
+          {
+            name: "未完成任务数量",
+            type: "bar",
+            stack: "account",
+            barWidth: 26,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgb(251,220,155,0.3)" },
+                { offset: 1, color: "#ed9163" },
+              ]),
+            },
+            data: nonetask,
+          },
+          {
+            name: "逾期完成任务数量",
+            type: "bar",
+            stack: "account",
+            barWidth: 26,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "rgb(254,173,161,0.3)" },
+                { offset: 1, color: "#fd7371" },
+              ]),
+            },
+            data: overdueoff,
+          },
+          {
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: offtask,
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [26, 10],
+            symbolRotate: 0,
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: "#369ef6",
+              },
+            },
+          },
+          {
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: sumlist2,
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [26, 10],
+            symbolRotate: 0,
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: "#e76422",
+              },
+            },
+          },
+          {
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: sumlist,
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [26, 10],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: "#fd7371",
+              },
+            },
+          },
+        ],
+      };
+      echarts.init(document.getElementById("mychartpie")).setOption(option);
+    },
+    searchchilk() {
+      //   console.log(this.monvalue, this.uservalue);
+      var start_time = this.timetag(0);
+      var end_time = this.timetag(1);
+      this.gettasklist(start_time, end_time);
+    },
+    timetag(i) {
+      var time = "";
+      if (this.monvalue.length != 0) {
+        time =
+          this.monvalue[i].getFullYear() +
+          "-" +
+          (this.monvalue[i].getMonth() + 1 < 10
+            ? "0" + (this.monvalue[i].getMonth() + 1)
+            : this.monvalue[i].getMonth() + 1);
+      }
+      return time;
+    },
+    download(start_time, end_time) {
+      var operator_user_id_list = "";
+      if (this.uservalue.length != 0) {
+        operator_user_id_list = JSON.stringify(this.uservalue);
+      }
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=data_report.report.task_export",
+        data: this.qs.stringify({
+          operator_user_id_list, // 非必填  任务处理人id数组  ['1', '2']
+          start_time, //月份
+          end_time, //结束
+        }),
+        responseType: "blob",
+      }).then((res) => {
+          console.log(res.data.data);
+          this.downloadFile(res,"监测任务统计.xls");
+      });
+    },
+    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);
+    },
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  beforeMount() {}, //生命周期 - 挂载之前
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getuserlist();
+    this.gettasklist();
+  },
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.suptaskbox {
+  width: 100%;
+  height: 100%;
+  .suptaskbox_serach {
+    /deep/.el-select,
+    /deep/.el-date-editor {
+      width: 240px;
+    }
+    /deep/.el-button--info {
+      background-color: #409eff;
+      border-color: #409eff;
+      margin-left: 10px;
+    }
+  }
+  .box-card {
+    /deep/.el-card__body {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+    }
+    margin-top: 15px;
+    width: 98%;
+    height: 90%;
+    // #mychartpie {
+    //   width: 100%;
+    //   height: 100%;
+    //   div {
+    //     width: 100% !important;
+    //     height: 100% !important;
+    //     /deep/canvas {
+    //       width: 100% !important;
+    //       height: 100% !important;
+    //     }
+    //   }
+    // }
+    // #mychartpie>div{
+    //     width: 100% !important;
+    //     height: 100% !important;
+    // }
+  }
+}
+</style>

minggao/src/page/systemmanger/motif.vue

@@ -7,7 +7,7 @@
           <div class="list_left">系统LOGO:</div>
           <div class="list_right">
             <!-- <img  v-viewer id="viewerDom" src="../../assets/images/newImg/12.jpg" alt="" class="" /> -->
-            <img  v-viewer id="viewerDom" :src="objData.logo_url" alt="" class="" />
+            <img  v-viewer id="viewerDom" :src="'http://192.168.1.17:12345'+objData.logo_url" alt="" class="" />
           </div>
         </li>
         <li class="motif_list">

minggao/src/router/index.js

@@ -39,13 +39,16 @@ 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 surveillancevideo from '@/page/monitor/Monitor'
 import photoView from '@/page/monitor/PhotoView'
 //*********************诱捕器系统********************
 import maintain from '@/page/forecasting/maintain/maintain'//监测点维护
 import trap from '@/page/forecasting/trap/trap' //诱捕器
 import fillinrecord from '@/page/forecasting/trap/fillinrecord' //填报记录
 import bait from '@/page/forecasting/trap/bait' //诱剂维护
+//*********************任务报表********************
+import monitoringtask from '@/page/monitoring/monitoringtask'//监测任务统计
+import supervisiontask from '@/page/monitoring/supervisiontask'//监督任务统计
 
 Vue.use(Router)
 
@@ -227,8 +230,8 @@ export default new Router({
           component: deviceTongji
         },
         {
-          path: 'monitor',
-          component: monitor
+          path: 'surveillancevideo',
+          component: surveillancevideo
         },
         {
           path: 'photoView/:id',
@@ -252,6 +255,15 @@ export default new Router({
           path: 'maintain',
           component: maintain
         },
+        //-------------------任务报表--------------------
+        {
+          path:"monitoringtask",
+          component:monitoringtask
+        },
+        {
+          path:"supervisiontask",
+          component:supervisiontask
+        },
       ]
     },
   ]