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="changeYear" type="year" value-format="YYYY" placeholder="选择年份"
                        @change="changeYearFn" :style="getPickerSty()" />
                    <div class="quarterChoose">
                        <el-icon :size="20" color="#3B7AD1" @click="arrowLeft">
                            <ArrowLeft />
                        </el-icon>
                        <span class="choose">{{seasonStr}}</span>
                        <el-icon :size="20" color="#3B7AD1" @click="arrowRight">
                            <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="headerNameForeTit">
                            <div class="headerNameForeTit_left">
                                <span>单位名称</span>
                            </div>
                            <div class="headerNameForeTit_right">
                                <span>得分</span>
                                <span>加分事项</span>
                                <span>扣分事项</span>
                                <span>管理加分</span>
                                <span>管理扣分</span>
                                <span>高于基准</span>
                                <span>低于基准</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- v-for="it in 4" :key="it" -->
                <div class="tableMain" v-for="(it, index) in cupDataYearArr.section" :key="index">
                    <div class="mainOne">
                        <span :style="getMainOneSty()">{{it.name}}</span>
                    </div>
                    <div class="mainTwo">
                        <!-- <div class="echartsNum" :style="it.echartsData.allNum < 10 ? 'left:70px': ''">
                            {{it.echartsData.allNum}}</div> -->
                        <div :id="'pieChart'+index" style="height: 100px;width: 100%"></div>
                        <el-row class="mainTwoMsg" :style="getPos()">
                            <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" @click="yearSeeMore(it.nameEn, 'year')"></div>
                        <div style="display: flex" v-for="(item, index) in it.tableDatas" :key="index">
                            <div class="mainThreeMsg">
                                <img :src="item.img" alt="">
                                <div class="msgProgress">
                                    <span :style="winPix === 1.25?'font-size: 12px;width: 65%':''">{{item.company}}</span>
                                    <span>{{item.grade}}</span>
                                    <span :style="winPix === 1.25?'width: 25%':''">{{item.score}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mainFour">
                        <div class="mainMore" @click="yearSeeMore(it.nameEn, 'season')"></div>
                        <div style="display: flex" v-for="(item, index) in it.section" :key="index">
                            <div class="mainFourMsg">
                                <span class="mainFourcompany" :style="getFooter12Sty()">{{item.company}}</span>
                                <div class="mainFourImg">
                                    <span class="mainFourImgSpan">{{item.score}}</span>
                                    <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.matter_low_note">
                                        <template #reference>
                                            <img :src="item.matter_low === 0 ? cenImg : item.matter_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_heigh_note">
                                        <template #reference>
                                            <img :src="item.manage_heigh === 0 ? cenImg : item.manage_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.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>
                </div>
                <div class="tableFooter">
                    <div class="footerOne">
                        <span :style="getFooterOneSty()">煤电一体化</span>
                    </div>
                    <div class="footerTwo">
                        <div style="display: flex" v-for="(item, index) in cupDataYearArr.integration" :key="index">
                            <div class="footerTwoMsg">
                                <img :src="item.img" alt="">
                                <div class="footerProgress">
                                    <span class="footerOneSpan" :style="getFooter12Sty()">{{item.company}}</span>
                                    <el-progress :percentage="Math.floor((item.score/item.base_score)*100)"
                                        :stroke-width="5" />
                                    <span class="footerTwoSpan">{{item.grade}}</span>
                                    <span class="footerThreeSpan">{{item.score}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="footerThree">
                        <div class="mainMore" @click="yearSeeMore(it.nameEn, 'season')"></div>
                        <div style="display: flex; justify-content: space-between;width: 100%"
                            v-for="(item, index) in cupDataSeasonArr.integration" :key="index">
                            <div class="footerThreeMsg" v-for="it in matterMsg" :key="it">
                                <div class="footerImg">
                                    <span :style="getfooterSpan()">{{it}}</span>
                                    <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"
                                                v-if="it === '加分事项'">
                                        </template>
                                    </el-popover>
                                    <el-popover placement="right-start" :title="item.company +' '+ item.score"
                                        :width="200" trigger="hover" :content="item.matter_low_note">
                                        <template #reference>
                                            <img :src="item.matter_low === 0 ? cenImg : item.matter_low === 1 ? topImg : botImg"
                                                v-if="it === '扣分事项'">
                                        </template>
                                    </el-popover>
                                    <el-popover placement="right-start" :title="item.company +' '+ item.score"
                                        :width="200" trigger="hover" :content="item.manage_heigh_note">
                                        <template #reference>
                                            <img :src="item.manage_heigh === 0 ? cenImg : item.manage_heigh === 1 ? topImg : botImg"
                                                v-if="it === '管理加分'">
                                        </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"
                                                v-if="it === '管理扣分'">
                                        </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"
                                                v-if="it === '高于基准'">
                                        </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"
                                                v-if="it === '低于基准'">
                                        </template>
                                    </el-popover>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="5" class="report">
                <div class="gateway_report">
                    <div class="reportTit">
                        <p :style="winPix === 1.25? 'font-size: 16px;':''">通告栏</p>
                        <el-icon :size="20" color="#3B7AD1" :style="winPix === 1.25? 'left: 80px;':''"
                            @click="watchAllNotification">
                            <Plus />
                        </el-icon>
                    </div>
                    <div class="reportMain">
                        <div class="reportMain_msg" v-for="it in noticeData" :key="it.id">
                            <div class="rightDiv"></div>
                            <div class="rightTitMsg">
                                <p @click="watchDetail(it)" style="cursor:pointer">{{it.noticeTitle}}</p>
                                <div style="margin-top: 5px; display: flex">
                                    <span
                                        style="margin-right: 10px">{{it.createTime.substring(0, it.createTime.indexOf(' '))}}</span>
                                    <span class="rightTwoSpanMsg"
                                        :style="winPix === 1.25? 'width: 50%;':''">{{it.releaseDeptName}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <year-from ref="yearFrom"></year-from>
        <season-from ref="seasonFrom"></season-from>
        <notification-detail ref="notificationDetail"></notification-detail>
        <notification-all-data ref="notificationAllData"></notification-all-data>
    </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/topNew.png'
    import botImg from '../assets/getwayImg/botNew.png'
    import cenImg from '../assets/getwayImg/cenNew.png'

    import {
        apiGetevaluationportallist,apiGetevaluationportalhomeSeason,
        apiGetevaluationCircularDisplaylist
    } from '../api/api'

    import yearFrom from './gateWay/gatewayNewYearFrom.vue'
    import seasonFrom from './gateWay/gatewayNewSeasonFrom.vue'
    import notificationDetail from './gateWay/gateWayNotificationDetail.vue'
    import NotificationAllData from './gateWay/gateWayNotificationAllData.vue'
    export default {
        components: {
            yearFrom,
            seasonFrom,
            notificationDetail,
            NotificationAllData
        },
        data() {
            return {
                noticeData: [],
                cupDataYearArr: {
                    section: [],
                    integration: []
                },
                cupDataSeasonArr: {
                    section: [],
                    integration: []
                },
                cupFootMsgArr: [],
                matterMsg: ['加分事项', '扣分事项', '管理加分', '管理扣分', '高于基准', '低于基准'],
                topImg: topImg,
                botImg: botImg,
                cenImg: cenImg,
                changeYear: '',
                seasonStr: '',
                seasonArr: ['第一季度', '第二季度', '第三季度'],
                winPix: window.devicePixelRatio
            }
        },
        created() {
            this.cupFootMsgArr = [{
                    level: 'A',
                    points: '134',
                    img: cup1,
                    name: '大港电厂（广安津能）'
                },
                {
                    level: 'A',
                    points: '134',
                    img: cup2,
                    name: '怀安热电'
                }
            ]
        },
        mounted() {
            this.getYearSeasonData()
            this.getDeptNoticeData()
        },
        methods: {
            // 获取首页年份和季度数据
            getYearSeasonData() {
                let that = this
                apiGetevaluationportalhomeSeason().then(datas =>{
                    if (datas.success) {
                        if (datas.data) {
                            that.changeYear = datas.data.year
                            if (datas.data.season === '1') {
                                that.seasonStr = '第一季度'
                            } else if (datas.data.season === '2') {
                                that.seasonStr = '第二季度'
                            } else {
                                that.seasonStr = '第三季度'
                            }
                        }
                    } else {
                        that.changeYear = (new Date().getFullYear() - 1).toString()
                        that.seasonStr = '第一季度'
                    }
                    that.getGateWayData()
                })
            },
            getDeptNoticeData() {
                let that = this
                let userMes = JSON.parse(window.sessionStorage.getItem('user'))
                if (userMes.deptId) {
                    let params = {
                        deptId: userMes.deptId,
                        noticeTitle: ''
                    }
                    apiGetevaluationCircularDisplaylist(params).then(datas => {
                        if (datas && datas.data) {
                            that.noticeData = datas.data
                        }
                    })
                }
            },
            getPos() {
                if (this.winPix === 1.25) {
                    return 'top: -15%;'
                }
            },
            getPickerSty() {
                if (this.winPix === 1.25) {
                    return 'margin: 5px 0 0 20px;'
                }
            },
            getMainOneSty() {
                if (this.winPix === 1.25) {
                    return 'font-size: 14px'
                }
            },
            getFooterOneSty() {
                if (this.winPix === 1.25) {
                    return 'font-size: 12px;line-height: 12px;'
                }
            },
            getFooter12Sty() {
                if (this.winPix === 1.25) {
                    return 'font-size: 12px'
                }
            },
            getfooterSpan() {
                if (this.winPix === 1.25) {
                    return 'width: 3.4vw;padding: 5px 3px 0;'
                }
            },
            changeYearFn(val) {
                this.changeYear = val
                this.cupDataYearArr = {
                    section: [],
                    integration: []
                }
                this.cupDataSeasonArr = {
                    section: [],
                    integration: []
                }
                this.getGateWayData()
            },
            watchDetail(row) {
                this.$refs.notificationDetail.init(row)
            },
            watchAllNotification() {
                this.$refs.notificationAllData.init()
            },
            arrowLeft() {
                if (this.seasonStr === '第一季度') {
                    this.seasonStr = '第三季度'
                } else if (this.seasonStr === '第二季度') {
                    this.seasonStr = '第一季度'
                } else if (this.seasonStr === '第三季度') {
                    this.seasonStr = '第二季度'
                }
                this.cupDataYearArr = {
                    section: [],
                    integration: []
                }
                this.cupDataSeasonArr = {
                    section: [],
                    integration: []
                }
                this.getGateWayData()
            },
            arrowRight() {
                if (this.seasonStr === '第一季度') {
                    this.seasonStr = '第二季度'
                } else if (this.seasonStr === '第二季度') {
                    this.seasonStr = '第三季度'
                } else if (this.seasonStr === '第三季度') {
                    this.seasonStr = '第一季度'
                }
                this.cupDataYearArr = {
                    section: [],
                    integration: []
                }
                this.cupDataSeasonArr = {
                    section: [],
                    integration: []
                }
                this.getGateWayData()
            },
            // 获取首页数据
            getGateWayData() {
                let that = this
                let params = {
                    binSection: '',
                    year: that.changeYear,
                    season: that.seasonStr === '第一季度' ? '1' : that.seasonStr === '第二季度' ? '2' : '3'
                }
                apiGetevaluationportallist(params).then(datas => {
                    if (datas && datas.data) {
                        let secArr = ['HD', 'SD', 'XNYFG', 'GJYW', 'MDYTH']
                        secArr.forEach(item => {
                            for (let i in datas.data.year) {
                                let it = datas.data.year[i]
                                if (item === i && i !== 'MDYTH') {
                                    let gradeA = 0
                                    let gradeB = 0
                                    let gradeC = 0
                                    let gradeD = 0
                                    let tableData = []
                                    it.forEach((iv, index) => {
                                        if (index < 3) {
                                            let obj = iv
                                            if (index === 0) {
                                                obj.img = cup1
                                            } else if (index === 1) {
                                                obj.img = cup2
                                            } else if (index === 2) {
                                                obj.img = cup3
                                            }
                                            tableData.push(iv)
                                        }
                                        if (iv.grade === 'A') {
                                            gradeA++
                                        } else if (iv.grade === 'B') {
                                            gradeB++
                                        } else if (iv.grade === 'C') {
                                            gradeC++
                                        } else if (iv.grade === 'D') {
                                            gradeD++
                                        }
                                    })
                                    let obj = {
                                        name: item === 'HD' ? '火电板块' : item === 'SD' ? '水电板块' :
                                            item === 'XNYFG' ? '新能源' : '海外业务',
                                        nameEn: item,
                                        echartsData: {
                                            allNum: it.length,
                                            echarts: [{
                                                    value: gradeA,
                                                    name: 'A类'
                                                },
                                                {
                                                    value: gradeB,
                                                    name: 'B类'
                                                },
                                                {
                                                    value: gradeC,
                                                    name: 'C类'
                                                },
                                                {
                                                    value: gradeD,
                                                    name: 'D类'
                                                }
                                            ]
                                        },
                                        tableDatas: tableData,
                                        allTableData: it,
                                        section: [],
                                        sectionAll: []
                                    }
                                    that.cupDataYearArr.section.push(obj)
                                } else if (item === i && i === 'MDYTH') {
                                    it.forEach((iv, index) => {
                                        if (index < 2) {
                                            if (index === 0) {
                                                iv.img = cup1
                                            } else if (index === 1) {
                                                iv.img = cup2
                                            }
                                            that.cupDataYearArr.integration.push(iv)
                                        }
                                    })
                                }
                            }
                        })
                        that.cupDataYearArr.section.forEach(item => {
                            for (let i in datas.data.season) {
                                let it = datas.data.season[i]
                                if (item.nameEn === i) {
                                    it.forEach((iv, index) => {
                                        if (index < 3) {
                                            item.section.push(iv)
                                        }
                                    })
                                    item.sectionAll = it
                                }
                            }
                        })
                        if (datas.data.season['MDYTH']) {
                            datas.data.season['MDYTH'].forEach((item, index) => {
                                if (index < 2) {
                                    that.cupDataSeasonArr.integration.push(item)
                                }
                            })
                        }
                        console.log(that.cupDataYearArr)
                        console.log(that.cupDataSeasonArr)
                        this.$nextTick(() => {
                            that.getEcharts(that.cupDataYearArr.section)
                        })
                    }
                })
            },
            getEcharts(datas) {
                datas.forEach((item, index) => {
                    this.getEchartsData(item.echartsData.echarts, 'pieChart' + index)
                })
            },

            getEchartsData(data, name) {
                let total = 0
                data.forEach(it => {
                    total += it.value
                })
                let option = {
                    color: ['#F65177', '#50C14E', '#5093E1', '#9DA5BE'],
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [{
                        name: '年度榜',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter: () => {
                                return total
                            },
                            fontSize: 16,
                            fontWeight: 600
                        },
                        // emphasis: {
                        //     label: {
                        //     show: true,
                        //     fontSize: 10,
                        //     fontWeight: 'bold'
                        //     }
                        // },
                        labelLine: {
                            show: false
                        },
                        data: data
                    }]
                };
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom.removeAttribute("_echarts_instance_")
                let myChart = this.$echarts.init(dom);
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            yearSeeMore(name, type) {
                if (type === 'year') {
                    this.$refs.yearFrom.init(name, this.changeYear, this.seasonStr)
                } else {
                    this.$refs.seasonFrom.init(name, this.changeYear, this.seasonStr)
                }
            }
        }
    }
</script>

<style lang="less">
    .gatewayNewPage {
        height: 93vh;
        width: 87vw;
        background: #EDEFF5;
        padding: 15px 20px;

        .quarter {
            background: #fff;
            border-radius: 10px;
            height: 100%;

            // padding-right: 15px;
            .searchFn {
                // height: 50px;
                height: 5vh;
                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,
                        .el-input__inner,
                        .el-input__suffix {
                            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;
                height: 9vh;
                width: 100%;

                .headerComTit {
                    // height: 40px;
                    height: 5vh;
                    border-bottom: 1px solid #E1E3EA;

                    span {
                        font-size: 14px;
                        color: #3B7AD1;
                    }
                }

                .headerNameTit {
                    display: flex;
                    justify-content: space-between;
                    padding: 8px 10px;
                    font-size: 12px;
                    color: #414141;

                    .headerNameTit_left {
                        width: 60%;
                    }

                    .headerNameTit_right {
                        width: 40%;
                        display: flex;
                        justify-content: center;
                    }
                }

                .headerOne {
                    // width: 35px;
                    width: 3%;
                    background: #184FB4;
                }

                .headerTwo {
                    // width: 150px;
                    width: 12%;
                    border-right: 1px solid #E1E3EA;

                    .headerTwoTit {
                        position: relative;
                        top: 10px;
                        left: 30%;
                    }
                }

                .headerThree {
                    // width: 350px;
                    width: 28%;
                    border-right: 1px solid #E1E3EA;

                    .headerThreeTit {
                        position: relative;
                        top: 10px;
                        left: 40%;
                    }
                }

                .headerFour {
                    // width: calc(100% - 535px);
                    width: 57%;

                    .headerFourTit {
                        position: relative;
                        top: 10px;
                        left: 40%;
                    }

                    .headerNameForeTit {
                        display: flex;
                        justify-content: space-between;
                        padding: 8px 10px;
                        font-size: 12px;
                        color: #414141;

                        .headerNameForeTit_left {
                            width: 30%;
                        }

                        .headerNameForeTit_right {
                            width: 72%;
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                }
            }

            .tableMain {
                display: flex;
                border-bottom: 1px solid #E1E3EA;
                // height: 150px;
                height: 16vh;

                .mainOne {
                    // width: 35px;
                    width: 3%;
                    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: 20%;
                        left: 25%;
                    }
                }

                .mainTwo {
                    // width: 149px;
                    width: 12%;
                    border-right: 1px solid #E1E3EA;
                    position: relative;

                    .mainTwoMsg {
                        position: relative;

                        .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;
                        }
                    }

                    .echartsNum {
                        font-size: 16px;
                        font-weight: 600;
                        position: absolute;
                        top: 42px;
                        left: 65px;
                    }


                }

                .mainThree {
                    // width: 350px;
                    width: 28%;
                    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;
                        height: 3.5vh;
                        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%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-weight: 400;
                                color: #666;
                                margin-right: 10px;
                            }

                            span:nth-child(2) {
                                font-weight: 600;
                                margin-right: 30px;
                                color: #F65177;
                            }

                            span:nth-child(3) {
                                display: inline-block;
                                width: 20%;
                                font-weight: 600;
                                color: #666;
                            }
                        }
                    }
                }

                .mainFour {
                    // width: calc(100% - 536px);
                    width: 57%;
                    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;
                        justify-content: space-between;
                        margin: 0 10px;
                        width: 100%;
                        // height: 33px;
                        height: 3.5vh;
                        background: #F6F7FA;
                        margin-bottom: 8px;
                        padding-left: 10px;
                        padding-top: 2px;
                        border-radius: 5px;

                        span {
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            position: relative;
                            top: 6px;
                            display: inline-block;
                        }

                        .mainFourcompany {
                            width: 27%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-weight: 400;
                            color: #666;
                            margin-right: 17px;
                        }

                        .mainFourImg {
                            display: flex;
                            justify-content: space-between;
                            width: 76%;

                            .mainFourImgSpan {
                                width: 5%;
                                font-weight: 600;
                                // margin-right: 15px;
                                color: #666;
                            }

                            img {
                                width: 20px;
                                height: 20px;
                                position: relative;
                                top: 5px;
                                left: -10px;
                                // margin-right: 33px;
                                // margin-left: 22px;
                            }
                        }
                    }
                }
            }

            .tableFooter {
                display: flex;
                // height: 100px;
                height: 10vh;

                .footerOne {
                    // width: 35px;
                    width: 3%;
                    background: #7D8297;
                    border-radius: 0 0 0 10px;

                    span {
                        display: inline-block;
                        // width: 20px;
                        width: 3%;
                        margin: 0 auto;
                        line-height: 16px;
                        font-size: 16px;
                        font-weight: bold;
                        color: #fff;
                        position: relative;
                        top: 10px;
                        left: 10px;
                    }
                }

                .footerTwo {
                    // width: 500px;
                    width: 40%;
                    padding-top: 10px;
                    border-right: 1px solid #E1E3EA;

                    .footerTwoMsg {
                        display: flex;
                        margin: 0 10px;
                        width: 100%;
                        // height: 33px;
                        height: 3.5vh;
                        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%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                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 {
                                display: inline-block;
                                width: 12%;
                                font-weight: 600;
                                color: #666;
                            }
                        }
                    }
                }

                .footerThree {
                    // width: calc(100% - 536px);
                    width: 57%;
                    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;
                        width: 13%;
                        // margin: 0 10px;
                        // margin-left: 10px;
                        padding: 0 10px;
                        margin-bottom: 8px;

                        span {
                            font-size: 12px;
                            font-weight: 400;
                            color: #666;
                            font-family: Microsoft YaHei;
                        }

                        .footerImg {
                            display: flex;
                            border-radius: 5px;
                            background: #F6F7FA;

                            span {
                                display: inline-block;
                                // width: 100%;
                                // width: 48px;
                                width: 3vw;
                                // height: 30px;
                                height: 3vh;
                                padding: 5px 8px 0;
                                position: relative;
                                top: 2px;
                            }

                            img {
                                width: 20px;
                                height: 20px;
                                position: relative;
                                top: 5px;
                                margin-right: 8px;
                                position: relative;
                                top: 7px;
                            }
                        }
                    }
                }
            }
        }

        .report {
            margin-left: 20px;
            height: 100%;

            .gateway_report {
                // width: 355px;
                width: 100%;
                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-bottom: 1px solid #D6DBEA;
                    border-radius: 10px 10px 0px 0px;
                    text-align: center;
                    display: flex;
                    justify-content: center;

                    p {
                        font-size: 18px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: #3B7AD1;
                    }

                    .el-icon {
                        position: relative;
                        left: 120px;
                        top: 3px;
                        cursor: pointer;
                    }
                }

                .reportMain {
                    height: 80vh !important;
                    overflow-x: hidden;
                    overflow-y: auto;

                    .reportMain_msg {
                        width: 100%;
                        display: flex;
                        padding: 25px 0 25px 27px;
                        border-bottom: 1px solid #D6DBEA;

                        .rightDiv {
                            width: 4px;
                            height: 40px;
                            // height: 5vh;
                            background: #4883D4;
                            border-radius: 2px;
                            position: relative;
                            top: 2px;
                        }

                        .rightTitMsg {
                            margin-left: 15px;
                            width: calc(100% - 20px);

                            p {
                                // width: 300px;
                                width: 100%;
                                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;
                                display: inline-block;
                            }

                            .rightTwoSpanMsg {
                                width: 60%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }
        }
    }
</style>