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/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue | 624 ++++++++++++++++++++++++++++++-------------------------- 1 files changed, 335 insertions(+), 289 deletions(-) diff --git a/src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue b/src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue index 55b3d2a..dc1d0ad 100644 --- a/src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue +++ b/src/pages/show/personnelTalents/personnelTalentsChild/PersonnelTalents_UnitPersonnel.vue @@ -2,286 +2,159 @@ <div class="PersonnelTalents_unitPersonnel--warp"> <div class="PT_unitPersonnel--table"> <el-table + :max-height="tableHeight" :data="tableData" stripe border style="width: 100%" :span-method="mergeColumnTableCell"> <el-table-column - prop="nianfen" + prop="jyear" label="骞翠唤" fixed="left"> </el-table-column> <el-table-column - prop="fanwei" + prop="scope" label="鑼冨洿"> </el-table-column> <el-table-column label="鎬讳綋鎯呭喌"> - <el-table-column label="浜嬩笟鍗曚綅(瀹�)" prop="shiyedanwei"> + <el-table-column label="浜嬩笟鍗曚綅(瀹�)" prop="publicInstitutions"> </el-table-column> - <el-table-column label="鍦ㄨ亴浜哄憳(涓囦汉)" prop="zaizhirenyuan"> + <el-table-column label="鍦ㄨ亴浜哄憳(涓囦汉)" prop="inJobs"> </el-table-column> - <el-table-column label="骞翠汉鍧囨敹鍏�(涓囧厓)" prop="nianrenjunshouru"> + <el-table-column label="骞翠汉鍧囨敹鍏�(涓囧厓)" prop="perIncome"> </el-table-column> - <el-table-column label="鍏ㄧ渷鎺掑悕" prop="quanshengpaiming"> + <el-table-column label="鍏ㄧ渷鎺掑悕" prop="incomeRank"> </el-table-column> - <el-table-column label="骞翠汉鍧囨敹鍏ュ閫�" prop="nianrenjunshouruzengsu"> + <el-table-column label="骞翠汉鍧囨敹鍏ュ閫�" prop="incomeSpeed"> </el-table-column> </el-table-column> <el-table-column label="鍏朵腑"> - <el-table-column label="宸ヨ祫鎬� 骞翠汉鍧囨敹鍏� 锛堜竾鍏冿級" prop="gongzixingnianjunshouru"></el-table-column> - <el-table-column label="鍏ㄧ渷鎺掍綅" prop="quanshengpaiming1"></el-table-column> - <el-table-column label="鍚勯」濂栧姳鎬у拰 鏀归潻鎬цˉ璐村勾 浜哄潎鏀跺叆 锛堜竾鍏冿級" prop="gexiangjianglixing"></el-table-column> - <el-table-column label="鍏ㄧ渷鎺掍綅" prop="quanshengpaiming2"></el-table-column> + <el-table-column label="宸ヨ祫鎬� 骞翠汉鍧囨敹鍏� 锛堜竾鍏冿級" prop="wagesIncome"></el-table-column> + <el-table-column label="鍏ㄧ渷鎺掍綅" prop="wagesRank"></el-table-column> + <el-table-column label="鍚勯」濂栧姳鎬у拰 鏀归潻鎬цˉ璐村勾 浜哄潎鏀跺叆 锛堜竾鍏冿級" prop="subsidyIncome"></el-table-column> + <el-table-column label="鍏ㄧ渷鎺掍綅" prop="subsidyRank"></el-table-column> </el-table-column> </el-table> - <div class="PT_navEchart--title"> - <el-checkbox v-model="checked">澶囬�夐」</el-checkbox> - <el-checkbox v-model="checked">澶囬�夐」</el-checkbox> - <el-checkbox v-model="checked">澶囬�夐」</el-checkbox> - </div> - <div class="PT_unitPersonnel--Echarts"></div> </div> + <!-- 鍗曢�夋 --> + <div class="PT_unitPersonnel--echart-box"> + <div class="PT_navEchart--title"> + <el-radio-group v-model="checkedCategory"> + <el-radio v-for="(categoryItem,index) in CARE_GORY" :label="categoryItem" :key="index" + @change="selectEcharts(index)">{{ categoryItem }} + </el-radio> + </el-radio-group> + </div> + <div class="PT_unitPersonnel--Echarts" v-show="isShow"></div> + </div> + </div> </template> <script> + import nowSize from "../../../../libs/nowSize"; +import {getPersonTable, getUnitLine} from '@/api/personnelTalents'; export default { name: "PersonnelTalents_UnitPersonnel", data() { return { tableData: [ - { - nianfen: '2022骞�', - fanwei: '鍏ㄥ競', - shiyedanwei: '5363', - zaizhirenyuan: '16.4', - nianrenjunshouru: '10.54', - quanshengpaiming: '3', - nianrenjunshouruzengsu: '3.02%', - gongzixingnianjunshouru: '6.81', - quanshengpaiming1: '8', - gexiangjianglixing: 3.73, - quanshengpaiming2: '1' - }, - { - nianfen: '2022骞�', - fanwei: '鍏ㄥ競', - shiyedanwei: '5363', - zaizhirenyuan: '16.4', - nianrenjunshouru: '10.54', - quanshengpaiming: '3', - nianrenjunshouruzengsu: '3.02%', - gongzixingnianjunshouru: '6.81', - quanshengpaiming1: '8', - gexiangjianglixing: 3.73, - quanshengpaiming2: '1' - }, - { - nianfen: '2022骞�', - fanwei: '鍏ㄥ競', - shiyedanwei: '5363', - zaizhirenyuan: '16.4', - nianrenjunshouru: '10.54', - quanshengpaiming: '3', - nianrenjunshouruzengsu: '3.02%', - gongzixingnianjunshouru: '6.81', - quanshengpaiming1: '8', - gexiangjianglixing: 3.73, - quanshengpaiming2: '1' - }, - { - nianfen: '2021骞�', - fanwei: '鍏ㄥ競', - shiyedanwei: '5363', - zaizhirenyuan: '16.4', - nianrenjunshouru: '10.54', - quanshengpaiming: '3', - nianrenjunshouruzengsu: '3.02%', - gongzixingnianjunshouru: '6.81', - quanshengpaiming1: '8', - gexiangjianglixing: 3.73, - quanshengpaiming2: '1' - }, - { - nianfen: '2021骞�', - fanwei: '鍏ㄥ競', - shiyedanwei: '5363', - zaizhirenyuan: '16.4', - nianrenjunshouru: '10.54', - quanshengpaiming: '3', - nianrenjunshouruzengsu: '3.02%', - gongzixingnianjunshouru: '6.81', - quanshengpaiming1: '8', - gexiangjianglixing: 3.73, - quanshengpaiming2: '1' - }, - { - nianfen: '2021骞�', - fanwei: '鍏ㄥ競', - shiyedanwei: '5363', - zaizhirenyuan: '16.4', - nianrenjunshouru: '10.54', - quanshengpaiming: '3', - nianrenjunshouruzengsu: '3.02%', - gongzixingnianjunshouru: '6.81', - quanshengpaiming1: '8', - gexiangjianglixing: 3.73, - quanshengpaiming2: '1' - }, + // { + // nianfen: '2022骞�', + // fanwei: '鍏ㄥ競', + // shiyedanwei: '5363', + // zaizhirenyuan: '16.4', + // nianrenjunshouru: '10.54', + // quanshengpaiming: '3', + // nianrenjunshouruzengsu: '3.02%', + // gongzixingnianjunshouru: '6.81', + // quanshengpaiming1: '8', + // gexiangjianglixing: 3.73, + // quanshengpaiming2: '1' + // }, + // { + // nianfen: '2022骞�', + // fanwei: '鍏ㄥ競', + // shiyedanwei: '5363', + // zaizhirenyuan: '16.4', + // nianrenjunshouru: '10.54', + // quanshengpaiming: '3', + // nianrenjunshouruzengsu: '3.02%', + // gongzixingnianjunshouru: '6.81', + // quanshengpaiming1: '8', + // gexiangjianglixing: 3.73, + // quanshengpaiming2: '1' + // }, + // { + // nianfen: '2022骞�', + // fanwei: '鍏ㄥ競', + // shiyedanwei: '5363', + // zaizhirenyuan: '16.4', + // nianrenjunshouru: '10.54', + // quanshengpaiming: '3', + // nianrenjunshouruzengsu: '3.02%', + // gongzixingnianjunshouru: '6.81', + // quanshengpaiming1: '8', + // gexiangjianglixing: 3.73, + // quanshengpaiming2: '1' + // }, + // { + // nianfen: '2021骞�', + // fanwei: '鍏ㄥ競', + // shiyedanwei: '5363', + // zaizhirenyuan: '16.4', + // nianrenjunshouru: '10.54', + // quanshengpaiming: '3', + // nianrenjunshouruzengsu: '3.02%', + // gongzixingnianjunshouru: '6.81', + // quanshengpaiming1: '8', + // gexiangjianglixing: 3.73, + // quanshengpaiming2: '1' + // }, + // { + // nianfen: '2021骞�', + // fanwei: '鍏ㄥ競', + // shiyedanwei: '5363', + // zaizhirenyuan: '16.4', + // nianrenjunshouru: '10.54', + // quanshengpaiming: '3', + // nianrenjunshouruzengsu: '3.02%', + // gongzixingnianjunshouru: '6.81', + // quanshengpaiming1: '8', + // gexiangjianglixing: 3.73, + // quanshengpaiming2: '1' + // }, + // { + // nianfen: '2021骞�', + // fanwei: '鍏ㄥ競', + // shiyedanwei: '5363', + // zaizhirenyuan: '16.4', + // nianrenjunshouru: '10.54', + // quanshengpaiming: '3', + // nianrenjunshouruzengsu: '3.02%', + // gongzixingnianjunshouru: '6.81', + // quanshengpaiming1: '8', + // gexiangjianglixing: 3.73, + // quanshengpaiming2: '1' + // }, ], - option: { - color: ['#FF5151', '#51FF5D', '#FFD151'], - title: { - text: '鍘嗗勾鍏ㄥ競灞呮皯浜哄潎鍙敮閰嶆敹鍏ュ垎鏋愬浘', - left: 'center', - top: '5%', - textStyle: { - color: '#FFFFFF', - fontSize: nowSize(30) - } - }, - tooltip: { - trigger: 'axis' - }, - legend: { - right: '5%', - top: 'center', - orient: 'vertical', - itemWidth: nowSize(30), - itemHeight: nowSize(4), - itemGap: nowSize(80), - textStyle: { - color: '#FFFFFF', - fontSize: nowSize(24), - } - }, - grid: { - left: '5%', - right: '20%', - bottom: '0%', - containLabel: true - }, - xAxis: { - name: '鍗曚綅锛氬勾', - nameTextStyle: { - color: '#FFFFFF', - fontSize: nowSize(24) - }, - nameGap: nowSize(92),// 鍧愭爣杞村悕绉颁笌杞寸嚎涔嬮棿鐨勮窛绂汇�� - type: 'category', - boundaryGap: false,// 鍧愭爣杞翠袱绔暀鐧� - data: ['2017骞�', '2018骞�', '2019骞�', '2020骞�', '2021骞�'], - axisLabel: { - show: true, - textStyle: { - color: '#fff', - fontSize: nowSize(24) - }, - }, - axisLine: { - lineStyle: { - color: '#999999', - width: 1, //杩欓噷鏄潗鏍囪酱鐨勫搴�,鍙互鍘绘帀 - type: 'solid' - } - }, - splitLine: { - show: false - } - }, - yAxis: { - name: '鍗曚綅锛氬勾', - nameTextStyle: { - color: '#FFFFFF', - fontSize: nowSize(24) - }, - nameGap: nowSize(30),// 鍧愭爣杞村悕绉颁笌杞寸嚎涔嬮棿鐨勮窛绂汇�� - type: 'value', - axisLabel: { - show: true, - textStyle: { - color: '#fff', - fontSize: nowSize(24) - }, - }, - axisLine: { - lineStyle: { - color: '#999999', - width: 1, //杩欓噷鏄潗鏍囪酱鐨勫搴�,鍙互鍘绘帀 - type: "solid" - } - }, - splitLine: { - show: false - } - }, - series: [ - { - name: '灞呮皯浜哄潎鍙敮閰嶆敹鍏�', - type: 'line', - smooth: false, //璁剧疆鎶樼嚎涓哄渾婊戞洸绾�,false鍒欐湁杞姌鐐� - // symbol:'none', //榛樿鏄剧ず鎶樼偣锛屼负none鏃朵笉鏄剧ず - itemStyle: { - normal: { - lineStyle: { - width: 3, //鎶樼嚎瀹藉害 - } - } - }, - emphasis: { //榧犳爣缁忚繃鏃舵姌鐐瑰皬鍦嗗湀鏍峰紡 - borderColor: 'rgba(0,196,132,0.2)', - borderWidth: 100 - }, - stack: 'Total', - data: [120, 132, 101, 134, 90, 230] - }, - { - name: '鍩庨晣灞呮皯', - type: 'line', - smooth: false, //璁剧疆鎶樼嚎涓哄渾婊戞洸绾�,false鍒欐湁杞姌鐐� - // symbol:'none', //榛樿鏄剧ず鎶樼偣锛屼负none鏃朵笉鏄剧ず - itemStyle: { - normal: { - lineStyle: { - width: 3, //鎶樼嚎瀹藉害 - } - } - }, - emphasis: { //榧犳爣缁忚繃鏃舵姌鐐瑰皬鍦嗗湀鏍峰紡 - borderColor: 'rgba(0,196,132,0.2)', - borderWidth: 100 - }, - stack: 'Total', - data: [220, 182, 191, 234, 290, 330] - }, - { - name: '鍐滄潙灞呮皯', - type: 'line', - smooth: false, //璁剧疆鎶樼嚎涓哄渾婊戞洸绾�,false鍒欐湁杞姌鐐� - // symbol:'none', //榛樿鏄剧ず鎶樼偣锛屼负none鏃朵笉鏄剧ず - itemStyle: { - normal: { - lineStyle: { - width: 3, //鎶樼嚎瀹藉害 - } - } - }, - emphasis: { //榧犳爣缁忚繃鏃舵姌鐐瑰皬鍦嗗湀鏍峰紡 - borderColor: 'rgba(0,196,132,0.2)', - borderWidth: 100 - }, - stack: 'Total', - data: [150, 232, 201, 154, 190, 330] - } - ] + checkedCategory: '浜嬩笟鍗曚綅', + CARE_GORY: ['浜嬩笟鍗曚綅', '鍦ㄨ亴浜哄憳', '骞翠汉鍧囨敹鍏�'], + tableHeight: window.innerHeight - nowSize(1000), + isShow: true, + echartSeries: {}, + selectIndex: { + type: 1 } } }, - mounted(){ + mounted() { this.Init_echarts() + this.getPersonTable() + this.getUnitLine() }, methods: { mergeColumnTableCell({rowIndex, columnIndex}) { @@ -305,11 +178,156 @@ } }, Init_echarts() { - const option = this.option const myChart = this.$echarts.init(document.querySelector('.PT_unitPersonnel--Echarts')); - option && myChart.setOption(this.option) + const option = { + color: ['#FF5151', '#51FF5D', '#FFD151'], + title: { + text: '杩戜竴骞翠簨涓氭暟閲忓彉鍖栬秼鍔垮浘', + left: 'center', + top: '5%', + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(30) + } + }, + itemStyle: { + normal: { + lineStyle: { + width: 3, //鎶樼嚎瀹藉害 + } + } + }, + tooltip: { + trigger: 'axis' + }, + legend: { + right: '2%', + top: 'center', + orient: 'vertical', + itemWidth: nowSize(30), + itemHeight: nowSize(4), + itemGap: nowSize(80), + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(24), + } + }, + grid: { + left: '2%', + top: '25%', + right: '18%', + bottom: '0', + containLabel: true + }, + xAxis: { + name: '鍗曚綅锛氬勾/鏈�', + nameTextStyle: { + color: '#FFFFFF', + fontSize: nowSize(24) + }, + nameGap: nowSize(92),// 鍧愭爣杞村悕绉颁笌杞寸嚎涔嬮棿鐨勮窛绂汇�� + type: 'category', + boundaryGap: false,// 鍧愭爣杞翠袱绔暀鐧� + data: this.echartSeries.years, + axisLabel: { + show: true, + textStyle: { + color: '#fff', + fontSize: nowSize(24) + }, + }, + axisLine: { + lineStyle: { + color: '#999999', + width: 1, //杩欓噷鏄潗鏍囪酱鐨勫搴�,鍙互鍘绘帀 + type: 'solid' + } + }, + splitLine: { + show: false + } + }, + yAxis: { + name: '鍗曚綅锛氬', + nameTextStyle: { + color: '#FFFFFF', + fontSize: nowSize(24) + }, + nameGap: nowSize(30),// 鍧愭爣杞村悕绉颁笌杞寸嚎涔嬮棿鐨勮窛绂汇�� + type: 'value', + axisLabel: { + show: true, + textStyle: { + color: '#fff', + fontSize: nowSize(24) + }, + }, + axisLine: { + lineStyle: { + color: '#999999', + width: 1, //杩欓噷鏄潗鏍囪酱鐨勫搴�,鍙互鍘绘帀 + type: "solid" + } + }, + splitLine: { + show: false + }, + }, + series: [ + { + name: '鍏ㄥ競', + type: 'line', + data: this.echartSeries.quanshi + }, + { + name: '甯傜洿', + type: 'line', + data: this.echartSeries.shizhi + }, + { + name: '鍘匡紙甯傘�佸尯锛�', + type: 'line', + data: this.echartSeries.xian + } + ] + }; + option && myChart.setOption(option) + }, + getHeight() { + this.tableHeight = window.innerHeight - nowSize(900) + }, + // 閫氳繃鐐瑰嚮鏇存崲echarts鍥捐〃淇℃伅 + selectEcharts(index) { + this.selectIndex.type = index + 1 + this.getUnitLine() + this.Init_echarts() + }, + // 29. 鏌ヨ浜嬩笟鍗曚綅浜哄憳鎯呭喌琛ㄦ牸鏁版嵁鎺ュ彛 + getPersonTable() { + getPersonTable().then(res => { + if (res.code === 1000) { + this.tableData = res.list + } + }) + }, + // 41.鏌ヨ浜嬩笟骞村害鍙樺寲鎯呭喌鎶樼嚎鍥炬暟鎹帴鍙� + getUnitLine() { + getUnitLine(this.selectIndex).then(res => { + if (res.code === 1000) { + this.echartSeries = res.obj + console.log(this.echartSeries); + this.Init_echarts() + } + }) } + }, + created() { + window.addEventListener('resize', this.getHeight) + }, + destroy() { + window.addEventListener('resize', this.getHeight) } + } </script> <style lang="scss"> @@ -347,7 +365,7 @@ .el-table .el-table__cell { //padding: 0.0850375rem /* 22/256 */ //0; - padding:0.0546875rem 0; + padding: 0.0546875rem 0; } .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 { @@ -355,7 +373,7 @@ } .el-table .cell { - line-height:0.125rem; + line-height: 0.125rem; font-size: $fontSize-28; color: $color-darkGrey; font-weight: 300; @@ -372,32 +390,51 @@ border-bottom: 1px solid #8E8E8E; } } -.PT_navEchart--title{ - .el-checkbox{ - width:1.171875rem; - line-height:0.375rem; - } - .el-checkbox__label{ - font-size:0.09375rem; - color:#FFFFFF; - } - .el-checkbox__inner{ - width:40px; - height:40px; - margin-right:17px; - background: #51D2FF; - //&:after{ - // background: url("../../../../assets/images/personnelTalents/Yes@2x.png") no-repeat; - // background:100% 100%; - // content:'' - //} - } - .el-checkbox__inner::after{ - border: 0.01953125rem /* 5/256 */ solid #FFF; - height: 0.08203125rem /* 21/256 */; - width: 0.0625rem /* 16/256 */; - border-left: 0; - border-top: 0; + +.PT_navEchart--title { + .el-radio { + width: 1.171875rem; + line-height: 0.375rem; + + .el-radio__label { + font-size: 0.09375rem; + color: #FFFFFF; + } + + .el-radio__input { + margin-bottom: 0.01953125rem; + + &.is-checked { + .el-radio__inner { + background-color: #51D2FF; + border-color: #51D2FF; + background: url("../../../../assets/images/personnelTalents/Yes@2x.png") no-repeat; + background-size: 100% 100%; + background-color: #51D2FF; + + &:hover { + border-color: #51D2FF; + } + } + } + + .el-radio__inner { + width: 0.15625rem; + height: 0.15625rem; + margin-right: 0.06640625rem; + background: transparent; + border-radius: 1%; + box-sizing: content-box; + border: 0.0078125rem /* 2/256 */ + solid #DCDFE6; + + &::after { + content: ''; + width: 0; + height: 0; + } + } + } } } </style> @@ -407,28 +444,37 @@ .PersonnelTalents_unitPersonnel--warp { width: 100%; height: 100%; + .PT_unitPersonnel--table { width: 100%; - height: 100%; + } + + + .PT_unitPersonnel--echart-box { + width: 100%; + margin-top: 0.234375rem /* 60/256 */ + ; + height: calc(100% - 2.5rem/* 640/256 */ - 0.254375rem /* 60/256 */ + ); position: relative; + + .PT_navEchart--title { + width: 1px; + display: inline-block; + position: absolute; + left: 0.390625rem; + top: 50%; + transform: translateY(-50%); + } + + .PT_unitPersonnel--Echarts { + width: 85%; + height: 100%; + position: absolute; + left: 1.2890625rem; + display: inline-block; + } } - .PT_unitPersonnel--Echarts { - width: 1920px; - margin-top: 120px; - height:600px; - //height: calc(100% - 640px - 0.33203125rem /* 85/256 */ - //); - display:inline-block; - //height: 2.75rem; - } - - .PT_navEchart--title{ - width:1.171875rem; - display:inline-block; - position:relative; - left:100px; - top:-250px; - } } </style> -- Gitblit v1.9.1