<template>
  <ScaleBox
      :width="1920"
      :height="1080"
      bgc="transparent"
      :delay="100"
      :isFlat="true"
      @scaleChange="scaleChange"
  >
    <div
        class="main"
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="nav">
        <span class="nav_ti nav_mag">武乡县黄河流域农业面源污染平台</span>
        <span class="nav_tit">治理效果评价和监测一张图</span>
      </div>
      <div class="nav_btn">
        <div class="btn_left">
          <span class="btn_left_time"> {{ nowTime }}</span> <span class="btn_left_tianq" style="z-index: 9999;"></span>
        </div>
        <div class="btn_right">
          <hefentianqi/>
          <img src="@/assets/image/quanping.png" class="quanping" v-if="fullscreen==false" @click="screen" alt="">
          <img src="@/assets/image/quanpingtui.png" class="quanping" @click="screen" alt="" v-else>
          <span class="btn_right_time"><img src="@/assets/image/header.png" @click="dialogVisible = true" class="peoimg"
                                            alt=""></span>
        </div>
      </div>
      <!-- 退出登录弹窗 -->
      <div class="login logintc">
        <el-dialog
            title="退出登录"
            :visible.sync="dialogVisible"
            width="10%"
        >
          <span class="infornameclas">欢迎您，{{ inforname }}！</span>
          <el-button type="primary" @click="handleClosetuichu" class="logintc_tc">
            <img src="@/assets/image/tuichu.png" @click="dialogVisible = true" class="tuichu" alt="">
            退出登录
          </el-button>
          <img src="@/assets/image/sanjiao.png" class="sanjiao" alt="">
        </el-dialog>
      </div>

      <div class="content">
        <img src="@/assets/image/qiehuan2.png" @click="mapTypeSwitch"
             style="position: fixed;top:5.2vw;right:26%;z-index: 999;width:12vw;cursor: pointer;" alt=""
             v-if="mapTypeFlag==true">
        <img src="@/assets/image/qiehuan.png" @click="mapTypeSwitch"
             style="position: fixed;top:5.2vw;right:3%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-else>
        <div id="container"
             style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>
        
        <!-- 左上头部 -->
        <transition enter-active-class="animate__animated animate__backInLeft"
                    leave-active-class="animate__animated animate__backOutLeft">
          <template v-if="mapTypeFlag">
            <div class="baseBoxLeft left baseBoxHjleft">
              <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
              <img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
              <img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
              <img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
              <img src="@/assets/image/sanguang.png" class="sanguang" alt="">
              <img src="@/assets/image/sanguang.png" class="sanguangbt" alt="">
              <div>
                <div class="in1con_lf_tit ">
                  <span class="in1con_lf_titshow1" >{{ briefconCode }}</span>
                  <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                </div>
                <div class="home_lcgk" style="width: 88%;">
                  <vue-seamless-scroll :data="briefconValue" class="wp-1 hp-1" :class-option="showOption">
                    <p v-for="item in briefconValue" :key="item.id">{{ item.detailValue }}</p>
                  </vue-seamless-scroll>
                </div>
                <div class="in1con_lf_img">
                  <div
                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
                    <img src="@/assets/image/xmgk01.png" class="in1con_lf_imgone" alt="">
                    <span class="in1con_lf_imglf_tit">农田污染监测站</span>
                    <span class="in1con_lf_imglf_num">
                      <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
                                      :to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
                    </span>
                  </div>
                  <div
                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
                    <img src="@/assets/image/xmgk02.png" class="in1con_lf_imgone" alt="">
                    <span class="in1con_lf_imglf_tit">畜禽污染监测站</span>
                    <span class="in1con_lf_imglf_num">
                      <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
                                      :to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
                    </span>
                  </div>
                  <div
                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
                    <img src="@/assets/image/xmgk04.png" class="in1con_lf_imgone" alt="">
                    <span class="in1con_lf_imglf_tit">小流域污染监测站</span>
                    <span class="in1con_lf_imglf_num">
                      <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
                                      :to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
                    </span>
                  </div>
                  <div
                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
                    <img src="@/assets/image/xmgk03.png" class="in1con_lf_imgone" alt="">
                    <span class="in1con_lf_imglf_tit">长期定位监测点位</span>
                    <span class="in1con_lf_imglf_num">
                      <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
                                      :to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
                    </span>
                  </div>
                </div>
              </div>
              <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
              <div>
                <div class="in1con_lf_tit ">
                  <span class="in1con_lf_titshow1">气候环境</span>
                  <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                </div>
                <div class="qhhjcov">
                  <div style="width:96%;margin:0 auto;margin-top:12px;">
                    <div class="qhhjcov_lf" v-for="item in climate_env" :key="item.id">
                      <img :src="urlimg+item.detailPics" class="qhhjcov_lfimg" alt="">
                      <span class="qhhjcov_lf_tit">{{ item.detailCode }}</span>
                      <span class="qhhjcov_time"> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
                                                                  :to="Number(item.detailValue)" :key="item.detailValue"
                                                                  duration="3000"></animate-number>{{ item.detailValue2 }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
              <div>
                <div class="in1con_lf_tit ">
                  <span class="in1con_lf_titshow1">水利情况</span>
                  <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                </div>
                <div class="in1con_lf_img">
                  <div
                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse"
                      v-for="legth in water_conser" :key="legth.id">
                    <img :src="urlimg+legth.detailPics" class="in1con_lf_imgone" alt="">
                    <span class="in1con_lf_imglf_tit">{{ legth.detailCode }}</span>
                    <span class="in1con_lf_imglf_num"> <animate-number class="in1con_lf_imglf_num_jix" ref="reNum"
                                                                       from="0" :to="Number(legth.detailValue)"
                                                                       :key="legth.detailValue"
                                                                       duration="3000"></animate-number>{{ legth.detailValue2 }}</span>
                  </div>
                </div>
              </div>
              <div class="home_dlhj">
                <el-carousel arrow="never" height="150px" style="    bottom: 20px;">
                  <el-carousel-item v-for="value in roll_info" :key="value.id">
                    <div class="sx_cov">
                      <span class="sx_covtit">
                        {{ value.infoName }}
                      </span>
                      <ul v-for="ite in value.detailList" :key="ite.id">
                        <li class="sx_cov_lt">
                          <span class="sx_cov_lt_tit">{{ ite.detailCode }}</span>
                          <span class="sx_cov_lt_num">
                            <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="ite.detailValue"
                                            :key="ite.detailValue" duration="3000"></animate-number>
                            {{ ite.detailValue2 }}
                          </span>
                        </li>
                      </ul>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </template>
        </transition>
        
        <!-- 地图左下图例 -->
        <div v-if="mapTypeFlag==true" class="mapTuLi">
          <div class="scdlist" @click="switchIcon('livestock')">
            <img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
            <span class="scdlist_tit">畜禽污染监测站</span>
          </div>
          <div class="scdlist" @click="switchIcon('orient')">
            <img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
            <span class="scdlist_tit">农田污染监测站</span>
          </div>
          <div class="scdlist" @click="switchIcon('watershed')">
            <img src="@/assets/image/waterlive.png" class="xcdimg" alt="">
            <span class="scdlist_tit">小流域监测站</span>
          </div>
          <div class="scdlist" @click="switchIcon('soil')">
            <img src="@/assets/image/soil.png" class="xcdimg" alt="">
            <span class="scdlist_tit">长期定位监测站</span>
          </div>
          <div class="scdlist" @click="switchIcon('flowmeter')">
            <img src="@/assets/image/liuliang.png" class="xcdimg" alt="">
            <span class="scdlist_tit">微功率雷达监测</span>
          </div>
          <div class="scdlist" @click="switchIcon('vehicle')">
            <img src="@/assets/image/vehicle.png" class="xcdimg" alt="">
            <span class="scdlist_tit">危废车辆信息</span>
          </div>
        </div>
        
        <transition enter-active-class="animate__animated animate__backInUp"
                    leave-active-class="animate__animated animate__backOutDown">
          <template v-if="mapTypeFlag">
            <div class="zlxg_btm">
              <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
              <img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
              <img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
              <img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
              <img src="@/assets/image/sanguang.png" class="sanguang2" alt="">
              <img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
              <div v-loading="tabsLoading" element-loading-text=" "
                   element-loading-background="rgba(0, 0, 0, 0.8)">
                <span class="zywr_titshow">治理效果分析</span>
                <el-tooltip class="item" effect="dark"
                            :content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'"
                            placement="top-start">
                </el-tooltip>
                <el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
                  <el-option
                      v-for="item in dateTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
                <el-tabs type="card" @tab-click="doGetIndexSummry" v-show="dataTypeEchart">
                  <el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationShortName?item.stationShortName:item.stationName" lazy>
                    <template>
                      <div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div>
                    </template>
                  </el-tab-pane>
                </el-tabs>
                <el-tabs type="card" @tab-click="doGetIndexSummry" v-show="!dataTypeEchart">
                  <el-tab-pane v-for="(item,index) in riverList" :label="(item.stationShortName?item.stationShortName:item.stationName).split('-')[0]" lazy>
                    <template>
                      <div :id="`myChartDiv2${index}`" style="height:12vw;width:100%;"></div>
                    </template>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </template>
        </transition>
        
        <!-- 右侧展示栏 -->
        <transition enter-active-class="animate__animated animate__backInRight"
                    leave-active-class="animate__animated animate__backOutRight">
          <template v-if="mapTypeFlag">
            <div class="leftBox right baseBoxHjleft" style="width:22.5%;overflow: hidden;">
              <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
              <img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
              <img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
              <img src="@/assets/image/kuang_youxia.png" class="in2con_zyx" alt="">
              <img src="@/assets/image/sanguang.png" class="sanguang" alt="">
              <img src="@/assets/image/sanguang.png" class="sanguangbt" alt="">
              <div>
                <div class="home_dlhj">
                  <span class="in1con_lf_titshow12" >监测指标统计</span>
                  <el-carousel :autoplay="false" indicator-position="none" arrow="always" height="320px">
                    <el-carousel-item v-for="item in stationInfoList" :key="item.id">
                      <div class="in1con_lf_tit " >
                        <span class="in1con_lf_titshow1 in1con_lf_titshow13" style="cursor: pointer"
                              @click="jumpStationPage(item)">{{ item.stationName }}</span>
                        <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                      </div>
                      <div class="jczcov">
                        <viewer :images="item.deviceList" v-for="value in item.deviceList" :key="value.id">
                          <div class="jczcov_lf" v-for="(imglist,index) in item.stationPic" :key="index">
                            <img :src="urlimg+imglist" class="jczimg" alt="">
                          </div>
                        </viewer>
                      </div>
                      <div class="jczbtm"  @click="showEchartDialog($event, 1)" >
                        <vue-seamless-scroll :data="item.wrwcode" class="wp-1 hp-1" :class-option="classWrwcod">
                          <div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index"
                               :data-item="JSON.stringify(item)" :data-survItem="valist.tylename" >
                            <img :src="urlimg + valist.icon" class="tpimg" alt="">
                            <div class="jczbtm_lf_rt">
                              <span class="jczbtm_lf_rttit">{{ valist.name }}</span>
                              <span class="jczbtm_lf_rtnum">
                                <span class="in1con_lf_imglf_num_jix">{{valist.code?parseFloat((valist.code-0).toFixed(2)):'--'}}</span>
                                {{ valist.unit }}
                              </span>
                            </div>
                          </div>
                        </vue-seamless-scroll>
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
              <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
              <div>
                <div class="in1con_lf_tit " style="cursor: pointer;"  @click="taizhangDialogShowFlag=true">
                  <span class="in1con_lf_titshow1">核算与评估</span>
                  <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                </div>
                <div class="mywrcov">
                  <div class="mywrcov_one mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTp')">
                    <span class="mywrcov_onetit">{{ effect_assess0.detailCode }}</span>
                    <span class="mywrcov_onenum">
                      <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{  effect_assess0.detailValue }}</span>
                    </span>
                  </div>
                  <div class="mywrcov_two mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTn')">
                    <span class="mywrcov_onetit">{{ effect_assess1.detailCode }}</span>
                    <span class="mywrcov_onenum">
                      <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span>
                    </span>
                  </div>
                  <div class="mywrcov_three mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterCod')">
                    <span class="mywrcov_onenum" style="margin-top: 1vw;">
                      <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span>
                    </span>
                    <span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
                  </div>
                  <div class="mywrcov_four mywrcov_onehover" @click="taizhangDialogShowFlag=true">
                    <span class="mywrcov_onenum" style="margin-top: 1vw; cursor: pointer">
                      <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span>
                    </span>
                    <span class="mywrcov_onetit">{{ effect_assess3.detailCode }}</span>
                  </div>
                  <div class="mywrcovcen">
                    <span class="mywrcovcen_tit" v-if="effect_assess4.detailValue=='成功'">优</span>
                    <span class="mywrcovcen_tit" v-else>{{ effect_assess4.detailValue }}</span>
                    <span class="mywrcovcen_con">{{ effect_assess4.detailCode }}</span>
                  </div>
                </div>
              </div>
              <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
              <div>
                <div class="in1con_lf_tit ">
                  <span class="in1con_lf_titshow1">实时数据展示</span>
                  <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                </div>
                <div style="height:280px;overflow: hidden" @click="showEchartDialog($event, 1)">
                  <vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="classOption" :step="1">
                    <div class="jcsssj" v-for="(item, index) in listData" :key="index" :data-item="JSON.stringify(item)" :data-survItem="item.survItem" >
                      <img src="@/assets/image/xian.png" class="jcsssj_xian" alt="">
                      <div class="jcsssj_rt">
                        <div style="float: left;width: 70%;">
                          <span class="jcsssj_rt_tit">{{ item.stationName?item.stationName:item.deployRemark?item.deployRemark:'土壤监测站' }}</span>
                          <span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
                          <span class="jcsssj_rt_numsy">
                            <animate-number class="in1con_lf_imglf_num_jix" ref="myNum" from="0" :to="Number(item.value)"
                                            :key="item.value" duration="3000" :formatter="formatter"></animate-number>
                            {{ item.unit }}
                          </span>
                        </div>
                        <span class="jcsssj_rt_time">{{ item.dataDateTime?item.dataDateTime.substring(0,16):'--' }}</span>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </template>
        </transition>
      </div>
      
      <!-- 监测站弹窗 -->
      <el-dialog :visible.sync="qcdtdialogTableVisible">
        <div class="jctc" id="modal1123123">
          <div class="in1con_lf_tit ">
            <img src="@/assets/image/tctiimg.png" class="tctiimg" alt="">
            <span class="in1con_lf_titshow">{{ qcdtinfor.stationName }}</span>
            <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
          </div>
          <div class="jctcvban1">
            <img src="@/assets/image/jctctiao.png" class="jctctiao" alt="">
          </div>
          <div class="jctc_add">
            <img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
            <span class="jctcvban_tit">站点位置：{{ qcdtinfor.stationLocation }}</span>
          </div>
          <div class="jctc_add">
            <img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
            <span class="jctcvban_tit">建站时间：{{ qcdtinfor.buildTime }}</span>
          </div>
          <div class="jctc_add">
            <img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
            <span class="jctcvban_tit">设备数量：<span style="color: #f1ff0d;">{{ qcdtinfor.deviceCount }}</span> </span>
          </div>
          <div class="jctc_add">
            <img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
            <span class="jctcvban_tit">运行状态：<span style="color: #f1ff0d;">正常</span> </span>
          </div>
          <div class="jctc_add">
            <img src="@/assets/image/jctcicon4.png" class="jctcicon1" alt="">
            <span class="jctcvban_tit">监测指标</span>
          </div>
          <div style="margin-left: 3%;">
            <span class="jctc_text" v-for="(item,index) in qcdtinfor.survColorItems" :key="index"
                  :style="{background:(item.color)}">{{ item.name }}</span>
          </div>
          <img src="@/assets/image/ljjr.png" class="ljjr" @click="jumpStationPage(qcdtinfor)" alt="">
        </div>
      </el-dialog>
      
      <!-- 企业弹窗 -->
      <el-dialog :visible.sync="qyinfordtdialogTableVisible">
        <div class="tz_cov" style="height:25vw;">
          <img src="@/assets/image/guanbi.png" class="guanbiann" @click="qcguanbi" alt="">
          <div class="tz_cov_top">
            <span class="tz_cov_top_tit">企业简介</span>
          </div>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple" style="width:80%;margin-left:10%;">
                <el-carousel indicator-position="outside">
                  <el-carousel-item v-for="(item,index) in qyinformation.extPics" :key="index">
                    <viewer :images="qyinformation.extPics">
                      <img :src="urlimg + item" alt="" style="width:100%;height:100%;">
                    </viewer>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <span class="tctit">{{ qyinformation.name }}</span>
                <span class="tcgldw">{{ qyinformation.notes }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
      
      <!-- 危废车辆菜单 - 自定义点击伸缩 -->
      <div class="vehicle-dropdown-wrapper">
        <div class="vehicle-dropdown-btn-dark" @click.stop="toggleVehicleDropdown">
          <span>危废车辆 ({{ vehicleList.length }})</span>
          <i :class="isVehicleDropdownOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" class="el-icon--right"></i>
        </div>
        
        <div v-show="isVehicleDropdownOpen" class="vehicle-dropdown-menu-dark">
          <!-- 全部点位选项 -->
          <div class="vehicle-dropdown-item-dark" @click="showAllVehiclePoints">
            <span class="vehicle-dot-dark all-dot">●</span>
            <span style="flex:1; color: #FFD700;">📍 全部点位</span>
            <span style="font-size:12px;color:#4a8ba8;">({{ vehicleList.length }})</span>
          </div>
          
          <!-- 关闭点位选项 -->
          <div class="vehicle-dropdown-item-dark" @click="hideAllVehiclePoints">
            <span class="vehicle-dot-dark close-dot">●</span>
            <span style="flex:1; color: #ff6b6b;">✕ 关闭点位</span>
          </div>
          
          <div class="vehicle-dropdown-divider"></div>
          
          <!-- 车辆列表 -->
          <div 
            v-for="(item, index) in vehicleList"
            :key="index"
            class="vehicle-dropdown-item-dark"
            @click="handleVehicleSelect(item)"
          >
            <span class="vehicle-dot-dark">●</span>
            <span style="flex:1;">{{ item.veNotes || '未知车辆' }}</span>
          </div>
        </div>
      </div>

    </div>
    <SoilDialog  v-if="soidShowFlag" :soilDataId="soilDataId" @close="soidShowFlag=false"/>
    <LiulDialog  v-if="liulShowFlag" :liulDataId="liulDataId" @close="liulShowFlag=false"/>
    <SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
    <TaizhangDialog v-if="taizhangDialogShowFlag" :resourcedirect="resourcedirect"  @close="taizhangDialogShowFlag=false"/>
    <!-- 轨迹弹窗组件 -->
    <zhnjCov 
      ref="trajectoryComponent"
      :vehicle-data="selectedVehicle"
      :visible.sync="trajectoryDialogVisible"
      @close="trajectoryDialogVisible = false"
    />
  </ScaleBox>
</template>

<script>
import ScaleBox from 'vue2-scale-box'
import {
  displayInfo,
  getAllstationAndPestLight,
  getIndexSummry,
  getNewestData,
  getPollutionDict,
  stationInfo,
  vehicleList,
  gpsRecordPage,
} from '@/api';
import vueSeamlessScroll from 'vue-seamless-scroll'
import hefentianqi from '@/pages/weather/weather.vue'
import SoilDialog from '@/components/SoilDialog.vue'
import LiulDialog from '@/components/LiulDialog.vue'
import zhnjCov from '@/components/zhnjCov.vue';
import {_colors} from '@/utils/color.js'
import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
import TaizhangDialog from "@/components/TaizhangDialog.vue";

export default {
  name: 'mainHome',
  components: {
    TaizhangDialog,
    SingleEchartDialog,
    vueSeamlessScroll,
    hefentianqi,
    ScaleBox,
    SoilDialog,
    LiulDialog,
    zhnjCov,
  },
  data() {
    return {
      taizhangDialogShowFlag: false,
      singleEchartDialogShowFlag: false,
      singleEchartData: null,
      aMap: null,
      dataTypeEchart: true,
      markersOrient: [],
      markersSoil: [],
      markersOther: [],
      markersFlowmeter: [],
      markersVehicle: [],
      vehicleMarkerMap: new Map(), // 存储车辆id和marker的映射
      lastClickIcon: '',
      urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
      mapTypeFlag: true,
      nowTime: '',
      briefconCode: "",
      briefconValue: [],
      climate_env: [],
      water_conser: [],
      roll_info: [],
      stationInfoList: [],
      wrwcode: [],
      getPollutionDictCover: [],
      effect_assess0: '',
      effect_assess0Value: 0,
      effect_assess1: '',
      effect_assess2: '',
      effect_assess3: '',
      effect_assess4: '',
      pestLightCount: 0,
      stationCount0: 0,
      stationCount1: 0,
      dialogTableVisible: false,
      qcdialogTableVisible: false,
      qcdtdialogTableVisible: false,
      qyinfordtdialogTableVisible: false,
      shipdialogTableVisible: false,
      qyinformation: '',
      listData: [],
      summryAllData: null,
      echartInit: {},
      riverList: [],
      qcdtinfor: '',
      resourcedirect: [],
      dialogVisible: false,
      inforname: '',
      loading: true,
      zoomData: 14,
      isShowLightNumber: '1',
      switchValue: true,
      fullscreen: false,
      echartIndex: 0,
      dateType: 'monthDays',
      dateTypeOptions: [{
        value: 'dayhours',
        label: '24小时'
      }, {
        value: 'monthDays',
        label: '30天'
      }, {
        value: 'yearMonth',
        label: '12个月'
      }],
      soidShowFlag: false,
      liulShowFlag:false,
      soilDataId: '',
      liulDataId:'',
      tabsLoading: false,
      lastZIndex: 1,
      vehicleList: [],
      // 车辆位置相关
      vehicleMarkers: [],
      currentVehicleInfo: null,
      vehicleLocationMarker: null,
      vehicleInfoWindow: null,
      // 轨迹弹窗相关
      selectedVehicle: null,
      trajectoryDialogVisible: false,
      // 下拉菜单控制
      isVehicleDropdownOpen: false,
    };
  },
  created() {
  },

  computed: {
    classOption() {
      return {
        step: 0.6,
        limitMoveNum: 3,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000,
      };
    },
    classWrwcod() {
      return {
        step: 0.2,
        limitMoveNum: 6,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000,
      };
    },
    showOption() {
      return {
        step: 0.5,
        limitMoveNum: 0,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000,
      };
    },
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        this.initMap(this.zoomData, this.isShowLightNumber);
      })
    }, 2000)
    this.getNowTime();
    this.indexleft();
    this.getNewestDataList();
    this.getPollutionDictList();
    this.infor();
    this.indexinfor();
    this.doGetIndexSummry({index: this.echartIndex});
    this.vehicleListData();
  },
  methods: {
    // ==================== 危废车辆下拉菜单方法 ====================
    
    // 切换下拉菜单
    toggleVehicleDropdown() {
      this.isVehicleDropdownOpen = !this.isVehicleDropdownOpen;
    },
    
    // 显示全部点位 - 使用veLat和veLong
    showAllVehiclePoints() {
      // 先清除之前的所有车辆标记
      this.markersVehicle.forEach(marker => {
        marker.setMap(null);
      });
      this.markersVehicle = [];
      this.vehicleMarkerMap.clear();
      
      // 重新从vehicleList添加所有车辆点位
      let addedCount = 0;
      this.vehicleList.forEach(item => {
        const lat = parseFloat(item.veLat);
        const lng = parseFloat(item.veLong);
        
        if (!isNaN(lat) && !isNaN(lng) && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
          const marker = new AMap.Marker({
            position: [lng, lat],
            icon: new AMap.Icon({
              size: new AMap.Size(30, 42),
              image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
              imageSize: new AMap.Size(30, 42)
            }),
            offset: new AMap.Pixel(-15, -42),
            zIndex: 1002,
            extData: { vehicleInfo: item }
          });
          
          // 点击标记弹出信息窗口
          marker.on('click', (e) => {
            const data = e.target.getExtData();
            if (data && data.vehicleInfo) {
              // 先获取车辆位置点
              const point = {
                jingdu: data.vehicleInfo.veLong,
                weidu: data.vehicleInfo.veLat,
                createTime: data.vehicleInfo.updateTime || new Date().toISOString()
              };
              this.showVehicleInfoWindow(point, data.vehicleInfo);
            }
          });
          
          marker.setMap(this.aMap);
          this.markersVehicle.push(marker);
          this.vehicleMarkerMap.set(item.id, marker);
          addedCount++;
        }
      });
      
      if (addedCount > 0) {
        this.aMap.setFitView(this.markersVehicle, false, [200, 500, 360, 360], 16);
        this.$message.success(`显示全部 ${addedCount} 个危废车辆点位`);
      } else {
        this.$message.warning('暂无有效的危废车辆点位数据');
      }
      this.isVehicleDropdownOpen = false;
    },
    
    // 关闭点位显示
    hideAllVehiclePoints() {
      this.markersVehicle.forEach(marker => {
        marker.setMap(null);
      });
      this.markersVehicle = [];
      this.vehicleMarkerMap.clear();
      // 同时清除车辆位置标记
      this.clearVehicleMarker();
      this.$message.info('已关闭危废车辆点位显示');
      this.isVehicleDropdownOpen = false;
    },
    
    // ==================== 危废车辆位置相关方法 ====================
    
    // 危化车辆点击 - 从下拉列表选择
    handleVehicleSelect(item) {
      this.currentVehicleInfo = item;
      
      // 清除之前的标记
      this.clearVehicleMarker();
      
      const vehicleName = item.vePlate || item.plateNumber || '车辆';
      
      // 如果有经纬度直接定位
      if (item.veLat && item.veLong) {
        const lat = parseFloat(item.veLat);
        const lng = parseFloat(item.veLong);
        if (!isNaN(lat) && !isNaN(lng)) {
          const point = {
            jingdu: item.veLong,
            weidu: item.veLat,
            createTime: item.updateTime || new Date().toISOString()
          };
          this.locateToVehicle(point, item);
          this.$message({
            message: `定位到 ${vehicleName}`,
            type: 'success'
          });
          this.isVehicleDropdownOpen = false;
          return;
        }
      }
      
      // 如果没有经纬度，尝试通过gpsRecordPage获取
      if (item.gpsId) {
        gpsRecordPage({
          pageNo: 1,
          pageSize: 1000,
          gpsId: item.gpsId,
        }).then(res => {
          if (res.result && res.result.records && res.result.records.length > 0) {
            let trackData = res.result.records;
            
            trackData = trackData.filter(record => {
              const lng = parseFloat(record.jingdu || record.longitude || record.lng || record.lon);
              const lat = parseFloat(record.weidu || record.latitude || record.lat);
              return !isNaN(lng) && !isNaN(lat) && 
                     lng >= -180 && lng <= 180 && 
                     lat >= -90 && lat <= 90;
            });
            
            if (trackData.length === 0) {
              this.$message.warning(`${vehicleName} 的位置数据无效，请检查数据`);
              return;
            }
            
            trackData.sort((a, b) => {
              const timeA = a.createTime || a.server_time || a.updateTime || 0;
              const timeB = b.createTime || b.server_time || b.updateTime || 0;
              return new Date(timeA) - new Date(timeB);
            });
            
            const latestPoint = trackData[trackData.length - 1];
            this.locateToVehicle(latestPoint, item);
            
            this.$message({
              message: `成功加载 ${vehicleName} 的最新位置`,
              type: 'success'
            });
          } else {
            this.$message({
              message: `${vehicleName} 暂无位置数据`,
              type: 'warning'
            });
          }
        }).catch(err => {
          console.error('获取位置数据失败:', err);
          this.$message({
            message: '获取位置数据失败，请稍后重试',
            type: 'error'
          });
        });
      } else {
        this.$message.warning(`${vehicleName} 没有GPS设备ID和位置信息`);
      }
      this.isVehicleDropdownOpen = false;
    },
    
    // 定位到车辆位置
    locateToVehicle(point, vehicleInfo) {
      if (!this.aMap) {
        console.error('地图未初始化');
        return;
      }
      
      const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
      const lat = parseFloat(point.weidu || point.latitude || point.lat);
      
      if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
        console.error('无效的经纬度:', lng, lat);
        this.$message.warning('车辆位置数据无效');
        return;
      }
      
      this.addVehicleLocationMarker(lng, lat, point, vehicleInfo);
      
      this.aMap.panTo([lng, lat]);
      setTimeout(() => {
        this.aMap.setZoomAndCenter(16, [lng, lat]);
      }, 300);
      
      console.log(`定位到车辆位置: ${lng}, ${lat}`);
    },
    
    // 添加车辆位置标记
    addVehicleLocationMarker(lng, lat, point, vehicleInfo) {
      if (isNaN(lng) || isNaN(lat)) {
        console.error('无效的经纬度:', lng, lat);
        return;
      }
      
      this.removeLocationMarker();
      this.closeVehicleInfoWindow();
      
      const locationMarker = new AMap.Marker({
        position: [lng, lat],
        icon: new AMap.Icon({
          size: new AMap.Size(30, 42),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
          imageSize: new AMap.Size(30, 42)
        }),
        offset: new AMap.Pixel(-15, -42),
        zIndex: 1002,
        extData: { point: point, vehicleInfo: vehicleInfo }
      });
      
      locationMarker.on('click', (e) => {
        const data = e.target.getExtData();
        this.showVehicleInfoWindow(data.point, data.vehicleInfo);
      });
      
      locationMarker.setMap(this.aMap);
      this.vehicleLocationMarker = locationMarker;
      this.vehicleMarkers.push(locationMarker);
    },
    
    // 显示车辆信息窗口
    showVehicleInfoWindow(point, vehicleInfo) {
      this.closeVehicleInfoWindow();
      
      const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
      const lat = parseFloat(point.weidu || point.latitude || point.lat);
      
      const vehicleName = vehicleInfo.veNotes || vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
      
      const infoContent = `
        <div style="
          padding: 16px 20px; 
          max-width: 360px; 
          min-width: 250px; 
          background: rgba(0, 20, 40, 0.95) !important; 
          border-radius: 8px; 
          border: 1px solid rgba(0, 212, 255, 0.3);
          box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
          backdrop-filter: blur(10px);
          color: #8bb4d0;
          cursor: pointer;
        " class="vehicle-info-window">
          <div style="display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.15); padding-bottom: 10px;">
            <span style="font-size: 28px; margin-right: 12px;">🚛</span>
            <span style="font-size: 18px; font-weight: bold; color: #FFD700;">${vehicleName}</span>
          </div>
          <div style="font-size: 13px; line-height: 2.2;">
            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
              <span style="color: #4a8ba8;">设备ID：</span>
              <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'}</span>
            </div>
            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
              <span style="color: #4a8ba8;">车牌号：</span>
              <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'}</span>
            </div>
            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
              <span style="color: #4a8ba8;">最新时间：</span>
              <span style="font-weight: 500; color: #ffffff;">${point.createTime || point.server_time || point.updateTime || '--'}</span>
            </div>
            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
              <span style="color: #4a8ba8;">经度：</span>
              <span style="font-weight: 500; color: #00d4ff;">${lng.toFixed(6)}</span>
            </div>
            <div style="display: flex; justify-content: space-between; padding: 3px 0;">
              <span style="color: #4a8ba8;">纬度：</span>
              <span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
            </div>
          </div>
          <div style="margin-top: 10px; text-align: center; font-size: 12px; color: #00d4ff; border-top: 1px solid rgba(0, 212, 255, 0.1); padding-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;">
            <span>📍 点击查看车辆轨迹</span>
            <span style="font-size: 16px;">→</span>
          </div>
        </div>
      `;
      
      this.vehicleInfoWindow = new AMap.InfoWindow({
        content: infoContent,
        offset: new AMap.Pixel(0, -35),
        autoMove: true,
        closeWhenClickMap: true,
        isCustom: true,
      });
      
      if (!isNaN(lng) && !isNaN(lat)) {
        this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
        this.vehicleMarkers.push(this.vehicleInfoWindow);
        
        setTimeout(() => {
          const infoWindowEl = document.querySelector('.vehicle-info-window');
          if (infoWindowEl) {
            infoWindowEl.addEventListener('click', (e) => {
              if (e.target.closest('.vehicle-info-window')) {
                // 获取车辆GPS数据
                this.getVehicleGpsData(vehicleInfo);
              }
            });
          }
          
          const infoWindowContent = document.querySelector('.amap-info-content');
          if (infoWindowContent) {
            infoWindowContent.style.background = 'transparent !important';
            infoWindowContent.style.padding = '0 !important';
          }
        }, 50);
      }
    },
    
    // 获取车辆GPS数据并打开轨迹
    getVehicleGpsData(vehicleInfo) {
      if (!vehicleInfo.gpsId) {
        this.$message.warning('该车辆没有GPS设备ID');
        return;
      }
      
      // 构建车辆数据
      const vehicleData = {
        gpsId: vehicleInfo.gpsId,
        veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆',
        vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--',
        veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--',
        vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆',
        deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '',
      };
      
      this.closeVehicleInfoWindow();
      this.qcdtdialogTableVisible = false;
      
      this.selectedVehicle = vehicleData;
      this.trajectoryDialogVisible = true;
    },
    
    // 打开轨迹弹窗
    openTrajectoryDialog(vehicleInfo, point) {
      const vehicleData = {
        gpsId: vehicleInfo.gpsId || vehicleInfo.gpsDeviceId,
        veNotes: vehicleInfo.veNotes || vehicleInfo.vePlate || '车辆',
        vePlate: vehicleInfo.vePlate || vehicleInfo.plateNumber || '--',
        veDriver: vehicleInfo.veDriver || vehicleInfo.driverName || '--',
        vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆',
        deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '',
        latitude: point.weidu || point.latitude || point.lat || 0,
        longitude: point.jingdu || point.longitude || point.lng || point.lon || 0
      };
      
      this.closeVehicleInfoWindow();
      this.qcdtdialogTableVisible = false;
      
      this.selectedVehicle = vehicleData;
      this.trajectoryDialogVisible = true;
      
      console.log('打开轨迹弹窗，车辆数据:', vehicleData);
    },
    
    // 关闭信息窗口
    closeVehicleInfoWindow() {
      if (this.vehicleInfoWindow) {
        this.vehicleInfoWindow.close();
        this.vehicleInfoWindow = null;
      }
    },
    
    // 移除位置标记
    removeLocationMarker() {
      if (this.vehicleLocationMarker) {
        this.vehicleLocationMarker.setMap(null);
        this.vehicleLocationMarker = null;
      }
    },
    
    // 清除车辆标记
    clearVehicleMarker() {
      this.vehicleMarkers.forEach(marker => {
        if (marker.setMap) {
          marker.setMap(null);
        } else if (marker.close) {
          marker.close();
        }
      });
      this.vehicleMarkers = [];
      
      this.removeLocationMarker();
      this.closeVehicleInfoWindow();
    },
    
    // 危化车辆列表
    vehicleListData() {
      vehicleList({
        pageNo: 1,
        pageSize: 100,
      }).then(res => {
        if (res.code === 200 && res.result) {
          this.vehicleList = res.result.records || [];
          // 默认显示全部点位
          this.$nextTick(() => {
            this.showAllVehiclePoints();
          });
        } else {
          this.vehicleList = [];
        }
      }).catch(err => {
        this.vehicleList = [];
      });
    },
    
    formatter: function (num) {
      return num.toFixed(3)
    },
    sbdscdBtn() {
      var url = 'https://wlw.zklsfk.com/admin/index?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiLmsrPmtKXluILlhpzkuJrlhpzmnZHlsYAiLCJleHAiOjE2ODk2MjU0ODUsImlhdCI6MTY4ODEzMDI1NiwianRpIjoiNTcxMTY5MTAtODczZC00ZjI1LWFkNzItZjA2NWU3NmFkNDIwIn0.52iF21xidGFllgfcsSgN-cLlysI0W7Ad8ie48LsV9x4'
      window.open(url, "_blank");
    },
    mapTypeSwitch() {
      this.mapTypeFlag = !this.mapTypeFlag
      if (this.mapTypeFlag == true) {
        this.zoomData = 14
        if (this.isShowLight == undefined) {
          let isShowLight = '1'
          this.initMap(this.zoomData, isShowLight);
        } else {
          let isShowLight = this.isShowLight
          this.initMap(this.zoomData, isShowLight);
        }
        setTimeout(() => {
          this.$nextTick(() => {
            this.doGetIndexSummry({index: 0});
          })
        }, 1000)
      } else {
        this.zoomData = 15
        if (this.isShowLight == undefined) {
          this.initMap(this.zoomData, '1');
        } else {
          this.initMap(this.zoomData, this.isShowLight);
        }
      }
    },
    indexleft() {
      displayInfo().then(res => {
        setTimeout(() => {
          this.loading = false
        }, 1000)
        this.resourcedirect = res.result.resource_direct
        this.briefconCode = res.result.project_brief.detailList[0].detailCode
        this.briefconValue = res.result.project_brief.detailList
        this.pestLightCount = res.result.pestLightCount
        this.stationCount0 = res.result.stationCount[0].stationCount
        this.climate_env = res.result.climate_env.detailList
        this.water_conser = res.result.water_conser.detailList
        this.roll_info = res.result.roll_info
        this.effect_assess0 = res.result.effect_assess.detailList[0]
        this.effect_assess0Value = res.result.effect_assess.detailList[0].detailValue
        this.effect_assess1 = res.result.effect_assess.detailList[1]
        this.effect_assess2 = res.result.effect_assess.detailList[2]
        this.effect_assess3 = res.result.effect_assess.detailList[3]
        this.effect_assess4 = res.result.effect_assess.detailList[4]
      })
    },
    indexinfor() {
      stationInfo().then(res => {
        this.stationInfoList = res.result
        if (this.stationInfoList) {
          for (var i = 0; i < this.stationInfoList.length; i++) {
            let objlist = this.stationInfoList[i].newestData
            this.stationInfoList[i].wrwcode = []
            objlist.map(item => {
              this.stationInfoList[i].wrwcode.push({
                name: item.name,
                icon: item.icon,
                unit: item.unit,
                color: item.color,
                code: item.value,
                tylename: item.survItem
              })
            });
          }
        }
      })
    },
    switchBtn(value) {
      console.log("value++++++++", value)
      if (value == true) {
        let isShowLight = '1'
        this.isShowLight = isShowLight
        this.initMap(this.zoomData, isShowLight)
      } else {
        let isShowLight = ''
        this.isShowLight = isShowLight
        this.initMap(this.zoomData, isShowLight)
      }
    },
    scaleChange(e) {
      console.log("ee", e)
    },
    showEchartDialog(item, survItem) {
      if(survItem === 1){
        let dom = item.target.closest(".jczbtm_lf");
        if(!dom){
          dom = item.target.closest(".jcsssj");
        }
        if (dom) {
          let item2 = dom.dataset.item
          survItem = dom.dataset.survitem
          if(item2){
            item2=JSON.parse(item2)
          }else{
            item2 = null;
          }
          if(item2 && survItem){
            this.showEchartDialog(item2, survItem)
          }
        }
        return;
      }
      this.singleEchartData = {
        stationCode: item.stationCode,
        deployId: item.deployId,
        survItem: survItem
      }
      setTimeout(() => {
        this.singleEchartDialogShowFlag = true;
      }, 200)
    },
    initMap(zoomnum, isShowLight) {
      let that = this;
      getAllstationAndPestLight(isShowLight).then(res => {
        that.aMap = new AMap.Map('container', {
          viewMode: '3D',
          resizeEnable: true,
          zoom: zoomnum,
          center: [112.83100231396601, 36.872032399813556],
          mapStyle: 'amap://styles/blue',
          dragEnable: true,
          jogEnable: true,
          keyboardEnable: true,
          animateEnable: true,
          defaultCursor: 'pointer',
          turboMode: false,
          showBuildingBlock: true,
          showIndoorMap: false,
          expandZoomRange: true,
          forceVector: true,
          scale: (2 , 2.5)
        });
        that.aMap.on('complete', (e) => {
          var markerData = res.result;
          let Marker = markerData.filter(ele => ele.type != 'light').sort((a,b) => {
            if (b.type=='soil') return 1;
            if (b.type!='soil') return -1;
            return 0;
          });
          console.log(Marker,'Marker')
          Marker.map(item => {
            let marker = new AMap.Marker({
              zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1),
              icon: this.urlimg + item.picUrl,
              position: [item.longitude, item.latitude],
              offset: new AMap.Pixel(item.width, item.height),
              title: item.name,
              extData: {
                ids: item.ids,
                extPics: item.extPics,
                notes: item.notes,
                name: item.name,
                item: item,
                stationType: item.type
              }
            });
            if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {
              marker.on('click', e => {
                let indexnumb = e.target.getExtData().ids.slice(-1);
                this.qcdtinfor = this.stationInfoList[indexnumb]
                this.qcdtdialogTableVisible = true
              })
              this.markersOrient.push(marker)
            } else if(item.type == 'soil'){
              marker.on('click', e => {
                this.soilDataId = e.target.getExtData()
                this.soidShowFlag = true
              })
              this.markersSoil.push(marker);
            } else if(item.type == '10_flowmeter'){
              marker.on('click', e => {
                this.liulDataId = e.target.getExtData()
                this.liulShowFlag = true
              })
              this.markersFlowmeter.push(marker);
              this.markersSoil.push(marker);
            } else {
              this.markersOther.push(marker)
            }
            marker.setMap(that.aMap);
          })
          this.$forceUpdate();
          that.aMap.setFitView();
          setTimeout(() => {
            that.aMap.setFitView(null, false, [130, 380, 480, 480], 16);
          }, 2000)
        });
      })
    },
    getNewestDataList() {
      getNewestData().then(res => {
        let tempArray = [];
        Object.keys(res.result).map(key => {
          console.log(key)
          tempArray = tempArray.concat(res.result[key])
        })
        tempArray.map(item => {
          if(!item.value){item.value = '0';}
        })
        this.listData = tempArray
        console.log(this.listData)
      })
    },
    getPollutionDictList() {
      getPollutionDict().then(res => {
        this.getPollutionDictCover = res.result
      })
    },
    changeDateType() {
      this.summryAllData = null;
      for (let key in this.echartInit) {
        this.echartInit[key].dispose();
      }
      this.echartInit = {};
      this.doGetIndexSummry({index: this.echartIndex});
    },
    switchEchartType() {
      this.dataTypeEchart = (!this.dataTypeEchart);
      this.echartInit = {};
      setTimeout(() => {
        this.doGetIndexSummry({index: 0});
      }, 300);
    },
    doGetIndexSummry(tab, event) {
      this.tabsLoading = true;
      this.echartIndex = tab.index - 0;
      if (this.summryAllData) {
        this.$nextTick(() => {
          this.initEchartData(this.echartIndex)
        })
      } else {
        getIndexSummry({summrayMode: this.dateType}).then(res => {
          if (res.code === 200) {
            this.summryAllData = res.result;
            let len = this.summryAllData.length;
            this.riverList = [];
            setTimeout(() => {
              this.$nextTick(() => {
                this.initEchartData(this.echartIndex)
              })
            }, 1000);
          }
        })
      }
    },
    initEchartData(index, times) {
      this.$nextTick(() => {
        let domKey = `myChartDiv${index}`;
        let data = this.summryAllData[index];
        if (!this.dataTypeEchart) {
          domKey = `myChartDiv2${index}`;
          data = this.riverList[index];
        }
        if (this.echartInit[domKey]) {
          this.echartInit[domKey].dispose()
        }
        let divDom = document.getElementById(domKey);
        if (!divDom) {
          console.log('没找到dom,两秒后重试：', domKey, divDom)
          if(times!==2){
            setTimeout(()=>{this.initEchartData(index,2)}, 1500);
          }
          return;
        }
        console.log('开始初始化echart：')
        let dataObj = [];
        let i = 0;
        for (let key in data['datas']) {
          if (data['datas'][key] instanceof Array) {
            dataObj[i++] = {
              name: key,
              color: _colors[i],
              value: data['datas'][key]
            }
          }
        }
        this.echartInit[domKey] = this.$echarts.init(divDom);
        let legendData = dataObj.map(item => item.name);
        let xAxisData = data['dateStr']
        let seriesData = dataObj.map(item => {
          return {
            name: item.name,
            data: item.value,
            type: 'line',
            stack: '',
            lineStyle: {
              color: item.color
            },
            itemStyle: {
              color: item.color
            },
            smooth: true,
          }
        });
        var optionLine = {
          tooltip: {
            trigger: 'axis',
            enterable: true,
            confine: true,
          },
          grid: {
            top: '14%',
            left: '3%',
            right: '4%',
            bottom: '9%',
            containLabel: true
          },
          toolbox: {},
          legend: {
            padding: [10, 50, 0, 0],
            x: 'right',
            y: 'top',
            data: legendData,
            textStyle: {
              fontSize: 12,
              color: '#ffffff'
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: '#2295ee',
                width: 1,
              },
            },
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#2295ee'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#2295ee',
                width: 1,
              },
            },
          },
          series: seriesData,
        };
        this.echartInit[domKey].setOption(optionLine);
      })
      this.tabsLoading = false;
    },
    getNowTime() {
      let speed = 1000
      let that = this
      let theNowTime = function () {
        that.nowTime = that.timeNumber()
      }
      setInterval(theNowTime, speed)
    },
    timeNumber() {
      let today = new Date()
      let date = today.getFullYear() + '年' + this.twoDigits(today.getMonth() + 1) + '月' + this.twoDigits(today.getDate()) + '日'
      let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
      let wk = new Date().getDay()
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[wk]
      return date + '  ' + week + '  ' + time
    },
    twoDigits(val) {
      if (val < 10) return '0' + val
      return val
    },
    jumpStationPage(e) {
      let stationCode = e.stationCode
      this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
    },
    handleClosetuichu(done) {
      this.dialogVisible = false
      localStorage.clear()
      this.$router.push({path: '/Login'})
    },
    infor() {
      var onformation = JSON.parse(window.sessionStorage.getItem('password'));
      if (onformation) {
        this.inforname = onformation.realname
      }
    },
    qcguanbi() {
      this.qcdialogTableVisible = false
      this.qyinfordtdialogTableVisible = false
      this.dialogTableVisible = false
      this.singleEchartDialogShowFlag = false
      this.clearVehicleMarker();
    },
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    switchIcon(flag) {
      let that = this;
      let arr = [];
      if (this.lastClickIcon == flag) {
        this.lastClickIcon = ''
        // 取消选中，恢复视图
        that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
        return;
      } else {
        this.lastClickIcon = flag;
        if (flag == 'livestock') {
          arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("livestock") != -1);
        } else if (flag == 'orient') {
          arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("orient") != -1);
        } else if (flag == 'watershed') {
          arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("watershed") != -1);
        } else if (flag == 'soil') {
          arr = this.markersSoil;
        } else if (flag == 'flowmeter') {
          arr = this.markersFlowmeter;
        } else if (flag == 'vehicle') {
          arr = this.markersVehicle;
        }
      }
      if (arr && arr.length > 0) {
        arr.map(item => {
          item.setzIndex((that.lastZIndex+=2));
        });
        that.aMap.setFitView(arr, false, [200, 500, 360, 360], 16);
        const typeNames = {
          'livestock': '畜禽污染监测站',
          'orient': '农田污染监测站',
          'watershed': '小流域监测站',
          'soil': '长期定位监测站',
          'flowmeter': '微功率雷达监测点',
          'vehicle': '危废车辆'
        };
        this.$message.success(`找到 ${arr.length} 个${typeNames[flag] || '标记点'}`);
      } else {
        that.aMap.setFitView(null, false, [100, 400, 360, 360], 16);
        const typeNames = {
          'livestock': '畜禽污染监测站',
          'orient': '农田污染监测站',
          'watershed': '小流域监测站',
          'soil': '长期定位监测站',
          'flowmeter': '微功率雷达监测点',
          'vehicle': '危废车辆'
        };
        this.$message.warning(`暂无${typeNames[flag] || '标记点'}数据`);
      }
    },
  },
}
</script>

<style scoped>
@import '@/assets/css/index.css';

.quanping {
  width: 1.6vw;
  margin-right: 3%;
  margin-top: 0.2vw;
  position: absolute;
  right: 1%;
  z-index: 999;
}

/* 台账弹窗 */
.tzsanguang {
  position: absolute;
  top: -1.5vw;
  right: 38%;
}

.tzsanguangbt {
  position: absolute;
  bottom: -1.5vw;
  right: 38%;
}

.tz_cov_top {
  width: 40%;
  height: 3vw;
  margin: 0 auto;
  background: url(../../assets/image/tz_tltle_bg.png) no-repeat;
  background-size: cover;
  text-align: center;
  line-height: 3vw;
  margin-bottom: 2vw;
}

.tz_cov_top_tit {
  font-size: 1vw;
  color: #fff;
  text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
  font-family: douyuFont;
}

.mywrcov_onehover {
  cursor: pointer;
}

.centerMainBox2 img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.boxLis {
  width: 70%;
  height: 1.5vw;
  margin-left: 3vw;
  margin-top: 1vw;
  border-bottom: .02vw solid rgb(40, 229, 233);
}

.boxLis > li {
  width: 4vw;
  height: 1.4vw;
  display: block;
  background: rgba(40, 229, 233, .5);
  margin-right: .5vw;
  color: #fff;
  line-height: 1.4vw;
  text-align: center;
  cursor: pointer;
}

