|
|
@@ -0,0 +1,397 @@
|
|
|
+<template>
|
|
|
+ <div class="seasonLeagueTable">
|
|
|
+ <el-dialog v-model="dialogVisible" width="80vw" :close-on-click-modal="false">
|
|
|
+ <template #header>
|
|
|
+ <div class="seasonHeader">
|
|
|
+ <span style="font-size:14px;color:#fff">考核排行榜</span>
|
|
|
+ <el-select v-model="optionName" placeholder="请选择板块" @change="changeOption">
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionArr"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-row class="seasonFrom">
|
|
|
+ <el-col :span="12" style="border-right: 1px solid #E1E3EA;">
|
|
|
+ <div class="seasonFromHeader">
|
|
|
+ <div class="headerNameTit">
|
|
|
+ <div class="headerNameTit_left">
|
|
|
+ <span>排名</span>
|
|
|
+ <span style="margin-left: 20px">单位名称</span>
|
|
|
+ </div>
|
|
|
+ <div class="headerNameTit_right">
|
|
|
+ <span>得分</span>
|
|
|
+ <span style="margin-left: 20px">加分事项</span>
|
|
|
+ <span style="margin-left: 20px">扣分事项</span>
|
|
|
+ <span style="margin-left: 20px">管理加分</span>
|
|
|
+ <span style="margin-left: 20px">管理扣分</span>
|
|
|
+ <span style="margin-left: 20px">高于基准</span>
|
|
|
+ <span style="margin-left: 20px">低于基准</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:10px">
|
|
|
+ <div style="display: flex;" v-for="(item, index) in evaluationSeasonDataLeft" :key="index">
|
|
|
+ <div class="mainFourMsg">
|
|
|
+ <span>{{item.rank}}</span>
|
|
|
+ <span>{{item.company}}</span>
|
|
|
+ <span>{{item.score}}</span>
|
|
|
+ <div class="mainFourImg">
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.matter_heigh_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.matter_heigh === 0 ? cenImg : item.matter_heigh === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.manage_low_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.manage_height_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.manage_height === 0 ? cenImg : item.manage_height === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.manage_low_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.standard_heigh_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.standard_heigh === 0 ? cenImg : item.standard_heigh === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.standard_low_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.standard_low === 0 ? cenImg : item.standard_low === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="seasonFromHeader">
|
|
|
+ <div class="headerNameTit">
|
|
|
+ <div class="headerNameTit_left">
|
|
|
+ <span>排名</span>
|
|
|
+ <span style="margin-left: 20px">单位名称</span>
|
|
|
+ </div>
|
|
|
+ <div class="headerNameTit_right">
|
|
|
+ <span>得分</span>
|
|
|
+ <span style="margin-left: 20px">加分事项</span>
|
|
|
+ <span style="margin-left: 20px">扣分事项</span>
|
|
|
+ <span style="margin-left: 20px">管理加分</span>
|
|
|
+ <span style="margin-left: 20px">管理扣分</span>
|
|
|
+ <span style="margin-left: 20px">高于基准</span>
|
|
|
+ <span style="margin-left: 20px">低于基准</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex" v-for="(item, index) in evaluationSeasonDataRight" :key="index">
|
|
|
+ <div class="mainFourMsg">
|
|
|
+ <span>{{item.rank}}</span>
|
|
|
+ <span>{{item.company}}</span>
|
|
|
+ <span>{{item.score}}</span>
|
|
|
+ <div class="mainFourImg">
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.matter_heigh_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.matter_heigh === 0 ? cenImg : item.matter_heigh === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.manage_low_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.manage_height_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.manage_height === 0 ? cenImg : item.manage_height === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.manage_low_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.standard_heigh_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.standard_heigh === 0 ? cenImg : item.standard_heigh === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="right-start"
|
|
|
+ :title="item.company +' '+ item.score"
|
|
|
+ :width="200"
|
|
|
+ trigger="hover"
|
|
|
+ :content="item.standard_low_note"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img :src="item.standard_low === 0 ? cenImg : item.standard_low === 1 ? topImg : botImg" alt="">
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {apiGetevaluationportallist} from '../../api/api'
|
|
|
+import topImg from '../../assets/getwayImg/topNew.png'
|
|
|
+import botImg from '../../assets/getwayImg/botNew.png'
|
|
|
+import cenImg from '../../assets/getwayImg/cenNew.png'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ evaluationSeasonDataLeft: [],
|
|
|
+ evaluationSeasonDataRight: [],
|
|
|
+ optionArr: [],
|
|
|
+ optionName: '',
|
|
|
+ yearData: '',
|
|
|
+ seasonData: '',
|
|
|
+ topImg: topImg,
|
|
|
+ botImg: botImg,
|
|
|
+ cenImg: cenImg,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.optionArr = [
|
|
|
+ {
|
|
|
+ label: '火电板块',
|
|
|
+ value: 'HD'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '水电板块',
|
|
|
+ value: 'SD'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '新能源',
|
|
|
+ value: 'XNYFG'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '海外业务',
|
|
|
+ value: 'GJYE'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '煤电一体化',
|
|
|
+ value: 'MDYTH'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(name, year, season) {
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.optionName = name
|
|
|
+ this.yearData = year
|
|
|
+ this.seasonData = season
|
|
|
+ this.evaluationSeasonDataLeft = []
|
|
|
+ this.evaluationSeasonDataRight = []
|
|
|
+ this.getYearData(name, year, season)
|
|
|
+ },
|
|
|
+ changeOption(val) {
|
|
|
+ this.evaluationSeasonDataLeft = []
|
|
|
+ this.evaluationSeasonDataRight = []
|
|
|
+ this.getYearData(val, this.yearData, this.seasonData)
|
|
|
+ },
|
|
|
+ getYearData(name, year, season) {
|
|
|
+ let that = this
|
|
|
+ let params = {
|
|
|
+ binSection: name,
|
|
|
+ year: year,
|
|
|
+ season: season === '第一季度' ? '1' : season === '第二季度' ? '2' : '3'
|
|
|
+ }
|
|
|
+ apiGetevaluationportallist(params).then(datas =>{
|
|
|
+ if (datas && datas.data && datas.data.season) {
|
|
|
+ if (datas.data.season[name].length>0) {
|
|
|
+ datas.data.season[name].forEach((item, index) =>{
|
|
|
+ item.rank = index+1
|
|
|
+ })
|
|
|
+ if (datas.data.season[name].length>10) {
|
|
|
+ that.evaluationSeasonDataLeft = datas.data.season[name].splice(0, 10)
|
|
|
+ that.evaluationSeasonDataRight = datas.data.season[name]
|
|
|
+
|
|
|
+ } else {
|
|
|
+ that.evaluationSeasonDataLeft = datas.data.season[name]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.seasonLeagueTable{
|
|
|
+ .el-overlay{
|
|
|
+ .el-dialog{
|
|
|
+ margin-top: 5vh !important;
|
|
|
+ .el-dialog__header{
|
|
|
+ .seasonHeader{
|
|
|
+ width: 97%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .el-select{
|
|
|
+ width: 120px;
|
|
|
+ .el-input__inner{
|
|
|
+ height:28px;
|
|
|
+ }
|
|
|
+ .el-input__suffix{
|
|
|
+ .el-select__caret{
|
|
|
+ line-height:28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .seasonFrom{
|
|
|
+ padding: 0 20px;
|
|
|
+ .seasonFromHeader{
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #E1E3EA;
|
|
|
+ .headerNameTit{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #414141;
|
|
|
+ }
|
|
|
+ .headerTit{
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mainFourMsg{
|
|
|
+ display: flex;
|
|
|
+ margin: 0 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 33px;
|
|
|
+ background: #F6F7FA;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-top: 2px;
|
|
|
+ border-radius: 5px;
|
|
|
+ .mainFourImg{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 65%;
|
|
|
+ img{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ margin-right: 33px;
|
|
|
+ margin-left: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ position: relative;
|
|
|
+ top: 6px;
|
|
|
+ }
|
|
|
+ span:nth-child(1){
|
|
|
+ display: inline-block;
|
|
|
+ width: 5%;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 13px;
|
|
|
+ }
|
|
|
+ span:nth-child(2){
|
|
|
+ display: inline-block;
|
|
|
+ width: 33%;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ margin-right: 17px;
|
|
|
+ }
|
|
|
+ span:nth-child(3){
|
|
|
+ display: inline-block;
|
|
|
+ width: 5%;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 15px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
