From 388c2eeb0522a3dc928cffc5059e9f7da4c84ecb Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123456 <zxx19900626> Date: 星期二, 26 四月 2022 16:43:34 +0800 Subject: [PATCH] 工伤、失业保险接口 --- src/pages/show/index/index.vue | 1037 +++++++++++++++++++++++++++------------------------------ 1 files changed, 491 insertions(+), 546 deletions(-) diff --git a/src/pages/show/index/index.vue b/src/pages/show/index/index.vue index 0f7d2a0..5a89103 100644 --- a/src/pages/show/index/index.vue +++ b/src/pages/show/index/index.vue @@ -4,17 +4,17 @@ <div class="yanglao-block"> <img src="../../../assets/images/yanglao-icon1.png" alt=""> <h1>鍩庨晣鑱屽伐鍏昏�佷繚闄╁弬淇濅汉鏁�</h1> - <h2><font class="bigger">{{Insured.card}}</font>涓囦汉</h2> + <h2><font class="bigger">{{ Insured.zhigong }}</font>涓囦汉</h2> </div> <div class="yanglao-block"> <img src="../../../assets/images/yanglao-icon2.png" alt=""> - <h1>鍩庨晣鑱屽伐鍏昏�佷繚闄╁弬淇濅汉鏁�</h1> - <h2><font class="bigger">{{Insured.jumin}}</font>涓囦汉</h2> + <h1>鍩庝埂灞呮皯鍏昏�佷繚闄╁弬淇濅汉鏁�</h1> + <h2><font class="bigger">{{ Insured.jumin }}</font>涓囦汉</h2> </div> <div class="yanglao-block"> <img src="../../../assets/images/yanglao-icon3.png" alt=""> - <h1>鍩庨晣鑱屽伐鍏昏�佷繚闄╁弬淇濅汉鏁�</h1> - <h2><font class="bigger">{{Insured.zhigong}}</font>涓囦汉</h2> + <h1>绀句細淇濋殰鍗℃寔鍗′汉鏁�</h1> + <h2><font class="bigger">{{ Insured.card }}</font>涓囦汉</h2> </div> <div class="yanglao-block"> <div class="yanglao-block-inside"> @@ -53,12 +53,12 @@ <div class="yaolao-box"> <img src="../../../assets/images/yanglao-icon5.png" alt=""> <h1>鍩庨晣灞呮皯浜哄潎鍙敮閰�</h1> - <h2><font class="bigger">27721</font>鍏�</h2> + <h2><font class="bigger">{{ Income.chengzhen }}</font>鍏�</h2> </div> <div class="yaolao-box"> <img src="../../../assets/images/yanglao-icon6.png" alt=""> <h1>鍐滄潙灞呮皯浜哄潎鍙敮閰�</h1> - <h2><font class="bigger">18676</font>鍏�</h2> + <h2><font class="bigger">{{ Income.nongcun }}</font>鍏�</h2> </div> <div class="fu-biaoti"> <h1>灞呮皯鏀跺叆</h1> @@ -70,27 +70,27 @@ <img src="../../../assets/images/yanglao-icon7.png" alt=""> <div> <h1>娆犺柂绾跨储鎬昏</h1> - <h2><font class="bigger">32505</font>鏉�</h2> + <h2><font class="bigger">{{ Migrant.zongji }}</font>鏉�</h2> </div> </div> <div class="inside-right"> <h1>鍔炵粨鐜�</h1> - <h2><font class="bigger">96.8</font>%</h2> + <h2><font class="bigger">{{ Migrant.zbanjie }}</font>%</h2> </div> </div> <div class="yanglao-block-inside2"> <div class="inside-left2"> <h1>鍏ㄥ浗鏍规不娆犺柂绾跨储</h1> <div class="danwei-box"> - <h2 class="rightMargin"><font class="bigger">15132</font>鏉�</h2> - <h2 class="rightMargin"><font class="bigger">98.7</font>%</h2> + <h2 class="rightMargin"><font class="bigger">{{ Migrant.quanguo }}</font>鏉�</h2> + <h2 class="rightMargin"><font class="bigger">{{ Migrant.qbanjie }}</font>%</h2> </div> </div> <div class="inside-left2"> <h1>甯傜骇娆犺柂绾跨储</h1> <div class="danwei-box"> - <h2 class="rightMargin"><font class="bigger">14992</font>鏉�</h2> - <h2 class="rightMargin"><font class="bigger">98.6</font>%</h2> + <h2 class="rightMargin"><font class="bigger">{{ Migrant.shiji }}</font>鏉�</h2> + <h2 class="rightMargin"><font class="bigger">{{ Migrant.sbanjie }}</font>%</h2> </div> </div> </div> @@ -104,28 +104,28 @@ <img src="../../../assets/images/yanglao-icon8.png" alt=""> <div> <h1>鏀捐捶绗旀暟</h1> - <h2><font class="bigger">32505</font>绗�</h2> + <h2><font class="bigger">{{ Loan.loanNums }}</font>绗�</h2> </div> </div> <div class="inside-box-block"> <img src="../../../assets/images/yanglao-icon9.png" alt=""> <div> <h1>鏀捐捶閲戦</h1> - <h2><font class="bigger">32505</font>浜垮厓</h2> + <h2><font class="bigger">{{ Loan.loanAmount }}</font>浜垮厓</h2> </div> </div> <div class="inside-box-block"> <img src="../../../assets/images/yanglao-icon10.png" alt=""> <div> <h1>鎵舵寔鑷富鍒涗笟</h1> - <h2><font class="bigger">32505</font>浜�</h2> + <h2><font class="bigger">{{ Loan.supportNums }}</font>浜�</h2> </div> </div> <div class="inside-box-block"> <img src="../../../assets/images/yanglao-icon11.png" alt=""> <div> <h1>甯﹀姩灏变笟</h1> - <h2><font class="bigger">32505</font>浜�</h2> + <h2><font class="bigger">{{ Loan.addjobNums }}</font>浜�</h2> </div> </div> </div> @@ -139,28 +139,28 @@ <img src="../../../assets/images/yanglao-icon12.png" alt=""> <div> <h1>涓撲笟鎶�鏈汉鎵�</h1> - <h2><font class="bigger">50.8</font>涓�</h2> + <h2><font class="bigger">{{ Personnel.zhuan }}</font>涓�</h2> </div> </div> <div class="inside-box-block"> <img src="../../../assets/images/yanglao-icon13.png" alt=""> <div class="line-center"> - <h2>A鍗�:<font class="small">835</font>浜�</h2> - <h2>B鍗�:<font class="small">32505</font>浜�</h2> + <h2>A鍗�:<font class="small">{{ Personnel.personA }}</font>浜�</h2> + <h2>B鍗�:<font class="small">{{ Personnel.personB }}</font>浜�</h2> </div> </div> <div class="inside-box-block"> <img src="../../../assets/images/yanglao-icon14.png" alt=""> <div> <h1>浜彈鐗规畩娲ヨ创</h1> - <h2><font class="bigger">264</font>浜�</h2> + <h2><font class="bigger">{{ Personnel.jintie }}</font>浜�</h2> </div> </div> <div class="inside-box-block"> <img src="../../../assets/images/yanglao-icon15.png" alt=""> <div> <h1>楂樻妧鑳戒汉鎵�</h1> - <h2><font class="bigger">25.2</font>涓囦汉</h2> + <h2><font class="bigger">{{ Personnel.gao }}</font>涓囦汉</h2> </div> </div> </div> @@ -195,110 +195,118 @@ </div> </div> <div class="shuju-scroll"> - <div class="shuju-table-line2"> + <div class="shuju-table-line2" v-for="(item,index) in LabourTable" :key="index"> <div class="biao-title"> - <h1>鍩庨晣鏂板灏变笟锛堜汉锛�</h1> + <el-tooltip placement="top"> + <div slot="content"> + <h1>{{ item.dataType | dataFilter }}</h1> + </div> + <template> + <div class="content"> + <h1>{{ item.dataType | dataFilter }}</h1> + </div> + </template> + </el-tooltip> </div> <div class="title-flex"> <div class="title"> - <h1>138957</h1> + <h1>{{ item.monthData }}</h1> </div> <div class="title"> - <h1>128417</h1> + <h1>{{ item.yearData }}</h1> </div> <div class="title"> - <h1 class="fontColor">111.2%</h1> + <h1 class="fontColor">{{ item.finishRate }}</h1> </div> <div class="title"> - <h1>125000</h1> + <h1>{{ item.plan }}</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> + <!-- <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> - </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> + </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> - </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> - </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> + </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> + </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> - </div> + </div>--> </div> </div> <div class="shuju-echarts" id="jiuyeshujuEcharts"></div> </div> - </div> <div class="shu-ju-box"> <div class="shuju-title-box"> @@ -321,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> @@ -446,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> @@ -591,161 +464,85 @@ <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> + </div> - </div> - </div> + </div> + </div> </div> </template> <script> import echarts from "echarts/lib/echarts"; import nowSize from "../../../libs/nowSize"; -import {getInsured,getInstitution} from "@/api/index"; +import shiyeAndgongshangBaoxian from "../../components/index/shiyeAndgongshangBaoxian"; +import { + getInsured, + getInstitution, + getIncome, + getMigrant, + getLoan, + getPersonnel, + getLabourTable, + getLabourChart, + getInsuranceChart, + getTownTable, +} from "@/api/index"; export default { name: "index", + components: { + shiyeAndgongshangBaoxian + }, data() { return { // 琚繚闄╀汉 - Insured:{}, + Insured: {}, // 棣栭〉甯傜洿鍗曚綅鏁版嵁 - Institution:{} + Institution: {}, + // 浜哄潎鍙敮閰嶆敹鍏� + Income: {}, + // 鏌ヨ娆犺柂杩界即 + Migrant: {}, + // 鏌ヨ鍒涗笟鎷呬繚璐锋鏁版嵁鎺ュ彛 + Loan: {}, + // 23. 鏌ヨ浜烘墠寤鸿鏁版嵁鎺ュ彛 + Personnel: {}, + // 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: [], + // 28.澶变笟淇濋櫓 + type:'', } }, mounted() { @@ -755,6 +552,37 @@ this.gongshangBaoxianEcharts() this.getInsured() this.getInstitution() + this.getIncome() + this.getMigrant() + this.getLoan() + this.getPersonnel() + this.getLabourTable() + this.getLabourChart() + this.getInsuranceChart() + this.getTownTable() + // this.getshiyeTable() + // this.getGongshangTable() + }, + filters: { + dataFilter(type) { + switch (type) { + case '1': + return '鍩庨晣鏂板灏变笟浜烘暟' + break + case '2': + return '鍩庨晣澶变笟浜哄憳瀹炵幇鍐嶅氨涓氫汉鏁�' + break + case '3': + return '鍩庨晣灏变笟鍥伴毦浜哄憳瀹炵幇鍐嶅氨涓氫汉鏁�' + break + case '4': + return '鍐滄潙鍔冲姩鍔涘悜闈炲啘浜т笟杞Щ浜烘暟' + case '7': + return '鍩庨晣鐧昏澶变笟鐜�' + default: + break + } + } }, methods: { /*灏变笟鏁版嵁*/ @@ -767,7 +595,6 @@ trigger: 'axis' }, legend: { - data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'], itemWidth: nowSize(24), itemHeight: nowSize(4), itemGap: nowSize(10), @@ -780,7 +607,7 @@ }, grid: { top: '20%', - left: '1%', + left: '3%', right: '5%', bottom: '3%', containLabel: true @@ -788,7 +615,7 @@ xAxis: { type: 'category', boundaryGap: false, - data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'], + data: this.JiuYeEchart.LabourChartYear, axisLabel: { show: true, textStyle: { @@ -810,7 +637,7 @@ yAxis: { type: 'value', axisLabel: { - show: true, + show: false, textStyle: { color: "#fff", fontSize: nowSize(20) @@ -825,25 +652,27 @@ }, splitLine: { show: false + }, + // 鍒诲害璁剧疆 + axisTick: { + show: false } }, - series: [ + series: [{ + name: '鍩庨晣鏂板灏变笟', + type: 'line', + data: this.JiuYeEchart.addJob + }, { - name: '鎬绘暟', + name: '澶变笟鍐嶅氨涓�', type: 'line', - data: [370, 332, 401, 534, 490, 530, 910] + data: this.JiuYeEchart.reJob }, { - name: '鍦ㄨ亴鑱屽伐', + name: '鍥伴毦鍐嶅氨涓�', type: 'line', - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: '绂婚��浼�', - type: 'line', - data: [150, 132, 201, 154, 190, 330, 410] - } - ] + data: this.JiuYeEchart.hardJob + }] }; myEchart.setOption(option) window.addEventListener('resize', function () { @@ -860,11 +689,10 @@ trigger: 'axis' }, legend: { - data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'], itemWidth: nowSize(24), itemHeight: nowSize(4), itemGap: nowSize(10), - right: '0%', + right: '10%', top: '0%', textStyle: { color: '#FFFFFF', @@ -881,7 +709,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: { @@ -922,19 +750,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 } ] }; @@ -953,11 +781,10 @@ trigger: 'axis' }, legend: { - data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'], itemWidth: nowSize(24), itemHeight: nowSize(4), itemGap: nowSize(1), - right: '0%', + right: '10%', top: '0%', textStyle: { color: '#FFFFFF', @@ -974,7 +801,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: { @@ -1015,19 +842,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 } ] }; @@ -1046,11 +873,10 @@ trigger: 'axis' }, legend: { - data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'], itemWidth: nowSize(24), itemHeight: nowSize(4), itemGap: nowSize(10), - right: '0%', + right: '10%', top: '0%', textStyle: { color: '#FFFFFF', @@ -1067,7 +893,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: { @@ -1108,19 +934,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 } ] }; @@ -1132,23 +958,115 @@ // 鏌ヨ棣栭〉鍏昏�佷繚闄╁弬淇濅汉鏁帮紝绀句繚鍗′汉鏁� getInsured() { getInsured().then(res => { - if(res.code === 1000) { + if (res.code === 1000) { this.Insured = res.obj - }else{ + } else { this.$message.error('鑾峰彇淇℃伅澶辫触') } }) }, // 鏌ヨ棣栭〉甯傜洿鍗曚綅鏁版嵁鎺ュ彛 - getInstitution(){ - getInstitution().then(res=>{ - if(res.code === 1000){ + getInstitution() { + getInstitution().then(res => { + if (res.code === 1000) { this.Institution = res.obj - }else{ + } else { this.$message.error('鑾峰彇淇℃伅澶辫触') } }) - } + }, + // 鏌ヨ浜哄潎鍙敮閰嶆敹鍏ユ暟鎹帴鍙� + getIncome() { + getIncome().then(res => { + if (res.code === 1000) { + this.Income = res.obj + } + }) + }, + // 鏌ヨ娆犺柂杩界即鏁版嵁鎺ュ彛 + getMigrant() { + getMigrant().then(res => { + if (res.code === 1000) { + this.Migrant = res.obj + } + }) + }, + // 鏌ヨ鍒涗笟鎷呬繚璐锋鏁版嵁鎺ュ彛 + getLoan() { + getLoan().then(res => { + if (res.code === 1000) { + this.Loan = res.obj + } + }) + }, + // 23. 鏌ヨ浜烘墠寤鸿鏁版嵁鎺ュ彛 + getPersonnel() { + getPersonnel().then(res => { + if (res.code === 1000) { + this.Personnel = res.obj + } + }) + }, + // 24. 鏌ヨ棣栭〉灏变笟鏁版嵁琛ㄦ牸鎺ュ彛 + getLabourTable() { + getLabourTable().then(res => { + this.LabourTable = res.list + }) + }, + // 25. 鏌ヨ棣栭〉灏变笟鏁版嵁鎶樼嚎鍥炬帴鍙� + 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.TownTable = res.list + } + }) + }, } }; </script> @@ -1418,16 +1336,11 @@ 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; @@ -1436,17 +1349,19 @@ display: flex; .biao-title { - width: 1.328125rem /* 340/256 */ - ; + width: 0.859375rem /* 220/256 */; } .title-flex { - width: 100%; + width: calc(100% - 0.859375rem); display: flex; } .title { flex: 1; + display: flex; + align-items: center; + justify-content: center; h1 { font-size: $fontSize-26; @@ -1475,6 +1390,9 @@ .title { flex: 1; + display: flex; + align-items: center; + justify-content: center; h1 { font-size: $fontSize-26; @@ -1483,18 +1401,21 @@ line-height: 1.5; } - .fontColor { + .fontColorBlue { color: $color-blue; + } + .fontColorRed { + color: #FF3939; } } .title-flex { - width: 100%; + width: calc(100% - 0.859375rem); display: flex; } .biao-title { - width: 1.328125rem /* 340/256 */ + width: 0.859375rem /* 220/256 */ ; h1 { @@ -1502,6 +1423,7 @@ color: $color-white; text-align: right; line-height: 1.5; + @include ellipsis() } .fontColor { @@ -1509,6 +1431,29 @@ } } } + // 鍩庡競鑱屽伐鍏昏�佺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); -- Gitblit v1.9.1