首页数据

付延余

2022-04-26 09f41d210c0d38bb9058f1de7605e6a8d445bd21

首页数据

 src/api/index.js

@@ -42,3 +42,11 @@
export const getLabourChart = (params) => {
  return postRequest('/ybg/webservice/app/homepage/getLabourChart.do', params)
}
// 26. 查询首页养老、工伤、失业保险折线图接口
export const getInsuranceChart = (params) =>{
  return postRequest('/ybg/webservice/app/homepage/getInsuranceChart.do',params)
}
// 27. 查询首页城镇职工养老表格数据接口
export const getTownTable = (params) =>{
  return postRequest('/ybg/webservice/app/homepage/getTownTable.do',params)
}

 src/pages/show/index/index.vue

@@ -329,118 +329,118 @@
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
              <div class="shuju-table-line2" v-for="(item,index) in TownTable" :key="index">
                <div class="biao-title">
                  <h1>人数（万人）</h1>
                  <h1>{{ item.name }}</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>277.8</h1>
                    <h1>{{ item.total }}</h1>
                  </div>
                  <div class="title">
                    <h1>35.5</h1>
                    <h1>{{ item.office }}</h1>
                  </div>
                  <div class="title">
                    <h1>242.3</h1>
                    <h1>{{ item.enterprise }}</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2 shuju-bj-color">
                <div class="biao-title">
                  <h1>在职（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>217.8</h1>
                  </div>
                  <div class="title">
                    <h1>13.5</h1>
                  </div>
                  <div class="title">
                    <h1>142.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>离退休（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>23.8</h1>
                  </div>
                  <div class="title">
                    <h1>16.5</h1>
                  </div>
                  <div class="title">
                    <h1>52.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>供养比</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>3.8</h1>
                  </div>
                  <div class="title">
                    <h1>2.5</h1>
                  </div>
                  <div class="title">
                    <h1>1.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>收入（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>233.8</h1>
                  </div>
                  <div class="title">
                    <h1>24.5</h1>
                  </div>
                  <div class="title">
                    <h1>341.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>533.8</h1>
                  </div>
                  <div class="title">
                    <h1>84.5</h1>
                  </div>
                  <div class="title">
                    <h1>541.3</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>33.8</h1>
                  </div>
                  <div class="title">
                    <h1>34.5</h1>
                  </div>
                  <div class="title">
                    <h1>341.3</h1>
                  </div>
                </div>
              </div>
<!--              <div class="shuju-table-line2 shuju-bj-color">-->
<!--                <div class="biao-title">-->
<!--                  <h1>在职（万人）</h1>-->
<!--                </div>-->
<!--                <div class="title-flex">-->
<!--                  <div class="title">-->
<!--                    <h1>217.8</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>13.5</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>142.3</h1>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="shuju-table-line2">-->
<!--                <div class="biao-title">-->
<!--                  <h1>离退休（万人）</h1>-->
<!--                </div>-->
<!--                <div class="title-flex">-->
<!--                  <div class="title">-->
<!--                    <h1>23.8</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>16.5</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>52.3</h1>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="shuju-table-line2">-->
<!--                <div class="biao-title">-->
<!--                  <h1>供养比</h1>-->
<!--                </div>-->
<!--                <div class="title-flex">-->
<!--                  <div class="title">-->
<!--                    <h1>3.8</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>2.5</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>1.3</h1>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="shuju-table-line2">-->
<!--                <div class="biao-title">-->
<!--                  <h1>收入（亿元）</h1>-->
<!--                </div>-->
<!--                <div class="title-flex">-->
<!--                  <div class="title">-->
<!--                    <h1>233.8</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>24.5</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>341.3</h1>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="shuju-table-line2">-->
<!--                <div class="biao-title">-->
<!--                  <h1>支出（亿元）</h1>-->
<!--                </div>-->
<!--                <div class="title-flex">-->
<!--                  <div class="title">-->
<!--                    <h1>533.8</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>84.5</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>541.3</h1>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="shuju-table-line2">-->
<!--                <div class="biao-title">-->
<!--                  <h1>结余（亿元）</h1>-->
<!--                </div>-->
<!--                <div class="title-flex">-->
<!--                  <div class="title">-->
<!--                    <h1>33.8</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>34.5</h1>-->
<!--                  </div>-->
<!--                  <div class="title">-->
<!--                    <h1>341.3</h1>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
            </div>
          </div>
          <div class="shuju-echarts" id="chengzhenZhigongYanglaoEcharts"></div>