.active {
  border-bottom: .02vw solid #040A18;
  border-top: .02vw solid rgb(40, 229, 233);
  border-right: .02vw solid rgb(40, 229, 233);
  border-left: .02vw solid rgb(40, 229, 233);
}

.contList {
  position: relative;
  width: 70%;
  height: 7vw;
  margin: 1vw auto 0;
}

.content1 li {
  display: none;
}

.baseBox {
  width: 100%;
  border: none;
  background: none;
}

.boxTitle {
  font-size: .8vw;
  width: 38%;
  margin-top: 1vw;
  text-align: center;
}

.right {
  float: right;
}

.baseBoxLeft {
  width: 22.5%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.baseBoxRight {
  width: 68%;
  height: 100%;
}

.maps {
  width: 100%;
  height: 95%;
  margin-top: 2%;
  background: pink;
}

.baseBox1,
.baseBox2,
.baseBox3 {
  position: relative;
}

.baseBox1 img,
.baseBox2 img,
.baseBox3 img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.csbaseBox1 {
  position: relative;
  z-index: 999;
}

.liSpan {
  width: 100%;
  margin-top: 3.2%;
  text-align: center;
  color: rgb(40, 229, 233);
}

.liP {
  width: 66%;
  margin: .3vw auto 0;
  text-align: left;
  font-size: .5vw;
  color: rgb(40, 229, 233);
}

a:hover {
  text-decoration: none
}

.titleName {
  color: #0EFCFF;
}

.plant {
  width: 90%;
  height: 5.5vw;
  margin: 2% auto 0;
  display: -webkit-flex;
  display: -moz-flex;
}

.plant > li {
  width: 15%;
  height: 100%;
}

.jumps {
  width: 100%;
  height: 100%;
  background: rgba(0, 235, 255, .08);
  display: -webkit-flex;
  display: -moz-flex;
}

.jumps > div > img {
  width: .88vw;
  height: .88vw;
  float: right;
}

.jumps > p {
  width: 90%;
  font-size: 1.3vw;
  color: #fff;
  margin: auto;
}

.jumps > div {
  width: 90%;
  margin: 5% auto 0;
}

.jumps > div > span {
  font-size: .6vw;
  color: #0efcff;
  float: left;
}

.spans0 {
  width: 80%;
  height: 5%;
  background: #03DA8D;
}

.spans1 {
  width: 80%;
  height: 5%;
  background: #0efcff;
}

.spans2 {
  width: 80%;
  height: 5%;
  background: #FE0000;
}

.spans3 {
  width: 80%;
  height: 5%;
  background: #F78001;
}

.boxVideo {
  width: 100%;
  height: 100%;
}

.boxVideo video {
  width: 100%;
  height: 100%;
}

.baseDatas {
  width: 70%;
  height: 2vw;
  display: -webkit-flex;
  margin: 1vw 0 0 5vw;
}

.baseDatas li {
  width: 10%;
}

.baseDatas li a {
  color: #fff;
  font-size: .8vw;
}

.active2 a > span {
  color: rgb(40, 229, 233);
}

.baseDatas li a:hover > span {
  color: rgb(40, 229, 233);
}

.baseDatas li a:hover > .borderRight {
  border-left-color: rgb(40, 229, 233);
}

.tableDetalis {
  width: 92%;
  color: #fff;
  margin-left: 2vw;
}

.tableDetalis tr {
  height: 1.3vw;
  font-size: .8vw;
}

.tableDetalis tr > td {
  text-align: center;
}

.tableDetalis tr > td:nth-child(7) {
  text-align: right;
}

.borderRight {
  width: 0;
  height: 0;
  float: left;
  border: .4vw solid transparent;
  border-left-color: #fff;
  margin-top: .2vw;
}

.borderActive {
  border-left-color: rgb(40, 229, 233);
}

.equipment_table {
  width: 85%;
  height: 25%;
  margin: auto;
  text-align: center;
  color: #fff;
  font-size: .5vw;
}

.equipment_table tr:nth-child(1) {
  color: #0EFCFF;
}

.equipment_table tr {
  border: 1px solid #0EFCFF;
}

.equipment_table tr:nth-child(1) {
  font-size: .8vw;
}

.equipment_table img {
  width: 1vw;
}

.env_table {
  height: 35%;
  margin-top: 5%;
}

.env_table td {
  border: 1px solid #0EFCFF;
}

.env_table tr:nth-child(1) {
  background: rgba(14, 252, 255, .3);
}

.map img {
  width: 80%;
  margin-left: 10%;
}

.map img {
  width: 80%;
  margin-left: 10%;
}

.mapActived1 {
  position: absolute;
  top: 41.5%;
  left: 61%;
  width: 3.5vw;
  height: 5.5vw;
  border-radius: 90px;
  cursor: pointer;
}

.mapActived2 {
  position: absolute;
  top: 60%;
  right: 16%;
  width: 4.5vw;
  height: 2.5vw;
  cursor: pointer;
}

.mapActived3 {
  position: absolute;
  top: 57%;
  right: 9%;
  width: 2.5vw;
  height: 7vw;
  cursor: pointer;
}

.mapContent1 {
  position: absolute;
  height: 6vw;
  width: 8vw;
  left: 65%;
  top: 33%;
  background: rgba(255, 255, 255, .2);
}

.mapContent2 {
  position: absolute;
  height: 6vw;
  width: 8vw;
  left: 70%;
  top: 35%;
  background: rgba(255, 255, 255, .2);
  display: none;
}

.mapContent3 {
  position: absolute;
  height: 6vw;
  width: 8vw;
  right: 1%;
  top: 35%;
  background: rgba(255, 255, 255, .2);
  display: none;
}

.mapContentFont {
  width: 85%;
  margin-left: 12%;
  font-size: .6vw;
  color: #0efcff;
  letter-spacing: .05vw;
  margin-bottom: .3vw;
}

.mapContentFont:nth-child(1) {
  margin-top: .6vw;
}

.mapContentFont span {
  color: white;
}

.video-js {
  width: 100%;
  height: 100%;
}

.video-js:hover .vjs-big-play-button {
  background: none;
}

.video-js .vjs-big-play-button:hover {
  background: none;
}

.video-js .vjs-big-play-button {
  border: none;
  background: none;
}
.in1con_lf_titshow12 {
  font-size: 1vw;
  color: #fff;
  text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
  font-family: douyuFont;
  top: 1vw;
  left: 0%;
  display: block;
  width: 100%;
  text-align: center;
  margin: 0;
  margin-top: 15px;
}

.in1con_lf_titshow1 {
  font-size: 1vw;
  color: #fff;
  text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
  font-family: douyuFont;
  position: absolute;
  top: 0.9vw;
  left: 0%;
  display: block;
  width: 100%;
  text-align: center;
}
.in1con_lf_titshow13{
  color: #ffa;
}
.in1con_lf_titshow2 {
  font-size: 11px;
  color: #fff;
  text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
  position: absolute;
  top: 1.3vw;
  right: 18px;
  display: block;
  width: 100%;
  text-align: right;
  cursor: pointer;
}

/* ========== 危废车辆下拉菜单样式 ========== */
.vehicle-dropdown-wrapper {
  position: fixed;
  bottom: 2vw;
  right: 2vw;
  z-index: 999;
  width: 220px;
}

.vehicle-dropdown-btn-dark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0, 20, 40, 0.9);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.1);
}

