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 = {
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,16 +119,18 @@
</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 class="ctn">
<ul>
<li v-for="(item,index) in vData34.alarmList" :key="'ak_'+index">
<div class="label">
<span>{{ item.proName }}</span>
</div>
<div class="val">{{ item.alarmNumber }}</div>
</li>
</ul>
<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">
<div class="label">
<span>{{ item.proName }}</span>
</div>
<div class="val">{{ item.alarmNumber }}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
......@@ -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,524 +800,376 @@ export default {
}
this.chart2.setOption(option)
},
initChart3(rData) {
this.chart3 = echarts.init(this.$refs.chart3)
const labels = rData.timeList || []
const seriesData = []
for (let i = 0; i < labels.length; i++) {
seriesData.push({
label: labels[i],
value: [rData.data[i]]
})
}
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
initChart3(item) {
this.$nextTick(() => {
HttpReq.webClientApi.findDataByDeviceId({
flag: 1,
deviceId: item.deviceId
}).then((res) => {
const rData = res.data
if (this.chart3) {
this.chart3.dispose()
}
},
grid: {
left: '8px',
right: '8px',
top: '8px',
bottom: '8px',
containLabel: true
},
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'
}
this.chart3 = echarts.init(this.$refs.chart3)
const labels = rData.timeList || []
const seriesData = []
for (let i = 0; i < labels.length; i++) {
seriesData.push({
label: labels[i],
value: [rData.data[i]]
})
}
},
series: getSeriesData()
}
// 定义柱状图左侧图形元素
const leftRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 19, // 柱状图宽
zWidth: 8, // 阴影折角宽
zHeight: 4 // 阴影折角高
},
buildPath: function(ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight]
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]]
const p4 = [shape.x + shape.width / 2, shape.y]
ctx.moveTo(p0[0], p0[1])
ctx.lineTo(p1[0], p1[1])
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
},
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
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)' }
]
]
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])
}
const option = {
tooltip: {
trigger: 'item',
formatter: (params, ticket, callback) => {
return params.value
}
}
)
})
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()
},
{
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)
},
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'
}
grid: {
left: '8px',
right: '8px',
top: '8px',
bottom: '8px',
containLabel: true
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#00B3DB',
shadowBlur: 20
}
xAxis: {
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF',
align: 'left'
},
splitLine: {
show: false
},
data: labels
},
data: rData.tempList
},
{
type: 'line',
name: '湿度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#9999FF'
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
}
},
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: getSeriesData()
}
// 定义柱状图左侧图形元素
const leftRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 19, // 柱状图宽
zWidth: 8, // 阴影折角宽
zHeight: 4 // 阴影折角高
},
data: rData.humidityList
},
{
type: 'line',
name: '光照',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#3BF6EC'
}
buildPath: function(ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight]
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]]
const p4 = [shape.x + shape.width / 2, shape.y]
ctx.moveTo(p0[0], p0[1])
ctx.lineTo(p1[0], p1[1])
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: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
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])
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
}
},
data: rData.illuminationList
}
}
)
})
return data
}
]
}
this.chart4.setOption(option)
},
initChart5(rData) {
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]
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()
},
{
type: 'rightRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
}
]
}
}
},
legend: {
textStyle: {
color: '#ffffff'
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
}
},
data: devItem.data
})
})
if (this.chart4) {
this.chart4.dispose()
}
},
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'
}
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 + '时')
}
},
series: [
{
type: 'line',
name: '二氧化碳',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#FFEA00'
const option = {
tooltip: {
trigger: 'axis',
position: (point, params, dom, rect, size) => {
return [point[0], 10]
}
},
data: rData.co2List
},
{
type: 'line',
name: '温度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#F23593'
legend: {
textStyle: {
color: '#ffffff'
}
},
data: rData.tempList
},
{
type: 'line',
name: '湿度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#00FC0C'
}
grid: {
left: '8px',
right: '8px',
top: '28px',
bottom: '8px',
containLabel: true
},
data: rData.humidityList
},
{
type: 'line',
name: '光照',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#10B1FD',
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.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(
0,
0,
......@@ -1311,46 +1178,94 @@ export default {
[
{
offset: 0,
color: '#0CF4FD'
color: this.colors[index]
},
{
offset: 1,
color: '#0954FD'
color: '#666666'
}
],
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: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#2BBFFD',
shadowBlur: 20
legend: {
textStyle: {
color: '#ffffff'
}
},
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