MingGao_vue/minggao/src/page/monitoring/monitoringtask.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"
        :disabled="disabled"
        >{{disabled?'下载中...':'下载统计结果'}}</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: [],
      disabled:false
    };
  },
  //监听属性 类似于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.disabled = true
      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);
      this.disabled = false
    },
  },
  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>