echarts添加显示隐藏按钮

zhangxiaoxu123

2022-09-14 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a

 src/pages/show/index/index.vue

@@ -35,14 +35,14 @@
            <h1>市值事业单位</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhi }}</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhiren }}</font>人</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.shizhiren }}</font>万人</h2>
            </div>
          </div>
          <div class="inside-left2">
            <h1>县（市、区）</h1>
            <div class="danwei-box">
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xian }}</font>家</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xianren }}</font>人</h2>
              <h2 class="rightMargin"><font class="bigger">{{ Institution.xianren }}</font>万人</h2>
            </div>
          </div>
        </div>
@@ -203,20 +203,20 @@
                    </div>
                    <template>
                      <div class="content">
                        <h1>{{ item.dataType | dataFilter }}</h1>
                        <h1 style="text-align: left">{{ item.dataType | dataFilter }}</h1>
                      </div>
                    </template>
                  </el-tooltip>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>{{ item.monthData }}</h1>
                    <h1 style="text-align: left">{{ item.monthData }}</h1>
                  </div>
                  <div class="title">
                    <h1>{{ item.yearData }}</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">{{ item.finishRate }}</h1>
                    <h1 class="fontColorBlue">{{ item.finishRate }}</h1>
                  </div>
                  <div class="title">
                    <h1>{{ item.plan }}</h1>
@@ -329,118 +329,118 @@
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
              <div class="shuju-table-line2 chengzhen_scroll" 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>
@@ -454,142 +454,7 @@
          <h1>失业保险</h1>
        </div>
        <div class="shuju-main-box">
          <div class="shuju-table">
            <div class="shuju-table-line">
              <div class="biao-title"></div>
              <div class="title-flex">
                <div class="title">
                  <h1>本月</h1>
                </div>
                <div class="title">
                  <h1>本年同期</h1>
                </div>
                <div class="title">
                  <h1>同比</h1>
                </div>
                <div class="title">
                  <h1>上月</h1>
                </div>
                <div class="title">
                  <h1>环比</h1>
                </div>
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>人数（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>

              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>收入（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>本月结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>累计结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <shiyeAndgongshangBaoxian typeString="4"></shiyeAndgongshangBaoxian>
          <div class="shuju-echarts" id="shiyeBaoxianEcharts"></div>
        </div>

@@ -599,141 +464,7 @@
          <h1>工伤保险</h1>
        </div>
        <div class="shuju-main-box">
          <div class="shuju-table">
            <div class="shuju-table-line">
              <div class="biao-title"></div>
              <div class="title-flex">
                <div class="title">
                  <h1>本月</h1>
                </div>
                <div class="title">
                  <h1>本年同比</h1>
                </div>
                <div class="title">
                  <h1>同比</h1>
                </div>
                <div class="title">
                  <h1>上月</h1>
                </div>
                <div class="title">
                  <h1>环比</h1>
                </div>
              </div>
            </div>
            <div class="shuju-scroll">
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>人数（万人）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>收入（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>支出（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>本月结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
              <div class="shuju-table-line2">
                <div class="biao-title">
                  <h1>累计结余（亿元）</h1>
                </div>
                <div class="title-flex">
                  <div class="title">
                    <h1>138957</h1>
                  </div>
                  <div class="title">
                    <h1>128417</h1>
                  </div>
                  <div class="title">
                    <h1 class="fontColor">111.2%</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                  <div class="title">
                    <h1>125000</h1>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <shiyeAndgongshangBaoxian typeString="5"></shiyeAndgongshangBaoxian>
          <div class="shuju-echarts" id="gongshangBaoxianEcharts"></div>
        </div>

