soc_web/src/views/iot/dailycheck/report.vue

<!--  -->
<template>
  <div class="static_info report">

      <div class="chart-template">
        <div ref="otherchart"></div>
      </div>
  </div>
</template>
<script>
import "./board.scss";
import {
  orgInfo,
  currentMonthVisitInfo,
  orgSecurityInfo,
} from "@/api/board/cockpit.js";
import * as echarts from "echarts";
export default {
  props: {
    rateData: {
      type: Object,
      isRequired: true,
    },
  },
  data() {
    return {
      data: {
        org: [],
        visit: [],
        rateData: null,
      },
    };
  },
  components: {},
  computed: {},
  watch: {
    rateData: {
      deep: true,
      handler(val) {
        this.rateData=val;
        this.initOtherMap();
      },
    },
  },

  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.getData();
    // },
    handleMouseEnter() {
      this.isMouseOver = true;
    },
    handleMouseLeave() {
      this.isMouseOver = false;
    },

    initOtherMap() {
      this.otherChart && this.otherChart.dispose();
      let c = this.$refs["otherchart"];

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

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

          // formatter: "完成率：{c}%",
        },
        legend: {
          show: false,
          textStyle: {
            color: "rgb(245, 245, 245)",
          },
        },
        color: ["#5470c6", "#91cc75", "#ee6666"],
        series:
          {
            name: "自检",
            type: "pie",
            center: ["50%", "50%"],
            label: {
              // show:false,
              color: "#fff",
              formatter: (p) => {
                return `${p.name}\r\n(${p.value} ; ${p.percent==undefined?0:p.percent}%)`;
              },
            },
            labelLine: {
              // smooth:true
              length: 5,
              length2: 5,
            },
            data: [
              {
                name: "已检",
                value: this.rateData.doNums,
              },
              {
                name: "未检",
                value: this.rateData.unDoNums,
              },
            ],
          },

      };
      if (option && typeof option === "object") {
        this.otherChart.setOption(option);
      }
    },
    windowResize() {
      this.orgChart && this.orgChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
.report {
  background-image: linear-gradient(
      to right,
      rgba(27, 33, 57, 0.8) 0%,
      rgba(32, 49, 99, 0.6) 50%,
      rgba(27, 33, 57, 0.8) 100%
  );
  margin-top: 15px;
  width: calc(100% - 0px);
  margin-left: 1px;
  border-top: 3px ;
  border-image: linear-gradient(
      to right,
      rgba(27, 33, 57, 0.8) 20%,
      rgba(101, 219, 229, 1) 50%,
      rgba(27, 33, 57, 0.8) 80%
  )
  3;
}

.static_info {
  height: calc(100%);
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 5px;

  & > div {
    height: 100%;
    width: 100%;
  }
}

</style>