BusinessBenchmark/src/components/gatewaynNewPage.vue

<template>
    <div class="gatewayNewPage">
        <el-row>
            <el-col :span="18" class="quarter">
                <div class="searchFn">
                    <el-date-picker v-model="value3" type="year" placeholder="选择年份" />
                    <div class="quarterChoose">
                        <el-icon :size="20" color="#3B7AD1"><ArrowLeft /></el-icon>
                        <span class="choose">第一季度</span>
                        <el-icon :size="20" color="#3B7AD1"><ArrowRight /></el-icon>
                    </div>
                </div>
                <div class="tableHeader">
                    <div class="headerOne"></div>
                    <div class="headerTwo">
                        <div class="headerComTit">
                            <span class="headerTwoTit">评级统计</span>
                        </div>
                    </div>
                    <div class="headerThree">
                        <div class="headerComTit">
                            <span class="headerThreeTit">年度榜</span>
                        </div>
                        <div class="headerNameTit">
                            <div class="headerNameTit_left">
                                <span>单位名称</span>
                            </div>
                            <div class="headerNameTit_right">
                                <span>级别</span>
                                <span style="margin-left: 20px">得分</span>
                            </div>
                        </div>
                    </div>
                    <div class="headerFour">
                        <div class="headerComTit">
                            <span class="headerFourTit">考评排行榜</span>
                        </div>
                        <div class="headerNameTit">
                            <div class="headerNameTit_left">
                                <span>单位名称</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>
                 <!-- v-for="it in 4" :key="it" -->
                <div class="tableMain" v-for="it in 4" :key="it">
                    <div class="mainOne">
                        <span>火电板块</span>
                    </div>
                    <div class="mainTwo">
                        <div class="echartsNum">18</div>
                        <div id="pieChart" style="height: 100px;width: 100%"></div>
                        <el-row>
                            <el-col :span="12">
                                <span class="mainTwoComColor" style="background: #F65177;"></span>
                                <span class="mainTwoComTit">A级</span>
                            </el-col>
                            <el-col :span="12">
                                <span class="mainTwoComColor" style="background: #50C14E;"></span>
                                <span class="mainTwoComTit">B级</span>
                            </el-col>
                            <el-col :span="12">
                                <span class="mainTwoComColor" style="background: #5093E1;"></span>
                                <span class="mainTwoComTit">C级</span>
                            </el-col>
                            <el-col :span="12">
                                <span class="mainTwoComColor" style="background: #9DA5BE;"></span>
                                <span class="mainTwoComTit">D级</span>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="mainThree">
                        <div class="mainMore"></div>
                        <div style="display: flex" v-for="(item, index) in cupMsgArr" :key="index">
                            <div class="mainThreeMsg">
                                <img :src="item.img" alt="">
                                <div class="msgProgress">
                                    <span>{{item.name}}</span>
                                    <span>{{item.level}}</span>
                                    <span>{{item.points}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mainFour">
                        <div class="mainMore"></div>
                        <div style="display: flex" v-for="(item, index) in chartsMsgArr" :key="index">
                            <div class="mainFourMsg">
                                <span>{{item.name}}</span>
                                <span>{{item.points}}</span>
                                <div class="mainFourImg">
                                    <img :src="item.jiaA === 0 ? cenImg : item.jiaA === 1 ? topImg : botImg" alt="">
                                    <img :src="item.jiaB === 0 ? cenImg : item.jiaB === 1 ? topImg : botImg" alt="">
                                    <img :src="item.guanA === 0 ? cenImg : item.guanA === 1 ? topImg : botImg" alt="">
                                    <img :src="item.guanB === 0 ? cenImg : item.guanB === 1 ? topImg : botImg" alt="">
                                    <img :src="item.gaoA === 0 ? cenImg : item.gaoA === 1 ? topImg : botImg" alt="">
                                    <img :src="item.gaoB === 0 ? cenImg : item.gaoB === 1 ? topImg : botImg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tableFooter">
                    <div class="footerOne">
                        <span>煤电一体化</span>
                    </div>
                    <div class="footerTwo">
                        <div style="display: flex" v-for="(item, index) in cupFootMsgArr" :key="index">
                            <div class="footerTwoMsg">
                                <img :src="item.img" alt="">
                                <div class="footerProgress">
                                    <span class="footerOneSpan">{{item.name}}</span>
                                    <el-progress percentage="80" :stroke-width="5" />
                                    <span class="footerTwoSpan">{{item.level}}</span>
                                    <span class="footerThreeSpan">{{item.points}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="footerThree">
                        <div class="mainMore"></div>
                        <div style="display: flex" v-for="(item, index) in cupFootMsgArr" :key="index">
                            <div class="footerThreeMsg" v-for="it in matterMsg" :key="it">
                                <div class="footerImg">
                                    <span>{{it}}</span>
                                    <img :src="item.jiaA === 0 ? cenImg : item.jiaA === 1 ? topImg : botImg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5" class="report">
                <div class="gateway_report">
                    <div class="reportTit">
                        <p>通告栏</p>
                    </div>
                    <div class="reportMain">
                        <div class="reportMain_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 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 {
            cupMsgArr: [],
            cupFootMsgArr: [],
            chartsMsgArr: [],
            matterMsg: ['加分事项', '扣分事项', '管理加分', '管理扣分', '高于基准', '低于基准'],
            topImg: topImg,
            botImg: botImg,
            cenImg: cenImg,
        }
    },
    created() {
        this.cupMsgArr = [
            {
                level: 'A',
                points: '134',
                img: cup1,
                name: '大港电厂（广安津能）'
            },
            {
                level: 'A',
                points: '134',
                img: cup2,
                name: '怀安热电'
            },
            {
                level: 'A',
                points: '124',
                img: cup3,
                name: '滨海电力'
            }
        ]
        this.cupFootMsgArr = [
            {
                level: 'A',
                points: '134',
                img: cup1,
                name: '大港电厂（广安津能）'
            },
            {
                level: 'A',
                points: '134',
                img: cup2,
                name: '怀安热电'
            }
        ]
        this.chartsMsgArr = [
            {
                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    
            }
        ]
    },
    mounted() {
        this.getEchartsData()
    },
    methods: {
        getEchartsData() {
            let option = {
                color: ['#F65177', '#50C14E', '#5093E1', '#9DA5BE'],
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    // emphasis: {
                    //     label: {
                    //     show: true,
                    //     fontSize: 10,
                    //     fontWeight: 'bold'
                    //     }
                    // },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' }
                    ]
                    }
                ]
            };
            // 基于准备好的dom，初始化echarts实例
            let dom = document.getElementById('pieChart');
            dom.removeAttribute("_echarts_instance_")
            let myChart = this.$echarts.init(dom);
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        },
    }
}
</script>