.vehicle-dropdown-btn-dark:hover {
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.2);
}

.vehicle-dropdown-btn-dark .el-icon--right {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.vehicle-dropdown-menu-dark {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: rgba(0, 20, 40, 0.95);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  padding: 6px 0;
  max-height: 300px;
  overflow-y: auto;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

.vehicle-dropdown-menu-dark::-webkit-scrollbar {
  width: 4px;
}

.vehicle-dropdown-menu-dark::-webkit-scrollbar-track {
  background: rgba(0, 212, 255, 0.05);
  border-radius: 4px;
}

.vehicle-dropdown-menu-dark::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.3);
  border-radius: 4px;
}

.vehicle-dropdown-item-dark {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: #8bb4d0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 8px;
}

.vehicle-dropdown-item-dark:hover {
  background: rgba(0, 212, 255, 0.1);
  color: #fff;
}

.vehicle-dropdown-item-dark .vehicle-dot-dark {
  color: #00d4ff;
  font-size: 10px;
  margin-right: 4px;
}

.vehicle-dropdown-item-dark .all-dot {
  color: #FFD700;
}

.vehicle-dropdown-item-dark .close-dot {
  color: #ff6b6b;
}

.vehicle-dropdown-divider {
  height: 1px;
  margin: 4px 12px;
  background: rgba(0, 212, 255, 0.1);
}
</style>

