BusinessBenchmark/src/components/gateWay/gatewayNewYearFrom.vue

<template>
    <div class="annualLeagueTable">
        <el-dialog v-model="dialogVisible" :width="yearWidth()" :close-on-click-modal="false">
            <template #header>
                <div class="yearHeader">
                    <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="yearFrom">
                <el-col :span="evaluationYearDataRight.length>0?12:24" :style="evaluationYearDataRight.length>0?'border-right: 1px solid #E1E3EA;': ''">
                    <div class="yearFromHeader">
                        <div class="headerNameTit" :style="winPix === 1.25?'padding: 8px 45px 8px 20px;':''">
                            <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>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex" v-for="(item, index) in evaluationYearDataLeft" :key="index">
                        <div class="yearFromMsg">
                            <div class="msgProgress">
                                <span :style="rankStyle()">{{item.rank}}</span>
                                <span :style="companyStyle()">{{item.company}}</span>
                                <span>{{item.grade}}</span>
                                <span :style="winPix === 1.25 || innerWidth < 1920?'width:20%':''">{{item.score}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12" v-if="evaluationYearDataRight.length>0">
                    <div class="yearFromHeader">
                        <div class="headerNameTit" :style="winPix === 1.25 || innerWidth < 1920?'padding: 8px 45px 8px 20px;':''">
                            <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>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex" v-for="(item, index) in evaluationYearDataRight" :key="index">
                        <div class="yearFromMsg">
                            <div class="msgProgress">
                                <span :style="rankStyle()">{{item.rank}}</span>
                                <span :style="companyStyle()">{{item.company}}</span>
                                <span>{{item.grade}}</span>
                                <span :style="winPix === 1.25 || innerWidth < 1920?'width:20%':''">{{item.score}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import {apiGetevaluationportallist} from '../../api/api'
export default {
    data() {
        return {
            dialogVisible: false,
            evaluationYearDataLeft: [],
            evaluationYearDataRight: [],
            optionArr: [],
            optionName: '',
            yearData: '',
            seasonData: '',
            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, year, season) {
            this.dialogVisible = true
            this.optionName = name
            this.yearData = year
            this.seasonData = season
            this.evaluationYearDataLeft = []
            this.evaluationYearDataRight = []
            this.getYearData(name, year, season)
        },
        yearWidth() {
            if (this.innerWidth < 1920) {
                if (this.evaluationYearDataRight.length>0) {
                    return '60vw'
                } else {
                    return '33vw'
                }
            } else {
                if (this.winPix === 1.25) {
                    if (this.evaluationYearDataRight.length>0) {
                        return '60vw'
                    } else {
                        return '33vw'
                    }
                } else {
                    if (this.evaluationYearDataRight.length>0) {
                        return '50vw'
                    } else {
                        return '28vw'
                    }
                }
            }
        },
        rankStyle() {
            if (this.winPix === 1.25) {
                return 'width: 13%'
            }
        },
        companyStyle() {
            if (this.winPix === 1.25) {
                return 'width: 68%'
            }
        },
        changeOption(val) {
            this.evaluationYearDataLeft = []
            this.evaluationYearDataRight = []
            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.year) {
                    if (datas.data.year[name].length>0) {
                        datas.data.year[name].forEach((item, index) =>{
                            item.rank = index+1
                        })
                        if (datas.data.year[name].length>15) {
                            that.evaluationYearDataLeft = datas.data.year[name].splice(0, 15)
                            that.evaluationYearDataRight = datas.data.year[name]
                            
                        } else {
                            that.evaluationYearDataLeft = datas.data.year[name]
                        }
                    }
                }
            })
        }
    }
}
</script>

<style lang="less">
.annualLeagueTable{
    .el-overlay{
        .el-dialog{
            margin-top: 5vh !important;
            .el-dialog__header{
                .yearHeader{
                    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;
                            }
                        }
                    }
                }
            }
            .el-dialog__body{
                padding: 20px 0;
                .yearFrom{
                    padding: 0 20px;
                    .yearFromHeader{
                        width: 100%;
                        border-bottom: 1px solid #E1E3EA;
                        .headerNameTit{
                            display: flex;
                            justify-content: space-between;
                            // padding: 8px 20px;
                            padding: 8px 36px 8px 20px;
                            font-size: 14px;
                            color: #414141;
                        }
                        .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;
                            width: 100%;
                            span{
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                            }
                            span:nth-child(1){
                                display: inline-block;
                                width: 10%;
                                font-weight: 600;
                                color: #666;
                                margin-left: 10px;
                            }
                            span:nth-child(2){
                                display: inline-block;
                                width: 72%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-weight: 400;
                                color: #666;
                                margin-right: 20px;
                            }
                            span:nth-child(3){
                                font-weight: 600;
                                margin-right: 30px;
                                color: #F65177;
                            }
                            span:nth-child(4){
                                display: inline-block;
                                width: 13%;
                                font-weight: 600;
                                color: #666;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>