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

<!--  -->
<template>
  <div class="static_info report">
    <div ref="orgchart"></div>
    <div class="other">
      <div class="chart-template">
        <!-- <div class="line"></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";
import * as echarts from "echarts";
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 r = (await orgInfo(this.orgId)).data;
      this.org = r;

      this.initOrgMap();
    },

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

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

      // 基于准备好的dom，初始化echarts实例
      this.otherChart = 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)",
          },
        },
        color: ["#5470c6", "#91cc75", "#ee6666"],
        series: [
          {
            name: "来访",
            type: "pie",
            center: ["28%", "50%"],
            startAngle: 120,
            label: {
              // show:false,
              color: "#fff",
              formatter: (p) => {
                return `${p.name}\r\n(${p.value},${p.percent}%)`;
              },
            },
            labelLine: {
              // smooth:true
              length: 5,
              length2: 5,
            },
            data: [
              {
                name: "纸质",
                value: this.visit.paperCount,
              },
              {
                name: "紧急来访",
                value: this.visit.urgencyCount,
              },
              {
                name: "电子",
                value: this.visit.electronicCount,
              },
            ],
          },
          {
            name: "安保",
            type: "pie",
            center: ["72%", "50%"],
            label: {
              // show:false,
              color: "#fff",
              formatter: (p) => {
                return `${p.name}\r\n(${p.value},${p.percent}%)`;
              },
            },
            labelLine: {
              // smooth:true
              length: 5,
              length2: 5,
            },
            data: [
              {
                name: "未配备保安",
                value: this.orgSecurity.unequippedCount,
              },
              {
                name: "配备保安",
                value: this.orgSecurity.equippedCount,
              },
            ],
          },
        ],
      };
      if (option && typeof option === "object") {
        this.otherChart.setOption(option);
      }
    },
    initOrgMap() {
      this.orgChart && this.orgChart.dispose();
      let c = this.$refs["orgchart"];

      // 基于准备好的dom，初始化echarts实例
      this.orgChart = 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,
        // },
        color: ["#5470c6"],
        series: [
          {
            name: "行社",
            type: "pie",
            radius: ["38%", "45%"],
            center: ["25%", "25%"],
            label: {
              // show:false,
              position: "center",
              color: "#fff",
              formatter: (p) => {
                return `${p.value}\r\n\r\n${p.name}`;
              },
            },
            data: [
              {
                name: "行社",
                value: this.org.hangsheCount,
              },
            ],
          },
          {
            name: "营业网点",
            type: "pie",
            radius: ["38%", "45%"],
            center: ["75%", "25%"],
            label: {
              // show:false,
              position: "center",
              color: "#fff",
              formatter: (p) => {
                return `${p.value}\r\n\r\n${p.name}`;
              },
            },
            data: [
              {
                name: "营业网点",
                value: this.org.bankingCount,
              },
            ],
          },
          {
            name: "网点业务库",
            type: "pie",
            radius: ["38%", "45%"],
            center: ["25%", "75%"],
            label: {
              // show:false,
              position: "center",
              color: "#fff",
              formatter: (p) => {
                return `${p.value}\r\n\r\n${p.name}`;
              },
            },
            data: [
              {
                name: "网点业务库",
                value: this.org.bankingStoreCount,
              },
            ],
          },
          {
            name: "离行式自助银行",
            type: "pie",
            radius: ["38%", "45%"],
            center: ["75%", "75%"],
            label: {
              //  show:false,
              position: "center",
              color: "#fff",
              formatter: (p) => {
                return `${p.value}\r\n\r\n离行式\r\n自助银行`;
              },
            },
            data: [
              {
                name: "离行式自助银行",
                value: this.org.offlineCount,
              },
            ],
          },
        ],
      };
      if (option && typeof option === "object") {
        this.orgChart.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 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: row;
  margin: 5px;

  & > div {
    height: calc(100% - 10px);
  }
  & > div:first-child {
    width: 35%;
  }
  & > div:nth-child(2) {
    width: 65% !important;
  }
}

.other {
  background-image: url(@/assets/board/area_border.png);
  background-size: 100% 100%;
  // background-image: url(@/assets/board/area_title-bg.png);
  // background-position: 100%;
  // background-color: rgba(8, 8, 8);
}
</style>