2718 lines
68 KiB
Vue
2718 lines
68 KiB
Vue
<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> {{activity.maintainData1}}</div>-->
|
||
<!-- <div class="maintainLogPerson">维护人：{{activity.maintainPerson}}</div>-->
|
||
<!-- <div class="maintainLogTime"><span class="el-icon-s-custom"></span> {{activity.maintainPerson}} -->
|
||
<!-- <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>
|
||
<span>{{activity.itemName}}</span>
|
||
<span style="color: #f4d877;font-size: 20px;"> {{activity.survValue}}</span>
|
||
<span style="color: #f4d877;font-size: 12px;">{{activity.survUnit}} </span>
|
||
<!-- <span>标准值 {{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> {{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>
|
||
|