<style>
.login .el-dialog {
  position: relative;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  width: 50%;
}

.el-dialog {
  position: relative;
  margin: 0 auto;
  background: none;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  width: 50%;
}

.el-dialog__header {
  display: none;
}

.home_dlhj .el-carousel__arrow {
  top: 9%;
  font-size: 1vw;
}

.home_dlhj .el-carousel__arrow--left {
  left: 0;
}

.home_dlhj .el-carousel__arrow--right {
  right: 0;
}

.el-tabs--card > .el-tabs__header {
  border: none;
}

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  text-align: center;
  height: 1.7vw;
  line-height: 1.7vw;
  margin-left: 1% !important;
  border-radius: 0.4vw;
  background: #0e2c3f;
  color: #fff !important;
  border: 1px solid #2fbdff;
  box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
  margin-top: 8px;
  text-align: center;
  font-size: 12px !important;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  text-align: center;
  height: 1.7vw;
  line-height: 1.7vw;
  margin-left: 1% !important;
  border-radius: 0.4vw;
  background: #0e2c3f;
  color: #fff !important;
  font-size: 8px !important;
  border: 1px solid #0e2c3f;
  font-size: 12px !important;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
  float: right;
  margin-right: 6%;
  margin-top: 5px;
}

.zlxg_btm .el-tabs__item:hover {
  text-align: center;
  height: 1.7vw;
  line-height: 1.7vw;
  margin-left: 1% !important;
  border-radius: 0.4vw;
  background: #0e2c3f;
  color: #fff !important;
  border: 1px solid #2fbdff;
  box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
  font-size: 12px !important;
}

