<template>
  <ScaleBox
      :width="1920"
      :height="1080"
      bgc="transparent"
      :delay="100"
      :isFlat="true"

  >
    <div class="main2" v-if="stationDetail">
      <video class="fullscreenvideo" id="bgvid" playsinline="" autoplay="" muted="" loop="">
        <!--				<source src="@/assets/image/bg2.mp4" type="video/mp4">-->
        <source src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/v/bg2.mp4" type="video/mp4">
      </video>
      <div class="nav">
        <span class="nav_ti nav_mag">{{ stationDetail.stationName }}</span>
        <span class="nav_tit">治理效果评价和监测一张图</span>
      </div>
      <div class="nav_btn">
        <div class="btn_left">
          <img src="@/assets/image/return.png" class="returnimg" alt="" onClick="javaScript:history.go(-1)">
          <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 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">
              退出登录
            </el-button>
          </el-dialog>
        </div>
      </div>
      <div class="content"  v-loading="loading"  element-loading-background="rgba(0, 0, 0, 0.7)" element-loading-spinner="el-icon-loading">
        <div class="centerBox">
          <div class="baseBox centerMainBox1" style="height:100%">
            <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="">
              <div>
                <div class="in1con_lf_tit" style="position: relative;">
                  <span class="in1con_lf_titshow">站点分析</span>
                  <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                  <!-- <img src="@/assets/image/moreinfor.png" class="in1con_lf_moreimg" alt="" @click="zdinfor"> -->
                  <span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span>
                </div>
                <div class="jczcov">
                  <div class="switchLive">
                    <span v-show="!currentPlayerLive" @click="switchLive(true)">录播</span>
                    <span v-show="currentPlayerLive"  @click="switchLive(false)">直播</span>
                  </div>
                  <el-carousel width="100%" arrow="always" :interval="5000">
                    <el-carousel-item class="jczcov_lf" v-for="value in stationDetail.deviceList" :key="value.id">
                      <div class="jczimg" :id="value.deployCode"></div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div class="jctc_add">
                  <img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
                  <span class="jctcvban_tit">站点名称：{{ stationDetail.stationName }}</span>
                </div>
                <div class="jctc_add">
                  <img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
                  <span class="jctcvban_tit">站点位置：{{ stationDetail.stationLocation }} </span>
                </div>
                <div class="jctc_add">
                  <img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
                  <span class="jctcvban_tit">建站时间：{{ stationDetail.buildTime }}</span>
                </div>
                <!-- <div class="jctc_add">
                  <img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
                  <span class="jctcvban_tit">监测范围：{{stationDetail.survRange}}</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" style="height:2vw;">
                  <img src="@/assets/image/jctcicon4.png" class="jctcicon1" alt="">
                  <span class="jctcvban_tit">监测指标</span>
                  <span class="jctc_text" v-for="(item,index) in stationDetail.survColorItems" :key="index"
                        :style="{background:(item.color)}"
                        style="background: #445fb4;margin-top:0.8vw;padding-right:10px;">{{ item.name }}</span>
                  <!-- <span class="jctc_text" style="background: #52ac2a;">土壤墒情</span>
                  <span class="jctc_text" style="background: #ac4f2a;">气象环境</span> -->
                </div>
              </div>
              <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 1.15vw;"></div>
              <div style="margin:1vw 0">
                <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/sbsl.png" class="in1con_lf_imgone" alt="">
                    <span class="in1con_lf_imglf_tit">设备数量</span>
                    <span class="in1con_lf_imglf_num"><span
                        class="in1con_lf_imglf_num_jix">{{ stationDetail.deviceCount }}</span>个</span>
                  </div>
                  <div
                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
                    <img src="@/assets/image/sbsl02.png" class="in1con_lf_imgone" alt="">
                    <span class="in1con_lf_imglf_tit">监测项</span>
                    <span class="in1con_lf_imglf_num"><span
                        class="in1con_lf_imglf_num_jix">{{ stationDetail.survColorItems.length }}</span>项</span>
                  </div>
                  <div
                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
                    <img src="@/assets/image/sbsl03.png" class="in1con_lf_imgone" alt="">
                    <span class="in1con_lf_imglf_tit">监测频率</span>
                    <span class="in1con_lf_imglf_num"><span
                        class="in1con_lf_imglf_num_jix">{{ stationDetail.survFrequency }}</span>天</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_titshow">重点指标实时数据</span>
                  <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
                </div>
                <ul class="liMarqueeUp" style="height:206px;overflow:hidden;"  @click="showEchartDialog($event, 1)" >
                    <vue-seamless-scroll :data="stationDetail.latestData" class="wp-1 hp-1" :class-option="classOption">
                      <li class="jcsssj2" v-for="(item,index) in stationDetail.latestData" :key="index"
                          :data-survItem="item.survItem" >
                          <img src="@/assets/image/xian2.png" class="jcsssj_xian2" alt="">
                          <div class="jcsssj_rt" >
                            <!-- @click="showEchartDialog(item.survItem)" -->
                            <div style="float: left;width: 60%;">
                              <span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
                              <span class="jcsssj_rt_num">
                                <span class="in1con_lf_imglf_num_jix">{{ item.value }}</span>{{ item.unit }}
                              </span>
                              <!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
                            </div>
                            <span class="jcsssj_rt_time"  style="float: right;">{{ item.dataDateTime?item.dataDateTime.substring(0,16):'--' }}</span>
                          </div>
                      </li>
                    </vue-seamless-scroll>
                </ul>
              </div>
            </div>
            <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 class="zywr_lf_tit">
                <span class="zywr_titshow">重点污染指标趋势</span>
                <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>
                <div id="myChartDiv0" style="height: 260px;width:100%; position: relative; top:26px;"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="switchStation">
          <el-select v-model="stationCode" placeholder="切换站点" @change="switchStation" >
            <el-option v-for="item in stationList" :key="item.stationCode" :label="item.stationName" :value="item.stationCode"></el-option>
          </el-select>
        </div>
        <div class="leftBox right baseBoxHjleft" style="width:22.5%">
          <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" style="position:relative;">
              <div class="in1con_lf_tit ">
                <span class="in1con_lf_titshow">治理效果综合评价</span>
                <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
              </div>
              <!--							<img src="@/assets/image/zhpjimg2.png" class="zhpjimg2" alt="">-->
              <img src="http://fxnsp.sxcooh.com/lh-api/sys/common/static/bs/zhpjimg2.png" class="zhpjimg2" alt="">
              <span class="zhpjtit">{{ DisplayListdetailList2?.detailValue }}</span>
            </div>
          </div>
          <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
          <div class="xuqingchuli" v-if="stationType==='livestock'">
            <div class="in1con_lf_tit ">
              <span class="in1con_lf_titshow">畜禽粪污处理</span>
              <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
            </div>
            <div class="qxfwzcl">
              <div class="qxfwzcl_left">
                <div class="qxfwzcl_left_tit">
                  {{DisplayListdetailList0?.detailCode}}
                </div>
                <span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList0?.detailValue}}</span>
                <div class="qxfwzcl_left_tit">
                  {{DisplayListdetailList1?.detailCode}}
                </div>
                <span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList1?.detailValue}}</span>
              </div>
              <div class="qxfwzcl_rit">
                <img src="@/assets/image/png01_iSpt.png" class="png01_iSpt" alt="">
                <img src="@/assets/image/qcshuj.png" class="qcshuj" alt="">
                <span class="qxfwzcl_rit_smt">{{DisplayListdetailList3?.detailCode}}</span>
                <span class="qxfwzcl_rit_num in1con_lf_imglf_num_jix">{{DisplayListdetailList3?.detailValue}} <span style="font-size: 0.5vw;">万头</span> </span>
              </div>
            </div>
          </div>
          <div v-if="stationType==='watershed'">
            <div class="in1con_lf_tit ">
              <span class="in1con_lf_titshow">常规五参数实时监测</span>
              <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
            </div>
            <div v-if="waterData.dataWaterTemp">
              <div class="changguiwucanshu">
                <div @click="showEchartDialog(stationDetail,'dataWaterTemp')">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
                                       :to="waterData.dataWaterTemp" />
                      <span class="typeStyle">℃</span></div>
                  </div>
                  <div class="wucanshuNameDiv">水温</div>
                </div>
                <div @click="showEchartDialog(stationDetail,'dataWaterPh')">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
                                       :to="waterData.dataWaterPh" /> <span class="typeStyle"></span></div>
                  </div>
                  <div class="wucanshuNameDiv">PH值</div>
                </div>
              </div>
              <div class="changguiwucanshu" >
                <div @click="showEchartDialog(stationDetail,'dataWaterDo')">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
                                       :to="waterData.dataWaterDo" />
                  <span class="typeStyle">mg/L</span></div>
                  </div>
                  <div class="wucanshuNameDiv">溶解氧</div>
                </div>
                <div @click="showEchartDialog(stationDetail,'dataWaterDdl')">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
                                       :to="waterData.dataWaterDdl" />
                       <span class="typeStyle">μS/cm</span>
                    </div>
                  </div>
                  <div class="wucanshuNameDiv">电导率</div>
                </div>
                <div @click="showEchartDialog(stationDetail,'dataWaterNtu')">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0" :to="waterData.dataWaterNtu" />
                      <span class="typeStyle">NTU</span>
                    </div>

                  </div>
                  <div class="wucanshuNameDiv">浊度</div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="stationType==='orient'">
            <div class="in1con_lf_tit ">
              <span class="in1con_lf_titshow">水质数据实时监测</span>
              <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
            </div>
            <div v-if="stationDetail.latestData && stationDetail.latestData.length > 0">
              <div class="changguiwucanshu">
                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[0].survItem)"
                     v-if="stationDetail.latestData.length > 0">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
                                      :to="(stationDetail.latestData[0].value?stationDetail.latestData[0].value:0)" />
                      <span class="typeStyle">{{ stationDetail.latestData[0].unit }}</span></div>
                  </div>
                  <div class="wucanshuNameDiv">{{stationDetail.latestData[0].name}}</div>
                </div>
                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[1].survItem)"
                     v-if="stationDetail.latestData.length > 1">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
                                      :to="(stationDetail.latestData[1].value?stationDetail.latestData[1].value:0)" />
                      <span class="typeStyle">{{ stationDetail.latestData[1].unit }}</span></div>
                  </div>
                  <div class="wucanshuNameDiv">{{stationDetail.latestData[1].name}}</div>
                </div>
              </div>
              <div class="changguiwucanshu" >
                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[2].survItem)"
                     v-if="stationDetail.latestData.length > 2">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
                                      :to="stationDetail.latestData[2].value?stationDetail.latestData[2].value:0" />
                      <span class="typeStyle">{{ stationDetail.latestData[2].unit }}</span></div>
                  </div>
                  <div class="wucanshuNameDiv">{{stationDetail.latestData[2].name}}</div>
                </div>
                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[3].survItem)"
                     v-if="stationDetail.latestData.length > 3">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"
                                      :to="stationDetail.latestData[3].value?stationDetail.latestData[3].value:0" />
                      <span class="typeStyle">{{ stationDetail.latestData[3].unit }}</span>
                    </div>
                  </div>
                  <div class="wucanshuNameDiv">{{stationDetail.latestData[3].name}}</div>
                </div>
                <div @click="showEchartDialog(stationDetail,stationDetail.latestData[4].survItem)"
                v-if="stationDetail.latestData.length > 4">
                  <div class="wucanshuDiv">
                    <div class="wucanshuValueDiv">
                      <animate-number :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"
                                      :to="stationDetail.latestData[4].value?stationDetail.latestData[4].value:0" />
                      <span class="typeStyle">{{ stationDetail.latestData[4].unit }}</span>
                    </div>

                  </div>
                  <div class="wucanshuNameDiv">{{stationDetail.latestData[4].name}}</div>
                </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_titshow">监测站维护日志</span>-->
<!--              <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">-->
<!--            </div>-->
<!--            <div style="padding-left: 30px; margin-top: 26px; ">-->
<!--              <el-timeline>-->
<!--                <el-timeline-item v-for="(activity, index) in maintainLogList" :key="index" :color="`#0e81f7`" :size="'normal'"-->
<!--                                   :placement="`top`">-->
<!--                  <div class="maintainLog">-->
<!--                    <div class="maintainLogContent"><span class="el-icon-mobile"></span>&nbsp; {{activity.maintainData1}}</div>-->
<!--                    <div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div>-->
<!--                    <div class="maintainLogTime"><span class="el-icon-s-custom"></span>&nbsp; {{activity.maintainPerson}}&nbsp;&nbsp;-->
<!--                      <span class="el-icon-time"></span> {{activity.maintainTime}}</div>-->
<!--                  </div>-->
<!--                </el-timeline-item>-->
<!--              </el-timeline>-->
<!--            </div>-->
<!--          </div>-->
          <div>
            <div class="in1con_lf_tit ">
              <span class="in1con_lf_titshow">监测与预警</span>
              <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
            </div>
            <div style=" margin-top: 26px; margin-bottom: 10px; ">
              <el-collapse-transition>
              <el-timeline v-if="alertList && alertList.length > 0" style="margin-left: 30px;position: relative;top: -20px; overflow: hidden;height: 252px;">
                <el-timeline-item v-for="(activity, index) in alertList" :key="index" :color="`#66a8f1`"
                                  :size="'normal'" :placement="`top`" style="top: 20px;" >
                  <div class="maintainLog">
                    <div class="maintainLogContent">
                      <span class="el-icon-mobile"></span>&nbsp;
                      <span>{{activity.itemName}}</span>
                      <span style="color: #f4d877;font-size: 20px;">&nbsp;{{activity.survValue}}</span>
                      <span style="color: #f4d877;font-size: 12px;">{{activity.survUnit}}&nbsp;</span>
<!--                      <span>标准值&nbsp;{{activity.normalValue}}{{activity.survUnit}}</span>-->
                      <span :style="{color:activity.readStatus=='low'?'#66A8F1FF':activity.readStatus=='high'?'#ff676a':''}">({{activity.readStatus=='low'?'偏低':activity.readStatus=='high'?'偏高':'正常'}})</span>
                    </div>
                    <div class="maintainLogPerson"></div>
                    <div class="maintainLogTime">
                      <span class="el-icon-time"></span>&nbsp;{{activity.alertTime}}
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
              </el-collapse-transition>
              <div v-if="alertList && alertList.length <= 0">
                <div style="margin:60px auto; width: 100%;font-size: 40px;color: #edd792; text-align: center;">暂无预警数据</div>
              </div>
              <div v-if="!alertList">
                <div style="margin:60px auto; width: 100%;font-size: 30px;color: #edd792; text-align: center;">
                  <i class="el-icon-loading"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 站点介绍弹窗 -->
      <el-dialog width="60%"  :visible.sync="qczddialogTableVisible" >
        <div class="tz_cov">
          <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 stationDetail.stationPic" :key="index">
                    <viewer :images="stationDetail.stationPic">
                      <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">{{stationDetail.stationName}}</span>
                <span class="tcgldw1">管理单位：{{stationDetail.stationIntro}}</span>
                <span class="tcgldw1">建站时间：{{stationDetail.buildTime}}</span>
                <span class="tcgldw1">站点介绍：{{stationDetail.stationOrg}}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
      <SingleEchartDialog   v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
    </div>
  </ScaleBox>
</template>

<script>
import ScaleBox from 'vue2-scale-box'
import {
  getStationDetail,
  getStationDisplay,
  getIndexSummry,
  survItemSummary,
  getMaintainLog,
  stationInfo,
  getAlertRecord, doGetAlertRecord
} from '@/api';
import vueSeamlessScroll from 'vue-seamless-scroll'
import hefentianqi from '@/pages/weather/weather.vue'
import SingleEchartDialog from "@/components/SingleEchartDialog.vue";

export default {
  components: {
    SingleEchartDialog,
    vueSeamlessScroll,
    hefentianqi,
    ScaleBox
  },
  name: "MywrList",
  data() {
    return {
      loading: true,
      stationList:[],
      currentPlayerLive: true,
      singleEchartDialogShowFlag: false,
      singleEchartData: null,
      stationCode: '',
      stationType:'',
      urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
      player: {},
      timer: {},
      interval: {},
      play: false, //默认停止播放
      nowTime: '',
      stationDetail: null,
      DetailListAirData: '',
      // DetailListSoilData: '',
      DisplayList: '',
      DisplayListdetailList0: '',
      DisplayListdetailList1: '',
      DisplayListdetailList2: '',
      DisplayListdetailList3: '',
      inforname: '',
      dialogVisible: false,
      fullscreen: false, //全屏
      qczddialogTableVisible: false,
      waterData: {},
      summryAllData: null,
      echartIndex: 0,
      maintainLogList: [],
      dateType: 'monthDays',
      dateTypeOptions: [ {
        value: 'dayhours',
        label: '24小时'
      }, {
        value: 'monthDays',
        label: '30天'
      }, {
        value: 'yearMonth',
        label: '12个月'
      }],
      echartObj: null,
      animateObj: [],
      alertList: null,
    };
  },
  destroyed() {
   this.doDestroyed();
  },
  created() {
    this.stationCode = this.$route.query.stationCode
  },
  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 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() {
    this.initStart()
  },
  methods: {
    doDestroyed(){
      let that = this;
      that.alertList = null;
      //离开页面时销毁
      Object.values(this.timer).map(item => {
        if(item){
          clearTimeout(item);
        }
      });
      Object.values(this.interval).map(item => {
        if(item){
          clearInterval(item);
        }
      });
      this.interval = {};
      this.timer = {};
      if(that.player){
        Object.keys(that.player).forEach(key => {
          if(that.player[key]){
            console.log(that.player[key])
            if(that.player[key].stop){that.player[key].stop();}
            if(that.player[key].destroy){that.player[key].destroy();}
          }
        })
        that.player = {};
      }
    },
    initStart(){
      this.loading = true;
      // 实时时间
      this.infor()
      getStationDisplay(this.stationCode).then(val => {
        this.DisplayList = val.result
        this.DisplayListdetailList0 = val.result.effect_assess[0].detailList[0]
        this.DisplayListdetailList1 = val.result.effect_assess[0].detailList[1]
        this.DisplayListdetailList2 = val.result.effect_assess[0].detailList[2]
        this.DisplayListdetailList3 = val.result.effect_assess[0].detailList[3]
      })
      this.initChartData();//下方echart监测图标
      this.stationDetailApi();
      this.getNowTime();
      this.initMaintainLog();
      this.stationInfoApi();
      this.getAlertRecord();
    },
    initMaintainLog(){//巡检日志
      getMaintainLog({stationCode: this.stationCode, pageSize: 3}).then(res => {
        if (res.code === 200) {
          this.maintainLogList = res.result.records;
          setTimeout(() => {
            this.loading = false;
          }, 1000)
        }
      })
    },
    getAlertRecord(){
      doGetAlertRecord({stationCode: this.stationCode, pageSize: 3}).then(res => {
        console.warn('监测预警数据',res)
        if (res.code === 200) {
          if(res.result.records.length === 0 && this.stationDetail.latestData !== 0){
            //itemName survValue survUnit normalValue survUnit readStatus alertTime
            let tempData = [];
            this.stationDetail.latestData.map(item => {
              tempData.push({
                itemName: item.name,
                survValue: item.value,
                survUnit: item.unit,
                normalValue: item.value,
                readStatus: 'normal',
                alertTime: item.dataDateTime,
              });
            })
            this.alertList = tempData;
          } else {
            this.alertList = res.result.records;
          }

        }
      })
    },
    changeDateType() {
      // this.summryAllData = null;
      this.initChartData();
    },
    initChartData() {
      this.riverList = [];
      this.summryAllData = [];
      getIndexSummry({summrayMode: this.dateType, statsionCode: this.stationCode}).then(res => {
        if (res.code === 200) {
          this.summryAllData = res.result;
          let len = this.summryAllData.length;
          // 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);
          //     }
          //   }
          // });
          this.initEchartDom(this.echartIndex)
        }
      })
    },
    // 折线图数据
    initEchartDom(index, times) {
      this.$nextTick(() => {
        let domKey = `myChartDiv0`;
        let divDom = document.getElementById(domKey);
        if (!divDom) {
          console.warn('没找到dom,两秒后重试：', domKey, divDom)
          if(times!==2){
            setTimeout(()=>{this.initEchartDom(index,2)}, 1500);
          }
          return;
        }
        if(this.echartObj){
          this.echartObj.dispose();
        }
        this.echartObj = this.$echarts.init(divDom);
        let data = this.summryAllData[index];
        let dataObj = [];
        let i = 0;
        let colors = [
          '#C41E3A', '#FF7F0E', '#FFD700', '#00A36C', '#98FB98',
          '#001F3F', '#0074D9', '#9D50BB', '#6B48FF', '#FF69B4',
          '#FF6B6B', '#556B2F', '#32CD32', '#87CEEB', '#8B0000',
          '#DAA520', '#121212', '#F5F5F5', '#C0C0C0', '#003321'
        ] ;
        for (let key in data['datas']) {
          if (data['datas'][key] instanceof Array) {
            dataObj[i++] = {
              name: key,
              color: colors[i],
              value: data['datas'][key]
            }
          }
        }
        let dateStr = data['dateStr']
        let legendData = dataObj.map(item => item.name);
        let seriesData = dataObj.map(item => {
          return {
            name: item.name,
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            data: item.value,
            lineStyle: {
              color: item.color // 设置线的颜色为红色
            },
            itemStyle: {
              color: item.color // 设置线的颜色为红色
            },
            smooth: true,
          }
        });
        var optionLine = {
          tooltip: {
            trigger: 'axis',
            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: dateStr,
            axisLine: {
              lineStyle: {
                color: '#2295ee', //x轴的颜色
                width: 1, //轴线的宽度
              },
            },
          },
          yAxis: {
            type: 'value',
            /*min:0,
            max:60,
            splitNumber:6*/
            splitLine: {
              lineStyle: {
                // 设置背景横线
                color: '#2295ee'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#2295ee', //x轴的颜色
                width: 1, //轴线的宽度
              },
            },
          },
          series: seriesData
        };
        this.echartObj.setOption(optionLine);

      })
    },
    zdinfor(){
      this.qczddialogTableVisible=true;
    },
    showEchartDialog(item, survItem) {
      console.log('showEchartDialog', item, survItem)
      if(survItem === 1){
        console.log('showEchartDialog111', item, survItem)
        const dom = item.target.closest(".jcsssj2"); // 定位元素
        if (dom) { // 是否是滚动组件的某一行/列
          survItem = dom.dataset.survitem
          if(survItem){
            this.showEchartDialog(this.stationDetail, survItem)
          }
        }
        return;
      }
      console.log('showEchartDialog222', item, survItem)
      this.singleEchartData = {
        stationCode: item.stationCode,
        deployId: item.deployId,
        survItem: survItem
      }
      setTimeout(() => {
        this.singleEchartDialogShowFlag = true;
      }, 200)
    },
    // 弹窗退出登录
    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
      }
    },
    // 实时时间
    getNowTime() {
      let that = this
      this.interval['time'] = setInterval(() =>{
        that.nowTime = that.timeNumber()
      }, 1000)
    },
    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
    },
    qcguanbi() {
      this.qczddialogTableVisible = false
    },
    stationDetailApi() {
      let that = this;
      // this.stationDetail = null
      if(that.stationDetail){
        that.stationDetail.latestData = []
      }
      getStationDetail(this.stationCode).then(res => {
        this.stationDetail = res.result
        this.stationType =  res.result.stationType
        this.DetailListAirData = res.result.latestAirData[0]
        //空气数据
        if (this.DetailListAirData) { }
        if (this.stationDetail.latestWaterData[0]) { //水数据
          this.stationDetail.latestWaterData.map(item => {
            if(item.survItem == 'dataWaterTemp'){
              that.waterData.dataWaterTemp = item.value
            } else if(item.survItem == 'dataWaterPh'){
              that.waterData.dataWaterPh = item.value
            } else if(item.survItem == 'dataWaterDo'){
              that.waterData.dataWaterDo = item.value
            } else if(item.survItem == 'dataWaterDdl'){
              that.waterData.dataWaterDdl = item.value
            } else if(item.survItem == 'dataWaterNtu'){
              that.waterData.dataWaterNtu = item.value
            }
          });
          this.animateObj = [];
          this.hhlistxunh();
        }
        // 土壤数据
        // this.DetailListSoilData = res.result.latestSoilData[0]
        that.currentPlayerLive = false;
        // 监控画面
        setTimeout(() => {
          this.switchLive(true);
        }, 2000)
      })
    },
    switchLive(live){
      let that = this;
      this.stationDetail.deviceList.forEach((item) => {
        that.initPlayer(item, live);
      })
    },
    initPlayer(itm, live){
      let that = this;
      if(this.currentPlayerLive === live){
        return;
      }
      that.currentPlayerLive = live;
      if(that.player[itm.deployCode]){
        that.player[itm.deployCode].stop();
        that.player[itm.deployCode].destroy();
      }
      that.player[itm.deployCode] = new EZUIKit.EZUIKitPlayer({
        id: itm.deployCode,
        accessToken: itm.ysToken,
        url: itm.deviceUrl,
        template: live?"pcLive":"pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        audio: false, // 是否默认开启声音 0 - 关闭 1 - 开启
        sound: 0,
        autoplay: true,
        width: 420,
        height: 231,
        handleSuccess: function () {
          console.log('萤石云播放器播放成功自定义回调', itm)
          that.timer[itm.deployCode] && clearTimeout(that.timer[itm.deployCode]);
          if (that.player[itm.deployCode]) {
            console.log('萤石云播放器播放成功自定义回调2', that.player[itm.deployCode])
            that.timer[itm.deployCode] = setTimeout(() => {
              if(that.player[itm.deployCode] && that.player[itm.deployCode].closeSound){
                that.player[itm.deployCode].closeSound();
              }
            }, 2000)
            that.timer[itm.deployCode] = setTimeout(() => {
              if(that.player[itm.deployCode] && that.player[itm.deployCode].pause){
                that.player[itm.deployCode].pause()
              }
            }, 60000)
          }
        },
      })
    },
    stationInfoApi(){
      stationInfo().then(res => {
        this.stationInfoList = res.result
        if (this.stationInfoList) {
          this.stationList = [];
          res.result.map(item => {
            this.stationList.push({
              stationCode: item.stationCode,
              stationName: item.stationName,
            })
          })
        }
      })
    },
    switchStation(e){
      console.log('切换站点');
      this.doDestroyed();
      // this.$router.push({path: '/MywrList', query: {stationCode: e.stationCode}})
      this.initStart();
    },
    addAnimateObj(dom){
      this.animateObj.push(dom);
      // console.log('特效数组添加', this.animateObj.length);
    },
    hhlistxunh() {
      // console.log('数据特效 轮询展示', this.animateObj);
      if(this.timer['water']){
        clearTimeout(this.timer['water'])
      }
      this.animateObj.forEach((item, index) => {
        // console.log('数据特效 轮询展示', item);
        if(Boolean(Math.round(Math.random()))) {
          item && item.start && item.start();
        }

      })
      this.timer['water'] = setTimeout(() => this.hhlistxunh(), 5000);
    },
    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;
    },
  }
}
</script>