@@ -744,6 +475,7 @@
<script>
    import echarts from "echarts/lib/echarts";
    import nowSize from "../../../libs/nowSize";
    import shiyeAndgongshangBaoxian from "../../components/index/shiyeAndgongshangBaoxian";
    import {
        getInsured,
        getInstitution,
@@ -752,11 +484,16 @@
        getLoan,
        getPersonnel,
        getLabourTable,
        getLabourChart
        getLabourChart,
        getInsuranceChart,
        getTownTable
    } from "@/api/index";

    export default {
        name: "index",
        components: {
            shiyeAndgongshangBaoxian
        },
        data() {
            return {
                // 被保险人
@@ -774,13 +511,42 @@
                // 24. 查询首页就业数据表格接口
                LabourTable: {},
                // 25.首页就业数据折线图
                addJob: [],
                reJob: [],
                hardJob: [],
                LabourChartYear: []
                JiuYeEchart: {
                    addJob: [],
                    reJob: [],
                    hardJob: [],
                    LabourChartYear: []
                },
                // 26. 查询首页养老、工伤、失业保险折线图接口
                // 城镇职工养老
                YangLaoEchart: {
                    years: [],
                    shouru: [],
                    zhichu: [],
                    jieyu: []
                },
                // 失业保险
                ShiYeEchart: {
                    years: [],
                    shouru: [],
                    zhichu: [],
                    jieyu: []
                },
                // 工伤
                GongShangEchart: {
                    years: [],
                    shouru: [],
                    zhichu: [],
                    jieyu: []
                },
                // 27. 查询首页城镇职工养老表格数据接口
                TownTable: [],
                // 28.失业保险
                type: '',
            }
        },
        mounted() {
            console.log(this.$store.state.user.token, 'state=======')
            this.jiuyeshujuEcharts()
            this.chengzhenZhigongYanglaoEcharts()
            this.shiyeBaoxianEcharts()
@@ -793,6 +559,10 @@
            this.getPersonnel()
            this.getLabourTable()
            this.getLabourChart()
            this.getInsuranceChart()
            this.getTownTable()
            // this.getshiyeTable()
            // this.getGongshangTable()
        },
        filters: {
            dataFilter(type) {
@@ -826,7 +596,6 @@
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['总数', '在职职工', '离退休'],
                        itemWidth: nowSize(24),
                        itemHeight: nowSize(4),
                        itemGap: nowSize(10),
@@ -847,7 +616,7 @@
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.LabourChartYear,
                        data: this.JiuYeEchart.LabourChartYear,
                        axisLabel: {
                            show: true,
                            textStyle: {
@@ -891,19 +660,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 +690,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 +710,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 +751,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 +782,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 +802,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 +843,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 +874,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 +894,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 +935,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
                        }
                    ]
                };
@@ -1249,15 +1015,56 @@
                })
            },
            // 25. 查询首页就业数据折线图接口
            getLabourChart() {
                getLabourChart().then(res => {
            async getLabourChart() {
                await 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
                    }
                })
            }
@@ -1297,9 +1104,9 @@
        position: relative;

        img {
          width: 0.3125rem /* 80/256 */
          width: 0.2890625rem  /* 74/256 */
        ;
          height: 0.3125rem /* 80/256 */
          height: 0.2890625rem  /* 74/256 */
        ;
        }

@@ -1308,6 +1115,8 @@
          text-align: center;
          font-size: $fontSize-24;
          line-height: 1.3;
          font-family: Source Han Sans CN, Source Han Sans CN-Light;
          font-weight: 300;
        }

        h2 {
@@ -1342,10 +1151,15 @@

          .inside-box-block {
            display: flex;
            width: 50%;
            justify-content: center;
            width: calc(50% - 30px);
            justify-content: left;
            align-items: center;

            &:nth-child(1){
              margin-left: 30px;
            }
            &:nth-child(3){
              margin-left: 30px;
            }
            .line-center {
              display: flex;
              flex-direction: column;
@@ -1473,6 +1287,8 @@
          font-size: $fontSize-20;
          color: $color-dark;
          text-align: center;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
        }
      }
    }
@@ -1504,6 +1320,8 @@
            font-size: $fontSize-32;
            color: $color-blue;
            position: relative;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;

            &:after {
              content: '';
@@ -1530,16 +1348,13 @@
          box-sizing: border-box;
          display: flex;

          .shuju-table {
            width: 3.1328125rem /* 802/256 */
          ;
            height: 1.2109375rem /* 310/256 */
          ;
          }
        }

        .shuju-table {
          width: 100%;
          width: 3.1328125rem /* 802/256 */
        ;
          height: 1.2109375rem /* 310/256 */
        ;
          display: flex;
          flex-direction: column;

@@ -1561,6 +1376,7 @@
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;

              h1 {
                font-size: $fontSize-26;
@@ -1591,6 +1407,7 @@
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;

              h1 {
                font-size: $fontSize-26;
@@ -1599,8 +1416,12 @@
                line-height: 1.5;
              }

              .fontColor {
              .fontColorBlue {
                color: $color-blue;
              }

              .fontColorRed {
                color: #FF3939;
              }
            }

@@ -1610,7 +1431,7 @@
            }

            .biao-title {
              width: 0.859375rem  /* 220/256 */
              width: 0.859375rem /* 220/256 */
            ;

              h1 {
@@ -1618,6 +1439,8 @@
                color: $color-white;
                text-align: right;
                line-height: 1.5;
                font-family: Source Han Sans CN, Source Han Sans CN-Light;
                font-weight: 300;
                @include ellipsis()
              }

@@ -1627,6 +1450,30 @@
            }
          }

          // 城市职工养老第2，3条数据
          .chengzhen_scroll {
            &:nth-of-type(2) {
              background: rgba(81, 210, 255, 0.10);

              h1 {
                font-size: 24px;
                line-height: 1;
                color: #999999;
              }
            }

            &:nth-of-type(3) {
              background: rgba(81, 210, 255, 0.10);

              h1 {
                font-size: 24px;
                line-height: 1;
                color: #999999;

              }
            }
          }

          .shuju-bj-color {
            background: rgba(81, 210, 255, 0.10);
          }