<style lang="less">
.gatewayNewPage{
    height: 93vh;
    width: 87vw;
    background: #EDEFF5;
    padding: 15px 20px;
    .quarter{
        background: #fff;
        border-radius: 10px;
        // padding-right: 15px;
        .searchFn{
            height: 50px;
            display: flex;
            border-bottom: 1px solid #E1E3EA;
            .el-date-editor--year{
                width: 130px;
                margin: 10px 0 0 20px;
                .el-input__wrapper{
                    background: #2C7EDC;
                    height: 30px;
                    .el-input__prefix{
                        color: #fff;
                    }
                }
            }
            ::-webkit-input-placeholder{
                color: #fff;
            }
            .quarterChoose{
                position: relative;
                left: 33%;
                top: 15px;
                width: 225px;
                display: flex;
                justify-content: space-around;
                .choose{
                    position: relative;
                    top: -1px;
                }
                .el-icon{
                    cursor: pointer;
                }
            }
        }
        .tableHeader{
            display: flex;
            border-bottom: 1px solid #E1E3EA;
            height: 75px;
            .headerComTit{
                height: 40px;
                border-bottom: 1px solid #E1E3EA;
                span{
                    font-size: 14px;
                    color: #3B7AD1;
                }
            }
            .headerNameTit{
                display: flex;
                justify-content: space-between;
                padding: 8px 20px;
                font-size: 14px;
                color: #414141;
            }
            .headerOne{
                width: 35px;
                background: #184FB4;
            }
            .headerTwo{
                width: 150px;
                border-right: 1px solid #E1E3EA;
                .headerTwoTit{
                    position: relative;
                    top: 10px;
                    left: 40px;
                }
            }
            .headerThree{
                width: 350px;
                border-right: 1px solid #E1E3EA;
                .headerThreeTit{
                    position: relative;
                    top: 10px;
                    left: 150px;
                }
            }
            .headerFour{
                width: calc(100% - 535px);
                .headerFourTit{
                    position: relative;
                    top: 10px;
                    left: 40%;
                }
            }
        }
        .tableMain{
            display: flex;
            border-bottom: 1px solid #E1E3EA;
            height: 150px;
            .mainOne{
                width: 35px;
                background: #184FB4;
                span{
                    display: inline-block;
                    width: 20px;
                    margin: 0 auto;
                    line-height: 20px;
                    font-size: 16px;
                    font-weight: bold;
                    color: #fff;
                    position: relative;
                    top: 30px;
                    left: 10px;
                }
            }
            .mainTwo{
                width: 149px;
                border-right: 1px solid #E1E3EA;
                position: relative;
                .echartsNum{
                    font-size: 16px;
                    font-weight: 600;
                    position: absolute;
                    top: 42px;
                    left: 65px;
                }
                .mainTwoComColor{
                    display: inline-block;
                    width: 6px;
                    height: 6px;
                    border-radius: 20px;
                    margin-left: 15px;
                    position: relative;
                    top: -1px;
                }
                .mainTwoComTit{
                    font-size: 14px;
                    display: inline-block;
                    margin-left: 5px;
                }
            }
            .mainThree{
                width: 350px;
                padding-top: 13px;
                border-right: 1px solid #E1E3EA;
                position: relative;
                .mainMore{
                    width: 0;
                    height: 0;
                    border-top: 10px solid transparent;
                    border-left: 10px solid #B6BBCB;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid transparent;
                    position: absolute;
                    top: -9px;
                    right: -9px;
                    transform: rotate(-45deg);
                    cursor: pointer;
                }
                .mainThreeMsg{
                    display: flex;
                    margin: 0 10px;
                    width: 100%;
                    height: 33px;
                    background: #F6F7FA;
                    margin-bottom: 8px;
                    padding-left: 10px;
                    padding-top: 2px;
                    border-radius: 5px;
                    img{
                        width: 20px;
                        height: 20px;
                        position: relative;
                        top: 5px;
                        margin-right: 10px;
                    }
                    .msgProgress{
                        margin-top: 5px;
                        display: flex;
                        width: 90%;
                        span{
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                        }
                        span:nth-child(1){
                            display: inline-block;
                            width: 70%;
                            font-weight: 400;
                            color: #666;
                            margin-right: 10px;
                        }
                        span:nth-child(2){
                            font-weight: 600;
                            margin-right: 30px;
                            color: #F65177;
                        }
                        span:nth-child(3){
                            font-weight: 600;
                            color: #666;
                        }
                    }
                }
            }
            .mainFour{
                width: calc(100% - 536px);
                padding-top: 13px;
                position: relative;
                .mainMore{
                    width: 0;
                    height: 0;
                    border-top: 10px solid transparent;
                    border-left: 10px solid #B6BBCB;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid transparent;
                    position: absolute;
                    top: -9px;
                    right: -9px;
                    transform: rotate(-45deg);
                    cursor: pointer;
                }
                .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: 26%;
                        font-weight: 400;
                        color: #666;
                        margin-right: 17px;
                    }
                    span:nth-child(2){
                        font-weight: 600;
                        margin-right: 15px;
                        color: #666;
                    }
                }
            }
        }
        .tableFooter{
            display: flex;
            height: 100px;
            .footerOne{
                width: 35px;
                background: #7D8297;
                border-radius: 0 0 0 10px;
                span{
                    display: inline-block;
                    width: 20px;
                    margin: 0 auto;
                    line-height: 16px;
                    font-size: 16px;
                    font-weight: bold;
                    color: #fff;
                    position: relative;
                    top: 10px;
                    left: 10px;
                }
            }
            .footerTwo{
                width: 500px;
                padding-top: 13px;
                border-right: 1px solid #E1E3EA;
                .footerTwoMsg{
                    display: flex;
                    margin: 0 10px;
                    width: 100%;
                    height: 33px;
                    background: #F6F7FA;
                    margin-bottom: 8px;
                    padding-left: 10px;
                    padding-top: 2px;
                    border-radius: 5px;
                    img{
                        width: 20px;
                        height: 20px;
                        position: relative;
                        top: 5px;
                        margin-right: 10px;
                    }
                    .footerProgress{
                        margin-top: 5px;
                        display: flex;
                        width: 91%;
                        span{
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                        }
                        .footerOneSpan{
                            display: inline-block;
                            width: 35%;
                            font-weight: 400;
                            color: #666;
                            margin-right: 10px;
                        }
                        .el-progress{
                            width: calc(50% - 15px);
                            padding-right: 15px;
                            position: relative;
                            top: -3px;
                            .el-progress__text{
                                display: none;
                            }
                        }
                        .footerTwoSpan{
                            font-weight: 600;
                            margin-right: 30px;
                            color: #F65177;
                        }
                        .footerThreeSpan{
                            font-weight: 600;
                            color: #666;
                        }
                    }
                }
            }
            .footerThree{
                width: calc(100% - 536px);
                padding-top: 13px;position: relative;
                .mainMore{
                    width: 0;
                    height: 0;
                    border-top: 10px solid transparent;
                    border-left: 10px solid #B6BBCB;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid transparent;
                    position: absolute;
                    top: -9px;
                    right: -9px;
                    transform: rotate(-45deg);
                    cursor: pointer;
                }
                .footerThreeMsg{
                    display: flex;
                    // margin: 0 10px;
                    margin-left: 10px;
                    margin-bottom: 8px;
                    span{
                        font-size: 14px;
                        font-weight: 400;
                        color: #666;
                        font-family: Microsoft YaHei;
                    }
                    .footerImg{
                        display: flex;
                        border-radius: 5px;
                        background: #F6F7FA;
                        span{
                            display: inline-block;
                            width: 100%;
                            height: 30px;
                            padding: 5px 11px 0;
                            position: relative;
                            top: 2px;
                        }
                        img{
                            width: 20px;
                            height: 20px;
                            position: relative;
                            top: 5px;
                            margin-right: 10px;
                            position: relative;
                            top: 7px;
                        }
                    }
                }
            }
        }
    }
    .report{
        margin-left: 20px;
        .gateway_report{
            width: 355px;
            background: #fff;
            // margin-right: 30px;
            margin-right: calc(100% - 355px);
            border-radius: 10px;
            padding-bottom: 10px;
            border: 1px solid #D6DBEA;
            .reportTit{
                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;
                }
            }
            .reportMain{
                height: 79vh !important;
                overflow-y: auto;
                .reportMain_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>