Skip to content

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

大屏

parent 9aa4cde5
Hide 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 = { ...@@ -59,9 +59,9 @@ export const HttpReq = {
method: 'get' method: 'get'
}) })
}, },
findDevicesByProjectId: function(params) { findDataByDeviceId: function(params) {
return request({ return request({
url: 'api/dynamic/findDevicesByProjectId?' + qs.stringify(params, { indices: false }), url: 'api/dynamic/findDataByDeviceId?' + qs.stringify(params, { indices: false }),
method: 'get' method: 'get'
}) })
}, },
......
src/views/daping.vue
View file @ 901c74f9
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="label"> <div class="label">
<span>设备总数</span> <span>设备总数</span>
</div> </div>
<div class="val">{{ vData1.equipmentNumbers }}</div> <div class="val">{{ vData1.equipmentNumbers }}&nbsp;</div>
</li> </li>
<li> <li>
<div class="label"> <div class="label">
...@@ -24,13 +24,13 @@ ...@@ -24,13 +24,13 @@
<div class="label"> <div class="label">
<span>设备在线</span> <span>设备在线</span>
</div> </div>
<div class="val">{{ vData1.onlineNumbers }}</div> <div class="val">{{ vData1.onlineNumbers }}&nbsp;</div>
</li> </li>
<li> <li>
<div class="label"> <div class="label">
<span>设备离线</span> <span>设备离线</span>
</div> </div>
<div class="val">{{ vData1.offlineNumbers }}</div> <div class="val">{{ vData1.offlineNumbers }}&nbsp;</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<ul> <ul>
<li> <li>
<div> <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> <span v-else style="font-weight: 400;color: #b7b7b7">未连接</span>
<font>&nbsp;</font> <font>&nbsp;</font>
</div> </div>
...@@ -59,14 +59,14 @@ ...@@ -59,14 +59,14 @@
</li> </li>
<li> <li>
<div> <div>
<span>{{ vData2.soilMoisture||'—' }}</span> <span>{{ vData2.soilSd||'—' }}</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.soilWd||'—' }}</span>
<font>°C</font> <font>°C</font>
</div> </div>
<p>土壤温度</p> <p>土壤温度</p>
...@@ -80,35 +80,35 @@ ...@@ -80,35 +80,35 @@
</li> </li>
<li> <li>
<div> <div>
<span>{{ vData2.windSpeed||'—' }}</span> <span>{{ vData2.fs||'—' }}</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.fx||'—' }}</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.wd||'—' }}</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.sd||'—' }}</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.dqy||'—' }}</span>
<font>kpa</font> <font>kpa</font>
</div> </div>
<p>大气压</p> <p>大气压</p>
...@@ -119,16 +119,18 @@ ...@@ -119,16 +119,18 @@
</div> </div>
<div class="box_div"> <div class="box_div">
<div class="box_title"><span>近一个月基地设备报警统计</span></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="ctn"> <div class="ct-box-3">
<ul> <div class="ctn">
<li v-for="(item,index) in vData34.alarmList" :key="'ak_'+index"> <ul>
<div class="label"> <li v-for="(item,index) in vData34.alarmList" :key="'ak_'+index">
<span>{{ item.proName }}</span> <div class="label">
</div> <span>{{ item.proName }}</span>
<div class="val">{{ item.alarmNumber }}</div> </div>
</li> <div class="val">{{ item.alarmNumber }}</div>
</ul> </li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -216,8 +218,8 @@ ...@@ -216,8 +218,8 @@
<div class="select-box"> <div class="select-box">
<ul v-show="chartData3.visible"> <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)"> <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-if="item.online">{{ item.name }}{{ item.deviceId?'（在线）':'' }}</span>
<span v-else class="translucent">{{ item.name }}（离线）</span> <span v-else class="translucent">{{ item.name }}{{ item.deviceId?'（离线）':'' }}</span>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -264,6 +266,8 @@ import mark from '@/assets/home/mark.png' ...@@ -264,6 +266,8 @@ import mark from '@/assets/home/mark.png'
export default { export default {
data() { data() {
return { return {
colors: ['#10adff', '#8ED1FC', '#3BF6EC', '#00FC0C', '#FFEA00',
'#a8ff10', '#FFEA00', '#FF7534', '#ff1010'],
title: '智慧农业综合管理一张图', title: '智慧农业综合管理一张图',
imgSrc: enterpriseImg, imgSrc: enterpriseImg,
mapDom: null, mapDom: null,
...@@ -324,7 +328,7 @@ export default { ...@@ -324,7 +328,7 @@ export default {
this.loadData() this.loadData()
this.querySocketTimer = setInterval(() => { this.querySocketTimer = setInterval(() => {
this.loadData() this.loadData()
}, 30000) }, 60000)
}) })
}) })
}, },
...@@ -380,10 +384,14 @@ export default { ...@@ -380,10 +384,14 @@ export default {
HttpReq.webClientApi.dynamic({ proId: this.currentBase.proId }).then((res) => { HttpReq.webClientApi.dynamic({ proId: this.currentBase.proId }).then((res) => {
const d = res.data const d = res.data
this.vDataObj2.list = d['allDevices'] this.vDataObj2.list = d['allDevices']
this.changeChartItem(this.vDataObj2, this.vDataObj2.index)
this.initChart2(d['meteorologicalMonitoring']) this.initChart2(d['meteorologicalMonitoring'])
this.chartData3.list = d['soilDevices'] this.chartData3.list = d['soilDevices'].length ? d['soilDevices'] : [{ name: '无设备', deviceId: 0 }]
this.chartData4.list = d['wsdDevices'] this.changeChartItem(this.chartData3, this.chartData3.index)
this.chartData5.list = d['co2Devices'] 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 { ...@@ -413,7 +421,14 @@ export default {
/* eslint-enable */ /* eslint-enable */
}, },
initVData2(item) { initVData2(item) {
console.log(item) this.$nextTick(() => {
HttpReq.webClientApi.findDataByDeviceId({
flag: 4,
deviceId: item.deviceId
}).then((res) => {
this.vData2 = res.data
})
})
}, },
initChart1() { initChart1() {
this.chart1 = echarts.init(this.$refs.chart1, 'macarons') this.chart1 = echarts.init(this.$refs.chart1, 'macarons')
...@@ -785,524 +800,376 @@ export default { ...@@ -785,524 +800,376 @@ export default {
} }
this.chart2.setOption(option) this.chart2.setOption(option)
}, },
initChart3(rData) { initChart3(item) {
this.chart3 = echarts.init(this.$refs.chart3) this.$nextTick(() => {
const labels = rData.timeList || [] HttpReq.webClientApi.findDataByDeviceId({
const seriesData = [] flag: 1,
for (let i = 0; i < labels.length; i++) { deviceId: item.deviceId
seriesData.push({ }).then((res) => {
label: labels[i], const rData = res.data
value: [rData.data[i]] if (this.chart3) {
}) this.chart3.dispose()
}
const colors = [
[
{ offset: 0, color: 'rgba(26, 132, 191, 1)' },
{ offset: 1, color: 'rgba(52, 163, 224, 0.08)' }
],
[
{ offset: 0, color: 'rgba(137, 163, 164, 1)' },
{ offset: 1, color: 'rgba(137, 163, 164, 0.08)' }
],
[
{ offset: 0, color: 'rgba(44, 166, 166, 1)' },
{ offset: 1, color: 'rgba(44, 166, 166, 0.08)' }
],
[
{ offset: 0, color: 'rgba(126, 132, 191, 1)' },
{ offset: 1, color: 'rgba(52, 163, 224, 0.08)' }
],
[
{ offset: 0, color: 'rgba(137, 163, 64, 1)' },
{ offset: 1, color: 'rgba(137, 163, 164, 0.08)' }
],
[
{ offset: 0, color: 'rgba(34, 66, 186, 1)' },
{ offset: 1, color: 'rgba(34, 66, 186, 0.08)' }
],
[
{ offset: 0, color: 'rgba(144, 66, 166, 1)' },
{ offset: 1, color: 'rgba(44, 166, 166, 0.08)' }
]
]
const option = {
tooltip: {
trigger: 'item',
formatter: (params, ticket, callback) => {
return params.value
} }
}, this.chart3 = echarts.init(this.$refs.chart3)
grid: { const labels = rData.timeList || []
left: '8px', const seriesData = []
right: '8px', for (let i = 0; i < labels.length; i++) {
top: '8px', seriesData.push({
bottom: '8px', label: labels[i],
containLabel: true value: [rData.data[i]]
}, })
xAxis: {
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF',
align: 'left'
},
splitLine: {
show: false
},
data: labels
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
} }
}, const colors = [
series: getSeriesData() [
} { offset: 0, color: 'rgba(26, 132, 191, 1)' },
// 定义柱状图左侧图形元素 { offset: 1, color: 'rgba(52, 163, 224, 0.08)' }
const leftRect = echarts.graphic.extendShape({ ],
shape: { [
x: 0, { offset: 0, color: 'rgba(137, 163, 164, 1)' },
y: 0, { offset: 1, color: 'rgba(137, 163, 164, 0.08)' }
width: 19, // 柱状图宽 ],
zWidth: 8, // 阴影折角宽 [
zHeight: 4 // 阴影折角高 { offset: 0, color: 'rgba(44, 166, 166, 1)' },
}, { offset: 1, color: 'rgba(44, 166, 166, 0.08)' }
buildPath: function(ctx, shape) { ],
const api = shape.api [
const xAxisPoint = api.coord([shape.xValue, 0]) { offset: 0, color: 'rgba(126, 132, 191, 1)' },
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight] { offset: 1, color: 'rgba(52, 163, 224, 0.08)' }
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight] ],
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]] [
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]] { offset: 0, color: 'rgba(137, 163, 64, 1)' },
const p4 = [shape.x + shape.width / 2, shape.y] { offset: 1, color: 'rgba(137, 163, 164, 0.08)' }
],
ctx.moveTo(p0[0], p0[1]) [
ctx.lineTo(p1[0], p1[1]) { offset: 0, color: 'rgba(34, 66, 186, 1)' },
ctx.lineTo(p2[0], p2[1]) { offset: 1, color: 'rgba(34, 66, 186, 0.08)' }
ctx.lineTo(p3[0], p3[1]) ],
ctx.lineTo(p4[0], p4[1]) [
ctx.lineTo(p0[0], p0[1]) { offset: 0, color: 'rgba(144, 66, 166, 1)' },
ctx.closePath() { offset: 1, color: 'rgba(44, 166, 166, 0.08)' }
} ]
})
// 定义柱状图右侧以及顶部图形元素
const rightRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 18,
zWidth: 15,
zHeight: 8
},
buildPath: function(ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2]
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]]
const p4 = [shape.x + shape.width / 2, shape.y]
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]]
const p6 = [
shape.x + shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight / 2
]
const p7 = [
shape.x - shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight
] ]
ctx.moveTo(p4[0], p4[1]) const option = {
ctx.lineTo(p3[0], p3[1]) tooltip: {
ctx.lineTo(p5[0], p5[1]) trigger: 'item',
ctx.lineTo(p6[0], p6[1]) formatter: (params, ticket, callback) => {
ctx.lineTo(p4[0], p4[1]) return params.value
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p7[0], p7[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p4[0], p4[1])
ctx.closePath()
}
})
// 注册图形元素
echarts.graphic.registerShape('leftRect', leftRect)
echarts.graphic.registerShape('rightRect', rightRect)
function getSeriesData() {
const data = []
seriesData.forEach((item, index) => {
data.push(
{
type: 'custom',
name: item.label,
renderItem: function(params, api) {
return getRenderItem(params, api)
},
data: item.value,
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index])
}
} }
}
)
})
return data
}
function getRenderItem(params, api) {
const index = params.seriesIndex
const location = api.coord([api.value(0) + index, api.value(1)])
return {
type: 'group',
children: [
{
type: 'leftRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
}, },
{ grid: {
type: 'rightRect', left: '8px',
shape: { right: '8px',
api, top: '8px',
xValue: api.value(0) + index, bottom: '8px',
yValue: api.value(1), containLabel: true
x: location[0],
y: location[1]
},
style: api.style()
}
]
}
}
this.chart3.setOption(option)
},
initChart4(rData) {
this.chart4 = echarts.init(this.$refs.chart4, 'macarons')
const count = 24
const dataX = []
for (let i = 0; i < count; i++) {
dataX.push(i < 10 ? '0' + i + '时' : i + '时')
}
const option = {
tooltip: {
trigger: 'axis',
position: (point, params, dom, rect, size) => {
return [point[0], 10]
}
},
legend: {
textStyle: {
color: '#ffffff'
}
},
grid: {
left: '8px',
right: '8px',
top: '28px',
bottom: '8px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 2,
color: '#BFF7FF'
},
data: dataX
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
}
},
series: [
{
type: 'line',
name: '温度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#00B3DB'
}
}, },
areaStyle: { xAxis: {
normal: { axisLine: {
color: new echarts.graphic.LinearGradient( show: false,
0, lineStyle: {
0, color: '#666'
0, }
1, },
[ axisTick: {
{ show: false
offset: 0, },
color: '#10b1fd4d' axisLabel: {
}, color: '#BFF7FF',
{ align: 'left'
offset: 1, },
color: '#2bbffd00' splitLine: {
} show: false
], },
false data: labels
),
shadowColor: '#00B3DB',
shadowBlur: 20
}
}, },
data: rData.tempList yAxis: {
}, type: 'value',
{ axisLine: {
type: 'line', show: false,
name: '湿度', lineStyle: {
smooth: true, color: '#666'
symbol: 'circle', }
symbolSize: 1, },
showSymbol: false, axisTick: {
itemStyle: { show: false
normal: { },
color: '#9999FF' axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
} }
}, },
areaStyle: { series: getSeriesData()
normal: { }
color: new echarts.graphic.LinearGradient( // 定义柱状图左侧图形元素
0, const leftRect = echarts.graphic.extendShape({
0, shape: {
0, x: 0,
1, y: 0,
[ width: 19, // 柱状图宽
{ zWidth: 8, // 阴影折角宽
offset: 0, zHeight: 4 // 阴影折角高
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#9999FF',
shadowBlur: 20
}
}, },
data: rData.humidityList buildPath: function(ctx, shape) {
}, const api = shape.api
{ const xAxisPoint = api.coord([shape.xValue, 0])
type: 'line', const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight]
name: '光照', const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight]
smooth: true, const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]]
symbol: 'circle', const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]]
symbolSize: 1, const p4 = [shape.x + shape.width / 2, shape.y]
showSymbol: false,
itemStyle: { ctx.moveTo(p0[0], p0[1])
normal: { ctx.lineTo(p1[0], p1[1])
color: '#3BF6EC' ctx.lineTo(p2[0], p2[1])
} ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p4[0], p4[1])
ctx.lineTo(p0[0], p0[1])
ctx.closePath()
}
})
// 定义柱状图右侧以及顶部图形元素
const rightRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 18,
zWidth: 15,
zHeight: 8
}, },
areaStyle: { buildPath: function(ctx, shape) {
normal: { const api = shape.api
color: new echarts.graphic.LinearGradient( const xAxisPoint = api.coord([shape.xValue, 0])
0, const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2]
0, const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]]
0, const p4 = [shape.x + shape.width / 2, shape.y]
1, const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]]
[ const p6 = [
{ shape.x + shape.width / 2 + shape.zWidth,
offset: 0, shape.y - shape.zHeight / 2
color: '#10b1fd4d' ]
}, const p7 = [
{ shape.x - shape.width / 2 + shape.zWidth,
offset: 1, shape.y - shape.zHeight
color: '#2bbffd00' ]
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p5[0], p5[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p4[0], p4[1])
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p7[0], p7[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p4[0], p4[1])
ctx.closePath()
}
})
// 注册图形元素
echarts.graphic.registerShape('leftRect', leftRect)
echarts.graphic.registerShape('rightRect', rightRect)
function getSeriesData() {
const data = []
seriesData.forEach((item, index) => {
data.push(
{
type: 'custom',
name: item.label,
renderItem: function(params, api) {
return getRenderItem(params, api)
},
data: item.value,
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index])
} }
], }
false }
), )
shadowColor: '#3BF6EC', })
shadowBlur: 20 return data
}
},
data: rData.illuminationList
} }
] function getRenderItem(params, api) {
} const index = params.seriesIndex
this.chart4.setOption(option) const location = api.coord([api.value(0) + index, api.value(1)])
}, return {
initChart5(rData) { type: 'group',
this.chart5 = echarts.init(this.$refs.chart5, 'macarons') children: [
const count = 24 {
const dataX = [] type: 'leftRect',
for (let i = 0; i < count; i++) { shape: {
dataX.push(i < 10 ? '0' + i + '时' : i + '时') api,
} xValue: api.value(0) + index,
const option = { yValue: api.value(1),
tooltip: { x: location[0],
trigger: 'axis', y: location[1]
position: (point, params, dom, rect, size) => { },
return [point[0], 10] style: api.style()
},
{
type: 'rightRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
}
]
}
} }
}, this.chart3.setOption(option)
legend: { })
textStyle: { })
color: '#ffffff' },
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
}
},
data: devItem.data
})
})
if (this.chart4) {
this.chart4.dispose()
} }
}, this.chart4 = echarts.init(this.$refs.chart4, 'macarons')
grid: { const count = 24
left: '8px', const dataX = []
right: '8px', for (let i = 0; i < count; i++) {
top: '28px', dataX.push(i < 10 ? '0' + i + '时' : i + '时')
bottom: '8px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 2,
color: '#BFF7FF'
},
data: dataX
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
} }
}, const option = {
series: [ tooltip: {
{ trigger: 'axis',
type: 'line', position: (point, params, dom, rect, size) => {
name: '二氧化碳', return [point[0], 10]
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#FFEA00'
} }
}, },
data: rData.co2List legend: {
}, textStyle: {
{ color: '#ffffff'
type: 'line',
name: '温度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#F23593'
} }
}, },
data: rData.tempList grid: {
}, left: '8px',
{ right: '8px',
type: 'line', top: '28px',
name: '湿度', bottom: '8px',
smooth: true, containLabel: true
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#00FC0C'
}
}, },
data: rData.humidityList xAxis: {
}, type: 'category',
{ boundaryGap: false,
type: 'line', axisLine: {
name: '光照', show: false,
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#10B1FD',
lineStyle: { lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 2,
color: '#BFF7FF'
},
data: dataX
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
}
},
series: seriesList
}
this.chart4.setOption(option)
})
})
},
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: devItem.item,
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: this.colors[index]
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0,
0, 0,
...@@ -1311,46 +1178,94 @@ export default { ...@@ -1311,46 +1178,94 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: '#0CF4FD' color: this.colors[index]
}, },
{ {
offset: 1, offset: 1,
color: '#0954FD' color: '#666666'
} }
], ],
false false
) ),
shadowColor: '#666666',
shadowBlur: 20
} }
},
data: devItem.data
})
})
if (this.chart5) {
this.chart5.dispose()
}
this.chart5 = echarts.init(this.$refs.chart5, 'macarons')
const count = 24
const dataX = []
for (let i = 0; i < count; i++) {
dataX.push(i < 10 ? '0' + i + '时' : i + '时')
}
const option = {
tooltip: {
trigger: 'axis',
position: (point, params, dom, rect, size) => {
return [point[0], 10]
} }
}, },
areaStyle: { legend: {
normal: { textStyle: {
color: new echarts.graphic.LinearGradient( color: '#ffffff'
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#2BBFFD',
shadowBlur: 20
} }
}, },
data: rData.illuminationList grid: {
left: '8px',
right: '8px',
top: '28px',
bottom: '8px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 2,
color: '#BFF7FF'
},
data: dataX
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
}
},
series: seriesList
} }
] this.chart5.setOption(option)
} })
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