实时监测数据开发
This commit is contained in:
978184212@qq.com
parent
a70a36a747
commit
171d257b5b
|
|
@ -2,7 +2,7 @@
|
|||
<view class="container">
|
||||
<uni-nav-bar :fixed="true" left-icon="left" background-color="#0F6EFF" @clickLeft="back()" status-bar :title="details.stationName"/>
|
||||
<block v-if="details.stationName">
|
||||
<view class="content" v-if="details.stationType == 'orient'">
|
||||
<view class="content" >
|
||||
<view class="list_item">
|
||||
<view class="list_item_top">
|
||||
<view class="list_item_left">
|
||||
|
|
@ -101,19 +101,13 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="jczb_bot">
|
||||
<!-- <view class="tab">
|
||||
<view class="tab_left" v-for="(item,index) in tab" :key="index" :class="{'tabchaecked':isActive == index}" @click="changetab(index)">
|
||||
{{item}}
|
||||
<view class="botbordre" v-if="isActive == index"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view>
|
||||
<view class="jccontent" v-if="codelist.length != 0">
|
||||
<view class="jccontent" v-if="orientlist.length != 0">
|
||||
<view class="titles">
|
||||
重要污染物监测
|
||||
</view>
|
||||
<view class="botcontent">
|
||||
<view class="botcontent_left" v-for="(item,index) in codelist" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botcontent_left" v-for="(item,index) in orientlist" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botleft_left">
|
||||
<view class="botleftleft_top">
|
||||
{{item.name}}
|
||||
|
|
@ -122,280 +116,108 @@
|
|||
{{item.value || 0}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
<image :src="item.icon" mode=""></image>
|
||||
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jccontent" style="margin-top: 51rpx;" v-if="qxList.length != 0">
|
||||
<view class="titles">
|
||||
水质监测常规五项
|
||||
</view>
|
||||
<view class="botcontent">
|
||||
<view class="botcontent_left" v-for="(item,index) in qxList" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botleft_left">
|
||||
<view class="botleftleft_top">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="botleftleft_bot">
|
||||
{{item.value || 0}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
<image :src="item.icon" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jccontent" style="margin-top: 51rpx;" v-if="trList.length != 0">
|
||||
<view class="titles">
|
||||
土壤数据监测
|
||||
</view>
|
||||
<view class="botcontent">
|
||||
<view class="botcontent_left" v-for="(item,index) in trList" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botleft_left">
|
||||
<view class="botleftleft_top">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="botleftleft_bot">
|
||||
{{item.value || 0}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
<image :src="item.icon" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="load" v-if="trList.length == 0 && qxList.length == 0 && codelist.length == 0">
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="lssj" v-else>
|
||||
<view class="scrolltop" v-if="list.length != 0">
|
||||
<view class="tabitem" v-for="(item,index) in tabList" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view style="height: 737rpx;" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
|
||||
<block v-if="list.length != 0">
|
||||
<view class="lists_item" v-for="(item,index) in list" :key="index">
|
||||
<block>
|
||||
<view class="jczbs" v-if="item.name">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="jczbs" v-else></view>
|
||||
</block>
|
||||
<view class="zbz">
|
||||
{{item.value || 0}}{{item.unit}}
|
||||
</view> -->
|
||||
<!-- <view class="szqs">
|
||||
<image v-if="item.type == 1" src="../../../static/home_shuju_shang.png" mode=""></image>
|
||||
<image v-if="item.type == 0" src="../../../static/home_shuju_xia.png" mode=""></image>
|
||||
<view class="szqss" v-if="item.type == 2"></view>
|
||||
</view> -->
|
||||
<!-- <block>
|
||||
<view class="sbsj" v-if="item.dataDateTime">
|
||||
{{item.dataDateTime}}
|
||||
</view>
|
||||
<view class="sbsj" v-else></view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="zwgd" style="width: 100%;height: 100rpx; line-height: 100rpx;text-align: center;color: #c6c6c6;">
|
||||
暂无更多数据
|
||||
</view>
|
||||
</block>
|
||||
<view class="load" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content" v-else>
|
||||
<view class="list_item">
|
||||
<view class="list_item_top">
|
||||
<view class="list_item_left">
|
||||
<image v-if="details.stationType == 'livestock'" src="../../static/zhandian_icon_xuqin.png" mode=""></image>
|
||||
<image v-else src="../../static/zd.png" mode=""></image>
|
||||
<view class="item_right">
|
||||
<view class="right_top" v-if="details.stationName">
|
||||
{{details.stationName}}
|
||||
</view>
|
||||
<view class="right_bot" v-if="details.stationLocation">
|
||||
<image src="../../static/wz.png" mode=""></image>
|
||||
<view class="">{{details.stationLocation}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="state">
|
||||
<view class="">
|
||||
在线
|
||||
</view>
|
||||
<image src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_item_bot">
|
||||
<view class="bot_box">
|
||||
<view class="sbnum">
|
||||
{{details.deviceList.length || 0}}
|
||||
</view>
|
||||
<view class="sbtext">
|
||||
设备数量
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot_box">
|
||||
<view class="sbnum">
|
||||
{{details.survItemCount || 0}}
|
||||
</view>
|
||||
<view class="sbtext">
|
||||
监测项
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot_box">
|
||||
<view class="sbnum">
|
||||
{{details.survDataCount || 0}}
|
||||
</view>
|
||||
<view class="sbtext">
|
||||
上报数据
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jstime">
|
||||
<view class="border"></view>
|
||||
<view class="jstime_right" v-if="details.buildTime">
|
||||
<view class="jstimerig_top">
|
||||
站点建设时间:
|
||||
</view>
|
||||
<view class="jstimerig_bot">
|
||||
{{details.buildTime}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jstime">
|
||||
<view class="border1"></view>
|
||||
<view class="jstime_right" v-if="survItemList.length != 0">
|
||||
<view class="jstimerig_top">
|
||||
监测指标:
|
||||
</view>
|
||||
<view class="jstimerig_bot">
|
||||
<view class="tag-view" v-for="(item,index) in survItemList" :key="index">
|
||||
<view :style="{background:item.color}" class="tag">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zdjk" v-if="survCamera.length != 0">
|
||||
<view class="zdjk_top">
|
||||
<view class="zdjktop_left">
|
||||
站点监控
|
||||
</view>
|
||||
<view class="zdjktop_right">
|
||||
监控数量<span class="number">{{survCamera.length ||0}}</span>个
|
||||
</view>
|
||||
</view>
|
||||
<view class="zdjk_bot">
|
||||
<view class="zdjkbot_left" v-for="(item,index) in survCamera" :key="index" @click="tojk(item,index)">
|
||||
<image src="../../static/mrt.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jczb">
|
||||
<view class="zdjk_top">
|
||||
<view class="zdjktop_left">
|
||||
监测指标
|
||||
</view>
|
||||
<view class="zdjktop_right">
|
||||
监测项目<span class="number">{{details.survItemCount || 0}}</span>项
|
||||
</view>
|
||||
</view>
|
||||
<view class="jczb_bot">
|
||||
<!-- <view class="tab">
|
||||
<view class="tab_left" v-for="(item,index) in tab" :key="index" :class="{'tabchaecked':isActive == index}" @click="changetab(index)">
|
||||
{{item}}
|
||||
<view class="botbordre" v-if="isActive == index"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view>
|
||||
<view class="jccontent" v-if="codelist.length != 0">
|
||||
<view class="jccontent" v-if="livelist.length != 0">
|
||||
<view class="titles">
|
||||
重要污染物监测
|
||||
</view>
|
||||
<view class="botcontent">
|
||||
<view class="botcontent_left" v-for="(item,index) in codelist" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botcontent_left" v-for="(item,index) in livelist" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botleft_left">
|
||||
<view class="botleftleft_top">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="botleftleft_bot">
|
||||
{{item.value ||0}}{{item.unit}}
|
||||
{{item.value || 0}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
<image :src="item.icon" mode=""></image>
|
||||
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jccontent" style="margin-top: 51rpx;" v-if="ecList.length != 0">
|
||||
<view class="jccontent" v-if="airlist.length != 0">
|
||||
<view class="titles">
|
||||
恶臭气体监测
|
||||
空气监测
|
||||
</view>
|
||||
<view class="botcontent">
|
||||
<view class="botcontent_left" v-for="(item,index) in ecList" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botcontent_left" v-for="(item,index) in airlist" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botleft_left">
|
||||
<view class="botleftleft_top">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="botleftleft_bot">
|
||||
{{item.value ||0}}{{item.unit}}
|
||||
{{item.value || 0}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
<image :src="item.icon" mode=""></image>
|
||||
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="load" v-if="codelist.length == 0&&ecList.length == 0">
|
||||
<view class="jccontent" v-if="soillist.length != 0">
|
||||
<view class="titles">
|
||||
土壤监测
|
||||
</view>
|
||||
<view class="botcontent">
|
||||
<view class="botcontent_left" v-for="(item,index) in soillist" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botleft_left">
|
||||
<view class="botleftleft_top">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="botleftleft_bot">
|
||||
{{item.value || 0}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jccontent" v-if="waterlist.length != 0">
|
||||
<view class="titles">
|
||||
水五常监测
|
||||
</view>
|
||||
<view class="botcontent">
|
||||
<view class="botcontent_left" v-for="(item,index) in waterlist" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botleft_left">
|
||||
<view class="botleftleft_top">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="botleftleft_bot">
|
||||
{{item.value || 0}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jccontent" v-if="stinklist.length != 0">
|
||||
<view class="titles">
|
||||
恶臭监测
|
||||
</view>
|
||||
<view class="botcontent">
|
||||
<view class="botcontent_left" v-for="(item,index) in stinklist" :key="index" @click="tosjdetail(item,index)">
|
||||
<view class="botleft_left">
|
||||
<view class="botleftleft_top">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="botleftleft_bot">
|
||||
{{item.value || 0}}{{item.unit}}
|
||||
</view>
|
||||
</view>
|
||||
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="load" v-if="airlist.length == 0 && soillist.length == 0 && waterlist.length == 0&& orientlist.length == 0 && livelist.length == 0&& stinklist.length == 0">
|
||||
暂无数据
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="lssj" v-else>
|
||||
<view class="scrolltop" v-if="list.length != 0">
|
||||
<view class="tabitem" v-for="(item,index) in tabList" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view style="height: 737rpx;" scroll-y="true" class="scroll-Y">
|
||||
<block v-if="list.length != 0">
|
||||
<view class="lists_item" v-for="(item,index) in list" :key="index">
|
||||
<block>
|
||||
<view class="jczbs" v-if="item.name">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="jczbs" v-else></view>
|
||||
</block>
|
||||
<view class="zbz">
|
||||
{{item.value || 0}}{{item.unit}}
|
||||
</view> -->
|
||||
<!-- <view class="szqs">
|
||||
<image v-if="item.type == 1" src="../../../static/home_shuju_shang.png" mode=""></image>
|
||||
<image v-if="item.type == 0" src="../../../static/home_shuju_xia.png" mode=""></image>
|
||||
<view class="szqss" v-if="item.type == 2"></view>
|
||||
</view> -->
|
||||
<!-- <block>
|
||||
<view class="sbsj" v-if="item.dataDateTime">
|
||||
{{item.dataDateTime}}
|
||||
</view>
|
||||
<view class="sbsj" v-else></view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="zwgd" style="width: 100%;height: 100rpx; line-height: 100rpx;text-align: center;color: #c6c6c6;">
|
||||
暂无更多数据
|
||||
</view>
|
||||
</block>
|
||||
<view class="load" v-else>
|
||||
暂无数据
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
<view class="pagebot"></view>
|
||||
</view>
|
||||
|
|
@ -408,7 +230,7 @@
|
|||
data(){
|
||||
return{
|
||||
height:0,
|
||||
baseUrl:configService.apiUrl,
|
||||
baseUrl:configService.staticDomainURL,
|
||||
scorllheight:0,
|
||||
details:{},
|
||||
item:{},
|
||||
|
|
@ -422,15 +244,18 @@
|
|||
colorList1:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A'],
|
||||
colorList:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A','#415FBE','#52AC2A','#EE701C'],
|
||||
codelist:[],
|
||||
ecList:[],
|
||||
qxList:[],
|
||||
trList:[],
|
||||
list:[],
|
||||
token:'',
|
||||
dataOu:'',
|
||||
dataNh3:'',
|
||||
dataH2s:'',
|
||||
dataTvoc:'',
|
||||
airlist:[],
|
||||
soillist:[],
|
||||
waterlist:[],
|
||||
orientlist:[],
|
||||
livelist:[],
|
||||
stinklist:[],
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
|
@ -460,131 +285,12 @@
|
|||
this.$http.get('/applet/survStationInfo/getStationInfo',{params:params}).then(res =>{
|
||||
if(res.data.code == 0){
|
||||
this.details = res.data.data.stationInfo
|
||||
if(this.details.deviceCount >= 10000 && this.details.deviceCount < 100000000){
|
||||
this.details.deviceCount = (this.details.deviceCount /10000).toFixed(1) + '万'
|
||||
}
|
||||
if(this.details.deviceCount >= 100000000){
|
||||
this.details.deviceCount = (this.details.deviceCount /100000000).toFixed(1) + '亿'
|
||||
}
|
||||
if(this.details.survItemCount >= 10000 && this.details.survItemCount < 100000000){
|
||||
this.details.survItemCount = (this.details.survItemCount /10000).toFixed(1) + '万'
|
||||
}
|
||||
if(this.details.survItemCount >= 100000000){
|
||||
this.details.survItemCount = (this.details.survItemCount /100000000).toFixed(1) + '亿'
|
||||
}
|
||||
if(this.details.survDataCount >= 10000 && this.details.survDataCount < 100000000){
|
||||
this.details.survDataCount = (this.details.survDataCount /10000).toFixed(1) + '万'
|
||||
}
|
||||
if(this.details.survDataCount >= 100000000){
|
||||
this.details.survDataCount = (this.details.survDataCount /100000000).toFixed(1) + '亿'
|
||||
}
|
||||
this.survItemList = res.data.data.stationInfo.survColorItems
|
||||
this.survCamera = res.data.data.survCamera
|
||||
// if(res.data.data.HisSurvData){
|
||||
this.list = res.data.data.HisSurvData
|
||||
if(!this.list){
|
||||
for(var i=0;i<this.list.length;i++){
|
||||
this.list[i].value = (Math.floor(this.list[i].value * 100) / 100).toFixed(2)
|
||||
}
|
||||
}
|
||||
// }
|
||||
var data = res.data.data.liveSurvData
|
||||
console.log(this.wrwlist,'污染物数据')
|
||||
this.codelist = []
|
||||
this.qxList = []
|
||||
this.trList = []
|
||||
this.ecList = []
|
||||
if (this.details.stationType=='livestock') {
|
||||
if(data){
|
||||
for(var i=0;i<this.wrwlist.length;i++){
|
||||
if(data[0]){
|
||||
for(var j=0;j<Object.keys(data[0]).length;j++){
|
||||
if(this.wrwlist[i].code == Object.keys(data[0])[j]){
|
||||
console.log(Object.values(data[0])[j],'值')
|
||||
this.codelist.push({
|
||||
name:this.wrwlist[i].description,
|
||||
icon:this.baseUrl + '/applet/common/static/' + this.wrwlist[i].icon,
|
||||
unit:this.wrwlist[i].unit,
|
||||
value:(Math.floor(Object.values(data[0])[j] * 100) / 100).toFixed(2),
|
||||
code:this.wrwlist[i].code
|
||||
})
|
||||
// console.log(this.codelist,'zhilislistgergwr')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for(var i=0;i<this.wrwlist.length;i++){
|
||||
if(data[1]){
|
||||
for(var j=0;j<Object.keys(data[1]).length;j++){
|
||||
if(this.wrwlist[i].code == Object.keys(data[1])[j]){
|
||||
console.log(Object.values(data[1])[j],'2值')
|
||||
this.ecList.push({
|
||||
name:this.wrwlist[i].description,
|
||||
icon:this.baseUrl + '/applet/common/static/' + this.wrwlist[i].icon,
|
||||
unit:this.wrwlist[i].unit,
|
||||
value:(Math.floor(Object.values(data[1])[j] * 100) / 100).toFixed(2),
|
||||
code:this.wrwlist[i].code
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else{
|
||||
if(data){
|
||||
for(var i=0;i<this.wrwlist.length;i++){
|
||||
if(data[0]){
|
||||
for(var j=0;j<Object.keys(data[0]).length;j++){
|
||||
if(this.wrwlist[i].code == Object.keys(data[0])[j]){
|
||||
console.log(Object.values(data[0])[j],'值')
|
||||
this.codelist.push({
|
||||
name:this.wrwlist[i].description,
|
||||
icon:this.baseUrl + '/applet/common/static/' + this.wrwlist[i].icon,
|
||||
unit:this.wrwlist[i].unit,
|
||||
value:(Math.floor(Object.values(data[0])[j] * 100) / 100).toFixed(2),
|
||||
code:this.wrwlist[i].code
|
||||
})
|
||||
// console.log(this.codelist,'zhilislistgergwr')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for(var i=0;i<this.wrwlist.length;i++){
|
||||
if(data[1]){
|
||||
for(var j=0;j<Object.keys(data[1]).length;j++){
|
||||
if(this.wrwlist[i].code == Object.keys(data[1])[j]){
|
||||
console.log(Object.values(data[1])[j],'值')
|
||||
this.qxList.push({
|
||||
name:this.wrwlist[i].description,
|
||||
icon:this.baseUrl + '/applet/common/static/' + this.wrwlist[i].icon,
|
||||
unit:this.wrwlist[i].unit,
|
||||
value:(Math.floor(Object.values(data[1])[j] * 100) / 100).toFixed(2),
|
||||
code:this.wrwlist[i].code
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for(var i=0;i<this.wrwlist.length;i++){
|
||||
if(data[2]){
|
||||
for(var j=0;j<Object.keys(data[2]).length;j++){
|
||||
if(this.wrwlist[i].code == Object.keys(data[2])[j]){
|
||||
console.log(Object.values(data[2])[j],'值')
|
||||
this.trList.push({
|
||||
name:this.wrwlist[i].description,
|
||||
icon:this.baseUrl + '/applet/common/static/' + this.wrwlist[i].icon,
|
||||
unit:this.wrwlist[i].unit,
|
||||
value:(Math.floor(Object.values(data[2])[j] * 100) / 100).toFixed(2),
|
||||
code:this.wrwlist[i].code
|
||||
})
|
||||
// console.log(this.trList,'zhilis')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.airlist = res.data.data.airSurvData
|
||||
this.soillist = res.data.data.soilSurvData
|
||||
this.waterlist = res.data.data.waterSurvData
|
||||
this.orientlist = res.data.data.orientSurvData
|
||||
this.livelist = res.data.data.liveSurvData
|
||||
this.stinklist = res.data.data.stinkSurvData
|
||||
}
|
||||
uni.hideLoading();
|
||||
})
|
||||
|
|
@ -940,6 +646,7 @@
|
|||
font-weight: 400;
|
||||
color: #77889B;
|
||||
margin-bottom: 29rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.botcontent{
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -153,36 +153,34 @@
|
|||
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
"#FC8452", "#9A60B4", "#ea7ccc"
|
||||
],
|
||||
padding: [0, 15, 10, 15], // 上边距增加以容纳顶部图例
|
||||
padding: [0, 15, 10, 15],
|
||||
legend: {
|
||||
show: true, // 显示图例
|
||||
show: true,
|
||||
position: "top",
|
||||
float: "right", // 图例放在右侧
|
||||
float: "right",
|
||||
itemGap: 10,
|
||||
margin: 10,
|
||||
},
|
||||
enableScroll: true,
|
||||
enableScroll: false, // 禁用滚动
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 8,
|
||||
scrollShow: false,
|
||||
scrollAlign: 'left',
|
||||
labelCount: 14,
|
||||
scrollShow: false, // 不显示滚动
|
||||
labelCount: 2, // 只显示2个标签
|
||||
boundaryGap: 'justify',
|
||||
// 自定义标签显示逻辑
|
||||
labelFormatter: (val, i, allLabels) => {
|
||||
// 只显示第一个和中间的数据
|
||||
if (i === 0 || i === Math.floor(allLabels.length / 2)) {
|
||||
return val;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
// 虚线-实线
|
||||
gridType: "dash",
|
||||
// 虚线单位
|
||||
dashLength: 2,
|
||||
// 开启y轴单位
|
||||
showTitle: true,
|
||||
// y轴配置
|
||||
data: [{
|
||||
// 不写最大最小值-自增长
|
||||
// min: 0,
|
||||
// max: 150,
|
||||
// y轴单位
|
||||
title: '数量',
|
||||
}],
|
||||
},
|
||||
|
|
@ -199,13 +197,11 @@
|
|||
textStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
// 自定义提示框内容
|
||||
format: (item, category, index, opts) => {
|
||||
return `${category}\n${item.seriesName}: ${item.data}`
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
// 可以添加标记线来更明显地显示阈值
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
|
@ -483,106 +479,56 @@
|
|||
maskClick(e) {
|
||||
this.rangetime = e;
|
||||
},
|
||||
// 处理图表数据（带高亮超出部分）
|
||||
// 处理图表数据
|
||||
getServerData(val) {
|
||||
const chartDataList = val.map(item => {
|
||||
const series = [];
|
||||
|
||||
// 处理主要数据 - 确保都是Number格式
|
||||
// 处理主要数据
|
||||
const mainData = (item.data.slice(0, 50) || Array(this.timeList?.length || 0).fill(0))
|
||||
.map(value => Number(value) || 0);
|
||||
|
||||
const highValNum = item.highVal ? Number(item.highVal) || 0 : null;
|
||||
const lowValNum = item.lowVal ? Number(item.lowVal) || 0 : null;
|
||||
|
||||
// 正常数据线
|
||||
// 正常数据线 - 实线
|
||||
series.push({
|
||||
name: item.itemName,
|
||||
data: mainData,
|
||||
color: "#1890FF"
|
||||
color: "#1890FF",
|
||||
lineType: "solid",
|
||||
pointShape: "circle",
|
||||
show: true
|
||||
});
|
||||
|
||||
// 阈值线（保持原来的虚线）
|
||||
// 最高阈值线 - 虚线
|
||||
if (highValNum !== null) {
|
||||
series.push({
|
||||
name: '最高阈值',
|
||||
name: `最高阈值: ${highValNum}`,
|
||||
data: Array(this.timeList?.length || 0).fill(highValNum),
|
||||
color: "#FF4242",
|
||||
lineType: "dashed",
|
||||
showLabel: true,
|
||||
dataLabel: false,
|
||||
lineType: "dashed", // 虚线
|
||||
pointShape: "none", // 不显示点
|
||||
show: true,
|
||||
});
|
||||
}
|
||||
|
||||
// 最低阈值线 - 虚线
|
||||
if (lowValNum !== null) {
|
||||
series.push({
|
||||
name: '最低阈值',
|
||||
name: `最低阈值: ${lowValNum}`,
|
||||
data: Array(this.timeList?.length || 0).fill(lowValNum),
|
||||
color: "#19D58A",
|
||||
lineType: "dashed",
|
||||
showLabel: true,
|
||||
dataLabel: false,
|
||||
lineType: "dashed", // 虚线
|
||||
pointShape: "none", // 不显示点
|
||||
show: true,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
categories: this.timeList.slice(0, 50) || [],
|
||||
series: series,
|
||||
// 为每个图表项单独配置opts，包含对应的单位
|
||||
chartOpts: {
|
||||
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE",
|
||||
"#3CA272",
|
||||
"#FC8452", "#9A60B4", "#ea7ccc"
|
||||
],
|
||||
padding: [0, 15, 10, 5],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
float: "right",
|
||||
itemGap: 10,
|
||||
margin: 10,
|
||||
},
|
||||
enableScroll: true,
|
||||
dataLabel:false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 14,
|
||||
scrollShow: true,
|
||||
scrollAlign: 'left',
|
||||
labelCount: 14,
|
||||
boundaryGap: 'justify'
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2,
|
||||
showTitle: true,
|
||||
// 动态设置单位，使用item.unit
|
||||
data: [{
|
||||
title: item.unit || '单位', // 使用监测项的单位，如果没有则显示'单位'
|
||||
}],
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.2,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
},
|
||||
tooltip: {
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
format: (item, category, index, opts) => {
|
||||
return `${category}\n${item.seriesName}: ${item.data}`
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
data: []
|
||||
}
|
||||
}
|
||||
}
|
||||
chartOpts: this.getChartOpts(item.itemName, item.unit)
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -592,20 +538,19 @@
|
|||
...item,
|
||||
chartData: chartDataList[index] ? chartDataList[index].series : [],
|
||||
categories: chartDataList[index] ? chartDataList[index].categories : [],
|
||||
chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this
|
||||
.getDefaultChartOpts(item.itemName, item.unit)
|
||||
chartOpts: chartDataList[index] ? chartDataList[index].chartOpts : this.getChartOpts(item.itemName, item.unit)
|
||||
};
|
||||
});
|
||||
console.log("处理后的趋势图数据", this.resolt);
|
||||
},
|
||||
|
||||
// 获取默认图表配置
|
||||
getDefaultChartOpts(itemName, unit) {
|
||||
// 获取图表配置
|
||||
getChartOpts(itemName, unit) {
|
||||
return {
|
||||
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
|
||||
"#FC8452", "#9A60B4", "#ea7ccc"
|
||||
],
|
||||
padding: [0, 15, 10, 15],
|
||||
padding: [0, 15, 10, 5],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
|
|
@ -613,14 +558,51 @@
|
|||
itemGap: 10,
|
||||
margin: 10,
|
||||
},
|
||||
enableScroll: true,
|
||||
enableScroll: false, // 禁用滚动，显示所有数据
|
||||
dataLabel: false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 14,
|
||||
scrollShow: true,
|
||||
scrollAlign: 'left',
|
||||
labelCount: 14,
|
||||
boundaryGap: 'justify'
|
||||
scrollShow: false, // 不显示滚动条
|
||||
labelCount: 3, // 设置显示3个标签（对应我们要显示的3个点）
|
||||
boundaryGap: 'justify',
|
||||
// 自定义标签显示：显示第一个、中间和倒数第三个数据
|
||||
labelFormatter: (val, i, allLabels) => {
|
||||
if (!allLabels || allLabels.length === 0) {
|
||||
return val;
|
||||
}
|
||||
|
||||
const total = allLabels.length;
|
||||
|
||||
// 1. 第一个标签
|
||||
if (i === 0) {
|
||||
return val;
|
||||
}
|
||||
|
||||
// 2. 中间标签
|
||||
const middleIndex = Math.floor(total / 2);
|
||||
if (total % 2 === 0 && i === middleIndex - 1) {
|
||||
// 如果是偶数个，显示中间两个中的前一个
|
||||
return val;
|
||||
} else if (i === middleIndex) {
|
||||
// 如果是奇数个，显示正中间
|
||||
return val;
|
||||
}
|
||||
|
||||
// 3. 倒数第三个标签
|
||||
// 确保有足够的数据点
|
||||
if (total >= 3) {
|
||||
const thirdLastIndex = total - 3;
|
||||
if (i === thirdLastIndex) {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
// 如果数据少于3个，显示最后一个
|
||||
else if (i === total - 1) {
|
||||
return val;
|
||||
}
|
||||
|
||||
return ''; // 其他标签返回空字符串
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
|
|
@ -648,11 +630,20 @@
|
|||
}
|
||||
},
|
||||
markLine: {
|
||||
data: []
|
||||
},
|
||||
line: {
|
||||
width: 2,
|
||||
smooth: true
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
// 自定义图例渲染（如果需要）
|
||||
customLegendRender() {
|
||||
// 如果uCharts的图例样式不满足需求，可以考虑使用自定义的图例组件
|
||||
// 这里可以返回一个自定义的图例HTML或组件
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -29,10 +29,16 @@
|
|||
<script>
|
||||
import api from '@/api/api'
|
||||
import configService from '@/common/service/config.service.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
baseUrl:configService.staticDomainURL,
|
||||
baseUrl: configService.staticDomainURL,
|
||||
center: {
|
||||
latitude: 36.5,
|
||||
longitude: 111.7
|
||||
},
|
||||
scale: 14,
|
||||
markers: [],
|
||||
list: [],
|
||||
issscd: false, // 团柏河显示状态 (false表示显示)
|
||||
|
|
@ -41,7 +47,7 @@
|
|||
stationInfo: [],
|
||||
cusLocation: [],
|
||||
stationlist: [],
|
||||
stationTwolist:[],
|
||||
stationTwolist: [],
|
||||
mapCtx: null // 添加地图上下文
|
||||
};
|
||||
},
|
||||
|
|
@ -57,22 +63,22 @@
|
|||
onShow() {
|
||||
if(uni.getStorageSync('third_session')){
|
||||
uni.login({
|
||||
success: function (res) {
|
||||
this.code = res.code
|
||||
let params = {}
|
||||
params.jsCode = this.code
|
||||
api.wxlogin(params).then(res=>{
|
||||
if(res.data.code == 0){
|
||||
let userInfo = res.data.data;
|
||||
// uni.setStorageSync('third_session', userInfo.thirdSession);
|
||||
if(!userInfo.id){
|
||||
uni.reLaunch({
|
||||
url:'/packDetail/pages/login/login'
|
||||
})
|
||||
success: function (res) {
|
||||
this.code = res.code
|
||||
let params = {}
|
||||
params.jsCode = this.code
|
||||
api.wxlogin(params).then(res=>{
|
||||
if(res.data.code == 0){
|
||||
let userInfo = res.data.data;
|
||||
// uni.setStorageSync('third_session', userInfo.thirdSession);
|
||||
if(!userInfo.id){
|
||||
uni.reLaunch({
|
||||
url:'/packDetail/pages/login/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}else if(!uni.getStorageSync('third_session')){
|
||||
uni.reLaunch({
|
||||
|
|
@ -195,7 +201,7 @@
|
|||
});
|
||||
},
|
||||
|
||||
// 调整地图视野以包含所有标记点
|
||||
// 调整地图视野以包含所有标记点（类似setFitView效果）
|
||||
adjustMapToFitAllMarkers() {
|
||||
if (this.mapCtx && this.list.length > 0) {
|
||||
this.mapCtx.includePoints({
|
||||
|
|
@ -203,7 +209,7 @@
|
|||
latitude: item.latitude,
|
||||
longitude: item.longitude
|
||||
})),
|
||||
padding: [40, 40, 40, 40] // 上下左右的边距
|
||||
padding: [60, 60, 60, 60] // 上下左右的边距
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -241,7 +247,7 @@
|
|||
if (points.length > 0 && this.mapCtx) {
|
||||
this.mapCtx.includePoints({
|
||||
points: points,
|
||||
padding: [60, 60, 60, 60] // 可以调整边距以获得更好的显示效果
|
||||
padding: [80, 110, 80, 110] // 增加边距以获得更好的显示效果
|
||||
});
|
||||
} else if (points.length === 0) {
|
||||
// 如果没有找到对应的标记点，显示提示
|
||||
|
|
@ -252,6 +258,39 @@
|
|||
}
|
||||
},
|
||||
|
||||
// 更精确的地图定位方法（类似高德地图的setFitView）
|
||||
preciseMapAdjustment(regionName) {
|
||||
if (!this.mapCtx) return;
|
||||
|
||||
// 根据不同区域设置不同的中心和缩放级别
|
||||
const regionConfigs = {
|
||||
'团柏河': {
|
||||
latitude: 36.5, // 实际中心纬度
|
||||
longitude: 111.7, // 实际中心经度
|
||||
scale: 14
|
||||
},
|
||||
'对竹河': {
|
||||
latitude: 36.4, // 实际中心纬度
|
||||
longitude: 111.6, // 实际中心经度
|
||||
scale: 14
|
||||
},
|
||||
'土壤': {
|
||||
latitude: 36.45, // 实际中心纬度
|
||||
longitude: 111.65, // 实际中心经度
|
||||
scale: 13
|
||||
}
|
||||
};
|
||||
|
||||
const config = regionConfigs[regionName];
|
||||
if (config) {
|
||||
this.mapCtx.moveToLocation({
|
||||
latitude: config.latitude,
|
||||
longitude: config.longitude,
|
||||
scale: config.scale
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
markertap(e) {
|
||||
const index = e.detail.markerId
|
||||
const marker = this.markers.find(m => m.id === index);
|
||||
|
|
@ -264,12 +303,6 @@
|
|||
uni.navigateTo({
|
||||
url: `/packDetail/pages/vidio/soilindex`
|
||||
})
|
||||
// 处理设备点击事件
|
||||
// uni.showToast({
|
||||
// title: `设备: ${marker.stationName}`,
|
||||
// icon: 'none'
|
||||
// });
|
||||
// 可以在这里添加设备详情页面的跳转逻辑
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -283,7 +316,6 @@
|
|||
url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(marker))}`
|
||||
})
|
||||
} else if (marker.stationType === 'device') {
|
||||
// 处理设备点击事件
|
||||
uni.showToast({
|
||||
title: `设备: ${marker.stationName}`,
|
||||
icon: 'none'
|
||||
|
|
@ -345,6 +377,7 @@
|
|||
// 聚焦到特定区域
|
||||
setTimeout(() => {
|
||||
this.adjustMapToRegion(name);
|
||||
// 或者使用更精确的方法：this.preciseMapAdjustment(name);
|
||||
}, 300);
|
||||
} else {
|
||||
// 恢复显示所有标记点
|
||||
|
|
@ -388,7 +421,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue