BusinessBenchmark/src/components/gatewayPage.vue

<template>
    <div class="gatewayPage">
        <el-row class="gateway_top">
            <el-col :span="6" v-for="it in titleMsgArr" :key="it.isClass" @click="changeTit(it)">
                <div class="comClass" :class="!it.showClick ? it.isClass : it.isClassC">
                    <div class="huodian_tit">
                        <img :src="it.img" v-if="!it.showClick">
                        <img :src="it.clickImg" v-else>
                        <span :style="!it.showClick?'color: #333;': 'color: #fff;'">{{it.isName}}</span>
                    </div>
                    <div class="huodian_main">
                        <div v-for="item in huodianArr" :key="item" style="margin-right: 15px">
                            <p :style="!it.showClick ? {'color': it.color} : 'color: #fff;'">{{item.Num}}</p>
                            <p :style="!it.showClick?'color: #999;': 'color: #fff;'">{{item.Name}}</p>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row class="gateway_bot">
            <el-col :span="6">
                <div class="gateway_bot_left">
                    <div class="bot_leftTit">
                        <p>年度A级企业排行</p>
                        <el-select v-model="value" class="m-2" placeholder="请选择分类" size="large">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="bot_leftMain">
                        <div style="display: flex;margin-bottom:25px" v-for="(item, index) in cupMsgArr" :key="index">
                            <div class="mainImg">
                                <img :src="item.img" alt="" v-if="item.img">
                                <span v-else>{{index+1}}</span>
                            </div>
                            <div class="mainMsg">
                                <div class="msgProgress">
                                    <el-progress :percentage="item.progress" :stroke-width="10" />
                                </div>
                                <div class="msgProgressT">
                                    <span>{{item.name}}</span>
                                    <span>{{item.level}}级</span>
                                    <span>{{item.points}}分</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="gateway_bot_center">
                    <div class="bot_Tit">
                        <p>考评排行榜</p>
                        <div style="display:flex">
                            <el-select v-model="value" class="m-2" placeholder="选择季度" size="large">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                            <el-select v-model="value" class="m-2" placeholder="选择月份" size="large">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <el-table :data="tableData" stripe  style="width: 100%">
                        <el-table-column type="index" label="排名" width="50" align="center" />
                        <el-table-column prop="name" label="单位名称" />
                        <el-table-column prop="points" label="得分"  width="50" />
                        <el-table-column prop="address" label="加分事项" width="80" align="center">
                            <template #default="scope">
                                <img :src="cenImg" v-if="scope.row.jiaA === 0">
                                <img :src="topImg" v-else-if="scope.row.jiaA === 1">
                                <img :src="botImg" v-else>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="扣分事项"  width="80" align="center">
                            <template #default="scope">
                                <img :src="cenImg" v-if="scope.row.jiaB === 0">
                                <img :src="topImg" v-else-if="scope.row.jiaB === 1">
                                <img :src="botImg" v-else>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="管理加分项" width="90" align="center">
                            <template #default="scope">
                                <img :src="cenImg" v-if="scope.row.guanA === 0">
                                <img :src="topImg" v-else-if="scope.row.guanA === 1">
                                <img :src="botImg" v-else>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="管理扣分项" width="90"  align="center">
                            <template #default="scope">
                                <img :src="cenImg" v-if="scope.row.guanB === 0">
                                <img :src="topImg" v-else-if="scope.row.guanB === 1">
                                <img :src="botImg" v-else>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="高于基准分" width="90" align="center">
                            <template #default="scope">
                                <img :src="cenImg" v-if="scope.row.gaoA === 0">
                                <img :src="topImg" v-else-if="scope.row.gaoA === 1">
                                <img :src="botImg" v-else>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="低于基准分" width="90" align="center">
                            <template #default="scope">
                                <img :src="cenImg" v-if="scope.row.gaoB === 0">
                                <img :src="topImg" v-else-if="scope.row.gaoB === 1">
                                <img :src="botImg" v-else>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="gateway_bot_right">
                    <div class="bot_rightTit">
                        <p>通告栏</p>
                    </div>
                    <div class="bot_rightMain">
                        <div class="bot_rightMain_msg" v-for="it in 10" :key="it">
                            <div class="rightDiv"></div>
                            <div class="rightTitMsg">
                                <p>关于2022年度各单位年度考评得分</p>
                                <div style="margin-top: 5px">
                                    <span style="margin-right: 10px">2023-01-15</span>
                                    <span>组织人事部</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import huodian from '../assets/getwayImg/huodianIcon.png'
import shuidian from '../assets/getwayImg/shuidianIcon.png'
import xinnengyuan from '../assets/getwayImg/xinnengyuanIcon.png'
import meidian from '../assets/getwayImg/meidianIcon.png'

import huodianC from '../assets/getwayImg/huodianIconC.png'
import shuidianC from '../assets/getwayImg/shuidianIconC.png'
import xinnengyuanC from '../assets/getwayImg/xinnengyuanIconC.png'
import meidianC from '../assets/getwayImg/meidianIconC.png'

import cup1 from '../assets/getwayImg/cup1.png'
import cup2 from '../assets/getwayImg/cup2.png'
import cup3 from '../assets/getwayImg/cup3.png'

import topImg from '../assets/getwayImg/top.png'
import botImg from '../assets/getwayImg/bot.png'
import cenImg from '../assets/getwayImg/cen.png'

export default {
    data() {
        return {
            huodianArr: [],
            titleMsgArr: [],
            cupMsgArr: [],
            tableData: [],
            topImg: topImg,
            botImg: botImg,
            cenImg: cenImg,
        }
    },
    created() {
        this.titleMsgArr = [
            {
                isClass: 'huodian',
                isClassC: 'huodianC',
                isName: '火电',
                img: huodian,
                clickImg: huodianC,
                color: '#F65177',
                showClick: false
            },
            {
                isClass: 'shuidian',
                isClassC: 'shuidianC',
                isName: '水电',
                img: shuidian,
                clickImg: shuidianC,
                color: '#3B7AD1',
                showClick: false
            },
            {
                isClass: 'xinnengyuan',
                isClassC: 'xinnengyuanC',
                isName: '新能源',
                img: xinnengyuan,
                clickImg: xinnengyuanC,
                color: '#50C14E',
                showClick: false
            },
            {
                isClass: 'meidian',
                isClassC: 'meidianC',
                isName: '煤电一体化',
                img: meidian,
                clickImg: meidianC,
                color: '#F5A623',
                showClick: false
            },
        ]
        this.huodianArr = [
            {
                Num: 32,
                Name: 'A级单位'
            },
            {
                Num: 20,
                Name: 'B级单位'
            },
            {
                Num: 5,
                Name: 'C级单位'
            },
            {
                Num: 16,
                Name: 'D级单位'
            }
        ]
        this.cupMsgArr = [
            {
                progress: '100',
                level: 'A',
                points: '134',
                name: '大港电厂（广安津能）'
            },
            {
                progress: '100',
                level: 'A',
                points: '134',
                name: '怀安热电'
            },
            {
                progress: '90',
                level: 'A',
                points: '124',
                name: '滨海电力'
            },
            {
                progress: '88',
                level: 'A',
                points: '120',
                name: '秦皇岛公司'
            },
            {
                progress: '80',
                level: 'A',
                points: '111',
                name: '胜利电厂'
            },
            {
                progress: '76',
                level: 'A',
                points: '110',
                name: '宣威分公司'
            },
            {
                progress: '70',
                level: 'A',
                points: '106',
                name: '大同公司（大二厂）'
            },
            {
                progress: '65',
                level: 'A',
                points: '102',
                name: '廊坊热电'
            },
            {
                progress: '60',
                level: 'A',
                points: '96',
                name: '滨海电力（天津洁能）'
            },
            {
                progress: '55',
                level: 'A',
                points: '92',
                name: '胜利电厂'
            },
        ]
        this.tableData = [
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
            {
                name: '中国国电电力上海庙公司',
                points: '134',
                jiaA: 1,
                jiaB: 2,
                guanA: 1,
                guanB: 0,
                gaoA: 1,
                gaoB: 0    
            },
        ]
        this.cupMsgArr.forEach((item, index) =>{
            if (index === 0) {
                item.img = cup1
            } else if (index === 1) {
                item.img = cup2
            } else if (index === 2) {
                item.img = cup3
            }
        })
    },
    mounted() {

    },
    methods: {
        changeTit(it) {
            this.titleMsgArr.forEach(item =>{
                item.showClick = false
                if (item.isName === it.isName) {
                    item.showClick = true
                }
            })
        }
    }
}
</script>

