BusinessBenchmark/src/components/gateWay/gatewayNewSeasonFrom.vue

<template>
    <div class="seasonLeagueTable">
        <el-dialog v-model="dialogVisible" :fullscreen="true" :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="evaluationSeasonDataRight.length>0?12:24" :style="evaluationSeasonDataRight.length>0?'border-right: 1px solid #E1E3EA;':''">
                    <el-table :data="evaluationSeasonDataLeft" style="width: 100%">
                        <el-table-column label="排名" prop="rank" width="50" align="center" />
                        <el-table-column label="单位名称">
                            <template #default="scope">
                                <span class="companyStyle">{{scope.row.company}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="得分" prop="score" align="center" />
                        <el-table-column label="加分事项" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.matter_heigh_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.matter_heigh === 0 ? cenImg : scope.row.matter_heigh === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column> 
                        <el-table-column label="扣分事项" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.matter_low_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.matter_low === 0 ? cenImg : scope.row.matter_low === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                                
                            </template>
                        </el-table-column>
                        <el-table-column label="管理加分" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.manage_heigh_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.manage_heigh === 0 ? cenImg : scope.row.manage_heigh === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="管理扣分" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.manage_low_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.manage_low === 0 ? cenImg : scope.row.manage_low === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                                
                            </template>
                        </el-table-column>
                        <el-table-column label="高于基准" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.standard_heigh_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.standard_heigh === 0 ? cenImg : scope.row.standard_heigh === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="低于基准" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.standard_low_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.standard_low === 0 ? cenImg : scope.row.standard_low === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="12" v-if="evaluationSeasonDataRight.length>0">
                    <el-table :data="evaluationSeasonDataRight" style="width: 100%">
                        <el-table-column label="排名" prop="rank" width="50" align="center" />
                        <el-table-column label="单位名称" prop="company">
                            <template #default="scope">
                                <span class="companyStyle">{{scope.row.company}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="得分" prop="score" align="center" />
                        <el-table-column label="加分事项" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.matter_heigh_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.matter_heigh === 0 ? cenImg : scope.row.matter_heigh === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column> 
                        <el-table-column label="扣分事项" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.matter_low_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.matter_low === 0 ? cenImg : scope.row.matter_low === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                                
                            </template>
                        </el-table-column>
                        <el-table-column label="管理加分" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.manage_heigh_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.manage_heigh === 0 ? cenImg : scope.row.manage_heigh === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="管理扣分" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.manage_low_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.manage_low === 0 ? cenImg : scope.row.manage_low === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                                
                            </template>
                        </el-table-column>
                        <el-table-column label="高于基准" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.standard_heigh_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.standard_heigh === 0 ? cenImg : scope.row.standard_heigh === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="低于基准" align="center">
                            <template #default="scope">
                                <el-popover
                                    placement="right-start"
                                    :title="scope.row.company +' '+ scope.row.score"
                                    :width="200"
                                    trigger="hover"
                                    :content="scope.row.standard_low_note"
                                >
                                    <template #reference>
                                        <img :src="scope.row.standard_low === 0 ? cenImg : scope.row.standard_low === 1 ? topImg : botImg" alt="">
                                    </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import {apiGetevaluationportallist} from '../../api/api'
import topImg from '../../assets/getwayImg/topNewS.png'
import botImg from '../../assets/getwayImg/botNewS.png'
import cenImg from '../../assets/getwayImg/cenNew.png'
export default {
    data() {
        return {
            dialogVisible: false,
            evaluationSeasonDataLeft: [],
            evaluationSeasonDataRight: [],
            optionArr: [],
            optionName: '',
            newyearData: '',
            yearData: '',
            seasonData: '',
            topImg: topImg,
            botImg: botImg,
            cenImg: cenImg,
            winPix: window.devicePixelRatio,
            innerWidth: window.innerWidth
        }
    },
    created() {
        this.optionArr = [
            {
                label: '火电板块',
                value: 'HD'
            },
            {
                label: '水电板块',
                value: 'SD'
            },
            {
                label: '新能源',
                value: 'XNYFG'
            },
            {
                label: '海外业务',
                value: 'GJYW'
            },
            {
                label: '煤电一体化',
                value: 'MDYTH'
            },
            {
                label: '综合支持',
                value: 'ZHZC'
            }
        ]
    },
    methods: {
        init(name, newyear, year, season) {
            this.dialogVisible = true
            this.optionName = name
            this.newyearData = newyear
            this.yearData = year
            this.seasonData = season
            this.evaluationSeasonDataLeft = []
            this.evaluationSeasonDataRight = []
            this.getYearData(name, newyear, year, season)
        },
        seasonWidth() {
            if (this.innerWidth < 1800) {
                if (this.evaluationSeasonDataRight.length>0) {
                    return '97vw'
                } else {
                    return '55vw'
                }
            } else {
                if (this.winPix === 1.25 || this.innerWidth < 1800) {
                    if (this.evaluationSeasonDataRight.length>0) {
                        return '97vw'
                    } else {
                        return '55vw'
                    }
                } else {
                    if (this.evaluationSeasonDataRight.length>0) {
                        return '80vw'
                    } else {
                        return '40vw'
                    }
                }
            }
        },
        changeOption(val) {
            this.evaluationSeasonDataLeft = []
            this.evaluationSeasonDataRight = []
            this.getYearData(val, this.newyearData, this.yearData, this.seasonData)
        },
        getYearData(name, newyear, year, season) {
            let that = this
            let params = {
                binSection: name,
                newyear: newyear,
                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
                            item.score = item.score.toFixed(2)
                        })
                        if (datas.data.season[name].length>15) {
                            that.evaluationSeasonDataLeft = datas.data.season[name].splice(0, 15)
                            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;
                .el-table{
                    .el-table__inner-wrapper{
                        .el-table__body-wrapper{
                            .el-table__body{
                                .companyStyle{
                                    width: 100%;
                                    display: inline-block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>