<style scoped>
/* .layui-layer-shade{
	display: none;
} */

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

.fullscreenvideo {
  position: absolute;
  width: 100%;
  height: 100%;
}

.videocontainer:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  top: 0;
  left: 0;
}

.in1con_lf_imglf_num_jix {
  font-size: 1vw;
  font-weight: 300;
  font-family: HYChangLiSongKeBen;
  letter-spacing: 0.1vw
}

.returnimg {
  float: left;
  width: 2vw;
  margin-left: 3%;
  cursor: pointer;
}

.btn_left_time {
  position: relative;
  float: left;
  width: 42%;
  height: 1.6vw;
  text-align: center;
  line-height: 1.6vw;
  font-size: .8vw;
  color: #bcd3f5;
  letter-spacing: .1vw;
  cursor: pointer;
}

.btn_left_tianq {
  position: relative;
  float: left;
  width: 40%;
  height: 1.6vw;
  text-align: left;
  line-height: 1.6vw;
  font-size: .8vw;
  color: #bcd3f5;
  letter-spacing: .1vw;
  cursor: pointer;
}

.btn_right_time {
  position: relative;
  float: right;
  //width         : 97%;
  height: 1.6vw;
  text-align: right;
  line-height: 1.6vw;
  font-size: .8vw;
  color: #bcd3f5;
  letter-spacing: .1vw;
  cursor: pointer;
  margin-right: 3%;
}

.peoimg {
  width: 2vw;
  margin-left: 3%;
}

.nav_ti {
  text-align: center;
  line-height: 1vw !important;
  color: #fff;
  font-size: 1.4vw;
  letter-spacing: .2vw;
  text-shadow: 0 6px 12px rgba(0, 12, 37, .82), 0 1px 0 #004c4e, 0 2px 0 #003435, 0 6px 16px rgba(0, 220, 228, .58), 1px -3px 12px #00e0ec;
  font-family: douyuFont;
}

.nav_mag {
  margin-top: 1vw;
  display: inline-block;
}

.nav_tit {
  font-size: 0.8vw;
  color: #FFFF90;
  display: block;
  line-height: 5px;
  letter-spacing: .2vw;
  margin-top: 1vw;
  font-weight: bold;
  text-shadow: 0 6px 12px rgba(0, 12, 37, .82), 0 1px 0 #004c4e, 0 2px 0 #003435, 0 6px 16px rgba(0, 220, 228, .58), 1px -3px 12px #00e0ec;
}

.baseBoxHjleft {
  border: 1px solid #0169d0;
  position: relative;
  background: rgba(16, 45, 80, 0.9);
  box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
  overflow: hidden;
}

.in2con_zlf {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.in2con_zys {
  position: absolute;
  top: 0;
  right: 0;
}

.in2con_zzx {
  position: absolute;
  bottom: 0;
  left: 0;
}

.in2con_zyx {
  position: absolute;
  bottom: 0;
  right: 0;
}

.sanguang {
  position: absolute;
  top: -1.5vw;
  right: 15%;
}

.sanguangbt {
  position: absolute;
  bottom: -1.5vw;
  right: 15%;
}

.sanguang2 {
  position: absolute;
  top: -1.5vw;
  right: 35%;
}

.sanguangbt2 {
  position: absolute;
  bottom: -1.5vw;
  right: 35%;
}

.in1con_lf_tit {
  width: 100%;
  height: 3vw;
  text-align: center;
  overflow: hidden;
  position: relative;
}

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

.in1con_lf_titimg {
  width: 50%;
  height: 0.9vw;
  position: absolute;
  top: 1.8vw;
  left: 25%;
}

.in1con_lf_tit_show {
  font-size: 0.6vw;
  color: #0891a1;
  position: absolute;
  top: 2.2vw;
  right: 3%;
}

.home_lcgk {
  width: 80%;
  height: 6vw;
  margin: 0 auto;
  position: relative;
  overflow: auto;
}

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

/*定义滚动条轨道 内阴影+圆角*/
.home_lcgk::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(4, 111, 220, .5);
  border-radius: 10px;
  background-color: rgba(4, 111, 220, .5);
}

/*定义滑块 内阴影+圆角*/
.home_lcgk::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(4, 111, 220, .8);
  background-color: rgba(4, 111, 220, .8);
}

.home_lcgk p {
  font-size: 0.8vw;
  color: #fff;
  line-height: 27px;
  text-indent: 2rem;
}

.in1con_lf_img {
  width: 100%;
  overflow: hidden;
}

.in1con_lf_imglf {
  width: 33.33%;
  float: left;
}

.in1con_lf_imgone {
  width: 60%;
  margin-left: 20%;
}

.in1con_lf_imglf_tit {
  display: block;
  font-size: 0.6vw;
  color: #bcd3f5;
  text-align: center;
}

.in1con_lf_imglf_num {
  display: block;
  font-size: 0.8vw;
  color: #d8e714;
  text-align: center;
}

.qhhjcov {
  width: 100%;
  overflow: hidden;
}

.qhhjcov_lf {
  width: 33%;
  float: left;
}

.qhhjcov_lfimg {
  margin-top: 0.2vw;
  margin-left: 5%;
}

.qhhjcov_lf_tit {
  font-size: 0.8vw;
  color: #fff;
}

