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

<template>
  <div>
    <div class="visualizing">
      <div class="visualizing-item">
        <div>
          <data-title title="失业人员失业原因统计" />
        </div>
        <div id="syryChart1" style="height: 380px"></div>
      </div>
      <div class="visualizing-item">
        <div>
          <data-title title="失业人员就业愿望统计" />
        </div>
        <div id="syryChart2" style="height: 380px"></div>
      </div>
      <div class="visualizing-item">
        <div>
          <data-title title="失业人员年龄统计" />
        </div>
        <div id="syryChart3" style="height: 380px"></div>
      </div>
    </div>
    <div class="visualizing dibaorenyuan">
      <div class="visualizing-item">
        <div>
          <data-title title="技能找人统计" />
        </div>
        <div id="syryChart4" style="height: 380px"></div>
      </div>
      <div class="visualizing-item">
        <div>
          <data-title title="岗位找人统计" />
        </div>
        <div id="syryChart5" style="height: 380px"></div>
      </div>
      <div class="visualizing-item">
        <div>
          <data-title title="失业人员享受服务情况统计" />
        </div>
        <div id="resiServiceChart" 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, series, title} from "@/views/dataBoard/renfang/visualizing/components/pie_config";

function dataFormatter(arr) {
  return arr.map((item) => {
    return {
      name: item.classification,
      value: Number(item.classificationNum),
    };
  });
}
export default {
  name: "shiyerenyuan",
  props: {
    title: {
      type: String,
      default: "",
    },
    org_id: {
      type: String,
      default: "",
    },
  },
  components: {
    dataTitle,
  },
  data() {
    return {
      syryData1: [],
      syryData2: [],
      syryData3: [],
      syryData4: [],
      syryData5: [],
      resiService: [],
    };
  },
  created() {
    const query = this.$route.query;
    this.getData();
  },
  methods: {
    getData() {
      const { user } = this.$store.state

      var level = user.level;
      if(level!="grid"){
        level = "agency"
      }

      this.$http
        .get("/actual/base/peopleRoomOverview/unemployedPie?type=0")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.syryData1 = dataFormatter(res.data);
          this.syryDataCharts1();
        })
        .catch(() => {});
      this.$http
        .get("/actual/base/peopleRoomOverview/unemployedPie?type=1")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.syryData2 = dataFormatter(res.data);
          this.syryDataCharts2();
        })
        .catch(() => {});
      this.$http
        .get("/actual/base/peopleRoomOverview/unemployedPie?type=2")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.syryData3 = dataFormatter(res.data);
          this.syryDataCharts3();
        })
        .catch(() => {});
      this.$http
        .get("/actual/base/peopleRoomOverview/unemployedPie?type=3")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.syryData4 = dataFormatter(res.data);
          this.syryDataCharts4();
        })
        .catch(() => {});
      this.$http
        .get("/actual/base/peopleRoomOverview/unemployedPie?type=4")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.syryData5 = dataFormatter(res.data);
          this.syryDataCharts5();
        })
        .catch(() => {});

        this.$http
        .post(`/actual/base/peopleRoomOverview/findPeoplePie`,{  agencyId:user.agencyId,level:level,category:'UNEMPLOYED_FLAG'})
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.resiService = dataFormatter(res.data);
          this.initResiServiceCharts();
        })
        .catch(() => {});
    },
    syryDataCharts1() {
      let div = document.getElementById("syryChart1");
      this.myChart1 = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.syryData1),
            title: title(this.syryData1),
            series: series(this.syryData1)
      };
      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: "shiye",
            unemploymentReason: e.name,
          },
        });
      });
      window.addEventListener("resize", () => this.myChart1.resize());
    },
    syryDataCharts2() {
      let div = document.getElementById("syryChart2");
      this.myChart2 = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.syryData2),
            title: title(this.syryData2),
            series: series(this.syryData2)
      };
      this.myChart2.setOption(option);
      this.myChart2.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: "shiye",
            employmentWish: e.name,
          },
        });
      });
      window.addEventListener("resize", () => this.myChart2.resize());
    },
    syryDataCharts3() {
      let div = document.getElementById("syryChart3");
      this.myChart3 = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.syryData3),
            title: title(this.syryData3),
            series: series(this.syryData3)
      };
      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: "shiye",
            olds: e.name,
          },
        });
      });
      window.addEventListener("resize", () => this.myChart3.resize());
    },
    syryDataCharts4() {
      let div = document.getElementById("syryChart4");
      this.myChart4 = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.syryData4),
            title: title(this.syryData4),
            series: series(this.syryData4)
      };
      this.myChart4.setOption(option);
      this.myChart4.on("click", (e) => {
        this.$router.push({
          path: "/dataBoard/renfang/resi-class-new",
          query: {
            org_id: this.org_id,
            type_id: "aged",
            type_name: "技能找人",
            pageType: "normal1",
            type: "jineng",
          },
        });
      });
      window.addEventListener("resize", () => this.myChart4.resize());
    },
    syryDataCharts5() {
      let div = document.getElementById("syryChart5");
      this.myChart5 = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.syryData5),
            title: title(this.syryData5),
            series: series(this.syryData5)
      };
      this.myChart5.setOption(option);
      this.myChart5.on("click", (e) => {
        this.$router.push({
          path: "/dataBoard/renfang/resi-class-new",
          query: {
            org_id: this.org_id,
            type_id: "aged",
            type_name: "岗位找人",
            pageType: "normal1",
            type: "gangwei",
          },
        });
      });
      window.addEventListener("resize", () => this.myChart5.resize());
    },
    initResiServiceCharts() {
      let div = document.getElementById("resiServiceChart");
      this.resiChart = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.resiService),
            title: title(this.resiService),
            series: series(this.resiService)
      };
      this.resiChart.setOption(option);
      this.resiChart.on("click", (e) => {
        console.log(e)
        this.$router.push({
          path: "/dataBoard/renfang/resi-class-new",
          query: {
            org_id: this.org_id,
            type_id: "aged",
            type_name: "失业人员",
            pageType: "normal",
            type: "shiye",
            serv_type: e.data.name,
          },
        });
      });
      window.addEventListener("resize", () => this.resiChart.resize());
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/dataBoard/renfang/index.scss"
  scoped
></style>

<style lang="scss" scoped>
.dibaorenyuan {
  padding: 0px 130px;
}
#syryChart3 {
  .echarts-legend {
    white-space: normal;
  }
}

:v-deep #syryChart3 {
  .echarts-legend span {
    padding: 5px 0;
    display: block;
  }
}
</style>