@@ -752,7 +752,9 @@
        getLoan,
        getPersonnel,
        getLabourTable,
        getLabourChart
  getLabourChart,
  getInsuranceChart,
  getTownTable
    } from "@/api/index";

    export default {
@@ -774,10 +776,36 @@
                // 24. 查询首页就业数据表格接口
                LabourTable: {},
                // 25.首页就业数据折线图
      JiuYeEchart: {
                addJob: [],
                reJob: [],
                hardJob: [],
                LabourChartYear: []
      },
      // 26. 查询首页养老、工伤、失业保险折线图接口
      // 城镇职工养老
      YangLaoEchart: {
        years: [],
        shouru: [],
        zhichu: [],
        jieyu: []
      },
      // 失业保险
      ShiYeEchart: {
        years: [],
        shouru: [],
        zhichu: [],
        jieyu: []
      },
      // 工伤
      GongShangEchart: {
        years: [],
        shouru: [],
        zhichu: [],
        jieyu: []
      },
      // 27. 查询首页城镇职工养老表格数据接口
      TownTable:[]
            }
        },
        mounted() {
@@ -793,6 +821,8 @@
            this.getPersonnel()
            this.getLabourTable()
            this.getLabourChart()
    this.getInsuranceChart(),
      this.getTownTable()
        },
        filters: {
            dataFilter(type) {
@@ -826,7 +856,6 @@
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['总数', '在职职工', '离退休'],
                        itemWidth: nowSize(24),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(10),
@@ -847,7 +876,7 @@
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.LabourChartYear,
          data: this.JiuYeEchart.LabourChartYear,
                        axisLabel: {
                            show: true,
                            textStyle: {
@@ -891,19 +920,19 @@
                        }
                    },
                    series: [{
                        name: '总数',
          name: '城镇新增就业',
                        type: 'line',
                        data: this.addJob
          data: this.JiuYeEchart.addJob
                    },
                        {
                            name: '在职职工',
            name: '失业再就业',
                            type: 'line',
                            data: this.reJob
            data: this.JiuYeEchart.reJob
                        },
                        {
                            name: '离退休',
            name: '困难再就业',
                            type: 'line',
                            data: this.hardJob
            data: this.JiuYeEchart.hardJob
                        }]
                };
                myEchart.setOption(option)
@@ -921,11 +950,10 @@
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['总数', '在职职工', '离退休'],
                        itemWidth: nowSize(24),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(10),
                        right: '0%',
          right: '10%',
                        top: '0%',
                        textStyle: {
                            color: '#FFFFFF',
@@ -942,7 +970,7 @@
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          data: this.YangLaoEchart.years,
                        axisLabel: {
                            show: true,
                            textStyle: {
@@ -983,19 +1011,19 @@
                    },
                    series: [
                        {
                            name: '总数',
            name: '收入',
                            type: 'line',
                            data: [370, 332, 401, 534, 490, 530, 910]
            data: this.YangLaoEchart.shouru
                        },
                        {
                            name: '在职职工',
            name: '支出',
                            type: 'line',
                            data: [220, 182, 191, 234, 290, 330, 310]
            data: this.YangLaoEchart.zhichu
                        },
                        {
                            name: '离退休',
            name: '结余',
                            type: 'line',
                            data: [150, 132, 201, 154, 190, 330, 410]
            data: this.YangLaoEchart.jieyu
                        }
                    ]
                };
@@ -1014,11 +1042,10 @@
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['总数', '在职职工', '离退休'],
                        itemWidth: nowSize(24),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(1),
                        right: '0%',
          right: '10%',
                        top: '0%',
                        textStyle: {
                            color: '#FFFFFF',
@@ -1035,7 +1062,7 @@
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          data: this.ShiYeEchart.years,
                        axisLabel: {
                            show: true,
                            textStyle: {
@@ -1076,19 +1103,19 @@
                    },
                    series: [
                        {
                            name: '总数',
            name: '收入',
                            type: 'line',
                            data: [370, 332, 401, 534, 490, 530, 910]
            data: this.ShiYeEchart.shouru
                        },
                        {
                            name: '在职职工',
            name: '支出',
                            type: 'line',
                            data: [220, 182, 191, 234, 290, 330, 310]
            data: this.ShiYeEchart.zhichu
                        },
                        {
                            name: '离退休',
            name: '结余',
                            type: 'line',
                            data: [150, 132, 201, 154, 190, 330, 410]
            data: this.ShiYeEchart.jieyu
                        }
                    ]
                };
@@ -1107,11 +1134,10 @@
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['总数', '在职职工', '离退休'],
                        itemWidth: nowSize(24),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(10),
                        right: '0%',
          right: '10%',
                        top: '0%',
                        textStyle: {
                            color: '#FFFFFF',
@@ -1128,7 +1154,7 @@
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'],
          data: this.GongShangEchart.years,
                        axisLabel: {
                            show: true,
                            textStyle: {
@@ -1169,19 +1195,19 @@
                    },
                    series: [
                        {
                            name: '总数',
            name: '收入',
                            type: 'line',
                            data: [370, 332, 401, 534, 490, 530, 910]
            data: this.GongShangEchart.shouru
                        },
                        {
                            name: '在职职工',
            name: '支出',
                            type: 'line',
                            data: [220, 182, 191, 234, 290, 330, 310]
            data: this.GongShangEchart.zhichu
                        },
                        {
                            name: '离退休',
            name: '结余',
                            type: 'line',
                            data: [150, 132, 201, 154, 190, 330, 410]
            data: this.GongShangEchart.jieyu
                        }
                    ]
                };
@@ -1251,13 +1277,54 @@
            // 25. 查询首页就业数据折线图接口
            getLabourChart() {
                getLabourChart().then(res => {
        if (res.code === 1000) {
          this.JiuYeEchart.LabourChartYear = res.obj.years;
          this.JiuYeEchart.addJob = res.obj.addJob;
          this.JiuYeEchart.reJob = res.obj.hardJob;
          this.JiuYeEchart.hardJob = res.obj.reJob;
          this.jiuyeshujuEcharts()
        }
      })
    },
    // 26. 查询首页养老、工伤、失业保险折线图接口
    async getInsuranceChart() {
      // 城镇职工养老
      await getInsuranceChart({type: 1}).then(res => {
        if (res.code === 1000) {
          this.YangLaoEchart.shouru = res.obj.shouru
          this.YangLaoEchart.zhichu = res.obj.zhichu
          this.YangLaoEchart.jieyu = res.obj.jieyu
          this.YangLaoEchart.years = res.obj.years
          this.chengzhenZhigongYanglaoEcharts()
        }
      })
      // 失业保险
      await getInsuranceChart({type: 5}).then(res => {
        if (res.code === 1000) {
          this.ShiYeEchart.shouru = res.obj.shouru
          this.ShiYeEchart.zhichu = res.obj.zhichu
          this.ShiYeEchart.jieyu = res.obj.jieyu
          this.ShiYeEchart.years = res.obj.years
          this.shiyeBaoxianEcharts()
        }
      })
      // 工伤保险
      await getInsuranceChart({type: 6}).then(res => {
        if (res.code === 1000) {
          this.GongShangEchart.shouru = res.obj.shouru
          this.GongShangEchart.zhichu = res.obj.zhichu
          this.GongShangEchart.jieyu = res.obj.jieyu
          this.GongShangEchart.years = res.obj.years
          this.gongshangBaoxianEcharts()
        }
      })
    },
    // 27. 查询首页城镇职工养老表格数据接口
    getTownTable() {
      getTownTable().then(res => {
                    console.log(res);
                    if (res.code === 1000) {
                        this.LabourChartYear = res.obj.years;
                        this.addJob = res.obj.addJob;
                        this.reJob = res.obj.hardJob;
                        this.hardJob = res.obj.reJob;
                        this.jiuyeshujuEcharts()
          this.TownTable = res.list
                    }
                })
            }