.qhhjcov_time {
  font-size: 1vw;
  color: #00f6ff;
  display: block;
  text-align: center;
}

.sx_cov {
  width: 100%;
  height: 6vw;
  margin: 0 auto;
  border: 1px solid rgba(69, 233, 248, 0.41);
  border-radius: 0.5vw;
  margin-top: 1.5vw;
  box-shadow: inset 0px 0px 16px 0px rgba(11, 153, 173, 1);
  cursor: pointer;
}

.sx_covtit {
  font-size: 1vw;
  font-weight: bold;
  color: #00F6FF;
  display: block;
  text-align: center;
  margin-top: 0.5vw;
}

.sx_cov_lt {
  width: 33.33%;
  text-align: center;
  float: left;
  margin-top: 0.5vw;
}

.sx_cov_lt_tit {
  font-size: 0.8vw;
  color: #ACC5E2;
  display: block;
}

.sx_cov_lt_num {
  color: #00F6FF;
  font-size: 0.9vw;
}

.home_dlhj {
  width: 88%;
  min-height: 2vw !important;
  height: 15vw !important;
  margin: 0 auto;
}

.home_dlhj .layui-carousel {
  background: none;
}

.home_dlhj .layui-carousel > [carousel-item]:before {
  position: absolute;
  content: '\e63d';
  left: 50%;
  top: 50%;
  width: 0px;
  line-height: 1vw;
  margin: -0.5vw 0 0 -2.5vw;
  text-align: center;
  color: #c2c2c2;
  font-family: layui-icon !important;
  font-size: 30px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: none;
}

.home_dlhj .layui-carousel {
  background: none;
}

.home_dlhj .layui-carousel > [carousel-item] > * {
  background: none;
}

.home_dlhj .layui-carousel > [carousel-item]:before {
  position: absolute;
  content: '\e63d';
  left: 50%;
  top: 50%;
  width: 0px;
  line-height: 1vw;
  margin: -0.5vw 0 0 -2.5vw;
  text-align: center;
  color: #c2c2c2;
  font-family: layui-icon !important;
  font-size: 1.5vw;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: none;
}

.jczcov {
  width: 96%;
  height: 12vw;
  overflow: hidden;
  margin: 0 auto;
  /* margin-left: 2%; */
}

.jczcov_lf {
  width: 100%;
  height: 100%;
  float: left;
  margin-left: 1%;
  margin-right: 2%;
}

.jczcov_lftit {
  font-size: 0.8vw;
  color: #fff;
  display: block;
  text-align: center;
}

.jczimg {
  width: 100%;
  height: 6vw;
}

.jczbtm {
  width: 100%;
  height: 6vw;
  overflow: hidden;
}

.jczbtm_lf {
  width: 33.3%;
  height: 3vw;
  float: left;
  overflow: hidden;
}

.tpimg {
  width: 1.8vw;
  float: left;
  margin-top: 0.8vw;
}

.jczbtm_lf_rt {
  width: 70%;
  float: right;
}

.jczbtm_lf_rttit {
  display: block;
  text-align: left;
  font-size: 0.8vw;
  margin-top: 0.4vw;
  color: #fff;
}

.jczbtm_lf_rtnum {
  display: block;
  text-align: left;
  font-size: 0.8vw;
  color: #27ddfe;
}

.mywrcov_one {
  width: 33%;
  height: 4.5vw;
  position: absolute;
  top: 0.4vw;
  left: 3%;
}

.mywrcov_two {
  width: 33%;
  height: 4.5vw;
  position: absolute;
  top: 0.4vw;
  right: 3%;
  text-align: right;
}

.mywrcov_onetit {
  font-size: 0.8vw;
  color: #fff;
  display: block;
}

.mywrcov_onenum {
  font-size: 1.4vw;
  color: #cce21d;
  display: block;
}

.mywrcov_three {
  width: 33%;
  height: 4.5vw;
  position: absolute;
  bottom: 0.4vw;
  left: 3%;
}

.mywrcov_four {
  width: 33%;
  height: 4.5vw;
  position: absolute;
  bottom: 0.4vw;
  right: 3%;
  text-align: right;
}

.mywrcovcen {
  width: 33%;
  height: 4.5vw;
  position: absolute;
  top: 2.4vw;
  left: 33%;
  text-align: center;
}

.mywrcovcen_tit {
  font-size: 2vw;
  color: #5aff8b;
  display: block;
}

.mywrcovcen_con {
  font-size: 0.6vw;
  color: #fff;
}

.jcsssj {
  width: 94%;
  height: 4vw;
  margin: 0 auto;
}

.jcsssj2 {
  width: 94%;
  height: 3.4vw;
  margin: 0 auto;
}

.jcsssj_xian {
  width: 0.9vw;
  height: 4vw;
  float: left;
}

.jcsssj_xian2 {
  width: 0.9vw;
  height: 3.4vw;
  float: left;
}

.jcsssj_rt {
  width: 94%;
  height: 2.4vw;
  background: #0c2139;
  float: right;
  display:block;
}

.jcsssj_rt_tit {
  font-size: 0.8vw;
  display: block;
  width: 100%;
  overflow: hidden;
  color: #fff;
  margin-top: 0.2vw;
  margin-left: 1%;
  margin-bottom: 0.5vw;
}

.jcsssj_rt_time {
  //font-size: 0.8vw;
  //display: inline-block;
  //width: 38%;
  //overflow: hidden;
  //color: #dbe8fb;
  //margin-right: 0.2vw;
  /* float:right; */
  //margin-top: 0.6vw;
  //text-align: right;
}

.jcsssj_rtbiao {
  float: left;
  font-size: 0.8vw;
  color: #fff;
  background: #46a385;
  border-radius: 0.2vw;
  padding: 0 0.2vw;
  margin-left: 2%;
  margin-top: 0.6vw;
}

.jcsssj_rt_num {
  display: inline-block;
  font-size: 0.8vw;
  /* color: #fff; */
  margin-left: 10px;
  text-align: right;
  margin-top: 0.4vw;
}

.zlxg {
  position: relative;
}

.jcsssj_rt_up {
  margin-top: 0.7vw;
}

.zlxg_btm {
  width: 69%;
  height: 15vw;
  border: 1px solid #0169d0;
  position: absolute;
  bottom: 0;
  left: 31.5%;
  z-index: 66;
  background: rgba(16, 45, 80, 0.9);
  box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
}

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

.zywr_titshow {
  font-size: 1vw;
  color: #fff;
  text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
  font-weight: bold;
  margin-top: 0.9vw;
  float: left;
  margin-left: 3%;
}

