Skip to content

S
SmartAgricWeb
Commit 901c74f9 authored by zhanglw's avatar zhanglw
Browse files
Options

大屏

parent 9aa4cde5
Show whitespace changes
Inline Side-by-side
Showing with 471 additions and 556 deletions
src/api/common.js
View file @ 901c74f9
......@@ -59,9 +59,9 @@ export const HttpReq = {
method: 'get'
})
},
findDevicesByProjectId: function(params) {
findDataByDeviceId: function(params) {
return request({
url: 'api/dynamic/findDevicesByProjectId?' + qs.stringify(params, { indices: false }),
url: 'api/dynamic/findDataByDeviceId?' + qs.stringify(params, { indices: false }),
method: 'get'
})
},
......
src/views/daping.vue
View file @ 901c74f9
......@@ -12,7 +12,7 @@
<div class="label">
<span>设备总数</span>
</div>
<div class="val">{{ vData1.equipmentNumbers }}</div>
<div class="val">{{ vData1.equipmentNumbers }}&nbsp;</div>
</li>
<li>
<div class="label">
......@@ -24,13 +24,13 @@
<div class="label">
<span>设备在线</span>
</div>
<div class="val">{{ vData1.onlineNumbers }}</div>
<div class="val">{{ vData1.onlineNumbers }}&nbsp;</div>
</li>
<li>
<div class="label">
<span>设备离线</span>
</div>
<div class="val">{{ vData1.offlineNumbers }}</div>
<div class="val">{{ vData1.offlineNumbers }}&nbsp;</div>
</li>
</ul>
</div>
......@@ -51,7 +51,7 @@
<ul>
<li>
<div>
<span v-if="vData2.connectionStatus" style="font-weight: 400;color: white">已连接</span>
<span v-if="vData2.online" style="font-weight: 400;color: white">已连接</span>
<span v-else style="font-weight: 400;color: #b7b7b7">未连接</span>
<font>&nbsp;</font>
</div>
......@@ -59,14 +59,14 @@
</li>
<li>
<div>
<span>{{ vData2.soilMoisture||'—' }}</span>
<span>{{ vData2.soilSd||'—' }}</span>
<font>%</font>
</div>
<p>土壤湿度</p>
</li>
<li>
<div>
<span style="color:#FFBB2E">{{ vData2.soilTemperature||'—' }}</span>
<span style="color:#FFBB2E">{{ vData2.soilWd||'—' }}</span>
<font>°C</font>
</div>
<p>土壤温度</p>
......@@ -80,35 +80,35 @@
</li>
<li>
<div>
<span>{{ vData2.windSpeed||'—' }}</span>
<span>{{ vData2.fs||'—' }}</span>
<font>m/s</font>
</div>
<p>风速</p>
</li>
<li>
<div>
<span style="color:#FF547C">{{ vData2.windDirection||'—' }}</span>
<span style="color:#FF547C">{{ vData2.fx||'—' }}</span>
<font>风</font>
</div>
<p>风向</p>
</li>
<li>
<div>
<span style="color:#FFBB2E">{{ vData2.airTemperature||'—' }}</span>
<span style="color:#FFBB2E">{{ vData2.wd||'—' }}</span>
<font>°C</font>
</div>
<p>空气温度</p>
<p>温度</p>
</li>
<li>
<div>
<span>{{ vData2.airHumidity||'—' }}</span>
<span>{{ vData2.sd||'—' }}</span>
<font>%</font>
</div>
<p>空气湿度</p>
<p>湿度</p>
</li>
<li>
<div>
<span style="color:#FF547C">{{ vData2.atmosphericPressure||'—' }}</span>
<span style="color:#FF547C">{{ vData2.dqy||'—' }}</span>
<font>kpa</font>
</div>
<p>大气压</p>
......@@ -119,7 +119,8 @@
</div>
<div class="box_div">
<div class="box_title"><span>近一个月基地设备报警统计</span></div>
<div class="ct-box-3" style="height:160px;overflow:auto;padding-bottom:8px">
<div style="height:160px;overflow:auto;padding-bottom:8px">
<div class="ct-box-3">
<div class="ctn">
<ul>
<li v-for="(item,index) in vData34.alarmList" :key="'ak_'+index">
......@@ -132,6 +133,7 @@
</div>
</div>
</div>
</div>
<div class="box_div">
<div class="box_title"><span>基地设备实时报警列表</span></div>
<div class="ct-box-4">
......@@ -216,8 +218,8 @@
<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>
<span v-if="item.online">{{ item.name }}{{ item.deviceId?'（在线）':'' }}</span>
<span v-else class="translucent">{{ item.name }}{{ item.deviceId?'（离线）':'' }}</span>
</li>
</ul>
</div>
......@@ -264,6 +266,8 @@ import mark from '@/assets/home/mark.png'
export default {
data() {
return {
colors: ['#10adff', '#8ED1FC', '#3BF6EC', '#00FC0C', '#FFEA00',
'#a8ff10', '#FFEA00', '#FF7534', '#ff1010'],
title: '智慧农业综合管理一张图',
imgSrc: enterpriseImg,
mapDom: null,
......@@ -324,7 +328,7 @@ export default {
this.loadData()
this.querySocketTimer = setInterval(() => {
this.loadData()
}, 30000)
}, 60000)
})
})
},
......@@ -380,10 +384,14 @@ export default {
HttpReq.webClientApi.dynamic({ proId: this.currentBase.proId }).then((res) => {
const d = res.data
this.vDataObj2.list = d['allDevices']
this.changeChartItem(this.vDataObj2, this.vDataObj2.index)
this.initChart2(d['meteorologicalMonitoring'])
this.chartData3.list = d['soilDevices']
this.chartData4.list = d['wsdDevices']
this.chartData5.list = d['co2Devices']
this.chartData3.list = d['soilDevices'].length ? d['soilDevices'] : [{ name: '无设备', deviceId: 0 }]
this.changeChartItem(this.chartData3, this.chartData3.index)
this.chartData4.list = d['wsdDevices'].length ? d['wsdDevices'] : [{ name: '无设备', deviceId: 0 }]
this.changeChartItem(this.chartData4, this.chartData4.index)
this.chartData5.list = d['co2Devices'].length ? d['co2Devices'] : [{ name: '无设备', deviceId: 0 }]
this.changeChartItem(this.chartData5, this.chartData5.index)
})
})
},
......@@ -413,7 +421,14 @@ export default {
/* eslint-enable */
},
initVData2(item) {
console.log(item)
this.$nextTick(() => {
HttpReq.webClientApi.findDataByDeviceId({
flag: 4,
deviceId: item.deviceId
}).then((res) => {
this.vData2 = res.data
})
})
},
initChart1() {
this.chart1 = echarts.init(this.$refs.chart1, 'macarons')
......@@ -785,7 +800,16 @@ export default {
}
this.chart2.setOption(option)
},
initChart3(rData) {
initChart3(item) {
this.$nextTick(() => {
HttpReq.webClientApi.findDataByDeviceId({
flag: 1,
deviceId: item.deviceId
}).then((res) => {
const rData = res.data
if (this.chart3) {
this.chart3.dispose()
}
this.chart3 = echarts.init(this.$refs.chart3)
const labels = rData.timeList || []
const seriesData = []
......@@ -1002,8 +1026,58 @@ export default {
}
}
this.chart3.setOption(option)
})
})
},
initChart4(item) {
this.$nextTick(() => {
HttpReq.webClientApi.findDataByDeviceId({
flag: 2,
deviceId: item.deviceId
}).then((res) => {
const seriesList = []
res.data.forEach((devItem, index) => {
seriesList.push({
type: 'line',
name: devItem.item,
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: this.colors[index]
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.colors[index]
},
{
offset: 1,
color: '#666666'
}
],
false
),
shadowColor: '#666666',
shadowBlur: 20
}
},
initChart4(rData) {
data: devItem.data
})
})
if (this.chart4) {
this.chart4.dispose()
}
this.chart4 = echarts.init(this.$refs.chart4, 'macarons')
const count = 24
const dataX = []
......@@ -1068,91 +1142,30 @@ export default {
}
}
},
series: [
{
type: 'line',
name: '温度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#00B3DB'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#00B3DB',
shadowBlur: 20
}
},
data: rData.tempList
},
{
type: 'line',
name: '湿度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#9999FF'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#9999FF',
shadowBlur: 20
series: seriesList
}
this.chart4.setOption(option)
})
})
},
data: rData.humidityList
},
{
initChart5(item) {
this.$nextTick(() => {
HttpReq.webClientApi.findDataByDeviceId({
flag: 3,
deviceId: item.deviceId
}).then((res) => {
const seriesList = []
res.data.forEach((devItem, index) => {
seriesList.push({
type: 'line',
name: '光照',
name: devItem.item,
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#3BF6EC'
color: this.colors[index]
}
},
areaStyle: {
......@@ -1165,26 +1178,25 @@ export default {
[
{
offset: 0,
color: '#10b1fd4d'
color: this.colors[index]
},
{
offset: 1,
color: '#2bbffd00'
color: '#666666'
}
],
false
),
shadowColor: '#3BF6EC',
shadowColor: '#666666',
shadowBlur: 20
}
},
data: rData.illuminationList
}
]
data: devItem.data
})
})
if (this.chart5) {
this.chart5.dispose()
}
this.chart4.setOption(option)
},
initChart5(rData) {
this.chart5 = echarts.init(this.$refs.chart5, 'macarons')
const count = 24
const dataX = []
......@@ -1249,108 +1261,11 @@ export default {
}
}
},
series: [
{
type: 'line',
name: '二氧化碳',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#FFEA00'
}
},
data: rData.co2List
},
{
type: 'line',
name: '温度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#F23593'
}
},
data: rData.tempList
},
{
type: 'line',
name: '湿度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#00FC0C'
}
},
data: rData.humidityList
},
{
type: 'line',
name: '光照',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#10B1FD',
lineStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#0CF4FD'
},
{
offset: 1,
color: '#0954FD'
}
],
false
)
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#2BBFFD',
shadowBlur: 20
}
},
data: rData.illuminationList
}
]
series: seriesList
}
this.chart5.setOption(option)
})
})
}
}
}
......
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