jhwxapp/miniprogram/pageage/xiangmuhuanjing/xiangmuhuanjing.js

922 lines
27 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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.5PM10的平均浓度',
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.5PM10的平均浓度'
})
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.5PM10的平均浓度'
})
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({
url: app.globalData.reqUrl + '/wechat/project/getProjectFoundation',
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({
url: '../login/index',
})
},
//返回到更多功能
goGCLB: function () {
wx.redirectTo({
url: '../../pages/gengduogongneng/index'
})
}
})