.zywr_titrt {
  width: 25%;
  height: 3vw;
  float: right;
  line-height: 3vw;
}

.zywricon1 {
  width: 1vw;
  margin-top: 1vw;
}

.zywricon1_tit {
  font-size: 0.7vw;
  color: #fff;
  margin-right: 4%;
}

.zlxg_btm .layui-tab .layui-tab-title li {
  width: 19%;
  margin-left: 2% !important;
  border-radius: 0.4vw;
  background: #0e2c3f;
  color: #fff !important;
}

.zlxg_btm .layui-this {
  width: 19%;
  margin-left: 2% !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);
}

.zlxg_btm .layui-this:after {
  border: none !important;
}

.zlxg_btm .layui-tab .layui-tab-title {
  position: relative;
  left: 0;
  height: 40px;
  white-space: nowrap;
  font-size: 0;
  border-bottom-width: 0;
  border-bottom-style: solid;
  transition: all .2s;
  -webkit-transition: all .2s;
}

#chart1 {
  height: 12vw;
}

.scdlist {
  width: 9vw;
  height: 2vw;
  line-height: 2vw;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.4vw;
  border: 1px solid #4b677c;
  position: absolute;
  bottom: 16vw;
  left: 0;
}

.scdlist2 {
  width: 9vw;
  height: 2vw;
  line-height: 2vw;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.4vw;
  border: 1px solid #4b677c;
  position: absolute;
  bottom: 19vw;
  left: 0;
}

.scdlist3 {
  width: 9vw;
  height: 2vw;
  line-height: 2vw;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.4vw;
  border: 1px solid #4b677c;
  position: absolute;
  bottom: 22vw;
  left: 0;
}

.xcdimg {
  width: 0.9vw;
  margin-top: 0.4vw;
  margin-left: 0.4vw;
  margin-right: 0.4vw;
}

.xcd2img {
  width: 0.9vw;
  margin-top: 0.1vw;
  margin-left: 0.4vw;
  margin-right: 0.4vw;
}

.scdlist_tit {
  font-size: 0.7vw;
  color: #fff;
  text-shadow: 2px 2px 0 #163796,
  -2px 2px 0 #163796,
  2px -2px 0 #163796,
  -2px -2px 0 #163796;
}

.jctc {
  width: 17.5vw;
  height: 29vw;
  background: url(../../assets/image/jctc.png) no-repeat;
  background-size: cover;
  position: absolute;
  right: 3%;
  top: 0;
}

.jctcvban {
  width: 90%;
  height: 9vw;
  margin: 0 auto;
  margin-top: 0.4vw;
  background: url(../../assets/image/jctc_banner.png) no-repeat;
  background-size: cover;
  margin-left: 6%;
}

.jctc_add {
  height: 1vw;
  padding-left: 3%;
  margin-top: 0.6vw;
}

.jctcicon1 {
  width: 0.7vw;
  margin-top: 0.1vw;
}

.jctcvban_tit {
  font-size: 0.7vw;
  color: #fff;
}

.jctc_text {
  padding: 0.1vw 0.4vw;
  border-radius: 0.2vw;
  background: #46a385;
  margin-left: 0.8vw;
  margin-top: 0vw !important;
  margin-bottom: 10px !important;
  color: #fff;
}

.ljjr {
  width: 40%;
  margin-left: 30%;
  margin-top: 2vw;
}

.cenimg2 {
  width: 94%;
  margin-left: 3%;
  margin-top: 2vw;
}

.no3 {
  width: 10%;
  float: left;
}

.no4 {
  width: 7%;
  float: left;
  margin-left: 35%;
}

.no5 {
  width: 10%;
  float: right;
}

.baseBoxRight_no {
  width: 100%;
  height: 8vw;
  margin-top: 1vw;
}

.baseBoxRight_zhuan {
  width: 100%;
  height: 24vw;
  position: relative;
}

.no3btn {
  width: 80%;
  position: absolute;
  bottom: 0;
  left: 10%;
  z-index: 1;
}

.nohome {
  width: 100%;
  position: absolute;
  bottom: 4vw;
  left: 0%;
  z-index: 2;
}

.zhpjimg2 {
  width: 94%;
  height: 84%;
  margin-left: 3%;
}

.qxsjssjc {
  width: 100%;
  overflow: hidden;
}

.qxsjssjc_left {
  width: 25%;
  float: left;
}

.qxjcimg2 {
  width: 50%;
  height: 15.4vw;
  float: left;
}

.qxsjssjc_left_list {
  width: 4.5vw;
  height: 2.5vw;
  border: 1px solid #2d84c5;
  border-radius: 0.4vw;
  margin-left: 10%;
  text-align: center;
  margin-top: 0.8vw;
}

.qxsjssjc_left_list_tit {
  width: 100%;
  height: 1vw;
  text-align: center;
  line-height: 1vw;
  background-image: linear-gradient(#0F2643, #14446B);
  color: #fff;
  border-radius: 0.4vw 0.4vw 0 0;
}

.qxsjssjc_left_list_show {
  font-size: 0.8vw;
  color: #5bf9ff;
  display: inline-block;
  padding-top: 0.2vw;
}

.mywrcov {
  width: 94%;
  height: 11.5vw;
  margin-left: 3%;
  position: relative;
  background: none;
}

.mywrcov_lf {
  width: 20%;
  height: 14vw;
  float: left;
  overflow: hidden;
  position: absolute;
  top: -1.5vw;
  left: 0;
}

.mywrcov_lfposi {
  position: relative;
  width: 100%;
  height: 3.7vw;
  /* overflow: hidden; */
}

.mywrcov_lf_num {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.6vw;
  color: #86ffa2;
}

.mywrcov_lf_hen {
  position: absolute;
  top: 0;
  left: 35%;
  font-size: 0.8vw;
  color: #71d3ff;
}

.jcxianimg2 {
  width: 1.6vw;
  position: absolute;
  top: 0;
  left: 45%;
}

.jiaintou2 {
  width: 1vw;
  position: absolute;
  bottom: -1.8vw;
  left: 85%;
}

.mywrcov_rt {
  width: 80%;
  float: right;
  overflow: hidden;
}

.mywrcov_rt_con {
  width: 30%;
  height: 3vw;
  float: left;
  position: relative;
  margin-top: 0.7vw;
  margin-left: 3%;
}

.mywrcov_rt_con1 {
  width: 33.33%;
  height: 1vw;
  float: left;
  position: relative;
  text-align: center;
}

.sjjcimg2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.mywrcov_rt_con_tit {
  font-size: 0.7vw;
  color: #fff;
}

.mywrcov_rt_con_num {
  font-size: 1.4vw;
  text-align: center;
  display: block;
}

/* fallback for IE */
.mywrcov_rt_con_num {
  color: #fff;
}

/* gradient text for modern browsers */
@supports (background-clip: text) {
  .mywrcov_rt_con_num {
    background-image: linear-gradient(0deg, #fff, #fff);
    background-clip: text;
    color: transparent;
  }
}


.boxRader {
  position: relative;
  width: 100%;
  height: 80%;
}

.centerBox {
  width: 76%;
  margin-right: 15px;
  background: transparent;
}

.boxFont {
  font-size: 1.2vw;
}

.centerMainBox1 {
  width: 100%;
  height: 60.5%;
}

.centerMainBox2 {
  width: 100%;
  height: 38.5%;
  position: relative;
  margin-top: 15px;
}

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

.boxTitle2 {
  width: 100%;
  height: 10%;
  font-size: .6vw;
  text-align: center;
  line-height: 10%;
  margin-top: 1vw;
  color: #0efcff;
}

.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: 30%;
  height: 100%;
  position: relative;
}

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

/* .baseBoxLeft img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
} */

.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;
}

