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

农田和畜禽监测站完成；首页需加个杀虫灯开关

This commit is contained in:
wgx 2026-08-18 19:43:48 +08:00
parent 005c3947ff
commit 3376e0fb53
4 changed files with 553 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -757,11 +757,11 @@
.jctctiao{
float: right;
}
.jctc_add{
height: 1vw;
padding-left: 5%;
margin-top: 0.6vw;
}
/*.jctc_add{*/
/* min-height: 1vw;*/
/* padding-left: 5%;*/
/* margin-top: 0.6vw;*/
/*}*/
.jctcicon1{
width: 0.7vw;
margin-top: 0.1vw;

4
src/main.js
View File

@ -31,7 +31,9 @@ VueAMap.initAMapApiLoader({
"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor", //编辑 折线多，边形
"AMap.CircleEditor", //圆形编辑器插件
"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
"AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置
"AMap.MarkerCluster", //聚合Marker
"AMap.MassMarks",
],
v: '2.0'
});

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

@ -526,6 +526,7 @@ export default {
markersOrient: [],
markersSoil: [],
markersOther: [],
markersLight: [],
lastClickIcon: '',
urlimg: 'https://fxnsp.sxcooh.com/lh-api/sys/common/static/',
mapTypeFlag: true,
@ -834,13 +835,14 @@ export default {
});
that.aMap.on('complete', (e) => {
let Marker = res.result.filter(ele => {
return ele.type != 'light' && ele.type != 'air' && ele.type != 'soil'
return ele.type != 'air' && ele.type != 'soil' && ele.type != 'light'
}
).sort((a,b) => {
if (b.type=='soil') return 1;
if (b.type!='soil') return -1;
return 0;
});//其他类型
let MarkerLight = res.result.filter(ele => ele.type == 'light' );
// console.log(Marker,'Marker')
// Marker.push(...this.entList);//加入企业点位数组
// console.log("初始化地图。2", Marker)
@ -849,7 +851,8 @@ export default {
console.log("item = ", item)
return;
}
let marker = new AMap.Marker({
let marker = null;
marker = new AMap.Marker({
zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1),
icon: this.urlimg + item.picUrl,
position: [item.longitude, item.latitude],
@ -898,6 +901,28 @@ export default {
}
marker.setMap(that.aMap);
})
if(MarkerLight.length > 0){
var points = [];
MarkerLight.map(item => {
points.push({lnglat: [item.longitude, item.latitude],"name":"杀虫灯","style":2});
});
let clusterMarker = new AMap.MassMarks(
points,{
opacity: 0.8,
zIndex: 111,
cursor: 'pointer',
style: [{
url: this.urlimg + MarkerLight[0].picUrl,
anchor: new AMap.Pixel(6, 6),
size: new AMap.Size(18, 18),
zIndex: 3,
}
]
}
);
that.markersLight.push(clusterMarker);
clusterMarker.setMap(that.aMap);
}
this.$forceUpdate();
// that.aMap.setFitView(null, false, [100,400,200,200], 16);
// that.aMap.setFitView();
@ -1194,17 +1219,6 @@ export default {
} else {
arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf(flag) != -1);
}
// if (flag == 'livestock') {
// arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("livestock") != -1);
// } else if (flag == 'orient') {
// arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("orient") != -1);
// } else if (flag == 'watershed') {
// arr = this.markersOrient.filter(item => item.getExtData().stationType.indexOf("watershed") != -1);
// } else if (flag == 'soil') {
// arr = this.markersSoil;
// } else if (flag == 'ent') {
// arr = this.markersSoil;
// }
}
if (arr && arr.length > 0) {
arr.map(item => {
@ -1216,7 +1230,7 @@ export default {
// that.aMap.setZoomAndCenter(that.aMap.getZoom()-2, [temp.lng, temp.lat - 0.15]);
// },2000)
} else {
that.aMap.setFitView(null, false, [100, 400, 360, 360], that.normalZoomData);
that.aMap.setFitView(that.markersOrient, false, [100, 400, 360, 360], that.normalZoomData);
}
}
},

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

@ -88,7 +88,7 @@
<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;">
<div class="jctc_add" style="min-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"
@ -98,8 +98,8 @@
<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 style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 1px;"></div>
<div style="margin: 5px 0">
<div class="in1con_lf_img">
<div
class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
@ -124,13 +124,13 @@
</div>
</div>
</div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
<div>
<div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.6px;"></div>
<div style="">
<div class="in1con_lf_tit ">
<span class="in1con_lf_titshow">重点指标实时数据</span>
<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)" >
<ul class="liMarqueeUp" style="height:300px;overflow: hidden; margin-bottom: 10px; padding-bottom: 10px" @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" >
@ -159,15 +159,15 @@
<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>
<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>
@ -199,7 +199,7 @@
<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>
<span class="in1con_lf_titshow">畜禽粪污处理</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<div class="qxfwzcl">
@ -220,6 +220,49 @@
<span class="qxfwzcl_rit_num in1con_lf_imglf_num_jix">{{DisplayListdetailList3?.detailValue}} <span style="font-size: 0.7vw;">{{DisplayListdetailList3?.detailValue2}}</span> </span>
</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 class="ecqtssjc" >
<img src="@/assets/image/ecjcbak.png" class="ecjcbak" alt="">
<div class="ecqtssjc_con animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<span class="ecqtssjc_con_tit">{{DisplayListstinkList4.detailValue}}</span>
<span class="ecqtssjc_con_sma">空气质量</span>
</div>
<div class="ecqtssjc_lettp animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<button type="button" @click="startAnimate()" style="display:none;"> </button>
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-else>
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum1" from="0" :to="latestStinkData['dataOu'].value" :key="'dataOu'" duration="3000" :formatter="formatter"></animate-number>
</span>
<span class="ecqtssjc_lettp_sma">臭气浓度</span>
</div>
<div class="ecqtssjc_lettb animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
<span class="ecqtssjc_lettb_tit in1con_lf_imglf_num_jix" v-else>
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum2" from="0" :to="latestStinkData['dataNh3'].value" :key="'dataNh3'" duration="3000" :formatter="formatter"></animate-number>
</span>
<span class="ecqtssjc_lettb_sma"> 氨气</span>
</div>
<div class="ecqtssjc_ritp animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
<span class="ecqtssjc_ritp_tit in1con_lf_imglf_num_jix" v-else>
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum3" from="0" :to="latestStinkData['dataH2s'].value" :key="'dataH2s'" duration="3000" :formatter="formatter"></animate-number>
</span>
<span class="ecqtssjc_ritp_sma">硫化氢 </span>
</div>
<div class="ecqtssjc_ritb animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">
<span class="ecqtssjc_lettp_tit in1con_lf_imglf_num_jix" v-if="latestStinkData==''||latestStinkData==undefined||latestStinkData==null">0</span>
<span class="ecqtssjc_ritb_tit in1con_lf_imglf_num_jix" v-else>
<animate-number class="in1con_lf_imglf_num_jix" ref="myNum4" from="0" :to="latestStinkData['dataTvoc'].value" :key="'dataTvoc'" duration="3000" :formatter="formatter"></animate-number>
</span>
<span class="ecqtssjc_ritb_sma">总挥发性有机物</span>
</div>
</div>
</div>
</div>
<div v-if="stationType==='watershed'">
<div class="in1con_lf_tit ">
@ -280,69 +323,254 @@
</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="in1con_lf_tit ">
<span class="in1con_lf_titshow">土壤数据实时监测</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<div class="mywrcov">
<div class="mywrcov_lf">
<div class="mywrcov_lfposi">
<span class="mywrcov_lf_num">0CM</span>
<span class="mywrcov_lf_hen"></span>
<img src="@/assets/image/jcxianimg2.png" class="jcxianimg2" alt="">
<img src="@/assets/image/jiaintou2.png" class="jiaintou2" alt="">
</div>
<div class="mywrcov_lfposi">
<span class="mywrcov_lf_num">20CM</span>
<span class="mywrcov_lf_hen"></span>
<img src="@/assets/image/jcxianimg2.png" class="jcxianimg2" alt="">
<img src="@/assets/image/jiaintou2.png" class="jiaintou2" alt="">
</div>
<div class="mywrcov_lfposi">
<span class="mywrcov_lf_num">40CM</span>
<span class="mywrcov_lf_hen"></span>
<img src="@/assets/image/jcxianimg2.png" class="jcxianimg2" alt="">
<img src="@/assets/image/jiaintou2.png" class="jiaintou2" alt="">
</div>
<div class="mywrcov_lfposi">
<span class="mywrcov_lf_num">60CM</span>
<span class="mywrcov_lf_hen"></span>
<img src="@/assets/image/jcxianimg2.png" class="jcxianimg2" alt="">
<img src="@/assets/image/jiaintou2.png" class="jiaintou2" alt="">
</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 class="mywrcov_rt">
<div class="mywrcov_rt_con1">
<span class="mywrcov_rt_con_tit">土壤温度(℃)</span>
</div>
<div class="mywrcov_rt_con1">
<span class="mywrcov_rt_con_tit">土壤湿度(%ch)</span>
</div>
<div class="mywrcov_rt_con1">
<span class="mywrcov_rt_con_tit">土壤盐分(us/cm)</span>
</div>
<div class="mywrcov_rt_con shouxing" @click="tczxtc('dataSoilTemp')">
<!-- <span class="mywrcov_rt_con_num in1con_lf_imglf_num_jix">{{DetailListSoilData.dataSoilTemp}}</span> -->
<animate-number class="mywrcov_rt_con_num in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListSoilData['dataSoilTemp']?.value" :key="'dataSoilTemp'" duration="3000" v-if="true"></animate-number>
<img src="@/assets/image/sjjcimg2.png" class="sjjcimg2" alt="">
</div>
<div class="mywrcov_rt_con shouxing" @click="tczxtc('dataSoilWet')">
<!-- <span class="mywrcov_rt_con_num in1con_lf_imglf_num_jix">{{DetailListSoilData.dataSoilWet}}</span> -->
<animate-number class="mywrcov_rt_con_num in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListSoilData['dataSoilWet']?.value" :key="'DetailSoilWet'" duration="3000" v-if="true"></animate-number>
<img src="@/assets/image/sjjcimg2.png" class="sjjcimg2" alt="">
</div>
<div class="mywrcov_rt_con shouxing" @click="tczxtc('dataSoilDdl')">
<!-- <span class="mywrcov_rt_con_num in1con_lf_imglf_num_jix">{{DetailListSoilData.dataSoilDdl}}</span> -->
<animate-number class="mywrcov_rt_con_num in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListSoilData['dataSoilDdl']?.value" :key="'DetailSoilDdl'" duration="3000" v-if="true"></animate-number>
<img src="@/assets/image/sjjcimg2.png" class="sjjcimg2" alt="">
</div>
<div class="mywrcov_rt_con shouxing" @click="tczxtc('dataSoilTemp2')">
<!-- <span class="mywrcov_rt_con_num in1con_lf_imglf_num_jix">{{DetailListSoilData.dataSoilTemp2}}</span> -->
<animate-number class="mywrcov_rt_con_num in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListSoilData['dataSoilTemp2']?.value " :key="'DetailSoilTemp2'" duration="3000" v-if="true"></animate-number>
<img src="@/assets/image/sjjcimg2.png" class="sjjcimg2" alt="">
</div>
<div class="mywrcov_rt_con shouxing" @click="tczxtc('dataSoilWet2')">
<!-- <span class="mywrcov_rt_con_num in1con_lf_imglf_num_jix">{{DetailListSoilData.dataSoilWet2}}</span> -->
<animate-number class="mywrcov_rt_con_num in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListSoilData['dataSoilWet2']?.value " :key="'DetailSoilWet2'" duration="3000" v-if="true"></animate-number>
<img src="@/assets/image/sjjcimg2.png" class="sjjcimg2" alt="">
</div>
<div class="mywrcov_rt_con shouxing" @click="tczxtc('dataSoilDdl2')">
<!-- <span class="mywrcov_rt_con_num in1con_lf_imglf_num_jix">{{DetailListSoilData.dataSoilDdl2}}</span> -->
<animate-number class="mywrcov_rt_con_num in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListSoilData['dataSoilDdl2']?.value " :key="'DetailSoilDdl2'" duration="3000" v-if="true"></animate-number>
<img src="@/assets/image/sjjcimg2.png" class="sjjcimg2" alt="">
</div>
<div class="mywrcov_rt_con shouxing" @click="tczxtc('dataSoilTemp3')">
<!-- <span class="mywrcov_rt_con_num in1con_lf_imglf_num_jix">{{DetailListSoilData.dataSoilTemp3}}</span> -->
<animate-number class="mywrcov_rt_con_num in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListSoilData['dataSoilTemp3']?.value " :key="'DetailSoilTemp3'" duration="3000" v-if="true"></animate-number>
<img src="@/assets/image/sjjcimg2.png" class="sjjcimg2" alt="">
</div>
<div class="mywrcov_rt_con shouxing" @click="tczxtc('dataSoilWet3')">
<!-- <span class="mywrcov_rt_con_num in1con_lf_imglf_num_jix">{{DetailListSoilData.dataSoilWet3}}</span> -->
<animate-number class="mywrcov_rt_con_num in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListSoilData['dataSoilWet3']?.value " :key="'DetailSoilWet3'" duration="3000" v-if="true"></animate-number>
<img src="@/assets/image/sjjcimg2.png" class="sjjcimg2" alt="">
</div>
<div class="mywrcov_rt_con shouxing" @click="tczxtc('dataSoilDdl3')">
<!-- <span class="mywrcov_rt_con_num in1con_lf_imglf_num_jix">{{DetailListSoilData.dataSoilDdl3}}</span> -->
<animate-number class="mywrcov_rt_con_num in1con_lf_imglf_num_jix" ref="reNum" from="0" :to=" DetailListSoilData['dataSoilDdl3']?.value " :key="'DetailSoilDdl3'" duration="3000" v-if="true"></animate-number>
<img src="@/assets/image/sjjcimg2.png" class="sjjcimg2" alt="">
</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 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 class="qxsjssjc">
<div class="qxsjssjc_left">
<div class="qxsjssjc_left_list shouxing" @click="tczxtc('dataWindDirection')">
<div class="qxsjssjc_left_list_tit">
风向
</div>
<!-- <animate-number class="qxsjssjc_left_list_show" ref="reNum" from="0" :to="AirDataWind" :key="AirDataWind" duration="3000"></animate-number> -->
<span class="qxsjssjc_left_list_show" v-if="348.76 < DetailListAirData['dataWindDirection']?.value || DetailListAirData['dataWindDirection']?.value < 11.25">北风</span>
<span class="qxsjssjc_left_list_show" v-else-if="11.26 < DetailListAirData['dataWindDirection']?.value < 33.75">北东北</span>
<span class="qxsjssjc_left_list_show" v-else-if="33.76 < DetailListAirData['dataWindDirection']?.value < 56.25">东北</span>
<span class="qxsjssjc_left_list_show" v-else-if="56.26 < DetailListAirData['dataWindDirection']?.value < 78.75">东东北</span>
<span class="qxsjssjc_left_list_show" v-else-if="78.76 < DetailListAirData['dataWindDirection']?.value < 101.25">东</span>
<span class="qxsjssjc_left_list_show" v-else-if="101.26 < DetailListAirData['dataWindDirection']?.value < 123.75">东东南</span>
<span class="qxsjssjc_left_list_show" v-else-if="123.76 < DetailListAirData['dataWindDirection']?.value < 146.25">东南</span>
<span class="qxsjssjc_left_list_show" v-else-if="146.26 < DetailListAirData['dataWindDirection']?.value < 168.75">南东南</span>
<span class="qxsjssjc_left_list_show" v-else-if="168.76 < DetailListAirData['dataWindDirection']?.value < 191.25">南</span>
<span class="qxsjssjc_left_list_show" v-else-if="191.26 < DetailListAirData['dataWindDirection']?.value < 213.75">南西南</span>
<span class="qxsjssjc_left_list_show" v-else-if="213.76 < DetailListAirData['dataWindDirection']?.value < 236.25">西南</span>
<span class="qxsjssjc_left_list_show" v-else-if="236.26 < DetailListAirData['dataWindDirection']?.value < 258.75">西西南</span>
<span class="qxsjssjc_left_list_show" v-else-if="258.76 < DetailListAirData['dataWindDirection']?.value < 281.25">西</span>
<span class="qxsjssjc_left_list_show" v-else-if="281.26 < DetailListAirData['dataWindDirection']?.value < 303.75">西西北</span>
<span class="qxsjssjc_left_list_show" v-else-if="303.76 < DetailListAirData['dataWindDirection']?.value < 326.25">西北</span>
<span class="qxsjssjc_left_list_show" v-else-if="337.5 < DetailListAirData['dataWindDirection']?.value < 348.75">北西北</span>
<span class="qxsjssjc_left_list_show" v-else>静风</span>
</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 class="qxsjssjc_left_list shouxing" @click="tczxtc('dataSunFallout')">
<div class="qxsjssjc_left_list_tit">
太阳全辐射
</div>
<span class="qxsjssjc_left_list_show">
<!-- <span class="in1con_lf_imglf_num_jix">{{DetailListAirData.dataSunFallout}}</span> -->
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListAirData['dataSunFallout']?.value" :key="'dataSunFallout'" duration="3000"></animate-number>
w/m²</span>
</div>
<div class="qxsjssjc_left_list shouxing" @click="tczxtc('dataRainFall')" style="margin-top:1.5vw;">
<div class="qxsjssjc_left_list_tit">
降雨量
</div>
<span class="qxsjssjc_left_list_show">
<!-- <span class="in1con_lf_imglf_num_jix">{{DetailListAirData.dataRainFall}}</span> -->
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListAirData['dataRainTotal']?.value" :key="'dataRainTotal'" duration="3000"></animate-number>
mm/hour</span>
</div>
</div>
<div class="qxjcimg2">
<img src="@/assets/image/qxjcimg2top.png" style="width:90%;margin-left:5%;" alt="">
<img src="@/assets/image/qxjcimg2.png" style="width:90%;margin-left:5%;" alt="">
</div>
<div class="qxsjssjc_left">
<div class="qxsjssjc_left_list shouxing" @click="tczxtc('dataWindSpeed')">
<div class="qxsjssjc_left_list_tit">
风速
</div>
<span class="qxsjssjc_left_list_show">
<!-- <span class="in1con_lf_imglf_num_jix">{{DetailListAirData.dataWindSpeed}}</span> -->
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListAirData['dataWindSpeed']?.value" :key="'dataWindSpeed'" duration="3000"></animate-number>
M/s</span>
</div>
<div class="qxsjssjc_left_list shouxing" @click="tczxtc('dataAirTemp')">
<div class="qxsjssjc_left_list_tit">
空气温度
</div>
<span class="qxsjssjc_left_list_show">
<!-- <span class="in1con_lf_imglf_num_jix">{{DetailListAirData.dataAirTemp}}</span> -->
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListAirData['dataAirTemp']?.value" :key="'dataAirTemp'" duration="3000"></animate-number>
℃</span>
</div>
<div class="qxsjssjc_left_list shouxing" @click="tczxtc('dataAirWet')">
<div class="qxsjssjc_left_list_tit">
空气湿度
</div>
<span class="qxsjssjc_left_list_show">
<!-- <span class="in1con_lf_imglf_num_jix">{{DetailListAirData.dataAirWet}}</span> -->
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListAirData['dataAirWet']?.value" :key="'dataAirWet'" duration="3000"></animate-number>
%rh</span>
</div>
<div class="qxsjssjc_left_list shouxing" @click="tczxtc('dataAirPress')">
<div class="qxsjssjc_left_list_tit">
大气压力
</div>
<span class="qxsjssjc_left_list_show">
<!-- <span class="in1con_lf_imglf_num_jix">{{DetailListAirData.dataAirPress}}</span> -->
<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="DetailListAirData['dataAirPress']?.value" :key="'dataAirPress'" duration="3000"></animate-number>
mbar</span>
</div>
<div class="wucanshuNameDiv">{{stationDetail.latestData[4].name}}</div>
</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 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>-->
@ -364,43 +592,43 @@
<!-- </el-timeline>-->
<!-- </div>-->
<!-- </div>-->
<div>
<div class="in1con_lf_tit ">
<span class="in1con_lf_titshow">监测与预警</span>
<img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
</div>
<div style=" margin-top: 26px; margin-bottom: 10px; ">
<el-collapse-transition>
<el-timeline v-if="alertList && alertList.length > 0" style="margin-left: 30px;position: relative;top: -20px; overflow: hidden;height: 252px;">
<el-timeline-item v-for="(activity, index) in alertList" :key="index" :color="`#66a8f1`"
:size="'normal'" :placement="`top`" style="top: 20px;" >
<div class="maintainLog">
<div class="maintainLogContent">
<span class="el-icon-mobile"></span>&nbsp;
<span>{{activity.itemName}}</span>
<span style="color: #f4d877;font-size: 20px;">&nbsp;{{activity.survValue}}</span>
<span style="color: #f4d877;font-size: 12px;">{{activity.survUnit}}&nbsp;</span>
<!-- <span>标准值&nbsp;{{activity.normalValue}}{{activity.survUnit}}</span>-->
<span :style="{color:activity.readStatus=='low'?'#66A8F1FF':activity.readStatus=='high'?'#ff676a':''}">({{activity.readStatus=='low'?'偏低':activity.readStatus=='high'?'偏高':'正常'}})</span>
</div>
<div class="maintainLogPerson"></div>
<div class="maintainLogTime">
<span class="el-icon-time"></span>&nbsp;{{activity.alertTime}}
</div>
</div>
</el-timeline-item>
</el-timeline>
</el-collapse-transition>
<div v-if="alertList && alertList.length <= 0">
<div style="margin:60px auto; width: 100%;font-size: 40px;color: #edd792; text-align: center;">暂无预警数据</div>
</div>
<div v-if="!alertList">
<div style="margin:60px auto; width: 100%;font-size: 30px;color: #edd792; text-align: center;">
<i class="el-icon-loading"></i>
</div>
</div>
</div>
</div>
<!-- <div>-->
<!-- <div class="in1con_lf_tit ">-->
<!-- <span class="in1con_lf_titshow">监测与预警</span>-->
<!-- <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">-->
<!-- </div>-->
<!-- <div style=" margin-top: 26px; margin-bottom: 10px; ">-->
<!-- <el-collapse-transition>-->
<!-- <el-timeline v-if="alertList && alertList.length > 0" style="margin-left: 30px;position: relative;top: -20px; overflow: hidden;height: 252px;">-->
<!-- <el-timeline-item v-for="(activity, index) in alertList" :key="index" :color="`#66a8f1`"-->
<!-- :size="'normal'" :placement="`top`" style="top: 20px;" >-->
<!-- <div class="maintainLog">-->
<!-- <div class="maintainLogContent">-->
<!-- <span class="el-icon-mobile"></span>&nbsp;-->
<!-- <span>{{activity.itemName}}</span>-->
<!-- <span style="color: #f4d877;font-size: 20px;">&nbsp;{{activity.survValue}}</span>-->
<!-- <span style="color: #f4d877;font-size: 12px;">{{activity.survUnit}}&nbsp;</span>-->
<!--&lt;!&ndash; <span>标准值&nbsp;{{activity.normalValue}}{{activity.survUnit}}</span>&ndash;&gt;-->
<!-- <span :style="{color:activity.readStatus=='low'?'#66A8F1FF':activity.readStatus=='high'?'#ff676a':''}">({{activity.readStatus=='low'?'偏低':activity.readStatus=='high'?'偏高':'正常'}})</span>-->
<!-- </div>-->
<!-- <div class="maintainLogPerson"></div>-->
<!-- <div class="maintainLogTime">-->
<!-- <span class="el-icon-time"></span>&nbsp;{{activity.alertTime}}-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-timeline-item>-->
<!-- </el-timeline>-->
<!-- </el-collapse-transition>-->
<!-- <div v-if="alertList && alertList.length <= 0">-->
<!-- <div style="margin:60px auto; width: 100%;font-size: 40px;color: #edd792; text-align: center;">暂无预警数据</div>-->
<!-- </div>-->
<!-- <div v-if="!alertList">-->
<!-- <div style="margin:60px auto; width: 100%;font-size: 30px;color: #edd792; text-align: center;">-->
<!-- <i class="el-icon-loading"></i>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
@ -478,13 +706,19 @@ export default {
play: false, //默认停止播放
nowTime: '',
stationDetail: null,
DetailListAirData: '',
// DetailListSoilData: '',
DetailListAirData: {},
DetailListSoilData: {},
latestStinkData: {},
DisplayList: '',
DisplayListdetailList0: '',
DisplayListdetailList1: '',
DisplayListdetailList2: '',
DisplayListdetailList3: '',
DisplayListstinkList4:'',
DisplayListstinkList3:'',
DisplayListstinkList2:'',
DisplayListstinkList1:'',
DisplayListstinkList0:'',
inforname: '',
dialogVisible: false,
fullscreen: false, //全屏
@ -492,7 +726,7 @@ export default {
waterData: {},
summryAllDataJson: null,
maintainLogList: [],
dateType: 'monthDays',
dateType: 'yearMonth',
dateTypeOptions: [ {
value: 'dayhours',
label: '24小时'
@ -560,6 +794,7 @@ export default {
}
},
initStart(){
let that = this;
this.loading = true;
// 实时时间
this.infor()
@ -569,6 +804,13 @@ export default {
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]
if(val.result.stink && val.result.stink[0] && val.result.stink && val.result.stink[0].detailList){
this.DisplayListstinkList4 = val.result.stink[0].detailList[4]
this.DisplayListstinkList3 = val.result.stink[0].detailList[3]
this.DisplayListstinkList2 = val.result.stink[0].detailList[2]
this.DisplayListstinkList1 = val.result.stink[0].detailList[1]
this.DisplayListstinkList0 = val.result.stink[0].detailList[0]
}
})
this.initChartData();//下方echart监测图标
this.stationDetailApi();
@ -668,7 +910,7 @@ export default {
name: item.name,
type: 'line',
stack: 'Total',
areaStyle: {},
// areaStyle: {},//阴影面积
data: item.value,
lineStyle: {
color: item.color // 设置线的颜色为红色
@ -807,11 +1049,25 @@ export default {
that.stationDetail.latestData = []
}
getStationDetail(this.stationCode).then(res => {
let that = this;
this.stationDetail = res.result
this.stationType = res.result.stationType
this.DetailListAirData = res.result.latestAirData[0]
//空气数据
if (this.DetailListAirData) { }
// this.latestStinkData = res.result.latestStinkData
if(res.result.latestAirData){//空气数据
res.result.latestAirData.map(item => {
that.DetailListAirData[item.survItem] = item;
})
}
if(res.result.latestSoilData){//土壤数据
res.result.latestSoilData.map(item => {
that.DetailListSoilData[item.survItem] = item;
})
}
if(res.result.latestStinkData){//土壤数据
res.result.latestStinkData.map(item => {
that.latestStinkData[item.survItem] = item;
})
}
if (this.stationDetail.latestWaterData[0]) { //水数据
this.stationDetail.latestWaterData.map(item => {
if(item.survItem == 'dataWaterTemp'){
@ -829,8 +1085,6 @@ export default {
this.animateObj = [];
this.hhlistxunh();
}
// 土壤数据
// this.DetailListSoilData = res.result.latestSoilData[0]
that.currentPlayerLive = {};
// 监控画面
setTimeout(() => {
@ -946,6 +1200,9 @@ export default {
}
this.fullscreen = !this.fullscreen;
},
formatter: function (num) {
return num.toFixed(2)
},
}
}
</script>
@ -1289,7 +1546,7 @@ export default {
.home_dlhj {
width: 88%;
min-height: 2vw !important;
height: 15vw !important;
height: 13vw !important;
margin: 0 auto;
}
@ -1722,7 +1979,8 @@ export default {
}
.jctc_add {
height: 1vw;
//height: 1vw;
min-height: 1vw !important;
padding-left: 3%;
margin-top: 0.6vw;
}
@ -1820,7 +2078,7 @@ export default {
}
.qxjcimg2 {
width: 50%;
width: 48%;
height: 15.4vw;
float: left;
}
@ -1879,7 +2137,7 @@ export default {
.mywrcov_lf_num {
position: absolute;
top: 0;
top: 6px;
left: 0;
font-size: 0.6vw;
color: #86ffa2;
@ -2066,6 +2324,9 @@ export default {
width: 30%;
height: 100%;
position: relative;
box-sizing: border-box;
padding: 5px;
overflow: hidden;
}
.baseBoxRight {
@ -2690,5 +2951,144 @@ a:hover {
z-index: 1;
}
}
/* 恶臭样式 */
.ecqtssjc{
width: 100%;
height: 16.2vw;
position: relative;
}
.ecjcbak{
position: absolute;
width: 60%;
top: 1vw;
left: 20%;
z-index: 1;
}
.ecqtssjc_con{
position: absolute;
width: 7vw;
height: 7vw;
top: 2.8vw;
left: 34%;
z-index: 2;
background: url(../../assets/image/eckqzl.png)no-repeat;
background-size: cover;
}
.ecqtssjc_con_tit{
font-size: 1vw;
color: #1ad35f;
display: block;
text-align: center;
margin-top: 2.4vw;
font-weight: bold;
}
.ecqtssjc_con_sma{
font-size: 0.8vw;
color: #bcd3f5;
display: block;
text-align: center;
}
.ecqtssjc_lettp{
position: absolute;
width: 6vw;
height: 6vw;
top: 0.4vw;
left: 10%;
z-index: 2;
background: url(../../assets/image/eckqzltopleft.png)no-repeat;
background-size: cover;
}
.ecqtssjc_lettp_tit{
font-size: 1vw;
color: #ffd4d4;
display: block;
text-align: center;
margin-top: 2.0vw;
font-weight: bold;
}
.ecqtssjc_lettp_sma{
font-size: 0.8vw;
color: #bcd3f5;
display: block;
text-align: center;
margin-top: 1.4vw;
}
.ecqtssjc_lettb{
position: absolute;
width: 6vw;
height: 6vw;
top: 6.4vw;
left: 8%;
z-index: 2;
background: url(../../assets/image/eckqzltoplefb.png)no-repeat;
background-size: cover;
}
.ecqtssjc_lettb_tit{
font-size: 1vw;
color: #f9ffd0;
display: block;
text-align: center;
margin-top: 2.0vw;
font-weight: bold;
}
.ecqtssjc_lettb_sma{
font-size: 0.8vw;
color: #bcd3f5;
display: block;
text-align: center;
margin-top: 1.4vw;
}
.ecqtssjc_ritp{
position: absolute;
width: 6vw;
height: 6vw;
top: 0.4vw;
right: 8%;
z-index: 2;
background: url(../../assets/image/eckqzltopritb.png)no-repeat;
background-size: cover;
}
.ecqtssjc_ritp_tit{
font-size: 1vw;
color: #f9ffd0;
display: block;
text-align: center;
margin-top: 2.0vw;
font-weight: bold;
}
.ecqtssjc_ritp_sma{
font-size: 0.8vw;
color: #fff4d1;
display: block;
text-align: center;
margin-top: 1.4vw;
}
.ecqtssjc_ritb{
position: absolute;
width: 6vw;
height: 6vw;
top: 7.4vw;
right: 14%;
z-index: 2;
background: url(../../assets/image/eckqzltopritp.png)no-repeat;
background-size: cover;
}
.ecqtssjc_ritb_tit{
font-size: 1vw;
color: #ccffe9;
display: block;
text-align: center;
margin-top: 2.0vw;
font-weight: bold;
}
.ecqtssjc_ritb_sma{
font-size: 0.8vw;
color: #bcd3f5;
display: block;
text-align: center;
margin-top: 1.4vw;
}
</style>