<template>
	<ScaleBox
      :width="1920"
      :height="1080"
      bgc="transparent"
      :delay="100"
      :isFlat="true"
    >
  		<div class="main2">
			<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">{{DetailList.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;"><hefentianqi /></span>
				</div>
				<div class="btn_right">
					<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">
				<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="jczcov_lf" v-for="value in DetailList.deviceList" :key="value.id">
										<div class="jczimg" :id="value.deployCode">

										</div>
										<!-- <img src="@/assets/image/jkimg.png"  class="jczimg" alt=""> -->
									</div>
								</div>
								<div class="jctc_add">
									<img src="@/assets/image/jctcicon1.png" class="jctcicon1" alt="">
									<span class="jctcvban_tit">站点名称：{{DetailList.stationName}}</span>
								</div>
								<div class="jctc_add">
									<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
									<span class="jctcvban_tit">建站时间：{{DetailList.buildTime}}</span>
								</div>
								<div class="jctc_add">
									<img src="@/assets/image/jctcicon3.png" class="jctcicon1" alt="">
									<span class="jctcvban_tit">站点位置：{{DetailList.stationLocation}} </span>
								</div>
								<!-- <div class="jctc_add">
									<img src="@/assets/image/jctcicon2.png" class="jctcicon1" alt="">
									<span class="jctcvban_tit">监测范围：{{DetailList.survRange}}</span>
								</div> -->
								<div class="jctc_add" style="height:auto;">
									<img src="@/assets/image/jctcicon4.png" class="jctcicon1" alt="">
									<span class="jctcvban_tit">监测指标</span>
									<span class="jctc_text" v-for="(item,index) in DetailList.survColorItems" :key="index" :style="{background:(item.color)}"  style="background: #445fb4;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">{{DetailList.deviceCount}}</span>个</span> -->
										<span class="in1con_lf_imglf_num"><span class="in1con_lf_imglf_num_jix">5</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">{{DetailList.deviceCount}}</span> -->
											<span class="in1con_lf_imglf_num_jix">5</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">{{DetailList.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:14vw;overflow:hidden;" @click.stop="handleClick($event)">
									<vue-seamless-scroll :data="DetailList.latestData" class="wp-1 hp-1" :class-option="classOption">
											<li class="jcsssj2" v-for="(item,index) in DetailList.latestData" :key="index" :data-survItem="item.survItem">
												<img src="@/assets/image/xian2.png" class="jcsssj_xian2" alt="">
												<div class="jcsssj_rt" @click="tczxtc(item.survItem)">
													<div style="float: left;width: 59%;">
														<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">{{item.dataDateTime}}</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>
								<!-- <div class="zywr_titrt">
									<img src="@/assets/image/zywricon1.png" class="zywricon1" alt="">
									<span class="zywricon1_tit">总磷</span>
									<img src="@/assets/image/zywricon2.png" class="zywricon1" alt="">
									<span class="zywricon1_tit">总氮</span>
									<img src="@/assets/image/zywricon3.png" class="zywricon1" alt="">
									<span class="zywricon1_tit">硝态氮</span>
								</div> -->
							</div>
							<div id="chart1" ref="echarts"></div>
						</div>
					</div>
				</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" >{{DisplayListdetailList.detailValue}}</span>
						</div>
					</div>
					<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 1.15vw;"></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 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">
									{{DisplayListdetailList2.detailCode}}
								</div>
								<span class="qxfwzcl_left_num in1con_lf_imglf_num_jix">{{DisplayListdetailList2.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">{{DisplayListdetailList1.detailCode}}</span>
								<span class="qxfwzcl_rit_num in1con_lf_imglf_num_jix">{{DisplayListdetailList1.detailValue}} <span style="font-size: 0.5vw;">万头</span> </span>
							</div>
						</div>
					</div>
					<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 1.15vw;"></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 class="ecqtssjc" >
							<img src="@/assets/image/ecjcbak.png" class="ecjcbak" alt="">
							<div class="ecqtssjc_con animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
								<span class="ecqtssjc_con_tit">{{DisplayListstinkList4.detailValue}}</span>
								<span class="ecqtssjc_con_sma">空气质量</span>
							</div>
							<div class="ecqtssjc_lettp animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
								<button type="button" @click="startAnimate()" style="display:none;">  </button>
								<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
								<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-else>
									<animate-number class="in1con_lf_imglf_num_jix" ref="myNum1" from="0" :to="latestStinkData[0].dataOu" :key="latestStinkData[0].dataOu" duration="3000" :formatter="formatter"></animate-number>
								</span>
								<span class="ecqtssjc_lettp_sma">臭气浓度</span>
							</div>
							<div class="ecqtssjc_lettb animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
								<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
								<span class="ecqtssjc_lettb_tit in1con_lf_imglf_num_jix" v-else>
									<animate-number class="in1con_lf_imglf_num_jix" ref="myNum2" from="0" :to="latestStinkData[0].dataNh3" :key="latestStinkData[0].dataNh3" duration="3000" :formatter="formatter"></animate-number>
								</span>
								<span class="ecqtssjc_lettb_sma"> 氨气</span>
							</div>
							<div class="ecqtssjc_ritp animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
								<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
								<span class="ecqtssjc_ritp_tit in1con_lf_imglf_num_jix" v-else>
									<animate-number class="in1con_lf_imglf_num_jix" ref="myNum3" from="0" :to="latestStinkData[0].dataH2s" :key="latestStinkData[0].dataH2s" duration="3000" :formatter="formatter"></animate-number>
								</span>
								<span class="ecqtssjc_ritp_sma">硫化氢 </span>
							</div>
							<div class="ecqtssjc_ritb animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
								<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
								<span class="ecqtssjc_ritb_tit in1con_lf_imglf_num_jix" v-else>
									<animate-number class="in1con_lf_imglf_num_jix" ref="myNum4" from="0" :to="latestStinkData[0].dataTvoc" :key="latestStinkData[0].dataTvoc" duration="3000" :formatter="formatter"></animate-number>
								</span>
								<span class="ecqtssjc_ritb_sma">总挥发性有机物</span>
							</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 DetailList.stationPic" :key="index">
											<viewer :images="DetailList.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">{{DetailList.stationName}}</span>
									<span class="tcgldwList">管理单位：{{DetailList.stationIntro}}</span>
									<span class="tcgldwList">建站时间：{{DetailList.buildTime}}</span>
									<span class="tcgldwList">站点介绍：{{DetailList.stationOrg}}</span>
								</div>
							</el-col>
						</el-row>
					</div>
			</el-dialog>
			<!-- 曲线弹窗 -->
			<el-dialog
				width="70%"
				top="16vh"
				:visible.sync="trqxzxdialogTableVisible"
				:modal-append-to-body="false"
			>
				<div class="tz_cov" style="height: 35vw">
					<div style="width:100%;height:100%;margin:0 auto;position: absolute;top:0;left:0;z-index:444;background:rgba(0,0,0,0.4);" v-if="trbgzhuanq"></div>
					<img src="@/assets/image/loading.gif" alt="" style="width:150px;height:150px;margin:0 auto;position: absolute;top:280px;left:45%;z-index: 555;" v-if="trbgzhuanq">
					<img
						src="@/assets/image/guanbi.png"
						class="guanbiann"
						@click="qcguanbi"
						alt=""
					/>
					<div class="tz_cov_top">
						<span class="tz_cov_top_tit">{{ descriptionValue }}</span>
					</div>
					<div class="trwdcov jgdhei">
						<div class="trwdcov_top">
						<span class="trwdcov_top_tit">时间范围</span>
						<el-date-picker
							class="trwdcov_top_time"
							v-model="timetr"
							type="daterange"
							@blur="timetrpicker"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						>
						</el-date-picker>
						<span class="trwdcov_top_tit">展示方式</span>

						<el-radio-group v-model="radiotr" @change="agreeChange">
							<el-radio label="1">折线</el-radio>
							<el-radio label="2">表格</el-radio>
						</el-radio-group>
						</div>
						<el-table
						:data="formListVlaue"
						v-if="trzx"
						height="480"
						border
						style="margin-top: 1vw; background: none"
						>
						<el-table-column prop="date" label="时间"> </el-table-column>
						<el-table-column prop="name" :label="'数值单位：' + unitValue">
						</el-table-column>
						</el-table>

						<template v-else>
						<div id="maintczxtc" style="width: 100%; height: 500px" v-if="trbg"></div>
						</template>
					</div>
					<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="tzsanguang" alt="">
					<img src="@/assets/image/sanguang.png" class="tzsanguangbt" alt="">
				</div>
			</el-dialog>
		</div>
	</ScaleBox>
</template>

<script>
import ScaleBox from 'vue2-scale-box'
import { getStationDetail, getStationDisplay, getIndexSummry,survItemSummary } from '@/api';
import vueSeamlessScroll from 'vue-seamless-scroll'
import { ModelFbx } from "vue-3d-model";
import hefentianqi from '@/pages/weather/weather.vue'
export default {
  components: {
	ModelFbx,
	vueSeamlessScroll,
	hefentianqi,
	ScaleBox
  },
  name: "CqyzList",
  data(){
    return {
		urlimg:'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
		player: null,
		enableZ:false, //默认关闭电子放大
		play: false, //默认停止播放
	qczddialogTableVisible:false,
      nowTime: '',
	  DetailList:'',
	  DisplayList:'',
	  DisplayListdetailList:'',
	  DisplayListdetailList0:'',
	  DisplayListdetailList2:'',
	  DisplayListdetailList1:'',
	  DisplayListstinkList4:'',
	  DisplayListstinkList3:'',
	  DisplayListstinkList2:'',
	  DisplayListstinkList1:'',
	  DisplayListstinkList0:'',
	  inforname:'',
	   dialogVisible: false,
	  rotation: {
		x: 0,
		y: 450,
		z: 0
	 },
	 latestStinkData:[],
	 fullscreen: false, //全屏
	 dataStr:'',
	 trqxzxdialogTableVisible:false,
	trbgzhuanq:false,
	radiotr: '1',
	trbg:null,
	trzx:false,
	timetr: [new Date(), new Date()],
	descriptionValue:null,
    };
  },
  created(){
	let stationCode = this.$route.query.stationCode
	getStationDisplay(stationCode).then(val=>{
		this.DisplayList = val.result
		this.DisplayListdetailList = val.result.effect_assess[0].detailList[3]
		this.DisplayListdetailList0 = val.result.effect_assess[0].detailList[0]
		this.DisplayListdetailList2 = val.result.effect_assess[0].detailList[2]
		this.DisplayListdetailList1 = val.result.effect_assess[0].detailList[1]
		this.DisplayListstinkList4 = val.result.stink[0].detailList[4]
		this.DisplayListstinkList3 = val.result.stink[0].detailList[3]
		this.DisplayListstinkList2 = val.result.stink[0].detailList[2]
		this.DisplayListstinkList1 = val.result.stink[0].detailList[1]
		this.DisplayListstinkList0 = val.result.stink[0].detailList[0]
	})
	getIndexSummry(stationCode).then(res=>{
		if (res.code == '200' && res.result.length > 0) {
			this.NHSummry = res.result[0].NHSummry
			this.TNSummry = res.result[0].TNSummry
			this.TPSummry = res.result[0].TPSummry
			this.CODSummry = res.result[0].CODSummry
			this.dataStr = res.result[1].dataStr
		}
	})

	this.infor()
	setInterval(this.startAnimate,10000);
  },
  computed: {
		classOption() {
			return {
				step: 0.6, // 数值越大速度滚动越快
				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.getNowTime();
    setTimeout(() =>{this.drawChart();}, 1000)
    this.getliststation()
  },
  beforeDestroy(){
    if(this.play)this.player.stop();
  },
   methods:{
	// 所有弹窗
	handleClick(e){
		const item = e.target.closest(".jcsssj2"); // 定位元素
		if (item) { // 是否是滚动组件的某一行/列
			let survitem  = item.dataset.survitem
			this.tczxtc(survitem)
		}
    },
    tczxtc(survItem){
		this.descriptionValue = ''
      this.stationCode = this.$route.query.stationCode
      this.survItem = survItem
      this.trqxzxdialogTableVisible = true
       this.trbgzhuanq = true
      setTimeout(() =>{
          this.deviceSummaryApi()
          this.trbgzhuanq = false
          this.trbg = true;
        }, 1500)
    },
	agreeChange(val){
        let that = this
        this.trbg = false;
        if (val=='1') {
          this.trbg = true
          this.trbgzhuanq = true
          this.trzx = false
          setTimeout(() =>{
            this.trbgzhuanq = false
            that.$nextTick(() => {
              that.deviceSummaryApi()
                // this.drawChartTc();
            })
          }, 1200)
        } else if(val=='2'){
          this.trbgzhuanq = true
          setTimeout(() =>{
            that.deviceSummaryApi()
            this.trbgzhuanq = false
            this.trzx = true
            this.trbg = false
          }, 1200)
        }

        that.btnstatus=(val==='1')?true:false;
    },
	// 历史数据曲线弹唱
    deviceSummaryApi(){
      let obj = {
        stationCode:this.stationCode,
        endTime:this.endTime,
        startTime:this.startTime,
        survItem:this.survItem,
        // auths:this.auths,
      }
      survItemSummary(obj).then(res=>{
        let that = this
        this.dataListVlaue = res.result.dataList
        this.timeListVlaue = res.result.timeList
        this.formListVlaue = res.result.formList
        this.unitValue = res.result.itemInfo.unit
        // this.limitStrValue = res.result.itemInfo.limitStr
        this.descriptionValue = res.result.itemInfo.description
        if (this.timeListVlaue) {
          setTimeout(() =>{
            that.$nextTick(() => {
              that.drawChartTc();
            })
          }, 700)
        }
      })
    },
	drawChartTc() {
        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        let myChart1 = this.$echarts.init(document.getElementById("maintczxtc"));
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#3c6ae1'
              }
            }
          },
          legend: {
            data: ['']
          },
          toolbox: {
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [  // 渐变颜色
              {
                offset: 0,
                color: 'rgba(85,111,253,0.70)',
                },
              {
                offset: 1,
                color: 'rgba(85,111,253,0.20)',
                  },
              ],
              global: false,
              },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.timeListVlaue.reverse(),
              axisLabel: {
                //x轴文字的配置
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                //x轴文字的配置
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            }
          ],
          series: [
            {
              name: this.descriptionValue,
              animationDurationUpdate: 1000, // 更新动画时长为 1s
              animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
              type: 'line',
              stack: 'Total',
              smooth:true,
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              lineStyle: {
                color: '#3c6ae1' // 设置线的颜色为红色
              },
              data: this.dataListVlaue.reverse(),
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart1.clear();
        myChart1.setOption(option);
      },
	// 时间
	timetrpicker(data){
      this.startTime = data.displayValue[0],
      this.endTime = data.displayValue[1],
      this.deviceSummaryApi()
    },
	formatter: function (num) {
        return num.toFixed(2)
      },
	  startAnimate() {
        console.log("this.$refs",this.$refs)
		if (this.$refs.myNum1) {
			this.$refs.myNum1.start()
			this.$refs.myNum2.start()
			this.$refs.myNum3.start()
			this.$refs.myNum4.start()
		}
      },
	getliststation(){
		let stationCode = this.$route.query.stationCode
		getStationDetail(stationCode).then(res=>{
				this.DetailList = res.result
				this.latestStinkData = res.result.latestStinkData
				// 视频
				this.DetailList.deviceList.forEach((itm) => {
					setTimeout(() =>{
						this.player = new EZUIKit.EZUIKitPlayer({
							id: itm.deployCode, // 视频容器ID
							accessToken: itm.ysToken,
							url: itm.deviceUrl,
							template: "security", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
							audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
							autoplay: true,
							width:430,
							height:231,
						})
					}, 2000)
				})
		})
	},

	// 弹窗退出登录
	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 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
    },
	drawChart() {
		 // 折线图1
		let myChart = this.$echarts.init(document.getElementById('chart1'));
		let optionLine = {
		tooltip: {
			trigger: 'axis'
		},
		grid: {
			top:'14%',
			left: '3%',
			right: '4%',
			bottom: '9%',
			containLabel: true
		},
		legend: {
			padding:[0,50,0,0],
				x:'right',      //可设定图例在左、右、居中
				y:'top',     //可设定图例在上、下、居中
			// data: ['总氮', '总磷', '氨氮', '化学需氧量'],
			textStyle:{
			fontSize: 12,//字体大小
			color: '#ffffff',//字体颜色
			},
			},
		xAxis: {
			type: 'category',
			boundaryGap:false,
			// data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
			data:this.dataStr,
			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: [
			{
				name:'总氮',
				type:'line',
				stack: '总量1',
				data:this.TNSummry,
				lineStyle: {
					color: '#009DB2' // 设置线的颜色为红色
				},
				smooth:true,
			},
			{
				name:'总磷',
				type:'line',
				stack: '总量1',
				data:this.TPSummry,
				lineStyle: {
					color: '#00FF89' // 设置线的颜色为红色
				},
				smooth:true,
			},
			{
				name:' 氨氮',
				type:'line',
				stack: '总量1',
				data:this.NHSummry,
				lineStyle: {
					color: '#FF0D00' // 设置线的颜色为红色
				},
				smooth:true,
			},
			{
				name:' 化学需氧量',
				type:'line',
				stack: '总量1',
				data:this.CODSummry,
				lineStyle: {
					color: '#FFC100' // 设置线的颜色为红色
				},
				smooth:true,
			}
		]
		};
		//为echarts对象加载数据
		myChart.setOption(optionLine);
	},
	zdinfor(){
		this.qczddialogTableVisible = true
	},
	qcguanbi(){
		this.qczddialogTableVisible = false
		this.trqxzxdialogTableVisible = false
	},
	// 开启/关闭 电子放大
    toggleZoom(){
      if(!this.player || !this.play) return;
      switch (this.enableZ) {
        case true:
          this.player.closeZoom();
          this.enableZ = false;
          break;
        case false:
          this.player.enableZoom();
          this.enableZ = true;
          break;
        default:
          break;
      }
    },
    // 播放/停止 监控
    togglePlay(){
      if(!this.player) return;
      switch (this.play) {
        case true:
          this.player.stop();
          this.play = false;
          break;
        case false:
          this.player.play();
          this.play = true;
          break;
        default:
          break;
      }
    },
    // 视频截图
    isCapturePicture(){
      if(!this.player || !this.play) return;
      this.player.capturePicture();
    },
    // 全屏
    isFullScreen(){
      if(!this.player || !this.play) return;
      this.player.fullScreen();
    },
	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>
.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;
}
.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%;
}
.in1con_lf_imglf_num_jix{
	font-size: 1vw;
	font-weight: 300;
	font-family: HYChangLiSongKeBen;
	letter-spacing:0.1vw
}
.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;
}
.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-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;
}
.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: 40%;
	overflow: hidden;
	color: #dbe8fb;
	margin-right: 0.2vw;
	/* float: right; */
	margin-top: 0.4vw;
	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: 5%;
	text-align: right;
	margin-top: 0.6vw;
}
.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: 3vw;
	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%;
  font-family: douyuFont;
}
.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;
	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%;
}
.mywrcov{
	width: 94%;
	min-height: 12vw;
	margin-left: 3%;
	position: relative;
}
.mywrcov_lf{
	width: 20%;
	height: 3.7vw;
	float: left;
}
.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: 0;
	left: 75%;
}
.mywrcov_rt{
	width: 80%;
	float: right;
	overflow: hidden;
}
.mywrcov_rt_con{
	width: 33.33%;
	height: 3vw;
	float: left;
	position: relative;
	margin-top: 0.7vw;
}
.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;
  }
}

