|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div :class="showDatePicker? 'homeMobeilMask': ''">
|
|
|
+ <div :class="showDatePicker || showSelect? 'homeMobeilMask': ''">
|
|
|
</div>
|
|
|
<div class="yearConpanyPage">
|
|
|
<van-nav-bar title="年度单位评级详情" left-text="返回" @click-left="onClickLeft" />
|
|
|
@@ -17,40 +17,57 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="yearConpanyMain">
|
|
|
- <div class="rankingList">
|
|
|
- <span>{{showDate}}年度排行榜</span>
|
|
|
- <img :src="dateImg" @click="changeDate" alt="">
|
|
|
- <van-date-picker
|
|
|
- v-model="currentDate"
|
|
|
- title="选择年份"
|
|
|
- :columns-type="['year']"
|
|
|
- @confirm="confirmFn"
|
|
|
- @cancel="cancelFn"
|
|
|
- v-if="showDatePicker"
|
|
|
- />
|
|
|
+ <div class="mainSeach">
|
|
|
+ <div class="rankingList">
|
|
|
+ <span>{{showDate}}年度</span>
|
|
|
+ <img :src="dateImg" @click="changePickerDate" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="sectionModel">
|
|
|
+ <span @click="changeSelect">{{binSectionName}}板块</span>
|
|
|
+ </div>
|
|
|
+ <div class="mainSeachImg">
|
|
|
+ <img :src="sortImg" alt="">
|
|
|
+ <img :src="seachImg" alt="" @click="getYearData(binSection, showDate)">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <van-date-picker
|
|
|
+ v-model="currentDate"
|
|
|
+ title="选择年份"
|
|
|
+ :columns-type="['year']"
|
|
|
+ @confirm="confirmFn"
|
|
|
+ @cancel="cancelpickerFn"
|
|
|
+ v-if="showDatePicker"
|
|
|
+ />
|
|
|
+ <van-picker
|
|
|
+ title="选择板块"
|
|
|
+ :columns="columnSection"
|
|
|
+ @confirm="selectConfirm"
|
|
|
+ @cancel="cancelSelect"
|
|
|
+ v-if="showSelect"
|
|
|
+ />
|
|
|
<div class="mainModel">
|
|
|
- <div class="yearConpanyMaintable">
|
|
|
+ <div class="yearFromHeader">
|
|
|
<div class="headerNameTit">
|
|
|
<div class="headerNameTit_left">
|
|
|
<span>排名</span>
|
|
|
- <span>单位名称</span>
|
|
|
+ <span style="margin-left: 20px">单位名称</span>
|
|
|
</div>
|
|
|
<div class="headerNameTit_right">
|
|
|
<span>级别</span>
|
|
|
- <span>得分</span>
|
|
|
+ <span style="margin-left: 20px">得分</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div style="display: flex" v-for="(item, index) in it.tableDatas" :key="index">
|
|
|
- <div class="mainThreeMsg">
|
|
|
- <img :src="item.img" alt="">
|
|
|
- <div class="msgProgress">
|
|
|
- <span>{{item.company}}</span>
|
|
|
- <span>{{item.grade}}</span>
|
|
|
- <span>{{item.score}}</span>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex" v-for="(item, index) in evaluationYearData" :key="index">
|
|
|
+ <div class="yearFromMsg">
|
|
|
+ <div class="msgProgress">
|
|
|
+ <img :src="item.img" alt="" v-if="item.img">
|
|
|
+ <span v-else>{{item.rank}}</span>
|
|
|
+ <span>{{item.company}}</span>
|
|
|
+ <span>{{item.grade}}</span>
|
|
|
+ <span>{{item.score}}</span>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -62,58 +79,125 @@
|
|
|
import logoImg from '../assets/mobeilImg/logo.png'
|
|
|
import daohangImg from '../assets/mobeilImg/daohang.png'
|
|
|
import dateImg from '../assets/mobeilImg/date.png'
|
|
|
-import huodianImg from '../assets/mobeilImg/huodian.png'
|
|
|
-import shuidianImg from '../assets/mobeilImg/shuidian.png'
|
|
|
-import xinnengyuanImg from '../assets/mobeilImg/xinnengyuan.png'
|
|
|
-import meidianImg from '../assets/mobeilImg/meidian.png'
|
|
|
-import moreImg from '../assets/mobeilImg/more.png'
|
|
|
+import sortImg from '../assets/mobeilImg/sort.png'
|
|
|
+import seachImg from '../assets/mobeilImg/seach.png'
|
|
|
import cup1 from '../assets/getwayImg/cup1.png'
|
|
|
import cup2 from '../assets/getwayImg/cup2.png'
|
|
|
import cup3 from '../assets/getwayImg/cup3.png'
|
|
|
|
|
|
-import {apiGetevaluationportallist} from '../api/api'
|
|
|
+import {apiGetappAnnualRankingData} from '../api/api'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
logoImg: logoImg,
|
|
|
daohangImg: daohangImg,
|
|
|
dateImg: dateImg,
|
|
|
- huodianImg: huodianImg,
|
|
|
- shuidianImg: shuidianImg,
|
|
|
- xinnengyuanImg: xinnengyuanImg,
|
|
|
- meidianImg: meidianImg,
|
|
|
- moreImg: moreImg,
|
|
|
+ sortImg: sortImg,
|
|
|
+ seachImg: seachImg,
|
|
|
showDatePicker: false,
|
|
|
+ showSelect: false,
|
|
|
currentDate: [],
|
|
|
showDate: '',
|
|
|
- cupDataYearArr: {
|
|
|
- section: [],
|
|
|
- integration: []
|
|
|
- }
|
|
|
+ binSection: '',
|
|
|
+ binSectionName: '',
|
|
|
+ evaluationYearData: [],
|
|
|
+ columnSection: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.showDate = new Date().getFullYear()
|
|
|
- // this.getGateWayData()
|
|
|
+ if (this.$route) {
|
|
|
+ if (this.$route.query.binSection) {
|
|
|
+ this.binSection = this.$route.query.binSection
|
|
|
+ if (this.binSection === 'HD') {
|
|
|
+ this.binSectionName = '火电'
|
|
|
+ } else if (this.binSection === 'SD') {
|
|
|
+ this.binSectionName = '水电'
|
|
|
+ } else if (this.binSection === 'XNYFG') {
|
|
|
+ this.binSectionName = '新能源'
|
|
|
+ } else if (this.binSection === 'GJYW') {
|
|
|
+ this.binSectionName = '海外业务'
|
|
|
+ } else if (this.binSection === 'MDYTH') {
|
|
|
+ this.binSectionName = '煤电一体化'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.$route.query.year) {
|
|
|
+ this.showDate = this.$route.query.year
|
|
|
+ }
|
|
|
+ this.getYearData(this.binSection, this.showDate)
|
|
|
+ }
|
|
|
+ this.columnSection = [
|
|
|
+ { text: '火电', value: 'HD' },
|
|
|
+ { text: '水电', value: 'SD' },
|
|
|
+ { text: '新能源', value: 'XNYFG' },
|
|
|
+ { text: '海外业务', value: 'GJYW' },
|
|
|
+ { text: '煤电一体化', value: 'MDYTH' }
|
|
|
+ ]
|
|
|
},
|
|
|
methods: {
|
|
|
- // 获取首页数据
|
|
|
+ // 获取年度评级详情
|
|
|
+ getYearData(name, year) {
|
|
|
+ let that = this
|
|
|
+ that.evaluationYearData = []
|
|
|
+ let params = {
|
|
|
+ binSection: name,
|
|
|
+ year: year
|
|
|
+ }
|
|
|
+ apiGetappAnnualRankingData(params).then(datas =>{
|
|
|
+ if (datas && datas.data && datas.data.year) {
|
|
|
+ if (datas.data.year[name].length>0) {
|
|
|
+ datas.data.year[name].forEach((item, index) =>{
|
|
|
+ item.rank = index+1
|
|
|
+ if (index < 3) {
|
|
|
+ if (index === 0) {
|
|
|
+ item.img = cup1
|
|
|
+ } else if (index === 1) {
|
|
|
+ item.img = cup2
|
|
|
+ } else if (index === 2) {
|
|
|
+ item.img = cup3
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ that.evaluationYearData = datas.data.year[name]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
chooseMenu() {
|
|
|
this.$router.push({ path: "/menu"})
|
|
|
},
|
|
|
onClickLeft() {
|
|
|
this.$router.push({ path: "/mobeil"})
|
|
|
},
|
|
|
- changeDate() {
|
|
|
+ changePickerDate() {
|
|
|
this.showDatePicker = true
|
|
|
},
|
|
|
+ changeSelect() {
|
|
|
+ this.showSelect = true
|
|
|
+ },
|
|
|
confirmFn(val) {
|
|
|
this.showDate = val.selectedValues[0]
|
|
|
- console.log('riqi', val)
|
|
|
- this.cancelFn()
|
|
|
+ this.cancelpickerFn()
|
|
|
+ },
|
|
|
+ selectConfirm(val) {
|
|
|
+ this.binSection = val.selectedValues[0]
|
|
|
+ if (this.binSection === 'HD') {
|
|
|
+ this.binSectionName = '火电'
|
|
|
+ } else if (this.binSection === 'SD') {
|
|
|
+ this.binSectionName = '水电'
|
|
|
+ } else if (this.binSection === 'XNYFG') {
|
|
|
+ this.binSectionName = '新能源'
|
|
|
+ } else if (this.binSection === 'GJYW') {
|
|
|
+ this.binSectionName = '海外业务'
|
|
|
+ } else if (this.binSection === 'MDYTH') {
|
|
|
+ this.binSectionName = '煤电一体化'
|
|
|
+ }
|
|
|
+ this.cancelSelect()
|
|
|
},
|
|
|
- cancelFn() {
|
|
|
+ cancelpickerFn() {
|
|
|
this.showDatePicker = false
|
|
|
+ },
|
|
|
+ cancelSelect() {
|
|
|
+ this.showSelect = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -194,121 +278,140 @@ export default {
|
|
|
// height: 50px;
|
|
|
background-color: #ededf5;
|
|
|
padding: 17px 20px;
|
|
|
- .rankingList{
|
|
|
- width: 100%;
|
|
|
- height: 45px;
|
|
|
- background: #184FB4;
|
|
|
- border-radius: 5px;
|
|
|
- margin-bottom: 15px;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- width: 85%;
|
|
|
- text-align: center;
|
|
|
- font-family: MicrosoftYaHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
- margin-right: 5px;
|
|
|
- position: relative;
|
|
|
- top: 12px;
|
|
|
- left: 8vw;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ .mainSeach{
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ .rankingList{
|
|
|
+ width: 37%;
|
|
|
+ height: 40px;
|
|
|
+ background: #184FB4;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ margin-right: 10px;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 85%;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 5px;
|
|
|
+ position: relative;
|
|
|
+ left: 20px;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 22px;
|
|
|
+ height: 18px;
|
|
|
+ position: relative;
|
|
|
+ top: -10px;
|
|
|
+ left: 90px;
|
|
|
+ }
|
|
|
}
|
|
|
- img{
|
|
|
- width: 22px;
|
|
|
- height: 18px;
|
|
|
- position: relative;
|
|
|
- top: 15px;
|
|
|
- right: 5px;
|
|
|
+ .sectionModel{
|
|
|
+ width: 37%;
|
|
|
+ height: 40px;
|
|
|
+ background: #838DAB;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ margin-right: 15px;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
- .van-picker{
|
|
|
- z-index: 222;
|
|
|
+ .mainSeachImg{
|
|
|
+ width: 17%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ img:nth-child(1){
|
|
|
+ width: 25px;
|
|
|
+ height: 15px;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ img:nth-child(2){
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ .van-picker{
|
|
|
+ z-index: 222;
|
|
|
+ }
|
|
|
.mainModel{
|
|
|
background: #fff;
|
|
|
border-radius: 5px;
|
|
|
- .yearConpanyMaintable{
|
|
|
- padding-top: 5px;
|
|
|
- border-right: 1px solid #E1E3EA;
|
|
|
- position: relative;
|
|
|
+ .yearFromHeader{
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #E1E3EA;
|
|
|
.headerNameTit{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- padding: 0px 15px;
|
|
|
- margin-bottom: 5px;
|
|
|
+ padding: 8px 20px;
|
|
|
font-size: 14px;
|
|
|
color: #414141;
|
|
|
- .headerNameTit_left{
|
|
|
- width: 65%;
|
|
|
- span:nth-child(1){
|
|
|
- display: inline-block;
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
- span:nth-child(2){
|
|
|
- display: inline-block;
|
|
|
- width: 70%;
|
|
|
- }
|
|
|
- }
|
|
|
- .headerNameTit_right{
|
|
|
- width: 40%;
|
|
|
- span:nth-child(1){
|
|
|
- display: inline-block;
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
- span:nth-child(2){
|
|
|
- display: inline-block;
|
|
|
- width: 40%;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
- .mainThreeMsg{
|
|
|
+ .headerTit{
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yearFromMsg{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ background: #F6F7FA;
|
|
|
+ margin: 5px 8px;
|
|
|
+ padding: 2px 10px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ .msgProgress{
|
|
|
+ margin-top: 5px;
|
|
|
display: flex;
|
|
|
- margin: 0 10px;
|
|
|
- width: calc(100% - 36px);
|
|
|
- height: 33px;
|
|
|
- background: #F6F7FA;
|
|
|
- margin-bottom: 8px;
|
|
|
- padding-left: 8px;
|
|
|
- padding-right: 8px;
|
|
|
- padding-top: 2px;
|
|
|
- border-radius: 5px;
|
|
|
+ width: 100%;
|
|
|
img{
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
position: relative;
|
|
|
- top: 5px;
|
|
|
- margin-right: 10px;
|
|
|
+ left: 5px;
|
|
|
+ margin-right: 30px;
|
|
|
}
|
|
|
- .msgProgress{
|
|
|
- margin-top: 5px;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- span{
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- }
|
|
|
- span:nth-child(1){
|
|
|
- display: inline-block;
|
|
|
- width: 60%;
|
|
|
- font-weight: 400;
|
|
|
- color: #666;
|
|
|
- // margin-right: 10px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- span:nth-child(2){
|
|
|
- display: inline-block;
|
|
|
- width: 25%;
|
|
|
- font-weight: 600;
|
|
|
- color: #F65177;
|
|
|
- }
|
|
|
- span:nth-child(3){
|
|
|
- display: inline-block;
|
|
|
- width: 10%;
|
|
|
- font-weight: 600;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ }
|
|
|
+ span:nth-child(1){
|
|
|
+ display: inline-block;
|
|
|
+ width: 14%;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ span:nth-child(2){
|
|
|
+ display: inline-block;
|
|
|
+ width: 61%;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ span:nth-child(3){
|
|
|
+ width: 15%;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #F65177;
|
|
|
+ }
|
|
|
+ span:nth-child(4){
|
|
|
+ width: 10%;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
}
|
|
|
}
|
