BusinessBenchmark/src/components/gateWay/gatewayNewSeasonFrom.vue

<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>