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

<!--  -->
<template>
  <div class="static_info">
    <div ref="orgchart"></div>
    <div class="chart-template static_info">
      <!-- <div class="line"></div> -->
      <div>
        <p>
          <span> 其它(本月) </span>
        </p>
        <div ref="otherchart"></div>
      </div>
    </div>
  </div>
</template>
<script>
import "./../../board.scss";
import {
  orgInfo,
  currentMonthVisitInfo,
  orgSecurityInfo,
} from "@/api/board/cockpit.js";
export default {
  props: {
    orgId: {
      type: String,
      isRequired: true,
    },
  },
  data() {
    return {
      data: {
        org: [],
        visit: [],
        orgSecurity: [],
      },
    };
  },
  components: {},
  computed: {},
  watch: {
    orgId: {
      deep: true,
      handler(val) {
        this.getOrgData();
        this.getOtherData();
      },
    },
  },

  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;
    },
    async getOrgData() {
      let columnCount = 4;
      let r = (await orgInfo(this.orgId)).data;
      let data = [];

      for (let i in r) {
        let columnIndex = i % columnCount;
        if (!data[columnIndex]) {
          data[columnIndex] = [];
        }

        let orgName = r[i].orgName;
        r[i].orgName = parseInt(i) + 1 + "." + orgName;
        r[i].reachRate = (r[i].reachRate * 100).toFixed(2) + "%";
        data[columnIndex].push(r[i]);
      }

      this.data = data;

      this.initOrgMap();
    },

    async getOtherData() {
      this.visit= (await currentMonthVisitInfo(this.orgId)).data
      this.orgSecurity=(await orgSecurityInfo(this.orgId)).data;

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

      // 基于准备好的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: {
          show: true,
          textStyle: {
            color: "rgb(245, 245, 245)",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          top: "20px",
          containLabel: true,
        },
        series: [         
        {
            name: "来访",
            type: "pie",
            center: ["33%", "50%"],
            data: [
              {
                name: "纸质",
                value: this.visit.paperCount,
              },
              {
                name: "紧急来访",
                value: this.visit.urgencyCount,
              },
              {
                name: "电子",
                value: this.visit.electronicCount,
              },
            ],
          },
          {
            name: "安保",
            type: "pie",
            center: ["66%", "50%"],
            data: [
              {
                name: "未配置保安",
                value: this.orgSecurity.unequippedCount,
              },
              {
                name: "配置保安",
                value: this.orgSecurity.equippedCount,
              }
            ],
          },
        ],
      };
      if (option && typeof option === "object") {
        this.myChart.setOption(option);
      }
    },
    initOrgMap() {
      this.myChart && this.myChart.dispose();
      let c = this.$refs["orgchart"];

      // 基于准备好的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: {
          show: false,
          textStyle: {
            color: "rgb(245, 245, 245)",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          top: "20px",
          containLabel: true,
        },
        series: [
          {
            name: "行社",
            type: "pie",
            radius: ["70%", "110%"],
            center: ["33%", "33%"],
            data: [
              {
                name: "行社",
                value: this.org.hangsheCount,
              },
            ],
          },
          {
            name: "营业网点",
            type: "pie",
            radius: ["70%", "110%"],
            center: ["66%", "33%"],
            data: [
              {
                name: "营业网点",
                value: this.org.bankingCount,
              },
            ],
          },
          {
            name: "网点业务库",
            type: "pie",
            radius: ["70%", "110%"],
            center: ["66%", "33%"],
            data: [
              {
                name: "网点业务库",
                value: this.org.offlineCount,
              },
            ],
          },
          {
            name: "离行式自助银行",
            type: "pie",
            radius: ["70%", "110%"],
            center: ["66%", "66%"],
            data: [
              {
                name: "离行式自助银行",
                value: this.org.bankingStoreCount,
              },
            ],
          },
        ],
      };
      if (option && typeof option === "object") {
        this.myChart.setOption(option);
      }
    },
    windowResize() {
      this.myChart && this.myChart.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 solid;
  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: column;
  margin: 5px;

  & > div:first {
    width: 40%;
  }
  & > div:first {
    width: 60%;
  }
}
</style>