IDCOL/webConfig/src/views/dashboard.vue

<template>
    <div class="dashboard_template">
        <div class="nav_top">
            <div class="left_title">
                <img src="../img/iconfont/notice.png"><span class="span">Please pay attention to the updated content at any time.</span>
            </div>
            <div class="right_operation">
                <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_dashboard_division')">
                    <span class="el-dropdown-link">
                        <span>{{divisionName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_dashboard_division">
                        <el-dropdown-item v-for="item in divisionNav" :class="{'select':item.id==division}" :command="{'key':'division','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_dashboard_district')">
                    <span class="el-dropdown-link">
                        <span>{{districtName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_dashboard_district">
                        <el-dropdown-item v-for="item in districtNav" :class="{'select':item.id==district}" :command="{'key':'district','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-input placeholder="search..." v-model="keywords" @keyup.native="getLightListKeyUp($event)" class="input-with-select">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="getLightList()"></i>
                </el-input>
            </div>
        </div>
        <div class="dashboard_main">
            <div class="left_box">
                <div class="time_box">
                    <div class="top_box">
                        <div class="flex_box">
                            <div class="left">
                                10:28
                            </div>
                            <div class="right">
                                <p class="p1">Goodmorning，Eunice Gomez</p>
                                <p class="p2">2020-05-20</p>
                            </div>
                        </div>
                        <p class="p3">Today is the 320th day you log in to the system. We will work with you to maintain all street lights. ：）</p>
                    </div>
                    <div class="bottom_box">
                        <div class="btn">
                            <i class="iconfont icon-ludeng"></i>
                            <span>Today</span>
                        </div>
                        <div class="span_box1">
                            <span class="span1">New equipment</span>
                            <span class="span2">7483</span>
                        </div>
                        <i class="line"></i>
                        <div class="span_box2">
                            <span class="span1">Faulty equipment</span>
                            <span class="span2">893</span>
                        </div>
                    </div>
                </div>
                <div class="echarts_map_box">
                    <div class="echarts_title"><img src="../img/iconfont/map.png"><span>Bangladesh Map</span></div>
                    <div class="echarts_map"></div>
                </div>
            </div>
            <div class="right_box">
                <div class="right_top">
                    <div class="light_information">
                        <div class="light_information_left">
                            <div class="title">Light Information</div>
                            <p class="p1">2149</p>
                            <p class="p2"><span class="span1">Total-light</span><i class="iconfont icon-shangsheng"></i><span class="span2">2%</span></p>
                        </div>
                        <div class="light_information_right">
                            <div class="data_ul">
                                <div class="li li1">
                                    <p class="p1">954</p>
                                    <p class="p2">60%</p>
                                </div>
                                <div class="li li2">
                                    <p class="p1">954</p>
                                    <p class="p2">60%</p>
                                </div>
                                <div class="li li3">
                                    <p class="p1">954</p>
                                    <p class="p2">60%</p>
                                </div>
                            </div>
                            <div class="tab_box">
                                <div class="tab tab1">Light-up</div>
                                <div class="tab tab2">On-line</div>
                                <div class="tab tab3">Fault</div>
                            </div>
                        </div>
                    </div>
                    <div class="usage_information">
                        <div class="title">
                            <span>Usage Information</span>
                            <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_dashboard_date')">
                                <span class="el-dropdown-link">
                                    <span>{{rightDateName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_dashboard_date">
                                    <el-dropdown-item v-for="item in rightDateNav" :class="{'select':item.id==district}" :command="{'key':'rightDate','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <div class="ul_box">
                            <div class="li">
                                <p class="p1">1783</p>
                                <p class="p2">Power</p>
                            </div>
                            <div class="li">
                                <p class="p1">389</p>
                                <p class="p2">Electricity</p>
                            </div>
                            <div class="li">
                                <p class="p1">892</p>
                                <p class="p2">CO2 reduction</p>
                            </div>
                            <div class="li">
                                <p class="p1">2371</p>
                                <p class="p2">SO2 reduction</p>
                            </div>
                            <div class="li">
                                <p class="p1">1997</p>
                                <p class="p2">Tce reduction</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="proportion_lights">
                    <div class="title">
                        <div class="text">Proportion of lights</div>
                        <div class="right_btn"> 
                            <div class="nav_box">
                                <div class="li select"><span>Total</span></div>
                                <div class="li"><span>Power generation</span></div>
                                <div class="li"><span>Online</span></div>
                                <div class="li"><span>Offline</span></div>
                                <div class="li"><span>Fault</span></div>
                            </div>
                            <div class="nav_box">
                                <div class="li"><span>Upa-City</span> <i class="iconfont icon-xialajiantou"></i></div>
                            </div>
                            <div class="nav_box">
                                <div class="li"><span>More</span> <i class="iconfont icon-youjiantou"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="proportion_lights_main">
                        <div class="left_echarts">
                            <div class="device_pie"></div>
                            <div class="device_pie_cover"></div>
                        </div>
                        <div class="right_table">
                            <el-table
                                ref="deviceList"
                                v-loading="loading.deviceList"
                                element-loading-background="rgba(0, 0, 0, 0.5)"
                                height="calc(100% - 3.5rem)"
                                @cell-mouse-enter="tableEnter"
                                @cell-mouse-leave="tableLeave"
                                :data="deviceList">
                                <el-table-column
                                    v-for="(item) in deviceArr"
                                    :key="'table_'+item.prop"
                                    :prop="item.prop"
                                    :label="item.label"
                                    :align="item.align?item.align:'center'"
                                    :width="item.width"
                                    :show-overflow-tooltip="true"
                                    :min-width="item.minWidth">
                                    <template slot-scope="scope">
                                        <div v-if="item.type != 1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</div>
                                        <div v-if="item.prop == 'city'" class="city">
                                            <i></i><span>{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
                                        </div>
                                        <div v-if="item.prop == 'total'" class="total">
                                            <span class="span1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
                                            <i></i>
                                            <span class="span2">{{scope.row['bl']}}{{item.unit?item.unit:''}}</span>
                                        </div>

                                    </template>
                                </el-table-column>

                                <el-table-column
                                    align="center"
                                    :width="40"
                                    :label="''">
                                    <template slot-scope="scope">
                                        <span class="btn" @click="seeFun(scope.row)" title="Edit" v-show="tableShowId == scope.row.id">
                                            <i class="iconfont icon-youjiantou"></i>
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="real_time_fault_information">
                    <div class="title">
                        <div class="text">Real time fault information</div>
                        <div class="right_btn">
                            <div class="btn">
                                <span>More</span> <i class="iconfont icon-youjiantou"></i>
                            </div>
                        </div>
                    </div>
                    <div class="real_time_fault_information_main">
                        <el-table
                            ref="faultInformationList"
                            v-loading="loading.faultInformationList"
                            element-loading-background="rgba(0, 0, 0, 0.5)"
                            height="calc(100% - 3.5rem)"
                            :data="faultInformationList">
                            <el-table-column
                                label="Num"
                                prop="webIndex"
                                align="center"
                                header-align="center"
                                width="60">
                            </el-table-column>
                            <el-table-column
                                v-for="(item) in faultInformationArr"
                                :key="'table_'+item.prop"
                                :prop="item.prop"
                                :label="item.label"
                                :align="item.align?item.align:'center'"
                                :width="item.width"
                                :show-overflow-tooltip="true"
                                :min-width="item.minWidth">
                                <template slot-scope="scope">
                                    <div v-if="item.type != 1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</div>
                                    <div v-if="item.prop == 'division'" class="division">
                                        <span>{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
                                        <span>/</span>
                                        <span>{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
                                        <span>/</span>
                                        <span>{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
                                    </div>

                                </template>
                            </el-table-column>

                            <el-table-column
                                align="center"
                                :width="100"
                                :label="'Operation'">
                                <template slot-scope="scope">
                                    <span class="btn" @click="seeFun(scope.row)" title="Edit">
                                        <i class="iconfont icon-weixiu" style="color: rgba(252, 132, 64, 1)"></i>
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    // import allUrl from '../api/allUrl.js'
    // import base from '../api/base.js'
    import { mapGetters } from 'vuex'
    import bangladesh from '../store/Bangladesh.json'
    // import world from '../store/world.json'

    export default {
        name:'dashboard',
        data(){
            return{
                keywords:'',
                division:'',
                divisionNav:[{id:'0',name:'division'}],
                district:'',
                districtNav:[{id:'0',name:'district'}],
                rightDate:'',
                rightDateNav:[{id:'0',name:'Today'}],
                myChart1:'',

                tableShowId:'-1',
                deviceList:[],
                deviceArr:[],

                faultInformationList:[],
                faultInformationArr:[],

                myChart2:'',

                loading:{
                    deviceList:false,
                    faultInformationList:false,
                }
            }
        },
        computed:{
            ...mapGetters({
                token:'token',
                client_key:'client_key',
                username:'username',
                version:'version',
            }),
            divisionName(){
                let name;
                for(let d of this.divisionNav){
                    if(d.id == this.division){
                        name = d.name;
                    }
                }
                return name;
            },
            districtName(){
                let name;
                for(let d of this.districtNav){
                    if(d.id == this.district){
                        name = d.name;
                    }
                }
                return name;
            },
            rightDateName(){
                let name;
                for(let d of this.rightDateNav){
                    if(d.id == this.rightDate){
                        name = d.name;
                    }
                }
                return name;
            },
        },
        mounted(){
            this.rightDate = '0';
            this.division = '0';
            this.district = '0';

            this.deviceArr = [
                {prop:'city',label:'City',align:'left',minWidth:70,type:1},
                {prop:'total',label:'Total',minWidth:70,type:1},
                {prop:'power',label:'Power',minWidth:70},
                {prop:'online',label:'On-line',minWidth:70},
                {prop:'offline',label:'Off-line',minWidth:70},
                {prop:'fault',label:'Fault',minWidth:70},
            ];
            this.deviceList = [
                {'city':5,'total':5,'bl':'5%','power':5,'online':5,'offline':5,'fault':5,id:1},
                {'city':5,'total':5,'bl':'5%','power':5,'online':5,'offline':5,'fault':5,id:2},
                {'city':5,'total':5,'bl':'5%','power':5,'online':5,'offline':5,'fault':5,id:3},
            ];

            this.faultInformationArr = [
                {prop:'project',label:'Project',minWidth:70},
                {prop:'division',label:'Division/District/Upazilla',minWidth:120,type:1},
                {prop:'lightId',label:'Light ID',minWidth:70},
                {prop:'faultType',label:'Fault type',minWidth:70},
                {prop:'faultTime',label:'Fault time',width:160},
            ];
            this.faultInformationList = [
                {'project':5,'division':5,'district':'5%','dpazilla':5,'lightId':5,'faultType':5,'faultTime':5},
            ];
            let i = 1;
            for(let d of this.faultInformationList){
                d.webIndex = i;
                i++;
            }

            this.echartsMapInit();
            this.deviceBarInit();
        },
        methods:{
            commandHide(val){
                this.$nextTick(function(){
                    if($('.'+val)&&$('.'+val+' >.select').offset()){
                        $('.'+val).animate({scrollTop: $('.'+val).scrollTop() + $('.'+val+' >.select').offset().top - $('.'+val).offset().top - 100})
                    }
                })
            },
            commandDropdown(obj){
                this.$set(this,obj.key,obj.id)
            },
            tableEnter(data){
              this.tableShowId = data.id;
            },
            tableLeave(){
              this.tableShowId = '-1';
            },
            /*设备列表*/
            getLightListKeyUp(e){
                if(e.key == 'Enter'){
                  this.getLightList();
                }
            },
            getLightList(){

            },
            echartsMapInit(){
                this.$nextTick(function(){
                    if(document.getElementsByClassName('echarts_map')[0]){
                        this.myChart1 = echarts.init(document.getElementsByClassName('echarts_map')[0]);
                        echarts.registerMap('bangladesh', bangladesh);
                        this.myChart1.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b}<br/>{c} ()'
                                // formatter: function (params) {
                                    // console.log(params)
                                   //  var tls = `<div class="history_echarts_tooltip"><p class="p1"><i style="background-color:${params[0].color}"></i><span class="span1">${params[0].value}</span><span class="span1">℃</span></p><p class="p2">${params[0].name}</p></div>`;
                                   // return tls;
                                // },
                            },
                            visualMap: {
                                color: ['rgba(166, 65, 7, 1)','rgba(224, 84, 5, 1)','rgba(230, 96, 20, 1)','rgba(252, 132, 64, 1)','rgba(252, 132, 64, 1)','rgba(255, 255, 255, 1)'],
                                pieces: [
                                    {gte: 10000, label: '≥10000 Light'},
                                    {gte: 2000, lte: 10000, label: '2000-10000 Lights'},
                                    {gte: 500, lte: 1999, label: '500-1999 Lights'},
                                    {gte: 100, lte: 499, label: '100-499 Lights'},
                                    {gte: 1, lte: 99, label: '1-99 Lights'},
                                    {value: 0, label: '0 Lights'},
                                ]
                            },
                            series: [
                                {
                                    type:'map',
                                    name: 'bangladesh',
                                    map: 'bangladesh',
                                    zoom:1.2,
                                    // roam: true,
                                    data: [
                                        {name: 'Barisal Division', value: 2157},
                                        {name: 'Chittagong Division', value: 0},
                                        {name: 'Dhaka Division', value: 36},
                                        {name: 'Khulna Division', value: 62},
                                        {name: 'Rajshahi Division', value: 445},
                                        {name: 'Rangpur Division', value: 606},
                                        {name: 'Sylhet Division', value: 398},
                                    ],
                                }
                            ]
                        })
                        // let provincesText = ['Barisal Division','Chittagong Division','Dhaka Division','Khulna Division','Rajshahi Division','Rangpur Division','Sylhet Division']
                        // this.myChart1.on('click', function (param) {
                        //     console.log(param.name);
                        //     //遍历取到provincesText 中的下标  去拿到对应的省js
                        //     for(var  i= 0 ; i < provincesText.length ; i++ ){
                        //         if(param.name == provincesText[i]){
                        //             //显示对应省份的方法
                        //             // showProvince(provinces[i]) ;
                        //             showProvince(provinces[i],provincesText[i])
                        //             break ;
                        //         }
                        //     }
                        // });
                    }
                })
            },
            deviceBarInit(){
                if(document.getElementsByClassName('device_pie')[0]){
                    let seriesData = [
                        {name: '1',value: Math.round(Math.random() * 100),itemStyle:{color:'#FF6474'}},
                        {name: '2',value: Math.round(Math.random() * 100),itemStyle:{color:'#FC8440'}},
                        {name: '3',value: Math.round(Math.random() * 100),itemStyle:{color:'#FFA8B1'}},
                        {name: '4',value: Math.round(Math.random() * 100),itemStyle:{color:'#FFCFD4'}},
                        {name: '5',value: Math.round(Math.random() * 100),itemStyle:{color:'#FFD86F'}},
                        {name: '6',value: Math.round(Math.random() * 100),itemStyle:{color:'#FFC936'}},
                        {name: '7',value: Math.round(Math.random() * 100),itemStyle:{color:'#ADC6FF'}},
                        {name: '8',value: Math.round(Math.random() * 100),itemStyle:{color:'#1D7DFD'}},
                    ];
                    this.myChart2 = echarts.init(document.getElementsByClassName('device_pie')[0]);
                    this.myChart2.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b} : {c} ({d}%)'
                        },
                        series: [
                            {
                                name: 'device',
                                type: 'pie',
                                radius: ['20%','70%'],
                                center: ['50%', '50%'],
                                data: seriesData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                            }
                        ]
                    })
                }
            },
        },
        watch:{

        }
    }
</script>

<style type="text/css" lang="less">
    .dashboard_template{
        .nav_top{
            display: flex;
            justify-content: space-between;
            width:100%;
            height:3.3rem;line-height: 3.3rem;
            background:rgba(255,255,255,1);
            border:0.1rem solid rgba(240,240,240,1);
            .left_title{
                display: flex;
                align-items: center;
                img{
                    display: inline-block;
                    // width: 1.2rem;
                    height: 1rem;
                    margin: 0 0.6rem;
                }
                .span{
                    font-size:1rem;
                    font-family:HiraginoSansGB-W3,HiraginoSansGB;
                    font-weight:normal;
                    color:rgba(101,112,133,1);
                }
            }
            .right_operation{
                display: flex;
                align-items: center;
                padding-right: 2.2rem;
                .el-dropdown{
                    width: 10rem;
                    height: 2rem;line-height: 2rem;
                    background:rgba(246,248,250,1);
                    border-radius: 0.2rem;
                    margin-right: 0.8rem;
                    .el-dropdown-link{
                        cursor: pointer;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 0.8rem;
                        font-size:1rem;
                        font-family:PingFang-SC-Medium,PingFang-SC;
                        font-weight:500;
                        color:rgba(101,112,133,1);
                    }
                }
                .el-input{
                    width: 16.5rem;
                    height: 2rem;line-height: 2rem;
                    .el-input__inner{
                        height: 2rem;line-height: 2rem;
                        background:rgba(246,248,250,1);
                        border: none;
                    }
                    .el-input__icon{
                        width: 1.8rem;
                        height: 2rem;line-height: 2rem;
                        border-top-right-radius: 0.2rem;
                        border-bottom-right-radius: 0.2rem;
                        background:#FC8440;
                        color: #fff;
                        font-size: 1rem;
                        cursor: pointer;
                    }
                }
            }
        }
        .dashboard_main{
            background:rgba(246,248,250,1);
            padding: 0.8rem 1.5rem 1.5rem;
            display: flex;
            .left_box{
                flex: 1;
                .time_box{
                    padding: 0.8rem;
                    height:15.83rem;
                    background:rgba(255,255,255,1);
                    border-radius:0.17rem;
                    border:0.08rem solid rgba(240,240,240,1);
                    background: #fff;
                    .top_box{
                        height:11rem;
                        // background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
                        background-image: url('../img/dashboard/time_box_bg.png');
                        background-size: 100% 100%;
                        background-position: center;
                        border-radius:0.17rem;
                        border:0.08rem solid rgba(240,240,240,1);
                        padding: 1.5rem 1rem 0 2rem;
                        .flex_box{
                            display: flex;
                            .left{
                                font-size:4.33rem;
                                font-family:DINAlternate-Bold,DINAlternate;
                                font-weight:bold;
                                color:rgba(255,255,255,1);
                            }
                            .right{
                                margin-left: 0.5rem;
                                .p1{
                                    margin-top: 1.3rem;
                                    font-size:1.17rem;
                                    font-family:PingFang-SC-Bold,PingFang-SC;
                                    font-weight:bold;
                                    color:rgba(255,255,255,1);
                                }
                                .p2{
                                    margin-top: 0.2rem;
                                    display: inline-block;;
                                    padding: 0 1rem;
                                    height:1.25rem;line-height:1.25rem;
                                    background:rgba(255,255,255,0.6);
                                    border-radius:0.63rem;

                                    font-size:1rem;
                                    font-family:PingFang-SC-Medium,PingFang-SC;
                                    font-weight:500;
                                    color:rgba(252,134,64,1);
                                }
                            }
                        }
                        .p3{
                            margin-left: 0.5rem;
                            font-size:1rem;
                            font-family:HiraginoSansGB-W3,HiraginoSansGB;
                            font-weight:normal;
                            color:rgba(255,255,255,1);
                        }
                    }
                    .bottom_box{
                        display: flex;
                        align-items: center;
                        margin-top: 0.6rem;
                        .btn{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width:5.75rem;
                            height:2.33rem;
                            background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
                            border-radius:0.33rem;
                            border:0.08rem solid rgba(240,240,240,1);

                            font-size:1rem;
                            font-family:PingFang-SC-Bold,PingFang-SC;
                            font-weight:bold;
                            color:rgba(255,255,255,1);
                            i{
                                font-size: 1.2rem;
                            }
                            span{
                                margin-left: 0.2rem;
                            }
                        }
                        .span_box1{
                            margin-left: 1.5rem;
                            display: flex;
                            align-items: center;
                        }
                        .span_box2{
                            // margin-left: 1.6rem;
                            display: flex;
                            align-items: center;
                        }
                        .span1{
                            font-size:1.17rem;
                            font-family:PingFang-SC-Bold,PingFang-SC;
                            font-weight:bold;
                            color:rgba(101,112,133,1);
                        }
                        .span2{
                            margin-left: 1rem;
                            font-size:1.5rem;
                            font-family:PingFang-SC-Bold,PingFang-SC;
                            font-weight:bold;
                            color:rgba(51,51,51,1);
                        }
                        .line{
                            display: inline-block;
                            width: 0.1rem;
                            height: 2.1rem;
                            background: #EBEFF2;
                            margin: 0 1rem;
                        }
                    }
                }
                .echarts_map_box{
                    margin-top: 0.8rem;
                    border:0.08rem solid rgba(240,240,240,1);
                    .echarts_title{
                        display: flex;
                        align-items: center;
                        height:3.5rem;line-height:3.5rem;
                        background:rgba(255,255,255,0.8);

                        font-size:1.17rem;
                        font-family:PingFangSC-Semibold,PingFang SC;
                        font-weight:600;
                        color:rgba(51,51,51,1);
                        img{
                            margin: 0 0.5rem 0 0.8rem; 
                            height: 1.8rem;
                        }
                    }
                    .echarts_map{
                        width: 100%;
                        height: 38rem;
                    }
                }
            }
            .right_box{
                width:76.3rem;
                margin-left: 0.8rem;
                .right_top{
                    display: flex;
                    .light_information{
                        width:30rem;
                        height:11.8rem;
                        background:rgba(255,255,255,1);
                        border-radius:0.2rem;
                        border:0.1rem solid rgba(240,240,240,1);
                        display: flex;
                        .light_information_left{
                            padding-left: 1.3rem;
                            .title{
                                margin-top: 1.3rem;
                                font-size:1rem;
                                font-family:PingFangSC-Medium,PingFang SC;
                                font-weight:600;
                                color:rgba(51,51,51,1);
                                position: relative;
                                &::after{
                                    content: "";
                                    position: absolute;
                                    bottom: -0.2rem;left:0;
                                    width:1.6rem;
                                    height:0.15rem;
                                    background-color: #FF7C23;
                                }
                            }
                            .p1{
                                margin-top: 2rem;
                                font-size:2.5rem;
                                font-family:PingFang-SC-Heavy,PingFang-SC;
                                font-weight:800;
                                color:rgba(51,51,51,1);
                            }
                            .p2{
                                display: flex;
                                align-items: center;
                                .span1{
                                    font-size:1rem;
                                    font-family:PingFang-SC-Medium,PingFang-SC;
                                    font-weight:500;
                                    color:rgba(51,51,51,1);
                                }
                                .iconfont{
                                    margin-left: 0.5rem;
                                    font-size: 1.2rem;
                                    color:rgba(252,132,64,1);
                                }
                                .span2{
                                    font-size:1.2rem;
                                    font-family:PingFangSC-Semibold,PingFang SC;
                                    font-weight:600;
                                    color:rgba(252,132,64,1);
                                    line-height:1.6rem;
                                }
                            }
                        }
                        .light_information_right{
                            position: relative;
                            flex: 1;
                            .data_ul{
                                position: absolute;
                                right: 1.2rem;
                                top: 1.5rem;
                                display: flex;
                                align-items: center;
                                width: 17rem;
                                .li{
                                    flex: 1;
                                    text-align: center;
                                    &.li1{
                                        height: 5.6rem;
                                        // background: rgba(252, 137, 64, 1);
                                        background-image: url('../img/dashboard/light_Information_bg1.png');
                                        background-size: 100% 100%;
                                        background-position: center;
                                        .p1{
                                            margin-top: 1rem;
                                        }
                                    }
                                    &.li2{
                                        height: 5.6rem;
                                        // background: rgba(0, 222, 156, 1);
                                        background-image: url('../img/dashboard/light_Information_bg2.png');
                                        background-size: 100% 100%;
                                        background-position: center;
                                        .p1{
                                            margin-top: 1rem;
                                        }
                                    }
                                    &.li3{
                                        height: 6.8rem;
                                        // background: rgba(255, 100, 116, 1);
                                        background-image: url('../img/dashboard/light_Information_bg3.png');
                                        background-size: 100% 100%;
                                        background-position: center;
                                        .p1{
                                            margin-top: 1.5rem;
                                        }
                                    }
                                    .p1{
                                        display: inline-block;
                                        padding: 0.2rem 0;
                                        font-size:1.33rem;
                                        font-family:PingFangSC-Semibold,PingFang SC;
                                        font-weight:600;
                                        color:rgba(255,255,255,1);
                                        border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
                                    }
                                    .p2{
                                        font-size:0.83rem;
                                        font-family:PingFangSC-Regular,PingFang SC;
                                        font-weight:400;
                                        color:rgba(255,255,255,1);
                                    }
                                }
                            }
                            .tab_box{
                                position: absolute;
                                right: 1.2rem;bottom: 1.2rem;
                                display: flex;
                                .tab{
                                    font-size:0.83rem;
                                    font-family:PingFang-SC-Medium,PingFang-SC;
                                    font-weight:500;
                                    margin-left: 0.8rem;
                                    padding: 0 0.5rem;
                                    height: 1.3rem;line-height: 1.3rem;
                                    &.tab1{
                                        color:rgba(252,137,64,1);
                                        background: rgba(252, 137, 64, 0.1);
                                    }
                                    &.tab2{
                                        color: rgba(0, 222, 156, 1);
                                        background: rgba(0, 222, 156, 0.1);
                                    }
                                    &.tab3{
                                        color: rgba(255, 101, 116, 1);
                                        background: rgba(255, 100, 116, 0.1);
                                    }
                                }
                            }
                        }
                    }
                    .usage_information{
                        margin-left: 0.8rem;
                        width:45.5rem;
                        height:11.8rem;
                        background:rgba(255,255,255,1);
                        border-radius:0.2rem;
                        border:0.1rem solid rgba(240,240,240,1);
                        padding: 0 1.3rem;
                        .title{
                            margin-top: 1.3rem;
                            font-size:1rem;
                            font-family:PingFangSC-Medium,PingFang SC;
                            font-weight:600;
                            color:rgba(51,51,51,1);
                            position: relative;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            &::after{
                                content: "";
                                position: absolute;
                                bottom: -0.2rem;left:0;
                                width:1.6rem;
                                height:0.15rem;
                                background-color: #FF7C23;
                            }
                            .el-dropdown{
                                height:1.8rem;
                                background:rgba(246,248,250,1);
                                border-radius:0.2rem;
                                display: flex;
                                align-items: center;
                                .el-dropdown-link{
                                    font-size:1rem;
                                    font-family:PingFang-SC-Medium,PingFang-SC;
                                    font-weight:500;
                                    color:rgba(101,112,133,1);
                                    padding: 0 0.5rem;
                                    cursor: pointer;
                                }
                            }
                        }
                        .ul_box{
                            display: flex;
                            border:0.1rem solid rgba(240,240,240,1);
                            height: 6rem;
                            margin-top: 1.5rem;
                            .li{
                                border-right:0.1rem solid rgba(240,240,240,1);
                                flex: 1;
                                text-align:center;
                                &:last-child{
                                    border:none;
                                }
                                .p1{
                                    margin-top: 0.3rem;
                                    font-size:2.17rem;
                                    font-family:PingFang-SC-Heavy,PingFang-SC;
                                    font-weight:800;
                                    color:rgba(51,51,51,1);
                                }
                                .p2{
                                    font-size:1rem;
                                    font-family:PingFang-SC-Medium,PingFang-SC;
                                    font-weight:500;
                                    color:rgba(101,112,133,1);
                                }
                            }
                        }
                    }
                }
                .proportion_lights{
                    margin-top: 0.8rem;
                    height:22.5rem;
                    background:rgba(255,255,255,1);
                    border-radius:0.17rem 0.17rem 0rem 0rem;
                    border:0.08rem solid rgba(240,240,240,1);
                    padding: 0 0.8rem 0 1.6rem;
                    .title{
                        margin-top: 1.3rem;
                        font-size:1rem;
                        font-family:PingFangSC-Medium,PingFang SC;
                        font-weight:600;
                        color:rgba(51,51,51,1);
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        &::after{
                            content: "";
                            position: absolute;
                            bottom: -0.2rem;left:0;
                            width:1.6rem;
                            height:0.15rem;
                            background-color: #FF7C23;
                        }
                        .right_btn{
                            display: flex
                        }
                        .nav_box{
                            margin-left: 0.8rem;
                            display: flex;
                            height:1.8rem;line-height: 1.8rem;
                            align-items: center;
                            background:rgba(246,248,250,1);
                            .li{
                                padding: 0 1rem;
                                height:1.8rem;line-height: 1.8rem;
                                border-radius:0.17rem 0rem 0rem 0.17rem;
                                font-size:1rem;
                                font-family:PingFang-SC-Medium,PingFang-SC;
                                font-weight:500;
                                color:rgba(101,112,133,1);
                                cursor: pointer;
                                display: flex;
                                align-items:center;
                                i{
                                    color: rgba(163, 175, 187, 1);
                                    font-size: 1rem;
                                    margin-left: 0.8rem;
                                }
                                .icon-xialajiantou{
                                    font-size: 0.5rem;
                                }
                                &.select{
                                    background:rgba(252,132,64,1);
                                    color:rgba(255,255,255,1);
                                }
                            }
                        }
                    }
                    .proportion_lights_main{
                        display: flex;
                        height: 19.9rem;
                        .left_echarts{
                            width: 19.9rem;
                            .device_pie{
                                width: 100%;height: 100%;
                            }
                            .device_pie_cover{

                            }
                        }
                        .right_table{
                            width: calc(100% - 19.9rem);
                            .el-table{
                                margin-top: 1.5rem;
                                width: 100%;
                                th,td{
                                    padding: 0.5rem 0;
                                }
                                th,td{
                                    >.cell{
                                        font-size:1rem;
                                        font-family:PingFangSC-Medium,PingFang SC;
                                        font-weight:500;
                                        color:rgba(51,51,51,1);
                                    }
                                }
                                tr:hover>td{
                                    background: rgba(246, 248, 250, 1);
                                    >.cell{
                                        font-family:PingFangSC-Semibold,PingFang SC;
                                        font-weight:600;
                                    }
                                }
                                .city{
                                    display: flex;
                                    align-items: center;
                                    i{
                                        margin: 0 0.5rem;
                                        display: inline-block;
                                        width:0.3rem;
                                        height:0.3rem;
                                        background:rgba(252,132,64,1);
                                        border-radius: 50%;
                                    }
                                }
                                .total{
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    span{
                                        flex: 1;
                                    }
                                    .span1{
                                        text-align: right;
                                    }
                                    .span2{
                                        text-align: left;
                                    }
                                    i{
                                        margin: 0 0.5rem;
                                        display: inline-block;
                                        width: 0.1rem;
                                        height: 1.4rem;
                                        background: rgba(198, 205, 213, 1);
                                    }
                                }
                                .icon-youjiantou{
                                    font-size: 1rem;
                                    color:rgba(163, 175, 187, 1);
                                }
                            }
                        }
                    }
                }
                .real_time_fault_information{
                    padding: 0 0.8rem 0 1.6rem;
                    margin-top: 0.8rem;
                    height:22.6rem;
                    background:rgba(255,255,255,1);
                    border-radius:0.17rem 0.2rem 0rem 0rem;
                    border:0.1rem solid rgba(240,240,240,1);
                    .title{
                        margin-top: 1.3rem;
                        font-size:1rem;
                        font-family:PingFangSC-Medium,PingFang SC;
                        font-weight:600;
                        color:rgba(51,51,51,1);
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        &::after{
                            content: "";
                            position: absolute;
                            bottom: -0.2rem;left:0;
                            width:1.6rem;
                            height:0.15rem;
                            background-color: #FF7C23;
                        }
                        .right_btn{
                            margin-left: 0.8rem;
                            padding: 0 1rem;
                            display: flex;
                            align-items: center;
                            height:1.8rem;line-height: 1.8rem;
                            background:rgba(246,248,250,1);
                            cursor: pointer;
                            font-size:1rem;
                            font-family:PingFang-SC-Medium,PingFang-SC;
                            font-weight:500;
                            color:rgba(101,112,133,1);
                            i{
                                font-size: 1rem;
                                margin-left: 0.8rem;
                            }
                        }
                    }
                    .real_time_fault_information_main{
                        .el-table{
                            margin-top: 1.5rem;
                            width: 100%;
                            th,td{
                                padding: 0.5rem 0;
                            }
                            th,td{
                                >.cell{
                                    font-size:1rem;
                                    font-family:PingFangSC-Medium,PingFang SC;
                                    font-weight:500;
                                    color:rgba(51,51,51,1);
                                }
                            }
                            tr:hover>td{
                                background: rgba(246, 248, 250, 1);
                                >.cell{
                                    font-family:PingFangSC-Semibold,PingFang SC;
                                    font-weight:600;
                                }
                            }
                            .city{
                                display: flex;
                                align-items: center;
                                i{
                                    margin: 0 0.5rem;
                                    display: inline-block;
                                    width:0.3rem;
                                    height:0.3rem;
                                    background:rgba(252,132,64,1);
                                    border-radius: 50%;
                                }
                            }
                            .total{
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                span{
                                    flex: 1;
                                }
                                .span1{
                                    text-align: right;
                                }
                                .span2{
                                    text-align: left;
                                }
                                i{
                                    margin: 0 0.5rem;
                                    display: inline-block;
                                    width: 0.1rem;
                                    height: 1.4rem;
                                    background: rgba(198, 205, 213, 1);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>