From 781ffa7f5a2814b3b0a77c9759782d651c71fe79 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Thu, 01 Sep 2022 16:59:18 +0800
Subject: [PATCH] 监测设备数据展示优化
---
src/styles/publicBox/equirment-station-details.scss | 7
src/views/farm/index.vue | 18
src/styles/publicBox/equirment-station-details.css | 4
src/views/home/index.vue | 712 ++++++++++++++++++++++++++++++++++++++++++++---------
src/styles/publicBox/equirment-station-details.min.css | 2
5 files changed, 602 insertions(+), 141 deletions(-)
diff --git a/src/styles/publicBox/equirment-station-details.css b/src/styles/publicBox/equirment-station-details.css
index e4acdf9..e91d48b 100644
--- a/src/styles/publicBox/equirment-station-details.css
+++ b/src/styles/publicBox/equirment-station-details.css
@@ -41,6 +41,10 @@
}
.public-equirment-station-details .content {
+ height: 330px;
+}
+
+.public-equirment-station-details .content .publicStaBox {
overflow: scroll;
height: 330px;
}
diff --git a/src/styles/publicBox/equirment-station-details.min.css b/src/styles/publicBox/equirment-station-details.min.css
index 999bfa1..fd83d44 100644
--- a/src/styles/publicBox/equirment-station-details.min.css
+++ b/src/styles/publicBox/equirment-station-details.min.css
@@ -1 +1 @@
-.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:648px;height:401px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;opacity:1;border:1px solid #69E2ED;background:rgba(20,66,104,0.8);border-radius:10px;margin:0;padding:0}.public-equirment-station-details .header{position:relative;width:270px;height:24px;font-size:18px;font-family:Microsoft YaHei-Bold, Microsoft YaHei;font-weight:bold;color:#58BFCD;line-height:20px;margin:20px auto}.public-equirment-station-details .header div{text-align:center}.public-equirment-station-details .header .close{position:absolute;top:-20px;right:-260px;cursor:pointer}.public-equirment-station-details .content{overflow:scroll;height:330px}.public-equirment-station-details .content .itemTitle{box-sizing:border-box;width:607px;height:70px;background:#0D1E34;border-radius:0px 0px 0px 0px;opacity:1;margin-left:17px;margin-bottom:10px;padding:15px 20px;border:1px solid transparent}.public-equirment-station-details .content .itemTitle img{float:left;width:30px;height:30px}.public-equirment-station-details .content .itemTitle .type{float:left;margin-left:20px;width:150px}.public-equirment-station-details .content .itemTitle .type h1{font-size:16px;color:#58BFCD;margin-bottom:4px}.public-equirment-station-details .content .itemTitle .type span{font-size:13px;color:#FFFFFF;opacity:0.5}.public-equirment-station-details .content .itemTitle .data{float:left;margin-left:158px;width:80px;height:34px;font-size:34px;font-family:DS-Digital-Italic, DS-Digital;font-weight:normal;color:#58BFCD;line-height:32px}.public-equirment-station-details .content .itemTitle .openMenuIcon{margin-left:90px;margin-top:4px;cursor:pointer}.public-equirment-station-details .content .EchartsBox_div{width:607px;height:210px;background:#0D1E34;margin-left:17px;margin-top:-11px;margin-bottom:10px}
+.public-equirment-station-details{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);width:648px;height:401px;background-color:transparent;z-index:99;font-size:16px;box-shadow:inset 0px 3px 20px 1px #5BC3D1;opacity:1;border:1px solid #69E2ED;background:rgba(20,66,104,0.8);border-radius:10px;margin:0;padding:0}.public-equirment-station-details .header{position:relative;width:270px;height:24px;font-size:18px;font-family:Microsoft YaHei-Bold, Microsoft YaHei;font-weight:bold;color:#58BFCD;line-height:20px;margin:20px auto}.public-equirment-station-details .header div{text-align:center}.public-equirment-station-details .header .close{position:absolute;top:-20px;right:-260px;cursor:pointer}.public-equirment-station-details .content{height:330px}.public-equirment-station-details .content .publicStaBox{overflow:scroll;height:330px}.public-equirment-station-details .content .itemTitle{box-sizing:border-box;width:607px;height:70px;background:#0D1E34;border-radius:0px 0px 0px 0px;opacity:1;margin-left:17px;margin-bottom:10px;padding:15px 20px;border:1px solid transparent}.public-equirment-station-details .content .itemTitle img{float:left;width:30px;height:30px}.public-equirment-station-details .content .itemTitle .type{float:left;margin-left:20px;width:150px}.public-equirment-station-details .content .itemTitle .type h1{font-size:16px;color:#58BFCD;margin-bottom:4px}.public-equirment-station-details .content .itemTitle .type span{font-size:13px;color:#FFFFFF;opacity:0.5}.public-equirment-station-details .content .itemTitle .data{float:left;margin-left:158px;width:80px;height:34px;font-size:34px;font-family:DS-Digital-Italic, DS-Digital;font-weight:normal;color:#58BFCD;line-height:32px}.public-equirment-station-details .content .itemTitle .openMenuIcon{margin-left:90px;margin-top:4px;cursor:pointer}.public-equirment-station-details .content .EchartsBox_div{width:607px;height:210px;background:#0D1E34;margin-left:17px;margin-top:-11px;margin-bottom:10px}
diff --git a/src/styles/publicBox/equirment-station-details.scss b/src/styles/publicBox/equirment-station-details.scss
index 1fadc43..2283f98 100644
--- a/src/styles/publicBox/equirment-station-details.scss
+++ b/src/styles/publicBox/equirment-station-details.scss
@@ -38,8 +38,11 @@
}
}
.content {
- overflow: scroll;
- height: 330px;
+ height: 330px;
+ .publicStaBox {
+ overflow: scroll;
+ height: 330px;
+ }
.itemTitle {
box-sizing: border-box;
width: 607px;
diff --git a/src/views/farm/index.vue b/src/views/farm/index.vue
index 3b3becc..fdd2744 100644
--- a/src/views/farm/index.vue
+++ b/src/views/farm/index.vue
@@ -402,7 +402,7 @@
/>
</template>
<template slot="public-box-content">
- <div class="publicStaBox" v-show="isShowpublicStaBox">
+ <div class="publicStaBox">
<!-- 气象监测 -->
<div
class="item"
@@ -1038,7 +1038,6 @@
vidInfo: {}, // 视频数据
staInfo: {}, // 监测数据
stationData: {}, // 监测详细数据
- isShowpublicStaBox: false,
}
},
created () {
@@ -1218,19 +1217,20 @@
},
// 跳转 监测 设备详情窗口
goToDetail (item) {
+ this.jcIndex = 0
+ this.echartIsShow = false
this.staInfo = item
- let loadingInstance = Loading.service({ fullscreen: false, target: '.publicStaBox', text: '正在加载数据...', background: '#091a2b' })
- this.getStationDateByStcd(item.stcd)
+ this.stationData = {}
+ this.staionDetail = true
+ let loadingInstance = Loading.service({ fullscreen: false, target: '.publicStaBox', text: '正在加载数据...', background: 'rgba(25, 67, 94,0.5)' })
this.$nextTick(() => {
setTimeout(() => {
loadingInstance.close()
- }, 1000)
+ }, 300)
})
- this.staionDetail = true
setTimeout(() => {
- this.isShowpublicStaBox = true
- }, 1000)
-
+ this.getStationDateByStcd(item.stcd)
+ }, 400)
},
// 跳转 监控 设备详情窗口
goToJkDetail (item) {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a7e4ba0..616201a 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -336,7 +336,12 @@
<template slot="public-box-header">
<div class="logo"></div>
<div class="title">市场流通</div>
- <img @click="cityShow = false" src="../../../public/img/icon/public-close.png" alt class="close" />
+ <img
+ @click="cityShow = false"
+ src="../../../public/img/icon/public-close.png"
+ alt
+ class="close"
+ />
</template>
<template slot="public-box-content">
<div class="market-title">
@@ -564,132 +569,562 @@
/>
</template>
<template slot="public-box-content">
- <!-- 气象监测 -->
- <div
- class="item"
- v-for="(item, staListIndex) in stationData.weatherList"
- :key="'weatherList' + staListIndex"
- >
- <div class="itemTitle">
- <img src="../../../public/img/icon/icon_3788.png" alt />
- <div class="type">
- <h1>{{item.name}}</h1>
- <span>单位：{{item.unit}}</span>
+ <div class="publicStaBox">
+ <!-- 气象监测 -->
+ <div
+ class="item"
+ v-for="(item, staListIndex) in stationData.weatherList"
+ :key="'weatherList' + staListIndex"
+ >
+ <div class="itemTitle">
+ <img
+ v-if="item.name == '水隔离子'"
+ src="../../../public/img/staListIcon/NH4.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '雨量'"
+ src="../../../public/img/staListIcon/rain.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '土壤电导率'"
+ src="../../../public/img/staListIcon/soli-ele.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水电导率'"
+ src="../../../public/img/staListIcon/soli-ele.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '雨量累计'"
+ src="../../../public/img/staListIcon/rain.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '空气湿度'"
+ src="../../../public/img/staListIcon/soli-water.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '风向'"
+ src="../../../public/img/staListIcon/wind.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'EC'"
+ src="../../../public/img/staListIcon/EC.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '钾离子'"
+ src="../../../public/img/staListIcon/K.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '酸碱度'"
+ src="../../../public/img/staListIcon/PH.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '土壤温度'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '空气温度'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '硝酸银'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水铜离子'"
+ src="../../../public/img/staListIcon/CU2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水铅离子'"
+ src="../../../public/img/staListIcon/PB2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水镉离子'"
+ src="../../../public/img/staListIcon/CD2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'PM2.5'"
+ src="../../../public/img/staListIcon/PM25.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '气压'"
+ src="../../../public/img/staListIcon/pressure.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '光照度'"
+ src="../../../public/img/staListIcon/light.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '风速'"
+ src="../../../public/img/staListIcon/windSpeed.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'CO2'"
+ src="../../../public/img/staListIcon/CO2.png"
+ alt
+ />
+ <img v-else src="../../../public/img/icon/wd-icon.png" alt />
+ <div class="type">
+ <h1>{{item.name}}</h1>
+ <span>单位：{{item.unit}}</span>
+ </div>
+ <div
+ class="data"
+ >{{item.valueDataList[item.valueDataList.length-1].value}}</div>
+ <img
+ src="../../../public/img/icon/up_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,null)"
+ v-if="echartIsShow && jcIndex == staListIndex"
+ alt
+ />
+ <img
+ src="../../../public/img/icon/down_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,item)"
+ v-else
+ alt
+ />
</div>
- <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
- <img
- src="../../../public/img/icon/up_menu.png"
- class="openMenuIcon"
- @click="showEchart(staListIndex,null)"
- v-if="echartIsShow && jcIndex == staListIndex"
- alt
- />
- <img
- src="../../../public/img/icon/down_menu.png"
- class="openMenuIcon"
- @click="showEchart(staListIndex,item)"
- v-else
- alt
- />
- </div>
- <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
- <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
- </div>
- </div>
- <!-- 土壤监测 -->
- <div
- class="item"
- v-for="(item, staListIndex) in stationData.soliList"
- :key="'soliList' + staListIndex"
- >
- <div class="itemTitle">
- <img src="../../../public/img/icon/icon_3788.png" alt />
- <div class="type">
- <h1>{{item.name}}</h1>
- <span>单位：{{item.unit}}</span>
+ <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
+ <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
</div>
- <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
- <img
- src="../../../public/img/icon/up_menu.png"
- class="openMenuIcon"
- @click="showEchart(staListIndex,null)"
- v-if="echartIsShow && jcIndex == staListIndex"
- alt
- />
- <img
- src="../../../public/img/icon/down_menu.png"
- class="openMenuIcon"
- @click="showEchart(staListIndex,item)"
- v-else
- alt
- />
</div>
- <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
- <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
- </div>
- </div>
- <!-- 空气监测 -->
- <div
- class="item"
- v-for="(item, staListIndex) in stationData.airList"
- :key="'airList' + staListIndex"
- >
- <div class="itemTitle">
- <img src="../../../public/img/icon/icon_3788.png" alt />
- <div class="type">
- <h1>{{item.name}}</h1>
- <span>单位：{{item.unit}}</span>
+ <!-- 土壤监测 -->
+ <div
+ class="item"
+ v-for="(item, staListIndex) in stationData.soliList"
+ :key="'soliList' + staListIndex"
+ >
+ <div class="itemTitle">
+ <img
+ v-if="item.name == '水隔离子'"
+ src="../../../public/img/staListIcon/NH4.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '雨量'"
+ src="../../../public/img/staListIcon/rain.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '土壤电导率'"
+ src="../../../public/img/staListIcon/soli-ele.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水电导率'"
+ src="../../../public/img/staListIcon/soli-ele.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '雨量累计'"
+ src="../../../public/img/staListIcon/rain.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '空气湿度'"
+ src="../../../public/img/staListIcon/soli-water.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '风向'"
+ src="../../../public/img/staListIcon/wind.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'EC'"
+ src="../../../public/img/staListIcon/EC.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '钾离子'"
+ src="../../../public/img/staListIcon/K.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '酸碱度'"
+ src="../../../public/img/staListIcon/PH.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '土壤温度'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '空气温度'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '硝酸银'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水铜离子'"
+ src="../../../public/img/staListIcon/CU2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水铅离子'"
+ src="../../../public/img/staListIcon/PB2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水镉离子'"
+ src="../../../public/img/staListIcon/CD2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'PM2.5'"
+ src="../../../public/img/staListIcon/PM25.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '气压'"
+ src="../../../public/img/staListIcon/pressure.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '光照度'"
+ src="../../../public/img/staListIcon/light.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '风速'"
+ src="../../../public/img/staListIcon/windSpeed.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'CO2'"
+ src="../../../public/img/staListIcon/CO2.png"
+ alt
+ />
+ <img v-else src="../../../public/img/icon/wd-icon.png" alt />
+ <div class="type">
+ <h1>{{item.name}}</h1>
+ <span>单位：{{item.unit}}</span>
+ </div>
+ <div
+ class="data"
+ >{{item.valueDataList[item.valueDataList.length-1].value}}</div>
+ <img
+ src="../../../public/img/icon/up_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,null)"
+ v-if="echartIsShow && jcIndex == staListIndex"
+ alt
+ />
+ <img
+ src="../../../public/img/icon/down_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,item)"
+ v-else
+ alt
+ />
</div>
- <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
- <img
- src="../../../public/img/icon/up_menu.png"
- class="openMenuIcon"
- @click="showEchart(staListIndex,null)"
- v-if="echartIsShow && jcIndex == staListIndex"
- alt
- />
- <img
- src="../../../public/img/icon/down_menu.png"
- class="openMenuIcon"
- @click="showEchart(staListIndex,item)"
- v-else
- alt
- />
- </div>
- <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
- <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
- </div>
- </div>
- <!-- 水质监测 -->
- <div
- class="item"
- v-for="(item, staListIndex) in stationData.waterList"
- :key="'waterList' + staListIndex"
- >
- <div class="itemTitle">
- <img src="../../../public/img/icon/icon_3788.png" alt />
- <div class="type">
- <h1>{{item.name}}</h1>
- <span>单位：{{item.unit}}</span>
+ <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
+ <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
</div>
- <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
- <img
- src="../../../public/img/icon/up_menu.png"
- class="openMenuIcon"
- @click="showEchart(staListIndex,null)"
- v-if="echartIsShow && jcIndex == staListIndex"
- alt
- />
- <img
- src="../../../public/img/icon/down_menu.png"
- class="openMenuIcon"
- @click="showEchart(staListIndex,item)"
- v-else
- alt
- />
</div>
- <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
- <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
+ <!-- 空气监测 -->
+ <div
+ class="item"
+ v-for="(item, staListIndex) in stationData.airList"
+ :key="'airList' + staListIndex"
+ >
+ <div class="itemTitle">
+ <img
+ v-if="item.name == '水隔离子'"
+ src="../../../public/img/staListIcon/NH4.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '雨量'"
+ src="../../../public/img/staListIcon/rain.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '土壤电导率'"
+ src="../../../public/img/staListIcon/soli-ele.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水电导率'"
+ src="../../../public/img/staListIcon/soli-ele.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '雨量累计'"
+ src="../../../public/img/staListIcon/rain.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '空气湿度'"
+ src="../../../public/img/staListIcon/soli-water.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '风向'"
+ src="../../../public/img/staListIcon/wind.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'EC'"
+ src="../../../public/img/staListIcon/EC.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '钾离子'"
+ src="../../../public/img/staListIcon/K.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '酸碱度'"
+ src="../../../public/img/staListIcon/PH.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '土壤温度'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '空气温度'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '硝酸银'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水铜离子'"
+ src="../../../public/img/staListIcon/CU2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水铅离子'"
+ src="../../../public/img/staListIcon/PB2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水镉离子'"
+ src="../../../public/img/staListIcon/CD2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'PM2.5'"
+ src="../../../public/img/staListIcon/PM25.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '气压'"
+ src="../../../public/img/staListIcon/pressure.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '光照度'"
+ src="../../../public/img/staListIcon/light.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '风速'"
+ src="../../../public/img/staListIcon/windSpeed.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'CO2'"
+ src="../../../public/img/staListIcon/CO2.png"
+ alt
+ />
+ <img v-else src="../../../public/img/icon/wd-icon.png" alt />
+ <div class="type">
+ <h1>{{item.name}}</h1>
+ <span>单位：{{item.unit}}</span>
+ </div>
+ <div
+ class="data"
+ >{{item.valueDataList[item.valueDataList.length-1].value}}</div>
+ <img
+ src="../../../public/img/icon/up_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,null)"
+ v-if="echartIsShow && jcIndex == staListIndex"
+ alt
+ />
+ <img
+ src="../../../public/img/icon/down_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,item)"
+ v-else
+ alt
+ />
+ </div>
+ <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
+ <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
+ </div>
+ </div>
+ <!-- 水质监测 -->
+ <div
+ class="item"
+ v-for="(item, staListIndex) in stationData.waterList"
+ :key="'waterList' + staListIndex"
+ >
+ <div class="itemTitle">
+ <img
+ v-if="item.name == '水隔离子'"
+ src="../../../public/img/staListIcon/NH4.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '雨量'"
+ src="../../../public/img/staListIcon/rain.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '土壤电导率'"
+ src="../../../public/img/staListIcon/soli-ele.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水电导率'"
+ src="../../../public/img/staListIcon/soli-ele.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '雨量累计'"
+ src="../../../public/img/staListIcon/rain.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '空气湿度'"
+ src="../../../public/img/staListIcon/soli-water.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '风向'"
+ src="../../../public/img/staListIcon/wind.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'EC'"
+ src="../../../public/img/staListIcon/EC.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '钾离子'"
+ src="../../../public/img/staListIcon/K.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '酸碱度'"
+ src="../../../public/img/staListIcon/PH.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '土壤温度'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '空气温度'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '硝酸银'"
+ src="../../../public/img/staListIcon/soil-temperature.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水铜离子'"
+ src="../../../public/img/staListIcon/CU2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水铅离子'"
+ src="../../../public/img/staListIcon/PB2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '水镉离子'"
+ src="../../../public/img/staListIcon/CD2.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'PM2.5'"
+ src="../../../public/img/staListIcon/PM25.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '气压'"
+ src="../../../public/img/staListIcon/pressure.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '光照度'"
+ src="../../../public/img/staListIcon/light.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == '风速'"
+ src="../../../public/img/staListIcon/windSpeed.png"
+ alt
+ />
+ <img
+ v-else-if="item.name == 'CO2'"
+ src="../../../public/img/staListIcon/CO2.png"
+ alt
+ />
+ <img v-else src="../../../public/img/icon/wd-icon.png" alt />
+ <div class="type">
+ <h1>{{item.name}}</h1>
+ <span>单位：{{item.unit}}</span>
+ </div>
+ <div
+ class="data"
+ >{{item.valueDataList[item.valueDataList.length-1].value}}</div>
+ <img
+ src="../../../public/img/icon/up_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,null)"
+ v-if="echartIsShow && jcIndex == staListIndex"
+ alt
+ />
+ <img
+ src="../../../public/img/icon/down_menu.png"
+ class="openMenuIcon"
+ @click="showEchart(staListIndex,item)"
+ v-else
+ alt
+ />
+ </div>
+ <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
+ <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
+ </div>
</div>
</div>
</template>
@@ -817,6 +1252,7 @@
import { getStationDateByStcd } from '@/api/equipment/equipment'
import flvjs from 'flv.js'
import dateUtilsJs from '@/utils/dateUtils'
+import { Loading } from 'element-ui'
export default {
data () {
@@ -839,7 +1275,7 @@
marketDistrict: [],
farm: {},
scSelectTime: '',
- nsSelectTime: [dateUtilsJs.getSpecifyDayDate(30),dateUtilsJs.getToDay()],
+ nsSelectTime: [dateUtilsJs.getSpecifyDayDate(30), dateUtilsJs.getToDay()],
scStartTime: '',
scEndTime: '',
ncListShow: false,
@@ -1612,9 +2048,20 @@
},
// 跳转 监测 设备详情窗口
goToDetail (item) {
+ this.jcIndex = 0
+ this.echartIsShow = false
this.staInfo = item
- this.getStationDateByStcd(item.stcd)
+ this.stationData = {}
this.staionDetail = true
+ let loadingInstance = Loading.service({ fullscreen: false, target: '.publicStaBox', text: '正在加载数据...', background: 'rgba(25, 67, 94,0.5)' })
+ this.$nextTick(() => {
+ setTimeout(() => {
+ loadingInstance.close()
+ }, 300)
+ })
+ setTimeout(() => {
+ this.getStationDateByStcd(item.stcd)
+ }, 400)
},
// 根据设备号获取监测数据
getStationDateByStcd (stcd) {
@@ -1972,6 +2419,7 @@
+
}
}
</script>
@@ -2031,7 +2479,8 @@
.log {
left: auto;
right: 0;
- background: url(../../../public/img/icon/nc-num.png) no-repeat;
+ background: url(../../../public/img/icon/nc-num.png)
+ no-repeat;
}
.t-l,
@@ -2065,7 +2514,8 @@
.log {
left: 0;
right: auto;
- background: url(../../../public/img/icon/pel-num.png) no-repeat;
+ background: url(../../../public/img/icon/pel-num.png)
+ no-repeat;
}
.t-l,
@@ -2504,7 +2954,8 @@
margin-left: 16px;
width: 10px;
height: 14px;
- background: url(../../../public/img/icon/l-icon.png) no-repeat;
+ background: url(../../../public/img/icon/l-icon.png)
+ no-repeat;
background-size: 100% 100%;
}
@@ -2518,7 +2969,8 @@
right: -54px;
width: 74px;
height: 19px;
- background: url(../../../public/img/icon/r-icon.png) no-repeat;
+ background: url(../../../public/img/icon/r-icon.png)
+ no-repeat;
background-size: 100% 100%;
}
@@ -2528,7 +2980,8 @@
bottom: 0;
width: 378px;
height: 5px;
- background: url(../../../public/img/icon/line.png) no-repeat;
+ background: url(../../../public/img/icon/line.png)
+ no-repeat;
background-size: 100% 100%;
}
@@ -2538,7 +2991,8 @@
bottom: 0;
width: 20px;
height: 3px;
- background: url(../../../public/img/icon/r-line.png) no-repeat;
+ background: url(../../../public/img/icon/r-line.png)
+ no-repeat;
background-size: 100% 100%;
}
}
--
Gitblit v1.9.3