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_provinceId')">
                    <span class="el-dropdown-link">
                        <span>{{provinceIdName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_dashboard_provinceId">
                        <el-dropdown-item :class="{'select':null==provinceId}" :command="{'key':'provinceId','id':null}" :key="null">{{'All'}}</el-dropdown-item>
                        <el-dropdown-item v-for="item in provinceList" :class="{'select':item.id==provinceId}" :command="{'key':'provinceId','id':item.id,item:item}" :key="item.id">{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_dashboard_cityId')">
                    <span class="el-dropdown-link">
                        <span>{{cityIdName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_dashboard_cityId">
                        <el-dropdown-item :class="{'select':null==cityId}" :command="{'key':'cityId','id':null}" :key="null">{{'All'}}</el-dropdown-item>
                        <el-dropdown-item v-for="item in cityList" :class="{'select':item.id==cityId}" :command="{'key':'cityId','id':item.id,item:item}" :key="item.id">{{item.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </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">
                                {{(currentTime.format('HH:MM'))}}
                            </div>
                            <div class="right">
                                <p class="p1">Good morning，{{username}} ({{roleArr[role]}})</p>
                                <p class="p2">{{(currentTime.format('YY-mm-dd'))}}</p>
                            </div>
                        </div>
                        <p class="p3">Today is the {{infoData.logCount}}th 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">{{infoData.day_new_count}}</span>
                        </div>
                        <i class="line"></i>
                        <div class="span_box2">
                            <span class="span1">Faulty equipment</span>
                            <span class="span2">{{infoData.day_faulty_count}}</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 class="map_return" @click="mapReturn()" v-if="provinceId"><i class="el-icon-back"></i><span>{{mapType}}</span></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">{{infoData.total_light_count}}</p>
                            <p class="p2"><span class="span1">Total-light</span><i class="iconfont icon-shangsheng"></i><span class="span2">{{Number(infoData.day_new_count_percent).toFixed(1)}}%</span></p>
                        </div>
                        <div class="light_information_right">
                            <div class="data_ul">
                                <div class="li li1">
                                    <p class="p1">{{infoData.light_up_count}}</p>
                                    <p class="p2">{{Number(infoData.light_up_count_percent).toFixed(1)}}%</p>
                                </div>
                                <div class="li li2">
                                    <p class="p1">{{infoData.online_count}}</p>
                                    <p class="p2">{{Number(infoData.online_count_percent).toFixed(1)}}%</p>
                                </div>
                                <div class="li li3">
                                    <p class="p1">{{infoData.faulty_count}}</p>
                                    <p class="p2">{{Number(infoData.faulty_count_percent).toFixed(1)}}%</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_rightDate')">
                                <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_rightDate">
                                    <el-dropdown-item v-for="item in rightDateNav" :class="{'select':item.id==rightDate}" :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">{{statisticInfo.electricity}}</p>
                                <p class="p2">Power</p>
                            </div> -->
                            <div class="li">
                                <p class="p1" :title="statisticInfo.electricity">{{statisticInfo.electricity?statisticInfo.electricity:0}}</p>
                                <p class="p2">Electricity(kWh)</p>
                            </div>
                            <div class="li">
                                <p class="p1" :title="statisticInfo.CO2_reduction">{{statisticInfo.CO2_reduction?statisticInfo.CO2_reduction:0}}</p>
                                <p class="p2">CO2 reduction(Kg)</p>
                            </div>
                            <div class="li">
                                <p class="p1" :title="statisticInfo.SO2_reduction">{{statisticInfo.SO2_reduction?statisticInfo.SO2_reduction:0}}</p>
                                <p class="p2">SO2 reduction(Kg)</p>
                            </div>
                            <div class="li">
                                <p class="p1" :title="statisticInfo.TCE_reduction">{{statisticInfo.TCE_reduction?statisticInfo.TCE_reduction:0}}</p>
                                <p class="p2">Tce reduction(Kg)</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" :class="{'select':chartType == '0'}" @click="chartTypeFun(0)"><span>Total</span></div>
                                <div class="li" :class="{'select':chartType == '1'}" @click="chartTypeFun(1)"><span>On-line</span></div>
                                <div class="li" :class="{'select':chartType == '2'}" @click="chartTypeFun(2)"><span>Light-up</span></div>
                                <div class="li" :class="{'select':chartType == '3'}" @click="chartTypeFun(3)"><span>Fault</span></div>
                            </div>
                            <div class="nav_box">
                                <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_dashboard_companyType')">
                                    <span class="el-dropdown-link">
                                        <span>{{companyTypeName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_dashboard_companyType">
                                        <el-dropdown-item v-for="item in companyTypeNav" :class="{'select':item.id==companyType}" :command="{'key':'companyType','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <!-- <div class="li"><span>Upa-City</span> <i class="iconfont icon-xialajiantou"></i></div> -->

                            </div>
                            <div class="nav_box">
                                <div class="li" @click="linkToFun('/projectManagement')"><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"
                                highlight-current-row
                                element-loading-background="rgba(0, 0, 0, 0.5)"
                                height="calc(100% - 0rem)"
                                @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">
                                        <span v-if="item.type != 1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
                                        <span v-if="item.prop == 'name'" class="city">
                                            <i></i><span>{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
                                        </span>
                                        <span 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['totalPer']}}{{item.unit?item.unit:''}}</span>
                                        </span>

                                    </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" @click="linkToFun('/alarmMaintenance')">
                                <span>More</span> <i class="iconfont icon-youjiantou"></i>
                            </div>
                        </div>
                    </div>
                    <div class="real_time_fault_information_main">
                        <el-table
                            ref="alarmList"
                            v-loading="loading.alarmList"
                            element-loading-background="rgba(0, 0, 0, 0.5)"
                            height="calc(100% - 3.5rem)"
                            :data="alarmList">
                            <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">
                                    <span v-if="item.type != 1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>

                                </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="See">
                                        <i class="iconfont icon-chakanxiangqing"></i>
                                    </span>
                                    <span class="btn" @click="alarmTz(scope.row)" title="fault">
                                        <i class="iconfont icon-weixiu"></i>
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <!-- 表格详情弹框 -->
        <el-dialog
          title="Lamp Details"
          :visible.sync="detailsDialog"
          :close-on-click-modal="false"
          class="solar_dialig details_box"
          width="95%">
          <div class="wrap">
            <div class="nav clearfix" style="width: 550px;margin-left: -275px;">
                <div class="nav_list"
                    :class="{'details_nav_select':detailsNavSelect==item.model}"
                    v-for="item in detailsNavListEN"
                    :key="item.label"
                    @click="detailsNavSelectFun(item)"><span>{{item.label}}</span></div>
            </div>
            <div class="details_list_box clearfix" :class="{'details_list_box_EN':version == 1}" v-loading="loading.detailsFieldList">
                <div class="details_list" :class="{'details_list_min':(windowWidth < 1600 && version == 1)}" v-for="item in detailsFieldList" :key="item.key">
                    <template v-if="!(lampcontrolListHC['devicetype'] == '1')&&!(item.model =='lighteness'&&lampLoadtype=='1')">
                        <span v-if="item.unit">{{item.key+'('+item.unit+'):'}}</span>
                        <span v-if="!item.unit">{{item.key+':'}}</span>

                        <span v-if="item.value && item.model!='lampstatus'&&item.model !='status'&&item.model !='devicetype'&&item.model !='battstatus'&&item.model !='chargestage'" :title="item.value">{{item.value}}</span>
                        <span v-if="item.model && item.model=='lampstatus' && item.value == '0'" :title="'Off'">{{'Off'}}</span>
                        <span v-if="item.model && item.model=='lampstatus' && item.value == '1'" :title="'On'">{{'On'}}</span>

                        <span v-if="item.model && item.model=='status' && item.value == '0'" :title="'Not online'">{{'Not online'}}</span>
                        <span v-if="item.model && item.model=='status' && item.value == '1'" :title="'Online'">{{'Online'}}</span>
                        <span v-if="item.model && item.model=='battstatus' && item.value == '0'" :title="'idle'">{{'idle'}}</span>
                        <span v-if="item.model && item.model=='battstatus' && item.value == '1'" :title="'Discharging'">{{'Discharging'}}</span>
                        <span v-if="item.model && item.model=='battstatus' && item.value == '2'" :title="'Charging'">{{'Charging'}}</span>
                        <span v-if="item.model && item.model=='battstatus' && item.value == '3'" :title="'Discharge while charging'">{{'Discharge while charging'}}</span>

                        <span v-if="item.model && item.model=='chargestage' && (item.value == ''||item.value == null)" :title="'Unknown state'">{{'Unknown state'}}</span>
                        <span v-if="item.model && item.model=='chargestage' && item.value == '0'" :title="'Uncharged'">{{'Uncharged'}}</span>

                        <span v-if="item.model && item.model=='chargestage' && item.value == '1'" :title="'Start charging'">{{'Uncharged'}}</span>
                        <span v-if="item.model && item.model=='chargestage' && item.value == '6'" :title="'Current limiting'">{{'Uncharged'}}</span>
                        <span v-if="item.model && item.model=='chargestage' && item.value == '7'" :title="'Full'">{{'Uncharged'}}</span>

                        <span v-if="item.model && item.model=='chargestage' && item.value == '16'" :title="'MPPT charging'">{{'MPPT charging'}}</span>
                        <span v-if="item.model && item.model=='chargestage' && item.value == '32'" :title="'Balanced charge'">{{'Balanced charge'}}</span>
                        <span v-if="item.model && item.model=='chargestage' && item.value == '48'" :title="'Increase charging'">{{'Increase charging'}}</span>
                        <span v-if="item.model && item.model=='chargestage' && item.value == '64'" :title="'Floating charge'">{{'Floating charge'}}</span>

                        <span v-if="!(item.value)">{{item.value}}</span>
                    </template>
                </div>
                <div v-if="detailsFieldList.length == 0 && !loading.detailsFieldList" style="text-align:center;">
                    {{'No relevant data was queried'}}
                </div>
            </div>
          </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
    import allUel from '../api/allUel.js'
    import base from '../api/base.js'
    import { mapGetters } from 'vuex'
    // import bangladesh from '../store/Bangladesh.json'
    // import bangladesh from '../store/bangladesh_.json'
    // import bangladesh from '../store/bangladesh__.json'
    // import Barisal from '../store/Barisal.json'
    // // import bangladesh from '../store/Barisal_.json'
    // import Chittagong from '../store/Chittagong.json'
    // // import bangladesh from '../store/Chittagong_.json'
    // import Rajshahi from '../store/Rajshahi.json'
    // // import bangladesh from '../store/Rajshahi_.json'
    // import Rangpur from '../store/Rangpur.json'
    // // import bangladesh from '../store/Rangpur_.json'
    // import Dhaka from '../store/Dhaka.json'
    // // import bangladesh from '../store/Dhaka_.json'
    // import Sylhet from '../store/Sylhet.json'
    // // import bangladesh from '../store/Sylhet_.json'
    // import Mymensingh from '../store/Mymensingh.json'
    // // import bangladesh from '../store/Mymensingh_.json'
    // import Khulna from '../store/Khulna.json'
    // import bangladesh from '../store/Khulna_.json'
    // import bangladesh from '../store/map_bf.json'
    // import bangladesh from '../store/person.json'
    // import world from '../store/world.json'

    export default {
        name:'dashboard',
        data(){
            return{
                infoData:{
                    logCount:0,
                },
                statisticInfo:{},
                roleArr:['','Admin','Manufacturer','Supplier','PO','Upazilla','Monitoring','Controlling'],
                keywords:'',
                provinceId: null,
                provinceList:[],
                cityId:null,
                cityList:[],
                district:'',
                companyType:'',
                companyTypeNav:[{id:2,name:'Manufacturer'},{id:3,name:'Supplier'},{id:4,name:'PO'},{id:5,name:'Upazilla'}],
                rightDate:'',
                rightDateNav:[{id:'0',name:'Today'},{id:'1',name:'Week'},{id:'2',name:'Month'},{id:'3',name:'Total'}],
                myChart1:'',
                chartType:0,
                chartTypeArr:['Total','Online','Offline','Fault'],

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

                alarmList:[],
                faultInformationArr:[],
                lampId:null,
                windowWidth:0,

                myChart2:'',
                currentTime:new Date(),

                pro_dev_count:[],
                city_dev_count:[],
                area_dev_count:[],
                mapType:'',

                /*参数弹框*/
                companyNavPO:[],
                companyNavSupplier:[],
                detailsDialog:false,
                detailsNavSelect:'lamp_info_log',
                detailsNavList:[{model:'lamp_info_log',label:'路灯'},{model:'lampinfo',label:'配置'},{model:'system_info_log',label:'系统'},{model:'solar_info_log',label:'太阳能板'},{model:'battery_info_log',label:'蓄电池'}],
                detailsNavListEN:[
                    {model:'lamp_info_log',label:'Lamp'},
                    {model:'lampinfo',label:'Configuration'},
                    // {model:'system_info_log',label:'System'},
                    {model:'solar_info_log',label:'Solar panels'},
                    {model:'battery_info_log',label:'Battery'}
                ],
                detailsFieldList:[],
                streetlightDetails:[{model:'lighteness',label:'路灯亮度',unit:'%'},{model:'lampstatus',label:'路灯状态'},{model:'lampvoltage',label:'路灯电压',unit:'V'},{model:'lampcurrent',label:'路灯电流',unit:'A'},{model:'lamppower',label:'路灯功率',unit:'W'},{model:'temper',label:'灯头温度',unit:'°C'},{model:'updatetime',label:'最新更新时间'},{model:'status',label:'网络状态'},{model:'isfaulted',label:'是否故障'},{model:'lamp_no',label:'路灯编号'},{model:'network_no',label:'网络编号'},{model:'project_name',label:'项目名称'},{model:'address',label:'无线模块地址'},{model:'longitude',label:'经度'},{model:'latitude',label:'纬度'},{model:'section',label:'路段'},{model:'boardpower',label:'太阳能板功率',unit:'W'},{model:'poleheight',label:'灯杆高度',unit:'m'},{model:'polediameter',label:'灯杆直径',unit:'mm'},{model:'polematerial',label:'灯杆材质'},{model:'lighttype',label:'灯具类型'},{model:'lamptype',label:'路灯类型'},{model:'boardtype',label:'太阳能板类型'},{model:'batteryah',label:'蓄电池AH数'},{model:'loadpower',label:'负载功率',unit:'W'},{model:'solarvoltage',label:'太阳能板电压',unit:'V'},{model:'solarcurrent',label:'太阳能板电流',unit:'A'},{model:'solarpower',label:'太阳能板功率',unit:'W'},{model:'battstatus',label:'电池状态'},{model:'chargestage',label:'蓄电池充电阶段'},{model:'battvoltage',label:'蓄电池电压',unit:'V'},{model:'chargecurrent',label:'蓄电池充电电流',unit:'A'},{model:'discharcurrent',label:'蓄电池放电电流',unit:'A'},{model:'chargepower',label:'蓄电池充电功率',unit:'W'},{model:'dischargepower',label:'蓄电池放电功率',unit:'W'},{model:'batttemper',label:'蓄电池表面温度',unit:'°C'},{model:'electrictotal',label:'蓄电池总电量',unit:'AH'},{model:'electricleft',label:'蓄电池剩余电量',unit:'AH'},{model:'electricSOC',label:'蓄电池电量SOC',unit:'%'},{model:'voltagedaymin',label:'当天最低电压',unit:'V'},{model:'daychargeah',label:'当天充电安时数',unit:'AH'},{model:'daydischarah',label:'当天放电安时数',unit:'AH'},{model:'daychargemaxpow',label:'当天充电最大功率',unit:'V'},{model:'daydischarmaxpow',label:'当天放电最大功率',unit:'V'},{model:'daychargemincurrent',label:'当天充电最小电流',unit:'A'},{model:'daycharmaxcurrent',label:'当天充电最大电流',unit:'A'},{model:'daydischargemincurrent',label:'当天放电最小电流',unit:'A'},{model:'daydischarmaxcurrent',label:'当天放电最大电流',unit:'A'},{model:'daybattmintemper',label:'当天蓄电池最低温度',unit:'°C'},{model:'daybattmaxtemper',label:'当天蓄电池最高温度',unit:'°C'},{model:'devicetype',label:'设备类型'},{model:'simid',label:'SIM卡号'},{model:'packageSurplus',label:'套餐剩余'},{model:'monthly_can_usage',label:'套餐总量',unit:'M'},{model:'monthly_already_usage',label:'套餐使用量',unit:'M'},{model:'iccid',label:'ICCID',unit:''},{model:'softwareVersion',label:'Version information',unit:''}],

                updateRemRatioShakeProof:null,
                loading:{
                    deviceList:false,
                    alarmList:false,
                }
            }
        },
        computed:{
            ...mapGetters({
                token:'token',
                client_key:'client_key',
                username:'username',
                role:'role',
                version:'version',
                remRatio:'remRatio',
                updateRemRatio:'updateRemRatio',
            }),
            provinceIdName(){
                let name;
                if(this.provinceId == null){
                    return 'All'
                }
                for(let d of this.provinceList){
                    if(d.id == this.provinceId){
                        name = d.name;
                    }
                }
                return name;
            },
            cityIdName(){
                let name;
                if(this.cityId == null){
                    return 'All'
                }
                for(let d of this.cityList){
                    if(d.id == this.cityId){
                        name = d.name;
                    }
                }
                return name;
            },
            rightDateName(){
                let name;
                for(let d of this.rightDateNav){
                    if(d.id == this.rightDate){
                        name = d.name;
                    }
                }
                return name;
            },
            companyTypeName(){
                let name;
                for(let d of this.companyTypeNav){
                    if(d.id == this.companyType){
                        name = d.name;
                    }
                }
                return name;
            },
        },
        mounted(){
            let this_ = this;
            this.rightDate = '0';
            this.cityId = '0';
            this.companyType = 2;
            this.windowWidth = $(window).width();
            setInterval(function(){
                this_.currentTime = new Date();
            },1000)

            this.deviceArr = [
                {prop:'name',label:'Company',align:'left',minWidth:this.remRatio*10,type:1},
                {prop:'total',label:'Total',minWidth:this.remRatio*4,type:1},
                {prop:'onlineCount',label:'On-line',minWidth:this.remRatio*3},
                {prop:'lightCount',label:'Light up',minWidth:this.remRatio*3},
                {prop:'faultCount',label:'Fault',minWidth:this.remRatio*3},
            ];

            this.faultInformationArr = [
                {prop:'project',label:'Project',minWidth:this.remRatio*6,align:'left'},
                {prop:'location',label:'Upazilla',minWidth:this.remRatio*8},
                {prop:'address',label:'Light ID',minWidth:this.remRatio*8},
                {prop:'fault_type',label:'Fault type',minWidth:this.remRatio*8},
                {prop:'fault_time',label:'Fault time',width:this.remRatio*12},
            ];
            this.home_get_province(()=>{
                if(this.provinceList.length){
                    // this.provinceId = this.provinceList[0].id
                    this.provinceId = null;
                    this.home_get_city(()=>{
                        if(this.cityList.length){
                            // this.cityId = this.cityList[0].id
                            this.cityId = null;
                            this.getData();
                            this.getSta_info();
                            this.getDev_list();
                            this.getAlarm_list();
                        }else{
                            this.cityId = null;
                        }
                    })
                }else{
                    this.provinceId = null;
                }
            });
            this.home_pro_dev_count('bangladesh');
            this.getFields();
        },
        methods:{
            linkToFun(val){
                if(val != this.routerStr){
                    if(val == '/alarmMaintenance'&&this.alarmList.length>0){
                        let storage = window.localStorage;
                        storage.setItem('projectId',this.alarmList[0].projectid);
                    }
                    this.$router.push({path:val});
                    this.$store.commit('ROUTERSTRFUN',{
                        routerStr:val,
                    })
                    document.title = 'IDCOL-'+val.split('/')[1]
                }
            },
            alarmTz(data){
                var storage = window.localStorage;
                storage.setItem('projectId',data.projectid);
                this.$router.push({path:'/alarmMaintenance'});
                this.$store.commit('ROUTERSTRFUN',{
                    routerStr:'/alarmMaintenance',
                })
                document.title = 'IDCOL-alarmMaintenance'
            },
            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)
                if(obj.key == 'companyType'){
                    this.getDev_list();
                    if(obj.id == 2||obj.id == 3||obj.id == 4){
                        this.deviceArr = [
                            {prop:'name',label:'Company',align:'left',minWidth:this.remRatio*10,type:1},
                            {prop:'total',label:'Total',minWidth:this.remRatio*3,type:1},
                            {prop:'onlineCount',label:'On-line',minWidth:this.remRatio*3},
                            {prop:'lightCount',label:'Light up',minWidth:this.remRatio*3},
                            {prop:'faultCount',label:'Fault',minWidth:this.remRatio*3},
                        ];
                    }else{
                        this.deviceArr = [
                            {prop:'name',label:'Upazila',align:'left',minWidth:this.remRatio*10,type:1},
                            {prop:'total',label:'Total',minWidth:this.remRatio*3,type:1},
                            {prop:'onlineCount',label:'On-line',minWidth:this.remRatio*3},
                            {prop:'lightCount',label:'Light up',minWidth:this.remRatio*3},
                            {prop:'faultCount',label:'Fault',minWidth:this.remRatio*3},
                        ];
                    }
                    this.$nextTick(function(){
                        this.$refs.deviceList.doLayout();
                    })
                }
                if(obj.key == 'rightDate'){
                    this.getSta_info();
                }
                if(obj.key == 'provinceId'){
                    console.log(obj.item)
                    if(obj.id == null){
                        this.home_pro_dev_count('bangladesh');
                    }else{
                        this.home_city_dev_count(obj.item.name,obj.id);
                    }
                    this.home_get_city(()=>{
                        if(this.cityList.length){
                            // this.cityId = this.cityList[0].id
                            this.cityId = null
                            this.getData();
                            this.getSta_info();
                            this.getDev_list();
                            this.getAlarm_list();
                        }else{
                            this.cityId = null;
                        }
                    })
                }
                if(obj.key == 'cityId'){

                    this.home_area_dev_count(obj.item.name,obj.id,true)
                    this.getData();
                    this.getSta_info();
                    this.getDev_list();
                    this.getAlarm_list();
                }
            },
           /*灯控数据详情*/
            /*获取表格字段*/
            getFields(){
                base.ajax_post(
                    allUel.project.homeFields,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                    },
                    {},
                    data =>{
                        // console.log(data,'字段列表')
                        this.fieldList = data.data.list;
                    },
                this)
            },
            seeFun(data){
                this.detailsDialog = true;
                this.detailsFieldList = [];
                this.lampId = data.lampid;
                this.lampLoadtype = data.loadtype;
                if(data.loadtype == '1'){
                    this.detailsNavList[0].label ='Insect trap';
                }else{
                    this.detailsNavList[0].label ='lamp';
                }
                this.detailsNavSelect = 'lamp_info_log';
                this.lampcontrolViewloglist('lamp_info_log',data => {
                    // console.log(data,this.streetlightDetails)
                    let fieldList = Object.assign([],this.fieldList)
                    for(var key in data.data){
                        for(var d of this.streetlightDetails){
                            let obj = {};
                            for(let dd of fieldList){
                                // console.log(dd.fields1,d.model)
                                if(dd.fields1 == 'number'){
                                    dd.fields1 = 'lamp_no'
                                }
                                if(dd.fields1 == 'networkname'){
                                    dd.fields1 = 'network_no'
                                }
                                if(dd.fields1 == 'projectname'){
                                    dd.fields1 = 'project_name'
                                }
                                if(dd.fields1 == d.model){
                                    obj.key = dd.enname
                                }
                            }
                            if(this.lampLoadtype == '1'){
                                if(d.model == 'lampstatus'){
                                    obj.key = 'Insect trap status'
                                }
                                if(d.model == 'lampvoltage'){
                                    obj.key = 'Insect trap voltage'
                                }
                                if(d.model == 'lampcurrent'){
                                    obj.key = 'Insect trap current'
                                }
                                if(d.model == 'lamppower'){
                                    obj.key = 'Insect trap power'
                                }
                                
                            }
                            if(d.model == 'monthly_can_usage'){
                                obj.key = '套餐总量'
                            }
                            if(d.model == 'monthly_already_usage'){
                                obj.key = '套餐使用量'
                            }
                            if(d.model == 'iccid'){
                                obj.key = 'ICCID'
                            }
                            if(d.model == 'softwareVersion'){
                                obj.key = 'Version information'
                            }

                            if(d.model == 'lampstatus'){
                                obj.key = 'Lamp status'
                            }
                            if(d.model == 'lamppower'){
                                obj.key = 'Lamp power'
                            }
                            if(d.model == 'temper'){
                                obj.key = 'Temperature'
                            }
                            if(d.model == 'boardpower'){
                                obj.key = 'Solar panel power'
                            }
                            if(d.model == 'electricleft'){
                                obj.key = 'Remaining battery'
                            }
                            if(d.model == 'daychargeah'){
                                obj.key = 'Charging hours per day'
                            }
                            if(d.model == 'daydischarah'){
                                obj.key = 'Discharge ampere hours day'
                            }
                            if(d.model == 'chargestage'){
                                obj.key = 'Battery charging stage'
                            }
                            if(d.model == key){
                                if(d.model != 'devicetype'){
                                    obj.value = data.data[key];
                                    obj.model = d.model;
                                    obj.unit = '';
                                    console.log(obj.key,obj)
                                    this.detailsFieldList.push(obj)
                                }
                            }
                        }
                    }
                })
            },
            detailsNavSelectFun(data){
                this.detailsNavSelect = data.model;
                this.detailsFieldList = [];
                this.lampcontrolViewloglist(data.model,data => {
                    // console.log(data,this.streetlightDetails)
                    let fieldList = Object.assign([],this.fieldList)
                    for(var key in data.data){
                        for(var d of this.streetlightDetails){
                            let obj = {};
                            for(let dd of fieldList){
                                if(dd.fields1 == 'number'){
                                    dd.fields1 = 'lamp_no'
                                }
                                if(dd.fields1 == 'networkname'){
                                    dd.fields1 = 'network_no'
                                }
                                if(dd.fields1 == 'projectname'){
                                    dd.fields1 = 'project_name'
                                }
                                if(dd.fields1 == d.model){
                                    obj.key = dd.enname
                                }
                            }
                            if(this.lampLoadtype == '1'){
                                if(d.model == 'lampstatus'){
                                    obj.key = 'Insect trap status'
                                }
                                if(d.model == 'lampvoltage'){
                                    obj.key = 'Insect trap voltage'
                                }
                                if(d.model == 'lampcurrent'){
                                    obj.key = 'Insect trap current'
                                }
                                if(d.model == 'lamppower'){
                                    obj.key = 'Insect trap power'
                                }
                                if(d.model == 'lamp_no'){
                                    obj.key = 'Insect trap number'
                                }
                            }
                            if(d.model == 'monthly_can_usage'){
                                obj.key = '套餐总量'
                            }
                            if(d.model == 'monthly_already_usage'){
                                obj.key = '套餐使用量'
                            }
                            if(d.model == 'iccid'){
                                obj.key = 'ICCID'
                            }
                            if(d.model == 'softwareVersion'){
                                obj.key = 'Version information'
                            }

                            if(d.model == 'lampstatus'){
                                obj.key = 'Lamp status'
                            }
                            if(d.model == 'lamppower'){
                                obj.key = 'Lamp power'
                            }
                            if(d.model == 'temper'){
                                obj.key = 'Temperature'
                            }
                            if(d.model == 'boardpower'){
                                obj.key = 'Solar panel power'
                            }
                            if(d.model == 'electricleft'){
                                obj.key = 'Remaining battery'
                            }
                            if(d.model == 'daychargeah'){
                                obj.key = 'Charging hours per day'
                            }
                            if(d.model == 'daydischarah'){
                                obj.key = 'Discharge ampere hours day'
                            }
                            if(d.model == 'chargestage'){
                                obj.key = 'Battery charging stage'
                            }
                            if(d.model == key){
                                if(d.model != 'devicetype'){
                                    obj.value = data.data[key];
                                    obj.model = d.model;
                                    obj.unit = '';
                                    console.log(obj.key,obj)
                                    this.detailsFieldList.push(obj)
                                }
                            }
                        }
                    }
                })
            },
            lampcontrolViewloglist(value,callback){
                this.loading.detailsFieldList = true;
                base.ajax_post(
                    allUel.project.lampcontrolViewloglist,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        lamp_id:this.lampId,
                        datatype:value,
                    },
                    {},
                    data =>{
                        this.loading.detailsFieldList = false;
                        if(callback){
                            callback(data)
                        }
                        this.lampcontrolListHC = data.data;
                    },
                this,()=>{
                    this.loading.detailsFieldList = false;
                })
            },
            /*橄榄信息*/
            getData(){
                base.ajax_post(
                    allUel.dashboard.data,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        proId:this.provinceId,
                        cityId:this.cityId,
                    },
                    {},
                    data => {
                        this.infoData = data.data;
                        this.infoData.light_up_count_percent =  this.infoData.total_light_count==0?0:this.infoData.light_up_count/this.infoData.total_light_count*100
                        this.infoData.online_count_percent =  this.infoData.total_light_count==0?0:this.infoData.online_count/this.infoData.total_light_count*100
                        this.infoData.faulty_count_percent =  this.infoData.total_light_count==0?0:this.infoData.faulty_count/this.infoData.total_light_count*100
                        this.infoData.day_new_count_percent =  this.infoData.total_light_count==0?0:this.infoData.day_new_count/this.infoData.total_light_count*100
                    },
                    this
                )
            },
            /*统计信息*/
            getSta_info(){
                base.ajax_post(
                    allUel.dashboard.sta_info,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        proId:this.provinceId,
                        cityId:this.cityId,
                        type:this.rightDate,
                    },
                    {},
                    data => {
                        this.statisticInfo = data.data;
                    },
                    this
                )
            },
            /*省份设备分布*/
            home_pro_dev_count(mapName){
                base.ajax_post(
                    allUel.common.home_pro_dev_count,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                    },
                    {},
                    data => {
                        this.pro_dev_count = data.data.list;
                        this.echartsMapInit(mapName,this.pro_dev_count,'')
                    },
                    this
                )
            },
            /*城市设备分布*/
            home_city_dev_count(mapName,id){
                base.ajax_post(
                    allUel.common.home_city_dev_count,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        proId:id,
                    },
                    {},
                    data => {
                        this.city_dev_count = data.data.list;
                        this.echartsMapInit(mapName,this.city_dev_count,'')
                    },
                    this
                )
            },
            /*区域设备分布*/
            home_area_dev_count(mapName,id,isTrue){
                base.ajax_post(
                    allUel.common.home_area_dev_count,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        cityId:id,
                    },
                    {},
                    data => {
                        this.area_dev_count = data.data.list;
                        this.echartsMapInit(mapName,this.area_dev_count,isTrue)
                    },
                    this
                )
            },
            /*省份下拉列表*/
            home_get_province(callback){
                base.ajax_post(
                    allUel.common.home_get_province,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                    },
                    {},
                    data => {
                        this.provinceList = data.data.list;
                        if(callback){
                            callback()
                        }
                    },
                    this
                )
            },
            /*城市下拉*/
            home_get_city(callback){
                base.ajax_post(
                    allUel.common.home_get_city,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        proId:this.provinceId,
                    },
                    {},
                    data => {
                        this.cityList = data.data.list;
                        if(callback){
                            callback()
                        }
                    },
                    this
                )
            },
            /*设备列表*/
            getDev_list(){
                base.ajax_post(
                    allUel.dashboard.dev_list,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        proId:this.provinceId,
                        cityId:this.cityId,
                        type:this.companyType
                    },
                    {},
                    data => {
                        this.deviceList = data.data.list;
                        this.deviceBarInit(this.deviceList,this.chartType);
                    },
                    this
                )
            },
            /*故障列表*/
            getAlarm_list(){
                base.ajax_post(
                    allUel.dashboard.alarm_list,
                    {
                        username:this.username,
                        token:this.token,
                        client_key:this.client_key,
                        proId:this.provinceId,
                        cityId:this.cityId,
                    },
                    {},
                    data => {
                        this.alarmList = data.data.list;
                        let i = 1;
                        for(let d of this.alarmList){
                            d.webIndex = i;
                            i++;
                        }
                    },
                    this
                )
            },
            tableEnter(data){
                this.tableShowId = data.id;
                this.myChart2.dispatchAction({
                    type: 'downplay',
                })
                this.myChart2.dispatchAction({
                    type: 'highlight',
                    // 可选，系列 index，可以是一个数组指定多个系列
                    // seriesIndex?: number|Array,
                    // // 可选，系列名称，可以是一个数组指定多个系列
                    // seriesName?: string|Array,
                    // // 可选，数据的 index
                    // dataIndex?: number,
                    // 可选，数据的 名称
                    name: data.name
                })
            },
            tableLeave(){
              this.tableShowId = '-1';
            },
            chartTypeFun(val){
                if(val != this.chartType){
                    this.chartType = val;
                    this.deviceBarInit(this.deviceList,this.chartType);
                }
            },
            mapReturn(){
                this.home_get_province(()=>{
                    if(this.provinceList.length){
                        // this.provinceId = this.provinceList[0].id
                        this.provinceId = null;
                        this.home_get_city(()=>{
                            if(this.cityList.length){
                                // this.cityId = this.cityList[0].id
                                this.cityId = null;
                                this.getData();
                                this.getSta_info();
                                this.getDev_list();
                                this.getAlarm_list();
                            }else{
                                this.cityId = null;
                            }
                        })
                    }else{
                        this.provinceId = null;
                    }
                });
                this.home_pro_dev_count('bangladesh');
            },
            echartsMapInit(mapName,list,cityName){
                console.log(list)
                let this_ = this;
                let nameSuffix = '';
                if(!list||list.length==0){
                    return
                }
                nameSuffix = 'District';
                this.mapType = 'Bangladesh'
                if(mapName == 'bangladesh'){
                    nameSuffix = 'Division';
                }
                console.log(cityName)
                if(cityName){
                    nameSuffix = '';
                    cityName = 'area/'
                    mapName = mapName+'_3'
                    // this.mapType = mapName+' Division';
                    // this.mapType = mapName+' District';
                }else{
                    cityName = ''
                }
                this.$nextTick(function(){
                    console.log([mapName],mapName)
                    if(document.getElementsByClassName('echarts_map')[0]){
                        $(".echarts_map").removeAttr("_echarts_instance_").empty()
                        this.myChart1 = echarts.init(document.getElementsByClassName('echarts_map')[0]);
                        // let provincesObj = {'bangladesh':bangladesh,'Barisal':Barisal,'Chittagong':Chittagong,'Dhaka':Dhaka,'Rajshahi':Rajshahi,'Khulna':Khulna,'Rangpur':Rangpur,'Sylhet':Sylhet,'Mymensingh':Mymensingh};
                        this.myChart1.showLoading()
                        $.getJSON('./js/json/'+cityName+mapName+'.json',function(mapJson){
                            echarts.registerMap(mapName, mapJson);
                            for(let d of list){
                                d.name = nameSuffix?d.name + ' ' + nameSuffix:d.name;
                                d.value = d.lampcount;
                            }
                            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(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: mapName,
                                        map: mapName,
                                        zoom:1.2,
                                        roam: true,
                                        data: list
                                    }
                                ]
                            })
                            this_.myChart1.on('click', function (param) {
                                if(param.data.name.split(' ')[1] == 'Division'&&param.data.value>0){
                                    console.log(param);
                                    this_.home_city_dev_count(param.data.name.split(' ')[0],param.data.id)
                                    this_.provinceId = param.data.id;
                                    this_.home_get_city(()=>{
                                        if(this_.cityList.length){
                                            // this_.cityId = null;
                                            this_.getData();
                                            this_.getSta_info();
                                            this_.getDev_list();
                                            this_.getAlarm_list();
                                        }else{
                                            // this_.cityId = null;
                                        }
                                    })
                                }
                                if(param.data.name.split(' ')[1] == 'District'&&param.data.value>0){
                                    console.log(param);
                                    this_.home_area_dev_count(param.data.name.split(' ')[0],param.data.id,true)
                                    this_.cityId = param.data.id;
                                }
                            });
                            this_.myChart1.hideLoading()
                        });
                    }
                })
            },
            deviceBarInit(data,type){
                console.log(data,type)
                if(this.myChart2){
                    this.myChart2.dispose()
                }
                if(document.getElementsByClassName('device_pie')[0]){
                    let colorArr = ['#FF6474','#FC8440','#FFA8B1','#FFCFD4','#FFD86F','#FFC936','#ADC6FF','#1D7DFD'];
                    let seriesData = [];
                    let i = 0;
                    if(data.length>0){
                        for(let d of data){
                            if(type == 0){
                                seriesData.push({name: d.name,value: d.total,itemStyle:{color:colorArr[i]}})
                            }
                            if(type == 1){
                                seriesData.push({name: d.name,value: d.onlineCount,itemStyle:{color:colorArr[i]}})
                            }
                            if(type == 2){
                                seriesData.push({name: d.name,value: d.lightCount,itemStyle:{color:colorArr[i]}})
                            }
                            if(type == 3){
                                seriesData.push({name: d.name,value: d.faultCount,itemStyle:{color:colorArr[i]}})
                            }
                            i++;
                        }
                    }
                    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
                                },
                            }
                        ]
                    })
                    this.myChart2.on('mouseover', params=>{
                        for(let d of this.deviceList){
                            if(params.name == d.name){
                                this.$refs.deviceList.setCurrentRow(d);
                            }
                        }
                    })
                    this.myChart2.on('mouseout', ()=>{
                                this.$refs.deviceList.setCurrentRow();
                        // for(let d of this.deviceList){
                        //     if(params.name == d.name){
                        //     }
                        // }
                    })
                }
            },
        },
        watch:{
            updateRemRatio(){
                clearTimeout(this.updateRemRatioShakeProof)
                this.updateRemRatioShakeProof = setTimeout(()=>{
                    if(this.myChart1){
                        this.myChart1.resize();
                    }
                    if(this.myChart2){
                        this.myChart2.resize();
                    }
                },1000)
            },
        }
    }
