2023-08-10 01:21:29 +08:00
|
|
|
|
|
|
|
|
|
|
import * as echarts from '../../ec-canvas/echarts';
|
|
|
|
|
|
const app = getApp();
|
|
|
|
|
|
|
|
|
|
|
|
//pm2.5及pm10折线图
|
|
|
|
|
|
var xData_1 = [];
|
|
|
|
|
|
function initChart_1(chart_1, xData_1, yData_1_1, yData_1_2) {
|
|
|
|
|
|
var option_1 = {
|
|
|
|
|
|
color: ['#ffa245', '#5a8df6'],
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
data: ['PM2.5', 'PM10'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: '22%',
|
|
|
|
|
|
left: '0%',
|
|
|
|
|
|
right: '1%',
|
|
|
|
|
|
bottom: '0%',
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
data: xData_1,
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(39,51,75,0.8)'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: '#a2d4e6',
|
|
|
|
|
|
rotate: 45,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
}],
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: "ug/m³",
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
color: "#008fe9",
|
|
|
|
|
|
fontSize: 11
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#008fe9",
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(39,51,75,0.5)'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(39,51,75,0.8)'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'PM2.5',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: yData_1_1,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#ffa245',
|
|
|
|
|
|
width: 3
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'PM10',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: yData_1_2,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#5a8df6',
|
|
|
|
|
|
width: 3
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
chart_1.setOption(option_1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//噪音折线图
|
|
|
|
|
|
function initChart_2(chart_2, xData_2, yData_2) {
|
|
|
|
|
|
var option_2 = {
|
|
|
|
|
|
color: ['#5a8df6'],
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
data: ['噪音'],
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: '22%',
|
|
|
|
|
|
left: '0%',
|
|
|
|
|
|
right: '1%',
|
|
|
|
|
|
bottom: '0%',
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: [{
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
|
data: xData_2,
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(39,51,75,0.8)'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
color: '#a2d4e6',
|
|
|
|
|
|
rotate: 45,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
}],
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: "db",
|
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
|
color: "#008fe9",
|
|
|
|
|
|
fontSize: 11
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#008fe9",
|
|
|
|
|
|
fontSize: 10
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(39,51,75,0.5)'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: 'rgba(39,51,75,0.8)'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '噪音',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: yData_2,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
smooth: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#5a8df6',
|
|
|
|
|
|
width: 3
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
chart_2.setOption(option_2);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//环境管理pm2.5饼图
|
|
|
|
|
|
function initChart_3(chart_3, dataArr_3) {
|
|
|
|
|
|
var option_3 = {
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "外部进度条",
|
|
|
|
|
|
type: "gauge",
|
|
|
|
|
|
center: ['23%', '55%'],
|
|
|
|
|
|
radius: '90%',
|
|
|
|
|
|
min: 0, //最小刻度
|
|
|
|
|
|
max: 300, //最大刻度
|
|
|
|
|
|
splitNumber: 6,
|
|
|
|
|
|
startAngle: 230,
|
|
|
|
|
|
endAngle: -50,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: [
|
|
|
|
|
|
[dataArr_3 / 300, "#468EFD"],
|
|
|
|
|
|
[1, "#1e4973"]
|
|
|
|
|
|
],
|
|
|
|
|
|
width: 8
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
detail: {
|
|
|
|
|
|
formatter: function (value) {
|
|
|
|
|
|
if (value !== 0) {
|
|
|
|
|
|
var num = Math.round(value);
|
|
|
|
|
|
return parseInt(num).toFixed(0);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
padding: [-50, 0, 0, 0],
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
color: '#00f4ff',
|
|
|
|
|
|
fontSize: 25,
|
|
|
|
|
|
fontWeight: 900
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
title: { //标题
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
offsetCenter: [0, 50], // x, y，单位px
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#00c3fd",
|
|
|
|
|
|
fontSize: 14, //表盘上的标题文字大小
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [{
|
|
|
|
|
|
name: "PM2.5",
|
|
|
|
|
|
value: dataArr_3,
|
|
|
|
|
|
}],
|
|
|
|
|
|
pointer: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
length: '75%',
|
|
|
|
|
|
radius: '20%',
|
|
|
|
|
|
width: 2, //指针粗细
|
|
|
|
|
|
},
|
|
|
|
|
|
animationDuration: 4000,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '内部刻度',
|
|
|
|
|
|
type: 'gauge',
|
|
|
|
|
|
center: ['23%', '55%'],
|
|
|
|
|
|
radius: '65%',
|
|
|
|
|
|
min: 0, //最小刻度
|
|
|
|
|
|
max: 300, //最大刻度
|
|
|
|
|
|
splitNumber: 6, //刻度数量
|
|
|
|
|
|
startAngle: 230,
|
|
|
|
|
|
endAngle: -50,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
color: [
|
|
|
|
|
|
[1, 'rgba(0,0,0,0)']
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}, //仪表盘轴线
|
|
|
|
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
color: '#4d5bd1',
|
|
|
|
|
|
distance: 10,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#468EFD', //用颜色渐变函数不起作用
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
}, //刻度标签。
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
splitNumber: 5,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#468EFD', //用颜色渐变函数不起作用
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
length: -6
|
|
|
|
|
|
}, //刻度样式
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
length: -8,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#468EFD', //用颜色渐变函数不起作用
|
|
|
|
|
|
}
|
|
|
|
|
|
}, //分隔线样式
|
|
|
|
|
|
detail: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
pointer: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
};
|
|
|
|
|
|
chart_3.setOption(option_3);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//环境管理pm10饼图
|
|
|
|
|
|
function initChart_4(chart_4, dataArr_4) {
|
|
|
|
|
|
var option_4 = {
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "外部进度条",
|
|
|
|
|
|
type: "gauge",
|
|
|
|
|
|
center: ['77%', '55%'],
|
|
|
|
|
|
radius: '90%',
|
|
|
|
|
|
min: 0, //最小刻度
|
|
|
|
|
|
max: 150, //最大刻度
|
|
|
|
|
|
splitNumber: 6,
|
|
|
|
|
|
startAngle: 230,
|
|
|
|
|
|
endAngle: -50,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: [
|
|
|
|
|
|
[dataArr_4 / 150, "#468EFD"],
|
|
|
|
|
|
[1, "#1e4973"]
|
|
|
|
|
|
],
|
|
|
|
|
|
width: 8
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
detail: {
|
|
|
|
|
|
formatter: function (value) {
|
|
|
|
|
|
if (value !== 0) {
|
|
|
|
|
|
var num = Math.round(value);
|
|
|
|
|
|
return parseInt(num).toFixed(0);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
padding: [-50, 0, 0, 0],
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
color: '#00f4ff',
|
|
|
|
|
|
fontSize: 25,
|
|
|
|
|
|
fontWeight: 900
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
title: { //标题
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
offsetCenter: [0, 50], // x, y，单位px
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#00c3fd",
|
|
|
|
|
|
fontSize: 14, //表盘上的标题文字大小
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [{
|
|
|
|
|
|
name: "PM10",
|
|
|
|
|
|
value: dataArr_4,
|
|
|
|
|
|
}],
|
|
|
|
|
|
pointer: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
length: '75%',
|
|
|
|
|
|
radius: '20%',
|
|
|
|
|
|
width: 2, //指针粗细
|
|
|
|
|
|
},
|
|
|
|
|
|
animationDuration: 4000,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '内部刻度',
|
|
|
|
|
|
type: 'gauge',
|
|
|
|
|
|
center: ['77%', '55%'],
|
|
|
|
|
|
radius: '65%',
|
|
|
|
|
|
min: 0, //最小刻度
|
|
|
|
|
|
max: 150, //最大刻度
|
|
|
|
|
|
splitNumber: 6, //刻度数量
|
|
|
|
|
|
startAngle: 230,
|
|
|
|
|
|
endAngle: -50,
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
color: [
|
|
|
|
|
|
[1, 'rgba(0,0,0,0)']
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}, //仪表盘轴线
|
|
|
|
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
color: '#4d5bd1',
|
|
|
|
|
|
distance: 10,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#468EFD', //用颜色渐变函数不起作用
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
}, //刻度标签。
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
splitNumber: 5,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#468EFD', //用颜色渐变函数不起作用
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
length: -6
|
|
|
|
|
|
}, //刻度样式
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
length: -8,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#468EFD', //用颜色渐变函数不起作用
|
|
|
|
|
|
}
|
|
|
|
|
|
}, //分隔线样式
|
|
|
|
|
|
detail: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
pointer: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
};
|
|
|
|
|
|
chart_4.setOption(option_4);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
Page({
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 页面的初始数据
|
|
|
|
|
|
*/
|
|
|
|
|
|
data: {
|
|
|
|
|
|
active: 3,
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
value1: "实时",
|
|
|
|
|
|
value2: "实时",
|
|
|
|
|
|
actions1: [{ name: '实时', }, { name: '本月', },],
|
|
|
|
|
|
actions2: [{ name: '实时', }, { name: '本月', },],
|
|
|
|
|
|
ec_1: {
|
|
|
|
|
|
lazyLoad: true //动态加载
|
|
|
|
|
|
},
|
|
|
|
|
|
ec_2: {
|
|
|
|
|
|
lazyLoad: true //动态加载
|
|
|
|
|
|
},
|
|
|
|
|
|
ec_3: {
|
|
|
|
|
|
lazyLoad: true //动态加载
|
|
|
|
|
|
},
|
|
|
|
|
|
ec_4: {
|
|
|
|
|
|
lazyLoad: true //动态加载
|
|
|
|
|
|
},
|
|
|
|
|
|
projectName: '',
|
|
|
|
|
|
projectId: '',
|
|
|
|
|
|
weather: '',
|
|
|
|
|
|
weatherPic: '',
|
|
|
|
|
|
temperature: '',
|
|
|
|
|
|
dayEarlyNum: '',
|
|
|
|
|
|
monthEarlyNum: '',
|
|
|
|
|
|
yangchenCount: '',
|
|
|
|
|
|
loginName: '',
|
|
|
|
|
|
userName: '',
|
|
|
|
|
|
//数据加载参数
|
|
|
|
|
|
loadShow: false,
|
|
|
|
|
|
|
|
|
|
|
|
initData: {},
|
|
|
|
|
|
|
|
|
|
|
|
label_1: '24小时PM2.5，PM10的平均浓度',
|
|
|
|
|
|
label_2: '24小时噪音的平均分贝',
|
|
|
|
|
|
projectData:{}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//项目切换 返回值
|
|
|
|
|
|
onProjectSelect(e) {
|
|
|
|
|
|
this.onClickShow();
|
|
|
|
|
|
let projectId = e.detail.id;
|
|
|
|
|
|
let projectName = e.detail.text;
|
|
|
|
|
|
app.globalData.projectId = projectId;
|
|
|
|
|
|
app.globalData.projectName = projectName;
|
|
|
|
|
|
this.setData({
|
|
|
|
|
|
projectId: projectId,
|
|
|
|
|
|
projectName: projectName
|
|
|
|
|
|
})
|
|
|
|
|
|
this.onLoad();
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
showPopup() {
|
|
|
|
|
|
this.setData({ show: true });
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onClose() {
|
|
|
|
|
|
this.setData({ show: false });
|
|
|
|
|
|
this.setData({ show1: false });
|
|
|
|
|
|
this.setData({ show2: false });
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onclick1() {
|
|
|
|
|
|
this.setData({ show1: true });
|
|
|
|
|
|
},
|
|
|
|
|
|
onclick2() {
|
|
|
|
|
|
this.setData({ show2: true });
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onSelect1(event) {
|
|
|
|
|
|
console.log(event)
|
|
|
|
|
|
var that = this;
|
|
|
|
|
|
that.setData({
|
|
|
|
|
|
value1: event.detail.name,
|
|
|
|
|
|
});
|
|
|
|
|
|
//PM实时与本月数据切换
|
|
|
|
|
|
let type = "";
|
|
|
|
|
|
if (event.detail.name == '实时') {
|
|
|
|
|
|
type = "1"
|
|
|
|
|
|
this.setData({
|
|
|
|
|
|
label_1: '24小时PM2.5，PM10的平均浓度'
|
|
|
|
|
|
})
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.szhUrl + '/mkl/api/getEnvironmentCloseHoursInfo',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: that.data.projectData.szh
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
let time = []
|
|
|
|
|
|
let pm25 = []
|
|
|
|
|
|
let pm10 = []
|
|
|
|
|
|
res.data.data.map(item => {
|
|
|
|
|
|
time.push(item.date.split(" ")[1].split(":")[0])
|
|
|
|
|
|
pm25.push(item.pm25)
|
|
|
|
|
|
pm10.push(item.pm10)
|
|
|
|
|
|
})
|
|
|
|
|
|
that.init_one(time, pm25, pm10);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
|
|
|
type = "2"
|
|
|
|
|
|
this.setData({
|
|
|
|
|
|
label_1: '本月PM2.5，PM10的平均浓度'
|
|
|
|
|
|
})
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.szhUrl + '/mkl/api/getEnvironmentMonthData',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: that.data.projectData.szh
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
let time = []
|
|
|
|
|
|
let pm25 = []
|
|
|
|
|
|
let pm10 = []
|
|
|
|
|
|
res.data.data.map(item => {
|
|
|
|
|
|
time.push(item.createTime.split(" ")[0])
|
|
|
|
|
|
pm25.push(item.pm25)
|
|
|
|
|
|
pm10.push(item.pm10)
|
|
|
|
|
|
})
|
|
|
|
|
|
that.init_one(time, pm25, pm10);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
// wx.request({
|
|
|
|
|
|
// url: app.globalData.reqUrl + '/weixin/applets/selectPM25',
|
|
|
|
|
|
// method: "GET",
|
|
|
|
|
|
// data: {
|
|
|
|
|
|
// projectId: this.data.projectData.szh,
|
|
|
|
|
|
// type: type
|
|
|
|
|
|
// },
|
|
|
|
|
|
// success: function (res) {
|
|
|
|
|
|
// that.init_one(res.data.time, res.data.pm25, res.data.pm10)
|
|
|
|
|
|
// }
|
|
|
|
|
|
// })
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onSelect2(event) {
|
|
|
|
|
|
var that = this;
|
|
|
|
|
|
that.setData({
|
|
|
|
|
|
value2: event.detail.name,
|
|
|
|
|
|
});
|
|
|
|
|
|
//噪音实时与本月数据切换
|
|
|
|
|
|
let type = "";
|
|
|
|
|
|
if (event.detail.name == '实时') {
|
|
|
|
|
|
type = "1"
|
|
|
|
|
|
this.setData({
|
|
|
|
|
|
label_2: '24小时噪音的平均分贝'
|
|
|
|
|
|
})
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.szhUrl + '/mkl/api/getEnvironmentCloseHoursInfo',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: that.data.projectData.szh
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
let time = []
|
|
|
|
|
|
let noise = []
|
|
|
|
|
|
res.data.data.map(item => {
|
|
|
|
|
|
time.push(item.date.split(" ")[1].split(":")[0])
|
|
|
|
|
|
noise.push(item.noise)
|
|
|
|
|
|
})
|
|
|
|
|
|
that.init_two(time, noise);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
|
|
|
type = "2"
|
|
|
|
|
|
this.setData({
|
|
|
|
|
|
label_2: '本月噪音的平均分贝'
|
|
|
|
|
|
})
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.szhUrl + '/mkl/api/getEnvironmentMonthData',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: that.data.projectData.szh
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
let time = []
|
|
|
|
|
|
let noise = []
|
|
|
|
|
|
res.data.data.map(item => {
|
|
|
|
|
|
time.push(item.createTime.split(" ")[0])
|
|
|
|
|
|
noise.push(item.noise)
|
|
|
|
|
|
})
|
|
|
|
|
|
that.init_two(time, noise);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
// wx.request({
|
|
|
|
|
|
// url: app.globalData.reqUrl + '/weixin/applets/selectNoiseDB',
|
|
|
|
|
|
// method: "GET",
|
|
|
|
|
|
// data: {
|
|
|
|
|
|
// projectId: this.data.projectData.szh,
|
|
|
|
|
|
// type: type
|
|
|
|
|
|
// },
|
|
|
|
|
|
// success: function (res) {
|
|
|
|
|
|
// that.init_two(res.data.time, res.data.DB);
|
|
|
|
|
|
// }
|
|
|
|
|
|
// })
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//初始化pm2.5及pm10折线图
|
|
|
|
|
|
init_one: function (xData_1, yData_1_1, yData_1_2) {
|
|
|
|
|
|
this.oneComponent.init((canvas, width, height, dpr) => {
|
|
|
|
|
|
const chart = echarts.init(canvas, null, {
|
|
|
|
|
|
width: width,
|
|
|
|
|
|
height: height,
|
|
|
|
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
|
|
|
|
});
|
|
|
|
|
|
//赋值给echart图表
|
|
|
|
|
|
initChart_1(chart, xData_1, yData_1_1, yData_1_2)
|
|
|
|
|
|
this.chart = chart;
|
|
|
|
|
|
return chart;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//初始化噪音折线图
|
|
|
|
|
|
init_two: function (xData_2, yData_2) {
|
|
|
|
|
|
this.twoComponent.init((canvas, width, height, dpr) => {
|
|
|
|
|
|
const chart = echarts.init(canvas, null, {
|
|
|
|
|
|
width: width,
|
|
|
|
|
|
height: height,
|
|
|
|
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
|
|
|
|
});
|
|
|
|
|
|
//赋值给echart图表
|
|
|
|
|
|
initChart_2(chart, xData_2, yData_2)
|
|
|
|
|
|
this.chart = chart;
|
|
|
|
|
|
return chart;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//初始化环境管理pm2.5饼图
|
|
|
|
|
|
init_three: function (dataArr_3) {
|
|
|
|
|
|
this.threeComponent.init((canvas, width, height, dpr) => {
|
|
|
|
|
|
const chart = echarts.init(canvas, null, {
|
|
|
|
|
|
width: width,
|
|
|
|
|
|
height: height,
|
|
|
|
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
|
|
|
|
});
|
|
|
|
|
|
//赋值给echart图表
|
|
|
|
|
|
initChart_3(chart, dataArr_3)
|
|
|
|
|
|
this.chart = chart;
|
|
|
|
|
|
return chart;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//初始化环境管理pm10饼图
|
|
|
|
|
|
init_four: function (dataArr_4) {
|
|
|
|
|
|
this.fourComponent.init((canvas, width, height, dpr) => {
|
|
|
|
|
|
const chart = echarts.init(canvas, null, {
|
|
|
|
|
|
width: width,
|
|
|
|
|
|
height: height,
|
|
|
|
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
|
|
|
|
});
|
|
|
|
|
|
//赋值给echart图表
|
|
|
|
|
|
initChart_4(chart, dataArr_4)
|
|
|
|
|
|
this.chart = chart;
|
|
|
|
|
|
return chart;
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onClickShow() {
|
|
|
|
|
|
this.setData({ loadShow: true });
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onClickHide() {
|
|
|
|
|
|
this.setData({ loadShow: false });
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 生命周期函数--监听页面加载
|
|
|
|
|
|
*/
|
|
|
|
|
|
onLoad: function (options) {
|
|
|
|
|
|
console.log(app.globalData)
|
|
|
|
|
|
var that = this;
|
|
|
|
|
|
//加载蒙版
|
|
|
|
|
|
this.onClickShow();
|
|
|
|
|
|
//获取缓存数据
|
|
|
|
|
|
wx.getStorage({
|
|
|
|
|
|
key: 'userinfo',
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
that.setData({
|
|
|
|
|
|
loginName: res.data.loginName,
|
|
|
|
|
|
userName: res.data.userName,
|
|
|
|
|
|
projectId: app.globalData.projectId,
|
|
|
|
|
|
projectName: app.globalData.projectName,
|
|
|
|
|
|
initData: { text: app.globalData.projectName, id: app.globalData.projectId }
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//根据ID获取组件对象
|
|
|
|
|
|
this.oneComponent = this.selectComponent('#mychart-one');
|
|
|
|
|
|
this.twoComponent = this.selectComponent('#mychart-two');
|
|
|
|
|
|
this.threeComponent = this.selectComponent('#mychart-three');
|
|
|
|
|
|
this.fourComponent = this.selectComponent('#mychart-four');
|
|
|
|
|
|
this.getProjectCorrespondence(app.globalData.projectId);
|
|
|
|
|
|
//初始化加载项目信息加载天气信息
|
|
|
|
|
|
this.getProjectlngandlat(app.globalData.projectId);
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 项目对应关系
|
|
|
|
|
|
*/
|
|
|
|
|
|
getProjectCorrespondence(projectId) {
|
|
|
|
|
|
var that = this;
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.reqUrl + '/weixin/training/getProjectCorrespondence',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
"projectId": projectId,
|
|
|
|
|
|
},
|
|
|
|
|
|
method: "get",
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
console.log(res.data);
|
|
|
|
|
|
that.setData({
|
|
|
|
|
|
projectData: res.data
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 底部导航
|
|
|
|
|
|
onChange(event) {
|
|
|
|
|
|
// event.detail 的值为当前选中项的索引
|
|
|
|
|
|
this.setData({ active: event.detail });
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//根据项目id查询出项目经纬度
|
|
|
|
|
|
getProjectlngandlat: function (even) {
|
|
|
|
|
|
var that = this;
|
|
|
|
|
|
wx.request({
|
2023-08-27 13:20:30 +08:00
|
|
|
|
url: app.globalData.reqUrl + '/wechat/project/getProjectFoundation',
|
2023-08-10 01:21:29 +08:00
|
|
|
|
data: {
|
|
|
|
|
|
"id": even
|
|
|
|
|
|
},
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
|
|
|
|
|
|
//加载天气信息
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.reqUrl + '/weixin/applets/selectWeather',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
lng: res.data.longitude,
|
|
|
|
|
|
lat: res.data.latitude,
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (weatherRes) {
|
|
|
|
|
|
that.setData({
|
|
|
|
|
|
weather: weatherRes.data.weather,
|
|
|
|
|
|
weatherPic: weatherRes.data.weatherPic,
|
|
|
|
|
|
temperature: weatherRes.data.temperature
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
//查询出实时的PM2.5和PM10数据
|
|
|
|
|
|
if (even == 3) {
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.szhUrl + '/mkl/api/queryEnvironment',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: 132
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
that.init_three(res.data.data.pm25);
|
|
|
|
|
|
that.init_four(res.data.data.pm10);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.reqUrl + '/weixin/applets/selectEnvironmental',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: even
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (sspm) {
|
|
|
|
|
|
that.init_three(sspm.data.PM25);
|
|
|
|
|
|
that.init_four(sspm.data.PM10);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//查询出扬尘数据
|
|
|
|
|
|
if (even == 3) {
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.szhUrl + '/mkl/api/getEnvironmentCloseHoursInfo',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: 132
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (res) {
|
|
|
|
|
|
let time = []
|
|
|
|
|
|
let pm25 = []
|
|
|
|
|
|
let pm10 = []
|
|
|
|
|
|
let noise = []
|
|
|
|
|
|
res.data.data.map(item => {
|
|
|
|
|
|
time.push(item.date.split(" ")[1].split(":")[0])
|
|
|
|
|
|
pm25.push(item.pm25)
|
|
|
|
|
|
pm10.push(item.pm10)
|
|
|
|
|
|
noise.push(item.noise)
|
|
|
|
|
|
})
|
|
|
|
|
|
that.init_one(time, pm25, pm10);
|
|
|
|
|
|
that.init_two(time, noise);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.reqUrl + '/weixin/applets/selectPM25',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: even,
|
|
|
|
|
|
type: '1'
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (ycss) {
|
|
|
|
|
|
that.init_one(ycss.data.time, ycss.data.pm25, ycss.data.pm10);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//查询出噪声数据
|
|
|
|
|
|
if (even != 3) {
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.reqUrl + '/weixin/applets/selectNoiseDB',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: even,
|
|
|
|
|
|
type: '1'
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (zzss) {
|
|
|
|
|
|
that.init_two(zzss.data.time, zzss.data.DB);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//查询出环境预警数据
|
|
|
|
|
|
wx.request({
|
|
|
|
|
|
url: app.globalData.reqUrl + '/weixin/applets/selectEarlyWarning',
|
|
|
|
|
|
method: "GET",
|
|
|
|
|
|
data: {
|
|
|
|
|
|
projectId: even,
|
|
|
|
|
|
},
|
|
|
|
|
|
success: function (hjyj) {
|
|
|
|
|
|
that.onClickHide();
|
|
|
|
|
|
that.setData({
|
|
|
|
|
|
dayEarlyNum: hjyj.data.dayCount,
|
|
|
|
|
|
monthEarlyNum: hjyj.data.moneyCount,
|
|
|
|
|
|
yangchenCount: hjyj.data.yangchenCount
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//退出登录
|
|
|
|
|
|
TCDL: function () {
|
|
|
|
|
|
wx.clearStorageSync();
|
|
|
|
|
|
wx.setStorageSync('isReload', "1")
|
|
|
|
|
|
wx.redirectTo({
|
2024-03-19 23:25:38 +08:00
|
|
|
|
url: '../login/index',
|
2023-08-10 01:21:29 +08:00
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//返回到更多功能
|
|
|
|
|
|
goGCLB: function () {
|
|
|
|
|
|
wx.redirectTo({
|
2024-03-19 23:25:38 +08:00
|
|
|
|
url: '../../pages/gengduogongneng/index'
|
2023-08-10 01:21:29 +08:00
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