<style lang="less">
.gatewayPage{
    height: 93vh;
    width: 87vw;
    background: #EDEFF5;
    .gateway_top{
        padding: 24px 0 16px 26px;
        .comClass{
            width: 380px;
            height: 120px;
            .huodian_tit{
                img {
                    margin: 13px 7px 5px 22px;
                }
                span{
                    position: relative;
                    top: -8px;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    
                }
            }
            .huodian_main{
                display: flex;
                padding-left: 20px;
                p:nth-child(1){
                    font-size: 30px;
                    font-family: PangMenZhengDao-3;
                    font-weight: 600;
                }
                p:nth-child(2){
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                }
            }
        }
        .huodian{
            background-image: url('../assets/getwayImg/huodian.png');
        }
        .huodianC{
            background-image: url('../assets/getwayImg/huodianC.png');
        }
        .shuidian{
            background-image: url('../assets/getwayImg/shuidian.png');
        }
        .shuidianC{
            background-image: url('../assets/getwayImg/shuidianC.png');
        }
        .xinnengyuan{
            background-image: url('../assets/getwayImg/xinnengyuan.png');
        }
        .xinnengyuanC{
            background-image: url('../assets/getwayImg/xinnengyuanC.png');
        }
        .meidian{
            background-image: url('../assets/getwayImg/meidian.png');
        }
        .meidianC{
            background-image: url('../assets/getwayImg/meidianC.png');
        }
    }
    .gateway_bot{
        padding: 15px 0 16px 26px;
        .gateway_bot_left{
            background: #fff;
            margin-right: 30px;
            border-radius: 10px;
            padding-left: 25px;
            padding-bottom: 10px;
            border: 1px solid #E1E3EA;
            .bot_leftTit{
                padding: 21px 0 10px 0;
                display: flex;
                justify-content: space-between;
                p{
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #3B7AD1;
                }
                .el-select{
                    width: 130px;
                    margin-right: 30px;
                }
            }
            .bot_leftMain{
                height: 62vh !important;
                overflow: auto;
                padding-top: 20px;
                .mainImg{
                    position: relative;
                    top: -3px;
                    span{
                        text-align: center;
                        line-height: 32px;
                        font-size: 16px;
                        color: #333333;
                        font-weight: 400;
                        font-family: Microsoft YaHei;
                        display: inline-block;
                        width: 32px;
                        height: 32px;
                        background: #EDEFF5;
                        border-radius: 50%;
                    }
                }
                .mainMsg{
                    margin-left: 10px;
                    width: 100%;
                    .msgProgress{
                        .el-progress{
                            width: 90%;
                            .el-progress__text{
                                display: none;
                            }
                        }
                    }
                    .msgProgressT{
                        margin-top: 5px;
                        span{
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                        }
                        span:nth-child(1){
                            display: inline-block;
                            width: 65%;
                            font-weight: 400;
                            color: #999999;
                        }
                        span:nth-child(2){
                            font-weight: 600;
                            margin-right: 15px;
                            color: #333;
                        }
                        span:nth-child(3){
                            font-weight: 600;
                            color: #333;
                        }
                    }
                }
            }
        }
        .gateway_bot_center{
            background: #fff;
            margin-right: 30px;
            border-radius: 10px;
            padding: 0 25px;
            padding-bottom: 10px;
            border: 1px solid #E1E3EA;
            .bot_Tit{
                padding: 21px 0 10px 0;
                display: flex;
                justify-content: space-between;
                p{
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #3B7AD1;
                }
                .el-select{
                    width: 130px;
                    margin-right: 10px;
                }
            }
            .el-table{
                .el-table__body-wrapper{
                    height: 59vh !important;
                }
            }
        }
        .gateway_bot_right{
            background: #fff;
            margin-right: 30px;
            border-radius: 10px;
            padding-bottom: 10px;
            border: 1px solid #D6DBEA;
            .bot_rightTit{
                padding: 21px 25px 10px 25px;
                background: #E3EFFF;
                border-radius: 10px 10px 0px 0px;
                p{
                    font-size: 18px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #3B7AD1;
                }
            }
            .bot_rightMain{
                height: 65vh !important;
                overflow-y: auto;
                .bot_rightMain_msg{
                    display: flex;
                    padding: 25px 0 25px 27px;
                    border-bottom: 1px solid #D6DBEA;
                    .rightDiv{
                        width: 4px;
                        height: 40px;
                        background: #4883D4;
                        border-radius: 2px;
                        position: relative;
                        top: 2px;
                    }
                    .rightTitMsg{
                        margin-left: 15px;
                        p{
                            width: 300px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 16px;
                            font-family: Microsoft YaHei;
                            font-weight: bold;
                            color: #333333;
                        }
                        span{
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #8991B0;
                        }
                    }
                }
            }
        }
    }
}
</style>