<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" v-if="fullscreen==false" style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;transform:scale(1.05,1.05);"></div>-->
        <!--				<div id="container" v-else                   style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>-->
        <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/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="2" :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="2" :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="7" :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="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="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('duizhuhe')">
            <img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
            <span class="scdlist_tit">对竹河监测站</span>
          </div>
          <div class="scdlist" @click="switchIcon('tuanbaihe')">
            <img src="@/assets/image/icon-yellow.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>
        <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>
                <span class="zywr_titshow">重要污染物治理效果</span>
                <el-tooltip class="item" effect="dark"
                            :content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'"
                            placement="top-start">
                  <span class="dataTypeEchart" @click="switchEchartType">
                      {{ dataTypeEchart ? '监测值' : '对比值' }}
                  </span>
                </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="handleClick" v-show="dataTypeEchart">
                  <el-tab-pane v-for="(item,index) in stationInfoList" :label="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="handleClick" v-show="!dataTypeEchart">
                  <el-tab-pane v-for="(item,index) in riverList" :label="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">
                  <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 " 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">
																	<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="valist.code"
                                                  :key="valist.code" duration="3000"></animate-number>
                                <!-- <span class="in1con_lf_imglf_num_jix">{{valist.code}}</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="">
<!--                  <span class="in1con_lf_titshow2 " style="">台账>></span>-->
                </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>
<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
<!--                                      :to="effect_assess0.detailValue" />-->
										</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>
<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
<!--                                      :to="effect_assess0.detailValue" />-->
                    </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>
<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
<!--                                      :to="effect_assess0.detailValue" />-->
                    </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>
<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
<!--                                      :to="effect_assess0.detailValue" />-->
                    </span>
                    <span class="mywrcov_onetit">{{ effect_assess3.detailCode }}</span>
                  </div>
                  <div class="mywrcovcen">
                    <!-- <img src="@/assets/image/chengg.png" class="mywrcovcen_tit" alt=""> -->
                    <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">
															<!-- <span class="in1con_lf_imglf_num_jix">{{item.value}}</span> -->
															<animate-number class="in1con_lf_imglf_num_jix" ref="myNum" from="0" :to="item.value"
                                              :key="item.value" duration="3000" :formatter="formatter"></animate-number>
															{{ item.unit }}
														</span>
                          <!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
                        </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%;">
            <!-- survItemList -->
            <span class="jctc_text" v-for="(item,index) in qcdtinfor.survColorItems" :key="index"
                  :style="{background:(item.color)}">{{ item.name }}</span>
            <!-- <span class="jctc_text" style="background: #445fb4;">总氮</span>
            <span class="jctc_text" style="background: #52ac2a;">硝钛氨</span>
            <span class="jctc_text" style="background: #ac4f2a;">空气温度</span>
            <span class="jctc_text" style="background: #ac4f2a;">空气湿度</span>
            <span class="jctc_text" style="background: #4c9bb5;">风速</span>
            <span class="jctc_text" style="background: #6a4cb5;">风向</span>
            <span class="jctc_text" style="background: #4cb585;">大气压</span>
            <span class="jctc_text" style="background: #ad8f49;">太阳全辐射</span>
            <span class="jctc_text" style="background: #52ac2a;">土壤温度</span>
            <span class="jctc_text" style="background: #4c9bb5;">土壤盐分</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>
    <SoilDialog  v-if="soidShowFlag" :soilDataId="soilDataId" @close="soidShowFlag=false"/>
    <SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
    <TaizhangDialog v-if="taizhangDialogShowFlag" :resourcedirect="resourcedirect"  @close="taizhangDialogShowFlag=false"/>
  </ScaleBox>

</template>

