Administrator
/
FenXiNspBigScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化界面

This commit is contained in:
wgx 2026-07-30 19:21:47 +08:00
parent 266c5c5eac
commit 3ac1c6f49f
7 changed files with 13101 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,6 +2,7 @@
node_modules node_modules
/dist /dist
/unpackage
# local env files # local env files
.env.local .env.local

12974
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
src/api/request.js
View File

@ -1,7 +1,7 @@
import axios from "axios"; import axios from "axios";
const requests = axios.create({ const requests = axios.create({
baseURL:"/lh-api", baseURL: "/lh-api",
timeout:20000, timeout: 40000,
}); });

6
src/assets/css/index.css
View File

@ -571,7 +571,7 @@
padding: 0px; padding: 0px;
text-align: center; text-align: center;
z-index: 500; z-index: 500;
position: absolute; /*position: absolute;*/
} }
.dataTypeEchart2{ .dataTypeEchart2{
width: 90px; width: 90px;
@ -589,8 +589,8 @@
text-align: center; text-align: center;
z-index: 500; z-index: 500;
position: absolute; position: absolute;
left: 13px; left: 185px !important;
top: 30px; /*top: 30px;*/
.el-input__inner{ .el-input__inner{
height: 34px; height: 34px;
background: #0e2e4f; background: #0e2e4f;

162
src/pages/Home/index.vue
View File

@ -92,29 +92,29 @@
<span class="in1con_lf_imglf_tit">畜禽污染监测站</span> <span class="in1con_lf_imglf_tit">畜禽污染监测站</span>
<span class="in1con_lf_imglf_num"> <span class="in1con_lf_imglf_num">
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
:to="1" :key="stationCount0" duration="3000"></animate-number>个 :to="2" :key="stationCount0" duration="3000"></animate-number>个
</span>
</div>
<div
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<img src="@/assets/image/xmgk04.png" class="in1con_lf_imgone" alt="">
<span class="in1con_lf_imglf_tit">小流域污染监测站</span>
<span class="in1con_lf_imglf_num">
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
:to="1" :key="stationCount0" duration="3000"></animate-number>个
</span>
</div>
<div
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<img src="@/assets/image/xmgk03.png" class="in1con_lf_imgone" alt="">
<span class="in1con_lf_imglf_tit">长期定位监测点位</span>
<span class="in1con_lf_imglf_num">
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"
:to="7" :key="stationCount0" duration="3000"></animate-number>个
</span> </span>
</div> </div>
<!-- <div--> <!-- <div-->
<!-- class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">--> <!-- class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">-->
<!-- <img src="@/assets/image/xmgk04.png" class="in1con_lf_imgone" alt="">-->
<!-- <span class="in1con_lf_imglf_tit">小流域污染监测站</span>-->
<!-- <span class="in1con_lf_imglf_num">-->
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"-->
<!-- :to="1" :key="stationCount0" duration="3000"></animate-number>个-->
<!-- </span>-->
<!-- </div>-->
<!-- <div-->
<!-- class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">-->
<!-- <img src="@/assets/image/xmgk03.png" class="in1con_lf_imgone" alt="">-->
<!-- <span class="in1con_lf_imglf_tit">长期定位监测点位</span>-->
<!-- <span class="in1con_lf_imglf_num">-->
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"-->
<!-- :to="7" :key="stationCount0" duration="3000"></animate-number>个-->
<!-- </span>-->
<!-- </div>-->
<!-- <div-->
<!-- class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">-->
<!-- <img src="@/assets/image/xmgk05.png" class="in1con_lf_imgone" alt="">--> <!-- <img src="@/assets/image/xmgk05.png" class="in1con_lf_imgone" alt="">-->
<!-- <span class="in1con_lf_imglf_tit">太阳能诱虫灯数量</span>--> <!-- <span class="in1con_lf_imglf_tit">太阳能诱虫灯数量</span>-->
<!-- <span class="in1con_lf_imglf_num">--> <!-- <span class="in1con_lf_imglf_num">-->
@ -195,14 +195,14 @@
<img src="@/assets/image/icon-yellow.png" class="xcdimg" alt=""> <img src="@/assets/image/icon-yellow.png" class="xcdimg" alt="">
<span class="scdlist_tit">农田污染监测站</span> <span class="scdlist_tit">农田污染监测站</span>
</div> </div>
<div class="scdlist" @click="switchIcon('watershed')"> <!-- <div class="scdlist" @click="switchIcon('watershed')">-->
<img src="@/assets/image/waterlive.png" class="xcdimg" alt=""> <!-- <img src="@/assets/image/waterlive.png" class="xcdimg" alt="">-->
<span class="scdlist_tit">小流域监测站</span> <!-- <span class="scdlist_tit">小流域监测站</span>-->
</div> <!-- </div>-->
<div class="scdlist" @click="switchIcon('soil')"> <!-- <div class="scdlist" @click="switchIcon('soil')">-->
<img src="@/assets/image/soil.png" class="xcdimg" alt=""> <!-- <img src="@/assets/image/soil.png" class="xcdimg" alt="">-->
<span class="scdlist_tit">长期定位监测站</span> <!-- <span class="scdlist_tit">长期定位监测站</span>-->
</div> <!-- </div>-->
</div> </div>
<transition enter-active-class="animate__animated animate__backInUp" <transition enter-active-class="animate__animated animate__backInUp"
leave-active-class="animate__animated animate__backOutDown"> leave-active-class="animate__animated animate__backOutDown">
@ -217,23 +217,23 @@
<div v-loading="tabsLoading" element-loading-text=" " <div v-loading="tabsLoading" element-loading-text=" "
element-loading-background="rgba(0, 0, 0, 0.8)"> element-loading-background="rgba(0, 0, 0, 0.8)">
<span class="zywr_titshow">治理效果分析</span> <span class="zywr_titshow">治理效果分析</span>
<el-tooltip class="item" effect="dark" <el-select class="dataTypeEchart2" style="width:90px;" v-model="dateType" placeholder="请选择" @change="changeDateType">
:content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'" <el-option
placement="top-start"> v-for="item in dateTypeOptions"
<!-- <span class="dataTypeEchart" @click="switchEchartType">--> :key="item.value"
<!-- {{ dataTypeEchart ? '监测值' : '对比值' }}--> :label="item.label"
<!-- </span>--> :value="item.value">
</el-tooltip> </el-option>
<el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType"> </el-select>
<el-option <el-tooltip class=" " effect="dark" style="position: absolute;left: 300px;"
v-for="item in dateTypeOptions" :content="dataTypeEchart?'当前：监测值为正常历史监测数据。':'当前：对比值为1#监测站数据减去2#监测站数据。'"
:key="item.value" placement="top-start">
:label="item.label" <span class="dataTypeEchart" @click="switchEchartType">
:value="item.value"> {{ dataTypeEchart ? '监测值' : '对比值' }}
</el-option> </span>
</el-select> </el-tooltip>
<el-tabs type="card" @tab-click="doGetIndexSummry" v-show="dataTypeEchart"> <el-tabs type="card" @tab-click="doGetIndexSummry" v-show="dataTypeEchart">
<el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationShortName?item.stationShortName:item.stationName" lazy> <el-tab-pane v-for="(item,index) in stationInfoList" :label="item.stationShortName||item.stationName" lazy>
<template> <template>
<div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div> <div :id="`myChartDiv${index}`" style="height:12vw;width:100%;"></div>
</template> </template>
@ -280,7 +280,7 @@
</viewer> </viewer>
</div> </div>
<div class="jczbtm" @click="showEchartDialog($event, 1)" > <div class="jczbtm" @click="showEchartDialog($event, 1)" >
<vue-seamless-scroll :data="item.wrwcode" class="wp-1 hp-1" :class-option="classWrwcod"> <vue-seamless-scroll :data="[...item.wrwcode,...item.wrwcode]" class="wp-1 hp-1" :class-option="classWrwcod">
<div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index" <div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index"
:data-item="JSON.stringify(item)" :data-survItem="valist.tylename" > :data-item="JSON.stringify(item)" :data-survItem="valist.tylename" >
<img :src="urlimg + valist.icon" class="tpimg" alt=""> <img :src="urlimg + valist.icon" class="tpimg" alt="">
@ -293,6 +293,18 @@
{{ valist.unit }}</span> {{ valist.unit }}</span>
</div> </div>
</div> </div>
<div class="jczbtm_lf" v-for="(valist,index) in item.wrwcode" :key="valist.index"
:data-item="JSON.stringify(item)" :data-survItem="valist.tylename" >
<img :src="urlimg + valist.icon" class="tpimg" alt="">
<div class="jczbtm_lf_rt">
<span class="jczbtm_lf_rttit">{{ valist.name }}</span>
<span class="jczbtm_lf_rtnum">
<!-- <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="valist.code"-->
<!-- :key="valist.tylename+'_key'" duration="3000"></animate-number>-->
<span class="in1con_lf_imglf_num_jix">{{valist.code?parseFloat((valist.code-0).toFixed(2)):'--'}}</span>
{{ valist.unit }}</span>
</div>
</div>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
@ -302,13 +314,13 @@
</div> </div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div> <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<div> <div>
<div class="in1con_lf_tit " style="cursor: pointer;" @click="taizhangDialogShowFlag=true"> <div class="in1con_lf_tit " style="cursor: pointer;" @click1="taizhangDialogShowFlag=true">
<span class="in1con_lf_titshow1">核算与评估</span> <span class="in1con_lf_titshow1">核算与评估</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt=""> <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
<!-- <span class="in1con_lf_titshow2 " style="">台账>></span>--> <!-- <span class="in1con_lf_titshow2 " style="">台账>></span>-->
</div> </div>
<div class="mywrcov"> <div class="mywrcov">
<div class="mywrcov_one mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTp')"> <div class="mywrcov_one mywrcov_onehover" @click1="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTp')">
<span class="mywrcov_onetit">{{ effect_assess0.detailCode }}</span> <span class="mywrcov_onetit">{{ effect_assess0.detailCode }}</span>
<span class="mywrcov_onenum"> <span class="mywrcov_onenum">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span> <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess0.detailValue }}</span>
@ -316,7 +328,7 @@
<!-- :to="effect_assess0.detailValue" />--> <!-- :to="effect_assess0.detailValue" />-->
</span> </span>
</div> </div>
<div class="mywrcov_two mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTn')"> <div class="mywrcov_two mywrcov_onehover" @click1="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTn')">
<span class="mywrcov_onetit">{{ effect_assess1.detailCode }}</span> <span class="mywrcov_onetit">{{ effect_assess1.detailCode }}</span>
<span class="mywrcov_onenum"> <span class="mywrcov_onenum">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span> <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span>
@ -324,7 +336,7 @@
<!-- :to="effect_assess0.detailValue" />--> <!-- :to="effect_assess0.detailValue" />-->
</span> </span>
</div> </div>
<div class="mywrcov_three mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterCod')"> <div class="mywrcov_three mywrcov_onehover" @click1="showEchartDialog({stationCode: 'S_1'}, 'dataWaterCod')">
<span class="mywrcov_onenum" style="margin-top: 1vw;"> <span class="mywrcov_onenum" style="margin-top: 1vw;">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span> <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span>
<!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"--> <!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"-->
@ -332,7 +344,7 @@
</span> </span>
<span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span> <span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
</div> </div>
<div class="mywrcov_four mywrcov_onehover" @click="taizhangDialogShowFlag=true"> <div class="mywrcov_four mywrcov_onehover" @click1="taizhangDialogShowFlag=true">
<span class="mywrcov_onenum" style="margin-top: 1vw; cursor: pointer"> <span class="mywrcov_onenum" style="margin-top: 1vw; cursor: pointer">
<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span> <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span>
<!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"--> <!-- <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000" from="0"-->
@ -768,7 +780,7 @@ export default {
viewMode: '3D', viewMode: '3D',
resizeEnable: true, resizeEnable: true,
zoom: zoomnum, zoom: zoomnum,
center: [112.83100231396601, 36.872032399813556],//默认的地图中心经纬度 center: [110.719361, 36.068184],//默认的地图中心经纬度
mapStyle: 'amap://styles/blue', mapStyle: 'amap://styles/blue',
dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制 dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制
jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制 jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制
@ -780,7 +792,7 @@ export default {
showIndoorMap: false, // 隐藏地图自带的室内地图图层 showIndoorMap: false, // 隐藏地图自带的室内地图图层
expandZoomRange: true,//是否支持可以扩展最大缩放级别,和zooms属性配合使用设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20 expandZoomRange: true,//是否支持可以扩展最大缩放级别,和zooms属性配合使用设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
forceVector: true, forceVector: true,
scale: (2 , 2.5) scale: (2, 2.5)
}); });
that.aMap.on('complete', (e) => { that.aMap.on('complete', (e) => {
var markerData = res.result; var markerData = res.result;
@ -887,29 +899,29 @@ export default {
let len = this.summryAllData.length; let len = this.summryAllData.length;
this.riverList = []; this.riverList = [];
//计算对比值，2号站数据减1号站 //计算对比值，2号站数据减1号站
// this.summryAllData.map((item1, index) => { this.summryAllData.map((item1, index) => {
// if (index % 2 === 0 && item1['datas'] && (index + 1) < len) { if (index % 2 === 0 && item1['datas'] && (index + 1) < len) {
// let data1 = item1['datas']; let data1 = item1['datas'];
// let keys = Object.keys(data1); let keys = Object.keys(data1);
// let data2 = this.summryAllData[index + 1]['datas']; let data2 = this.summryAllData[index + 1]['datas'];
// let data3 = {} let data3 = {}
// let item3 = JSON.parse(JSON.stringify(item1)); let item3 = JSON.parse(JSON.stringify(item1));
// if (data2) { if (data2) {
// keys.map(key => { keys.map(key => {
// if (data1[key] instanceof Array) { if (data1[key] instanceof Array) {
// data3[key] = [] data3[key] = []
// data1[key].map((itemSub, index) => { data1[key].map((itemSub, index) => {
// if (data2[key] && data2[key][index] && data1[key][index]){ if (data2[key] && data2[key][index] && data1[key][index]){
// data3[key].push((data2[key][index] - data1[key][index]).toFixed(2)) data3[key].push((data2[key][index] - data1[key][index]).toFixed(2))
// } }
// }) })
// } }
// }) })
// item3['datas'] = data3; item3['datas'] = data3;
// this.riverList.push(item3); this.riverList.push(item3);
// } }
// } }
// }); });
setTimeout(() => { setTimeout(() => {
this.$nextTick(() => { // 加载echarts图 this.$nextTick(() => { // 加载echarts图
this.initEchartData(this.echartIndex) this.initEchartData(this.echartIndex)
@ -1130,7 +1142,7 @@ export default {
arr.map(item => { arr.map(item => {
item.setzIndex((that.lastZIndex+=2)); item.setzIndex((that.lastZIndex+=2));
}); });
that.aMap.setFitView(arr, false, [200, 500, 360, 360], 16); that.aMap.setFitView(arr, false, [300, 500, 360, 360], 16);
// setTimeout(() => { // setTimeout(() => {
// let temp = that.aMap.getCenter();//矫正显示标点位置在正中心 // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]); // that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);

89
src/pages/MywrList/index.vue
View File

@ -58,13 +58,13 @@
<span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span> <span class="in1con_lf_moreimg" @click="zdinfor">介绍>></span>
</div> </div>
<div class="jczcov"> <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 width="100%" arrow="always" :interval="5000">
<el-carousel-item class="jczcov_lf" v-for="value in stationDetail.deviceList" :key="value.id"> <el-carousel-item class="jczcov_lf" v-for="value in stationDetail.deviceList" :key="value.id">
<div class="jczimg" :id="value.deployCode"></div> <div class="switchLive">
<span v-show="!currentPlayerLive[value.deployCode]" @click="switchLive(true, value.deployCode)">录播</span>
<span v-show="currentPlayerLive[value.deployCode]" @click="switchLive(false, value.deployCode)">直播</span>
</div>
<div class="jczimg" :id="'ezplayer' + value.deployCode"></div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
@ -159,7 +159,7 @@
<img src="@/assets/image/sanguang.png" class="sanguang2" alt=""> <img src="@/assets/image/sanguang.png" class="sanguang2" alt="">
<img src="@/assets/image/sanguang.png" class="sanguangbt2" alt=""> <img src="@/assets/image/sanguang.png" class="sanguangbt2" alt="">
<div class="zywr_lf_tit"> <div class="zywr_lf_tit">
<span class="zywr_titshow">重点污染指标趋势</span> <span class="zywr_titshow">重要污染指标</span>
<el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType"> <el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
<el-option <el-option
v-for="item in dateTypeOptions" v-for="item in dateTypeOptions"
@ -175,7 +175,7 @@
</div> </div>
<div class="switchStation"> <div class="switchStation">
<el-select v-model="stationCode" placeholder="切换站点" @change="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-option v-for="item in stationList" :key="item.stationCode" :label="item.stationShortName||item.stationName" :value="item.stationCode"></el-option>
</el-select> </el-select>
</div> </div>
<div class="leftBox right baseBoxHjleft" style="width:22.5%"> <div class="leftBox right baseBoxHjleft" style="width:22.5%">
@ -466,7 +466,7 @@ export default {
return { return {
loading: true, loading: true,
stationList:[], stationList:[],
currentPlayerLive: true, currentPlayerLive: {},
singleEchartDialogShowFlag: false, singleEchartDialogShowFlag: false,
singleEchartData: null, singleEchartData: null,
stationCode: '', stationCode: '',
@ -490,8 +490,7 @@ export default {
fullscreen: false, //全屏 fullscreen: false, //全屏
qczddialogTableVisible: false, qczddialogTableVisible: false,
waterData: {}, waterData: {},
summryAllData: null, summryAllDataJson: null,
echartIndex: 0,
maintainLogList: [], maintainLogList: [],
dateType: 'monthDays', dateType: 'monthDays',
dateTypeOptions: [ { dateTypeOptions: [ {
@ -614,50 +613,29 @@ export default {
}) })
}, },
changeDateType() { changeDateType() {
// this.summryAllData = null;
this.initChartData(); this.initChartData();
}, },
initChartData() { initChartData() {
this.riverList = []; let that = this;
this.summryAllData = []; this.summryAllDataJson = {};
getIndexSummry({summrayMode: this.dateType, statsionCode: this.stationCode}).then(res => { getIndexSummry({summrayMode: this.dateType, stationCode: this.stationCode}).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.summryAllData = res.result; res.result.map(item => {
let len = this.summryAllData.length; that.summryAllDataJson[item.stationCode] = item;
// this.summryAllData.map((item1, index) => { });
// if (index % 2 === 0 && item1['datas'] && (index + 1) < len) { this.initEchartDom()
// 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) { initEchartDom(times) {
this.$nextTick(() => { this.$nextTick(() => {
let domKey = `myChartDiv0`; let domKey = `myChartDiv0`;
let divDom = document.getElementById(domKey); let divDom = document.getElementById(domKey);
if (!divDom) { if (!divDom) {
console.warn('没找到dom,两秒后重试：', domKey, divDom) console.warn('没找到dom,两秒后重试：', domKey, divDom)
if(times!==2){ if(times!==2){
setTimeout(()=>{this.initEchartDom(index,2)}, 1500); setTimeout(()=>{this.initEchartDom(2)}, 1500);
} }
return; return;
} }
@ -665,7 +643,7 @@ export default {
this.echartObj.dispose(); this.echartObj.dispose();
} }
this.echartObj = this.$echarts.init(divDom); this.echartObj = this.$echarts.init(divDom);
let data = this.summryAllData[index]; let data = this.summryAllDataJson[this.stationCode];
let dataObj = []; let dataObj = [];
let i = 0; let i = 0;
let colors = [ let colors = [
@ -853,33 +831,38 @@ export default {
} }
// 土壤数据 // 土壤数据
// this.DetailListSoilData = res.result.latestSoilData[0] // this.DetailListSoilData = res.result.latestSoilData[0]
that.currentPlayerLive = false; that.currentPlayerLive = {};
// 监控画面 // 监控画面
setTimeout(() => { setTimeout(() => {
this.switchLive(true); this.switchLive(true);
}, 2000) }, 2000)
}) })
}, },
switchLive(live){ switchLive(live, deployCode){
let that = this; let that = this;
this.stationDetail.deviceList.forEach((item) => { this.stationDetail.deviceList.forEach((item) => {
that.initPlayer(item, live); if(!deployCode){
that.initPlayer(item, live);
} else if(deployCode == item.deployCode){
that.initPlayer(item, live);
}
}) })
}, },
initPlayer(itm, live){ initPlayer(itm, live){
let that = this; let that = this;
if(this.currentPlayerLive === live){ if(this.currentPlayerLive[itm.deployCode] === live){
return; return;
} }
that.currentPlayerLive = live; that.currentPlayerLive[itm.deployCode] = live;
if(that.player[itm.deployCode]){ if(that.player[itm.deployCode]){
that.player[itm.deployCode].stop(); that.player[itm.deployCode].stop();
that.player[itm.deployCode].destroy(); that.player[itm.deployCode].destroy();
} }
that.player[itm.deployCode] = new EZUIKit.EZUIKitPlayer({ that.player[itm.deployCode] = new EZUIKit.EZUIKitPlayer({
id: itm.deployCode, id: 'ezplayer' + itm.deployCode,
accessToken: itm.ysToken, accessToken: itm.ysToken,
url: itm.deviceUrl, url: itm.deviceUrl || itm.deviceIotUrl,
template: live?"pcLive":"pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版； template: live?"pcLive":"pcRec", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
audio: false, // 是否默认开启声音 0 - 关闭 1 - 开启 audio: false, // 是否默认开启声音 0 - 关闭 1 - 开启
sound: 0, sound: 0,
@ -909,13 +892,7 @@ export default {
stationInfo().then(res => { stationInfo().then(res => {
this.stationInfoList = res.result this.stationInfoList = res.result
if (this.stationInfoList) { if (this.stationInfoList) {
this.stationList = []; this.stationList = res.result;
res.result.map(item => {
this.stationList.push({
stationCode: item.stationCode,
stationName: item.stationName,
})
})
} }
}) })
}, },
@ -2611,7 +2588,7 @@ a:hover {
top: 0px; top: 0px;
} }
.switchLive { .switchLive {
position: absolute; cursor:pointer; top: 68px;right: 16px;color: rgb(255, 255, 255);z-index: 500; position: absolute; cursor:pointer; top: 2px;right: 16px;color: rgb(255, 255, 255);z-index: 500;
} }
.switchLive:hover { .switchLive:hover {
color: rgb(236, 196, 23); color: rgb(236, 196, 23);

2
src/pages/weather/weather.vue
View File

@ -6,7 +6,7 @@
<!-- src="https://i.tianqi.com?c=code&amp;id=10&amp;color=%23FFFFFF&amp;icon=1&amp;py=fenxi&amp;site=12"--> <!-- src="https://i.tianqi.com?c=code&amp;id=10&amp;color=%23FFFFFF&amp;icon=1&amp;py=fenxi&amp;site=12"-->
<!-- style="pointer-events: none;"></iframe>--> <!-- style="pointer-events: none;"></iframe>-->
<!-- <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=11&icon=1&color=%23FFFFFF" frameborder="0"></iframe>--> <!-- <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=11&icon=1&color=%23FFFFFF" frameborder="0"></iframe>-->
<iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=wuxiang" frameborder="0"></iframe> <iframe width="300" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=34&icon=1&color=%23FFFFFF&py=jixian" frameborder="0"></iframe>
</div> </div>
</template> </template>