BusinessBenchmark/src/components/gatewaynMobeil.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" />
                    <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="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, index) in cupDataYearArr.section" :key="index">
                    <div class="mainOne">
                        <span :style="index === 2 ? 'top:45px': ''">{{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>
                            <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>{{item.company}}</span>
                                    <span>{{item.grade}}</span>
                                    <span>{{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>{{item.company}}</span>
                                <span>{{item.score}}</span>
                                <div class="mainFourImg">
                                    <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.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.manage_height_note"
                                    >
                                        <template #reference>
                                            <img :src="item.manage_height === 0 ? cenImg : item.manage_height === 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>煤电一体化</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">{{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;" v-for="(item, index) in cupDataSeasonArr.integration" :key="index">
                            <div class="footerThreeMsg" v-for="it in matterMsg" :key="it">
                                <div class="footerImg">
                                    <span>{{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>通告栏</p>
                        <el-icon :size="20" color="#3B7AD1" @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">
                                    <span style="margin-right: 10px">{{it.createTime.substring(0, it.createTime.indexOf(' '))}}</span>
                                    <span>{{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/topNewS.png'
import botImg from '../assets/getwayImg/botNewS.png'
import cenImg from '../assets/getwayImg/cenNew.png'

import {apiGetevaluationportallist, 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: ['第一季度', '第二季度', '第三季度']
        }
    },
    created() {
        this.changeYear = (new Date().getFullYear()-1).toString()
        this.seasonStr = '第一季度'
        this.cupFootMsgArr = [
            {
                level: 'A',
                points: '134',
                img: cup1,
                name: '大港电厂（广安津能）'
            },
            {
                level: 'A',
                points: '134',
                img: cup2,
                name: '怀安热电'
            }
        ]
    },
    mounted() {
        this.getGateWayData()
        // this.getDeptNoticeData()
    },
    methods: {
        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
                    }
                })
            }
        },
        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 option = {
                color: ['#F65177', '#50C14E', '#5093E1', '#9DA5BE'],
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    name: '年度榜',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    // 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;
            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;
            .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;
            height: 16vh;
            .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: 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;
                            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;
        height: 100%;
        .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-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-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>