soc_web/src/views/board/charts/question/report.vue

<!--  -->
<template>
  <div class="chart-template chart-template-withperiod">
    <p>
      <span> 问题整改</span>
    </p>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="t in types"
          :key="t.value"
          :label="t.text"
          :name="t.value"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div id="question_Chart"></div>
  </div>
</template>

<script>
import "./../../board.scss";
import * as echarts from "echarts";
import {
  findMaxIndex,
  getChartDOMSize,
  getNextPeriod,
  getPeriodText,
} from "../../utils.js";
import { question } from "@/api/board/cockpit.js";
const types = [
  {
    text: "今天",
    value: "1",
  },
  {
    text: "近7天",
    value: "2",
  },
  {
    text: "近30天",
    value: "3",
  },
  {
    text: "近90天",
    value: "4",
  },
  {
    text: "本年",
    value: "5",
  },
];
export default {
  props: ["orgId"],
  data() {
    return {
      data: {
        all: [],
        completed: [],
        name: [],
      },
      types,
      activeName: types[0].value,
    };
  },

  components: {},

  computed: {},

  watch: {
    orgId: {
      deep: true,
      handler(val) {
        this.resetTimer();
        this.getData();
      },
    },
    data: {
      deep: true,
      handler() {
        this.initMap();
      },
    },
  },

  created() {
    // this.types = types;
    this.maxDisplay = 16;
    this.refreshTime = 1 * 10 * 1000;
    this.isMouseOver = false;
  },

  async mounted() {
    window.addEventListener("resize", this.windowResize);
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
    this.timer = null;

    window.removeEventListener("resize", this.windowResize);
  },

  methods: {
    handleClick() {
      this.resetTimer();
      this.getData();
    },
    handleMouseEnter() {
      this.isMouseOver = true;
    },
    handleMouseLeave() {
      this.isMouseOver = false;
    },
    async getData() {
      // let bs = parseInt(this.activeName) + 1;
      // this.data = {
      //   all: 500*bs,
      //   unconfirm: 112*bs, //未确认
      //   auditing: 20*bs, //异议审批中
      //   unreform: 50*bs, //待整改
      //   notQuestion: 4*bs,
      //   reformed: (500 - 112 - 20 - 50 - 4)*bs,
      // };
      let r = (await  question({ orgId: this.orgId, period: this.activeName })).data;

      this.data = r;
      if(r.total==0){
        this.data.reformRate=100;
      }else{
        this.data.reformRate=((r.reformed/r.total)*100).toFixed(0);
      }
    },

    windowResize() {
      this.myChart && this.myChart.resize();
    },
    initMap() {
      this.myChart && this.myChart.dispose();

      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById("question_Chart"));

      let chartData = [
        {
          name: "未确认",
          value: this.data.unconfirm,
        },
        {
          name: "异议审批中",
          value: this.data.auditing,
        },
        {
          name: "待整改",
          value: this.data.unreform,
        },
        {
          name: "异议隐患",
          value: this.data.notQuestion,
        },
        {
          name: "整改完成",
          value: this.data.reformed,
        },
      ];
      let t = this;
      // 指定图表的配置项和数据
      var option = {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: chartData.map((d) => d.name),
          formatter: function (name) {
            let d = chartData.find((c) => c.name === name);
            return d.name + "  " + d.value + "项";
          },
          textStyle: {
            color: "white",
          },
        },
        series: [
          {
            name: "问题整改",
            type: "pie",
            radius: ["65%", "85%"],
            center: ["30%", "50%"],
            data: chartData,
            label: {
              show: true,
              position: "center",
              color: "#fff",
              fontSize: 14,
              formatter: function (value) {
                return `总数:${t.data.total}\n\n整改率:${t.data.reformRate}%`;
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      if (option && typeof option === "object") {
        this.myChart.setOption(option);
      }
    },

    resetTimer() {
      this.timer && clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.isMouseOver) {
          return;
        }
        this.activeName = getNextPeriod(this.types, this.activeName);
        this.getData();
      }, this.refreshTime);
    },
  },
};
</script>
<style lang="less" scoped></style>