From 08b5ddfa9a0a2ed52bd7d7b98ca16ef4dcc610a6 Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123 <819527061@qq.com> Date: 星期二, 13 九月 2022 14:19:43 +0800 Subject: [PATCH] 页面修改 --- src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue | 159 +++++++++++++++++++++++++++++----------------------- 1 files changed, 89 insertions(+), 70 deletions(-) diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue index f66d23e..1fe2376 100644 --- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue @@ -4,12 +4,13 @@ stripe border :data="tableData" - max-height="640" + max-height="tableHeight" :header-cell-style="handleheader" + :cell-style="handleCellStyle" style="width: 100%"> <el-table-column fixed="left" - prop="year" + prop="jyear" label="骞翠唤" align="center"> </el-table-column> @@ -18,48 +19,46 @@ label="琛ヨ创鎬у煿璁�" align="center"> <el-table-column - prop="shengtingjihua" + prop="planTimes" :label="'鐪佸巺璁″垝 \n 锛堜汉娆★級'" align="center"> </el-table-column> <el-table-column - prop="shijipeixunjihua" + prop="realTimes" :label="'瀹為檯鍩硅浜烘暟 \n 锛堜汉娆★級'" align="center"> </el-table-column> <el-table-column - prop="wanchenglv" + prop="completionRate" label="瀹屾垚鐜�" align="center"> </el-table-column> <el-table-column - prop="zhuanzhangzhichu" + prop="expenditure" :label="'涓撹处璧勯噾鏀嚭 \n 锛堜竾鍏冿級'" align="center"> </el-table-column> </el-table-column> <el-table-column - prop="name" label="鍏朵腑搴斿眾姣曚笟瀛﹀勾楂樻牎姣曚笟鐢�" align="center"> <el-table-column - prop="peixunrenshu" + prop="graduateTrains" :label="'鍩硅浜烘暟 \n 锛堜汉娆★級'" align="center"> </el-table-column> <el-table-column - prop="butiejine" + prop="graduateSubsidy" :label="'琛ヨ创閲戦 \n 锛堜竾鍏�)'" align="center"> </el-table-column> </el-table-column> </el-table-column> <el-table-column - prop="year" label="绀句細鎬у煿璁�" align="center"> <el-table-column - prop="peixunrenci" + prop="graduateSubsidy" label="瀹為檯鍩硅浜烘暟 锛堜汉娆★級" align="center"> </el-table-column> @@ -70,58 +69,50 @@ </template> <script> + import {getTrainTable, getTrainChart} from '@/api/jiuyeAndChuangye' import nowSize from "../../../../libs/nowSize"; export default { name: "zhiyePeixun", data() { return { - tableData:[{ - year: '2017骞�', - shengtingjihua: '34212', - shijipeixunjihua: '44333', - wanchenglv: '90%', - zhuanzhangzhichu: '233421', - peixunrenshu: '3222', - butiejine:'2322', - peixunrenci:'34223' - },{ - year: '2018骞�', - shengtingjihua: '34212', - shijipeixunjihua: '44333', - wanchenglv: '90%', - zhuanzhangzhichu: '233421', - peixunrenshu: '3222', - butiejine:'2322', - peixunrenci:'34223' - },{ - year: '2019骞�', - shengtingjihua: '34212', - shijipeixunjihua: '44333', - wanchenglv: '90%', - zhuanzhangzhichu: '233421', - peixunrenshu: '3222', - butiejine:'2322', - peixunrenci:'34223' - },{ - year: '2020骞�', - shengtingjihua: '34212', - shijipeixunjihua: '44333', - wanchenglv: '90%', - zhuanzhangzhichu: '233421', - peixunrenshu: '3222', - butiejine:'2322', - peixunrenci:'34223' - }] + tableData:[], + yearsData: [], //x杞存暟鎹� + numberData: [], //鏌辩姸鍥炬暟鎹紙瀹為檯鍩硅浜烘暟锛� + rateData: [], //鎶樼嚎鏁版嵁锛堝畬鎴愮巼锛� + tableHeight: window.innerHeight - nowSize(1000) } }, mounted() { - this.zhiyepeixunEcharts() + this.getTrainTable() + this.getTrainChart() }, methods: { + getTrainTable() { //鏌ヨ鑱屼笟鍩硅缁熻琛ㄦ牸鏁版嵁鎺ュ彛 + getTrainTable().then(res => { + if(res.code == 1000) { + this.tableData = res.list + } + }) + }, + getTrainChart() { + getTrainChart().then(res => { + if(res.code == 1000) { + this.yearsData = res.obj.years + this.numberData = res.obj.number + this.rateData = res.obj.rate + this.zhiyepeixunEcharts() + } + }) + }, handleheader(data) { return { lineHeight: '0', + } + }, + handleCellStyle({rowIndex, columnIndex}) { + if(columnIndex == 0) { + return { background:'#51D2FF' } } }, zhiyepeixunEcharts() { @@ -134,20 +125,34 @@ crossStyle: { color: '#999' } + }, + textStyle: { + color: '#fff', + fontSize: nowSize(28) } }, title: { text:'鍘嗗勾鑱屼笟鍩硅鎯呭喌鍒嗘瀽鍥�', left: 'center', - top:'3%', + top:'5%', textStyle: { color: '#fff', fontSize: nowSize(30) } }, + grid: { + top: '15%', + left: '4%', + right: '18%', + bottom: '3%', + containLabel: true + }, legend: { + data: ['瀹為檯鍩硅浜烘暟','瀹屾垚鐜�'], right:'3%', - top:'3%', + top:'center', + orient:'vertical', + itemGap: nowSize(50), textStyle: { color:'#fff', fontSize: nowSize(24) @@ -156,7 +161,7 @@ xAxis: [ { type: 'category', - data: ['2017骞�', '2018骞�', '2019骞�', '2020骞�', '2021骞�', '2022骞�', '2023骞�'], + data: this.yearsData, axisPointer: { type: 'shadow' }, @@ -178,47 +183,55 @@ yAxis: [ { type: 'value', - name: 'Precipitation', - min: 0, - max: 250, - interval: 50, axisLabel: { - formatter: '{value} ml', textStyle: { color: '#fff', fontSize: nowSize(24) } }, axisLine: { - + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false } }, { type: 'value', - name: 'Temperature', - min: 0, - max: 25, - interval: 5, axisLabel: { - formatter: '{value} 掳C' + show: false, + formatter: '{value} %' + }, + axisLine: { + show: false, + }, + splitLine: { + show: false + }, + axisTick: { + show: false } } ], series: [ { - name: 'Evaporation', + name: '瀹為檯鍩硅浜烘暟', type: 'bar', + barWidth: nowSize(48), + color:'#51D2FF', tooltip: { valueFormatter: function (value) { return value + ' ml'; } }, - data: [ - 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 - ] + data: this.numberData }, { - name: 'Temperature', + name: '瀹屾垚鐜�', type: 'line', yAxisIndex: 1, tooltip: { @@ -226,7 +239,7 @@ return value + ' 掳C'; } }, - data: [2.0, 4.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] + data: this.rateData } ] }; @@ -245,6 +258,12 @@ width: 100%; height: calc(100% - 0.078125rem /* 20/256 */); margin-top: 0.078125rem /* 20/256 */; + .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{ + background: transparent; + } + .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{ + background: transparent; + } .el-table th.el-table__cell{ background-color:$color-blue; height: 0.3125rem /* 80/256 */; @@ -271,7 +290,7 @@ font-size: $fontSize-28; color: $color-darkGrey; font-weight: 300; - line-height: 1; + line-height: 1.3; white-space:pre-line; } .el-table--border th.el-table__cell, .el-table__fixed-right-patch{ -- Gitblit v1.9.1