From b3997cce5f00b7172c446f29c41e65ab513ed360 Mon Sep 17 00:00:00 2001 From: 付延余 <f-yanyu@outlook.com> Date: 星期一, 25 四月 2022 15:26:55 +0800 Subject: [PATCH] 首页数据 --- config/index.js | 2 src/api/index.js | 36 ++++ src/pages/show/index/index.vue | 363 +++++++++++++++++++++++++++++++++------------------ 3 files changed, 265 insertions(+), 136 deletions(-) diff --git a/config/index.js b/config/index.js index ce7c79a..fd946f5 100644 --- a/config/index.js +++ b/config/index.js @@ -3,7 +3,7 @@ // see http://vuejs-templates.github.io/webpack for documentation. const path = require("path"); -let url = 'http://192.168.0.133:8081' +let url = 'http://192.168.0.132:8081' module.exports = { dev: { diff --git a/src/api/index.js b/src/api/index.js index 014ce1b..3f4bae9 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -1,18 +1,44 @@ -import { getRequest, postRequest } from "../libs/axios"; +import {getRequest, postRequest} from "../libs/axios"; // 鍚庡彴鐢ㄦ埛鐩稿叧 export const login = params => { - return postRequest('/ybg/webservice/phone/login.do', params); + return postRequest('/ybg/webservice/phone/login.do', params); } export const getAdminIndex = params => { - return getRequest('/getAdminIndex', params); + return getRequest('/getAdminIndex', params); } // 棣栭〉鎺ュ彛 +// 18. 鏌ヨ棣栭〉鍏昏�佷繚闄╁弬淇濅汉鏁帮紝绀句繚鍗′汉鏁版帴鍙� export const getInsured = (params) => { - return postRequest('/ybg/webservice/app/homepage/getInsured.do',params) + return postRequest('/ybg/webservice/app/homepage/getInsured.do', params) } +// 19. 鏌ヨ棣栭〉甯傜洿鍗曚綅鏁版嵁鎺ュ彛 export const getInstitution = (params) => { - return postRequest('/ybg/webservice/app/homepage/getInstitution.do',params) + return postRequest('/ybg/webservice/app/homepage/getInstitution.do', params) +} +// 20. 鏌ヨ浜哄潎鍙敮閰嶆敹鍏ユ暟鎹帴鍙� +export const getIncome = (params) => { + return postRequest('/ybg/webservice/app/homepage/getIncome.do', params) +} +// 21. 鏌ヨ娆犺柂杩界即鏁版嵁鎺ュ彛 +export const getMigrant = (params) => { + return postRequest('/ybg/webservice/app/homepage/getMigrant.do', params) +} +// 22. 鏌ヨ鍒涗笟鎷呬繚璐锋鏁版嵁鎺ュ彛 +export const getLoan = (params) => { + return postRequest('/ybg/webservice/app/homepage/getLoan.do', params) +} +// 23. 鏌ヨ浜烘墠寤鸿鏁版嵁鎺ュ彛 +export const getPersonnel = (params) => { + return postRequest('/ybg/webservice/app/homepage/getPersonnel.do', params) +} +// 24. 鏌ヨ棣栭〉灏变笟鏁版嵁琛ㄦ牸鎺ュ彛 +export const getLabourTable = (params) => { + return postRequest('/ybg/webservice/app/homepage/getLabourTable.do', params) +} +// 25. 鏌ヨ棣栭〉灏变笟鏁版嵁鎶樼嚎鍥炬帴鍙� +export const getLabourChart = (params) => { + return postRequest('/ybg/webservice/app/homepage/getLabourChart.do', params) } diff --git a/src/pages/show/index/index.vue b/src/pages/show/index/index.vue index 0f7d2a0..2cea839 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,109 @@ </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> + <h1>{{ item.dataType | dataFilter }}</h1> </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"> @@ -727,25 +726,49 @@ </div> <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 { + getInsured, + getInstitution, + getIncome, + getMigrant, + getLoan, + getPersonnel, + getLabourTable, + getLabourChart +} from "@/api/index"; export default { name: "index", data() { return { // 琚繚闄╀汉 - Insured:{}, + Insured: {}, // 棣栭〉甯傜洿鍗曚綅鏁版嵁 - Institution:{} + Institution: {}, + // 浜哄潎鍙敮閰嶆敹鍏� + Income: {}, + // 鏌ヨ娆犺柂杩界即 + Migrant: {}, + // 鏌ヨ鍒涗笟鎷呬繚璐锋鏁版嵁鎺ュ彛 + Loan: {}, + // 23. 鏌ヨ浜烘墠寤鸿鏁版嵁鎺ュ彛 + Personnel: {}, + // 24. 鏌ヨ棣栭〉灏变笟鏁版嵁琛ㄦ牸鎺ュ彛 + LabourTable: {}, + // 25.棣栭〉灏变笟鏁版嵁鎶樼嚎鍥� + addJob: [], + reJob: [], + hardJob: [], + LabourChartYear: [] } }, mounted() { @@ -755,6 +778,33 @@ this.gongshangBaoxianEcharts() this.getInsured() this.getInstitution() + this.getIncome() + this.getMigrant() + this.getLoan() + this.getPersonnel() + this.getLabourTable() + this.getLabourChart() + }, + 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: { /*灏变笟鏁版嵁*/ @@ -780,7 +830,7 @@ }, grid: { top: '20%', - left: '1%', + left: '3%', right: '5%', bottom: '3%', containLabel: true @@ -788,7 +838,7 @@ xAxis: { type: 'category', boundaryGap: false, - data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'], + data: this.LabourChartYear, axisLabel: { show: true, textStyle: { @@ -810,7 +860,7 @@ yAxis: { type: 'value', axisLabel: { - show: true, + show: false, textStyle: { color: "#fff", fontSize: nowSize(20) @@ -825,25 +875,27 @@ }, splitLine: { show: false + }, + // 鍒诲害璁剧疆 + axisTick: { + show: false } }, - series: [ - { - name: '鎬绘暟', - type: 'line', - data: [370, 332, 401, 534, 490, 530, 910] - }, + series: [{ + name: '鎬绘暟', + type: 'line', + data: this.addJob + }, { name: '鍦ㄨ亴鑱屽伐', type: 'line', - data: [220, 182, 191, 234, 290, 330, 310] + data: this.reJob }, { name: '绂婚��浼�', type: 'line', - data: [150, 132, 201, 154, 190, 330, 410] - } - ] + data: this.hardJob + }] }; myEchart.setOption(option) window.addEventListener('resize', function () { @@ -1132,22 +1184,73 @@ // 鏌ヨ棣栭〉鍏昏�佷繚闄╁弬淇濅汉鏁帮紝绀句繚鍗′汉鏁� 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. 鏌ヨ棣栭〉灏变笟鏁版嵁鎶樼嚎鍥炬帴鍙� + getLabourChart() { + getLabourChart().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() + } + }) } } }; -- Gitblit v1.9.1