<script>
import ScaleBox from 'vue2-scale-box'
import {
  displayInfo,
  fwlist,
  getAllstationAndPestLight,
  getIndexSummry,
  getNewestData,
  getPollutionDict,
  getSoilSummry,
  ntfmlist,
  stationInfo,
  survItemSummary
} from '@/api';
import vueSeamlessScroll from 'vue-seamless-scroll'
import hefentianqi from '@/pages/weather/weather.vue'
import SoilDialog from '@/components/SoilDialog.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
  },
  data() {
    return {
      taizhangDialogShowFlag: false,
      singleEchartDialogShowFlag: false,
      singleEchartData: null,
      aMap: null,
      dataTypeEchart: true,
      markersOrient: [],
      markersSoil: [],
      markersOther: [],
      lastClickIcon: '',
      urlimg: 'https://fxnsp.zgzhny.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,
      //   showData:[],
      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,
      soilDataId: ''
    };
  },
  created() {
  },

  computed: {
    classOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    classWrwcod() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    showOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 0, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    console.log('开始初始化！！！！')
    // setTimeout(() => {
    //   this.$nextTick(() => {
    //     this.indexinfor();
    //   })
    // }, 2000)
    // 实时时间
    setTimeout(() => {
      this.$nextTick(() => {
        this.initMap(this.zoomData, this.isShowLightNumber);
      })
    }, 2000)
    //初始化数据
    this.getNowTime();
    this.indexleft();
    this.getNewestDataList();
    this.getPollutionDictList();
    this.infor();
    this.indexinfor();
    this.handleClick({index: this.echartIndex});
    this.initSoilData();
  },
  methods: {
    initSoilData(){
      // getSoilSummry({deployIds:['1679816733238575105'], "summrayMode":"dayhours"}).then(res=>{
      //   console.log(res)
      // })
    },
    formatter: function (num) {
      return num.toFixed(3)
    },
    sbdscdBtn() {
      var url = 'https://wlw.zklsfk.com/admin/index?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiLmsrPmtKXluILlhpzkuJrlhpzmnZHlsYAiLCJleHAiOjE2ODk2MjU0ODUsImlhdCI6MTY4ODEzMDI1NiwianRpIjoiNTcxMTY5MTAtODczZC00ZjI1LWFkNzItZjA2NWU3NmFkNDIwIn0.52iF21xidGFllgfcsSgN-cLlysI0W7Ad8ie48LsV9x4'
      //跳转1
      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.handleClick({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.stationCount1 = res.result.stationCount[1].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
            let arryobjlist = Object.keys(objlist).map(key => objlist[key])
            let newobjList = Object.keys(objlist)
            this.stationInfoList[i].wrwcode = []
            for (var j = 0; j < this.getPollutionDictCover.length; j++) {
              // Object.keys 获取字段名
              for (var k = 0; k < newobjList.length; k++) {
                if (this.getPollutionDictCover[j].code == newobjList[k]) {
                  this.stationInfoList[i].wrwcode.push({
                    name: this.getPollutionDictCover[j].description,
                    icon: this.getPollutionDictCover[j].icon,
                    unit: this.getPollutionDictCover[j].unit,
                    color: this.getPollutionDictCover[j].color,
                    code: arryobjlist[k],
                    tylename: newobjList[k]
                  })
                }
              }
            }
          }
        }

      })
    },
    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) {
      // console.log('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;
          }
          // console.log('showEchartDialog222', dom,item2, survItem)
        // :data-item="item" :data-survItem="valist.tylename"
          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;
      // let isShowLight = this.isShowLightNumber
      getAllstationAndPestLight(isShowLight).then(res => {
        // 地图
        that.aMap = new AMap.Map('container', {
          viewMode: '3D',
          resizeEnable: true,
          zoom: zoomnum,
          center: [111.436625, 36.771975],//默认的地图中心经纬度
          mapStyle: 'amap://styles/blue',
          dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制
          jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制
          keyboardEnable: true,//地图是否可通过键盘控制,默认为true方向键控制地图平移，"+"和"-"可以控制地图的缩放，Ctrl+“→”顺时针旋转，Ctrl+“←”逆时针旋转。此属性可被setStatus/getStatus 方法控制
          animateEnable: true,//地图平移过程中是否使用动画（如调用panBy、panTo、setCenter、setZoomAndCenter等函数，将对地图产生平移操作，是否使用动画平移的效果），默认为true，即使用动画
          defaultCursor: 'pointer',
          turboMode: false,
          showBuildingBlock: true,//设置地图显示3D楼块效果，移动端也可使用。推荐使用。
          showIndoorMap: false, // 隐藏地图自带的室内地图图层
          expandZoomRange: true,//是否支持可以扩展最大缩放级别,和zooms属性配合使用设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
          forceVector: true,
          scale: (2 , 2.5)
        });
        that.aMap.on('complete', (e) => {
          var markerData = res.result;
          let Marker = markerData.filter(ele => ele.type != 'light');//其他类型
          Marker.map(item => {
            let marker = new AMap.Marker({
              zIndex: item.type == 'orient' ? 1000 : 500,
              icon: this.urlimg + item.picUrl,
              position: [item.longitude, item.latitude],
              offset: new AMap.Pixel(item.width, item.height),//偏移量
              extData: {
                ids: item.ids,
                extPics: item.extPics,
                notes: item.notes,
                name: item.name,
                item: item
              }
            });
            if (item.type == 'orient') {//监测站弹窗
              marker.on('click', e => {
                let indexnumb = e.target.getExtData().ids.slice(-1);
                this.qcdtinfor = this.stationInfoList[indexnumb]
                this.qcdtdialogTableVisible = true
                console.log('livestock or orient', this.qyinformation)
              })
              this.markersOrient.push(marker)
            } else if(item.type == 'soil'){
              marker.on('click', e => {
                this.soilDataId = e.target.getExtData().ids
                this.soidShowFlag = true
                console.log('soil click',  )
              })
              this.markersSoil.push(marker)
            }  else {
              this.markersOther.push(marker)
            }
            marker.setMap(that.aMap);
          })
          this.$forceUpdate();
          // that.aMap.setFitView(null, false, [100,400,200,200], 16);
          that.aMap.setFitView();
          setTimeout(() => {
            that.aMap.setFitView(null, false, [130, 380, 200, 200], 16);
            // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
            // that.aMap.setZoomAndCenter(that.aMap.getZoom()-1, [temp.lng, temp.lat - 0.15]);
          }, 2000)
        });
      })
    },
    getNewestDataList() {
      getNewestData().then(res => {
        this.listData = res.result.soilHisSurvData
      })
    },
    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.handleClick({index: this.echartIndex});
    },
    switchEchartType() {
      this.dataTypeEchart = (!this.dataTypeEchart);
      this.echartInit = {};
      this.activeName2 = this.riverList[0].stationName
      setTimeout(() => {
        this.handleClick({index: 0});
      }, 300);
    },
    handleClick(tab, event) {
      this.echartIndex = tab.index - 0;
      if (this.summryAllData) {
        this.$nextTick(() => { // 加载echarts图
          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 = [];
            this.summryAllData.map((item1, index) => {
              if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
                let data1 = item1['datas'];
                let keys = Object.keys(data1);
                let data2 = this.summryAllData[index + 1]['datas'];
                let data3 = {}
                let item3 = JSON.parse(JSON.stringify(item1));
                if (data2) {
                  keys.map(key => {
                    if (data1[key] instanceof Array) {
                      data3[key] = []
                      data1[key].map((itemSub, index) => {
                        data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
                      })
                    }
                  })
                  item3['datas'] = data3;
                  this.riverList.push(item3);
                }
              }
            });
            // console.log('对比数据初始化：', this.riverList)
            setTimeout(() => {
              this.$nextTick(() => { // 加载echarts图
                this.initEchartData(this.echartIndex)
              })
            }, 1000);
          }
        })
      }
    },
    // 折线图数据
    initEchartData(index) {
      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()
        }
        // console.log('初始化echart：', index, domKey, data, /^\d+$/.test(index) ,this.echartInit[domKey])
        let divDom = document.getElementById(domKey);
        if (!divDom) {
          console.log('没找到dom：', domKey, divDom)
          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: '',
            // areaStyle: { color: item.color  },
            lineStyle: {
              color: item.color // 设置线的颜色为红色
            },
            itemStyle: {
              color: item.color // 设置线的颜色为红色
            },
            smooth: true,
          }
        });
        var optionLine = {
          tooltip: {
            trigger: 'axis'
          },
          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', //x轴的颜色
                width: 1, //轴线的宽度
              },
            },
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#2295ee'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#2295ee', //x轴的颜色
                width: 1, //轴线的宽度
              },
            },
          },
          series: seriesData,
        };
        //为echarts对象加载数据
        this.echartInit[domKey].setOption(optionLine);
      })
    },
    // 实时时间
    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
    },
    // 跳转页面3
    jumpStationPage(e) {
      let stationCode = e.stationCode
      if (e.stationType == 'livestock') {
        this.$router.push({path: '/CqyzList', query: {stationCode: stationCode}})
        // this.$message({
        // 	message: '站点正在建设中......',
        // 	showClose: true,
        // });
      } else {
        this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
      }
    },
    // 弹窗退出登录
    handleClosetuichu(done) {
      this.dialogVisible = false
      // window.sessionStorage.clear();
      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
    },
    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) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    switchIcon(flag) {
      let that = this;
      let arr = [];
      if (this.lastClickIcon == flag) {
        this.lastClickIcon = ''
      } else {
        this.lastClickIcon = flag;
        if (flag == 'duizhuhe') {
          arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("对竹河") != -1);
        } else if (flag == 'tuanbaihe') {
          arr = this.markersOrient.filter(item => item.getExtData().name.indexOf("团柏河") != -1);
        } else if (flag == 'soil') {
          arr = this.markersSoil;
        }
      }
      if (arr && arr.length > 0) {
        that.aMap.setFitView(arr, false, [200, 500, 300, 300], 16);
        // setTimeout(() => {
        //   let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
        //   that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);
        // },2000)
      } else {
        that.aMap.setFitView(null, false, [100, 400, 200, 200], 16);
      }
    }
  },
}
</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;
  /* -webkit-justify-content: space-between;
  -moz-justify-content: space-between; */
}

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

.jumps {
  width: 100%;
  height: 100%;
  background: rgba(0, 235, 255, .08);
  display: -webkit-flex;
  /* -webkit-flex-direction: column;
  -webkit-justify-content: space-between; */
  display: -moz-flex;
  /* -moz-flex-direction: column;
  -moz-justify-content: space-between; */
}

.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;
  /* -webkit-justify-content: space-between; */
  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_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_titshow2 {
  font-size: 11px;
  color: #fff;
  text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
  //font-family: douyuFont;
  position: absolute;
  top: 1.3vw;
  right: 18px;
  display: block;
  width: 100%;
  text-align: right;
  cursor: pointer;
}
</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;
  /* color: #fff; */
  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>
