From af63b044b26ddf2a381b28e7a7f413ddeb31e1e9 Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123456 <zxx19900626> Date: 星期五, 29 四月 2022 12:07:30 +0800 Subject: [PATCH] 社会收支总表 --- src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue | 134 ++++++++++++++++++++++++++++---------------- 1 files changed, 86 insertions(+), 48 deletions(-) diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue index e22a85d..6848bd8 100644 --- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue @@ -4,90 +4,92 @@ <h1>鍔冲姩灏变笟缁熻琛�</h1> <div class="danwei-box">鍗曚綅:浜�</div> <el-table - :max-height="640" + :max-height="tableHeight" :data="tableData" :header-cell-style="handleheader" + :cell-style="handleCellStyle" stripe border style="width: 100%"> <el-table-column + :formatter="dataTypeFormatter" align="center" - prop="date" + prop="dataType" label="鎸囨爣鍚嶇О" fixed="left"> </el-table-column> <el-table-column - prop="name" + prop="yearFinish" align="center" label="鍘诲勾瀹屾垚"> </el-table-column> <el-table-column - prop="address" + prop="january" align="center" label="1鏈�"> </el-table-column> <el-table-column - prop="address" + prop="february" align="center" label="2鏈�"> </el-table-column> <el-table-column - prop="address" + prop="march" align="center" label="3鏈�"> </el-table-column> <el-table-column - prop="address" + prop="april" align="center" label="4鏈�"> </el-table-column> <el-table-column - prop="address" + prop="may" align="center" label="5鏈�"> </el-table-column> <el-table-column - prop="address" + prop="june" align="center" label="6鏈�"> </el-table-column> <el-table-column - prop="address" + prop="july" align="center" label="7鏈�"> </el-table-column> <el-table-column - prop="address" + prop="august" align="center" label="8鏈�"> </el-table-column> <el-table-column - prop="address" + prop="september" align="center" label="9鏈�"> </el-table-column> <el-table-column - prop="address" + prop="october" align="center" label="10鏈�"> </el-table-column> <el-table-column - prop="address" + prop="november" align="center" label="11鏈�"> </el-table-column> <el-table-column - prop="address" + prop="december" align="center" label="12鏈�"> </el-table-column> <el-table-column - prop="address" + prop="plan" align="center" label="鐪佸巺璁″垝"> </el-table-column> <el-table-column - prop="address" + prop="finish" align="center" label="褰撳墠瀹屾垚鐜�"> </el-table-column> @@ -99,41 +101,62 @@ <script> import nowSize from "../../../../libs/nowSize"; + import { getLabourTable, getLabourLine } from '@/api/jiuyeAndChuangye' export default { name: "workStatistics", data() { return { - tableData: [{ - date: '鍩庨晣鏂板灏变笟浜烘暟', - name: '122', - address: '32111' - }, { - date: '鍩庨晣澶变笟浜哄憳瀹炵幇鍐嶅氨涓氫汉鏁�', - name: '233', - address: '34222' - }, { - date: '鍐滄潙鍔冲姩鍔涘悜闈炲啘浜т笟杞Щ浜烘暟', - name: '23222', - address: '3112222' - }, { - date: '鍏朵腑锛氬姵鍔¤緭鍑�', - name: '34221', - address: '122222' - }, { - date: '寮�灞曡ˉ璐存�ц亴涓氭妧鑳藉煿璁汉鏁�', - name: '2333', - address: '1232233' - }, { - date: '鍩庨晣鐧昏澶变笟鐜�', - name: '222', - address: '2222' - }] + tableData: [], + newEmployment:[], //鏂板灏变笟 + loseReEmployment:[], //澶变笟浜哄憳鍐嶅氨涓� + diffReEmployment: [], //灏变笟鍥伴毦浜哄憳鍐嶅氨涓� + xdata:[], + tableHeight: window.innerHeight - nowSize(960) } }, mounted() { + this.getLabourTable() + this.getLabourLine() this.laogongJiuyeEcharts() }, methods: { + getLabourTable() { //鏌ヨ鍔冲姩灏变笟琛ㄦ牸鏁版嵁鎺ュ彛 + getLabourTable().then(res => { + if(res.code == 1000) { + this.tableData = res.list + } + }) + }, + dataTypeFormatter(row,column) { + let name = row.dataType + if(name == 1) { + return '鍩庨晣鏂板灏变笟浜烘暟' + }else if(name == 2) { + return '鍩庨晣澶变笟浜哄憳瀹炵幇鍐嶅氨涓氫汉鏁�' + }else if(name == 3) { + return '鍩庨晣灏变笟鍥伴毦浜哄憳瀹炵幇鍐嶅氨涓氫汉鏁�' + }else if(name == 4) { + return '鍐滄潙鍔冲姩鍔涘悜闈炲啘浜т笟杞Щ浜烘暟' + }else if(name == 5) { + return '鍔冲姟杈撳嚭' + }else if(name == 6) { + return '寮�灞曡ˉ璐存�ц亴涓氭妧鑳藉煿璁汉鏁�' + }else if(name == 7) { + return '鍩庨晣鐧昏澶变笟鐜�' + } + }, + /*鏌ヨ鍔冲姩灏变笟鎶樼嚎鍥炬暟鎹帴鍙�*/ + getLabourLine() { + getLabourLine().then(res => { + if(res.code == 1000) { + this.newEmployment = res.list[0][1] || [] + this.loseReEmployment = res.list[1][2] || [] + this.diffReEmployment = res.list[2][3] || [] + this.xdata = res.obj || [] + this.laogongJiuyeEcharts() + } + }) + }, laogongJiuyeEcharts() { let myEchart = this.$echarts.init(document.getElementById('laogongJiuyeEcharts')) let option = { @@ -172,12 +195,13 @@ xAxis: { type: 'category', boundaryGap: false, - data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'], + data: this.xdata, axisLabel: { show: true, textStyle: { color: "#fff", - fontSize:nowSize(24) + fontSize:nowSize(24), + lineHeight: nowSize(56) } }, axisLine: { @@ -215,17 +239,17 @@ { name: '鏂板灏变笟', type: 'line', - data: [370, 332, 401, 534, 490, 530, 910] + data: this.newEmployment }, { name: '澶变笟浜哄憳鍐嶅氨涓�', type: 'line', - data: [220, 182, 191, 234, 290, 330, 310] + data: this.loseReEmployment }, { name: '灏变笟鍥伴毦浜哄憳鍐嶅氨涓�', type: 'line', - data: [150, 132, 201, 154, 190, 330, 410] + data: this.diffReEmployment } ] }; @@ -239,6 +263,20 @@ return { lineHeight: '0', } + }, + handleCellStyle({rowIndex,columnIndex}) { + if(columnIndex == 0) { + return { background:'#51D2FF' } + } + }, + getHeight() { + this.tableHeight = window.innerHeight - nowSize(1000) + }, + created() { + window.addEventListener('resize', this.getHeight) + }, + destroy() { + window.addEventListener('resize', this.getHeight) } } } @@ -307,7 +345,7 @@ } } .laogongJiuyeEcharts{ - height: calc(100% - 640px - 0.33203125rem /* 85/256 */); + height: calc(100% - 2.5rem /* 640/256 */ - 0.33203125rem /* 85/256 */); } } </style> -- Gitblit v1.9.1