Skip to content

S
SmartAgricWeb
Commit 9aa4cde5 authored by zhanglw's avatar zhanglw
Browse files
Options

x

parent edd05f12
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 23 deletions
src/api/common.js
View file @ 9aa4cde5
...@@ -56,7 +56,12 @@ export const HttpReq = { ...@@ -56,7 +56,12 @@ export const HttpReq = {
dynamic: function(params) { dynamic: function(params) {
return request({ return request({
url: 'api/dynamic?' + qs.stringify(params, { indices: false }), url: 'api/dynamic?' + qs.stringify(params, { indices: false }),
dataType: 'json', method: 'get'
})
},
findDevicesByProjectId: function(params) {
return request({
url: 'api/dynamic/findDevicesByProjectId?' + qs.stringify(params, { indices: false }),
method: 'get' method: 'get'
}) })
}, },
......
src/views/daping.vue
View file @ 9aa4cde5
...@@ -37,11 +37,12 @@ ...@@ -37,11 +37,12 @@
</div> </div>
</div> </div>
<div class="box_div"> <div class="box_div">
<div class="box_title"><span class="touch" @click="visible=!visible">{{ currentBase.proName }}基地设备实时监测<a style="font-size:16px;vertical-align: top"> ▼ </a></span></div> <div class="box_title"><span class="touch" @click="vDataObj2.visible=!vDataObj2.visible">设备实时监测<a v-if="vDataObj2.list[vDataObj2.index]" style="font-size:16px;vertical-align: top"> {{ vDataObj2.list[vDataObj2.index].name }} ▼ </a></span></div>
<div class="select-box"> <div class="select-box">
<ul v-show="visible"> <ul v-show="vDataObj2.visible">
<li v-for="(item,index) in vDataMap.proListInfo" :key="index" :class="currentBase===item?'active':''" class="touch" @click="changeItem(item,index)"> <li v-for="(item,index) in vDataObj2.list" :key="'co2'+index" :class="vDataObj2.list[vDataObj2.index]===item?'active':''" class="touch" @click="changeChartItem(vDataObj2,index)">
{{ item.proName }} <span v-if="item.online">{{ item.name }}（在线）</span>
<span v-else class="translucent">{{ item.name }}（离线）</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -51,63 +52,63 @@ ...@@ -51,63 +52,63 @@
<li> <li>
<div> <div>
<span v-if="vData2.connectionStatus" style="font-weight: 400;color: white">已连接</span> <span v-if="vData2.connectionStatus" style="font-weight: 400;color: white">已连接</span>
<span v-else style="font-weight: 400;color: #c3c3c3">未连接</span> <span v-else style="font-weight: 400;color: #b7b7b7">未连接</span>
<font>&nbsp;</font> <font>&nbsp;</font>
</div> </div>
<p>连接状态</p> <p>连接状态</p>
</li> </li>
<li> <li>
<div> <div>
<span>{{ vData2.soilMoisture||'-' }}</span> <span>{{ vData2.soilMoisture||'—' }}</span>
<font>%</font> <font>%</font>
</div> </div>
<p>土壤湿度</p> <p>土壤湿度</p>
</li> </li>
<li> <li>
<div> <div>
<span style="color:#FFBB2E">{{ vData2.soilTemperature||'-' }}</span> <span style="color:#FFBB2E">{{ vData2.soilTemperature||'—' }}</span>
<font>°C</font> <font>°C</font>
</div> </div>
<p>土壤温度</p> <p>土壤温度</p>
</li> </li>
<li> <li>
<div> <div>
<span style="color:#FFBB2E">{{ vData2.tsp||'-' }}</span> <span style="color:#FFBB2E">{{ vData2.tsp||'—' }}</span>
<font>ug/m3</font> <font>ug/m3</font>
</div> </div>
<p>TSP</p> <p>TSP</p>
</li> </li>
<li> <li>
<div> <div>
<span>{{ vData2.windSpeed||'-' }}</span> <span>{{ vData2.windSpeed||'—' }}</span>
<font>m/s</font> <font>m/s</font>
</div> </div>
<p>风速</p> <p>风速</p>
</li> </li>
<li> <li>
<div> <div>
<span style="color:#FF547C">{{ vData2.windDirection||'-' }}</span> <span style="color:#FF547C">{{ vData2.windDirection||'—' }}</span>
<font>风</font> <font>风</font>
</div> </div>
<p>风向</p> <p>风向</p>
</li> </li>
<li> <li>
<div> <div>
<span style="color:#FFBB2E">{{ vData2.airTemperature||'-' }}</span> <span style="color:#FFBB2E">{{ vData2.airTemperature||'—' }}</span>
<font>°C</font> <font>°C</font>
</div> </div>
<p>空气温度</p> <p>空气温度</p>
</li> </li>
<li> <li>
<div> <div>
<span>{{ vData2.airHumidity||'-' }}</span> <span>{{ vData2.airHumidity||'—' }}</span>
<font>%</font> <font>%</font>
</div> </div>
<p>空气湿度</p> <p>空气湿度</p>
</li> </li>
<li> <li>
<div> <div>
<span style="color:#FF547C">{{ vData2.atmosphericPressure||'-' }}</span> <span style="color:#FF547C">{{ vData2.atmosphericPressure||'—' }}</span>
<font>kpa</font> <font>kpa</font>
</div> </div>
<p>大气压</p> <p>大气压</p>
...@@ -211,15 +212,39 @@ ...@@ -211,15 +212,39 @@
<div ref="chart2" class="chart_box"/> <div ref="chart2" class="chart_box"/>
</div> </div>
<div class="box_div"> <div class="box_div">
<div class="box_title"><span>土壤水分监测</span></div> <div class="box_title"><span class="touch" @click="chartData3.visible=!chartData3.visible">土壤水分监测<a v-if="chartData3.list[chartData3.index]" style="font-size:16px;vertical-align: top"> {{ chartData3.list[chartData3.index].name }} ▼ </a></span></div>
<div class="select-box">
<ul v-show="chartData3.visible">
<li v-for="(item,index) in chartData3.list" :key="'co2'+index" :class="chartData3.list[chartData3.index]===item?'active':''" class="touch" @click="changeChartItem(chartData3,index)">
<span v-if="item.online">{{ item.name }}（在线）</span>
<span v-else class="translucent">{{ item.name }}（离线）</span>
</li>
</ul>
</div>
<div ref="chart3" class="chart_box"/> <div ref="chart3" class="chart_box"/>
</div> </div>
<div class="box_div"> <div class="box_div">
<div class="box_title"><span>温湿度气象监测</span></div> <div class="box_title"><span class="touch" @click="chartData4.visible=!chartData4.visible">温湿度气象监测<a v-if="chartData4.list[chartData4.index]" style="font-size:16px;vertical-align: top"> {{ chartData4.list[chartData4.index].name }} ▼ </a></span></div>
<div class="select-box">
<ul v-show="chartData4.visible">
<li v-for="(item,index) in chartData4.list" :key="'co2'+index" :class="chartData4.list[chartData4.index]===item?'active':''" class="touch" @click="changeChartItem(chartData4,index)">
<span v-if="item.online">{{ item.name }}（在线）</span>
<span v-else class="translucent">{{ item.name }}（离线）</span>
</li>
</ul>
</div>
<div ref="chart4" class="chart_box"/> <div ref="chart4" class="chart_box"/>
</div> </div>
<div class="box_div"> <div class="box_div">
<div class="box_title"><span>二氧化碳室外气象监测</span></div> <div class="box_title"><span class="touch" @click="chartData5.visible=!chartData5.visible">二氧化碳室外气象监测<a v-if="chartData5.list[chartData5.index]" style="font-size:16px;vertical-align: top"> {{ chartData5.list[chartData5.index].name }} ▼ </a></span></div>
<div class="select-box">
<ul v-show="chartData5.visible">
<li v-for="(item,index) in chartData5.list" :key="'co2'+index" :class="chartData5.list[chartData5.index]===item?'active':''" class="touch" @click="changeChartItem(chartData5,index)">
<span v-if="item.online">{{ item.name }}（在线）</span>
<span v-else class="translucent">{{ item.name }}（离线）</span>
</li>
</ul>
</div>
<div ref="chart5" class="chart_box"/> <div ref="chart5" class="chart_box"/>
</div> </div>
</div> </div>
...@@ -235,7 +260,6 @@ import enterpriseImg from '@/assets/home/enterpriseImg.png' ...@@ -235,7 +260,6 @@ import enterpriseImg from '@/assets/home/enterpriseImg.png'
import linePoint from '@/assets/home/point.png' import linePoint from '@/assets/home/point.png'
import { HttpReq } from '@/api/common' import { HttpReq } from '@/api/common'
import mark from '@/assets/home/mark.png' import mark from '@/assets/home/mark.png'
import { randNormality } from '../utils'
export default { export default {
data() { data() {
...@@ -249,6 +273,12 @@ export default { ...@@ -249,6 +273,12 @@ export default {
name: '' name: ''
}, },
vData1: {}, vData1: {},
vDataObj2: {
index: 0,
list: [],
visible: false,
drawFnName: 'initVData2'
},
vData2: {}, vData2: {},
vData34: { vData34: {
realTimeAlarm: [], realTimeAlarm: [],
...@@ -262,6 +292,24 @@ export default { ...@@ -262,6 +292,24 @@ export default {
chart3: null, chart3: null,
chart4: null, chart4: null,
chart5: null, chart5: null,
chartData3: {
index: 0,
list: [],
visible: false,
drawFnName: 'initChart3'
},
chartData4: {
index: 0,
list: [],
visible: false,
drawFnName: 'initChart4'
},
chartData5: {
index: 0,
list: [],
visible: false,
drawFnName: 'initChart5'
},
querySocketTimer: null querySocketTimer: null
} }
}, },
...@@ -292,21 +340,50 @@ export default { ...@@ -292,21 +340,50 @@ export default {
this.currenIndex = index this.currenIndex = index
this.visible = false this.visible = false
this.mapDom.setCenter([this.currentBase.proLng, this.currentBase.proLat]) this.mapDom.setCenter([this.currentBase.proLng, this.currentBase.proLat])
this.vDataObj2 = {
index: 0,
list: [],
visible: false,
drawFnName: 'initVData2'
}
this.chartData3 = {
index: 0,
list: [],
visible: false,
drawFnName: 'initChart3'
}
this.chartData4 = {
index: 0,
list: [],
visible: false,
drawFnName: 'initChart4'
}
this.chartData5 = {
index: 0,
list: [],
visible: false,
drawFnName: 'initChart5'
}
this.loadData() this.loadData()
}, },
changeChartItem(dataObj, index) {
dataObj.index = index
dataObj.visible = false
this[dataObj.drawFnName](dataObj.list[dataObj.index])
},
loadData() { loadData() {
this.$nextTick(() => { this.$nextTick(() => {
HttpReq.webClientApi.population({}).then((res) => { HttpReq.webClientApi.population({}).then((res) => {
this.vData1 = res.data.equipmentMonitoringStatus this.vData1 = res.data.equipmentMonitoringStatus
this.vData34 = res.data this.vData34 = res.data
}) })
HttpReq.webClientApi.dynamic({}).then((res) => { HttpReq.webClientApi.dynamic({ proId: this.currentBase.proId }).then((res) => {
const d = res.data const d = res.data
this.vData2 = d['equipmentMonitoringDto'] this.vDataObj2.list = d['allDevices']
this.initChart2(d['meteorologicalMonitoring']) this.initChart2(d['meteorologicalMonitoring'])
// this.initChart3(d['soilMonitoring']) this.chartData3.list = d['soilDevices']
// this.initChart4(d['temperatureAndHumidityMonitoring']) this.chartData4.list = d['wsdDevices']
// this.initChart5(d['co2Monitoring']) this.chartData5.list = d['co2Devices']
}) })
}) })
}, },
...@@ -335,6 +412,9 @@ export default { ...@@ -335,6 +412,9 @@ export default {
} }
/* eslint-enable */ /* eslint-enable */
}, },
initVData2(item) {
console.log(item)
},
initChart1() { initChart1() {
this.chart1 = echarts.init(this.$refs.chart1, 'macarons') this.chart1 = echarts.init(this.$refs.chart1, 'macarons')
const dataX = this.vDataMap.proListInfo.map((item) => { return item.proName }) const dataX = this.vDataMap.proListInfo.map((item) => { return item.proName })
...@@ -1303,6 +1383,9 @@ export default { ...@@ -1303,6 +1383,9 @@ export default {
.touch { .touch {
cursor:pointer; cursor:pointer;
} }
.translucent {
opacity: 0.6;
}
.chart_box { .chart_box {
width: 100%; width: 100%;
height: 170px; height: 170px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment