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

<!--  -->
<template>
  <div
    class="chart-template"
  >
    <p>机构统计</p>    
    <div>
      <div class="content">       
        <span> 行社 56 </span>
        <span> 营业网点 2968 </span>
        <span> 离行 1202 </span>
        <span> 监控中心 100 </span>
      </div>
      <div class="content">
        <span> 达标数 3000 </span>
        <span> GA38-2021 2000  </span>
        <span> GA38-2015 1000 </span>
      </div>
      <div class="content">
        <span> 业务库 2101 </span>
        <span> 一类库 300 </span>
        <span> 二类库 457 </span>
        <span> 三类库 400 </span>
        <span> 四类库 557 </span>
      </div>
      <div class="content">
        <span> 自助银行 4000 </span>
        <span> 离行式自助银行  2100 </span>
        <span> 在行式自助银行 1900 </span>
      </div>
      
    </div>
    <!-- <div id="commAlarmEvent_Chart"></div> -->
  </div>
</template>
<script>
import "./../../board.scss";
import * as echarts from "echarts";
import {
  findMaxIndex,
  getChartDOMSize,
  getNextPeriod,
  getPeriodText,
} from "../../utils.js";
const types = [
  {
    text: "今天",
    value: "0",
  },
  {
    text: "近7天",
    value: "1",
  },
  {
    text: "近30天",
    value: "2",
  },
  {
    text: "近90天",
    value: "3",
  },
  {
    text: "本年",
    value: "4",
  },
];
export default {
  props: ["orgId"],
  data() {
    return {
      data: {
        safetyCheck: {},
        edu: {},
        drill: {},
        monitor: {},
        visit: {},
      },
      activeName: types[0].value,
    };
  },

  components: {},

  computed: {},

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

  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 = {
        safetyCheck: {
          all: 18 * bs,
          completed: 16 * bs,
        },
        edu: { all: 2 * bs, completed: 1 * bs },
        drill: { all: 3 * bs, completed: 2 * bs },
        monitor: { all: 66 * bs, completed: 65 * bs },
        visit: {
          times: 5 * bs,
          personCount: 6 * bs,
          accompanyCount: 2 * bs,
        },
      };
    },

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

    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" scope>
.content {
  display: flex;

  margin-bottom: 20px;
  margin-left: 5px;
  margin-right: 5px;
  border: solid 1px #b8bdc088;

  & > span {
    margin-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 30px;
    color: rgb(245, 245, 245);
    font-size: 14px;
  }

  & > span:first-child {
    width: 100px;
    background-color: #b8bdc088;
    text-align: center;
  }
}


</style>