</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);
                    position: relative;
                    .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;
                    }
                    .map_return{
                        display: flex;
                        align-items: center;
                        position: absolute;
                        top: 4rem;left: 1rem;
                        height: 2rem;line-height: 2rem;
                        background-color: #fc8940;
                        cursor: pointer;
                        padding: 0 0.5rem;
                        color:#fff;
                        i{
                            margin: 0 0.5rem 0 0.5rem;
                        }
                    }
                }
            }
            .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);
                                width: 25%;
                                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);
                                    line-height:2.5rem;
                                    overflow: hidden;
                                    text-overflow:ellipsis;
                                    white-space: nowrap;
                                }
                                .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);
                                }
                            }
                            .el-dropdown-link{
                                font-size:1rem;
                                font-family:PingFang-SC-Medium,PingFang-SC;
                                font-weight:500;
                                color:rgba(101,112,133,1);
                                cursor: pointer;
                            }
                        }
                    }
                    .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);
                            height: calc(100% - 2.1rem);
                            margin-top: 1.5rem;
                            .el-table{
                                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;
                                        }
                                    }
                                    &.current-row>td{
                                        background: rgba(246, 248, 250, 1);
                                        >.cell{
                                            font-family:PingFangSC-Semibold,PingFang SC;
                                            font-weight:600;
                                        }
                                    }
                                }
                                .city{
                                    i{
                                        position: relative;
                                        top: -0.15rem;
                                        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{
                        height: calc(100% - 4.6rem);
                        .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);
                                    padding: 0 0.5rem;
                                }
                            }
                            tr:hover>td{
                                background: rgba(246, 248, 250, 1);
                                >.cell{
                                    font-family:PingFangSC-Semibold,PingFang SC;
                                    font-weight:600;
                                }
                            }
                            .btn{
                                cursor: pointer;
                                padding: 0 0.5rem;
                                .iconfont{
                                    font-weight:500;
                                    color: rgba(252, 132, 64, 1);
                                }
                            }
                            .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);
                                }
                            }
                        }
                    }
                }
            }
        }
        /*灯控详情*/
        .details_box{
            .wrap{
                .table_box{
                    text-align: center;
                    th{
                        text-align: center;
                        color: #444444;
                    }
                }
                .el-table--enable-row-hover .el-table__body tr:hover>td{
                    // background: inherit;
                }
                .row_bg{
                    background: #F6F6F9;
                }
                position: relative;
                // height: 50px;
                .nav{
                    position: absolute;
                    width:428px;
                    height:50px;
                    line-height: 50px;
                    left: 50%;
                    margin-left: -214px;
                    background:rgba(255,255,255,1);
                    border-radius: 100px;
                    border:1px solid #E8E8E8;
                    .nav_list{
                        float: left;
                        width: 19%;
                        text-align: center;
                        cursor: pointer;
                        span{
                            font-size:14px;
                            font-family:PingFangSC-Medium;
                            color:#888888;
                        }
                    }
                    .details_nav_select{
                        background:linear-gradient(-90deg,rgba(54,130,251,1),rgba(56,161,246,1));
                        border-radius: 100px;
                        width: 24%;
                        span{
                            color: #ffffff;
                        }
                    }
                }
                .historicalnav{
                    position: absolute;
                    width:428px;
                    height:50px;
                    line-height: 50px;
                    left: 50%;
                    margin-left: -214px;
                    background:rgba(255,255,255,1);
                    border-radius: 100px;
                    border:1px solid #E8E8E8;
                    .nav_list{
                        float: left;
                        width: 24%;
                        text-align: center;
                        cursor: pointer;
                        span{
                            font-size:14px;
                            font-family:PingFangSC-Medium;
                            color:#888888;
                        }
                    }
                    .details_nav_select{
                        background:linear-gradient(-90deg,rgba(54,130,251,1),rgba(56,161,246,1));
                        border-radius: 100px;
                        width: 28%;
                        span{
                            color: #ffffff;
                        }
                    }
                }
                .details_list_box{
                    padding-top: 126px;
                    display: flex;
                    // justify-content: space-between;
                    flex-direction: row;
                    flex-wrap: wrap;
                    .details_list{
                        // float: left;
                        width: 25%;
                        position: relative;
                        margin-bottom: 30px;
                        span{
                            display: inline-block;
                            font-size:16px;
                            font-family:PingFangSC-Medium;
                            color:#222222;
                            line-height:16px;
                            height:44px;
                            line-height: 44px;
                            // white-space: nowrap;
                            // overflow: hidden;
                            // text-overflow: ellipsis;
                        }
                        span:first-child{
                            position: absolute;
                            width: 180px;
                            padding-right:20px;
                            text-align: right;
                        }
                        span:last-child{
                            padding: 0 20px;
                            margin-left: 190px;
                            width:calc(100% - 242px);
                            background:#F8F9FC;
                            border-radius: 2px ;
                            border: 1px solid #E8E8E8;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
                .details_list_box_EN{
                    .details_list_min{
                        width: 33.3%;
                    }
                    .details_list{
                        span:first-child{
                            width: 255px;
                            // line-height: 22px;
                        }
                        span:last-child{
                            margin-left: 260px;
                            width:calc(100% - 300px);
                        }
                    }
                }
            }
        }
    }
</style>