soc_web/src/views/board/charts/safetycheck/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 style="position: relative">
      <div ref="chart" style="height: 100%"></div>
      <div
        style="
          position: absolute;
          right: 0px;
          top: 35px;
          height: calc(100% - 50px);
        "
      >
        <div v-for="item in this.data" :key="item.type" class="checkType-item">
          <span>{{ item.type }}</span>
          <span>{{ item.total }}</span>
          <span>{{ item.completed }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "./../../board.scss";
import * as echarts from "echarts";
import { safetyCheck } from "@/api/board/cockpit.js";
import {
  findMaxIndex,
  getChartDOMSize,
  getNextPeriod,
  getPeriodText,
} from "../../utils.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: [],
      },
      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 r = (
        await safetyCheck({ orgId: this.orgId, period: this.activeName })
      ).data;

      this.data = r;

      // console.info(this.data);
    },

    windowResize() {
      this.myChart && this.myChart.resize();
    },
    initMap() {
      this.myChart && this.myChart.dispose();
      let c = this.$refs["chart"];

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

      let t = this;
      // 指定图表的配置项和数据
      var option = {
        //  color: ["#82D5AE"],
        // tooltip: {
        //   trigger: "axis",
        //   confine: true,
        //   axisPointer: {
        //     type: "shadow",
        //   },

        //   formatter: "完成率：{c}%",
        // },
        legend: {
          // true: true,
          textStyle: {
            color: "rgb(245, 245, 245)",
          },
          type: "scroll",
          right: 5,
        },
        color:['#5470c6','#91cc75','#ee6666'],
        grid: {
          // left: "3%",
          // right: "4%",
          bottom: "0",
          top: "0",
          // containLabel: true,
        },

        radar: {
          indicator: this.data.map((d) => ({ name: d.type })),
          center: ["28%", "51%"],
          radius: 60,
          splitNumber:4,
          axisName: {
            color: "#fff",
          },
          axisLine:{
            lineStyle:{
              color:'rgb(230,230,230)'
            }
          },
          splitLine:{
            lineStyle:{
              color:'rgb(230,230,230)'
            }
          }
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: this.data.map((d) => d.total),
                name: "应检查",
              },
              {
                value: this.data.map((d) => d.completed),
                name: "已检查",
              },
            ],
          },
        ],
      };
      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="scss" scoped>
.checkType-item {
  font-size: 12px;
  // line-height: 22px;
  height: 20%;
  max-height: 30px;
  & > span {
    display: inline-block;
    width: 40px;
  }
  & > span:first-child {
    width: 80px;
  }
}
</style>