.ecqtssjc{
	width: 100%;
  height: 16.2vw;
	position: relative;
}
.ecjcbak{
	position: absolute;
	width: 60%;
	top: 1vw;
	left: 20%;
	z-index: 1;
}
.ecqtssjc_con{
	position: absolute;
	width: 7vw;
	height: 7vw;
	top: 2.8vw;
	left: 34%;
	z-index: 2;
	background: url(../../assets/image/eckqzl.png)no-repeat;
	background-size: cover;
}
.ecqtssjc_con_tit{
	font-size: 1vw;
	color: #1ad35f;
	display: block;
	text-align: center;
	margin-top: 2.4vw;
	font-weight: bold;
}
.ecqtssjc_con_sma{
	font-size: 0.8vw;
	color: #bcd3f5;
	display: block;
	text-align: center;
}
.ecqtssjc_lettp{
	position: absolute;
	width: 6vw;
	height: 6vw;
	top: 0.4vw;
	left: 10%;
	z-index: 2;
	background: url(../../assets/image/eckqzltopleft.png)no-repeat;
	background-size: cover;
}
.ecqtssjc_lettp_tit{
	font-size: 1vw;
	color: #ffd4d4;
	display: block;
	text-align: center;
	margin-top: 2.4vw;
	font-weight: bold;
}
.ecqtssjc_lettp_sma{
	font-size: 0.8vw;
	color: #bcd3f5;
	display: block;
	text-align: center;
	margin-top: 1.4vw;
}
.ecqtssjc_lettb{
	position: absolute;
	width: 6vw;
	height: 6vw;
	top: 6.4vw;
	left: 8%;
	z-index: 2;
	background: url(../../assets/image/eckqzltoplefb.png)no-repeat;
	background-size: cover;
}
.ecqtssjc_lettb_tit{
	font-size: 1vw;
	color: #f9ffd0;
	display: block;
	text-align: center;
	margin-top: 2.4vw;
	font-weight: bold;
}
.ecqtssjc_lettb_sma{
	font-size: 0.8vw;
	color: #bcd3f5;
	display: block;
	text-align: center;
	margin-top: 1.4vw;
}
.ecqtssjc_ritp{
	position: absolute;
	width: 6vw;
	height: 6vw;
	top: 0.4vw;
	right: 8%;
	z-index: 2;
	background: url(../../assets/image/eckqzltopritb.png)no-repeat;
	background-size: cover;
}
.ecqtssjc_ritp_tit{
	font-size: 1vw;
	color: #f9ffd0;
	display: block;
	text-align: center;
	margin-top: 2.4vw;
	font-weight: bold;
}
.ecqtssjc_ritp_sma{
	font-size: 0.8vw;
	color: #fff4d1;
	display: block;
	text-align: center;
	margin-top: 1.4vw;
}
.ecqtssjc_ritb{
	position: absolute;
	width: 6vw;
	height: 6vw;
	top: 7.4vw;
	right: 14%;
	z-index: 2;
	background: url(../../assets/image/eckqzltopritp.png)no-repeat;
	background-size: cover;
}
.ecqtssjc_ritb_tit{
	font-size: 1vw;
	color: #ccffe9;
	display: block;
	text-align: center;
	margin-top: 2.4vw;
	font-weight: bold;
}
.ecqtssjc_ritb_sma{
	font-size: 0.8vw;
	color: #bcd3f5;
	display: block;
	text-align: center;
	margin-top: 1.4vw;
}

.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;
}
.qcshuj{
	width: 100%;
	position: absolute;
	top: -2vw;
	left: 0;
	z-index: 1;
}
.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;
}


.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;
}
.tcgldwList{
	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;
}
</style>
