IDCOL/webConfig/src/views/GISMap.vue

<template>
    <div class="GISMap_main">
        <div class="main_top_bg">
        </div>
        <side-bar-idcol class="side_bar_left" :sideBarList="projectNav" :companyId="companyId" :projectId="projectId" :roadId="roadId" :sideBarListIsOpen="sideBarListIsOpen" :projectSelectFun="projectSelectFun" :roadSelectFun="roadSelectFun" :sideBarIsOn="sideBarIsOn" :sideBarType="sideBarType" :sideBarCompanyList="sideBarCompanyList" :projectAll="projectAll"></side-bar-idcol>
        <div class="right_sidebar_box">
            <div class="top_data_box" :class="{'EN':version == '0'}" :style="{'top':topDataBoxShow?'0px':'-96px'}">
                <div class="ul" >
                    <div class="li" v-for="item in topDataListEN" :key="item.id">
                        <p class="p1" v-if="topDataNav[item.model]">{{topDataNav[item.model]>9999?parseInt(topDataNav[item.model]):topDataNav[item.model]}}<span v-if="item.value">{{topDataNav[item.value]}}%</span></p>
                        <p class="p1" v-if="!topDataNav[item.model]">0<span v-if="item.value">{{topDataNav[item.value]}}%</span></p>
                        <p class="p2"><i></i>{{item.label}}</p>
                    </div>
                </div>
                <div class="bottom_box" @click="topDataBoxShowFun()">
                    <div class="icon">
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="amap-wrapper" element-loading-text="Map data loading">
            <div id="container">
            </div>
            <ul class="contextmenu" :style="{'top':contextmenuY+'px','left':contextmenuX+'px'}" v-show="contextmenuIsShow" @contextmenu="contextmenuFun">
                <li @click="lampRotateFun" v-if="mapTCtype == 'Satellite'" class="rotate">
                    <div>{{'Rotate '+lmText}}</div>
                    <div class="rotate_btu">
                        <div @click="changeDirectionFun('0')">{{'Up'}}</div>
                        <div @click="changeDirectionFun('1')">{{'Down'}}</div>
                        <div @click="changeDirectionFun('2')">{{'Left'}}</div>
                        <div @click="changeDirectionFun('3')">{{'Right'}}</div>
                    </div>
                </li>
                <li @click="lampEditFun">{{'Edit '+lmText}}</li>
                <li @click="lampDelFun">{{'Delete '}}</li>
            </ul>
            <div class="contextmenu_bg" v-show="contextmenuIsShow" @contextmenu="contextmenuFun" @mousedown="mousedownFun"></div>
        </div>
        <div class="lamp_dialog" :class="{'EN':version == '0'}" v-if="lampDialogShow">
            <div class="top_nav">
                <div class="top_nav_li top_nav_li1" :class="{'select':lampDialogType == '1','borderRadius1':lampDialogType == '2'}" @click="lampDialogTypeSwitch('1')">
                    <div class="bg">
                        <span>{{'Lamp'}}</span>
                    </div>
                </div>
                <div class="top_nav_li top_nav_li2" :class="{'select':lampDialogType == '2','borderRadius21':lampDialogType == '1','borderRadius23':lampDialogType == '3'}" @click="lampDialogTypeSwitch('2')">
                    <div class="bg">
                        <span>{{'Section'}}</span>
                    </div>
                </div>
                <div class="top_nav_li top_nav_li3" :class="{'select':lampDialogType == '3','borderRadius3':lampDialogType == '2'}" @click="lampDialogTypeSwitch('3')">
                    <div class="bg">
                        <span>{{'Project'}}</span>
                    </div>
                </div>
                <div class="top_nav_li top_nav_li4" :class="{'borderRadius4':lampDialogType == '3'}" @click="lampDialogClose">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="lamp_info scroll_show" v-if="lampDialogType == '1'" key="lamp_info">
                <div class="box1">
                    <div class="box1_left">
                        <div class="li li1"><span class="span1">{{'number'}}</span><span class="span2">{{dialogLampInfo.number}}</span></div>
                        <div class="li li2"><span class="span1">{{'SN'}}</span><span class="span2">{{dialogLampInfo.address}}</span></div>
                    </div>
                    <div class="box1_right">
                        <img :src="require('../img/GIS/wifi_'+dialogLampInfo.netStatus+'.png')" />
                    </div>
                </div>
                <div class="box">
                    <div class="box_top">
                        <div class="top_left">
                            <i></i><span>{{'Lamp'}}</span>
                        </div>
                        <div class="top_right" @click="historicalFun(dialogLampInfo,'lamp_info_log')">
                            <img src="../img/GIS/data_icon.png"><span>{{'Historical data'}}</span>
                        </div>
                    </div>
                    <div class="data_box">
                        <div class="li">
                            <div class="li_left">
                                <span class="span1">{{'Brightness'}}</span>
                                <span class="span2">{{dialogLampInfo.lighteness}}(%)</span>
                            </div>
                            <i></i>
                            <div class="li_right">
                                <span class="span1">{{'Power'}}</span>
                                <span class="span2">{{dialogLampInfo.lamppower}}(W)</span>
                            </div>
                        </div>
                        <div class="li">
                            <div class="li_left">
                                <span class="span1">{{'Voltage'}}</span>
                                <span class="span2">{{dialogLampInfo.lampvoltage}}(V)</span>
                            </div>
                            <i></i>
                            <div class="li_right">
                                <span class="span1">{{'Current'}}</span>
                                <span class="span2">{{dialogLampInfo.lampcurrent}}(A)</span>
                            </div>
                        </div>
                    </div>
                </div>
            <div class="box">
                <div class="box_top">
                    <div class="top_left">
                        <i></i><span>{{'Battery'}}</span>
                    </div>
                    <div class="top_right" @click="historicalFun(dialogLampInfo,'battery_info_log')">
                        <img src="../img/GIS/data_icon.png"><span>{{'Historical data'}}</span>
                    </div>
                </div>
                <div class="data_box">
                    <div class="li">
                        <div class="li_left">
                            <span class="span1">{{'Electric quantity'}}</span>
                            <span class="span2">{{dialogLampInfo.electricleft}}(%)</span>
                        </div>
                        <i></i>
                        <div class="li_right">
                            <span class="span1">{{'temperature'}}</span>
                            <span class="span2">{{dialogLampInfo.batttemper}}(℃)</span>
                        </div>
                    </div>
                    <div class="li">
                        <div class="li_left">
                            <span class="span1">{{'state'}}</span>
                            <!-- <span class="span2" v-if="version=='0'">{{chargestageData[dialogLampInfo.chargestage]}}</span> -->
                            <span class="span2" >{{chargestageDataEN[dialogLampInfo.chargestage]}}</span>
                        </div>
                        <i></i>
                        <div class="li_right">
                            <span class="span1">{{'Over Discharge times'}}</span>
                            <span class="span2">{{dialogLampInfo.overtimes}}</span>
                        </div>
                    </div>
                    <div class="li">
                        <div class="li_left">
                            <span class="span1">{{'Voltage'}}</span>
                            <span class="span2">{{dialogLampInfo.battvoltage}}(V)</span>
                        </div>
                        <i></i>
                        <div class="li_right">
                            <span class="span1">{{'Current'}}</span>
                            <span class="span2">{{dialogLampInfo.discharcurrent}}(A)</span>
                        </div>
                    </div>
                    <div class="li">
                        <div class="li_center">
                            <span class="span1">{{'Power'}}</span>
                            <span class="span2">{{dialogLampInfo.dischargepower}}(W)</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box_top">
                    <div class="top_left">
                        <i></i><span>{{'Solar panels'}}</span>
                    </div>
                    <div class="top_right" @click="historicalFun(dialogLampInfo,'solar_info_log')">
                        <img src="../img/GIS/data_icon.png"><span>{{'Historical data'}}</span>
                    </div>
                </div>
                <div class="data_box">
                    <div class="li">
                        <div class="li_left">
                            <span class="span1">{{'Charging time'}}</span>
                            <span class="span2">{{dialogLampInfo.daydischargemincurrent}}</span>
                        </div>
                        <i></i>
                        <div class="li_right">
                            <span class="span1">{{'Sunshine duration'}}</span>
                            <span class="span2">{{dialogLampInfo.sunTime}}(h)</span>
                        </div>
                    </div>
                    <div class="li">
                        <div class="li_left">
                            <span class="span1">{{'Voltage'}}</span>
                            <span class="span2">{{dialogLampInfo.solarvoltage}}(V)</span>
                        </div>
                        <i></i>
                        <div class="li_right">
                            <span class="span1">{{'Current'}}</span>
                            <span class="span2">{{dialogLampInfo.solarcurrent}}(A)</span>
                        </div>
                    </div>
                    <div class="li">
                        <div class="li_center">
                            <span class="span1">{{'Power'}}</span>
                            <span class="span2">{{dialogLampInfo.solarpower}}(W)</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box_top">
                    <div class="top_left">
                        <i></i><span>{{'Basic information'}}</span>
                    </div>
                    <div class="top_right_fault" v-if="dialogLampInfo.isfaulted==1"  @click="lampInfoFailure('lamp',dialogLampInfo)">
                        <img src="../img/GIS/fault_icon.png">
                        <span>{{'故障'}}</span>
                    </div>
                </div>
                <div class="data_box">
                    <div class="li">
                        <div class="li_left">
                            <span class="span1">{{'Controller temperature'}}</span>
                            <span class="span2">{{dialogLampInfo.temper}}(℃)</span>
                        </div>
                        <i></i>
                        <div class="li_right">
                            <span class="span1">{{'Cumulative light-on time'}}</span>
                            <span class="span2">{{dialogLampInfo.totalLightTime}}</span>
                        </div>
                    </div>
                    <div class="li">
                        <div class="li_left">
                            <span class="span1">{{'Cumulative power generation'}}</span>
                            <span class="span2">{{dialogLampInfo.totalgeneration}}(kWh)</span>
                        </div>
                        <i></i>
                        <div class="li_right">
                            <span class="span1">{{'Accumulated electricity consumption'}}</span>
                            <span class="span2">{{dialogLampInfo.totalconsumption}}(kWh)</span>
                        </div>
                    </div>
                    <div class="li">
                        <div class="li_center">
                            <span class="span1">{{'service life'}}</span>
                            <div class="progress_">
                                <el-progress :percentage="dialogLampInfo.jd_sfe"></el-progress>
                            </div>
                            <!-- <span class="span2">{{dialogLampInfo.later}}</span> -->
                        </div>
                    </div>
                    <div class="li">
                        <div class="li_center">
                            <span class="span1">{{'Expected useful life'}}</span>
                            <span class="span2">{{dialogLampInfo.later}}{{'year'}}</span>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            <div class="road_info scroll_show" v-if="lampDialogType == '2'" key="road_info">
                <div class="box1">
                    <div class="box">
                        <div class="box_box">
                            <span class="span1">{{'Section Name'}}</span>
                            <span class="span2">{{dialogSectionInfo.section}}</span>
                        </div>
                    </div>
                </div>
                <div class="box2">
                    <div class="flex_box">
                        <div class="li">
                            <p class="p1">{{dialogSectionInfo.lamp_count}}</p>
                            <p class="p2">{{'Installation Number'}}</p>
                        </div>
                        <div class="li">
                            <p class="p1">{{dialogSectionInfo.light_count}}</p>
                            <p class="p2">{{'lights Number'}}<span>{{dialogSectionInfo.light_rate}}%</span></p>
                        </div>
                        <div class="li">
                            <p class="p1">{{dialogSectionInfo.online_count}}</p>
                            <p class="p2">{{'On-line Number'}}<span>{{dialogSectionInfo.online_rate}}%</span></p>
                        </div>
                    </div>
                    <div class="box">
                        <div>
                            <i class="dian"></i>
                            <span class="span1">{{'Equipment failure Number'}}</span>
                        </div>
                        <div class="click" @click="lampInfoFailure('road',dialogSectionInfo)">
                            <span class="span2">{{dialogSectionInfo.fail_count}}</span>
                            <span class="span3">({{dialogSectionInfo.fail_rate}}%)</span>
                            <i class="el-icon-setting sz"></i>
                        </div>
                    </div>
                </div>
                <div class="box3">
                    <div class="box3_top">
                        <i class="dian"></i><span>{{'Section Mean'}}</span>
                    </div>
                    <div class="data_box">
                        <div class="li">
                            <div class="li_left">
                                <span class="span1">{{'Lighting duration'}}</span>
                                <span class="span2">{{dialogSectionInfo.daychargemincurrent}}</span>
                            </div>
                            <i></i>
                            <div class="li_right">
                                <span class="span1">{{'Charging time'}}</span>
                                <span class="span2">{{dialogSectionInfo.daydischargemincurrent}}</span>
                            </div>
                        </div>
                        <div class="li">
                            <div class="li_left">
                                <span class="span1">{{'Generation capacity'}}</span>
                                <span class="span2">{{dialogSectionInfo.totalgeneration}}(Kwh)</span>
                            </div>
                            <i></i>
                            <div class="li_right">
                                <span class="span1">{{'Electricity consumption'}}</span>
                                <span class="span2">{{dialogSectionInfo.totalgeneration}}(Kwh)</span>
                            </div>
                        </div>
                        <div class="li">
                            <div class="li_left">
                                <span class="span1">{{'Battery Voltage'}}V</span>
                                <span class="span2">{{dialogSectionInfo.battvoltage}}(V)</span>
                            </div>
                            <i></i>
                            <div class="li_right">
                                <span class="span1">{{'Battery capacity'}}</span>
                                <span class="span2">{{dialogSectionInfo.electricleft}}(%)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box4">
                    <div class="box4_top">
                        <div class="box4_top_left">
                            <i class="dian"></i><span>{{'Lamp list'}}</span>
                        </div>
                        <div class="box4_top_right">
                            <div class="li" :class="{'select':roadOnlineStatus==1}" @click="roadInfoScreen(1)">{{'On-line'}}</div>
                            <div class="li" :class="{'select':roadLightStatus==1}" @click="roadInfoScreen(2)">{{'ON'}}</div>
                            <div class="li" :class="{'select':roadFailStatus==1}" @click="roadInfoScreen(3)">{{'fault'}}</div>
                        </div>
                    </div>
                    <div class="table_box">
                        <el-table
                            :data="rodaTableData"
                            ref="rodaTableData"
                            height="calc(100% - 10px)"
                            :row-class-name="rodaTableDataRowName"
                            @row-dblclick="rodaTableDblclick"
                            style="width: 100%">
                            <el-table-column v-for="item in rodaTableList" :key="item.prop" :label="item.label" :prop="item.prop" :min-width="item.width" align="center">
                                <template slot-scope="scope">
                                    <i class="border_i" v-if="item.prop=='number'"></i>
                                    <span v-if="item.prop!='netStatus'" :class="{'red':scope.row.isfaulted == 1}">{{scope.row[item.prop]}}</span>
                                    <img v-if="item.prop=='netStatus'" :src="require('../img/GIS/wifi_'+scope.row[item.prop]+'.png')" class="wifi_img" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="project_info scroll_show" v-if="lampDialogType == '3'" key="project_info">
                <div class="box1">
                    <div class="box1_bg">
                        <div class="box1_left">
                            <span class="span1">{{'Project'}}</span>
                            <span class="span2">{{dialogProjectInfo.projectname}}</span>
                        </div>
                        <div class="box1_right">
                            <span class="span1">{{'Section'}}</span>
                            <el-select v-model="dialogProjectInfo.section" placeholder=" " @change="projectInfoSection" class="span2">
                                <el-option
                                    v-for="item in dialogProjectInfo.section_nav"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="box2">
                    <div class="flex_box">
                        <div class="li">
                            <p class="p1">{{dialogProjectInfo.total_lamp}}</p>
                            <p class="p2">{{'Installation Number'}}</p>
                        </div>
                        <div class="li">
                            <p class="p1">{{dialogProjectInfo.lighting_count}}</p>
                            <p class="p2">{{'lights Number'}}<span>{{dialogProjectInfo.lighting_rate}}%</span></p>
                        </div>
                        <div class="li">
                            <p class="p1">{{dialogProjectInfo.online_count}}</p>
                            <p class="p2">{{'On-line Number'}}<span>{{dialogProjectInfo.online_rate}}%</span></p>
                        </div>
                    </div>
                    <div class="box">
                        <div>
                            <i class="dian"></i>
                            <span class="span1">{{'Equipment failure Number'}}</span>
                        </div>
                    <div class="click" @click="lampInfoFailure('project',dialogProjectInfo)">
                        <span class="span2">{{dialogProjectInfo.failure_count}}</span>
                        <span class="span3">({{dialogProjectInfo.failure_rate}}%)</span>
                        <i class="el-icon-setting sz"></i>
                        </div>
                    </div>
                </div>
                <div class="box3">
                    <div class="box3_top">
                        <div class="box3_top_l">
                            <p class="p1"><i></i> <span>{{'Total power generation'}}（kWh）</span></p>
                            <p class="p2"><span>{{dialogProjectInfo.totalgeneration}}</span></p>
                        </div>
                        <div class="box3_top_r">
                            <p class="p1"><i></i> <span>{{'Total Power'}}（kWh）</span></p>
                            <p class="p2"><span>{{dialogProjectInfo.totalconsumption}}</span></p>
                        </div>
                    </div>
                    <div class="box3_bottom">
                        <div class="li">
                            <p class="p1">{{'Emission reduction CO2'}}</p>
                            <p class="p2">
                                <span class="span1">{{dialogProjectInfo.co2_emission}}</span>
                                <span class="span2">kg</span>
                            </p>
                        </div>
                        <div class="li">
                            <p class="p1">{{'Emission reduction SO2'}}</p>
                            <p class="p2">
                                <span class="span1">{{dialogProjectInfo.so2_emission}}</span>
                                <span class="span2">kg</span>
                            </p>
                        </div>
                        <div class="li">
                            <p class="p1">{{'Saving Standard Coal'}}</p>
                            <p class="p2">
                                <span class="span1">{{dialogProjectInfo.coal_saving}}</span>
                                <span class="span2">t</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="box4">
                    <div class="box_top">
                        <i class="dian"></i><span>{{'configuration information'}}</span>
                    </div>
                    <div class="data_box">
                        <div class="li">
                            <div class="li_center">
                                <span class="span1">{{'Controller Model'}}</span>
                                <span class="span2">{{dialogProjectInfo.controlType}}</span>
                            </div>
                        </div>
                        <div class="li">
                            <div class="li_center">
                                <span class="span1">{{'Specification of solar panels'}}</span>
                                <span class="span2">{{dialogProjectInfo.boardpower}}(W)</span>
                            </div>
                        </div>
                        <div class="li">
                            <div class="li_center">
                                <span class="span1">{{'communication protocol'}}</span>
                                <span class="span2">{{dialogProjectInfo.protocolType}}</span>
                            </div>
                        </div>
                        <div class="li">
                            <div class="li_left">
                                <span class="span1">{{'Lamp Power'}}</span>
                                <span class="span2">{{dialogProjectInfo.lamppower}}(W)</span>
                            </div>
                            <i></i>
                            <div class="li_right">
                                <span class="span1">{{'Battery type'}}</span>
                                <span class="span2">{{dialogProjectInfo.batterytype}}</span>
                            </div>
                        </div>
                        <div class="li">
                            <div class="li_left">
                                <span class="span1">{{'Battery capacity'}}</span>
                                <span class="span2">{{dialogProjectInfo.batteryah}}(Ah)</span>
                            </div>
                            <i></i>
                            <div class="li_right">
                                <span class="span1">{{'Warranty years'}}</span>
                                <span class="span2">{{dialogProjectInfo.shelfLife}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box5">
                    <div class="box_top">
                        <i class="dian"></i><span>{{'Basic information'}}</span>
                    </div>
                    <div class="data_box">
                        <div class="li">
                            <div class="li_center">
                                <span class="span1">{{'Project Date'}}</span>
                                <span class="span2">{{dialogProjectInfo.createtime}}</span>
                            </div>
                        </div>
                        <div class="li">
                            <div class="li_center">
                                <span class="span1">{{'Specific address'}}</span>
                                <span class="span2">{{dialogProjectInfo.address}}</span>
                            </div>
                        </div>
                        <div class="li">
                            <div class="li_center">
                                <span class="span1">{{'Owner'}}</span>
                                <span class="span2">{{dialogProjectInfo.company}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="fault_list_tk" v-if="faultListTkShow">
            <div class="fault_list_tk_top">
                <div class="left">{{'Fault List'}}</div>
                <div class="right" @click="faultListTkShow = false">{{'cancel'}}</div>
            </div>
            <div class="table_box">
                <el-table
                  v-loading="loading.lampInfoFailure"
                  :data="faultTableData"
                  ref="faultTableData"
                  height="calc(100% - 20px)"
                  style="width: 100%;">
                  <el-table-column v-for="item in faultTableList" :key="item.prop" :label="item.label" :prop="item.prop" :min-width="item.width" align="center"></el-table-column>
                  <el-table-column
                  key="caozuo"
                  :label="'operation'"
                  :width="200"
                  align="center"
                  >
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="tableOperationfun(scope.row)">{{'Maintenance scheduling'}}</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 故障详情弹框 -->
        <el-dialog
          title="故障详情"
          :visible.sync="detailsDetailsDialog"
          :close-on-click-modal="false"
          class="detailsDetails_box"
          width="60%">
            <el-form label-width="80px" :model="detailsDetailsData" label-position="right" class="box">
                <el-row>
                    <el-col :span="12" style="padding-right: 15px">
                        <el-form-item label="项目名称:">
                            <el-input v-model="detailsDetailsData.projectname" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="报警事件:">
                            <el-input v-model="detailsDetailsData.stralarmtype" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" style="padding-left: 15px">
                        <el-form-item label="报警路灯:">
                            <el-input v-model="detailsDetailsData.number" disabled></el-input>
                        </el-form-item>
                            <el-form-item label="报警时间:">
                            <el-input v-model="detailsDetailsData.updatetime" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-form-item label="操  作:">
                        <el-radio v-model="detailsDetailsData.status" label="1">标记已处理</el-radio>
                        <el-radio v-model="detailsDetailsData.status" label="0">
                        维修调度
                        <el-select :disabled="detailsDetailsData.status != '0'" v-model="detailsDetailsData.userid" placeholder="请选择维修人员" @keyup.native="detailsDetailsKeydown($event)">
                            <el-option
                              v-for="item in detailsDetailsData.list"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                        </el-select>
                        </el-radio>
                    </el-form-item>
                </el-row>
            </el-form>
          <div class="dialog_foot">
            <el-button type="primary" @click="detailsDetailsKeep()" v-loading="loading.detailsDetailsKeep">确  定</el-button>
          </div>
        </el-dialog>

        <!-- 123 监控弹窗 -->
        <el-dialog
          :title="'Surveillance video'"
          :visible.sync="surveillanceVideoDialog"
          :close-on-click-modal="false"
          class="surveillanceVideo_box"
          width="900px">
            <div class="myPlayer_container"  @mouseover="showControlIcons" @mouseout="hideControlIcons">
                <video ref="myPlayer" id="myPlayer" controls autoplay playsInline webkit-playsinline poster="">
                    <source :src="videoData.rtmp" type="rtmp/flv" />
                </video>
                <div class="video-control-icons" :class="{hide:isHideControlIconsFlag}">
                    <!-- 方向 -->
                    <div class="outer-wrap direction-control" @mouseover="activeAction('0')" @mouseout="blurAction">
                        <a href="javascript:void(0)" class="control-btn direction-btn" @mouseover="activeAction('0')" @mouseout="blurAction">{{'Direction'}}</a>
                        <div class="inner-wrap" :class="{show:isShowIconWrap=='0'}">
                            <div class="control-wrap direction-wrap">
                                <div class="left">
                                    <a href="javascript:void(0)" @click.prevent="clickControlDirection(0)" class="control-icon up-icon"></a>
                                    <a href="javascript:void(0)" @click.prevent="clickControlDirection(1)" class="control-icon down-icon"></a>
                                    <a href="javascript:void(0)" @click.prevent="clickControlDirection(2)" class="control-icon left-icon"></a>
                                    <a href="javascript:void(0)" @click.prevent="clickControlDirection(3)" class="control-icon right-icon"></a>
                                </div>
                                <div class="right">
                                    <a href="javascript:void(0)" @click.prevent="clickControlDirection(4)" class="control-icon left-up-icon"></a>
                                    <a href="javascript:void(0)" @click.prevent="clickControlDirection(6)" class="control-icon right-up-icon"></a>
                                    <a href="javascript:void(0)" @click.prevent="clickControlDirection(5)" class="control-icon left-down-icon"></a>
                                    <a href="javascript:void(0)" @click.prevent="clickControlDirection(7)" class="control-icon right-down-icon"></a>
                                </div>

                            </div>
                        </div>

                    </div>
                    <!-- 缩放 -->
                    <div class="outer-wrap zoom-control" @mouseover="activeAction('1')" @mouseout="blurAction">
                        <a href="javascript:void(0)" class="control-btn zoom-btn" @mouseover="activeAction('1')" @mouseout="blurAction">{{'Zoom'}}</a>
                        <div class="inner-wrap" :class="{show:isShowIconWrap=='1'}">
                            <div class="control-wrap zoom-wrap">
                                <a href="javascript:void(0)" @click.prevent="clickControlDirection(8)" class="control-icon to-big-icon"></a>
                                <a href="javascript:void(0)" @click.prevent="clickControlDirection(9)" class="control-icon to-small-icon"></a>
                            </div>
                        </div>
                    </div>
                    <!-- 焦距 -->
                    <div class="outer-wrap focal-control" @mouseover="activeAction('2')" @mouseout="blurAction">
                        <a href="javascript:void(0)" class="control-btn focal-btn" @mouseover="activeAction('2')" @mouseout="blurAction">{{'Focal'}}</a>
                        <div class="inner-wrap" :class="{show:isShowIconWrap=='2'}">
                            <div class="control-wrap focal-wrap">
                                <a href="javascript:void(0)" @click.prevent="clickControlDirection(11)" class="control-icon farst-icon"></a>
                                <a href="javascript:void(0)" @click.prevent="clickControlDirection(10)" class="control-icon near-icon"></a>
                            </div>
                        </div>
                    </div>
                    <!-- 标清高清 -->
                    <div class="outer-wrap clarity-control" @mouseover="activeAction('3')" @mouseout="blurAction">
                        <a href="javascript:void(0)" class="control-btn clarity-btn" @mouseover="activeAction('3')" @mouseout="blurAction">{{definitionBtnText}}</a>
                        <div class="inner-wrap" :class="{show:isShowIconWrap=='3'}">
                            <div class="control-wrap clarity-wrap">
                                <a href="javascript:void(0)" @click.prevent="switchUrl(0)" class="definition standard" :class="{active:definition==0}">{{'SD'}}</a>
                                <a href="javascript:void(0)" @click.prevent="switchUrl(1)" class="definition high" :class="{active:definition==1}">{{'HD'}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 表格历史弹框 -->
        <el-dialog
          :title="'Historical Data'"
          :visible.sync="historicalDialog"
          :close-on-click-modal="false"
          class="history_box"
          width="95%">
          <div class="wrap">
            <div class="main_list">
                <div class="main_list_title">
                    <p>{{'Lamp number'}}</p>
                </div>
                <div class="main_list_box" :class="{'EN':version == '0'}">
                    <div class="lamp_list scroll_show_all">
                        <div class="li" :class="{'select':item.id==historicalLampId}" v-for="item in historicalLampList" :key="item.id" @click="historicalLampClick(item.id)">
                            {{item.number}}
                        </div>
                    </div>
                    <div class="historicalnav clearfix">
                        <div class="nav_list" 
                            :class="{'details_nav_select':historicalNavSelect==item.model}"
                            v-for="item in historicalNavListEN"
                            :key="item.model"
                            
                            @click="historicalNavSelectFun(item)">
                            <!-- v-if="((item.model =='3'&&dataLSType=='0')||item.model !='3')&&((item.model =='system_info_log'&&dataLSType=='1')||item.model !='system_info_log')" -->
                            <span :title="item.label">{{item.label}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_box">
                <div class="screen_box" v-if="dataLSType == '1'">
                    <el-pagination
                      @current-change="handleCurrentChangeLS"
                      :current-page.sync="currentPageLS"
                      :page-size="16"
                      layout="prev, pager, next, jumper"
                      :total="totalLS">
                    </el-pagination>
                    <div>
                        <div class="screen_date">
                             <el-date-picker
                              v-model="screenDateLS"
                              format="MM-dd"
                              value-format="yyyy-MM-dd"
                              size="small"
                              :clearable="false"
                              prefix-icon=" "
                              type="daterange"
                              range-separator="-"
                              start-placeholder=""
                              end-placeholder="">
                            </el-date-picker>
                            <el-button size="small" @click="screenDateFun()">{{'Determine'}}<i class="el-icon-arrow-right"></i></el-button>
                        </div>
                        <el-button round size="small" @click="exportTableLS()" v-loading="loading.exportTableLS">{{'Export'}}</el-button>
                    </div>
                </div>
                <el-table
                    v-if="dataLSType == '1'"
                    ref="multipleTable"
                    v-loading="historicalTableLoading"
                    :data="historicalTableData"
                    border
                    align="center"
                    style="width: 100%;"
                    height="374"
                    :row-class-name="tableRowClassName">
                    <el-table-column
                      label="Number"
                      prop="LSLD_index"
                      align="center"
                      :show-overflow-tooltip="true"
                      width="82">
                    </el-table-column>
                    <template>
                        <el-table-column :show-overflow-tooltip="true" :sortable="item.sortable" :prop="item.prop" :label="item.label" :key="item.id" v-for="item in historicalTableList" align="center">
                            <template slot-scope="scope">
                                <span v-if="item.prop !='lampstatus' && item.prop !='battstatus' && item.prop !='chargestage'">{{scope.row[item.prop]}}</span>
                                <span v-if="item.prop=='lampstatus'&&scope.row[item.prop]=='1'">on</span>
                                <span v-if="item.prop=='lampstatus'&&scope.row[item.prop]=='0'">off</span>

                                <span v-if="item.prop=='battstatus'&&scope.row[item.prop]=='0'">free</span>
                                <span v-if="item.prop=='battstatus'&&scope.row[item.prop]=='1'">discharge</span>
                                <span v-if="item.prop=='battstatus'&&scope.row[item.prop]=='2'">Charge</span>
                                <span v-if="item.prop=='battstatus'&&scope.row[item.prop]=='3'">Discharge while charging</span>

                                <template v-if="lampProtocoltype != '2'">
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='0'">No charge</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='1'">Start charging</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='6'">Current limiting</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='7'">Full</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='16'">MPPT charging</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='32'">Equalizing charging</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='48'">Boost charging</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='64'">floating charge</span>
                                </template>
                                <template v-if="lampProtocoltype == '2'">
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='0'">No charge</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='1'">wait for</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='2'">initial</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='3'">MPPT</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='4'">Constant voltage</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='5'">constant current</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='6'">floating charge</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='7'">equilibrium</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='8'">Promote</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='9'">Trickle</span>
                                    <span v-if="item.prop=='chargestage'&&scope.row[item.prop]=='10'">complete</span>
                                </template>
                            </template>
                        </el-table-column>
                    </template>

                    <el-table-column :show-overflow-tooltip="true" header-align="center"  prop="updatetime" label="Update time" width="160px">
                    </el-table-column>
                </el-table>
                <div v-if="dataLSType == '0'" class="LS_echarts" key="dataLSType_0">
                    <div class="left_echarts">
                        <div class="echarts_top">
                            <div></div>
                            <div>
                                <div class="screen_date_select">
                                    <div class="li" :class="{'select':LSDataType == '0'}" @click="LSDataTypeFun('0',1)">1{{'Day'}}</div>
                                    <div class="li" :class="{'select':LSDataType == '1'}" @click="LSDataTypeFun('1',3)">3{{'Day'}}</div>
                                    <div class="li" :class="{'select':LSDataType == '2'}" @click="LSDataTypeFun('2',7)">7{{'Day'}}</div>
                                    <div class="li" :class="{'select':LSDataType == '3'}" @click="LSDataTypeFun('3',14)">14{{'Day'}}</div>
                                </div>
                                <div class="screen_date">
                                     <el-date-picker
                                      v-model="screenDateLS"
                                      format="MM-dd"
                                      value-format="yyyy-MM-dd"
                                      size="small"
                                      :clearable="false"
                                      prefix-icon=" "
                                      type="daterange"
                                      range-separator="-"
                                      start-placeholder=""
                                      end-placeholder="">
                                    </el-date-picker>
                                    <el-button size="small" @click="screenDateFun()">{{'Determine'}}<i class="el-icon-arrow-right"></i></el-button>
                                </div>
                            </div>
                        </div>
                        <div class="history_echarts" v-loading="loading.historyEcharts" v-show="historyDataInfo.list.updatetime"></div>
                        <div class="history_echarts_noData" v-show="!historyDataInfo.list.updatetime">
                            <h3>{{'No data can be queried'}}</h3>
                        </div>
                        <div class="echarts_bottom echarts_line">
                            <div class="echarts_bottom_text">{'sampling period'}}: {{historyDataInfo.patrolinterval}}{{'minutes'}}</div>
                            <div class="data_type_nav">
                                <div class="li" :class="{'select':dataLSType == '0'}" @click="dataLSTypeFun('0')">{{'Diagram'}}</div>
                                <div class="li" :class="{'select':dataLSType == '1'}" @click="dataLSTypeFun('1')">{{'list'}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="left_data">
                        <p><img src="../img/projectManagement/data.png">{{'Statistical extremum'}}</p>
                        <div class="ul" :class="{'EN':version == '0'}">
                            <div class="li" v-if="historicalNavSelect != '3'">
                                <span class="span1">{{'Maximum voltage'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.maxvoltage">{{historyDataInfo.maxvoltage}}</span>
                                    <span class="span3">V</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == 'battery_info_log'">
                                <span class="span1">{{'Minimum voltage'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.minvoltage">{{historyDataInfo.minvoltage}}</span>
                                    <span class="span3">V</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect != '3'&&historicalNavSelect != 'battery_info_log'">
                                <span class="span1">{{'Maximum current'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.maxcurrent">{{historyDataInfo.maxcurrent}}</span>
                                    <span class="span3">A</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == 'battery_info_log'">
                                <span class="span1">{{'Max charging current'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.maxcurrent">{{historyDataInfo.maxcurrent}}</span>
                                    <span class="span3">A</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect =='battery_info_log'">
                                <span class="span1">{{'Max discharge current'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.mincurrent">{{historyDataInfo.mincurrent}}</span>
                                    <span class="span3">A</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect =='battery_info_log'">
                                <span class="span1">{{'Max charging power'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.maxpower">{{historyDataInfo.maxpower}}</span>
                                    <span class="span3">W</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect != '3'&&historicalNavSelect != 'battery_info_log'">
                                <span class="span1">{{'maximum power'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.maxpower">{{historyDataInfo.maxpower}}</span>
                                    <span class="span3">W</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect =='battery_info_log'">
                                <span class="span1">{{'Max discharge power'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.minpower">{{historyDataInfo.minpower}}</span>
                                    <span class="span3">W</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == 'lamp_info_log'">
                                <span class="span1">{{'Maximum brightness'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.maxlighteness">{{historyDataInfo.maxlighteness}}</span>
                                    <span class="span3">%</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == 'battery_info_log'">
                                <span class="span1">{{'Max temperature'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.maxbatttemper">{{historyDataInfo.maxbatttemper}}</span>
                                    <span class="span3">℃</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == 'battery_info_log'">
                                <span class="span1">{{'Min temperature'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.minbatttemper">{{historyDataInfo.minbatttemper}}</span>
                                    <span class="span3">℃</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == 'solar_info_log'">
                                <span class="span1">{{'Charging time'}}</span>
                                <span>
                                    <span class="span2">{{historyDataInfo.maxdaydischargemincurrent}}</span>
                                    <!-- <span class="span3"></span> -->
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == 'lamp_info_log'">
                                <span class="span1">{{'Lights on time'}}</span>
                                <span>
                                    <span class="span2">{{historyDataInfo.maxdaychargemincurrent}}</span>
                                    <!-- <span class="span3">%</span> -->
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == '3'">
                                <span class="span1">{{'Max charge ampere hours'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.maxdaychargeah">{{historyDataInfo.maxdaychargeah}}</span>
                                    <span class="span3">AH</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == '3'">
                                <span class="span1">{{'Min charge ampere hours'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.mindaychargeah">{{historyDataInfo.mindaychargeah}}</span>
                                    <span class="span3">AH</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == '3'">
                                <span class="span1">{{'Max discharge amperes'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.maxdaydischarah">{{historyDataInfo.maxdaydischarah}}</span>
                                    <span class="span3">AH</span>
                                </span>
                            </div>
                            <div class="li" v-if="historicalNavSelect == '3'">
                                <span class="span1">{{'Min discharge amperes'}}</span>
                                <span>
                                    <span class="span2" :title="historyDataInfo.mindaydischarah">{{historyDataInfo.mindaydischarah}}</span>
                                    <span class="span3">AH</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="echarts_bottom" v-if="dataLSType == '1'" key="dataLSType_1">
                    <div class="data_type_nav">
                        <div class="li" :class="{'select':dataLSType == '0'}" @click="dataLSTypeFun('0')">{{'Diagram'}}</div>
                        <div class="li" :class="{'select':dataLSType == '1'}" @click="dataLSTypeFun('1')">{{'list'}}</div>
                    </div>
                </div>
            </div>    
          </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import baseApi from '../api/base.js'
    import allUrl from '../api/allUel.js'
    import { Notification } from 'element-ui'
    // import sideBarNew from '../components/sideBarNew.vue'
    import sideBarIdcol from '../components/sideBar_idcol.vue'
    import ezuikit from '../store/ezuikit.js'
    // import richmarker from '../store/richmarker.js'
    export default{
        data() {
            return {
                projectNav:[],
                networkId:'',
                sideBarType:'off',
                keyword:'',
                lampId:'-1',
                lamp_id:'',
                slider:'0',
                projectData:{},
                projects_id:'',
                monitorInfoData:{},
                operationList:[{name:'开灯',key:1,icon:'turn-on'},{name:'关灯',key:2,icon:'turn-off'},{name:'故障',key:3,icon:'fault'},{name:'离线',key:4,icon:'Off-line'},{name:'监控',key:5,icon:'Monitor'}],
                operationListEN:[{name:'Lamp on',key:1,icon:'turn-on'},{name:'Lamp off',key:2,icon:'turn-off'},{name:'fault',key:3,icon:'fault'},{name:'Offline',key:4,icon:'Off-line'},{name:'monitor',key:5,icon:'Monitor'}],
                operationType:0,
                rightSideBarType:'off',
                sideBarNavList:[{label:'路灯信息',key:'0'},{key:'1',label:'项目信息'},{key:'2',label:'监控信息'}],
                sideBarNavListEN:[{label:'Lamp',key:'0'},{key:'1',label:'Project'},{key:'2',label:'Monitoring'}],
                sideBarNav:'0',
                streetLampList:[],
                streetLampType:'list',
                streetLamp:{},
                projectDataSee:'-1',
                streetLampsList:[],
                projectType:'list',
                projectList:[],
                monitor:{},
                monitorType:'data',
                monitorList:[],
                monitorId:'-1',
                groupingList:[],
                monitorIsDialog:false,
                /*地图*/
                cluster:null,
                markers:[],
                markersHC:[],
                marker:null,
                markerMonitor:null,
                map:null,
                /**/
                detailsDetailsDialog:false,
                detailsDetailsData:{},
                settingPacketDialog:false,
                settingPacketData:{
                    value0:'',
                    value1:'',
                    value2:'',
                },
                lightenessHC:'',
                sliderLoading:false,
                turnonoffType:'-1',

                lampData:{},
                lampIdChangeType:'',
                projectsIdChangeType:'',
                contextmenuX:0,
                contextmenuY:0,
                contextmenuIsShow:false,
                lampIdHC:'',
                // lampEdit:true,
                lampLongitude:0,
                lampLatitude:0,
                lampCoordinateIsShow:false,
                topL:'',
                leftL:'',
                lampType:'',
                positionPicker:null,
                lampListPage:1,
                projectListPage:1,
                lampListTotal:0,
                projectListTotal:0,
                scroll_time:null,
                mapDataListHC:[],
                lampEditFunIsfirst:true,
                markerListHC:[],
                roadId:0,
                projectId:0,
                companyId:'',
                timeoutMap:null,
                intervalMap:null,
                projectDataLoading:false,
                projectInfoGX:true,
                mapTCtype:'TileLayer',
                mapDYtype:'day',
                mapLKtype:false,
                networkLampList:[],
                isShowMonitorImg:true,

                //123(标志，方便查找) 
                // monitorId:'-1',//监控id
                surveillanceVideoDialog:false,//控制监控视频弹窗显示、隐藏
                videoData:{},//监控视频详细数据
                canControlFlag:true,//是否能够操作云台，防止用户一直点击
                isHideControlIconsFlag:true,//是否显示video自定义控件
                isShowIconWrap:'',//包裹云台控制的div
                definition:0,//控制清晰度
                definitionBtnText:'标清',

                lmText:'灯控',

                topDataBoxShow:false,
                topDataNav:{},
                topDataList:[{label:'路灯总数',model:'total_lamp'},{label:'在线数',model:'online_count',value:'online_rate'},{label:'故障数',model:'failure_count',value:'failure_rate'},{label:'累计发电量',model:'totalgeneration'},{label:'累计用电量',model:'totalconsumption'},{label:'减排CO2',model:'co2_emission'},{label:'减排SO2',model:'so2_emission'},{label:'节约标准煤',model:'coal_saving'}],
                topDataListEN:[{label:'Lamp total',model:'total_lamp'},{label:'Online',model:'online_count',value:'online_rate'},{label:'Fault count',model:'failure_count',value:'failure_rate'},{label:'Cumulative generating capacity',model:'totalgeneration'},{label:'Cumulative electricity consumption',model:'totalconsumption'},{label:'Emissions of CO2',model:'co2_emission'},{label:'SO2 emissions',model:'so2_emission'},{label:'Saving standard coal',model:'coal_saving'}],

                lampStatus:'0',//默认显示开灯,分别表示1开灯、2关灯、5故障、4离线、0全部
                currentLampStatusName:'全部',//当前的路灯按钮状态、开灯、关灯、故障、离线、全部
                isShowLampStatusList:false,//默认隐藏选择路灯状态的容器
                switchArrowType:'1',
                lampTypeList:[],

                lampDialogShow:false,
                lampDialogType:'1',
                dialogLampInfo:{
                    jd_sfe:0,
                },
                chargestageData:{0:'没有充电',16:'MPPT充电',32:'均衡充电',48:'提升充电',64:'浮充'},
                chargestageDataEN:{0:'No charge',16:'MPPT Charging',32:'Balanced Charging',48:'Elevation Charging',64:'floating charge'},
                dialogSectionInfo:{

                },
                roadOnlineStatus:0,
                roadLightStatus:0,
                roadFailStatus:0,
                rodaTableList:[{label:'编号',prop:'number',width:''},{label:'状态',prop:'netStatus',width:''},{label:'亮度',prop:'lighteness',width:''},{label:'故障',prop:'stralarmtype',width:''}],
                rodaTableListEN:[{label:'Number',prop:'number',width:''},{label:'State',prop:'netStatus',width:''},{label:'Brightness',prop:'lighteness',width:''},{label:'Fault',prop:'stralarmtype',width:''}],
                rodaTableData:[],

                screen:'',
                searchType:'1',
                dialogProjectInfo:{},

                faultTableList:[{label:'设备编号',prop:'number',width:''},{label:'所属路段',prop:'section',width:''},{label:'故障时间',prop:'alarmDate',width:''},{label:'故障原因',prop:'alarmInfo',width:''}],
                faultTableData:[],
                faultListTkShow:false,
                faultLampId:'',

                lSLampId:'',
                lSRoadId:'',
                lSProjectId:'',
                historicalTableData:[],
                historicalTableList:[],
                screenDateLS:'',
                historyDataInfo:{
                list:{}
                },
                historicalLampList:[],
                historicalLampId:'',
                dataLSType:'0',
                LSDataType:'0',
                currentPageLS:1,
                totalLS:0,
                historicalNavSelect:'lamp_info_log',
                historicalDialog:false,
                historicalNavList:[{model:'lamp_info_log',label:'路灯'},{model:'system_info_log',label:'系统'},{model:'battery_info_log',label:'蓄电池'},{model:'solar_info_log',label:'太阳能板'},{model:'3',label:'充放电量'}],
                historicalNavListEN:[{model:'lamp_info_log',label:'Lamp'},{model:'system_info_log',label:'system'},{model:'battery_info_log',label:'Battery'},{model:'solar_info_log',label:'Solar panels'},{model:'3',label:'Capacity'}],
                lamp_info_logTableList:[{prop:'lighteness',label:'亮度',unit:'(%)'},{prop:'lampstatus',label:'状态'},{prop:'lampvoltage',label:'电压',unit:'(V)'},{prop:'lampcurrent',label:'电流',unit:'(A)'},{prop:'lamppower',label:'功率',unit:'(W)'},{prop:'daydischarmaxpow',label:'当天放电最大功率',unit:'(W)'},{prop:'daychargemincurrent',label:'当天亮灯时间'}],
                lamp_info_logTableListEN:[{prop:'lighteness',label:'Brightness(%)'},{prop:'lampstatus',label:'status'},{prop:'lampvoltage',label:'voltage(V)'},{prop:'lampcurrent',label:'current(A)'},{prop:'lamppower',label:'power(W)'},{prop:'daydischarmaxpow',label:'Discharging maximum power(w)'},{prop:'daychargemincurrent',label:'Turn-on duration'}],

                system_info_logTableList:[{prop:'sysvoltage',label:'系统电压',unit:'(V)'},{prop:'syscurrent',label:'系统电流',unit:'(A)'},{prop:'temper',label:'控制器温度',unit:'(℃)'}],
                system_info_logTableListEN:[{prop:'sysvoltage',label:'System voltage(V)'},{prop:'syscurrent',label:'System current(A)'},{prop:'temper',label:'Controller temperature(℃)'}],

                battery_info_logTableList:[{prop:'temper',label:'控制器温度',unit:'(℃)'},{prop:'battstatus',label:'状态'},{prop:'chargestage',label:'充电阶段'},{prop:'battvoltage',label:'电压',unit:'(V)'},{prop:'voltagedaymin',label:'当天最低电压',unit:'(V)'},{prop:'voltagedaymax',label:'当天最高电压',unit:'(V)'},{prop:'batttemper',label:'蓄电池表面温度',unit:'(℃)'},{prop:'daybattmintemper',label:'当天最低温度',unit:'(℃)'},{prop:'daybattmaxtemper',label:'当天最高温度',unit:'(℃)'},{prop:'overtimes',label:'过放次数',unit:''}],
                battery_info_logTableListEN:[{prop:'temper',label:'Controller temperature(℃)'},{prop:'battstatus',label:'status'},{prop:'chargestage',label:'Charging stage'},{prop:'battvoltage',label:'voltage(V)'},{prop:'voltagedaymin',label:'Minimum voltage(V)'},{prop:'voltagedaymax',label:'Highest voltage(V)'},{prop:'batttemper',label:'surface temperature(℃)'},{prop:'daybattmintemper',label:'minimum temperature(℃)'},{prop:'daybattmaxtemper',label:'highest temperature(℃)'},{prop:'overtimes',label:'Over Discharge times',unit:''}],
                solar_info_logTableList:[{prop:'solarvoltage',label:'电压',unit:'(V)'},{prop:'solarcurrent',label:'电流',unit:'(A)'},{prop:'solarpower',label:'功率',unit:'(W)'},{prop:'daychargemaxpow',label:'当天充电最大功率',unit:'(W)'},{prop:'daydischargemincurrent',label:'当天充电时间'}],
                solar_info_logTableListEN:[{prop:'solarvoltage',label:'voltage(V)'},{prop:'solarcurrent',label:'current(A)'},{prop:'solarpower',label:'power(W)'},{prop:'daychargemaxpow',label:'Charging maximum power(W)'},{prop:'daydischargemincurrent',label:'Charging duration(S)'}],

                loading:{
                    turnonoff:false,
                    detailsDetailsKeep:false,
                    streetLampList:false,
                    projectListList:false,
                    catcherOnOff:false,
                    lampInfoFailure:false,
                    schedulingInformationData:false,
                    historyEcharts:false,
                },
                mapEnIsTrue:false,
            }
        },
        computed:{
            ...mapGetters({
                token:'token',
                username:'username',
                client_key:'client_key',
                // projectsId:'projectsId',
                // companyId:'companyId',
                lampEdit:'lampEdit',
                version:'version',
                remRatio:'remRatio',
                GoogleJS_frequency:'GoogleJS_frequency',
                role:'role',
                sideBarCompanyType:'sideBarCompanyType',
                browserLanguage:'browserLanguage'
            })
        },
        components:{sideBarIdcol},
        created() {

        },
        mounted(){
            var container=document.getElementById('container');
            this.definitionBtnText='SD';
            // this.sideBarNav = "Lamp";
            // this.lmText = 'lamp'
            
            // var storage = window.localStorage;
            // if(storage.getItem("projectId") && storage.getItem("projectId") != 'false'){
            //     this.projectInfo(storage.getItem("projectId"));
            // }
            console.log(this.browserLanguage,'====================')
            let this_ = this;
            if(this.browserLanguage == 'google'){
                this.sideBarNav = "Lamp";
                this.lmText = 'lamp'
            }else{
                container.onclick=function(e){
                    if(this_.lampEdit){
                        this_.monitorIsDialog = true;
                        let className = e.target.className.split(' ');
                        // console.log(className,e.target.className)
                        if(className[0] == 'lamp'){
                            this_.lampIdChangeType = 'map';
                            if(this_.lampId != className[1].split('_')[1]){
                                this_.lampId = className[1].split('_')[1]
                            }else{
                                this_.lampId = '-1'
                            }
                        }
                        if(className[0] == 'monitor'){
                            // this_.lampIdChangeType = 'map';
                            if(this_.monitorId != className[1].split('_')[1]){
                                this_.monitorId = className[1].split('_')[1]
                            }else{
                                this_.monitorId = '-1'
                            }
                        }
                    }
                }
            }
            container.onmouseup=function(e){
                if(this_.lampEdit){
                    this_.monitorIsDialog = false;
                    let className = e.target.className.split(' ');
                    if(e.button == 2){
                        if(className[0] == 'lamp'){
                            this_.lampIdHC = className[1].split('_')[1];
                            this_.lampType = className[2];
                            this_.contextmenuIsShow = true;
                            this_.contextmenuX = e.pageX + 40;
                            this_.contextmenuY = e.pageY - 4.1*this_.remRatio + $('#app > .scrollbar_style').scrollTop()+$('html').scrollTop();
                            // 
                            // console.log($('#app > .main > .main_cont').scrollTop()+$('html').scrollTop())
                            this_.contextmenuY -= 25;
                            // console.log(className)
                        console.log(this_.contextmenuY,'----------')
                        }
                        if(className[0] == 'monitor'){
                            // this_.lampIdChangeType = 'map';
                            this_.monitorId = className[1].split('_')[1]
                            this_.lampType = className[0];
                            this_.contextmenuIsShow = true;
                            this_.contextmenuX = e.pageX + 30;
                            this_.contextmenuY = e.pageY - 125;
                            this_.contextmenuY +=40;
                        }
                    }
                    if(e.button == 0){
                        if(className[1] == 'lamp_info_click'){
                            this_.lampInfoGet(className[2]);
                        }
                    }
                }
            }
            container.onmouseover=function(e){
                if(this_.lampEdit && this_.isShowMonitorImg){
                    let className = e.target.className.split(' ');
                    // console.log(className)
                    if(className[0] == 'monitor'){
                        // console.log(className,e.target.className)
                        if(this_.browserLanguage == 'google'){
                            this_.markerMonitor = new RichMarker({
                              position:new google.maps.LatLng(Number(className[2]),Number(className[3])),
                              map: this_.map,
                              draggable: false,
                              zIndex:120,
                              content:'<div class="monitor_img_box" style="width:130px;height:68px;border:8px solid #fff;background:url('+className[4]+');background-size:100% 100%;position:absolute;top: -88px;left: -50px;z-index:1;"><div></div></div>'
                            })
                        }else{
                            this_.markerMonitor = new AMap.Marker({
                                position:[Number(className[3]),Number(className[2])], // 基点位置
                                // 自定义点标记覆盖物内容
                                zIndex:120,
                                content: '<div class="monitor_img_box" style="width:130px;height:68px;border:8px solid #fff;background:url('+className[4]+');background-size:100% 100%;position:absolute;top: -78px;left: -62px;z-index:1;"><div></div></div>',
                                // offset:new AMap.Pixel(-(d.count.toString().length*8+20)/2,-27/2) // 相对于基点的偏移位置
                            });
                            this_.map.add(this_.markerMonitor);
                        }

                        // this_.markerMonitor = new RichMarker({
                        //   position:new google.maps.LatLng(Number(className[2]),Number(className[3])),
                        //   map: this_.map,
                        //   draggable: false,
                        //   zIndex:120,
                        //   content:'<div class="monitor_img_box" style="width:130px;height:68px;border:8px solid #fff;background:url('+className[4]+');background-size:100% 100%;position:absolute;top: -88px;left: -50px;z-index:1;"><div></div></div>'
                        // })
                        this_.isShowMonitorImg = false;
                    }
                }
            }
            container.onmouseout=function(e){
                if(this_.lampEdit){
                    let className = e.target.className.split(' ');
                    if(className[0] == 'monitor'){
                        // console.log(className,e.target.className,'-------------')
                        if(this_.markerMonitor.onRemove){
                            this_.markerMonitor.onRemove()
                        }
                        this_.isShowMonitorImg = true;
                        this_.markerMonitor = false;
                    }
                }
            }
            var url = window.location.hash.split("?")[1]; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url) {
                let arr = url.split("&");
                for (var i = 0; i < arr.length; i++) {
                    theRequest[arr[i].split("=")[0]] = decodeURIComponent(arr[i].split("=")[1]);
                }
                this.lampIdChangeType = 'map';
                this.lampId = theRequest.id;
                if(this.browserLanguage == 'bd'){
                    this.mapGet('lamp',[theRequest.longitude,theRequest.latitude],false,true);
                }else{
                    setTimeout(function(){
                        this_.mapEnIsTrue = true;
                        this_.mapGet_en('lamp',[theRequest.longitude,theRequest.latitude],false,true);
                    },1000)
                }
                
                // this.getProjectNav('lamp')
                // this.getProjectCompany
            }else{
                if(this.browserLanguage == 'bd'){
                    this.mapGet(false,false,false,true);
                }else{
                    setTimeout(function(){
                        this_.mapEnIsTrue = true;
                        this_.mapGet_en(false,false,false,true);
                    },1000)
                }
                // this.projectInfo(0);
                // this.getProjectNav()
            }
            AMap.mapSwitch=function(){                  
            };
            AMap.mapSwitch.prototype = {  
               addTo: function(map, dom){  
                  dom.appendChild(this._getHtmlDom(map));  
               },    
                _getHtmlDom:function(map){                  
                    this.map=map;                  
                    // 创建一个能承载控件的<div>容器                  
                    var controlUIBox=document.createElement("DIV");
                    controlUIBox.className="controlUIBox_class"

                    var controlRY=document.createElement("DIV");
                    let img = document.createElement("DIV");
                    controlRY.appendChild(img);
                    controlUIBox.appendChild(controlRY);

                    let time = new Date();
                    if(time.getHours()>7&&time.getHours()<19){
                        controlRY.className="control_ry_class"
                        this_.mapDYtype = 'day'
                        map.setMapStyle('amap://styles/macaron');
                    }else{
                        controlRY.className="control_ry_class hover"
                        this_.mapDYtype = 'night'
                        map.setMapStyle('amap://styles/darkblue');
                    }

                    var controlUI=document.createElement("DIV");
                    controlUI.className="controlUI_class"
                    controlUI.innerHTML="2D";
                    controlUIBox.appendChild(controlUI);

                    // var controlUIdiv=document.createElement("DIV");
                    // controlUIdiv.className="controlUIdiv_class";
                 //     controlUIdiv.innerHTML="路况";
                    // controlUIBox.appendChild(controlUIdiv);
                    var layers = [];
                    // var layers_ = [];
                    // 设置控件响应点击onclick事件
                    controlRY.onclick = function() {
                        var styleName;
                        if(this_.mapDYtype == "day"){
                            styleName =  "amap://styles/darkblue";
                            controlRY.className="control_ry_class hover"
                            this_.mapDYtype = 'night'
                        }else{
                            styleName = "amap://styles/macaron";
                            controlRY.className = "control_ry_class"
                            this_.mapDYtype = 'day'
                        }
                        map.setMapStyle(styleName);
                    }            
                    controlUI.onclick = function(){
                        if(this_.mapTCtype == 'TileLayer'){
                            if(this_.mapLKtype){
                                layers =  [
                                    new AMap.TileLayer.Satellite(),
                                    new AMap.TileLayer.Traffic()
                                ]
                            }else{
                                layers =  [
                                    new AMap.TileLayer.Satellite(),
                                ]
                            }
                            this_.mapTCtype = 'Satellite'
                            controlUI.className="controlUI_class hover";
                            controlRY.className="control_ry_class none";
                            controlUI.innerHTML="<img src='./src/img/GIS/satellite_icon.png' />";
                        }else{
                            if(this_.mapLKtype){
                                layers =  [
                                    new AMap.TileLayer(),
                                    new AMap.TileLayer.Traffic()
                                ]
                            }else{
                                layers =  [
                                    new AMap.TileLayer(),
                                ]
                            }
                            this_.mapTCtype = 'TileLayer'
                            controlUI.className="controlUI_class";
                            controlUI.innerHTML="2D";

                            var styleName;
                            if(this_.mapDYtype == "day"){
                                styleName = "amap://styles/normal";
                                controlRY.className = "control_ry_class"
                                this_.mapDYtype = 'day'
                            }else{
                                styleName =  "amap://styles/darkblue";
                                controlRY.className="control_ry_class hover"
                                this_.mapDYtype = 'night'
                            }
                            map.setMapStyle(styleName);
                        }
                        // this_.mapFun(this_,this_.mapDataListHC,true);

                        // 地图上设置图层         
                        map.setLayers(layers);


                        clearTimeout(this_.timeoutMap)
                        this_.timeoutMap = setTimeout(function(){
                            // this_.$store.commit('setLoadingGetMap',{
                            //  loadingGetMap:true,
                            // })

                            let encrypt_low = this_.bd_encrypt(this_.map.getBounds().southwest.lng,this_.map.getBounds().southwest.lat)
                            let encrypt_high = this_.bd_encrypt(this_.map.getBounds().northeast.lng,this_.map.getBounds().northeast.lat)

                            this_.cluster.clearMarkers();
                            baseApi.ajax_post(
                                allUrl.gisMap.mapGet,
                                {
                                    username:this_.username,
                                    client_key:this_.client_key,
                                    token:this_.token,
                                    project_id:this_.projectId,
                                    section:this_.roadId,
                                    type:this_.operationType,
                                    keyword:this_.keyword,
                                    lng_low:encrypt_low.bd_lng,
                                    lat_low:encrypt_low.bd_lat,
                                    lng_high:encrypt_high.bd_lng,
                                    lat_high:encrypt_high.bd_lat,
                                    multiple:this_.map.getZoom(),
                                    lampid:'-1',
                                },
                                {},
                                data =>{
                                    this_.mapDataListHC = data.data.lamps;
                                    this_.mapFun(this_,data.data.lamps);
                                },
                            this_,
                                // ()=>{
                                //     this_.$store.commit('setLoadingGetMap',{
                                //         loadingGetMap:false,
                                //     })
                                // }
                            )
                        },800)
                    }
                    return controlUIBox;                  
                }                  
            }

            this.screenDateLS = [dateFun(new Date()),dateFun(new Date(new Date()-(-1*24*3600*1000)))];
            function dateFun(date){
                let MM = date.getMonth() + 1;
                let dd = date.getDate();
                if(MM<10){
                    MM = '0'+MM;
                }
                if(dd<10){
                    dd = '0'+dd;
                }
                return  date.getFullYear() + '-' + MM + '-' + dd;
            }
        },
        methods:{
            lampDialogClose(){
                this.lampDialogShow = false;
                this.lampId = '-1';
            },
            /*旋转*/
            changeDirectionFun(val){
                let this_ = this;
                baseApi.ajax_post(
                    allUrl.gisMap.changeDirection,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        client_type:'0',
                        lampid:this.lampIdHC,
                        direction:val,
                    },
                    {},
                    data =>{
                        this.$store.commit('setLampEdit',{
                            lampEdit:true,
                        })
                        this.contextmenuIsShow = false;
                        Notification.closeAll();
                        this.lampType = '';
                        this.$message({
                          showClose: true,
                          message:data.msg,
                          type: 'success'
                        });
                        let encrypt_low = this_.bd_encrypt(this_.map.getBounds().getSouthWest().lng(),this_.map.getBounds().getSouthWest().lat())
                        let encrypt_high = this_.bd_encrypt(this_.map.getBounds().getNorthEast().lng(),this_.map.getBounds().getNorthEast().lat())
                        baseApi.ajax_post(
                            allUrl.gisMap.mapGet,
                            {
                                username:this_.username,
                                client_key:this_.client_key,
                                token:this_.token,
                                project_id:this_.projectId,
                                section:this_.roadId,
                                type:this_.operationType,
                                keyword:this_.keyword,
                                lng_low:encrypt_low.bd_lng,
                                lat_low:encrypt_low.bd_lat,
                                lng_high:encrypt_high.bd_lng,
                                lat_high:encrypt_high.bd_lat,
                                multiple:this_.map.getZoom(),
                                lampid:'-1',
                            },
                            {},
                            data =>{
                                this_.mapDataListHC = data.data.lamps;
                                this_.mapFun_en(this_,data.data.lamps);
                            },
                        this_)
                    },
                this)
            },
            /*路灯管理历史数据弹框*/
            historicalFun(data,type){
                // this.lampId = data.id;
                console.log(data)
                this.lSLampId = data.id;
                this.lSProjectId = data.projectid;
                this.historicalLampId = data.id;
                this.lampLoadtype = data.loadtype;
                this.historicalDialog = true;
                this.currentPageLS = 1;
                this.historicalNavSelect = type;
                if(data.loadtype == '1'){
                    this.historicalNavList[0].label = 'Insect trap';
                }else{
                    this.historicalNavList[0].label ='lamp';
                }
                this.historicalTableList = JSON.parse(JSON.stringify(this[this.historicalNavSelect+'TableListEN']));

                this.lampcontrolHistorylist(1);
                this.lampHistoryData();
                this.getLampList();
            },
            getLampList(){
                this.loading.getLampList = true;
                baseApi.ajax_post(
                    allUrl.device.getLampList,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        client_type:'0',
                        projectid:this.lSProjectId,
                    },
                    {},
                    data =>{
                        this.historicalLampList = data.data;
                        this.loading.getLampList = false;
                        console.log($('.history_box .main_list .lamp_list .select'))
                        let isTrue = true;
                        let time = setInterval(function(){
                            if($('.history_box .main_list .lamp_list .select')){
                                $('.history_box .main_list .lamp_list').animate({scrollTop: $('.history_box .main_list .lamp_list .select').offset().top - 250 + $('.history_box .main_list .lamp_list').scrollTop()});
                                clearInterval(time);
                            }
                            if(isTrue){
                                setTimeout(function(){
                                    clearInterval(time);
                                },3000)
                            }
                            isTrue = false;
                        },100)
                    },
                this,()=>{
                        this.loading.getLampList = false;
                })
            },
            historicalLampClick(id){
                this.historicalLampId = id;
                this.lSLampId = id;
                if(this.dataLSType == '1'){
                    this.lampcontrolHistorylist(1);
                }else{
                    this.lampHistoryData();
                }
            },
            lampcontrolHistorylist(val,download,callback,error){
                let isDownload;
                if(!download){
                    isDownload = 0;
                    this.historicalTableLoading = true;
                }else{
                    this.loading.exportTableLS = true;
                    isDownload = download;
                }
                let date = this.screenDateLS[0]+'/'+this.screenDateLS[1];
                baseApi.ajax_post(
                    allUrl.device.lampcontrolHistorylist,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        lamp_id:this.lSLampId,
                        page:val,
                        count:this.zCount,
                        datatype:this.historicalNavSelect,
                        download:isDownload,
                        date:date,
                    },
                    {},
                    data =>{
                        // console.log(data,'表格历史数据')
                        if(callback){
                            callback()
                        }
                        if(download){
                            // var $eleBtn2 = $("#btn2");
                            var $eleForm = $("<form method='get'></form>");
                            $eleForm.attr("action",data.data.path);
                            $(document.body).append($eleForm);
                            //提交表单，实现下载
                            $eleForm.submit();
                            this.loading.exportTableLS = false;
                        }else{
                            this.historicalTableLoading = false;
                            if(data.data.list){
                                this.historicalTableData = data.data.list;
                                this.totalLS = data.data.total*16;
                                let i = (this.currentPageLS - 1)*16+1;
                                for(let d of this.historicalTableData){
                                    let hh1 = '',mm1 = '',hh2 = '',mm2 = '';
                                    hh1 = parseInt(d.daychargemincurrent/3600);
                                    mm1 = parseInt((d.daychargemincurrent%3600)/60);
                                    hh2 = parseInt(d.daydischargemincurrent/3600);
                                    mm2 = parseInt((d.daydischargemincurrent%3600)/60);
                                    if(hh1<10){
                                        hh1 = '0'+hh1;
                                    }
                                    if(hh2<10){
                                        hh2 = '0'+hh2;
                                    }
                                    if(mm1<10){
                                        mm1 = '0'+mm1;
                                    }
                                    if(mm2<10){
                                        mm2 = '0'+mm2;
                                    }
                                    d.daychargemincurrent = hh1+':'+mm1;
                                    d.daydischargemincurrent = hh2+':'+mm2;

                                    d.LSLD_index = i;
                                    i++;
                                }
                            }else{
                                this.historicalTableData = [];
                                this.totalLS = 0;
                            }
                        }
                    },
                this,()=>{
                    if(error){
                        error()
                    }
                    if(download){
                        this.loading.exportTableLS = false;
                    }else{
                        this.historicalTableData = [];
                        this.totalLS = 0;
                        this.historicalTableLoading = false;
                    }
                })
            },
            lampHistoryData(){
                let type = this.historicalNavSelect,date = this.screenDateLS[0]+'/'+this.screenDateLS[1];
                if(this.historicalNavSelect == 'lamp_info_log'){
                    type = '0';
                }
                if(this.historicalNavSelect == 'battery_info_log'){
                    type = '1';
                }
                if(this.historicalNavSelect == 'solar_info_log'){
                    type = '2';
                }
                this.loading.historyEcharts = true;
                baseApi.ajax_post(
                    allUrl.device.lampHistoryData,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        client_type:'0',
                        token:this.token,
                        lampid:this.lSLampId,
                        type:type,
                        dateType:this.LSDataType,
                        date:date,
                    },
                    {},
                    data =>{
                        this.loading.historyEcharts = false;
                        // console.log(data)
                        this.historyDataInfo = data.data;
                        if(data.data.list.updatetime){
                            this.historyEcharts(data.data.list,type);
                        }
                    },
                this,()=>{
                    this.loading.historyEcharts = false;
                    for(let key in this.historyDataInfo){
                        this.historyDataInfo[key] = '';
                    }
                })
            },
            historicalNavSelectFun(obj){
                // let historicalNavSelectHC = this.historicalNavSelect;
                this.historicalNavSelect = obj.model;
                if(this.dataLSType == '0'){
                    this.lampHistoryData();
                }else{
                    this.currentPageLS = 1;
                    this.historicalTableList = this[this.historicalNavSelect+'TableListEN'];
                    
                    this.lampcontrolHistorylist(1,0);
                }
                // console.log(this.historicalTableList)
            },
            LSDataTypeFun(val){
                this.LSDataType = val;
                this.lampHistoryData();
            },
            dataLSTypeFun(val){
                let historicalNavSelect = this.historicalNavSelect;
                this.dataLSType = val;
                if(val == '0'){
                    if(historicalNavSelect == 'system_info_log'){
                        this.historicalNavSelect = 'lamp_info_log';
                    }
                    this.lampHistoryData();
                }else{
                    if(historicalNavSelect == '3'){
                        this.historicalNavSelect = 'lamp_info_log';
                    }
                    this.currentPageLS = 1;
                    this.historicalTableList = this[this.historicalNavSelect+'TableListEN'];
                    
                    this.lampcontrolHistorylist(1,0);
                }
            },
            historyEcharts(data,type){
                let this_ = this,series = [],dataListMax = 3,gridLeft,legendData = [],legendSelected = {};
                if(type == '0'){
                    series =  [
                        {
                            name:'Voltage',
                            id:'V_0',
                            data:data.lampvoltage,
                            type: 'line',
                            smooth: true,
                            color:'#15CA56',
                            showSymbol:false,
                        },{
                            name:'Current',
                            id:'A_1',
                            data:data.lampcurrent,
                            type: 'line',
                            smooth: true,
                            color:'#F3BC12',
                            showSymbol:false,
                        },{
                            name:'power',
                            id:'W_2',
                            data:data.lamppower,
                            type: 'line',
                            smooth: true,
                            color:'#3898F8',
                            showSymbol:false,
                        },{
                            name:'brightness',
                            id:'%_3',
                            data:data.lighteness,
                            type: 'line',
                            smooth: true,
                            color:'#F05904',
                            showSymbol:false,
                        },
                    ];
                    legendData = [
                        {name:'Voltage',icon:'circle'},
                        {name:'Current',icon:'circle'},
                        {name:'power',icon:'circle'},
                        {name:'brightness',icon:'circle',select:false}
                    ];
                    legendSelected['Voltage'] = true;
                    legendSelected['Current'] = true;
                    legendSelected['power'] = true;
                    legendSelected['brightness'] = false;
                    for(let d of data.lamppower){
                        d = parseInt(d);
                        if(d > dataListMax){
                            dataListMax = d;
                        }
                    }
                    dataListMax = dataListMax +'00'
                    gridLeft = dataListMax.length*10;
                }
                if(type == '1'){
                    series =  [
                        {
                            name:'Voltage',
                            id:'V_0',
                            data:data.battvoltage,
                            type: 'line',
                            smooth: true,
                            color:'#15CA56',
                            showSymbol:false,
                        },{
                            name:'Current',
                            id:'A_1',
                            data:data.batterycurrent,
                            type: 'line',
                            smooth: true,
                            color:'#F3BC12',
                            showSymbol:false,
                        },{
                            name:'power',
                            id:'W_2',
                            data:data.batterypower,
                            type: 'line',
                            smooth: true,
                            color:'#3898F8',
                            showSymbol:false,
                        }
                    ];
                    legendData = [
                        {name:'Voltage',icon:'circle'},
                        {name:'Current',icon:'circle'},
                        {name:'power',icon:'circle'},
                    ];
                    legendSelected['Voltage'] = true;
                    legendSelected['Current'] = true;
                    legendSelected['power'] = true;
                    for(let d of data.batterypower){
                        d = parseInt(d);
                        if(d > dataListMax){
                            dataListMax = d;
                        }
                    }
                    dataListMax = dataListMax +'00'
                    gridLeft = dataListMax.length*10;
                }
                if(type == '2'){
                    series =  [
                        {
                            name:'Voltage',
                            id:'V_0',
                            data:data.solarvoltage,
                            type: 'line',
                            smooth: true,
                            color:'#15CA56',
                            showSymbol:false,
                        },{
                            name:'Current',
                            id:'A_1',
                            data:data.solarcurrent,
                            type: 'line',
                            smooth: true,
                            color:'#F3BC12',
                            showSymbol:false,
                        },{
                            name:'power',
                            id:'W_2',
                            data:data.solarpower,
                            type: 'line',
                            smooth: true,
                            color:'#3898F8',
                            showSymbol:false,
                        },
                    ];
                    legendData = [
                        {name:'Voltage',icon:'circle'},
                        {name:'Current',icon:'circle'},
                        {name:'power',icon:'circle'},
                    ];
                    legendSelected['Voltage'] = true;
                    legendSelected['Current'] = true;
                    legendSelected['power'] = true;
                    for(let d of data.solarpower){
                        d = parseInt(d);
                        if(d > dataListMax){
                            dataListMax = d;
                        }
                    }
                    dataListMax = dataListMax +'00'
                    gridLeft = dataListMax.length*10;
                }
                if(type == '3'){
                    series =  [
                        {
                            name:'Charge',
                            id:'AH_0',
                            data:data.daychargeah,
                            type: 'line',
                            smooth: true,
                            color:'#15CA56',
                            showSymbol:false,
                        },{
                            name:'Discharge',
                            id:'AH_1',
                            data:data.daydischarah,
                            type: 'line',
                            smooth: true,
                            color:'#F3BC12',
                            showSymbol:false,
                        }
                    ];
                    legendData = [
                        {name:'Charge',icon:'circle'},
                        {name:'Discharge',icon:'circle'},
                    ];
                    legendSelected['Charge'] = true;
                    legendSelected['Discharge'] = true;
                    for(let d of data.daychargeah){
                        d = parseInt(d);
                        if(d > dataListMax){
                            dataListMax = d;
                        }
                    }
                    for(let d of data.daydischarah){
                        d = parseInt(d);
                        if(d > dataListMax){
                            dataListMax = d;
                        }
                    }
                    dataListMax = dataListMax +'00'
                    gridLeft = dataListMax.length*10;
                }
               
                // console.log(data,'------')
                let legendOrient = 'horizontal';
                if(document.body.offsetWidth <1500){
                    this_.legendWidth = '180px';
                    // if(type == '3'){
                    //  legendOrient = 'vertical';
                    // }
                }else{
                    this_.legendWidth = 'auto';
                    // legendOrient = 'horizontal';
                }
                this.$nextTick(function(){
                    if(document.getElementsByClassName('history_echarts')[0]){
                        const myChart = this.$echarts.init(document.getElementsByClassName('history_echarts')[0]);
                        let arry = [],hh,month,dd,mm;
                        for(let d of data.updatetime){
                            d = new Date(d);month = d.getMonth()+1;dd = d.getDate();
                            hh = d.getHours()<10?'0'+d.getHours():d.getHours();
                            mm = d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes();
                            arry.push(month+'-'+dd+' '+hh+':'+mm)
                        }
                        let option = {
                            tooltip:{
                                trigger:'axis',
                                axisPointer:{
                                    snap:true,
                                    lineStyle:{
                                        width:2,
                                        color:'rgba(252, 130, 61, 0.19)',
                                        type:'dashed',
                                    }
                                },
                                padding:0,
                                backgroundColor:'rgba(0,0,0,0.6)',
                                formatter: function (params) {
                                    var tls,p='';
                                    for(let key in params){
                                    // console.log('sapn_'+params[key].seriesId.split('_')[1])
                                        p=p+'<p><span class="span_'+params[key].seriesId.split('_')[1]+'"></span>'+params[key].seriesName+': '+params[key].data+' '+params[key].seriesId.split('_')[0]+'</p>'
                                    }
                                    tls = '<div class="history_echarts_tooltip"><p>'+data.updatetime[params[0].dataIndex]+'</p>'+p+'</div>'
                                    return tls;
                                },
                            },
                            grid:{
                                top:60,
                                left:gridLeft,
                                bottom:20,
                                right:40,
                            },
                            legend: {
                                data:legendData,
                                selected:legendSelected,
                                orient:legendOrient,
                                type: 'scroll',
                                left: '20px',
                                top: '0px',
                                width:this_.legendWidth,
                                itemWidth: 12,
                                itemHeight: 12,
                                textStyle:{
                                    color:'rgba(102,102,102,1)',
                                    fontSize:14,
                                    fontWeight:500,
                                },
                            },
                            xAxis: {
                                data: arry,
                                type: 'category',
                                boundaryGap: false,
                                axisLabel:{
                                    color:'rgba(136, 136, 136, 1)',
                                    fontSize:'12',
                                },
                                axisTick:{
                                    show:false
                                },
                                axisLine:{
                                    show:false
                                },
                            },
                            yAxis: {
                                type: 'value',
                                nameGap:6,
                                // interval:6,
                                // max:
                                axisLabel:{
                                    color:'rgba(136, 136, 136, 1)',
                                    fontSize:'12',
                                },
                                axisTick:{
                                    show:false
                                },
                                axisLine:{
                                    show:false
                                },
                                splitNumber:4,
                                splitLine:{
                                    lineStyle:{
                                        color:'rgba(240, 240, 240, 1)',
                                    }
                                },
                            },
                            series: series,
                        };
                        myChart.setOption(option,true);

                        window.onresize = function(){
                          if(document.body.offsetWidth <1500){
                                this_.legendWidth = '180px';
                            }else{
                                this_.legendWidth = 'auto';
                            }
                            myChart.setOption(option,true);
                            myChart.resize();
                        }
                    }
                })
            },
            handleCurrentChangeLS(val) {
                this.lampcontrolHistorylist(val);
            },
            tableRowClassName({row, rowIndex}) {
                console.log(row)
                if (rowIndex%2 == 0) {
                  return 'row_bg';
                }
                return '';
            },
            screenDateFun(){
                this.LSDataType = '4';
                console.log(this.screenDateLS);
                if(this.dataLSType == '0'){
                    this.lampHistoryData();
                }else{
                    this.currentPageLS = 1;
                    this.historicalTableList = this[this.historicalNavSelect+'TableListEN'];
                    this.lampcontrolHistorylist(1);
                }
            },
            /**/
            tableOperationfun(data){
                this.faultInfo(data.lampId,data => {
                    this.detailsDetailsData = data.data;
                    this.detailsDetailsData.userid = '';
                    this.detailsDetailsDialog = true;
                })
            },
            faultInfo(value,callback){
                baseApi.ajax_post(
                    allUrl.gisMap.faultInfo,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        lampid:value,
                    },
                    {},
                    data =>{
                        if(callback){
                            callback(data)
                        }
                    },
                this)
            },
            lampInfoFailure(type,data){
                // alarmData
                console.log(data)
                this.faultListTkShow = true;
                this.loading.lampInfoFailure = true;
                let lampId,projectId,section;
                if(type == 'project'){
                    projectId = data.projectid;
                }
                if(type == 'road'){
                    section = data.section;
                    projectId = data.projectid;
                }
                if(type == 'lamp'){
                    lampId = data.id
                }
                baseApi.ajax_post(
                    allUrl.gisMap.alarmData,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        lampid:lampId,
                        projectid:projectId,
                        section:section,
                    },
                    {},
                    data =>{
                        console.log(data)
                        this.faultTableData = data.data.list;
                        this.loading.lampInfoFailure = false;
                        this.$refs.faultTableData.doLayout();
                    },
                this)
            },
            projectInfoSection(command){
                this.dialogProjectInfo.section = command;
                this.lampDialogType = 2;
                this.sectionDataGet(command);
            },
            rodaTableDataRowName(row){
                if(row.row.id == this.lampId){
                    return 'road_lampId select road_lampId_'+row.row.id;
                }
                return 'road_lampId road_lampId_'+row.row.id;
            },
            rodaTableDblclick(data){
                this.lampDialogType = 1;
                this.lampId = data.id;
                this.lampInfoGet(this.lampId);
                this.lampIdChangeType = 'list';
                // console.log(data.id)
            },
            roadInfoScreen(val){
                if(val == 1){
                    this.roadOnlineStatus = this.roadOnlineStatus==1?0:1;
                    this.roadLightStatus = 0;
                    this.roadFailStatus = 0;
                }
                if(val == 2){
                    this.roadOnlineStatus = 0;
                    this.roadLightStatus = this.roadLightStatus==1?0:1;
                    this.roadFailStatus = 0;
                }
                if(val == 3){
                    this.roadOnlineStatus = 0;
                    this.roadLightStatus = 0;
                    this.roadFailStatus = this.roadFailStatus==1?0:1;
                }
                this.sectionDataGet();
            },
            sChangeH_M_S(s) {
                let hh,mm,ss;
                hh = parseInt(s/3600)<10?'0'+parseInt(s/3600):parseInt(s/3600);
                mm = parseInt(s%3600/60)<10?'0'+parseInt(s%3600/60):parseInt(s%3600/60);
                ss = (s - hh*3600 - mm*60)<10?'0'+(s - hh*3600 - mm*60):s - hh*3600 - mm*60;
                return hh+':'+mm+':'+ss
            },
            sectionNavGet(id,obj){
                // console.log(id,obj)
                baseApi.ajax_post(
                    allUrl.gisMap.section_nav,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        projectid:id,
                    },
                    {},
                    data =>{
                        this.$set(obj,'roadList',data.data.list)
                        // console.log(data)
                    },
                this)
            },
            lampInfoGet(id){
                this.lampId = id;
                baseApi.ajax_post(
                    allUrl.gisMap.lampData,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        lampid:id,
                    },
                    {},
                    data =>{
                        this.dialogLampInfo = data.data;
                        if(Number(data.data.userDate/data.data.totalDate*100).toFixed(0)){
                            this.dialogLampInfo.jd_sfe = parseInt(data.data.userDate/data.data.totalDate*100);
                        }else if(data.data.totalDate == 0){
                            this.dialogLampInfo.jd_sfe = 100;
                        }else{
                            this.dialogLampInfo.jd_sfe = 0;
                        }
                        this.dialogLampInfo.daydischargemincurrent = this.sChangeH_M_S(this.dialogLampInfo.daydischargemincurrent);
                        this.dialogLampInfo.totalLightTime = this.sChangeH_M_S(this.dialogLampInfo.totalLightTime);
                        this.lampDialogShow = true;
                        this.lampDialogType = 1;
                        
                    },
                this)
            },
            sectionDataGet(id){
                let section,lampId,projectid;
                if(id){
                    lampId = '';
                    section = id;
                    projectid = this.projectId;
                }else{
                    lampId = this.lampId;
                }
                let this_ = this;
                baseApi.ajax_post(
                    allUrl.gisMap.sectionData,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        lampid:lampId,
                        section:section,
                        projectid:projectid,
                        onlineStatus:this.roadOnlineStatus,
                        lightStatus:this.roadLightStatus,
                        failStatus:this.roadFailStatus,
                    },
                    {},
                    data =>{
                        this.dialogSectionInfo = data.data;
                        this.dialogSectionInfo.daychargemincurrent = this.sChangeH_M_S(this.dialogSectionInfo.daychargemincurrent);
                        this.dialogSectionInfo.daydischargemincurrent = this.sChangeH_M_S(this.dialogSectionInfo.daydischargemincurrent);
                        this.rodaTableData = data.data.lampList;
                        for(let d of this.rodaTableData){
                            d.lighteness = d.lighteness+'%';
                        }
                        this.$refs.rodaTableData.doLayout();
                        if(this.rodaTableData.length > 5){
                            setTimeout(function(){
                                // console.log($('.road_lampId_'+this_.lampId)[0].offsetTop)
                                if($('.road_lampId_'+this_.lampId)){
                                    $('.GISMap_main .lamp_dialog .road_info .box4 .table_box .el-table__body-wrapper').animate({scrollTop: $('.road_lampId_'+this_.lampId)[0].offsetTop - 100})
                                }
                            },500)
                        }
                    },
                this)
            },
            projectDataGet(){
                baseApi.ajax_post(
                    allUrl.gisMap.projectData,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        lampid:this.lampId,
                    },
                    {},
                    data =>{
                        this.dialogProjectInfo = data.data;
                        if(this.dialogProjectInfo.co2_emission > 9999){
                            this.dialogProjectInfo.co2_emission = parseInt(this.dialogProjectInfo.co2_emission)
                        }
                        if(this.dialogProjectInfo.so2_emission > 9999){
                            this.dialogProjectInfo.so2_emission = parseInt(this.dialogProjectInfo.so2_emission)
                        }
                        if(this.dialogProjectInfo.coal_saving > 9999){
                            this.dialogProjectInfo.coal_saving = parseInt(this.dialogProjectInfo.coal_saving)
                        }
                        this.projectId = data.data.projectid;
                    },
                this)
            },
            lampDialogTypeSwitch(val){
                this.lampDialogType = val;
                if(val == '1'){
                    this.lampInfoGet(this.lampId);
                }
                if(val == '2'){
                    this.sectionDataGet();
                }
                if(val == '3'){
                    this.projectDataGet();
                }
            },
            topDataBoxShowFun(){
                if(this.topDataBoxShow){
                    this.topDataBoxShow = false;
                }else{
                    this.topDataBoxShow = true;
                }
            },
            operationFun(key){
                if(this.lampEdit){
                    if(this.operationType == key){
                        this.operationType = 0;
                    }else{
                        this.operationType = key;
                    }
                    if(this.browserLanguage == 'bd'){
                        this.mapGet();
                    }else{
                        this.mapGet_en();
                    }
                    
                }
            },
            /*隐藏*/
            switchLampOnOff(val){
                this.switchArrowType = val;
            },
            /*36、显示选择路灯状态的容器 开灯、关灯、故障、离线、全部*/
            showLampStatusList(){
                 this.isShowLampStatusList=true
            },
            /*隐藏选择路灯状态的容器 开灯、关灯、故障、离线、全部*/
            hideLampStatusList(){
                 this.isShowLampStatusList=false
            },
            dateNav(){
                baseApi.ajax_post(
                    allUrl.gisMap.dateNav,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        project_id:this.projectId,
                    },
                    {},
                    data =>{
                        this.topDataNav =data.data;
                    },
                this)
            },
            /*捕虫器开关*/
            catcherOnOff(){
                let type;
                let this_ = this;
                if(this.streetLamp.status == '0'){
                    type = '1';
                }else{
                    type = '0';
                }
                if(!this.loading.catcherOnOff){
                    baseApi.websocket1(allUrl.home.wss,(data,websocket)=>{
                        console.log(websocket)
                        this_.loading.catcherOnOff = true;
                        if(data.data.status == '1'){
                            baseApi.ajax_post_ws(
                                allUrl.device.lampcontrolTurnonoff,
                                {
                                    username:this_.username,
                                    client_key:this_.client_key,
                                    token:this_.token,
                                    lamp_id:this_.lampId,
                                    type:type,
                                    mode:0,
                                    clientid:data.clientid,
                                },
                                this_
                            )
                        }else if(data.data.status == '2'){
                            if(data.data.code == '0000'){
                                this.$message({
                                  showClose: true,
                                  message:data.data.msg,
                                  type: 'success'
                                });
                             //    this_.lampInfo(this_.lampId,data=>{
                                //  this_.streetLamp = data.data;
                                // })
                            }else{
                                this.$message({
                                  showClose: true,
                                  message:data.data.data.msg,
                                  type: 'warning'
                                });
                                
                            }
                            this_.loading.catcherOnOff = false;
                        }
                    },() => {
                        this_.loading.catcherOnOff = false;
                    },this_)
                    
                }
            },
            /*获取公司项目列表*/
            getProjectNav(type){
                baseApi.ajax_post(
                    allUrl.device.projectNav,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                    },
                    {},
                    data =>{
                        // console.log(data,'公司列表')
                        this.projectNav = data.data;

                        var storage = window.localStorage;
                        let projectId = storage.getItem("projectId");
                        this.companyId = storage.getItem("companyId");
                        for(var key in data.data){
                            this.$set(data.data[key],'type','Unfold')
                            if(data.data[key].project_list){
                                for(var d of data.data[key].project_list){
                                    this.$set(d,'companyId',data.data[key].id)
                                }
                            }
                            if(type){
                                console.log(type)
                            }else{
                                if(this.companyId != 'false' && this.companyId){
                                    if(data.data[key].id == this.companyId){
                                        this.$set(data.data[key],'type','Collapse')
                                        this.projectId = projectId;
                                    }
                                }else{
                                    this.projectId = 0;
                                    this.companyId = 0;
                                }
                            }
                        }
                        for(let d of this.projectNav){
                            if(d.id == this.companyId){
                                for(let dd of d.project_list){
                                    if(dd.id == this.projectId){
                                        this.$set(dd,'isOpen',true);
                                        this.sectionNavGet(dd.id,dd)
                                    }
                                }
                            }
                        }
                        this.dateNav();
                        this.lampListGet(1);
                    },
                this)
            },
            /*侧栏列表*/
            sideBarCompanyList(val,type,init){
                baseApi.ajax_post(
                    allUrl.project.projectNav,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        type:type,
                        keyword:val,
                    },
                    {},
                    data =>{
                        // console.log(data,'公司列表')
                        console.log(init)
                        let storage = window.localStorage;
                        let companyId = storage.getItem("companyId");
                        let projectId = storage.getItem("projectId")
                        if(type == 0){
                            if(data.data.length>0){
                                if(projectId){
                                    this.projectId = projectId;
                                }else{
                                    this.projectId = data.data[0].id;
                                }
                                        this.sectionNavGet(data.data[0].id,data.data[0])
                                for(let key in data.data){
                                    this.$set(data.data[key],'isOpen',false)
                                    if(data.data[key].id == this.projectId){
                                        this.$set(data.data[key],'isOpen',true)
                                    }
                                }
                            }

                        }else{
                            if(data.data.length>0){
                                if(companyId){
                                    this.companyId = companyId;
                                    if(data.data[0].projectList.length>0){
                                        if(projectId){
                                            this.projectId = projectId;
                                        }else{
                                            this.projectId = data.data[0].projectList[0].id;
                                        }
                                        // this.$set(data.data[0].projectList[0],'isOpen',true)
                                        this.sectionNavGet(data.data[0].id,data.data[0])
                                    }else{
                                        this.projectId = null;
                                        this.deviceTotalData = {
                                            light_num:0,
                                            online_num:0,
                                            fault_count:0,
                                            network_num:0
                                        };
                                        this.deviceList = [];
                                        this.total = 0;
                                        this.count = 0;
                                        this.fault = 0;
                                    }
                                }else{
                                    this.companyId = data.data[0].cId;
                                    if(data.data[0].projectList.length>0){
                                        this.projectId = data.data[0].projectList[0].id;
                                        // this.$set(data.data[0].projectList[0],'isOpen',true)
                                        this.sectionNavGet(data.data[0].id,data.data[0])
                                    }else{
                                        this.projectId = null;
                                        this.deviceTotalData = {
                                            light_num:0,
                                            online_num:0,
                                            fault_count:0,
                                            network_num:0
                                        };
                                        this.deviceList = [];
                                        this.total = 0;
                                        this.count = 0;
                                        this.fault = 0;
                                    }
                                }
                                for(let key in data.data){
                                    this.$set(data.data[key],'isOpen',false)
                                    if(data.data[key].cId == this.companyId){
                                        this.$set(data.data[key],'isOpen',true)
                                    }
                                    if(data.data[0].projectList.length>0){
                                        for(let d of data.data[0].projectList){
                                            this.$set(d,'isOpen',true)
                                            if(d.id == this.projectId){
                                                this.$set(d,'isOpen',true)
                                            }
                                        }
                                    }
                                }
                            }else{
                                this.companyId = null
                                this.projectId = null;
                                this.deviceTotalData = {
                                    light_num:0,
                                    online_num:0,
                                    fault_count:0,
                                    network_num:0
                                };
                                this.deviceList = [];
                                this.total = 0;
                                this.count = 0;
                                this.fault = 0;
                            }
                        }
                        console.log(this.companyId)
                        this.projectNav = data.data;
                        this.dateNav();
                        this.lampListGet(1);
                    },
                this)
            },
            /*侧边栏打开关闭*/
            sideBarIsOn(){
                if(this.sideBarType == 'on'){
                    this.sideBarType = 'off';
                }else{
                    this.sideBarType = 'on';
                }
            },
            /*侧边栏里展开收起*/
            sideBarListIsOpen(data){
                if(data.isOpen){
                    data.isOpen = false;   
                }else{
                    data.isOpen = true;   
                }
            },
            projectAll(){
                this.projectId = 0;
                this.companyId = 0;
                var storage = window.localStorage;
                storage.setItem('projectId',false);
                storage.setItem('companyId',false);
            },
            projectSelectFun(type,data,d){
                var storage = window.localStorage;
                storage.setItem('projectId',data.id);
                if(this.sideBarCompanyType != 0){
                    if(d.cId != this.companyId){
                        this.companyId = d.cId;
                        storage.setItem('companyId',d.cId);
                    }
                }
                this.projectId = data.id;
                this.roadId = '';
                if(!data.isOpen||this.projectId != data.id){
                    this.$set(data,'isOpen',true)
                    this.sectionNavGet(this.projectId,data)
                }else{
                    this.$set(data,'isOpen',false)
                    this.maplampListDW();
                }
            },
            roadSelectFun(data,obj,d){
                var storage = window.localStorage;
                if(this.sideBarCompanyType == 0){
                    if(data.id != this.projectId){
                        storage.setItem('projectId',data.id);
                        this.projectId = data.id;
                    }
                    this.roadId = obj.name;
                }else{
                    if(data.cId != this.companyId){
                        this.companyId = data.cId;
                        storage.setItem('companyId',data.cId);
                    }
                    if(obj.id != this.projectId){
                        storage.setItem('projectId',obj.id);
                        this.projectId = obj.id;
                    }
                    this.roadId = d.name;
                }
                this.maplampListDW();
            },
            searchKeyUp(e){
                if(e.key == 'Enter'){
                    this.search();
                }
            },
            search(){
                if(this.lampEdit){
                    if(this.operationType == 5){
                        this.videoListGet(data=>{
                            console.log(data)
                            if(data.data.list.length > 0){
                                if(this.browserLanguage == 'bd'){
                                    this.mapGet('lamp',[data.data.list[0].longitude,data.data.list[0].latitude]);
                                }else{
                                    this.mapGet_en('lamp',[data.data.list[0].longitude,data.data.list[0].latitude]);
                                }
                                
                                this.rightSideBarType = 'off';
                                if(document.getElementsByClassName('right_sidebar')[0]){
                                    document.getElementsByClassName('right_sidebar')[0].setAttribute('style', 'width: 0px ;transition:all 0.6s;');
                                }
                            }else{
                                if(this.browserLanguage == 'bd'){
                                    this.mapGet();
                                }else{
                                    this.mapGet_en();
                                }
                                
                            }
                        })
                    }else{
                        this.lampListGet(1,data=>{
                            if(data.data.lamps.length > 0){
                                if(this.browserLanguage == 'bd'){
                                    this.mapGet('lamp',[data.data.lamps[0].longitude,data.data.lamps[0].latitude]);
                                }else{
                                    this.mapGet_en('lamp',[data.data.lamps[0].longitude,data.data.lamps[0].latitude]);
                                }
                                
                            }else{
                                if(this.browserLanguage == 'bd'){
                                    this.mapGet();
                                }else{
                                    this.mapGet_en();
                                }
                                
                            }
                        });
                        this.rightSideBarType = 'on';
                        if(document.getElementsByClassName('right_sidebar')[0]){
                            document.getElementsByClassName('right_sidebar')[0].setAttribute('style', 'width: 46% ;transition:all 0.6s;');
                        }
                    }
                }
            },
            projectListSCroll(e){
                // console.log(e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight,this.loading.projectListList,this.projectListTotal,this.projectListPage)
                if(e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight < 50 && !this.loading.projectListList && this.projectListTotal > this.projectListPage){
                    clearTimeout(this.scroll_time);
                    let this_ = this;
                    // console.log(this_.projectListPage)
                    this.scroll_time = setTimeout(function(){
                        this_.projectListPage++;
                        this_.loading.projectListList = true;
                        baseApi.ajax_post(
                            allUrl.gisMap.projectListUrl,
                            {
                                username:this_.username,
                                client_key:this_.client_key,
                                token:this_.token,
                                page:this_.projectListPage,
                                count:16,
                            },
                            {},
                            data =>{
                                for(let d of data.data.projects){
                                    this_.projectList.push(d)
                                }
                                this_.loading.projectListList = false;
                            },
                        this_)
                    },300)
                }
            },
            lampListSCroll(e){
                clearTimeout(this.scroll_time);
                if(e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight < 50 && !this.loading.streetLampList && this.lampListTotal > this.lampListPage){
                    let this_ = this;
                    this.scroll_time = setTimeout(function(){
                        this_.lampListPage++;
                        this_.loading.streetLampList = true;
                        baseApi.ajax_post(
                            allUrl.gisMap.lampList,
                            {
                                username:this_.username,
                                client_key:this_.client_key,
                                token:this_.token,
                                project_id:this_.projectId,
                                section:this_.roadId,
                                type:this_.operationType,
                                keyword:this_.keyword,
                                page:this_.lampListPage,
                                count:16,
                            },
                            {},
                            data =>{
                                // console.log(data)
                                for(let d of data.data.lamps){
                                    if(d.status == '1'){
                                        d.runState = 'Lamp on'
                                    }else{
                                        d.runState = 'Lamp off'
                                    }
                                    this_.streetLampList.push(d);
                                }
                                // console.log(this_.streetLampList)
                                this_.loading.streetLampList = false;
                            },
                        this_)
                    },300)
                }
            },
            lampListGet(val,callback){
                 baseApi.ajax_post(
                    allUrl.gisMap.lampList,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        project_id:this.projectId,
                        section:this.roadId,
                        type:this.operationType,
                        keyword:this.keyword,
                        page:val,
                        count:16,
                    },
                    {},
                    data =>{
                        if(callback){
                            callback(data)
                        }
                        // console.log(data)
                        this.streetLampList = data.data.lamps;
                        this.lampListTotal = data.data.total;
                        this.lampListPage = 1;
                        for(let d of this.streetLampList){
                            if(d.status == '1'){
                                d.runState = 'Lamp on'
                            }else{
                                d.runState = 'Lamp off'
                            }
                        }
                    },
                this)
            },
            contextmenuFun(e){
                // console.log(e,1)
                e.preventDefault();
            },
            mousedownFun(){
                this.contextmenuIsShow = false;
                this.monitorId = '-1';
                Notification.closeAll();
                // console.log(e,2)
            },
            /*灯控删除*/
            lampDelFun(){
                this.$confirm('This operation will permanently delete the lamp control, will it continue?', 'Prompt', {
                  confirmButtonText: 'confirm',
                  cancelButtonText: 'cancel',
                  type: 'warning'
                }).then(() => {
                    if(this.lampType == 'monitor'){
                        baseApi.ajax_post(
                            allUrl.video.videoDelete,
                            {
                                username:this.username,
                                client_key:this.client_key,
                                token:this.token,
                                id:this.monitorId
                            },
                            {},
                            data =>{
                                this.$message({
                                  showClose: true,
                                  message:data.msg,
                                  type: 'success'
                                });
                                for(let key in this.mapDataListHC){
                                    if(this.mapDataListHC[key].id == this.monitorId){
                                        this.mapDataListHC.splice(key,1)
                                    }
                                }
                                this.cluster.clearMarkers();
                                if(this.browserLanguage == 'bd'){
                                    this.mapGet('del',false,this.mapDataListHC);
                                }else{
                                    this.mapGet_en('del',false,this.mapDataListHC);
                                }
                                
                                this.monitorId = '-1';
                                this.contextmenuIsShow = false;
                                Notification.closeAll();
                            },
                        this);
                    }else{
                      baseApi.ajax_post(
                        allUrl.device.lampcontrolDel,
                        {
                            username:this.username,
                            client_key:this.client_key,
                            token:this.token,
                            lamp_ids:this.lampIdHC,
                        },
                        {},
                        data =>{
                            this.$message({
                              showClose: true,
                              message:data.msg,
                              type: 'success'
                            });
                            // console.log(data,'删除路灯坐标回调')
                            for(let key in this.mapDataListHC){
                                if(this.mapDataListHC[key].id == this.lampId){
                                    this.mapDataListHC.splice(key,1)
                                }
                            }
                            this.cluster.clearMarkers();
                            if(this.browserLanguage == 'bd'){
                                this.mapGet('del',false,this.mapDataListHC);
                            }else{
                                this.mapGet_en('del',false,this.mapDataListHC);
                            }
                            
                            this.lampId = '-1';
                            this.contextmenuIsShow = false;
                            Notification.closeAll();
                        },
                      this)
                    }
                }).catch(() => {
                  this.monitorId = '-1';
                  this.lampId = '-1';
                  this.$message({
                    type: 'info',
                    message: 'Canceled deleting'
                  });          
                });
            },
            /*灯控编辑*/
            lampEditFun(){
                let this_ = this;
                this.networkLampList = [];
                this.networkId = '';
                this.contextmenuIsShow = false;
                this.lampId = this.lampIdHC;
                // this.lampEdit = false;
                this.$store.commit('setLampEdit',{
                    lampEdit:false,
                })
                this.lampCoordinateIsShow = true;
                this.lamp_editFun();
                if(this.lampEditFunIsfirst){
                    this.$notify({
                      title: 'Edit '+this.lmText,
                      dangerouslyUseHTMLString: true,
                      message: 'Drag the '+this.lmText+' to adjust its latitude and longitude<span class="lampEditTiTleClose">Oh I see</span>',
                      customClass:"lampEditTiTle",
                      duration: 0,
                      offset: 100,
                      showClose:false
                    });
                }
                this.lampEditFunIsfirst = false;
                var body = document.body;
                body.onclick=function(e){
                    let className = e.target.className.split(' ');
                    if(className[0] == 'lampEditTiTleClose'){
                        Notification.closeAll();
                        $("body").unbind();
                    }
                }
                this.getProjectCompany(this.lampId,data => {
                    let bd_decrypt = this.bd_decrypt(data.data.longitude,data.data.latitude)
                    console.log(data.data.longitude,data.data.latitude,'--',bd_decrypt.lng,bd_decrypt.lat,'==========')
                    data.data.longitude = bd_decrypt.lng.toFixed(8);
                    data.data.latitude = bd_decrypt.lat.toFixed(8);
                    let JDstr = '';
                    let WDstr = '';

                    JDstr = 'longitude';
                    WDstr = 'latitude';

                    this.lampLongitude = data.data.longitude;
                    this.lampLatitude = data.data.latitude;
                    this.rightSideBarType = 'off';
                    if(document.getElementsByClassName('right_sidebar')[0]){
                        document.getElementsByClassName('right_sidebar')[0].setAttribute('style', 'width: 0px ;transition:all 0.6s;');
                    }
                    let type = '';
                    let lmId;
                    if(this_.lampType == 'monitor'){
                        type = '2';
                        lmId = this_.monitorId;
                    }else{
                        lmId = this_.lampId;
                        type = '1';
                    }
                        // this.lampLongitude = data.data.longitude;
                        // this.lampLatitude = data.data.latitude;

                    if(this.browserLanguage == 'google'){
                        let bgColor = '#31b4fd';
                        let borderColor = 'rgba(49, 180, 253, 0.18)';

                        if(this.lampType == 'fault'){
                            bgColor = '#ff0505';
                            borderColor = 'rgba(255, 5, 5, 0.14)';
                        }else if(this.lampType == 'off-line'){
                            bgColor = '#7c7c7c';
                            borderColor = 'rgba(167, 167, 167, 0.18)';
                        }else if(this.lampType == 'on'){
                            bgColor = 'linear-gradient(#fc8440, #fe7121)';
                            borderColor = 'rgba(253, 122, 48, 0.18)';
                        }else if(this.lampType == 'off'){
                            bgColor = '#ffb68d';
                            borderColor = 'rgba(242, 223, 199, 0.18)';
                        }

                        let div;
                        if(this_.mapTCtype == 'TileLayer'){
                            div = '<div class="lm_img_mover" style="text-align:center;border:11px solid '+borderColor+'; border-radius:50%;cursor:pointer;"><div style="text-align:center;background:'+bgColor+';background-clip: padding-box;border:2px solid #fff; height: 16px; width: 16px; border-radius:50%;"></div></div>';
                        }else{
                            div = `<div class="lm_img_mover" style="width:42px;height:42px;background-image:url('./src/img/GIS/lamp_type/lamp_night_${this_.lampType}_${data.data.direction}.png');background-size:100% 100%;background-position: 0 0;"></div>`;
                        }
                        this_.positionPicker = new RichMarker({
                          position:new google.maps.LatLng(Number(this.lampLatitude),Number(this.lampLongitude)),
                          map: this_.map,
                          draggable: true,
                          content:div,
                        })
                        google.maps.event.addListener(this_.positionPicker,"position_changed",function(e){
                            e = e || window.event;  
                            if(e.stopPropagation) { //W3C阻止冒泡方法  
                                e.stopPropagation();  
                            } else {  
                                e.cancelBubble = true; //IE阻止冒泡方法  
                            }
                            // console.log(e,this.getPosition())
                            $('.lampLongitude'+lmId).text(this.getPosition().lng().toFixed(8));
                            $('.lampLatitude'+lmId).html(this.getPosition().lat().toFixed(8));
                            let bd_encrypt = this_.bd_encrypt(this.getPosition().lng().toFixed(8),this.getPosition().lat().toFixed(8))
                            this_.lampLongitude = bd_encrypt.bd_lng;
                            this_.lampLatitude = bd_encrypt.bd_lat;
                        })
                        let time = setInterval(function(){
                            if($('.lm_img_mover').length >0){
                                let div = $('<div class="lamp_coordinate lamp_coordinate_'+lmId+'"><span><span>'+ JDstr +' : <span class="lampLongitude'+lmId+'">'+this_.lampLongitude+'</span></span><span>'+ WDstr +' : <span class="lampLatitude'+lmId+'">'+this_.lampLatitude+'</span></span></span><i class="determine_l"></i><i class="cancel_l"></i></div>')
                                $('.lm_img_mover').parent().append(div);
                                
                                $('.lamp_coordinate_'+lmId).children('i').mouseup(function(e){
                                    let className = e.target.className.split(' ');
                                    // console.log(className)
                                    if(className[0] == 'determine_l'){
                                        
                                        baseApi.ajax_post(
                                            allUrl.gisMap.changeLocation,
                                            {
                                                username:this_.username,
                                                client_key:this_.client_key,
                                                token:this_.token,
                                                id:lmId,
                                                type:type,
                                                longitude:this_.lampLongitude,
                                                latitude:this_.lampLatitude,
                                            },
                                            {},
                                            data =>{
                                                this_.$message({
                                                  showClose: true,
                                                  message:data.msg,
                                                  type: 'success'
                                                });
                                                // console.log(data,'改变路灯坐标回调')
                                                $('.lamp_coordinate_'+lmId).css('display','none');
                                                if(this_.lampType == 'monitor'){
                                                    $('.monitor_'+this_.monitorId).unbind("mousedown");
                                                }else{
                                                    $('.lamp_'+this_.lampId).unbind("mousedown");
                                                }
                                                this_.$store.commit('setLampEdit',{
                                                    lampEdit:true,
                                                })
                                                for(let d of this_.mapDataListHC){
                                                    if(d.id == lmId){
                                                        let bd_decrypt = this_.bd_decrypt(this_.lampLongitude,this_.lampLatitude)
                                                        d.latitude = bd_decrypt.lat
                                                        d.longitude = bd_decrypt.lng
                                                        // console.log('-----',d)
                                                    }
                                                }
                                                this_.mapGet_en('lamp',[this_.lampLongitude,this_.lampLatitude],this_.mapDataListHC);
                                                if(this_.positionPicker.onRemove){
                                                    this_.positionPicker.onRemove()
                                                }
                                                this_.lampId = '-1';
                                                this_.monitorId = '-1';
                                                Notification.closeAll();
                                                this_.lampType = '';
                                            },
                                        this_)
                                    }else if(className[0] == 'cancel_l'){
                                        this_.$store.commit('setLampEdit',{
                                            lampEdit:true,
                                        })
                                        if(this_.lampType == 'monitor'){
                                            $('.monitor_'+this_.monitorId).css('display','block')
                                        }else{
                                            $('.lamp_'+this_.lampId).css('display','block')
                                        }
                                        this_.mapGet_en('lamp',[this_.lampLongitude,this_.lampLatitude],this_.mapDataListHC);
                                        if(this_.positionPicker.onRemove){
                                            this_.positionPicker.onRemove()
                                        }
                                        this_.lampId = '-1';
                                        this_.monitorId = '-1';
                                        Notification.closeAll();
                                        this_.lampType = '';
                                    }
                                })
                                clearInterval(time)
                            }
                        },1)
                    }
                    if(this.browserLanguage == 'bd'){
                        let url;
                        if(this_.mapTCtype == 'TileLayer'){
                            url = './src/img/GIS/'+this_.lampType+'-icon.png';
                        }else{
                            url = './src/img/GIS/lamp_type/lamp_night_'+this_.lampType+'_'+data.data.direction+'.png';
                        }
                        /*路灯方向*/
                        AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
                            this_.positionPicker = new PositionPicker({
                                mode: 'dragMarker',
                                map: this_.map,
                                 iconStyle: { //自定义外观
                                    url: url,
                                    ancher: [24, 24],
                                    size: [48, 48],
                                }
                            });

                            this_.positionPicker.on('success', function(positionResult) {
                                // console.log(positionResult.position)
                                $('.lampLongitude'+lmId).text(positionResult.position.lng);
                                $('.lampLatitude'+lmId).html(positionResult.position.lat);

                                let bd_encrypt = this_.bd_encrypt(positionResult.position.lng,positionResult.position.lat)
                                positionResult.position.lng = bd_encrypt.bd_lng;
                                positionResult.position.lat = bd_encrypt.bd_lat;

                                this_.lampLongitude = positionResult.position.lng;
                                this_.lampLatitude = positionResult.position.lat;
                            });
                            // this_.positionPicker.on('fail', function(positionResult) {
                            //     // console.log(positionResult.position)
                            // });
                            this_.positionPicker.start([data.data.longitude,data.data.latitude]);
                            this_.map.addControl(new AMap.ToolBar({
                                liteStyle: true
                            }))
                        });
                        let time = setInterval(function(){
                            if($('.amap-marker').children('.amap-marker-content').children('img').parent().length>0){
                                let div = $('<div class="lamp_coordinate lamp_coordinate_'+lmId+'"><span><span>'+ JDstr +' : <span class="lampLongitude'+lmId+'">0</span></span><span>'+ WDstr +' : <span class="lampLatitude'+lmId+'">0</span></span></span><i class="determine_l"></i><i class="cancel_l"></i></div>')
                                $('.amap-marker').children('.amap-marker-content').children('img').parent().append(div);
                                $('.lampLongitude'+lmId).text(this_.lampLongitude);
                                $('.lampLatitude'+lmId).html(this_.lampLatitude);
                                $('.lamp_coordinate_'+lmId).children('i').mousedown(function(){
                                    this_.map.setStatus({'dragEnable':false})
                                })
                                
                                $('.lamp_coordinate_'+lmId).children('i').mouseup(function(e){
                                    let className = e.target.className.split(' ');
                                    // console.log(className)
                                    if(className[0] == 'determine_l'){
                                        
                                        baseApi.ajax_post(
                                            allUrl.gisMap.changeLocation,
                                            {
                                                username:this_.username,
                                                client_key:this_.client_key,
                                                token:this_.token,
                                                id:lmId,
                                                type:type,
                                                longitude:this_.lampLongitude,
                                                latitude:this_.lampLatitude,
                                            },
                                            {},
                                            data =>{
                                                this_.$message({
                                                  showClose: true,
                                                  message:data.msg,
                                                  type: 'success'
                                                });
                                                // console.log(data,'改变路灯坐标回调')
                                                this_.map.setStatus({'dragEnable':true})
                                                $('.lamp_coordinate_'+lmId).css('display','none');
                                                if(this_.lampType == 'monitor'){
                                                    $('.monitor_'+this_.monitorId).unbind("mousedown");
                                                }else{
                                                    $('.lamp_'+this_.lampId).unbind("mousedown");
                                                }
                                                this_.$store.commit('setLampEdit',{
                                                    lampEdit:true,
                                                })
                                                this_.positionPicker.stop();
                                                for(let d of this_.mapDataListHC){
                                                    if(d.id == lmId){
                                                        let bd_decrypt = this_.bd_decrypt(this_.lampLongitude,this_.lampLatitude)
                                                        d.latitude = bd_decrypt.lat
                                                        d.longitude = bd_decrypt.lng
                                                    }
                                                }
                                                this_.cluster.clearMarkers();
                                                this_.mapGet('lamp',[this_.lampLongitude,this_.lampLatitude],this_.mapDataListHC);
                                                this_.lampId = '-1';
                                                this_.monitorId = '-1';
                                                Notification.closeAll();
                                                this_.lampType = '';
                                            },
                                        this_)
                                    }else if(className[0] == 'cancel_l'){
                                        this_.$store.commit('setLampEdit',{
                                            lampEdit:true,
                                        })
                                        this_.positionPicker.stop();
                                        this_.map.setStatus({'dragEnable':true})
                                        if(this_.lampType == 'monitor'){
                                            $('.monitor_'+this_.monitorId).css('display','block')
                                        }else{
                                            $('.lamp_'+this_.lampId).css('display','block')
                                        }
                                        this_.cluster.clearMarkers();
                                        let bd_encrypt = this_.bd_encrypt(this_.lampLongitude,this_.lampLatitude)
                                        this_.mapGet('lamp',[bd_encrypt.bd_lng,bd_encrypt.bd_lat],this_.mapDataListHC);
                                        this_.lampId = '-1';
                                        this_.monitorId = '-1';
                                        Notification.closeAll();
                                        this_.lampType = '';
                                    }
                                })
                                clearInterval(time)
                            }
                        },1)
                    }
                })
            },
            lampRotateFun(){

            },
            lamp_editFun(){
                let this_ = this;
                // console.log(this_.lampType,'------------------')
                if(this_.lampType == 'monitor'){
                    $('.monitor_'+this_.monitorId).css('display','none')
                }else{
                    $('.lamp_'+this_.lampId).css('display','none')
                }
            },
            lampTypeFun(type){
                if(type == 'lamp'){
                    this.lampIdChangeType = 'list';
                    this.lampId = '-1';
                }else{
                    // this.projectInfo(0);
                    this.projectsIdChangeType = 'list';
                    this.slider = '0';
                    this.projectType = 'list';
                }
            },
            /*获取灯控公司与所属项目*/
            getProjectCompany(val,callback,id){
                let type_l = '1';
                if(this.lampType == 'monitor'){
                    type_l = '2';
                    val = this.monitorId;
                }
                baseApi.ajax_post(
                    allUrl.gisMap.getProjectCompany,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        id:val,
                        type:type_l,
                        projectid:id,
                    },
                    {},
                    data =>{
                        callback(data)
                    },
                this)
            },
            /*灯控调光*/
            sliderFun(){
                let this_ = this;
                if(!this.sliderLoading){
                    this.sliderLoading = true;
                    baseApi.websocket1(allUrl.home.wss,data=>{
                        if(data.data.status == '1'){
                            baseApi.ajax_post_ws(
                                allUrl.gisMap.lampcontrolDimming,
                                {
                                    username:this_.username,
                                    client_key:this_.client_key,
                                    token:this_.token,
                                    lamp_id:this_.streetLamp.id,
                                    // type:'1',
                                    lightness:this_.streetLamp.lighteness,
                                    mode:'0',
                                    clientid:data.data.clientid,
                                },
                                this_,
                            )
                        }
                        if(data.data.status == '2'){
                            if(data.data.code == '0000'){
                                this_.$message({
                                  showClose: true,
                                  message:data.data.msg,
                                  type: 'success'
                                });
                                this_.slider = '0';
                                this_.sliderLoading = false;
                            }else{
                                this_.$message({
                                  showClose: true,
                                  message:data.data.msg,
                                  type: 'warning'
                                });
                                this_.slider = '0';
                                this_.sliderLoading = false;
                                this_.streetLamp.lighteness = this_.lightenessHC?this_.lightenessHC:0;
                            }
                        }
                    },() => {
                        this_.sliderLoading = false;
                    },
                    this_)
                }
            },
            adjustLuminanceFun(){
                if(this.slider == '1'){
                    this.slider = '0'
                }else{
                    this.slider = '1'
                    this.lightenessHC = this.streetLamp.lighteness?this.streetLamp.lighteness:0;
                }
            },
            policyGroupset(data,callback){
                baseApi.ajax_post(
                    allUrl.gisMap.policyGroupset,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        groupid:data.groupid,
                        type:data.type,
                        value:data.value,
                        name:this.settingPacketData.name,
                    },
                    {},
                    data =>{
                        if(callback){
                            callback(data)
                        }
                    },
                this)
            },
            policyGroupinfo(value,callback){
                baseApi.ajax_post(
                    allUrl.gisMap.policyGroupinfo,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        groupid:value,
                        companyid:this.companyId,
                    },
                    {},
                    data =>{
                        if(callback){
                            callback(data)
                        }
                    },
                this)
            },
            settingPacketKeep(){
                // console.log(this.settingPacketData)
                let value;
                if(this.settingPacketData.actiontype == '0'){
                    value = this.settingPacketData.value0
                }else if(this.settingPacketData.actiontype == '1'){
                    value = this.settingPacketData.value1
                }else if(this.settingPacketData.actiontype == '2'){
                    value = this.settingPacketData.value2
                }
                this.policyGroupset({
                    groupid:this.settingPacketData.id,
                    type:this.settingPacketData.actiontype,
                    value:value,
                },data => {
                    this.grouplist(this.projects_id);
                    this.$message({
                      showClose: true,
                      message:data.msg,
                      type: 'success'
                    });
                    this.settingPacketDialog = false;
                })
            },
            projectDetailsFun(data){
                let this_ = this;
                if(this.projectDataSee == '1'){
                    this.lampIdChangeType = 'list';
                    this.projectInfoGX = false;
                    this.lampId = data.id;
                }else if(this.projectDataSee == '2'){
                    // console.log(data)
                    this.networkId = data.id;
                    baseApi.ajax_post(
                        allUrl.alarm.lampList,
                        {
                            username:this.username,
                            client_key:this.client_key,
                            token:this.token,
                            networkid:data.id,
                        },
                        {},
                        data =>{
                            // console.log(data)
                            this.networkLampList = data.data;
                            console.log(this_.networkLampList,'-----ssssssssssss--------')
                            if(data.data.length >0){
                                this.getProjectCompany(data.data[0].id,obj => {
                                    // console.log(obj)
                                    if(this.browserLanguage == 'bd'){
                                        this.mapGet('lamp',[obj.data.longitude,obj.data.latitude]);
                                    }else{
                                        this.mapGet_en('lamp',[obj.data.longitude,obj.data.latitude]);
                                    }
                                    
                                })
                            }else{
                                this.$message({
                                  showClose: true,
                                  message:'The network has no light control at present',
                                  type: 'warning'
                                });
                            }
                        },
                    this)
                }else if(this.projectDataSee == '3'){
                    this.faultInfo(data.id,data => {
                        this.detailsDetailsData = data.data;
                        if(this.detailsDetailsData.userid == '0'){
                            this.detailsDetailsData.userid = '';
                        }
                        this.detailsDetailsDialog = true;
                    })
                }else if(this.projectDataSee == '4'){
                    this.settingPacketDialog = true;
                    this.policyGroupinfo(data.id,data => {
                        this.settingPacketData = data.data;
                        if(this.settingPacketData.actiontype == '0'){
                            this.$set(this.settingPacketData,'value0',parseInt(this.settingPacketData.value))
                        }else{
                            this.$set(this.settingPacketData,'value0',0)
                        }
                        this.$set(this.settingPacketData,'value1',this.settingPacketData.value)
                        this.$set(this.settingPacketData,'value2',this.settingPacketData.value)
                    })
                }
                if(this.projectDataSee != '2'){
                    this.lamp_id = data.id;
                }
            },
            detailsDetailsKeydown(e){
                if(e.key == 'Enter'){
                    this.detailsDetailsKeep();
                }
            },
            detailsDetailsKeep(){
                if(this.detailsDetailsData.status == '1'){
                    this.loading.detailsDetailsKeep = true;
                    baseApi.ajax_post(
                        allUrl.alarm.alarmSet,
                        {
                            username:this.username,
                            client_key:this.client_key,
                            token:this.token,
                            ids:this.detailsDetailsData.alarmid,
                            status:'1',
                        },
                        {},
                        data =>{
                            this.$message({
                              showClose: true,
                              message:data.msg,
                              type: 'success'
                            });
                            this.dataList();
                            this.detailsDetailsDialog = false;
                            this.loading.detailsDetailsKeep = false;
                        },
                    this,() =>{
                        this.loading.detailsDetailsKeep = false;
                    })
                }else if(this.detailsDetailsData.status == '0'){
                    this.detailsDetailsDialog = false;
                    baseApi.ajax_post(
                        allUrl.gisMap.repairDispatch,
                        {
                            username:this.username,
                            client_key:this.client_key,
                            token:this.token,
                            alarmid:this.detailsDetailsData.alarmid,
                            userid:this.detailsDetailsData.userid,
                        },
                        {},
                        data =>{
                            // console.log(data,'维修调度回调')
                            this.$message({
                              showClose: true,
                              message:data.msg,
                              type: 'success'
                            });
                            this.dataList();
                            this.detailsDetailsDialog = false;
                            this.loading.detailsDetailsKeep = false;
                        },
                    this,() =>{
                        this.loading.detailsDetailsKeep = false;
                    })
                }
                
            },
            dataList(){
                let projectId;
                if(this.projectId == '0'){
                    projectId = this.projects_id;
                }else{
                    projectId = this.projectId
                }
                baseApi.ajax_post(
                    allUrl.gisMap.dataList,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        projectid:projectId,
                        type:this.projectDataSee,
                        keyword:this.keyword,
                    },
                    {},
                    data =>{
                        this.streetLampsList = data.data;
                    },
                this)
            },
            grouplist(value){
                baseApi.ajax_post(
                    allUrl.gisMap.grouplist,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        projectid:value,
                    },
                    {},
                    data =>{
                        // console.log(data,'分组数列表')
                        for(let d of data.data.list){
                            if(d.actiontype == '2'){
                                for(let dd of d.content.list){
                                    var text = '';
                                    if(text == ''){
                                        text = dd.date;
                                    }
                                    for(let ddd of dd.value){
                                        text += ' '+ddd;
                                    }
                                    dd.text = text;
                                }
                            }
                        }
                        this.$set(this,'groupingList',data.data.list);
                    },
                this)
            },
    //      monitorInfo(){
            turnonoff(value){
                if(this.streetLampList.length == 0){
                    this.$message({
                      showClose: true,
                      message:'The project has no light control at present',
                      type: 'warning'
                    });
                }else{
                    // console.log(this.projectData.company)
                    this.$confirm('Is it confirmed?', 'Prompt', {
                      confirmButtonText: 'confirm',
                      cancelButtonText: 'cancel',
                      type: 'warning'
                    }).then(() => {
                        this.turnonoffType = value;
                        this.loading.turnonoff = true;
                        baseApi.ajax_post(
                            allUrl.gisMap.turnonoff,
                            {
                                username:this.username,
                                client_key:this.client_key,
                                token:this.token,
                                projectid:this.projectId,
                                type:value,
                                mode:'0',
                            },
                            {},
                            data =>{
                                this.$message({
                                  showClose: true,
                                  message:data.msg,
                                  type: 'success'
                                });
                                this.turnonoffType = '-1';
                                this.loading.turnonoff = false;
                                if(this.browserLanguage == 'bd'){
                                    this.mapGet();
                                }else{
                                    this.mapGet_en();
                                }
                                
                                this.lampListGet(1);
                            },
                        this,
                        () =>{
                            this.turnonoffType = '-1';
                            this.loading.turnonoff = false;
                        })
                    }).catch(() => {
                      this.monitorId = '-1';
                      this.lampId = '-1';
                      this.$message({
                        type: 'info',
                        message: 'Canceled deleting'
                      });          
                    });
                }
            },
            _renderCluserMarker(context) {
              let div = document.createElement('div');
              div.style.backgroundColor = '#ffffff';
              div.style.height = '27px';
              div.style.width = (context.count.toString().length*8+20)+'px';
              div.style.borderRadius = '2px';
              div.style.boxShadow = '0 0 4px rgba(0, 0, 0, 0.2)';
              div.innerHTML = context.count;
              div.className = 'map_jh';
              div.style.lineHeight = '27px';
              div.style.color = '#222222';
              div.style.fontSize = '12px';
              div.style.textAlign = 'center';
              let divCY = document.createElement('div');
              divCY.className = 'map_CY';
              div.appendChild(divCY);
              context.marker.setOffset(new AMap.Pixel(-(context.count.toString().length*8+20)/2,-27/2));
              context.marker.setContent(div)
            },
            mapGet_en(type,XY,obj,isNew){
                let this_ = this;
                let isGet = true;
                if(obj){
                    isGet = false;
                    this.mapFun_en(this_,obj,true);
                }
                console.log(this_.mapEnIsTrue)
                if(isGet&&this_.mapEnIsTrue){
                    baseApi.ajax_post(
                    allUrl.gisMap.getLngLat,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        lampid:0,
                        projectid:this.projectId,
                    },
                    {},
                    data =>{
                        if(isNew){
                            /*创建地图*/    
                            this_.map = new google.maps.Map(document.getElementById('container'), {
                                center:{lat: 0, lng: 0},
                                zoom: 16,
                                disableDoubleClickZoom:true,
                                gestureHandling: 'greedy',
                                streetViewControl:false,
                                mapTypeControlOptions:{
                                  style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                                  position:google.maps.ControlPosition.RIGHT_BOTTOM
                                },
                                MapTypeControlStyle:'HORIZONTAL_BAR',
                                mapTypeId:google.maps.MapTypeId.ROADMAP,
                            });
                        }

                        let decrypt =  this_.bd_decrypt(data.data.longitude,data.data.latitude)
                        data.data.longitude = decrypt.lng;
                        data.data.latitude = decrypt.lat;
                        console.log(this_.map,isNew);
                        this_.map.setCenter(new google.maps.LatLng(Number(data.data.latitude),Number(data.data.longitude)));
                        mapGet_enFun(type,XY,obj,this_);
                        function mapGet_enFun(type,XY,obj,this_) {
                            let lampId = '';
                            if(type == 'lamp'){
                                // this_.map.setZoomAndCenter(18,XY)
                                this_.map.setZoom(18);
                                // console.log(XY)

                                XY  = [this_.bd_decrypt(XY[0],XY[1]).lng,this_.bd_decrypt(XY[0],XY[1]).lat];
                                this_.map.setCenter(new google.maps.LatLng(XY[1],XY[0]));
                                lampId = this_.lampId;
                            }else if(type != 'del'){
                                if(this_.streetLampType == 'list'){
                                    this_.lampIdChangeType = 'list';
                                    this_.lampId = '-1';
                                }
                            }
                            let mapTime = setTimeout(function(){
                                if(this_.map.getBounds()){
                                    if(this_.map.getBounds().b){
                                        // this_.$store.commit('setLoadingGetMap',{
                                        //  loadingGetMap:true,
                                        // })

                                        let encrypt_low = this_.bd_encrypt(this_.map.getSouthWest().lng(),this_.map.getSouthWest().lat())
                                        let encrypt_high = this_.bd_encrypt(this_.map.getNorthEast().lng(),this_.map.getNorthEast().lat())
                                        // console.log(this_.map.getNorthEast().lat(),this)
                                        baseApi.ajax_post(
                                            allUrl.gisMap.mapGet,
                                            {
                                                username:this_.username,
                                                client_key:this_.client_key,
                                                token:this_.token,
                                                project_id:this_.projectId,
                                                section:this_.roadId,
                                                type:this_.operationType,
                                                keyword:this_.keyword,
                                                lng_low:encrypt_low.bd_lng,
                                                lat_low:encrypt_low.bd_lat,
                                                lng_high:encrypt_high.bd_lng,
                                                lat_high:encrypt_high.bd_lat,
                                                multiple:this_.map.getZoom(),
                                                lampid:lampId,
                                            },
                                            {},
                                            data =>{
                                                this_.mapDataListHC = data.data.lamps;
                                                this_.mapFun_en(this_,data.data.lamps);
                                            },
                                        this_)
                                        clearTimeout(mapTime)
                                    }
                                }
                            },1)
                            google.maps.event.addListener(this_.map,"tilesloaded",function(){
                                let encrypt_low = this_.bd_encrypt(this.getBounds().getSouthWest().lng(),this.getBounds().getSouthWest().lat())
                                let encrypt_high = this_.bd_encrypt(this.getBounds().getNorthEast().lng(),this.getBounds().getNorthEast().lat())
                                baseApi.ajax_post(
                                    allUrl.gisMap.mapGet,
                                    {
                                        username:this_.username,
                                        client_key:this_.client_key,
                                        token:this_.token,
                                        project_id:this_.projectId,
                                        section:this_.roadId,
                                        type:this_.operationType,
                                        keyword:this_.keyword,
                                        lng_low:encrypt_low.bd_lng,
                                        lat_low:encrypt_low.bd_lat,
                                        lng_high:encrypt_high.bd_lng,
                                        lat_high:encrypt_high.bd_lat,
                                        multiple:this.getZoom(),
                                        lampid:lampId,
                                    },
                                    {},
                                    data =>{
                                        // console.log(data.data.lamps)
                                        this_.mapDataListHC = data.data.lamps;
                                        this_.mapFun_en(this_,data.data.lamps);
                                    },
                                this_)
                            });
                        }
                    },
                    this)
                }
            },
            mapFun_en(this_,data,isTrue){
                this_.cluster = null;
                this_.markers = [];
                this_.$nextTick(function(){
                    // console.log(data)
                    for(let d of this_.markersHC){
                        if(d.onRemove){
                            d.setMap(null)
                        }
                   }
                   for(let d of this_.markerListHC){
                        if(d.onRemove){
                            d.setMap(null);
                        }
                   }
                    this_.markersHC = [];
                    // console.log(this_.map,this_.marker)
                    this_.markerListHC = [];
                    let mapTCtype = this.map.getMapTypeId();
                    if(mapTCtype == 'roadmap'){
                        this_.mapTCtype = 'TileLayer'
                    }else{
                        this_.mapTCtype = 'Satellite'
                    }
                    for(let d of data){
                        if(!isTrue){
                            let decrypt =  this_.bd_decrypt(d.longitude,d.latitude);
                            d.longitude = decrypt.lng;
                            d.latitude = decrypt.lat;
                        }
                        if(d.is_lamp == 1){
                            let lampType = '';
                            let bgColor = '';
                            let borderColor = '';
                            if(d.lampstatus == '0'){
                                d.runningState = 'malfunction'
                                lampType = 'fault'
                                bgColor = '#ff0505';
                                borderColor = 'rgba(255, 5, 5, 0.14)';
                            }else{
                                d.runningState = 'malfunction'
                                if(d.netStatus == '0'){
                                    lampType = 'off-line';
                                    bgColor = '#7c7c7c';
                                    borderColor = 'rgba(167, 167, 167, 0.18)';
                                }else{
                                    if(d.status == '1'){
                                        lampType = 'on'
                                        bgColor = 'linear-gradient(#fc8440, #fe7121)';
                                        borderColor = 'rgba(253, 122, 48, 0.18)';
                                    }else{
                                        lampType = 'off'
                                        bgColor = '#ffb68d';
                                        borderColor = 'rgba(242, 223, 199, 0.18)';
                                    }
                                }
                            }
                            let lamp_icon;
                            if(this_.mapTCtype == 'TileLayer'){
                                lamp_icon = `<div style="text-align:center;background:${bgColor};background-clip:padding-box;border:2px solid #fff; height: 16px; width: 16px; border-radius:50%;" class="lamp lamp_${d.id} ${lampType}"></div>`
                            }else{
                                lamp_icon = `<div class="lamp lamp_${d.id} ${lampType} lamp_icon lamp_Satellite_${lampType}_${d.direction}"></div>`
                            }

                            this_.marker = new RichMarker({
                              position:new google.maps.LatLng(Number(d.latitude),Number(d.longitude)),
                              map: this_.map,

                              draggable: false,
                                content: `<div style="text-align:center;border:11px solid ${borderColor};border-radius:50%;cursor: pointer;" class="lamp lamp_${d.id} ${lampType} lamp_${this_.mapTCtype}">
                                        ${lamp_icon}
                                        <div class="map_lamp_info map_lamp_info_${d.id}">
                                        <div class="map_lamp_info_bg">
                                            <div class="top">
                                                <span>${'Lamp'+d.number}</span>
                                                <img src="${require('../img/GIS/wifi_'+d.netStatus+'.png')}" />
                                                <sapn class="right lamp_info_click ${d.id}" >${'More'}</span>
                                            </div>
                                            <div class="ul">
                                                <div class="li">
                                                    <span class="span1">Brightness</span>
                                                    <span class="span2">${d.light}%</span>
                                                </div>
                                                <div class="li">
                                                    <span class="span1">${'Voltage:'}</span>
                                                    <span class="span2">${d.lampvoltage}V</span>
                                                </div>
                                                <div class="li">
                                                    <span class="span1">${'Power:'}</span>
                                                    <span class="span2">${d.lamppower}W</span>
                                                </div>
                                                <div class="li">
                                                    <span class="span1">${'SN：'}</span>
                                                    <span class="span2">${d.address}</span>
                                                </div>
                                                <div class="li">
                                                    <span class="span1">${'Charge:'}</span>
                                                    <span class="span2">${this_.chargestageDataEN[d.chargestage]}</span>
                                                </div>
                                            </div>
                                            <div class="bottom">
                                                <span class="span1">${'Update time:'}</span>
                                                <span class="span2">${d.updatetime}</span>
                                            </div>
                                            <div class="icon"></div>
                                        </div>
                                    </div>
                                    </div>`,
                            })
                            google.maps.event.addListener(this_.marker,"click",function(e){
                                e = e || window.event;  
                                if(e.stopPropagation) { //W3C阻止冒泡方法  
                                    e.stopPropagation();  
                                } else {  
                                    e.cancelBubble = true; //IE阻止冒泡方法  
                                }
                                if(this_.lampEdit){
                                    let className = e.target.className.split(' ');
                                    if(className[0] == 'lamp'){
                                        this_.lampIdChangeType = 'map';
                                        if(this_.lampId != className[1].split('_')[1]){
                                            this_.lampId = className[1].split('_')[1]
                                        }else{
                                            this_.lampId = '-1'
                                        }
                                    }
                                }
                                // console.log(e,this.getPosition())
                            })
                            this_.markers.push(this_.marker)
                            this_.markersHC.push(this_.marker)
                        }else if(d.is_marker == 1){
                            // console.log(d,'----------')
                            let div = document.createElement('div');
                            div.style.backgroundColor = '#ffffff';
                            div.style.height = '27px';
                            div.style.width = (d.count.toString().length*8+20)+'px';
                            div.style.borderRadius = '2px';
                            div.style.boxShadow = '0 0 4px rgba(0, 0, 0, 0.2)';
                            div.innerHTML = d.count;
                            div.className = 'map_jh';
                            div.style.lineHeight = '27px';
                            div.style.color = '#222222';
                            div.style.fontSize = '12px';
                            div.style.textAlign = 'center';
                            let divCY = document.createElement('div');
                            divCY.className = 'map_CY';
                            div.appendChild(divCY);
                            this_.marker = new RichMarker({
                              position: new google.maps.LatLng(Number(d.latitude),Number(d.longitude)),
                              map: this_.map,
                              draggable: false,
                              content: div
                            });
                            google.maps.event.addListener(this_.marker,"click",function(e){
                                e = e || window.event;  
                                if(e.stopPropagation) { //W3C阻止冒泡方法  
                                    e.stopPropagation();  
                                } else {  
                                    e.cancelBubble = true; //IE阻止冒泡方法  
                                }
                                // console.log(e,this.getPosition())
                                this_.map.setZoom(this_.map.getZoom()+1);
                                this_.map.setCenter(new google.maps.LatLng(this.getPosition().lat(),this.getPosition().lng()));
                            })
                            this_.markerListHC.push(this_.marker)
                        }else if(d.is_video == 1){
                            this_.marker = new RichMarker({
                              position:new google.maps.LatLng(Number(d.latitude),Number(d.longitude)),
                              map: this_.map,
                              draggable: false,
                              content:'<div style="text-align:center;border:11px solid rgba(49, 180, 253, 0.18); border-radius:50%;cursor:pointer;" class="monitor monitor_'+d.id+' '+d.latitude+' '+d.longitude+' '+d.image+'"><div style="text-align:center;background:#31b4fd;background-clip: padding-box;border:2px solid #fff; height: 16px; width: 16px; border-radius:50%;" class="monitor monitor_'+d.id+' '+d.latitude+' '+d.longitude+' '+d.image+'"></div></div>'
                            })
                            google.maps.event.addListener(this_.marker,"click",function(e){
                                e = e || window.event;  
                                if(e.stopPropagation) { //W3C阻止冒泡方法  
                                    e.stopPropagation();  
                                } else {  
                                    e.cancelBubble = true; //IE阻止冒泡方法  
                                }
                                if(this_.lampEdit){
                                    let className = e.target.className.split(' ');
                                    if(className[0] == 'monitor'){
                                        // this_.lampIdChangeType = 'map';
                                        this_.monitorIsDialog = true;
                                        // console.log('----------------------')
                                        if(this_.monitorId != className[1].split('_')[1]){
                                            this_.monitorId = className[1].split('_')[1]
                                        }else{
                                            this_.monitorId = '-1'
                                        }
                                    }
                                }
                            })
                            this_.markers.push(this_.marker)
                            this_.markersHC.push(this_.marker)
                        }
                    }
                    clearInterval(this_.intervalMap)
                    this_.intervalMap = setInterval(function(){
                        if(this_.networkLampList.length > 0){
                            for(let d of this_.networkLampList){
                                $('.lamp_'+d.id).addClass("Lamp_active");
                            }
                            if($('.lamp_'+this_.networkLampList[0].id).length>0){
                                clearInterval(this_.intervalMap)
                            }
                        }else if($('.lamp_'+this_.lampId).length>0){
                            $('.lamp').removeClass("Lamp_active");
                            $('.monitor').removeClass("monitor_active");
                            $('.lamp_'+this_.lampId).addClass("Lamp_active");
                            clearInterval(this_.intervalMap)
                        }else{
                            setTimeout(function(){
                                if($('.amap-marker').length>0){
                                    clearInterval(this_.intervalMap)
                                }
                            },500)
                        }
                        setTimeout(function(){
                            if($('.amap-markers').children().length == 0){
                                clearInterval(this_.intervalMap)
                            }
                        },1000)
                        if(!this_.lampEdit){
                            this_.lamp_editFun();
                        }
                    },1)
                });
            },
            mapGet(type,XY,obj,isNew){
                let this_ = this;
                let isGet = true;
                if(obj){
                    isGet = false;
                    this.mapFun(this_,obj,true);
                }
                if(isGet){
                    baseApi.ajax_post(
                    allUrl.gisMap.getLngLat,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        lampid:0,
                        projectid:this.projectId,
                        section:this.roadId,
                    },
                    {},
                    data =>{
                        // if(data.data.longitude == 0 && data.data.latitude == 0){
                        //  /*创建地图*/
                        //  this_.map = new AMap.Map("container", {
                           //      resizeEnable: true,
                           //      zooms:[0,20],
                           //      zoom: 16,
                           //  });
                        // }else{
                        if(isNew){
                            let decrypt =  this.bd_decrypt(data.data.longitude,data.data.latitude)
                            data.data.longitude = decrypt.lng;
                            data.data.latitude = decrypt.lat;
                            // console.log(data.data.longitude,data.data.latitude,'===========')
                            /*创建地图*/
                            this.map = new AMap.Map("container", {
                                resizeEnable: true,
                                center:[data.data.longitude,data.data.latitude],
                                zooms:[0,20],
                                zoom: 16,
                            });
                            // }
                            this.map.setFeatures(['road','bg','point']); // 多个种类要素显示 bg区域面/point兴趣点/road道路及道路标注/
                            // this.map.setMapStyle('amap://styles/macaron');
                            // console.log(this.map.getFeatures(),'--------------')
                            var homeControl=new AMap.mapSwitch(this.map); //新建自定义插件对象
                            this.map.addControl(homeControl);
                            // this_.map.setLang(Lang);
                            console.log(type,XY,'--123---')
                            AMap.plugin([
                                // 'AMap.MapType',
                                'AMap.ToolBar',
                            ], function(){
                                // this_.map.addControl(new AMap.MapType({

                                // }));
                                this_.map.addControl(new AMap.ToolBar({
                                    liteStyle:true
                                }));
                            })
                        }
                        let lampId = '';
                        if(type == 'lamp'){
                            XY  = [this.bd_decrypt(XY[0],XY[1]).lng,this.bd_decrypt(XY[0],XY[1]).lat];
                            this_.map.setZoomAndCenter(17,XY)
                            lampId = this_.lampId;
                        }else{
                            if(this_.streetLampType == 'list'){
                                this_.lampIdChangeType = 'list';
                                this_.lampId = '-1';
                            }
                        }
                        this.$nextTick(function(){
                            // this.$store.commit('setLoadingGetMap',{
                   //           loadingGetMap:true,
                   //       })
                            let encrypt_low = this.bd_encrypt(this.map.getBounds().southwest.lng,this.map.getBounds().southwest.lat)
                            let encrypt_high = this.bd_encrypt(this.map.getBounds().northeast.lng,this.map.getBounds().northeast.lat)

                            baseApi.ajax_post(
                                allUrl.gisMap.mapGet,
                                {
                                    username:this.username,
                                    client_key:this.client_key,
                                    token:this.token,
                                    project_id:this.projectId,
                                    section:this.roadId,
                                    type:this.operationType,
                                    keyword:this.keyword,
                                    lng_low:encrypt_low.bd_lng,
                                    lat_low:encrypt_low.bd_lat,
                                    lng_high:encrypt_high.bd_lng,
                                    lat_high:encrypt_high.bd_lat,
                                    multiple:this.map.getZoom(),
                                    lampid:lampId,
                                },
                                {},
                                data =>{
                                    this.mapDataListHC = data.data.lamps;
                                    this.mapFun(this_,data.data.lamps);
                                },
                            this)
                            this_.map.on('dragend', function() {
                                clearTimeout(this_.timeoutMap)
                                this_.timeoutMap = setTimeout(function(){
                                    let encrypt_low = this_.bd_encrypt(this_.map.getBounds().southwest.lng,this_.map.getBounds().southwest.lat)
                                    let encrypt_high = this_.bd_encrypt(this_.map.getBounds().northeast.lng,this_.map.getBounds().northeast.lat)

                                    this_.cluster.clearMarkers();
                                    baseApi.ajax_post(
                                        allUrl.gisMap.mapGet,
                                        {
                                            username:this_.username,
                                            client_key:this_.client_key,
                                            token:this_.token,
                                            project_id:this_.projectId,
                                            section:this_.roadId,
                                            type:this_.operationType,
                                            keyword:this_.keyword,
                                            lng_low:encrypt_low.bd_lng,
                                            lat_low:encrypt_low.bd_lat,
                                            lng_high:encrypt_high.bd_lng,
                                            lat_high:encrypt_high.bd_lat,
                                            multiple:this_.map.getZoom(),
                                            lampid:lampId,
                                        },
                                        {},
                                        data =>{
                                            this_.mapDataListHC = data.data.lamps;
                                            this_.mapFun(this_,data.data.lamps);
                                        },
                                    this_)
                                },800)
                            })
                            this_.map.on('zoomchange', function() {
                                clearTimeout(this_.timeoutMap)
                                console.log(this_.map.getZoom(),'-z-------')
                                this_.timeoutMap = setTimeout(function(){
                                    // this_.$store.commit('setLoadingGetMap',{
                                    //  loadingGetMap:true,
                                    // })

                                    let encrypt_low = this_.bd_encrypt(this_.map.getBounds().southwest.lng,this_.map.getBounds().southwest.lat)
                                    let encrypt_high = this_.bd_encrypt(this_.map.getBounds().northeast.lng,this_.map.getBounds().northeast.lat)

                                    this_.cluster.clearMarkers();
                                    baseApi.ajax_post(
                                        allUrl.gisMap.mapGet,
                                        {
                                            username:this_.username,
                                            client_key:this_.client_key,
                                            token:this_.token,
                                            project_id:this_.projectId,
                                            section:this_.roadId,
                                            type:this_.operationType,
                                            keyword:this_.keyword,
                                            lng_low:encrypt_low.bd_lng,
                                            lat_low:encrypt_low.bd_lat,
                                            lng_high:encrypt_high.bd_lng,
                                            lat_high:encrypt_high.bd_lat,
                                            multiple:this_.map.getZoom(),
                                            lampid:lampId,
                                        },
                                        {},
                                        data =>{
                                            this_.mapDataListHC = data.data.lamps;
                                            this_.mapFun(this_,data.data.lamps);
                                        },
                                    this_)
                                },800)
                            });
                        })
                    },
                    this)
                }
            },
            mapFun(this_,data,isTrue){
                this_.cluster = null;
                this_.markers = [];
                this_.$nextTick(function(){
                    this_.map.remove(this_.markerListHC)
                    // this_.map.clearMap()
                    this_.markerListHC = [];
                    for(let d of data){
                        if(!isTrue){
                            let decrypt =  this_.bd_decrypt(d.longitude,d.latitude);
                            d.longitude = decrypt.lng;
                            d.latitude = decrypt.lat;
                        }

                        if((!this_.lampEdit && d.id != this_.lampId) || this_.lampEdit){
                            if(d.is_lamp == 1){
                                let lampType = '';
                                let bgColor = '';
                                let borderColor = '';
                                if(d.lampstatus == '0'){
                                    d.runningState = '故障';
                                    if(this_.browserLanguage == 'google'){
                                        d.runningState = 'malfunction'
                                    }
                                    lampType = 'fault'
                                    bgColor = '#ff0505';
                                    borderColor = 'rgba(255, 5, 5, 0.14)';
                                }else{
                                    d.runningState = '正常'
                                    if(this_.browserLanguage == 'google'){
                                        d.runningState = 'malfunction'
                                    }
                                    if(d.netStatus == '0'){
                                        lampType = 'off-line';
                                        bgColor = '#7c7c7c';
                                        borderColor = 'rgba(167, 167, 167, 0.18)';
                                    }else{
                                        if(d.status == '1'){
                                            lampType = 'on'
                                            bgColor = 'linear-gradient(#fc8440, #fe7121)';
                                            borderColor = 'rgba(253, 122, 48, 0.18)';
                                        }else{
                                            lampType = 'off'
                                            bgColor = '#ffb68d';
                                            borderColor = 'rgba(242, 223, 199, 0.18)';
                                        }
                                    }
                                }
                                let lamp_icon;
                                if(this_.mapTCtype == 'TileLayer'){
                                    lamp_icon = `<div style="text-align:center;background:${bgColor};background-clip:padding-box;border:2px solid #fff; height: 16px; width: 16px; border-radius:50%;" class="lamp lamp_${d.id} ${lampType}"></div>`
                                }else{
                                    lamp_icon = `<div class="lamp lamp_${d.id} ${lampType} lamp_icon lamp_Satellite_${lampType}_${d.direction}"></div>`
                                }
                                

                                this_.markers.push(new AMap.Marker({
                                    position:[d.longitude,d.latitude],
                                    content: `<div style="text-align:center;border:11px solid ${borderColor};border-radius:50%;" class="lamp lamp_${d.id} ${lampType} lamp_${this_.mapTCtype}">
                                            ${lamp_icon}
                                            <div class="map_lamp_info map_lamp_info_${d.id}">
                                            <div class="map_lamp_info_bg">
                                                <div class="top">
                                                    <span>${'路灯'+d.number}</span>
                                                    <img src="${require('../img/GIS/wifi_'+d.netStatus+'.png')}" />
                                                    <sapn class="right lamp_info_click ${d.id}" >${'更多'}</span>
                                                </div>
                                                <div class="ul">
                                                    <div class="li">
                                                        <span class="span1">${'亮度：'}</span>
                                                        <span class="span2">${d.light}%</span>
                                                    </div>
                                                    <div class="li">
                                                        <span class="span1">${'电压：'}</span>
                                                        <span class="span2">${d.lampvoltage}V</span>
                                                    </div>
                                                    <div class="li">
                                                        <span class="span1">${'功率：'}</span>
                                                        <span class="span2">${d.lamppower}W</span>
                                                    </div>
                                                    <div class="li">
                                                        <span class="span1">${'SN：'}</span>
                                                        <span class="span2">${d.address}</span>
                                                    </div>
                                                    <div class="li">
                                                        <span class="span1">${'充电：'}</span>
                                                        <span class="span2">${this_.chargestageData[d.chargestage]}</span>
                                                    </div>
                                                </div>
                                                <div class="bottom">
                                                    <span class="span1">${'更新时间：'}</span>
                                                    <span class="span2">${d.updatetime}</span>
                                                </div>
                                                <div class="icon"></div>
                                            </div>
                                        </div>
                                        </div>`,
                                    offset: new AMap.Pixel(-19,-19),
                                    extData:d.id+d.number,
                                }))
                            }else if(d.is_marker == 1){
                                // console.log(d,'----------')
                                let div = document.createElement('div');
                                div.style.backgroundColor = '#ffffff';
                                div.style.height = '27px';
                                div.style.width = (d.count.toString().length*8+20)+'px';
                                div.style.borderRadius = '2px';
                                div.style.boxShadow = '0 0 4px rgba(0, 0, 0, 0.2)';
                                div.innerHTML = d.count;
                                div.className = 'map_jh';
                                div.style.lineHeight = '27px';
                                div.style.color = '#222222';
                                div.style.fontSize = '12px';
                                div.style.textAlign = 'center';
                                let divCY = document.createElement('div');
                                divCY.className = 'map_CY';
                                div.appendChild(divCY);
                                var marker = new AMap.Marker({
                                    content: div,  // 自定义点标记覆盖物内容
                                    position:[d.longitude, d.latitude], // 基点位置
                                    offset:new AMap.Pixel(-(d.count.toString().length*8+20)/2,-27/2) // 相对于基点的偏移位置
                                });
                                marker.on('click',function(e){
                                    // console.log(e)
                                    this_.map.setZoomAndCenter(this_.map.getZoom()+1, [e.lnglat.lng,e.lnglat.lat]);
                                })
                                this_.map.add(marker);
                                this_.markerListHC.push(marker)
                            }else if(d.is_video == 1){
                                this_.markers.push(new AMap.Marker({
                                  position:[d.longitude,d.latitude],
                                  content:'<div style="text-align:center;border:11px solid rgba(49, 180, 253, 0.18); border-radius:50%;cursor:pointer;" class="monitor monitor_'+d.id+' '+d.latitude+' '+d.longitude+' '+d.image+'"><div style="text-align:center;background:#31b4fd;background-clip: padding-box;border:2px solid #fff; height: 16px; width: 16px; border-radius:50%;" class="monitor monitor_'+d.id+' '+d.latitude+' '+d.longitude+' '+d.image+'"></div></div>',
                                    offset: new AMap.Pixel(-19,-19),
                                    extData:d.id+d.number,
                                }))
                            }
                        }
                    }
                    clearInterval(this_.intervalMap)
                    this_.intervalMap = setInterval(function(){
                        if(this_.networkLampList.length > 0){
                            for(let d of this_.networkLampList){
                                $('.lamp_'+d.id).addClass("Lamp_active");
                            }
                            if($('.lamp_'+this_.networkLampList[0].id).length>0){
                                clearInterval(this_.intervalMap)
                            }
                        }else if($('.lamp_'+this_.lampId).length>0){
                            $('.lamp').removeClass("Lamp_active");
                            $('.monitor').removeClass("monitor_active");
                            $('.lamp_'+this_.lampId).addClass("Lamp_active");
                            clearInterval(this_.intervalMap)
                        }else{
                            setTimeout(function(){
                                if($('.amap-marker').length>0){
                                    clearInterval(this_.intervalMap)
                                }
                            },500)
                        }
                        setTimeout(function(){
                            if($('.amap-markers').children().length == 0){
                                clearInterval(this_.intervalMap)
                            }
                        },1000)
                        if(!this_.lampEdit){
                            this_.lamp_editFun();
                        }
                    },1)
                    if(this_.map.getZoom() > 16){
                        this_.cluster = new AMap.MarkerClusterer(this_.map,this_.markers,{
                            gridSize:52,
                            minClusterSize:2,
                            maxZoom:2,
                            renderCluserMarker:this_._renderCluserMarker
                        });
                    }else{
                        let number = parseInt(this_.markers.length)
                        this_.cluster = new AMap.MarkerClusterer(this_.map,this_.markers,{
                            gridSize:52,
                            minClusterSize:2,
                            maxZoom:number*100,
                            renderCluserMarker:this_._renderCluserMarker
                        });
                    }
                });
            },
            videoListGet(callback){
                baseApi.ajax_post(
                    allUrl.gisMap.videoList,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        project_id:this.projectId,
                        keyword:this.keyword,
                    },
                    {},
                    data =>{
                        callback(data)
                    },
                this)
            },
            rightSideBarIsOn(){
                if(this.lampEdit){
                    if(this.rightSideBarType == 'on'){
                        this.rightSideBarType = 'off';
                    }else{
                        this.rightSideBarType = 'on';
                    }
                }
            },
            sideBarNavFun(type){
                this.sideBarNav = type;
            },
            streetLampFun(data){
                // console.log(data)
                this.lampData = data;
                this.streetLamp = data;
                if(this.streetLamp.loadtype == '0'){
                    this.sideBarNavList = [{label:'路灯信息',key:'0'},{key:'1',label:'项目信息'},{key:'2',label:'监控信息'}];
                    this.sideBarNavListEN = [{label:'Lamp',key:'0'},{key:'1',label:'Project'},{key:'2',label:'Monitoring'}];
                }else{
                    this.sideBarNavList = [{label:'捕虫器设备信息',key:'0'},{key:'1',label:'项目信息'},{key:'2',label:'监控信息'}];
                    this.sideBarNavListEN = [{label:'Catcher information',key:'0'},{key:'1',label:'Project'},{key:'2',label:'Monitoring'}];
                }
                this.streetLamp.lighteness = this.streetLamp.lighteness?parseInt(this.streetLamp.lighteness):0;
                this.lampIdChangeType = 'list';
                this.lampId = data.id;
            },
            projectFun(){
                this.projectDataLoading = true;
                this.projectsIdChangeType = 'list';
            },
            projectDataSeeFun(value){
                if(this.projectDataSee == value){
                    this.projectDataSee = '-1';
                }else{
                    this.projectDataSee = value;
                    if(this.projectDataSee != '4' && this.projectDataSee != '-1'){
                        this.dataList();
                    }
                    if(this.projectDataSee == '4'){
                        this.grouplist(this.projects_id);
                    }
                }
            },
            //123
            //鼠标移入移除显示隐藏控制icon
            showControlIcons(){
                this.isHideControlIconsFlag=false;
            },
            //鼠标移出隐藏控制icon
            hideControlIcons(){
                this.isHideControlIconsFlag=true;
                this.isShowIconWrap='';
            },
            activeAction(derection){
                this.isShowIconWrap=derection;
            },
            blurAction(){
                this.isShowIconWrap='';
            },

            //云台控制
            clickControlDirection(direction){
                if(!this.canControlFlag){
                    return;
                }
                this.starControlVideo(direction);
                this.canControlFlag=false;
            },

            stopControlVideo(direction){
                const _this = this;
                baseApi.ajax_post(
                    allUrl.video.stopVideoControl,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        accessToken:this.videoData.accessToken,
                        deviceSerial:this.videoData.devid,
                        channelNo:this.videoData.channel,
                        direction:direction,
                    },
                    {},
                    () =>{
                        _this.canControlFlag=true;
                    },
                this)
            },

            starControlVideo(direction){
                const _this = this;
                baseApi.ajax_post(
                    allUrl.video.starVideoControl,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        accessToken:this.videoData.accessToken,
                        deviceSerial:this.videoData.devid,
                        channelNo:this.videoData.channel,
                        direction:direction,
                        speed:1
                    },
                    {},
                    () =>{
                        // console.log("star"+direction)
                        setTimeout(function(){
                            _this.stopControlVideo(direction)
                        },1000)
                    },
                this)
            },
            getVideoData(){
                baseApi.ajax_post(
                    allUrl.video.videoInfo,
                    {
                        username:this.username,
                        client_key:this.client_key,
                        token:this.token,
                        id:this.monitorId,
                    },
                    {},
                    data =>{
                        let this_ = this;
                        this.videoData=data.data
                        setTimeout(function(){
                            let source=`<video ref="myPlayer" id="myPlayer" controls autoplay playsInline webkit-playsinline poster="">
                                            <source src="${this_.videoData.rtmp}" type="rtmp/flv" />
                                        </video>`;
                            document.getElementById('myPlayer').innerHTML=source
                            let player = new ezuikit('myPlayer');
                            console.log(player)
                        },100)
                    },
                this)
            },

            //切换高清、标清
            switchUrl(flag){
                const this_=this;
                this_.definition=flag;
                if(flag==0){
                    this_.definitionBtnText='SD';
                    //标清
                    setTimeout(function(){
                        let source=`<video ref="myPlayer" id="myPlayer" controls autoplay playsInline webkit-playsinline poster="">
                                        <source src="${this_.videoData.rtmp}" type="rtmp/flv" />
                                    </video>`;
                        document.getElementById('myPlayer').innerHTML=source
                        let player = new ezuikit('myPlayer');
                        console.log(player)
                    },100)
                }else{
                    this_.definitionBtnText='HD';
                    // 高清
                    setTimeout(function(){
                        let source=`<video ref="myPlayer" id="myPlayer" controls autoplay playsInline webkit-playsinline poster="">
                                        <source src="${this_.videoData.rtmpHD}" type="rtmp/flv" />
                                    </video>`;
                        document.getElementById('myPlayer').innerHTML=source
                        let player = new ezuikit('myPlayer');
                        console.log(player)
                    },100)
                }   

            },
            routerLink(type){
                window.open('#/'+type);
            },
            //百度坐标转高德（传入经度、纬度）
            bd_decrypt(bd_lng, bd_lat) {
                var X_PI = Math.PI * 3000.0 / 180.0;
                var x = bd_lng - 0.0065;
                var y = bd_lat - 0.006;
                var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
                var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
                var gg_lng = z * Math.cos(theta);
                var gg_lat = z * Math.sin(theta);
                return {lng: gg_lng, lat: gg_lat}
            },
            //高德坐标转百度（传入经度、纬度）
            bd_encrypt(gg_lng, gg_lat) {
                var X_PI = Math.PI * 3000.0 / 180.0;
                var x = gg_lng, y = gg_lat;
                var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
                var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
                var bd_lng = z * Math.cos(theta) + 0.0065;
                var bd_lat = z * Math.sin(theta) + 0.006;
                return {
                    bd_lat: bd_lat,
                    bd_lng: bd_lng
                };
            },
            maplampListDW(){
                let this_ = this;
                let isTrue = false,longitude,latitude;
                let x = 0;
                this.videoListGet(data=>{
                    if(data.data.list.length > 0){
                        isTrue = true;
                        longitude = data.data.list[0].longitude;
                        latitude = data.data.list[0].latitude;
                    }
                    x++;
                    if(x==2){
                        fun(isTrue,this_);
                    }
                })
                this.lampListGet(1,data=>{
                    console.log(data.data.lamps.length)
                    if(data.data.lamps.length > 0){
                        isTrue = true;
                        longitude = data.data.lamps[0].longitude;
                        latitude = data.data.lamps[0].latitude;
                    }
                    x++;
                    if(x==2){
                        fun(isTrue,this_);
                    }
                });
                function fun(isTrue,this_){
                    console.log(isTrue,longitude,latitude)
                    if(isTrue){
                        if(this_.browserLanguage == 'bd'){
                            this_.mapGet('lamp',[longitude,latitude]);
                        }else{
                            this_.mapGet_en('lamp',[longitude,latitude]);
                        }
                        
                    }else{
                        if(this_.browserLanguage == 'bd'){
                            this_.mapGet();
                        }else{
                            this_.mapGet_en();
                        }
                        
                    }
                }
                this.dateNav();
            }
        },
        watch:{
            projectId(curVal){
                // this.projectInfo(curVal);
                if(curVal != 0){
                    this.projectType = 'data';
                }else{
                    this.projectType = 'list';
                }
                this.lampId = '-1';
                if(this.projectsIdChangeType == 'list'){
                    this.streetLampType = 'list';
                }
                this.maplampListDW();
            },
            lampType(curVal){
                if(curVal == 'monitor'){
                    this.lmText = 'monitor'
                }else{
                    this.lmText = 'lamp'
                }
            },
            surveillanceVideoDialog(curVal){
                if(!curVal){
                    this.monitorId = -1;
                }
            },
            monitorId(curVal){
                if(curVal != '-1'){
                    if(this.monitorIsDialog){
                        this.surveillanceVideoDialog=true;
                        this.getVideoData();
                    }
                }
            },
            lampId(curVal){
                let this_ = this;
                this.slider = '0';
                if(curVal == '-1'){
                    $('.lamp').removeClass("Lamp_active");
                    $('.monitor').removeClass("monitor_active");
                    this.streetLampType = 'list';
                    if(this.projectId == 0){
                        this.projectType = 'list';
                        // this.projectInfo(0);
                    }
                    this.lampDialogShow = false;
                }else{
                    this.lampInfoGet(curVal);
                    // this.sideBarNav = '路灯信息';
                    $('.lamp').removeClass("Lamp_active");
                    $('.monitor').removeClass("monitor_active");
                    $('.lamp_'+curVal).addClass("Lamp_active");
                    this.networkLampList = [];
                    this.networkId = '';
                    this.getProjectCompany(curVal,data => {
                        if(this.lampIdChangeType != 'list'){
                            let decrypt =  this_.bd_decrypt(data.data.longitude,data.data.latitude);
                            data.data.longitude = decrypt.lng;
                            data.data.latitude = decrypt.lat;
                        }
                        if(this.lampEdit){
                            this.projectsIdChangeType = 'map';
                            // this.lampInfo(curVal,data=>{
                   //           this.streetLamp = data.data;
                   //           if(this.streetLamp.loadtype == '0'){
                      //            this.sideBarNavList = [{label:'路灯信息',key:'0'},{key:'1',label:'项目信息'},{key:'2',label:'监控信息'}];
                      //            this.sideBarNavListEN = [{label:'Lamp',key:'0'},{key:'1',label:'Project'},{key:'2',label:'Monitoring'}];
                   //           }else{
                      //            this.sideBarNavList = [{label:'捕虫器设备信息',key:'0'},{key:'1',label:'项目信息'},{key:'2',label:'监控信息'}];
                      //            this.sideBarNavListEN = [{label:'Catcher information',key:'0'},{key:'1',label:'Project'},{key:'2',label:'Monitoring'}];
                   //           }
                   //           this.streetLamp.lighteness = this.streetLamp.lighteness?parseInt(this.streetLamp.lighteness):0;
                            // })
                    //      if(data.data.projectid == this.projectType){
                                // this.projectInfo('-1',curVal);
                    //      }else{
                                // this.projectInfo(data.data.projectid);
                    //      }
                            this.streetLampType = 'data';
                            this.projectType = 'data';
                            // this.monitorInfo();
                            this.lampLongitude = data.data.longitude;
                            this.lampLatitude = data.data.latitude;
                            this.rightSideBarType = 'on';
                //              if(document.getElementsByClassName('right_sidebar')[0]){
                            //  document.getElementsByClassName('right_sidebar')[0].setAttribute('style', 'width: 46% ;transition:all 0.6s;');
                            // }
                            // console.log(this.lampIdChangeType)
                            if(this.lampIdChangeType == 'list'){
                                if(this.browserLanguage == 'bd'){
                                    this.mapGet('lamp',[data.data.longitude,data.data.latitude]);
                                }else{
                                    this.mapGet_en('lamp',[data.data.longitude,data.data.latitude]);
                                }
                                
                            }else{
                                if(this.map){
                                    if(this.browserLanguage == 'bd'){
                                        this.map.panTo([data.data.longitude,data.data.latitude]);
                                    }else{
                                        if(data.data.longitude == 0&&data.data.latitude == 0){
                                            this.map.setCenter(new google.maps.LatLng(0, 0));
                                        }else if(data.data.longitude == 0&&data.data.latitude != 0){
                                            this.map.setCenter(new google.maps.LatLng(Number(data.data.latitude),0));
                                        }else if(data.data.longitude != 0&&data.data.latitude == 0){
                                            this.map.setCenter(new google.maps.LatLng(0,Number(data.data.longitude)));
                                        }else{
                                            this.map.setCenter(new google.maps.LatLng(Number(data.data.latitude),Number(data.data.longitude)));
                                        }
                                    }
                                }
                            }
                        }
                    });
                }
            }
        }
    }
</script>
<style type="text/css" lang="less">
    .gm-control-active.gm-fullscreen-control{
        display: none;
    }
    /*高德地图标记*/
    .amap-marker-content{
        .lamp_TileLayer{
            &.Lamp_active{
                // transform: translate(-5px, -5px);
                position: relative;
                top: -5px;
                left: -5px;
                >.lamp{
                    width: 26px !important;
                    height: 26px !important;
                    position: relative;
                    top: 0px;
                    left: 0px;
                }
                >.map_lamp_info{
                    top: -155px;left: -160px;
                }
            }
        }
    }

    .lamp_Satellite{
        border: none !important;
        cursor: pointer;
        .lamp_icon{
            width: 42px;height: 42px;
            background-size: 100% 100%;
            background-position: 0 0;
        }
        .lamp_Satellite_off_0{
            background-image: url('../img/GIS/lamp_type/lamp_night_off_0.png');
        }
        .lamp_Satellite_off_1{
            background-image: url('../img/GIS/lamp_type/lamp_night_off_1.png');
        }
        .lamp_Satellite_off_2{
            background-image: url('../img/GIS/lamp_type/lamp_night_off_2.png');
        }
        .lamp_Satellite_off_3{
            background-image: url('../img/GIS/lamp_type/lamp_night_off_3.png');
        }

        .lamp_Satellite_on_0{
            background-image: url('../img/GIS/lamp_type/lamp_night_on_0.png');
        }
        .lamp_Satellite_on_1{
            background-image: url('../img/GIS/lamp_type/lamp_night_on_1.png');
        }
        .lamp_Satellite_on_2{
            background-image: url('../img/GIS/lamp_type/lamp_night_on_2.png');
        }
        .lamp_Satellite_on_3{
            background-image: url('../img/GIS/lamp_type/lamp_night_on_3.png');
        }

        .lamp_Satellite_off-line_0{
            background-image: url('../img/GIS/lamp_type/lamp_night_off-line_0.png');
        }
        .lamp_Satellite_off-line_1{
            background-image: url('../img/GIS/lamp_type/lamp_night_off-line_1.png');
        }
        .lamp_Satellite_off-line_2{
            background-image: url('../img/GIS/lamp_type/lamp_night_off-line_2.png');
        }
        .lamp_Satellite_off-line_3{
            background-image: url('../img/GIS/lamp_type/lamp_night_off-line_3.png');
        }

        .lamp_Satellite_fault_0{
            background-image: url('../img/GIS/lamp_type/lamp_night_fault_0.png');
        }
        .lamp_Satellite_fault_1{
            background-image: url('../img/GIS/lamp_type/lamp_night_fault_1.png');
        }
        .lamp_Satellite_fault_2{
            background-image: url('../img/GIS/lamp_type/lamp_night_fault_2.png');
        }
        .lamp_Satellite_fault_3{
            background-image: url('../img/GIS/lamp_type/lamp_night_fault_3.png');
        }
    }

    /*历史弹框*/
    .history_box{
        .el-dialog__body{
            padding:0px;
        }
        .wrap{
            position: relative;
            height: 600px;
            display: flex;
            .main_list{
                width: 200px;
                // display: flex;
                box-sizing: border-box;
                border-right: 2px solid rgba(240, 240, 240, 1);
                .main_list_title{
                    height: 48px;
                    line-height: 48px;
                    font-size:14px;
                    font-family:PingFangSC-Semibold;
                    font-weight:600;
                    color:rgba(34,34,34,1);
                    padding-left:23px;
                    border-bottom: 1px solid rgba(240, 240, 240, 1);
                }
                .main_list_box{
                    height: calc(100% - 50px);
                    display: flex;
                    &.EN{
                        .nav_list{
                            padding-left: 10px;
                            span{
                                display: inline-block;
                                max-width: 100%;
                                line-height: 12px;
                                vertical-align: middle; // 行内垂直平行
                            }
                        }
                    }
                }
                .lamp_list{
                    text-align: center;
                    height: calc(100%);
                    overflow: auto;
                    box-sizing: border-box;
                    width: 100px;
                    border-right: 2px solid rgba(240, 240, 240, 1);
                    .li{
                        height:49px;
                        line-height: 49px;

                        font-size:14px;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(102,102,102,1);
                        cursor: pointer;
                        &.select{
                            font-family:PingFangSC-Semibold;
                            font-weight:600;
                            color:rgba(254,119,43,1);
                            background:rgba(253,124,51,0.1);
                        }
                    }
                }
                .historicalnav{
                    box-sizing: border-box;
                    background-color:rgba(248, 248, 248, 1);
                    width: 100px;
                }
                .nav_list{
                    padding-left: 20px;
                    height: 50px;
                    line-height: 50px;
                    border-bottom: 1px solid rgba(240, 240, 240, 1);
                    // background-color:rgba(255, 255, 255, 1);
                    cursor: pointer;
                    span{
                        display: inline-block;
                        max-width: 80px;

                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                    }
                }
                .details_nav_select{
                    color: rgba(255, 117, 39, 1);
                }
            }
            .main_box{
                width: calc(100% - 240px);
                padding: 24px 20px 0 20px;
                .screen_box{
                    height: 32px;
                    line-height: 32px;
                    margin-bottom: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    >div{
                        display: flex;
                    }
                    .el-pager{
                        padding-top: 5px;
                        li{
                            height: 22px;
                            line-height: 22px;
                            &.active {
                                color: #fff;
                                background: #fc8440;
                                border-radius: 20px;
                            }
                        }
                    }
                    .el-pagination{
                        font-weight: normal;
                    }
                    .el-select .el-input.is-focus .el-input__inner{
                        border-color: #fc8440;
                    }
                    .el-input.is-active .el-input__inner, .el-input__inner:focus{
                        border-color: #fc8440;
                    }
                    .el-pagination button, .el-pagination span:not([class*=suffix]){
                        height: 32px;
                        line-height: 32px;
                    }
                    .el-pagination__editor{
                        height: 32px;
                        line-height: 32px;
                    }
                    .el-pagination__editor.el-input .el-input__inner{
                        height: 22px;
                    }
                    .el-pager .more::before{
                        line-height: 22px;
                    }
                }
                .screen_date{
                    border-radius: 20px;
                    border:1px solid #DCDFE6;
                    overflow: hidden;
                    margin-right: 20px;
                    .el-date-editor{
                        width: 140px;
                        border:none;
                    }
                    .el-button{
                        border: none;
                        border-left: 1px solid #DCDFE6;
                        .el-icon-arrow-right{
                            margin: 0 0 0 18px;
                        }
                    }
                }
                .el-table{
                    td,th{
                        padding: 7px 0px;
                    }
                }
                .data_type_nav{
                    display: flex;
                    width: 200px;
                    height: 32px;line-height: 32px;
                    border: 1px solid rgba(232, 232, 232, 1);
                    border-radius: 16px;
                    overflow: hidden;
                    text-align: center;
                    margin-top: 50px;
                    position: relative;
                    margin-left: -100px;
                    left: 50%;
                    .li{
                        flex: 1;
                        cursor: pointer;
                    }
                    .select{
                        color: #fff;
                        height:32px;
                        background:linear-gradient(270deg,rgba(54,130,251,1) 0%,rgba(56,161,246,1) 100%);
                        border-radius:100px;
                    }
                }
                .LS_echarts{
                    display: flex;
                    .left_echarts{
                        width: 81.31%;
                        position: relative;
                        .echarts_top{
                            position: absolute;
                            z-index: 1;
                            right: 0px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            >div{
                                display: flex;
                            }
                        }
                        .screen_date_select{
                            margin-right: 20px;
                            width: 240px;
                            height:30px;line-height:30px;
                            border: 1px solid #DCDFE6;
                            border-radius: 20px;
                            overflow: hidden;
                            text-align: center;
                            display: flex;
                            font-size: 12px;
                            cursor: pointer;
                            .li{
                                flex:1;
                                border-right: 1px solid #DCDFE6;
                                &:last-child{
                                    border-right: none;
                                }
                            }
                            .select{
                                color: rgba(253, 125, 52, 1);
                            }
                        }
                        .history_echarts{
                            width: 100%;
                            height: 430px;
                        }
                        .history_echarts_noData{
                            width: 100%;
                            height: 430px;
                            h3{

                                margin-top: 30px;
                                text-align: center;
                            }
                        }
                    }
                    .left_data{
                        width: 18.69%;
                        height:498px;
                        background:rgba(255,249,245,1);
                        border-radius:2px;
                        border:1px solid rgba(238,238,238,1);
                        padding: 0 10px;
                        p{
                            text-align: center;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(51,51,51,1);
                            margin: 19px 0 23px 0;
                            img{
                                position:relative;
                                top: 2px;
                                margin-right: 10px;
                            }
                        }
                        .ul{
                            .li{
                                height:40px;
                                line-height: 40px;
                                background:rgba(249,240,233,1);
                                border-radius:4px;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                margin-bottom: 10px;
                                .span1{
                                    font-size:12px;
                                    font-family:PingFang-SC-Medium;
                                    font-weight:500;
                                    color:rgba(102,102,102,1);
                                    margin-left: 13px;
                                }
                                .span2{
                                    font-size:19px;
                                    font-family:PingFang-SC-Medium;
                                    font-weight:500;
                                    color:rgba(51,51,51,1);
                                    margin-right: 15px;
                                    @media (max-width: 1500px){
                                        font-size: 12px;
                                        margin-right: 5px;
                                        display: inline-block;
                                        max-width: 38px;

                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        position: relative;
                                        top: 7px;
                                    }
                                }
                                .span3{
                                    font-size:14px;
                                    font-family:PingFang-SC-Medium;
                                    font-weight:500;
                                    color:rgba(153,153,153,1);
                                    margin-right: 7px;
                                    @media (max-width: 1500px){
                                        display: inline-block;
                                        line-height: 40px;
                                        position: relative;
                                        top: -7px;
                                    }
                                }
                            }
                            &.EN{
                                .li{
                                    .span1{
                                        display: inline-block;
                                        max-width: calc(100% - 100px);
                                        line-height: 12px;
                                    }
                                }
                            }
                        }
                    }
                }
                .echarts_bottom{
                    position: relative;
                    display: flex;
                    .echarts_bottom_text{
                        margin-top: 50px;
                        height: 32px;
                        line-height: 32px;
                        font-size:12px;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(102,102,102,1);
                    }
                    &.echarts_line{
                        .data_type_nav{
                            margin-left: -180px;
                            left: 61.49%;
                        }
                    }
                }
            }
            .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;
            }
        }
    }

    .controlUIBox_class{
        position: absolute;
        right: 15px;
        bottom: 150px;
        z-index: 300;
        .control_ry_class{
            position:relative;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: rgba(255, 255, 255, 0.9);
            border-width: 1px;
            box-shadow: rgb(204, 204, 204) 1px 1px 10px 0px;
            cursor: pointer;
            text-align: center;
            padding:0 4px;
            div{
                position:absolute;
                top: 50%;left: 50%;margin: -8px 0 0 -8px;
                background-image: url('../img/GIS/day_icon.png');
                width: 16px;height: 16px;
                background-size: 100% 100%;
                background-position: 0 0;
            }
            &.hover{
                div{
                    position:absolute;
                    top: 50%;left: 50%;margin: -8px 0 0 -8px;
                    background-image: url('../img/GIS/night_icon.png');
                    width: 16px;height: 16px;
                    background-size: 100% 100%;
                    background-position: 0 0;
                }
            }
            &.none{
                display: none;
            }
        }
        .controlUI_class{
            margin-top: 10px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: rgba(255, 255, 255, 0.9);
            border-width: 1px;
            box-shadow: rgb(204, 204, 204) 1px 1px 10px 0px;
            cursor: pointer;
            text-align: center;
            font-family: Arial, sens-serif;
            font-size: 16px;
            padding:0 4px;
            &.hover{
                img{
                    width: 16px;height: 16px;
                }
            }
        }
        .controlUIdiv_class{
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: rgba(255, 255, 255, 0.9);
            border-width: 1px;
            box-shadow: #cccccc 1px 1px 10px 0px;
            cursor: pointer;
            text-align: center;
            font-family: Arial, sens-serif;
            font-size: 16px;
            padding: 0 4px;
            margin-top: 10px;
        }
        .controlUIdiv_hover{
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: #fc8440;
            color:#fff;
            border-width: 1px;
            box-shadow: #cccccc 1px 1px 10px 0px;
            cursor: pointer;
            text-align: center;
            font-family: Arial, sens-serif;
            font-size: 16px;
            padding: 0 4px;
            margin-top: 10px;
        }
    }
    .adjustLuminance{
        .el-loading-spinner{
            margin-top: -9px;
        }
    }
    .lampEditTiTle{
        width: 347px;
        padding: 16px 20px 18px 18px;
        .el-notification__group{
            width: 100%
        }
        .el-notification__title{
            font-size: 18px;
            color:#222222;
        }
        .el-notification__content{
            margin: 16px 0 0;
            font-size:14px;
            color:#888888;
            >p{
                >span{
                    float: right;
                    color: #fc813a;
                    cursor: pointer;
                }
            }
        }
    }
    .GISMap_main{
        position: relative;
        min-width: 1260px;
        max-width: 1920px;
        height: 100%;
        min-height: 600px;
        margin: auto;
        // .sideBar .sideBar_box{
        //     height: calc(100% - 85px);
        // }
        .side_bar_left{
            position: absolute;
            left:0rem;
            height: calc(100% - 2.2rem);
        }

        .map_jh{
            cursor: pointer;
            .map_CY{
                cursor: pointer;
            }
        }
        .map_jh:hover .map_CY{
            background:#fc8440 !important;
            color: #fff !important;
        }
        .map_jh:hover{
            background:#fc8440 !important;
            color: #fff !important;
        }
        .map_CY{
            position: relative;
            left:50%;margin-left:-4px;top: -5px;
            width: 8px;height: 8px;
            // border:1px solid #222222;
            box-shadow:4px 4px 4px 0px rgba(0, 0, 0, 0.2);
            background:#ffffff;
            transform: rotate(45deg);
        }
        .monitor_img_box{
            >div{
                position: relative;
                left:50%;margin-left:-4px;top: 72px;
                width: 8px;height: 8px;
                // border:1px solid #222222;
                box-shadow:4px 4px 4px 0px rgba(0, 0, 0, 0.2);
                background:#ffffff;
                transform: rotate(45deg);
            }
        }
        .lamp{
            .map_lamp_info{
                display: none;
                width:350px;height:165px;
                position:absolute;top: -150px;left: -156px;
                z-index:1;
                text-align: left;
                cursor: initial;
                .map_lamp_info_bg{
                    padding-top: 10px;
                    height:150px;
                    background-color:#fff;
                }
                .top{
                    width:calc(100% - 20px);
                    margin: 0px 10px 0 10px;
                    height:27px;line-height: 27px;
                    background:rgba(246,248,250,1);
                    border-radius:2px;
                    span{
                        vertical-align: middle;
                        font-size:12px;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(101,112,133,1);
                    }
                    img{
                        margin-left: 5px;
                        height: 18px;
                        vertical-align: middle; 
                    }
                    .right{
                        padding-right: 5px;
                        float: right;
                        cursor: pointer;
                        font-size:12px;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(249,124,49,1);
                        padding: 0 5px;
                    }
                }
                .span1{
                    margin-left: 15px;
                    height: 24px;line-height: 24px;
                    font-size:12px;
                    font-family:PingFang-SC-Regular;
                    font-weight:400;
                    color:rgba(102,102,102,1);
                }
                .span2{
                    margin-right: 15px;
                    float: right;
                    height: 24px;line-height: 24px;
                    font-size:12px;
                    font-family:PingFang-SC-Regular;
                    font-weight:400;
                    color:rgba(34,34,34,1);
                }
                .ul{
                    margin: 13px 0px 0 0px;
                    padding-bottom: 6px;
                    flex-wrap: wrap;
                    align-content: flex-start;
                    display: flex;
                    border-bottom: 1px dashed #EBEFF2;
                    .li{
                        width: 50%;
                    }
                }
                .bottom{
                    margin: 0 12px 0 14px;
                    .span1{
                        margin-left: 0px;
                    }
                }
                .icon{
                    position: relative;
                    left:50%;margin-left:-5px;top: -10px;
                    width: 10px;height: 10px;
                    // border:1px solid #222222;
                    box-shadow:5px 5px 5px 0px rgba(0, 0, 0, 0.2);
                    background:#ffffff;
                    transform: rotate(45deg);
                }
            }
            &:hover{
                .map_lamp_info{
                    display: inline-block;
                }
            }
        }
        .determine_l{
            background: url(../img/GIS/determine-icon.png);
            display:inline-block;
            width: 38px;height: 38px;
        }
        .cancel_l{
            background: url(../img/GIS/cancel-icon.png);
            display:inline-block;
            width: 38px;height: 38px;
            margin-left: 10px;
        }
        .is_disabled{
            cursor: not-allowed !important;
        }
        .is_disabled_box{
            >li{
                cursor: not-allowed !important;
            }
        }
        .right_sidebar_box{
            position: absolute;
            width:100%;
            height: 100%;
            .top_data_box{
                transition: all 1s;
                position: absolute;
                width: 80%;height: 96px;
                top: 0px;left: 50%;margin-left: -40%;
                background-color: #fff;
                box-shadow:0px 2px 6px 0px rgba(0,0,0,0.18);
                z-index: 1;
                &.EN{
                    .ul{
                        padding: 0 30px;
                        .li{
                            .p1{
                                margin-top: 16px;
                                font-weight:800;
                                span{
                                    font-size:12px;
                                    font-weight:500;
                                }
                            }
                            .p2{
                                font-size: 12px;
                                i{
                                    margin-right: 5px;
                                    width:4px;
                                    height:4px;
                                }
                                span{
                                    font-size:12px;
                                    font-weight:500;
                                }
                            }
                        }
                    }
                }
                .ul{
                    // line-height:86px;
                    display: flex;
                    padding: 0 30px;
                    box-sizing: border-box;
                    .li{
                        text-align: center;
                        // flex: 1;
                        width: 12.5%;
                        .p1{
                            margin-top: 16px;
                            font-size:30px;
                            font-family:PingFang-SC-Heavy;
                            font-weight:800;
                            color:rgba(51,51,51,1);
                            @media (max-width: 1800px){
                                font-size: 24px;
                            }
                            @media (max-width: 1400px){
                                font-size: 16px;
                            }
                            span{
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(153,153,153,1);
                            }
                        }
                        .p2{
                            i{
                                margin-right: 5px;
                                display: inline-block;
                                width:4px;
                                height:4px;
                                background:rgba(249,124,49,1);
                                vertical-align: middle
                            }
                            span{
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(51,51,51,1);
                            }
                        }
                    }
                }
                .bottom_box{
                    position: absolute;
                    width: 40%;height: 10px;
                    bottom: -8px;left: 50%;margin-left: -20%;
                    background-color: #fff;
                    box-shadow:0px 6px 6px 0px rgba(0,0,0,0.18);
                    border-bottom-right-radius: 10px;
                    border-bottom-left-radius: 10px;
                    cursor: pointer;
                    .icon{
                        position: absolute;
                        width: 28%;height: 20px;
                        bottom: -20px;left: 50%;margin-left: -14%;
                        background-color: #fff;
                        box-shadow:0px 6px 6px 0px rgba(0,0,0,0.18);
                        border-bottom-right-radius: 8px;
                        border-bottom-left-radius: 8px;
                        div{
                            margin: 3px auto;
                            width:30%;
                            height:3px;
                            background:rgba(232,232,232,1);
                            border-radius:1px;
                        }
                    }
                }
            }
        }
        .amap-wrapper {
            width: 100%;
            height: 100%;
            #container{
                width: 100%;
                height: 100%;
                .monitor_active{
                    // transform: translate(-5px, -5px);
                    position: relative;
                    top: -5px;
                    left: -5px;
                    >div{
                        width: 26px !important;
                        height: 26px !important;
                        // transform: translate(0px, 0px);
                        position: relative;
                        top: 0px;
                        left: 0px;
                    }
                }
            }

            /*地图上的开灯、关灯、故障、离线、全部样式*/
            .lamp-status-style{
                position:absolute;
                z-index:9;
                right:20px;
                // top:26px;
                top:20px;
                display: flex;

                .status{     
                    vertical-align: top;
                    width:100%;
                }
                a{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .light-status-icon{
                        &.open{
                            width:12px;
                            height:12px;
                            margin-right:5px;
                            background:url('../img/GIS/open_light1.png') no-repeat left/12px 12px;
                        }
                        &.close{
                            width:12px;
                            height:12px;
                            margin-right:5px;
                            background:url('../img/GIS/close_light1.png') no-repeat left/12px 12px;
                        }
                        &.fault{
                            width:12px;
                            height:12px;
                            margin-right:5px;
                            background:url('../img/GIS/fault_light1.png') no-repeat left/12px 12px;
                        }
                        &.offline{
                            width:12px;
                            height:12px;
                            margin-right:5px;
                            background:url('../img/GIS/offline_light1.png') no-repeat left/12px 12px;
                        }
                    }
                    &:hover{
                        color:rgba(45,133,245,1);
                    }
                    font-size:12px;
                    font-family:PingFang-SC-Medium;
                    color:rgba(68,68,68,1);
                }
                .lamp-status-line{
                    position:absolute;
                    right:-1px;
                    top:13px;
                    display: inline-block;
                    width:1px;
                    height:14px;
                    border:1px solid rgba(239,239,239,1);
                }
                .lamp-status-wrap{
                    width:420px;
                    margin-right:10px;
                    transition: width 1s;
                    overflow: hidden;
                    &.EN{
                        width: 570px;
                        ul{
                            width: 570px;
                            li{
                                width: auto;
                                padding-right: 10px;
                                margin-left: 10px;
                            }
                            .switch_arrow_box{
                                margin-left: 0px;
                                padding-right: 0px;
                            }
                        }
                    }
                    // display: none;
                    &.active{
                        display: block;
                    }
                    &.off{
                        width: 32px;
                    }
                    ul{
                        // width:354px;
                        position:relative;
                        width:420px;
                        box-sizing: border-box;
                        height:42px;
                        line-height: 42px;
                        background:rgba(255,255,255,1);
                        // background:red;
                        box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
                        border-radius:4px 4px 0px 0px;
                        display: flex;
                        li{
                            width:25%;
                            // padding-right: 10px;
                            // margin-left: 10px;
                            position:relative;
                            overflow: hidden;
                            .checklist{
                                position: absolute;
                                top: -15px;
                                right: -16px;
                                width: 30px;
                                height: 30px;
                                background-color: #3388ed;
                                transform:rotate(45deg);
                                z-index: 1;
                                img{
                                    position: absolute;
                                    width: 10px;
                                    top: 20px;
                                    right: 12px;
                                    transform:rotate(-45deg);
                                }
                            }
                            a{
                                font-size: 14px;
                                img{
                                    width: 28px;
                                    height: 28px;
                                    margin-right: 8px;
                                }
                            }
                            &.select{
                                a{
                                    color:rgba(45,133,245,1);
                                }
                            }
                        }
                        .switch_arrow_box{
                            width: 34px;
                            a{
                                // height: 40px;
                                // line-height: 40px;
                                img{
                                    height: 40px;
                                    margin-right: 0px;
                                }
                            }
                        }
                    }
                }

                .current-lamp-btn{
                    width:71px;
                    height:30px;
                    line-height: 30px;
                    background:rgba(255,255,255,1);
                    border-radius:15px;
                    margin-top:4px;
                    // box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
                    box-shadow: 0px 2px 17px rgba(206, 206, 206, 1);
                    opacity: 0.7602;
                    // &::before{
                    //     // left:16px;
                    //     // top:12px;
                    //     left:14px;
                    //     top:10px;
                    // }
                    &:hover{
                        color:rgba(45,133,245,1);
                    }
                }
            }
            .lamp_coordinate{
                // width: 200px
                // display: none;
                position: absolute;
                line-height: 40px;
                width: max-content;
                top: -10px;
                left: 78px;
                >span{
                    display: inline-block;
                    padding: 0 20px;
                    margin-right: 20px;
                    font-size: 14px;
                    color: #888888;
                    background: #fff;
                    span{
                        span{
                            color:#fc8440;
                        }
                    }
                    >:first-child{
                        margin-right: 10px;
                    }
                }
                >i{
                    position: relative;
                    top: 12px;
                    font-size:30px;
                    z-index: 1;
                    cursor: pointer;
                }
            }
            .contextmenu_bg{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0px;left: 0px;
                z-index: 3;
            }
            .contextmenu{
                position: absolute;
                // top: 0px;
                // left: 0px;
                z-index: 4;
                // width: 250px;
                text-align: center;
                background: #fff;
                border-radius: 2px;
                padding: 8px 0;
                display: flex;
                // padding-left:30px;
                &::after{
                    content:'';
                    position:absolute;
                    left:0px;
                    top: 50%;
                    margin-top: -5px;
                    display: inline-block;
                    width:10px;
                    height:10px;
                    background:rgba(255,255,255,1);
                    box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
                    transform: translateX(-50%) rotate(45deg);
                }
                li{
                    line-height: 34px;
                    cursor: pointer;
                    margin-left: 40px;

                    font-size:12px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                }
                li:last-child{
                    margin-right: 30px;
                    font-size:12px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(255,55,55,1);
                }
                li:hover{
                    background: #f5f5f5;
                }
                .rotate{
                    &:hover{
                        .rotate_btu{
                            display: inline-block;
                        }
                    }
                    position:relative;
                    .rotate_btu{
                        display: none;
                        position: absolute;
                        bottom: 30px;left: 0px;
                        width: 100%;
                        background-color:#fff;
                        >div{
                            cursor: pointer;
                            &:hover{
                                color: #fc8440;
                            }
                        }
                    }

                }
            }
        }
        .detailsDetails_box{

        }
        .settingPacket_box{
            .is-active .el-radio-button__inner{
                background: #fffaf8;
                border: 1px solid #fc8440;
            }
            .el-radio-button__inner{
                color: #000;
                width: 140px;height: 50px;line-height: 50px;padding: 0px;
                background: #f8f9fc;
                border: 1px solid #e8e8e8;
                -webkit-box-shadow: none;
                box-shadow: none;
            }
            .el-radio-button{
                margin-right: 30px;
                margin-bottom: 20px;
            }
            .el-slider{
                .el-slider__bar{
                    background: #fc8440;
                }
                .el-slider__button{
                    width:30px;height: 30px;
                    background:url(../img/GIS/Lamp_icon-pre.png);
                    background-size: 100% 100%;
                    border:0px;
                }
            }
        }
        /*123 监控视频样式*/
        .surveillanceVideo_box{
            
            .myPlayer_container{
                position:relative;
                width:100%;
                #myPlayer{
                    width:100%;
                    height:567px;
                }
                /*视屏播放按钮图标样式*/
                .video-control-icons{
                    &.hide{
                        display: none;
                    }
                    .outer-wrap{
                        position:absolute;
                        width:90px;
                        height:40px;
                        cursor: pointer;
                        bottom:66px;
                        &.direction-control{
                            right:353px;
                        }
                        &.zoom-control{
                            right:244px;
                        }
                        &.focal-control{
                            right:135px;
                        }
                        &.clarity-control{
                            right:26px;//+90
                        }

                        // 按钮
                        .control-btn{
                            position:absolute;
                            left:0;
                            bottom:0;
                            text-decoration: none;
                            color:#000;
                            display:block;
                            width:90px;
                            height:30px;
                            background-color:rgba(255,255,255,0.7);
                            border-radius:15px;
                            text-align:center;
                            line-height: 30px;
                            &:hover{
                                background-color:#fff;
                            }
                            // &.direction-btn{
                            //  right:353px;
                            // }
                            // &.zoom-btn{
                            //  right:244px;
                            // }
                            // &.focal-btn{
                            //  right:135px;
                            // }
                            // &.clarity-btn{
                            //  right:26px;
                            // }
                        }
                        .inner-wrap{
                            padding-bottom:10px;
                            display:none;
                            &.show{
                                display:block;
                            }
                        // 包裹云台控制按钮的div
                        .control-wrap{
                            position:absolute;
                            left:50%;
                            transform: translateX(-50%);
                            bottom:38px;
                            border-radius:8px;
                            background-color:#fff;
                            
                            &::after{
                                position:absolute;
                                bottom:-10px;
                                content:'';
                                display:block;
                                width:10px;
                                height:10px;
                                background: url('../img/video/top_down.arrow.png') no-repeat left -14px;
                            }
                            &.direction-wrap{
                                width:192px;
                                height:106px;
                                padding:14px 0 0 14px;
                                box-sizing: border-box;
                                display:flex;
                                .left{
                                    display:flex;
                                    flex-wrap: wrap;
                                    padding-right:2px;//15px-13px;
                                }
                                .right{
                                    display:flex;
                                    flex-wrap: wrap;
                                    padding-left:15px;
                                }
                                &::after{
                                    left:91px;
                                }
                                
                            }
                            &.zoom-wrap{
                                width:108px;
                                height:46px;
                                // line-height: 46px;
                                display:flex;
                                justify-content: center;
                                align-items: center;
                            }

                            &.focal-wrap{
                                width:131px;
                                height:46px;
                                // line-height: 46px;
                                display:flex;
                                justify-content: center;
                                align-items: center;
                            }
                            
                            &.clarity-wrap{
                                width:138px;
                                height:46px;
                                // line-height: 46px;
                                display:flex;
                                justify-content: center;
                                align-items: center;

                                /*标清高清*/
                                .definition{
                                    color:#000;
                                    text-decoration: none;
                                    font-size:14px;
                                    display:block;
                                    padding:0 20px;
                                    &:hover,&.active{
                                        color:#FD8947;
                                    }
                                    &.high{
                                        border-left:2px solid #EDEDED;
                                    }
                                }
                            }

                            // 图标
                            .control-icon{
                                display: inline-block;
                                width:26px;
                                height:26px;
                                text-decoration: none;

                                /*八个方向*/ 
                                &.up-icon,&.down-icon,&.left-icon,&.right-icon,&.left-up-icon,&.left-down-icon,&.right-up-icon,&.right-down-icon{
                                    margin-right:13px;
                                }
                                // 上
                                &.up-icon{
                                    background: url('../img/video/up.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/up.active.png');
                                    }
                                }
                                // 下
                                &.down-icon{
                                    background: url('../img/video/down.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/down.active.png');
                                    }
                                }
                                // 左
                                &.left-icon{
                                    background: url('../img/video/left.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/left.active.png');
                                    }
                                }
                                // 右
                                &.right-icon{
                                    background: url('../img/video/right.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/right.active.png');
                                    }
                                }
                                // 左上
                                &.left-up-icon{
                                    background: url('../img/video/left_up.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/left_up.active.png');
                                    }
                                }
                                // 左下
                                &.left-down-icon{
                                    background: url('../img/video/left_down.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/left_down.active.png');
                                    }
                                }
                                // 右上
                                &.right-up-icon{
                                    background: url('../img/video/right_up.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/right_up.active.png');
                                    }
                                }
                                // 右下
                                &.right-down-icon{
                                    background: url('../img/video/right_down.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/right_down.active.png');
                                    }
                                }

                                /*缩放*/
                                &.to-big-icon{
                                    background: url('../img/video/to_big.png') no-repeat center;
                                    margin-right:18px;
                                    &:hover{
                                        background: url('../img/video/to_big.active.png');
                                    }
                                }
                                &.to-small-icon{
                                    background: url('../img/video/to_small.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/to_small.active.png');
                                    }
                                }

                                /*焦距*/
                                &.farst-icon{
                                    background: url('../img/video/farst.png') no-repeat center;
                                    margin-right:29px;
                                    &:hover{
                                        background: url('../img/video/farst.active.png');
                                    }
                                }
                                &.near-icon{
                                    background: url('../img/video/near.png') no-repeat center;
                                    &:hover{
                                        background: url('../img/video/near.active.png');
                                    }
                                }
                            }

                        }
                        }

                    }
                    
                }
            }
        }
        // .search_box{
        //  position:absolute;
        //  top: 42px;left: 44px;
        //  width:344px;
        //  height:50px;line-height: 50px;
        //  background:rgba(255,255,255,1);
        //  box-shadow: -5px 0px 0px 0px rgba(252,132,64,1);
        //  .search{
        //      font-size:18px;
        //      font-family:PingFangSC-Regular;
        //      color:rgba(178,186,198,1);
        //  }
        //  .el-input__inner{
        //      height:50px;line-height: 50px;
        //      border: 0px;
        //  }
        //  .el-input-group__prepend{
        //      background: #ffffff;
        //      border: 0px;
        //      font-size: 18px;
        //      font-weight: 540;
        //      font-family:PingFangSC-Medium;
        //      color:rgba(26,26,26,1);
        //      >span{
        //          cursor: pointer;
        //      }
        //  }
        // }
        .lamp_dialog{
            position:absolute;
            top: 17px;left: 54px;
            width:400px;
            height: calc(100% - 30px);
            max-height: 810px;
            border-radius: 6px;
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 6px 0px rgba(0,0,0,0.18);
            // overflow: auto;
            &.EN{
                width: 460px;   
            }
            .top_nav{
                display: flex;
                .top_nav_li{
                    position: relative;
                    text-align: center;
                    width:calc(33.33% - 10px);
                    height:30px;line-height: 30px;
                    background:rgba(240,240,240,1);
                    cursor: pointer;

                    border:1px solid rgba(223,223,223,1);
                    border-left: none;
                    font-size:12px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(102,102,102,1);
                    &.select{
                        border: none;
                        background-color: #fff;
                        .bg{
                            position: relative;
                            top: -5px;
                            height: 35px;line-height: 35px;
                            background-color: #fff;
                            border-radius:10px;

                            font-size:14px;
                            font-family:PingFangSC-Semibold;
                            font-weight:600;
                            color:rgba(51,51,51,1);
                        }
                    }
                }
                // .top_nav_li1{
                //  .bg{
                //      position: absolute;

                //  }
                // }
                .top_nav_li4{
                    width: 30px;
                }
                .borderRadius1{
                    border-bottom-right-radius: 10px;
                }
                .borderRadius21{
                    border-bottom-left-radius: 10px;
                }
                .borderRadius23{
                    border-bottom-right-radius: 10px;
                }
                .borderRadius3{
                    border-bottom-left-radius: 10px;
                }
                .borderRadius4{
                    border-bottom-left-radius: 10px;
                }
            }
            .lamp_info{
                height: calc(100% - 30px);
                overflow: auto;
                .box1{
                    display: flex;
                    margin: 20px 0 13px 0;
                    padding: 0 10px;
                    justify-content: space-between;
                    .box1_left{
                        height:37px;
                        background:rgba(246,248,250,1);
                        border-radius:2px;
                        display: flex;
                        width: calc(100% - 50px);
                        .li{
                            width: calc(50% - 15px);
                            margin: 6px 0 0 10px;
                            height:26px;line-height: 26px;
                            background:rgba(255,255,255,1);
                            box-shadow:0px 2px 6px 0px rgba(0,0,0,0.05);
                            border-radius:2px;
                            display: flex;
                            justify-content: space-between;
                            .span1{
                                margin-left: 10px;
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(51,51,51,1);
                            }
                            .span2{
                                margin-right: 10px;
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(51,51,51,1);
                            }
                        }
                    }
                    .box1_right{
                        width: 37px;height: 37px;
                        text-align: center;
                        background:rgba(246,248,250,1);
                        border-radius:2px;
                        img{
                            margin-top: 8px;
                            width: 20px;
                        }
                    }
                }
                .box{
                    border-top: 1px dashed #DFDFDF;
                }

                .box_top{
                    margin-top: 10px;
                    height: 27px;line-height: 27px;
                    display: flex;
                    justify-content: space-between;
                    .top_left{
                        margin-left: 10px;
                        i{
                            margin-right: 6px;
                            vertical-align: middle;
                            display: inline-block;
                            width:6px;
                            height:6px;
                            background:rgba(249,124,49,1);
                            border-radius:1px;
                            border-radius: 2px;
                        }
                        span{
                            vertical-align: middle;
                            font-size:12px;
                            font-family:PingFangSC-Semibold;
                            font-weight:600;
                            color:rgba(249,124,49,1);
                        }
                    }
                    .top_right{
                        margin-right: 10px;
                        // width:85px;
                        height:27px;
                        background:rgba(246,246,250,1);
                        border-radius:2px;
                        cursor: pointer;
                        img{
                            height: 10px;
                            margin: 0 6px 0 8px;
                            vertical-align: middle;
                        }
                        span{
                            vertical-align: middle;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(0,93,232,1);
                        }
                    }
                    .top_right_fault{
                        margin-right: 10px;
                        width:64px;
                        height:27px;
                        background:rgba(255,242,245,1);
                        border-radius:2px;
                        cursor: pointer;
                        img{
                            margin: 0 6px 0 8px;
                            height: 10px;
                            vertical-align: middle;
                        }
                        span{
                            vertical-align: middle;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(255,12,77,1);
                        }
                    }
                }
                .data_box{
                    margin-top: 18px;
                    .li{
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid #EBEFF2;
                        padding-bottom: 12px;
                        margin-top: 8px;
                        &:last-child{
                            padding-bottom: 20px;
                            border: none;
                        }
                        >div{
                            width: calc(50% - 2px);
                            display: flex;
                            justify-content: space-between;
                        }
                        .li_center{
                            width: 100%;
                        }
                        .span1{
                            margin-left: 28px;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(101,112,133,1);
                        }
                        i{
                            position:relative;
                            top: 2px;
                            width:2px;
                            height:12px;
                            background:#EBEFF2;
                        }
                        .span2{
                            margin-right: 20px;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(34,34,34,1);
                        }
                        .progress_{
                            width: 170px;
                        }
                    }
                }
            }
            .road_info{
                overflow: auto;
                height: calc(100% - 30px);
                .box1{
                    margin: 20px 0 20px 0;
                    padding-bottom: 13px;
                    border-bottom: 1px dashed #DFDFDF;
                    >.box{
                        margin: 0 10px;
                        width:calc(100% - 20px);
                        height:31px;
                        background:rgba(246,248,250,1);
                        border-radius:2px;
                        padding-top: 6px;
                        .box_box{
                            margin: 0px 10px 0;
                            width:calc(100% - 20px);
                            height:26px;line-height: 26px;
                            background:rgba(255,255,255,1);
                            box-shadow:0px 2px 6px 0px rgba(0,0,0,0.05);
                            border-radius:2px;
                            display: flex;
                            justify-content: space-between;
                            .span1{
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(51,51,51,1);
                                margin-left: 10px;
                            }
                            .span2{
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(153,153,153,1);
                                margin-right: 16px;
                            }
                        }
                    }
                }
                .box2{
                    border-bottom: 1px dashed #DFDFDF;
                    .flex_box{
                        display: flex;
                        .li{
                            width: calc(33.33%);
                            text-align: center;
                            .p1{
                                font-size:30px;
                                font-family:PingFang-SC-Heavy;
                                font-weight:800;
                                color:rgba(51,51,51,1);
                            }
                            .p2{
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(51,51,51,1);
                                span{
                                    margin-left: 5px;
                                    font-size:12px;
                                    font-family:PingFang-SC-Medium;
                                    font-weight:500;
                                    color:rgba(153,153,153,1);
                                }
                            }
                        }
                    }
                    .box{
                        margin: 16px 10px 20px;
                        width:calc(100% - 20px);
                        height:27px;
                        background:rgba(255,242,245,0.5);
                        border-radius:2px;
                        display: flex;
                        justify-content: space-between;
                        i{
                            vertical-align: middle;
                        }
                        .dian{
                            margin-left: 10px;
                            position:relative;
                            display: inline-block;
                            width:4px;
                            height:4px;
                            background:rgba(255,12,77,1);
                            border-radius: 50%;
                        }
                        .span1{
                            margin-left: 16px;
                            vertical-align: middle;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(51,51,51,1);
                        }
                        .span2{
                            vertical-align: middle;
                            font-size:14px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(255,12,77,1);
                        }
                        .span3{
                            vertical-align: middle;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(255,12,77,1);
                        }
                        .sz{
                            color: #F97C31;
                        }
                        .click{
                            cursor: pointer;
                        }
                    }
                }
                .box3{
                    .box3_top{
                        height: 17px;line-height: 17px;
                        margin: 15px 0 20px 0;
                        i{
                            margin-left: 14px;
                            vertical-align: middle;
                            display: inline-block;
                            width:6px;
                            height:6px;
                            background:rgba(249,124,49,1);
                            border-radius:1px;
                        }
                        span{
                            margin-left: 8px;
                            vertical-align: middle;
                            font-size:12px;
                            font-family:PingFangSC-Semibold;
                            font-weight:600;
                            color:rgba(249,124,49,1);
                        }
                    }
                    .data_box{
                        margin-top: 18px;
                        border-bottom: 1px dashed #DFDFDF;
                        .li{
                            display: flex;
                            justify-content: space-between;
                            border-bottom: 1px solid #EBEFF2;
                            padding-bottom: 12px;
                            margin-top: 8px;
                            &:last-child{
                                padding-bottom: 20px;
                                border: none;
                            }
                            >div{
                                width: calc(50% - 2px);
                                display: flex;
                                justify-content: space-between;
                            }
                            .span1{
                                margin-left: 28px;
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(101,112,133,1);
                            }
                            i{
                                position:relative;
                                top: 2px;
                                width:2px;
                                height:12px;
                                background:#EBEFF2;
                            }
                            .span2{
                                margin-right: 20px;
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(34,34,34,1);
                            }
                        }
                    }
                }
                .box4{
                    height: calc(100% - 380px);
                    .box4_top{
                        display: flex;
                        justify-content: space-between;
                        padding: 15px 0 20px 0;
                        .box4_top_left{
                            height: 20px;line-height: 20px;
                            i{
                                margin-left: 14px;
                                vertical-align: middle;
                                display: inline-block;
                                width:6px;
                                height:6px;
                                background:rgba(249,124,49,1);
                                border-radius:1px;
                            }
                            span{
                                margin-left: 8px;
                                vertical-align: middle;
                                font-size:12px;
                                font-family:PingFangSC-Semibold;
                                font-weight:600;
                                color:rgba(249,124,49,1);
                            }
                        }
                        .box4_top_right{
                            width: 140px;
                            height: 20px;line-height: 20px;
                            background:rgba(254,241,234,1);
                            border-radius:2px;
                            display: flex;
                            text-align: center;
                            .li{
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(206,161,135,1);
                                width: 33.33%;
                                cursor: pointer;
                                &.select{
                                    background:rgba(249,124,49,1);
                                    color:rgba(255,255,255,1);
                                }
                            }
                        }
                    }
                    .table_box{
                        height: calc(100% - 55px);
                        .wifi_img{
                            height: 20px;
                            vertical-align: middle;
                        }
                        .select{
                            background:rgba(255,255,255,1);
                            box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.1);
                            border-radius:2px;
                            border-left: 2px solid #F97C31;
                            color:rgba(249,124,49,1);
                            .border_i{
                                position: absolute;
                                top: 0;
                                left: 0;
                                content: "";
                                width: 3px;
                                height: 100%;
                                background: #F97C31;
                            }
                        }
                        .red{
                            color:#FF0C4D;
                        }
                        .el-table td, .el-table th.is-leaf{
                            border-bottom: none;
                        }
                        .has-gutter{
                            tr{
                                background:rgba(246,248,250,1);
                                border-radius:2px;

                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(101,112,133,1);
                                th{
                                    background:rgba(246,248,250,1);
                                }
                            }
                        }
                        .el-table__body-wrapper::-webkit-scrollbar-button {/*滚动条整体样式*/
                            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
                            height: 10px;
                        }
                        .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
                            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
                            height: 10px;
                        }
                        .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                            border-radius: 10px;
                            background: #D8D8D8;
                        }
                        .el-table__body-wrapper::-webkit-scrollbar-thumb:horizontal{
                            background: #D8D8D8;
                        }
                    }
                }
            }
            .project_info{
                overflow: auto;
                height: calc(100% - 30px);
                .box1{
                    margin: 20px 0 20px 0;
                    padding-bottom: 13px;
                    border-bottom: 1px dashed #DFDFDF;
                    .box1_bg{
                        display: flex;
                        margin: 0 10px;
                        padding:6px 10px 5px;
                        background:rgba(246,248,250,1);
                        border-radius:2px;
                        >div{
                            display: flex;
                            justify-content: space-between;
                            height:26px;line-height: 26px;
                            background:rgba(255,255,255,1);
                            box-shadow:0px 2px 6px 0px rgba(0,0,0,0.05);
                            border-radius:2px;
                            width: calc(50% - 5px);
                            .span1{
                                margin-left: 10px;
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(51,51,51,1);
                            }
                            .span2{
                                // margin-right: 10px;
                                text-align: right;
                                margin-right: 10px;
                                width: calc(100% - 60px);
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(153,153,153,1);
                                cursor: pointer;
                                .el-input__inner{
                                    border:none;
                                    height: inherit;
                                    line-height: inherit;
                                    text-align: right;
                                    padding: 0px 30px 0 0;
                                }
                                .el-input__icon{
                                    line-height: inherit;
                                }
                            }
                        }
                        .box1_right{
                            margin-left: 10px;
                        }
                    }
                }
                .box2{
                    border-bottom: 1px dashed #DFDFDF;
                    .flex_box{
                        display: flex;
                        .li{
                            width: calc(33.33%);
                            text-align: center;
                            .p1{
                                font-size:30px;
                                font-family:PingFang-SC-Heavy;
                                font-weight:800;
                                color:rgba(51,51,51,1);
                            }
                            .p2{
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(51,51,51,1);
                                span{
                                    margin-left: 5px;
                                    font-size:12px;
                                    font-family:PingFang-SC-Medium;
                                    font-weight:500;
                                    color:rgba(153,153,153,1);
                                }
                            }
                        }
                    }
                    .box{
                        margin: 16px 10px 20px;
                        width:calc(100% - 20px);
                        height:27px;
                        background:rgba(255,242,245,0.5);
                        border-radius:2px;
                        display: flex;
                        justify-content: space-between;
                        i{
                            vertical-align: middle;
                        }
                        .dian{
                            margin-left: 10px;
                            position:relative;
                            display: inline-block;
                            width:4px;
                            height:4px;
                            background:rgba(255,12,77,1);
                            border-radius: 50%;
                        }
                        .span1{
                            margin-left: 16px;
                            vertical-align: middle;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(51,51,51,1);
                        }
                        .span2{
                            vertical-align: middle;
                            font-size:14px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(255,12,77,1);
                        }
                        .span3{
                            vertical-align: middle;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(255,12,77,1);
                        }
                        .sz{
                            color: #F97C31;
                        }
                        .click{
                            cursor: pointer;
                        }
                    }
                }
                .box3{
                    border-bottom: 1px dashed #DFDFDF;
                    .box3_top{
                        display: flex;
                        margin-top: 13px;
                        >div{
                            width: calc(50%);
                            .p1{
                                i{
                                    vertical-align: middle;
                                    margin-left: 20px;
                                    display: inline-block;
                                    width:4px;
                                    height:4px;
                                    background:rgba(0,93,232,1);
                                    border-radius: 50%;
                                }
                                span{
                                    vertical-align: middle;
                                    margin-left: 6px;
                                    font-size:12px;
                                    font-family:PingFang-SC-Medium;
                                    font-weight:500;
                                    color:rgba(153,153,153,1);
                                }
                            }
                            .p2{
                                line-height: 29px;
                                span{
                                    margin-left: 30px;
                                    font-size:21px;
                                    font-family:PingFang-SC-Heavy;
                                    font-weight:800;
                                    color:rgba(51,51,51,1);
                                }
                            }
                        }
                    }
                    .box3_bottom{
                        margin: 10px 10px 20px 20px;
                        display: flex;
                        .li{
                            width: calc(33.33% - 10px);
                            margin-right: 10px;
                            background:rgba(246,248,250,1);
                            border-radius:2px;
                            padding: 6px 0 4px 9px;
                            box-sizing:border-box;
                            .p1{
                                font-size:12px;
                                font-family:PingFang-SC-Medium;
                                font-weight:500;
                                color:rgba(153,153,153,1);
                            }
                            .p2{
                                .span1{
                                    font-size:18px;
                                    font-family:PingFang-SC-Heavy;
                                    font-weight:800;
                                    color:rgba(51,51,51,1);
                                }
                                .span2{
                                    font-size:10px;
                                    font-family:PingFang-SC-Medium;
                                    font-weight:500;
                                    color:rgba(153,153,153,1);
                                }
                            }
                        }
                    }
                }
                .box4{
                }
                .box_top{
                    height: 17px;line-height: 17px;
                    margin: 15px 0 20px 0;
                    i{
                        margin-left: 14px;
                        vertical-align: middle;
                        display: inline-block;
                        width:6px;
                        height:6px;
                        background:rgba(249,124,49,1);
                        border-radius:1px;
                    }
                    span{
                        margin-left: 8px;
                        vertical-align: middle;
                        font-size:12px;
                        font-family:PingFangSC-Semibold;
                        font-weight:600;
                        color:rgba(249,124,49,1);
                    }
                }
                .data_box{
                    margin-top: 18px;
                    .li{
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid #EBEFF2;
                        padding-bottom: 12px;
                        margin-top: 8px;
                        &:last-child{
                            padding-bottom: 20px;
                            border: none;
                        }
                        >div{
                            width: calc(50% - 2px);
                            display: flex;
                            justify-content: space-between;
                        }
                        .li_center{
                            width: 100%;
                        }
                        .span1{
                            margin-left: 28px;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(101,112,133,1);
                        }
                        i{
                            position:relative;
                            top: 2px;
                            width:2px;
                            height:12px;
                            background:#EBEFF2;
                        }
                        .span2{
                            margin-right: 20px;
                            font-size:12px;
                            font-family:PingFang-SC-Medium;
                            font-weight:500;
                            color:rgba(34,34,34,1);
                        }
                    }
                }
            }
        }
        .fault_list_tk{
            position:absolute;
            top: 114px;left: 300px;
            width:calc(100% - 600px);
            height: calc(100% - 200px);
            // max-height: 800px;

            background:rgba(255,255,255,1);
            box-shadow:0px 2px 6px 0px rgba(0,0,0,0.05);
            border-radius:2px;
            border:1px solid rgba(240,240,240,1);
            .fault_list_tk_top{
                display: flex;
                justify-content: space-between;
                height: 50px;line-height: 50px;
                border-bottom: 1px solid #F0F0F0;
                box-sizing: border-box;
                .left{
                    margin-left: 19px;
                    font-size:14px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                }
                .right{
                    padding: 0 10px;
                    margin-right: 20px;
                    font-size:14px;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(153,153,153,1);
                    cursor: pointer;
                }
            }

            .table_box{
                height: calc(100% - 65px);
                margin: 25px 20px 0;
                .el-table td, .el-table th.is-leaf{
                    border-bottom: none;
                }
                .has-gutter{
                    tr{
                        background:rgba(246,248,250,1);
                        border-radius:2px;

                        font-size:12px;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:rgba(101,112,133,1);
                        th{
                            background:rgba(246,248,250,1);
                        }
                    }
                }
                .el-table__body-wrapper::-webkit-scrollbar-button {/*滚动条整体样式*/
                    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
                    height: 10px;
                }
                .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
                    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
                    height: 10px;
                }
                .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                    border-radius: 10px;
                    background: #D8D8D8;
                }
                .el-table__body-wrapper::-webkit-scrollbar-thumb:horizontal{
                    background: #D8D8D8;
                }
            }
        }
        >.button_box{
            position: absolute;
            top:154px;left: 33px;
            width: 107px;
            li{
                float: left;
                height: 50px;width: 100%;line-height: 50px;
                margin-bottom: 30px;
                // text-align: center;
                background: #fff;font-size: 16px;color: #666666;
                border-radius: 16px;
                cursor: pointer;
                >i{
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    position: relative;
                    top: -1px;
                    left: 20px;
                }
                span{
                    margin-left: 30px;
                }
            }
            li:nth-child(1) >i{
                background: #fc8440;
            }
            li:nth-child(2) >i{
                background: #ffb68d;
            }
            li:nth-child(3) >i{
                background: #ff0505;
            }
            li:nth-child(4) >i{
                background: #a7a7a7;
            }
            li:nth-child(5) >i{
                background: #31b4fd;
            }
            .operationSelect{
                background:#373b44;
                color:#fff;
            }
        }
        >.button_box_en{
            width: 150px;
        }
        .right_sidebar_bg{
            background: #000;
            opacity: 0.1;
            position: absolute;
            width: 100%;height: 100%;
            z-index: 2;
        }
        .right_sidebar{
            position: absolute;
            right: 0px;
            width: 0px;
            height: 100%;
            background:#494e54;
            z-index: 350;
            .sideBar_box{
                width: calc(100%);
                height: 100%;
                overflow: hidden;
                >div{
                    min-width: 400px;
                    height: 100%;
                }
                .streetLamp_box{
                    height: calc(100% - 70px);
                }
                .switch{
                    float: right;
                    display: inline-block;
                    background: #64686d;
                    width: 84px;height: 32px;line-height: 32px;
                    border-radius: 16px;
                    font-size: 14px;
                    color: #ffffff;
                    span{
                        display: inline-block;
                        text-align: center;
                        width: 62px;
                        background: linear-gradient(#fc8440, #fe7121);
                        border-radius: 16px;
                    }
                    .run_state{
                        float: right;
                        background: #3f3f3f;
                    }
                }
                .sideBar_Nav{
                    // width: 522px;
                    margin: 23px 30px 0;
                    li{
                        float: left;
                        width: 33.33%;height: 47px;line-height: 47px;
                        text-align: center;
                        font-size: 16px;color: #ffffff;
                        background: #575c61;
                        cursor: pointer;
                    }
                    .sideBar_nav_select{
                        background: #373b44;
                    }
                }
                .streetLamp_button{
                    margin: 20px 30px 0; 
                    >div{
                        float: right;
                    }
                    .el-button{
                        width: 112px;height: 30px;line-height: 30px;
                        padding: 0px;
                        font-size: 14px;color: #ffffff;
                        background: #575c61;
                        border:1px solid #808488;
                    }
                }
                .streetLamp_List{
                    margin: 20px 30px 0;
                    height: calc(100% - 150px);
                    padding-bottom: 80px;
                    overflow: auto;
                    li{
                        width: calc(100% - 34px);
                        background: #575c61;
                        margin-bottom: 20px;
                        padding: 17px 10px 20px 24px;
                        color: #ffffff;
                        cursor: pointer;
                        p:first-child{
                            font-size: 22px;
                            margin-bottom: 30px;
                        }
                        p:last-child{
                            font-size: 20px;
                            span:first-child{
                                position: relative;
                                top: -2px;
                                font-size: 14px;
                                opacity: 0.6;
                            }
                            span:last-child{
                                float: right;
                                margin-right: 5px; 
                            }
                            .running_state{
                                color: #fe7527;
                            }
                        }
                    }
                }
                .streetLamp_data{
                    margin: 0 30px;
                    .lamp_icon{
                        position: relative;
                        top: 6px;
                        margin-right: 10px;
                    }
                    >:nth-child(1){
                        height: 32px;line-height: 32px;
                        margin: 63px 0 36px 0;
                        color: #ffffff;font-size: 22px;
                        position: relative;
                        >span{
                            margin-right: 10px;
                        }
                        .streetLamp_data_button{
                            position: absolute;
                            top: -50px;
                            right: -10px;
                            margin: 0 25px 0 10px;
                            color: #fc8440;
                            cursor: pointer;
                            text-decoration: underline;
                        }
                    }
                    >:nth-child(2){
                        width: 100%;
                        li{
                            float: left;
                            width: calc(25% - 10px);
                            padding-left: 10px;
                            margin-bottom: 30px;
                            p:first-child{
                                font-size: 14px;color: #ffffff;opacity: 0.6;
                            }
                            p:nth-child(2){
                                position: relative;
                                font-size: 20px;color: #ffffff;
                                margin-top: 5px;
                                span{
                                    font-size: 14px;color: #b5b5b5;
                                    text-decoration:underline;
                                    margin-left: 10px;
                                    cursor: pointer;
                                }
                                .el-slider{
                                    position: absolute;
                                    bottom: 0px;
                                    right: 4px;
                                    padding: 15px 0;
                                    background: #fff;
                                    border-radius: 6px;
                                    z-index: 1;
                                    .el-slider__bar{
                                        background: #fc8440;
                                    }
                                    .el-slider__button{
                                        width:30px;height: 30px;
                                        background:url(../img/GIS/Lamp_icon-pre.png);
                                        background-size: 100% 100%;
                                        border:0px;
                                    }
                                }
                            }
                            .catcher_on_off{
                                margin-top: 5px;
                                cursor: pointer;
                                background: #64686d;
                                width: 84px;
                                height: 26px;
                                line-height: 26px;
                                border-radius: 16px;
                                font-size: 14px;
                                color: #ffffff;
                                .select1{
                                    display: inline-block;
                                    text-align: center;
                                    width: 62px;
                                    background: linear-gradient(#fc8440, #fe7121);
                                    border-radius: 16px;
                                }
                                .select0{
                                    float: right;
                                    display: inline-block;
                                    text-align: center;
                                    width: 62px;
                                    background: #3f3f3f;
                                    border-radius: 16px;
                                }
                            }
                        }
                    }
                    >:nth-child(3){
                        display: none;
                    }
                    >:nth-child(4){
                        margin-top: 20px;
                        font-size: 14px;color: #ffffff;
                        span:last-child{
                            float: right;
                        }
                    }
                    >:nth-child(5){
                        width: 100%;
                        margin-top: 21px;
                        padding-bottom: 30px;
                        border-bottom: 1px solid #5b6065;
                        li{
                            float: left;
                            width: calc(25% - 10px);
                            padding-left: 10px;
                            p:first-child{
                                font-size: 14px;color: #ffffff;opacity: 0.6;
                            }
                            p:last-child{
                                font-size: 20px;color: #ffffff;
                                margin-top: 5px;
                                span{
                                    font-size: 14px;color: #b5b5b5;
                                    text-decoration:underline;
                                    margin-left: 10px;
                                }
                            }
                        }
                    }
                    >:nth-child(6){
                        padding: 37px 0;
                        color: #ffffff;
                        border-bottom: 1px solid #5b6065;
                        span{
                            float: right;
                        }
                    }
                    >:nth-child(7){
                        padding-top: 37px;
                        color: #ffffff;
                        span{
                            float: right;
                        }
                    }
                }
                .project_box{
                    // width: 524px;
                    height: calc(100% - 70px);
                    >ul{
                        margin:20px 30px 0;
                        height: calc(100% - 100px);
                        padding-bottom: 80px;
                        overflow: auto;
                    }
                    >ul li{
                        padding:17px 24px;
                        background: #575c61;
                        margin-bottom:20px;
                        color: #ffffff;
                        cursor: pointer;
                        p:first-child{
                            font-size: 22px;
                            margin-bottom: 30px;
                            >:nth-child(1){
                                float: left;
                            }
                            >:nth-child(2){
                                float: left;
                                display: inline-block;
                                width: 52%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            >:last-child{
                                float: right;
                                color: #fe7527;
                                span{
                                    position: relative;
                                    top: -3px;
                                    margin-left: 10px;
                                    color: #ffffff;
                                    font-size: 14px;
                                    opacity: 0.6;
                                }
                            }
                        }
                        p:last-child{
                            >span{
                                display: inline-block;
                                margin-right: 28px;
                                span{
                                    display: inline-block;
                                    margin-right: 20px;
                                    font-size: 14px;
                                    opacity: 0.6;
                                }
                            }
                        }
                    }
                    >div{
                        margin-top: 20px;
                        padding-top: 43px;
                        height: calc(100% - 63px);
                        width: 100%;
                        overflow: auto;
                        color: #ffffff;
                        >:nth-child(1){
                            height: 32px;
                            line-height: 32px;
                            margin: 0px 30px 36px 30px;
                            font-size: 22px;
                            position: relative;
                            >span:first-child{
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                width: 80%;
                                display: inline-block;
                                text-align: right;
                            }
                            span{
                                float: right;
                                color: #fe792e;font-size: 18px;
                            }
                            .streetLamp_data_button{
                                position: absolute;
                                top: -50px;
                                right: -10px;
                                margin: 0 25px 0 10px;
                                color: #fc8440;
                                cursor: pointer;
                                text-decoration: underline;
                            }
                        }
                        >:nth-child(2){
                            margin: 0 30px;
                            li{
                                float: left;
                                width: 20%;
                                margin-bottom: 27px;
                                text-align:center;
                                p:first-child{
                                    opacity: 0.6;font-size: 14px;
                                }
                                p:last-child{
                                    font-size: 20px;
                                    margin-top: 5px;
                                    word-break:break-all;
                                    display:-webkit-box;
                                    -webkit-line-clamp:2;
                                    -webkit-box-orient:vertical;
                                    overflow:hidden;
                                    padding: 0 5px;
                                }
                            }
                            li:nth-child(2){
                                width: 40%;
                            }
                        }
                        >:nth-child(3){
                            margin: 0 30px;
                            opacity: 0.6;font-size: 14px;
                            margin-bottom: 5px;
                        }
                        >:nth-child(4){
                            margin: 0 30px;
                            font-size: 20px;
                            margin-bottom: 50px;
                            width: calc(100% - 60px);
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        >:nth-child(5){
                            height: 20px;
                            background: #4e5359;
                            margin-bottom: 36px;
                        }
                        >:nth-child(6){
                            margin: 0 30px;
                            >div{
                                >span{
                                    display: inline-block;
                                    cursor: pointer;
                                    width: 95px;height: 50px;line-height: 50px;
                                    background: #575c61;border-radius: 25px;
                                    padding: 0 25px;
                                    margin:0 27px 20px 0;
                                    text-align: right;
                                    >span{
                                        float: left;
                                        font-size: 14px;opacity: 0.6;
                                    }
                                }
                                .groupingSpan{
                                    margin:0 27px 0px 0;
                                }
                                .projectDataSee{
                                    background: #373b44;
                                    color:#fff;
                                }
                                >span:nth-child(3n+0){
                                    margin-right: 0px;
                                }
                                >span:last-child{
                                    img{
                                        float: left;
                                        margin-top: 15px;
                                    }
                                    >span{
                                        margin-left: 10px;
                                    }
                                }
                            }
                            .projectDataSeeList{
                                background: #373b44;
                                margin-bottom: 20px;
                                padding: 20px 0;
                                max-height: 370px;
                                overflow: auto;
                                li{
                                }
                                p{
                                    margin-bottom: 18px;
                                    margin-left: 32px;
                                    span:first-child{
                                        opacity: 0.6;
                                    }
                                    span:nth-child(2){
                                        margin-left: 10px;
                                    }
                                    span:nth-child(3){
                                        margin-left: 33px;
                                    }
                                    span:last-child{
                                        float: right;
                                        margin-right: 24px;
                                        cursor: pointer;
                                    }
                                    .select{
                                        color: #fc8440;
                                    }
                                }
                            }
                            .grouping_list{
                                margin-top: 20px;
                                background:#494e54;
                                padding:0px;
                                li{
                                    background: #373b44;
                                    padding: 20px 0;
                                    margin-bottom: 20px;

                                }
                                p{
                                    margin-left: 32px;
                                }
                                p:first-child{
                                    margin-bottom: 18px;
                                    span:first-child{
                                        opacity: 0.6;
                                    }
                                }
                                p:last-child{
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 3;
                                    overflow: hidden;
                                }
                                span:nth-child(2){
                                    float:right;
                                    margin:0 25px 0 10px;
                                    color:#fc8440;
                                    cursor: pointer;
                                    text-decoration:underline;
                                }
                                span:nth-child(3){
                                    float:right;
                                    margin:0;
                                }
                            }
                        }
                        >.calss_en{
                            >div{
                                >span{
                                    width: calc(50% - 80px);
                                }
                            }
                        }
                        >:nth-child(7){
                            height: 20px;
                            background: #4e5359;
                            margin:38px 0 33px;
                        }
                        >:nth-child(8){
                            height: 32px;
                            line-height: 32px;
                            margin: 0px 30px 42px 30px;
                            font-size: 22px;
                        }
                        >:nth-child(9){
                            margin: 0 30px;
                            p{
                                margin-bottom: 24px;
                                span{
                                    margin: 0 0px 0 20px;
                                }
                                >:last-child{
                                    display: inline-block;
                                    width: calc(100%);
                                    // float: right;
                                    margin-top: 8px;
                                    .el-progress-bar{
                                        padding: 0px;
                                    }
                                    .el-progress-bar__outer{
                                        background:none;
                                    }
                                }
                            }
                        }
                        .class9_en{
                            p{
                                >:last-child{
                                    width: calc(100% - 330px);
                                }
                            }
                        }
                    }
                }
                .monitor_box{
                    width: 100%;
                    height: calc(100% - 70px);
                    overflow: auto;
                    color: #ffffff;
                    >div{
                        margin-top: 63px;
                        >:nth-child(1){
                            height: 32px;
                            line-height: 32px;
                            margin: 0px 30px 36px 30px;
                            font-size: 22px;
                        }
                        >:nth-child(2){
                            // width: 100%;
                            margin: 0 30px;
                            height: 318px;
                            background: #eeeeee;
                            margin-bottom: 46px
                        }
                        >:nth-child(3){
                            height: 20px;
                            background: #4e5359;
                            margin-bottom: 44px;
                        }
                        >:nth-child(4){
                            height: 32px;
                            line-height: 32px;
                            margin: 0px 30px 25px 30px;
                            font-size: 22px;
                        }
                        >ul{
                            margin: 0 30px;
                            margin-bottom: 30px;
                            li{
                                float: left;
                                width: 25%;
                                text-align: center;
                                >p:first-child{
                                    font-size: 14px;opacity: 0.6;
                                    margin-bottom: 5px;
                                }
                                >p:last-child{
                                    font-size: 20px;
                                }
                            }
                            >:first-child{
                                text-align: left;
                            }
                            >:last-child{
                                text-align: right;
                            }
                        }
                        >:last-child{
                            margin: 0 30px;
                            >p:first-child{
                                font-size: 14px;opacity: 0.6;
                                margin-bottom: 5px;
                            }
                            >p:last-child{
                                font-size: 20px;
                            }
                        }
                    }
                }
            }
            .sideBar_button{
                position: absolute;
                height: 56px;
                top: 50%;margin-top: -28px;
                left: -33px;
                cursor: pointer;
            }
        }
    }
</style>