From 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123 <819527061@qq.com> Date: 星期三, 14 九月 2022 17:35:54 +0800 Subject: [PATCH] echarts添加显示隐藏按钮 --- src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue | 22 ++++++ src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue | 27 ++++++++ src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue | 26 +++++++- src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue | 23 +++++++ src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue | 25 ++++++- src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue | 27 ++++++++- src/pages/components/juminYanglaoBaoxian/baoxianForm.vue | 2 src/pages/show/personnelTalents/PersonnelTalents.vue | 1 8 files changed, 134 insertions(+), 19 deletions(-) diff --git a/src/pages/components/juminYanglaoBaoxian/baoxianForm.vue b/src/pages/components/juminYanglaoBaoxian/baoxianForm.vue index bfafd68..1e5900a 100644 --- a/src/pages/components/juminYanglaoBaoxian/baoxianForm.vue +++ b/src/pages/components/juminYanglaoBaoxian/baoxianForm.vue @@ -7,7 +7,7 @@ style="width: 100%" :data="tableData"> <el-table-column - width="200" + min-width="140" align="center" prop="areaName" label="鍘匡紙甯傘�佸尯锛�"> diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue index 1811da6..c42cf7f 100644 --- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue @@ -97,7 +97,11 @@ label="褰撳墠瀹屾垚鐜�"> </el-table-column> </el-table> - <div class="laogongJiuyeEcharts" id="laogongJiuyeEcharts"></div> + <div v-show="echartsShow" class="laogongJiuyeEcharts" id="laogongJiuyeEcharts"></div> + <div class="yincang-box"> + <el-button @click="showEchartsBtn" v-show="echartsShow" type="primary">闅愯棌</el-button> + <el-button @click="showEchartsBtn" v-show="!echartsShow" type="primary">鏄剧ず</el-button> + </div> </div> </div> </template> @@ -114,7 +118,8 @@ loseReEmployment:[], //澶变笟浜哄憳鍐嶅氨涓� diffReEmployment: [], //灏变笟鍥伴毦浜哄憳鍐嶅氨涓� xdata:[], - tableHeight: window.innerHeight - nowSize(960) + tableHeight: window.innerHeight - nowSize(960), + echartsShow: true } }, mounted() { @@ -123,6 +128,14 @@ this.laogongJiuyeEcharts() }, methods: { + showEchartsBtn() { + this.echartsShow = !this.echartsShow + if(this.echartsShow) { + this.tableHeight = window.innerHeight - nowSize(960) + }else { + this.tableHeight = window.innerHeight - nowSize(320) + } + }, getLabourTable() { //鏌ヨ鍔冲姩灏变笟琛ㄦ牸鏁版嵁鎺ュ彛 getLabourTable().then(res => { if(res.code == 1000) { @@ -348,6 +361,11 @@ font-family: Source Han Sans CN, Source Han Sans CN-Regular; font-weight: 400; } + .yincang-box{ + position: absolute; + right: 20px; + bottom: 20px; + } } .laogongJiuyeEcharts{ height: calc(100% - 2.5rem /* 640/256 */ - 0.33203125rem /* 85/256 */); diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue index 1fe2376..160d6ab 100644 --- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue @@ -4,7 +4,7 @@ stripe border :data="tableData" - max-height="tableHeight" + :max-height="tableHeight" :header-cell-style="handleheader" :cell-style="handleCellStyle" style="width: 100%"> @@ -64,7 +64,11 @@ </el-table-column> </el-table-column> </el-table> - <div class="zhiyepeixun-echarts" id="zhiyepeixunEcharts"></div> + <div v-show="echartsShow" class="zhiyepeixun-echarts" id="zhiyepeixunEcharts"></div> + <div class="yincang-box"> + <el-button @click="showEchartsBtn" v-show="echartsShow" type="primary">闅愯棌</el-button> + <el-button @click="showEchartsBtn" v-show="!echartsShow" type="primary">鏄剧ず</el-button> + </div> </div> </template> @@ -79,7 +83,8 @@ yearsData: [], //x杞存暟鎹� numberData: [], //鏌辩姸鍥炬暟鎹紙瀹為檯鍩硅浜烘暟锛� rateData: [], //鎶樼嚎鏁版嵁锛堝畬鎴愮巼锛� - tableHeight: window.innerHeight - nowSize(1000) + tableHeight: window.innerHeight - nowSize(1000), + echartsShow: true } }, mounted() { @@ -87,6 +92,14 @@ this.getTrainChart() }, methods: { + showEchartsBtn() { + this.echartsShow = !this.echartsShow + if(this.echartsShow) { + this.tableHeight = window.innerHeight - nowSize(1000) + }else { + this.tableHeight = window.innerHeight - nowSize(280) + } + }, getTrainTable() { //鏌ヨ鑱屼笟鍩硅缁熻琛ㄦ牸鏁版嵁鎺ュ彛 getTrainTable().then(res => { if(res.code == 1000) { @@ -314,4 +327,12 @@ height: calc(100% - 2.65625rem /* 680/256 */); margin-top: 0.078125rem /* 20/256 */; } + .zhiyePeixun-wrap{ + position: relative; + .yincang-box{ + position: absolute; + right: 20px; + bottom: 20px; + } + } </style> diff --git a/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue b/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue index 3eb3935..64ee0f4 100644 --- a/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue +++ b/src/pages/show/otherBusiness/otherBusinessChild/OtherB_PeopleJunShouRu.vue @@ -102,7 +102,11 @@ </el-table> </div> <!--鍥捐〃--> - <div class="OtherB-PeopleJunShouRu__echart"> + <div class="OtherB-PeopleJunShouRu__echart" v-show="echartsShow"> + </div> + <div class="yincang-box"> + <el-button @click="showEchartsBtn" v-show="echartsShow" type="primary">闅愯棌</el-button> + <el-button @click="showEchartsBtn" v-show="!echartsShow" type="primary">鏄剧ず</el-button> </div> </div> </template> @@ -115,6 +119,7 @@ name: "OtherB_PerpleJunShouRu", data() { return { + echartsShow: true, tableData: [ // { // year: 2020, @@ -156,6 +161,14 @@ this.getIncomeLine() }, methods: { + showEchartsBtn() { + this.echartsShow = !this.echartsShow + if(this.echartsShow) { + this.tableHeight = window.innerHeight - nowSize(960) + }else { + this.tableHeight = window.innerHeight - nowSize(320) + } + }, // 31. 鏌ヨ灞呮皯浜哄潎鍙敮閰嶆敹鍏ヨ〃鏍兼暟鎹帴鍙� getIncomeTable() { getIncomeTable().then(res => { @@ -382,9 +395,14 @@ .OtherB_PerpleJunShouRu__wrap { width: 100%; - //height: calc(100% - 0.078125rem /* 20/256 */ - //); - + height: calc(100% - 0.078125rem /* 20/256 */ + ); + position: relative; + .yincang-box{ + position: absolute; + right: 0.078125rem /* 20/256 */; + bottom: 0; + } .OtherB-PeopleJunShouRu__table { width: 100%; margin-top: 0.078125rem /* 20/256 */ diff --git a/src/pages/show/personnelTalents/PersonnelTalents.vue b/src/pages/show/personnelTalents/PersonnelTalents.vue index 086d50a..060bf10 100644 --- a/src/pages/show/personnelTalents/PersonnelTalents.vue +++ b/src/pages/show/personnelTalents/PersonnelTalents.vue @@ -70,6 +70,7 @@ .personnelTalents__warp { width: 100%; + height: calc(100% - 0.078125rem /* 20/256 */); padding: 0.078125rem /* 20/256 */ ; box-sizing: border-box; diff --git a/src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue b/src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue index dc1d0ad..2b77815 100644 --- a/src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue +++ b/src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue @@ -46,9 +46,12 @@ </el-radio> </el-radio-group> </div> - <div class="PT_unitPersonnel--Echarts" v-show="isShow"></div> + <div class="PT_unitPersonnel--Echarts" v-show="echartsShow"></div> </div> - + <div class="yincang-box"> + <el-button @click="showEchartsBtn" v-show="echartsShow" type="primary">闅愯棌</el-button> + <el-button @click="showEchartsBtn" v-show="!echartsShow" type="primary">鏄剧ず</el-button> + </div> </div> </template> @@ -144,7 +147,7 @@ checkedCategory: '浜嬩笟鍗曚綅', CARE_GORY: ['浜嬩笟鍗曚綅', '鍦ㄨ亴浜哄憳', '骞翠汉鍧囨敹鍏�'], tableHeight: window.innerHeight - nowSize(1000), - isShow: true, + echartsShow: true, echartSeries: {}, selectIndex: { type: 1 @@ -157,6 +160,14 @@ this.getUnitLine() }, methods: { + showEchartsBtn() { + this.echartsShow = !this.echartsShow + if(this.echartsShow) { + this.tableHeight = window.innerHeight - nowSize(960) + }else { + this.tableHeight = window.innerHeight - nowSize(320) + } + }, mergeColumnTableCell({rowIndex, columnIndex}) { if (columnIndex === 0) { if (rowIndex === 0) { @@ -444,7 +455,12 @@ .PersonnelTalents_unitPersonnel--warp { width: 100%; height: 100%; - + position: relative; + .yincang-box{ + position: absolute; + right: 0.078125rem /* 20/256 */; + bottom: 0; + } .PT_unitPersonnel--table { width: 100%; } @@ -457,7 +473,6 @@ height: calc(100% - 2.5rem/* 640/256 */ - 0.254375rem /* 60/256 */ ); position: relative; - .PT_navEchart--title { width: 1px; display: inline-block; diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue index dc510dc..2fe331a 100644 --- a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue +++ b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoShouzhiZongbiao.vue @@ -3,6 +3,7 @@ <div class="shebaoShouzhiZongbiao-table"> <h1>绀句細淇濋殰鍩洪噾缁熻琛�</h1> <el-table + :max-height="tableHeight" :data="tableData" :cell-style="handleCellStyle" style="width: 100%"> @@ -215,7 +216,11 @@ </template> </el-table-column> </el-table> - <div class="shebaoShouzhiZongbiaoEcharts" id="shebaoShouzhiZongbiaoEcharts"></div> + <div v-show="echartsShow" class="shebaoShouzhiZongbiaoEcharts" id="shebaoShouzhiZongbiaoEcharts"></div> + <div class="yincang-box"> + <el-button @click="showEchartsBtn" v-show="echartsShow" type="primary">闅愯棌</el-button> + <el-button @click="showEchartsBtn" v-show="!echartsShow" type="primary">鏄剧ず</el-button> + </div> </div> </div> </template> @@ -231,7 +236,9 @@ tableHead:[], tableData:[], headerArry:{}, - echartsSeries:{} + echartsSeries:{}, + tableHeight: window.innerHeight - nowSize(960), + echartsShow: true } }, mounted() { @@ -239,6 +246,14 @@ this.getStatisticsChart() }, methods: { + showEchartsBtn() { + this.echartsShow = !this.echartsShow + if(this.echartsShow) { + this.tableHeight = window.innerHeight - nowSize(960) + }else { + this.tableHeight = window.innerHeight - nowSize(320) + } + }, getStatisticsTable() { getStatisticsTable().then(res => { if(res.code == 1000) { @@ -455,4 +470,12 @@ height: calc(100% - 640px - 0.33203125rem /* 85/256 */); } } +.shebaoShouzhiZongbiao-table{ + position: relative; + .yincang-box{ + position: absolute; + right: 0.078125rem /* 20/256 */; + bottom: 0.078125rem /* 20/256 */; + } +} </style> diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue index de0e794..0ebb7f8 100644 --- a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue +++ b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shehuiBaoxian.vue @@ -86,7 +86,11 @@ </el-table-column> </el-table> </div> - <div class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></div> + <div v-show="echartsShow" class="shehuiBaoxianEcharts" id="shehuiBaoxianEcharts"></div> + <div class="yincang-box"> + <el-button @click="showEchartsBtn" v-show="echartsShow" type="primary">闅愯棌</el-button> + <el-button @click="showEchartsBtn" v-show="!echartsShow" type="primary">鏄剧ず</el-button> + </div> </div> </template> @@ -103,7 +107,8 @@ juminData: [], //鍩庝埂灞呮皯鍏昏�佷繚闄╁弬淇濅汉鏁� gongshangData: [], //宸ヤ激淇濋櫓鍙備繚浜烘暟 shiyeData: [], //澶变笟淇濋櫓鍙備繚浜烘暟 - tableHeight: window.innerHeight - nowSize(960) + tableHeight: window.innerHeight - nowSize(960), + echartsShow: true } }, mounted() { @@ -111,6 +116,14 @@ this.getPersonChart() }, methods: { + showEchartsBtn() { + this.echartsShow = !this.echartsShow + if(this.echartsShow) { + this.tableHeight = window.innerHeight - nowSize(960) + }else { + this.tableHeight = window.innerHeight - nowSize(320) + } + }, getPersonTable(){ getPersonTable().then(res => { if(res.code == 1000) { @@ -301,6 +314,12 @@ .shehuiBaoxian-wrap{ width: 100%; height: 100%; + position: relative; + .yincang-box{ + position: absolute; + right: 0.078125rem /* 20/256 */; + bottom: 0.078125rem /* 20/256 */; + } .shehuiBaoxian-table{ width: 100%; position: relative; -- Gitblit v1.9.1