MingGao_vue/minggao/src/page/monitoring/supervisiontask.vue

<!-- 监测任务管理 -->
<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"
        :editable="false"
      >
      </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%",
          selectedMode:false,//取消图例上的点击事件
        },
        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;
    // }
  }
}
/deep/.el-date-editor{
  cursor: pointer;
  .el-range-input{
    cursor: pointer;
  }
}
</style>