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: {
      type: String,
      isRequired: true,
    },
  },
  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.dissent,
        },
        {
          name: "已关闭",
          value: this.data.closed,
        },
        {
          name: "待整改",
          value: this.data.unreform,
        },
        {
          name: "已整改",
          value: this.data.reformed,
        },
        {
          name: "已逾期",
          value: this.data.overdue,
        },
        {
          value: this.sum(
            this.data.unconfirm,
            this.data.dissent,
            this.data.closed,
            this.data.unreform,
            this.data.reformed,
            this.data.overdue
          ),
          itemStyle: {
            color: "none",
            decal: {
              symbol: "none",
            },
            label: {
              show: false,
            },
          },
        },
      ];

      let t = this;
      // 指定图表的配置项和数据
      var option = {
        // title: {
        //   left: "center",
        // },
        tooltip: {
          trigger: "item",
          show: false,
          // formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        title: {
          text: `总数： ${this.data.total}`,
          subtext: `整改率： ${Math.round(this.data.reformed * 100)}%`,
          left: "center",
          top: "50%",
          textStyle: {
            fontSize: 16,
            color: "#fff",
            fontWeight: 200,
            // fontFamily:'SYNormal, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif',
            align: "center",
          },
          subtextStyle: {
            fontSize: 16,
            color: "#fff",
            fontWeight: 200,
            // fontFamily:'SYNormal, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif',
            align: "center",
          },
        },

        legend: {
          show: false,
          selectedMode: false,
          // 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 ? (d.value * 100).toFixed(2) + "%" : "-")
          //   );
          // },
          // textStyle: {
          //   color: "white",
          // },
        },
        series: [
          {
            name: "问题整改",
            type: "pie",
            radius: ["70%", "110%"],
            center: ["50%", "75%"],
            startAngle: 180,
            data: chartData,
            label: {
              show: true,
              //  position: "center",
              color: "#8e949c",
              fontSize: 12,
              formatter: function (param) {
                if (param.name) {
                  return `${param.name}(${Math.round(param.value * 100)}%)`;
                } else {
                  return "";
                }
              },
            },
            // 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);
    },
    sum(...values) {
      let t = 0;
      values.forEach((v) => {
        if (v) {
          t = t + parseFloat(v);
        }
      });
      return t;
    },
  },
};
</script>
<style lang="less" scoped></style>