From ee658b8ab1dd3b76b8c3fa3f2006b4fa8e8af0cf Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123456 <zxx19900626> Date: 星期五, 22 四月 2022 17:33:13 +0800 Subject: [PATCH] 社会保障接口对接 --- src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue | 305 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 300 insertions(+), 5 deletions(-) diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue index 36c342e..ee46b68 100644 --- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue @@ -1,15 +1,310 @@ <template> - <div class="zhiyePeixun-wrap"> - - </div> + <div class="zhiyePeixun-wrap"> + <el-table + stripe + border + :data="tableData" + max-height="640" + :header-cell-style="handleheader" + style="width: 100%"> + <el-table-column + fixed="left" + prop="jyear" + label="骞翠唤" + align="center"> + </el-table-column> + <el-table-column label="琛ヨ创鎬у煿璁�" align="center"> + <el-table-column + label="琛ヨ创鎬у煿璁�" + align="center"> + <el-table-column + prop="planTimes" + :label="'鐪佸巺璁″垝 \n 锛堜汉娆★級'" + align="center"> + </el-table-column> + <el-table-column + prop="realTimes" + :label="'瀹為檯鍩硅浜烘暟 \n 锛堜汉娆★級'" + align="center"> + </el-table-column> + <el-table-column + prop="completionRate" + label="瀹屾垚鐜�" + align="center"> + </el-table-column> + <el-table-column + prop="expenditure" + :label="'涓撹处璧勯噾鏀嚭 \n 锛堜竾鍏冿級'" + align="center"> + </el-table-column> + </el-table-column> + <el-table-column + label="鍏朵腑搴斿眾姣曚笟瀛﹀勾楂樻牎姣曚笟鐢�" + align="center"> + <el-table-column + prop="graduateTrains" + :label="'鍩硅浜烘暟 \n 锛堜汉娆★級'" + align="center"> + </el-table-column> + <el-table-column + prop="graduateSubsidy" + :label="'琛ヨ创閲戦 \n 锛堜竾鍏�)'" + align="center"> + </el-table-column> + </el-table-column> + </el-table-column> + <el-table-column + label="绀句細鎬у煿璁�" + align="center"> + <el-table-column + prop="graduateSubsidy" + label="瀹為檯鍩硅浜烘暟 锛堜汉娆★級" + align="center"> + </el-table-column> + </el-table-column> + </el-table> + <div class="zhiyepeixun-echarts" id="zhiyepeixunEcharts"></div> + </div> </template> <script> + import {getTrainTable, getTrainChart} from '@/api/jiuyeAndChuangye' + import nowSize from "../../../../libs/nowSize"; export default { - name: "zhiyePeixun" + name: "zhiyePeixun", + data() { + return { + tableData:[], + yearsData: [], //x杞存暟鎹� + numberData: [], //鏌辩姸鍥炬暟鎹紙瀹為檯鍩硅浜烘暟锛� + rateData: [], //鎶樼嚎鏁版嵁锛堝畬鎴愮巼锛� + } + }, + mounted() { + 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', + + } + }, + zhiyepeixunEcharts() { + let myEchart = this.$echarts.init(document.getElementById('zhiyepeixunEcharts')) + let option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + }, + textStyle: { + color: '#fff', + fontSize: nowSize(28) + } + }, + title: { + text:'鍘嗗勾鑱屼笟鍩硅鎯呭喌鍒嗘瀽鍥�', + left: 'center', + top:'5%', + textStyle: { + color: '#fff', + fontSize: nowSize(30) + } + }, + grid: { + top: '15%', + left: '4%', + right: '18%', + bottom: '3%', + containLabel: true + }, + legend: { + data: ['瀹為檯鍩硅浜烘暟','瀹屾垚鐜�'], + right:'3%', + top:'center', + orient:'vertical', + itemGap: nowSize(50), + textStyle: { + color:'#fff', + fontSize: nowSize(24) + } + }, + xAxis: [ + { + type: 'category', + data: this.yearsData, + axisPointer: { + type: 'shadow' + }, + axisLabel: { + textStyle: { + color: '#fff', + fontSize: nowSize(24) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + } + } + ], + yAxis: [ + { + type: 'value', + axisLabel: { + textStyle: { + color: '#fff', + fontSize: nowSize(24) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + { + type: 'value', + axisLabel: { + show: false, + formatter: '{value} %' + }, + axisLine: { + show: false, + }, + splitLine: { + show: false + }, + axisTick: { + show: false + } + } + ], + series: [ + { + name: '瀹為檯鍩硅浜烘暟', + type: 'bar', + barWidth: nowSize(48), + color:'#51D2FF', + tooltip: { + valueFormatter: function (value) { + return value + ' ml'; + } + }, + data: this.numberData + }, + { + name: '瀹屾垚鐜�', + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value + ' 掳C'; + } + }, + data: this.rateData + } + ] + }; + myEchart.setOption(option) + window.addEventListener('resize',function () { + myEchart.resize() + }) + } + } } </script> -<style lang="css" scoped> +<style lang="scss"> + @import "../../../../assets/css/base"; + .zhiyePeixun-wrap{ + 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 */; + } + .el-table tr{ + height: 0.3125rem /* 80/256 */; + } + .el-table tr:nth-child(odd){ + background-color: #CEF2FF; + } + .el-table tr:nth-child(even){ + background-color: #A8E9FF; + } + .el-table, .el-table__expanded-cell{ + background-color: transparent; + } + .el-table thead{ + color: $color-darkGrey; + } + .el-table{ + color: $color-darkGrey; + } + .el-table .cell{ + font-size: $fontSize-28; + color: $color-darkGrey; + font-weight: 300; + line-height: 1.3; + white-space:pre-line; + } + .el-table--border th.el-table__cell, .el-table__fixed-right-patch{ + border-bottom:1Px solid $color-grey; /*no*/ + } + .el-table thead.is-group th.el-table__cell{ + background-color: $color-blue; + } + .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{ + border-bottom:1Px solid $color-grey; /*no*/ + } + .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{ + border-right:1Px solid $color-grey; /*no*/ + } + } +</style> +<style lang="scss" scoped> + .zhiyepeixun-echarts{ + width: 100%; + height: calc(100% - 2.65625rem /* 680/256 */); + margin-top: 0.078125rem /* 20/256 */; + } </style> -- Gitblit v1.9.1