.v-modal {
  display: none;
}

.jcsssj_rt_num {
  display: inline-block;
  font-size: 0.8vw;
  margin-left: 20%;
  text-align: right;
  margin-top: 0.4vw;
}


/* 企业弹窗样式 */
.tctit {
  font-size: 1.2vw;
  color: #fff;
  font-weight: bold;
  display: block;
  margin-bottom: 1.6vw;
}

.tcgldw {
  font-size: 1vw;
  color: #fff;
  line-height: 2vw;
  display: block;
  padding-right: 3%;
  height: 15vw;
  overflow: auto;
}

/* 定义滚动条样式 */
.tcgldw::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: rgba(240, 240, 240, 0.1);
}

.tcgldw::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, .5);
}

.tcgldw::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(87, 146, 255, .8);
  background-color: rgba(87, 146, 255, .8);
}

/* 曲线弹窗 */
.jgdhei {
  margin-top: 2vw;
}

.trwdcov {
  width: 94%;
  margin: 0 auto;
}

.trwdcov_top {
  width: 100%;
  height: 5vh;
  line-height: 5vh;
  text-align: left;
  overflow: hidden;
}

.trwdcov_top_tit {
  color: #fff;
  font-size: 0.8vw;
  margin-right: 1%;
}

.trwdcov_top_zcz {
  color: #fff;
  font-size: 0.8vw;
  float: right;
  margin-right: 3%;
}