.zhpjtit {
  position: absolute;
  left: 0;
  top: 5vw;
  color: #2ff06f;
  width: 100%;
  text-align: center;
  font-size: 2vw;
  font-weight: bold;
}

.in1con_lf_moreimg {
  position: absolute;
  right: 3%;
  top: 0.8vw;
  z-index: 3;
  cursor: pointer;
  color: #b0bbc2;
}

.in1con_lf_moreimg:hover {
  position: absolute;
  right: 3%;
  top: 0.8vw;
  z-index: 3;
  cursor: pointer;
  color: #efff5d;
}

/* 弹窗样式 */
.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;
}

.tcgldw1 {
  font-size: 1vw;
  color: #fff;
  line-height: 2vw;
  display: block;
}

.tz_cov {
  width: 100%;
  height: 25vw;
  margin: 0 auto;
  /* margin-top: 4vw; */
  border: 1px solid #0169d0;
  position: relative;
  background: rgba(16, 45, 80, 0.9);
  box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1);
}

.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;
}

.guanbiann {
  width: 2vw;
  height: 2vw;
  position: absolute;
  right: 2%;
  top: 1vw;
  cursor: pointer;
}

.changguiwucanshu {
  display: flex;
  justify-content: center;
  cursor: pointer;
  .wucanshuDiv {
    width: 144px;
    height: 104px;
    background: url("~@/assets/image/fx_duizu_weihu_icon22.png") no-repeat;
    background-origin: border-box;
    background-size: cover;
    text-align: center;
    cursor: pointer;
    .wucanshuValueDiv {
      font-weight: 300;
      font-family: HYChangLiSongKeBen,  sans-serif;
      letter-spacing: 0.1vw;
      display: block;
      font-size: 26px;
      color: #d8e714;
      text-align: center;
      padding-left: 27px;
      padding-top: 12px;
      cursor: pointer;
      .typeStyle {
        font-family: sans-serif;
        margin-left: 4px;
        font-size: 12px;
      }
    }
    .wucanshuValueDiv:hover {
      color: #f4d877;
      font-size: 29px;
    }
  }
  .wucanshuDiv:hover {
    color: #f4d877 !important;
    font-size: 29px!important;
  }

  .wucanshuNameDiv {
    color: white;
    text-align: center;
    padding-left: 21px;
    padding-top: -19px;
    font-size: 14px;
  }
}
.maintainLog{
  position: relative;
  bottom: 28px;
  width: 344px;
  height: 54px;
  background: url("~@/assets/image/fx_duizu_weihu_icon.png") no-repeat;
  background-origin: border-box;
  background-size: contain;
  color: white;
  .maintainLogContent{
    padding-left: 74px;
    //padding-top: 8px;
    color: #81b8e9;
    width: 258px; /* 设置容器宽度 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
    white-space: nowrap; /* 禁止换行 */
  }
  .maintainLogPerson{
    display: none;
  }
  .maintainLogTime{
    padding-left: 74px;
    padding-top: 8px;
    color: #bcbbbb;
  }
}
.el-timeline-item__tail {
  border-left-color: rgb(71 105 172) !important;
}
.dataTypeEchart2{
  left: 246px;
  top: 0px;
}
.switchLive {
  position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500;
}
.switchLive:hover {
  color: rgb(236, 196, 23);
}
.switchStation {
  position: absolute;
  right: 450px;
  cursor:pointer;
  z-index: 2000;
  width: 180px
}
.xuqingchuli{
  .in1con_lf_tit{
    width: 100%;
    height: 3vw;
    text-align: center;
    overflow: hidden;
    position: relative;
  }
  .in1con_lf_titshow{
    font-size: 1vw;
    color: #fff;
    text-shadow: 0px 2px 0px rgba(4,49,52,0.55);
    display: block;
    margin-top: 0.9vw;
    font-family: douyuFont;
  }

  .qxfwzcl{
    width: 100%;
    margin-top: 1vw;
    overflow: hidden;
  }
  .qxfwzcl_left{
    width: 40%;
    float: left;
  }
  .qxfwzcl_rit{
    width: 60%;
    float: right;
    position: relative;
  }
  .qxfwzcl_left_tit{
    width: 90%;
    height: 1.4vw;
    line-height: 1.4vw;
    background: url(../../assets/image/qctit.png)no-repeat;
    background-size: cover;
    margin-left: 5%;
    color:#e5eefa ;
    padding-left: 0.6vw;
    font-size: 0.7vw;
  }
  .qxfwzcl_left_num{
    width: 100%;
    display: block;
    text-align: center;
    font-size: 1.8vw;
    color: #f1ff0d;
    margin-top: 0.2vw;
    margin-bottom: 1vw;
  }
  .in1con_lf_imglf_num_jix{
    font-size: 1.5vw;
    font-weight: 300;
    font-family: HYChangLiSongKeBen;
    letter-spacing:0.1vw
  }

  .qxfwzcl_rit_smt{
    font-size: 0.7vw;
    color: #fff;
    position: absolute;
    top: 8.4vw;
    left: 25%;
    z-index: 2;
  }
  .qxfwzcl_rit_num{
    font-size: 2vw;
    color: #f1ff0d;
    position: absolute;
    top:4.4vw;
    left: 34%;
    z-index: 2;
  }
  .png01_iSpt{
    width: 150%;
    position: absolute;
    top: -3vw;
    left: -34%;
    z-index: 2;
  }

  .qcshuj{
    width: 100%;
    position: absolute;
    top: -2vw;
    left: 0;
    z-index: 1;
  }
}
</style>

