epmet-work-pc-chengyang/src/views/dataBoard/renfang/visualizing/components/laonianren.vue

<template>
  <div>
    <div class="visualizing laonianren">
      <div class="visualizing-item">
        <div>
          <data-title title="老年人年龄统计" />
        </div>
        <div id="lnrLeftChart" style="height: 400px"></div>
      </div>
      <div class="visualizing-item">
        <div>
          <data-title title="老年人居住情况统计" />
        </div>
        <div id="lnrRightChart" style="height: 400px"></div>
      </div>
      <div class="visualizing-item">
        <div>
          <data-title title="老年人享受服务情况统计" />
        </div>
        <div id="lnrServiceChart" style="height: 400px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
import * as echarts from "echarts";
import {color, legend,title,series} from './pie_config.js'
import {  requestPost } from '@/js/dai/request';

function dataFormatter(arr) {
  return arr.map((item) => {
    return {
      name: item.classification,
      value: Number(item.classificationNum),
    };
  });
}
export default {
  name: "laonianren",
  props: {
    title: {
      type: String,
      default: "",
    },
    org_id: {
      type: String,
      default: "",
    },
  },
  components: {
    dataTitle,
  },
  data() {
    return {
      lnrLeft: [],
      lnrRight: [],
      lnrService: [],
    };
  },
  created() {
    const query = this.$route.query;
    this.getData();
  },
  activated() {},
  methods: {
    getData() {
      const { user } = this.$store.state
      console.log(user);
      this.$http
        .get("/actual/base/peopleRoomOverview/oldPeopleAgePie")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.lnrLeft = dataFormatter(res.data);
          this.initLeftCharts();
        })
        .catch(() => {});
      this.$http
        .get("/actual/base/peopleRoomOverview/oldPeopleResidePie")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.lnrRight = dataFormatter(res.data);
          this.initRightCharts();
        })
        .catch(() => {});
        this.$http
        .post(`/actual/base/peopleRoomOverview/findPeoplePie`,{  agencyId:user.agencyId,level:user.level,category:'OLD_PEOPLE_FLAG'})
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          console.log(res.data,'kankan');
          this.lnrService = dataFormatter(res.data);
          this.initLnrServiceCharts();
        })
        .catch(() => {});
        let url = '/actual/base/peopleRoomOverview/findPeoplePie'
        let params = {
          agencyId:user.agencyId,
          level:user.level,
          category:'OLD_PEOPLE_FLAG'
        }
    },
    initLeftCharts() {
      let div = document.getElementById("lnrLeftChart");
      this.myChart1 = echarts.init(div);
      const option = {
        tooltip: {
          trigger: "item",
        },
        color,
        legend: legend(this.lnrLeft),
        title: title(this.lnrLeft),
        series: series(this.lnrLeft)
      };
      this.myChart1.setOption(option);

      this.myChart1.on("click", (e) => {
        this.$router.push({
          path: "/dataBoard/renfang/resi-class-new",
          query: {
            org_id: this.org_id,
            type_id: "aged",
            type_name: "老年人",
            pageType: "normal",
            type: "old",
            olds: e.data.name,
          },
        });
      });
      window.addEventListener("resize", () => this.myChart1.resize());
    },
    initRightCharts() {
      let div = document.getElementById("lnrRightChart");
      this.myChart2 = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.lnrRight),
            title: title(this.lnrRight),
            series: series(this.lnrRight)
      };
      this.myChart2.on("click", (e) => {
        console.log('a, b::', e);
        this.$router.push({
          path: "/dataBoard/renfang/resi-class-new",
          query: {
            org_id: this.org_id,
            type_id: "aged",
            type_name: "老年人",
            pageType: "normal",
            type: "old",
            qingk: e.data.name,
          },
        });
      });
      this.myChart2.setOption(option);
      window.addEventListener("resize", () => this.myChart2.resize());
    },
    initLnrServiceCharts() {
      let div = document.getElementById("lnrServiceChart");
      this.myChart3 = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.lnrService),
            title: title(this.lnrService),
            series: series(this.lnrService)
      };
      this.myChart3.setOption(option);
      this.myChart3.on("click", (e) => {
        this.$router.push({
          path: "/dataBoard/renfang/resi-class-new",
          query: {
            org_id: this.org_id,
            type_id: "aged",
            type_name: "老年人",
            pageType: "normal",
            type: "old",
            serv_type: e.data.name,
          },
        });
      });
      window.addEventListener("resize", () => this.myChart3.resize());
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/dataBoard/renfang/index.scss"
  scoped
></style>
<style lang="scss" scoped>
.laonianren {
  padding: 140px 130px;
}
</style>