.trwdcov_top .el-radio__input.is-checked .el-radio__inner {
  border-color: #00ffcd;
  background: #00ffcd;
}

.trwdcov_top .el-radio__input.is-checked + .el-radio__label {
  color: #00ffcd;
}

.trwdcov_top .el-radio {
  color: #fff;
}

.trwdcov_top .el-input__inner {
  background: none;
}

.trwdcov_top .el-date-editor .el-range-input {
  background: none;
  color: #c9c9c9;
  border-color: #c9c9c9;
}

.trwdcov_top .el-date-editor .el-range-separator {
  color: #fff;
}

.trwdcov .el-table__body, .el-table__footer, .el-table__header {
  width: 100% !important;
}

.trwdcov .el-table__body, .el-table__footer, .el-table__header {
  width: 100% !important;
  text-align: center;
}

.trwdcov .el-table tr {
  background: none;
}

.trwdcov .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  background: none;
  color: #00ffcd;
  border-bottom: 1px solid #747474;
  text-align: center;
}

.trwdcov .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #747474;
}

.trwdcov .el-table--enable-row-transition .el-table__body td.el-table__cell {
  color: #c9c9c9 !important;
}

.trwdcov .el-table--border, .el-table--group {
  border: 1px solid #747474;
}

.trwdcov .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: rgba(255, 255, 255, 0.2);
}

.trwdcov_top_time {
  margin-right: 3%;
}

.tz_cov_right .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.el-table .el-table__cell.gutter {
  background: var(--tableHeadBg);
  width: 2px;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: rgba(240, 240, 240, 0.1);
}

.el-table th.gutter {
  display: none;
  width: 0;
}

.el-table colgroup col[name='gutter'] {
  display: none;
  width: 0;
}

.in1con_lf_img {
  display: flex;
  justify-content: center;
}

.mapTuLi {
  position: absolute;
  bottom: 334px;
  left: 456px;
}

.mywrcov_onenumjx{
  font-size: 1.2vw;
}
</style>