1391 lines
35 KiB
JavaScript
1391 lines
35 KiB
JavaScript
// pages/gengduogongneng/index.js
|
|
import * as echarts from '../../ec-canvas/echarts';
|
|
const app = getApp();
|
|
|
|
|
|
//预警状态
|
|
let formatNumber_0 = function(num) {
|
|
let reg = /(?=(\B)(\d{3})+$)/g;
|
|
return num.toString().replace(reg, ',');
|
|
}
|
|
function arrayobj_0 (array, key) {
|
|
var resObj = {}
|
|
for (var i = 0; i < array.length; i++) {
|
|
resObj[array[i][key]] = array[i]
|
|
}
|
|
return resObj
|
|
}
|
|
function initChart_0(chart_0,datas_0,datas_name) {
|
|
//定义参数
|
|
let objData_0 = arrayobj_0(datas_0, 'name')
|
|
let total_0 = datas_0.reduce((a, b) => {
|
|
return a + b.value * 1
|
|
}, 0);
|
|
let title_0 = '本月预警';
|
|
|
|
var option_0 = {
|
|
color: ["#ffac50", "#ed6942", "#9e40ec", "#1f8efa", "#06c985"],
|
|
title: [{
|
|
text: '{val|' + formatNumber_1(total_0) + '} \n {name|' + title_0 + '} ',
|
|
top: '31%',
|
|
left: '17%',
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
color: '#fff',
|
|
padding: [10, 0]
|
|
},
|
|
val: {
|
|
fontSize:25,
|
|
fontWeight: 'bold',
|
|
color: '#0ad7ec',
|
|
padding: [0, 20]
|
|
}
|
|
}
|
|
}
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: "center",
|
|
right: "5%",
|
|
icon: 'circle',
|
|
data: datas_name,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10
|
|
},
|
|
formatter(name) {
|
|
return `${name} ${objData_0[name].value}`
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['65%', '90%'],
|
|
center: ['30%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
hoverAnimation: false,
|
|
data: datas_0
|
|
}]
|
|
};
|
|
chart_0.setOption(option_0);
|
|
}
|
|
|
|
|
|
//人员预警信息
|
|
let datas_1 = []
|
|
let formatNumber_1 = function(num) {
|
|
let reg = /(?=(\B)(\d{3})+$)/g;
|
|
return num.toString().replace(reg, ',');
|
|
}
|
|
function arrayobj_1 (array, key) {
|
|
var resObj = {}
|
|
for (var i = 0; i < array.length; i++) {
|
|
resObj[array[i][key]] = array[i]
|
|
}
|
|
return resObj
|
|
}
|
|
function initChart_1(chart_1,datas_1,datas_name) {
|
|
//定义参数
|
|
let objData_1 = arrayobj_1(datas_1, 'name');
|
|
let total_1 = datas_1.reduce((a, b) => {
|
|
return a + b.value * 1
|
|
}, 0);
|
|
let title_1 = '本日预警';
|
|
|
|
var option_1 = {
|
|
color: ["#ffac50", "#ed6942", "#9e40ec", "#1f8efa", "#06c985"],
|
|
title: [{
|
|
text: '{val|' + formatNumber_1(total_1) + '} \n {name|' + title_1 + '} ',
|
|
top: '31%',
|
|
left: '17%',
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
color: '#fff',
|
|
padding: [10, 0]
|
|
},
|
|
val: {
|
|
fontSize:25,
|
|
fontWeight: 'bold',
|
|
color: '#0ad7ec',
|
|
padding: [0, 20]
|
|
}
|
|
}
|
|
}
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: "center",
|
|
right: "5%",
|
|
icon: 'circle',
|
|
data: datas_name,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10
|
|
},
|
|
formatter(name) {
|
|
return `${name} ${objData_1[name].value}`
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['65%', '90%'],
|
|
center: ['30%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
hoverAnimation: false,
|
|
data: datas_1
|
|
}]
|
|
};
|
|
chart_1.setOption(option_1);
|
|
}
|
|
|
|
|
|
//机械预警信息
|
|
let datas_6 = []
|
|
let formatNumber_6 = function(num) {
|
|
let reg = /(?=(\B)(\d{3})+$)/g;
|
|
return num.toString().replace(reg, ',');
|
|
}
|
|
function arrayobj_6 (array, key) {
|
|
var resObj = {}
|
|
for (var i = 0; i < array.length; i++) {
|
|
resObj[array[i][key]] = array[i]
|
|
}
|
|
return resObj
|
|
}
|
|
function initChart_6(chart_6,datas_6,datas_name) {
|
|
//定义参数
|
|
let objData_6 = arrayobj_6(datas_6, 'name');
|
|
let total_6 = datas_6.reduce((a, b) => {
|
|
return a + b.value * 1
|
|
}, 0);
|
|
let title_6 = '本日预警';
|
|
|
|
var option_6 = {
|
|
color: ["#ffac50", "#ed6942", "#9e40ec", "#1f8efa", "#06c985"],
|
|
title: [{
|
|
text: '{val|' + formatNumber_1(total_6) + '} \n {name|' + title_6 + '} ',
|
|
top: '31%',
|
|
left: '17%',
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
color: '#fff',
|
|
padding: [10, 0]
|
|
},
|
|
val: {
|
|
fontSize:25,
|
|
fontWeight: 'bold',
|
|
color: '#0ad7ec',
|
|
padding: [0, 20]
|
|
}
|
|
}
|
|
}
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: "center",
|
|
right: "5%",
|
|
icon: 'circle',
|
|
data: datas_name,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10
|
|
},
|
|
formatter(name) {
|
|
return `${name} ${objData_6[name].value}`
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['65%', '90%'],
|
|
center: ['30%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
hoverAnimation: false,
|
|
data: datas_6
|
|
}]
|
|
};
|
|
chart_6.setOption(option_6);
|
|
}
|
|
|
|
|
|
//物料预警
|
|
let formatNumber_2 = function(num) {
|
|
let reg = /(?=(\B)(\d{3})+$)/g;
|
|
return num.toString().replace(reg, ',');
|
|
}
|
|
function arrayobj_2 (array, key) {
|
|
var resObj = {}
|
|
for (var i = 0; i < array.length; i++) {
|
|
resObj[array[i][key]] = array[i]
|
|
}
|
|
return resObj
|
|
}
|
|
function initChart_2(chart_2,datas_2) {
|
|
//定义参数
|
|
let objData_2 = arrayobj_2(datas_2, 'name');
|
|
let total_2 = datas_2.reduce((a, b) => {
|
|
return a + b.value * 1
|
|
}, 0);
|
|
let title_2 = '本日预警';
|
|
|
|
var option_2 = {
|
|
color: ["#ffac50", "#ed6942", "#9e40ec", "#1f8efa", "#06c985"],
|
|
title: [{
|
|
text: '{val|' + formatNumber_1(total_2) + '} \n {name|' + title_2 + '} ',
|
|
top: '31%',
|
|
left: '17%',
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
color: '#fff',
|
|
padding: [10, 0]
|
|
},
|
|
val: {
|
|
fontSize:25,
|
|
fontWeight: 'bold',
|
|
color: '#0ad7ec',
|
|
padding: [0, 20]
|
|
}
|
|
}
|
|
}
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: "center",
|
|
right: "5%",
|
|
icon: 'circle',
|
|
data: ['塔吊', '电梯', '龙门吊','砂浆罐', '其他 '],
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10
|
|
},
|
|
formatter(name) {
|
|
return `${name} ${objData_2[name].value}`
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['65%', '90%'],
|
|
center: ['30%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
hoverAnimation: false,
|
|
data: datas_2
|
|
}]
|
|
};
|
|
chart_2.setOption(option_2);
|
|
}
|
|
|
|
//本月预警
|
|
let formatNumber_3 = function(num) {
|
|
let reg = /(?=(\B)(\d{3})+$)/g;
|
|
return num.toString().replace(reg, ',');
|
|
}
|
|
function arrayobj_3 (array, key) {
|
|
var resObj = {}
|
|
for (var i = 0; i < array.length; i++) {
|
|
resObj[array[i][key]] = array[i]
|
|
}
|
|
return resObj
|
|
}
|
|
function initChart_3(chart_3,datas_3,datas_name) {
|
|
//定义参数
|
|
let objData_3 = arrayobj_3(datas_3, 'name')
|
|
let total_3 = datas_3.reduce((a, b) => {
|
|
return a + b.value * 1
|
|
}, 0);
|
|
let title_3 = '本月预警';
|
|
|
|
var option_3 = {
|
|
color: ["#ffac50", "#ed6942", "#9e40ec", "#1f8efa", "#06c985"],
|
|
title: [{
|
|
text: '{val|' + formatNumber_1(total_3) + '} \n {name|' + title_3 + '} ',
|
|
top: '31%',
|
|
left: '17%',
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
color: '#fff',
|
|
padding: [10, 0]
|
|
},
|
|
val: {
|
|
fontSize:25,
|
|
fontWeight: 'bold',
|
|
color: '#0ad7ec',
|
|
padding: [0, 20]
|
|
}
|
|
}
|
|
}
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: "center",
|
|
right: "5%",
|
|
icon: 'circle',
|
|
data: datas_name,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10
|
|
},
|
|
formatter(name) {
|
|
return `${name} ${objData_3[name].value}`
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['65%', '90%'],
|
|
center: ['30%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
hoverAnimation: false,
|
|
data: datas_3
|
|
}]
|
|
};
|
|
chart_3.setOption(option_3);
|
|
}
|
|
|
|
|
|
//离线视频
|
|
let formatNumber_4 = function(num) {
|
|
let reg = /(?=(\B)(\d{3})+$)/g;
|
|
return num.toString().replace(reg, ',');
|
|
}
|
|
function arrayobj_4 (array, key) {
|
|
var resObj = {}
|
|
for (var i = 0; i < array.length; i++) {
|
|
resObj[array[i][key]] = array[i]
|
|
}
|
|
return resObj
|
|
}
|
|
function initChart_4(chart_4,datas_4,datas_name4) {
|
|
//定义参数
|
|
let objData_4 = arrayobj_4(datas_4, 'name')
|
|
let total_4 = datas_4.reduce((a, b) => {
|
|
return a + b.value * 1
|
|
}, 0);
|
|
let title_4 = '本日离线';
|
|
|
|
var option_4 = {
|
|
color: ["#ffac50", "#ed6942", "#9e40ec", "#1f8efa", "#06c985"],
|
|
title: [{
|
|
text: '{val|' + formatNumber_1(total_4) + '} \n {name|' + title_4 + '} ',
|
|
top: '31%',
|
|
left: '17%',
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
color: '#fff',
|
|
padding: [10, 0]
|
|
},
|
|
val: {
|
|
fontSize:25,
|
|
fontWeight: 'bold',
|
|
color: '#0ad7ec',
|
|
padding: [0, 20]
|
|
}
|
|
}
|
|
}
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: "center",
|
|
right: "5%",
|
|
icon: 'circle',
|
|
data: datas_name4,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10
|
|
},
|
|
formatter(name) {
|
|
return `${name} ${objData_4[name].value}`
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'pie',
|
|
radius: ['65%', '90%'],
|
|
center: ['30%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
hoverAnimation: false,
|
|
data: datas_4
|
|
}]
|
|
};
|
|
chart_4.setOption(option_4);
|
|
}
|
|
|
|
//今日扬尘指标
|
|
let value_5 = 0;
|
|
function initChart_5(chart_5,value_5) {
|
|
var option_5 = {
|
|
series: [{
|
|
type: 'gauge',
|
|
radius: '73%',
|
|
//splitNumber: 10,
|
|
min: 0,
|
|
max: 500,
|
|
startAngle: 90,
|
|
endAngle: -269.9999,
|
|
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: [
|
|
[1, 'rgba(0,0,0,0)']
|
|
]
|
|
}
|
|
}, //仪表盘轴线
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#468EFD',
|
|
width: 1
|
|
},
|
|
length: -5
|
|
}, //刻度样式
|
|
splitLine: {
|
|
show: true,
|
|
length: -8,
|
|
lineStyle: {
|
|
color: '#468EFD'
|
|
}
|
|
}, //分隔线样式
|
|
axisLabel: {
|
|
//show:false,
|
|
distance: 10,
|
|
textStyle: {
|
|
color: '#468EFD',
|
|
fontSize: '10',
|
|
fontWeight: 'bold'
|
|
},
|
|
formatter: '{value}'
|
|
},
|
|
pointer: {
|
|
show: 0
|
|
},
|
|
detail: {
|
|
show: 0
|
|
}
|
|
},
|
|
|
|
// 内侧指针、数值显示
|
|
{
|
|
name: '达标率',
|
|
type: 'gauge',
|
|
radius: '100%',
|
|
startAngle: 90,
|
|
endAngle: -269.9999,
|
|
min: 0,
|
|
max: 500,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 10,
|
|
color: [
|
|
[
|
|
value_5 / 500, new echarts.graphic.LinearGradient(
|
|
0, 0, 1, 0, [{
|
|
offset: 0,
|
|
color: '#04c5ff',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#04c5ff',
|
|
}
|
|
]
|
|
)
|
|
],
|
|
[
|
|
1, '#1c3f5f'
|
|
]
|
|
]
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: 0,
|
|
},
|
|
splitLine: {
|
|
show: 0,
|
|
},
|
|
axisLabel: {
|
|
show: 0
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
length: '105%'
|
|
},
|
|
detail: {
|
|
show: true,
|
|
offsetCenter: [0, '0'],
|
|
textStyle: {
|
|
fontSize: 25,
|
|
color: '#29EEF3',
|
|
fontWeight: 'bold'
|
|
},
|
|
formatter: [
|
|
'{value}' + '',
|
|
'' + '{name|PM2.5}'
|
|
].join('\n'),
|
|
rich: {
|
|
name: {
|
|
fontSize: 14,
|
|
color: '#ffbd05',
|
|
padding: [5,0]
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#03b7c9',
|
|
}
|
|
},
|
|
data: [{
|
|
value: value_5
|
|
}]
|
|
}
|
|
]
|
|
}
|
|
chart_5.setOption(option_5);
|
|
}
|
|
|
|
|
|
Page({
|
|
|
|
/**
|
|
* 页面的初始数据
|
|
*/
|
|
data: {
|
|
active:1,
|
|
show: false,
|
|
check:['video_nav active','video_nav ','video_nav ','video_nav ','video_nav ','video_nav '],
|
|
ec_0:{
|
|
lazyLoad: true
|
|
},
|
|
ec_1: {
|
|
lazyLoad: true
|
|
},
|
|
ec_2: {
|
|
lazyLoad: true
|
|
},
|
|
ec_3: {
|
|
lazyLoad: true
|
|
},
|
|
ec_4: {
|
|
lazyLoad: true
|
|
},
|
|
ec_5: {
|
|
lazyLoad: true
|
|
},
|
|
ec_6: {
|
|
lazyLoad: true
|
|
},
|
|
aqi:0,
|
|
marginLeft: "11%",
|
|
projectName:'',
|
|
projectId:'',
|
|
dayEarlyNum:'',
|
|
yangchenCount:'',
|
|
monthEarlyNum:'',
|
|
monthCount:'',
|
|
PM25:'0',
|
|
PM10:'0',
|
|
DB:'0',
|
|
WindSpeed:'0',
|
|
WindDirection:'',
|
|
Temperature:'0',
|
|
Humidity:'0',
|
|
AQI:'0',
|
|
TSP:'0',
|
|
videoDay:'0',
|
|
videoMonth:'0',
|
|
enviorDayData:{},
|
|
enviorMonthData:{},
|
|
dayCountNum:'0',
|
|
monthCountNum:'0',
|
|
machineEnvironCountDay:"0",
|
|
machineEnvironCountmonth:"0",
|
|
userEnvironCountDay:"0",
|
|
userEnvironCountMonyh:"0",
|
|
envirMonthEarlyNum:"0",
|
|
//加载模板参数
|
|
loadShow:false,
|
|
list: ["人员", "机械", "物料", "环境", "视频", "其他"],
|
|
highlight:0,
|
|
height1:"",
|
|
height2:"",
|
|
height3:"",
|
|
height4:"",
|
|
height5:"",
|
|
height6:"",
|
|
height7:"",
|
|
height8:"",
|
|
height9:"",
|
|
|
|
index_0:"",
|
|
index_1:"",
|
|
index_2:"",
|
|
index_3:"",
|
|
index_4:"",
|
|
|
|
initData:{}
|
|
},
|
|
|
|
//项目切换 返回值
|
|
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 });
|
|
},
|
|
|
|
//初始化环境状态本月预警
|
|
init_zero: function (datas_0,datas_name) {
|
|
this.zeroComponent.init((canvas, width, height,dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
});
|
|
initChart_0(chart,datas_0,datas_name);
|
|
this.chart = chart;
|
|
return chart;
|
|
});
|
|
},
|
|
|
|
//初始化人员预警
|
|
init_one: function (datas_1,datas_name) {
|
|
this.oneComponent.init((canvas, width, height,dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
});
|
|
initChart_1(chart, datas_1,datas_name);
|
|
this.chart = chart;
|
|
return chart;
|
|
});
|
|
},
|
|
|
|
//初始化机械预警
|
|
init_sex: function (datas_6,datas_name) {
|
|
this.sexComponent.init((canvas, width, height,dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
});
|
|
initChart_6(chart, datas_6,datas_name);
|
|
this.chart = chart;
|
|
return chart;
|
|
});
|
|
},
|
|
|
|
//初始化物料预警
|
|
init_two: function (datas_2) {
|
|
this.twoComponent.init((canvas, width, height,dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
});
|
|
initChart_2(chart, datas_2);
|
|
this.chart = chart;
|
|
return chart;
|
|
});
|
|
},
|
|
|
|
//初始化环境管理本月预警
|
|
init_three: function (datas_3,datas_name) {
|
|
this.threeComponent.init((canvas, width, height,dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
});
|
|
initChart_3(chart,datas_3,datas_name);
|
|
this.chart = chart;
|
|
return chart;
|
|
});
|
|
},
|
|
|
|
//初始化视频预警
|
|
init_four: function (datas_4,datas_name4) {
|
|
this.fourComponent.init((canvas, width, height,dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
});
|
|
initChart_4(chart,datas_4,datas_name4);
|
|
this.chart = chart;
|
|
return chart;
|
|
});
|
|
},
|
|
|
|
//初始化今日扬尘预警
|
|
init_five: function (value_5) {
|
|
this.fiveComponent.init((canvas, width, height,dpr) => {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
|
|
});
|
|
initChart_5(chart,value_5);
|
|
this.chart = chart;
|
|
return chart;
|
|
});
|
|
},
|
|
|
|
onClickShow() {
|
|
this.setData({ loadShow: true });
|
|
},
|
|
|
|
onClickHide() {
|
|
this.setData({ loadShow: false });
|
|
},
|
|
|
|
clickScroll(e) {
|
|
this.setData({
|
|
highlight: e.target.dataset.index
|
|
})
|
|
var height0 = this.data.height0;
|
|
var height1 = this.data.height1;
|
|
var height2 = this.data.height2;
|
|
var height3 = this.data.height3;
|
|
var height4 = this.data.height4;
|
|
var height5 = this.data.height5;
|
|
var height6 = this.data.height6;
|
|
var height7 = this.data.height7;
|
|
var height8 = this.data.height8;
|
|
var height9 = this.data.height9;
|
|
var heigth10 = 15;
|
|
|
|
var index_0 = height1+height2+height3+height4+height0+heigth10*1
|
|
var index_1 = height1+height2+height3+height4+height5+height0+heigth10*2
|
|
var index_2 = height1+height2+height3+height4+height5+height6+height0+heigth10*3
|
|
var index_3 = height1+height2+height3+height4+height5+height6+height7+height0+heigth10*4
|
|
var index_4 = height1+height2+height3+height4+height5+height6+height7+height8+height0+heigth10*5
|
|
|
|
var index = e.currentTarget.dataset.index
|
|
if(index==0){
|
|
wx.pageScrollTo({
|
|
scrollTop:index_0
|
|
})
|
|
}else if(index==1){
|
|
wx.pageScrollTo({
|
|
scrollTop:index_1
|
|
})
|
|
}else if(index==2){
|
|
wx.pageScrollTo({
|
|
scrollTop:index_2
|
|
})
|
|
}else if(index==3){
|
|
wx.pageScrollTo({
|
|
scrollTop:index_3
|
|
})
|
|
}else if(index==4){
|
|
wx.pageScrollTo({
|
|
scrollTop: index_4
|
|
})
|
|
}else{
|
|
wx.pageScrollTo({
|
|
scrollTop: 0
|
|
})
|
|
}
|
|
},
|
|
|
|
onPageScroll(e){ // 获取滚动条当前位置
|
|
var height1 = this.data.height1;
|
|
var height2 = this.data.height2;
|
|
var height3 = this.data.height3;
|
|
var height4 = this.data.height4;
|
|
var height5 = this.data.height5;
|
|
var height6 = this.data.height6;
|
|
var height7 = this.data.height7;
|
|
var height8 = this.data.height8;
|
|
var height9 = this.data.height9;
|
|
|
|
var index_0 = height1+height2+height3+height4
|
|
var index_1 = height1+height2+height3+height4+height5
|
|
var index_2 = height1+height2+height3+height4+height5+height6
|
|
var index_3 = height1+height2+height3+height4+height5+height6+height7
|
|
var index_4 = height1+height2+height3+height4+height5+height6+height7+height8
|
|
|
|
if(e.scrollTop < index_1){
|
|
this.setData({
|
|
highlight: 0
|
|
})
|
|
}else if(e.scrollTop < index_2){
|
|
this.setData({
|
|
highlight: 1
|
|
})
|
|
}else if(e.scrollTop < index_3){
|
|
this.setData({
|
|
highlight: 2
|
|
})
|
|
}else if(e.scrollTop < index_4){
|
|
this.setData({
|
|
highlight: 3
|
|
})
|
|
}
|
|
if(e.scrollTop == 1757){
|
|
this.setData({
|
|
highlight: 4
|
|
})
|
|
}
|
|
},
|
|
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad: function (options) {
|
|
|
|
let query0 = wx.createSelectorQuery();
|
|
query0.select('.height_0').boundingClientRect(rect=>{
|
|
let height0 = rect.height;
|
|
this.setData({height0:height0})
|
|
}).exec();
|
|
|
|
let query1 = wx.createSelectorQuery();
|
|
query1.select('.height_1').boundingClientRect(rect=>{
|
|
let height1 = rect.height;
|
|
this.setData({height1:height1})
|
|
}).exec();
|
|
|
|
let query2 = wx.createSelectorQuery();
|
|
query2.select('.height_2').boundingClientRect(rect=>{
|
|
let height2 = rect.height;
|
|
this.setData({height2:height2})
|
|
}).exec();
|
|
|
|
let query3 = wx.createSelectorQuery();
|
|
query3.select('.height_3').boundingClientRect(rect=>{
|
|
let height3 = rect.height;
|
|
this.setData({height3:height3})
|
|
}).exec();
|
|
|
|
let query4 = wx.createSelectorQuery();
|
|
query4.select('.height_4').boundingClientRect(rect=>{
|
|
let height4 = rect.height;
|
|
this.setData({height4:height4})
|
|
}).exec();
|
|
|
|
let query5 = wx.createSelectorQuery();
|
|
query5.select('.height_5').boundingClientRect(rect=>{
|
|
let height5 = rect.height;
|
|
this.setData({height5:height5})
|
|
}).exec();
|
|
let query6 = wx.createSelectorQuery();
|
|
query6.select('.height_6').boundingClientRect(rect=>{
|
|
let height6 = rect.height;
|
|
this.setData({height6:height6})
|
|
}).exec();
|
|
|
|
let query7 = wx.createSelectorQuery();
|
|
query7.select('.height_7').boundingClientRect(rect=>{
|
|
let height7 = rect.height;
|
|
this.setData({height7:height7})
|
|
}).exec();
|
|
|
|
let query8 = wx.createSelectorQuery();
|
|
query8.select('.height_8').boundingClientRect(rect=>{
|
|
let height8 = rect.height;
|
|
this.setData({height8:height8})
|
|
}).exec();
|
|
|
|
let query9 = wx.createSelectorQuery();
|
|
query9.select('.height_9').boundingClientRect(rect=>{
|
|
let height9 = rect.height;
|
|
this.setData({height9:height9})
|
|
}).exec();
|
|
|
|
//加载蒙版
|
|
this.onClickShow();
|
|
this.setData({aqi:value_5});
|
|
var aqi = this.data.aqi;
|
|
var percentage = aqi / 500 * 58 + 16;
|
|
if(aqi >=500){
|
|
this.setData({marginLeft:"74%"})
|
|
}else{
|
|
this.setData({marginLeft:percentage+"%"})
|
|
}
|
|
//根据id获取组件
|
|
this.zeroComponent = this.selectComponent('#mychart-zero');
|
|
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.fiveComponent = this.selectComponent('#mychart-five');
|
|
this.sexComponent = this.selectComponent('#mychart-sex');
|
|
var that = this;
|
|
//获取缓存数据
|
|
wx.getStorage({
|
|
key: 'userinfo',
|
|
success:function(res){
|
|
that.setData({
|
|
loginName:res.data.loginName,
|
|
userName:res.data.userName,
|
|
projectName: app.globalData.projectName,
|
|
projectId:app.globalData.projectId,
|
|
initData:{text:app.globalData.projectName,id:app.globalData.projectId}
|
|
})
|
|
}
|
|
})
|
|
this.getEarlyWarningData(app.globalData.projectId);
|
|
},
|
|
|
|
// 底部导航
|
|
onChange(event) {
|
|
// event.detail 的值为当前选中项的索引
|
|
this.setData({ active: event.detail });
|
|
},
|
|
|
|
//获取页面初始化预警信息
|
|
getEarlyWarningData: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/machicnery/selectMachineryEnviron',
|
|
data:{
|
|
"state":"1",
|
|
"projectId":even
|
|
},
|
|
method:"GET",
|
|
success:function(jxyj){
|
|
that.setData({
|
|
machineEnvironCountDay:jxyj.data.dayCount,
|
|
machineEnvironCountmonth:jxyj.data.monthCount,
|
|
})
|
|
if(jxyj.data.list == ''){
|
|
that.init_sex([{"value":'0',"name":''}]);
|
|
}else{
|
|
that.init_sex(jxyj.data.list);
|
|
}
|
|
}
|
|
})
|
|
|
|
//查询出环境预警数据
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/applets/selectEarlyWarning',
|
|
method:"GET",
|
|
data:{
|
|
projectId:even,
|
|
},
|
|
success:function(hjyj){
|
|
that.setData({
|
|
dayEarlyNum:hjyj.data.dayCount,
|
|
monthEarlyNum:hjyj.data.monthCount,
|
|
yangchenCount:hjyj.data.yangchenCount,
|
|
monthCount:hjyj.data.monthCount
|
|
})
|
|
}
|
|
})
|
|
|
|
//查询实时环境数据
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/applets/selectEnvironmental',
|
|
method:"GET",
|
|
data:{
|
|
projectId:even
|
|
},
|
|
success:function(envirData){
|
|
that.setData({
|
|
PM25:envirData.data.PM25,
|
|
PM10:envirData.data.PM10,
|
|
DB:envirData.data.DB,
|
|
WindSpeed:envirData.data.WindSpeed,
|
|
WindDirection:envirData.data.WindDirection,
|
|
Temperature:envirData.data.Temperature,
|
|
Humidity:envirData.data.Humidity
|
|
})
|
|
that.init_five(envirData.data.PM25);
|
|
}
|
|
})
|
|
|
|
//查询环境预警饼图数据
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/applets/selectEarlyWarningByMonth',
|
|
method:"GET",
|
|
data:{
|
|
projectId:even
|
|
},
|
|
success:function(datalist){
|
|
let envirMonthEarlyNum = 0;
|
|
for(let i = 0;i<datalist.data.length;i++){
|
|
envirMonthEarlyNum+=datalist.data[i].value
|
|
}
|
|
that.setData({
|
|
envirMonthEarlyNum:envirMonthEarlyNum
|
|
})
|
|
if(datalist.data == ''){
|
|
that.init_three([{"name":'',"value":'0'}]);
|
|
}else{
|
|
that.init_three(datalist.data,datalist.data);
|
|
}
|
|
}
|
|
})
|
|
|
|
//视频离线数饼图日
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/video/getDayOutline',
|
|
method:'GET',
|
|
data:{
|
|
"projectId":even,
|
|
"type":"1"
|
|
},
|
|
success:function(resulatData) {
|
|
if(resulatData.data.list == ''){
|
|
that.init_four([{"name":'',"value":'0'}]);
|
|
}else{
|
|
that.init_four(resulatData.data.list);
|
|
}
|
|
|
|
that.setData({
|
|
videoDay:resulatData.data.dayCount,
|
|
videoMonth:resulatData.data.monthCount
|
|
})
|
|
}
|
|
})
|
|
|
|
//查询出人员安全帽预警
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/userinfo/selectUserEnviron',
|
|
data:{
|
|
"projectId":even,
|
|
"type":"1"
|
|
},
|
|
method:"GET",
|
|
success:function(ryyj){
|
|
//关闭蒙版
|
|
that.onClickHide();
|
|
that.setData({
|
|
userEnvironCountDay:ryyj.data.dayCount,
|
|
userEnvironCountMonyh:ryyj.data.monthCount
|
|
})
|
|
if(ryyj.data.list == ''){
|
|
that.init_one([{"name":'',"value":'0'}]);
|
|
}else{
|
|
that.init_one(ryyj.data.list);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}),
|
|
|
|
//查询出当天预警信息数据
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/applets/selectEnvironDayAndMonth',
|
|
data:{
|
|
"projectId":even,
|
|
"dataNum":'3'
|
|
},
|
|
method:"GET",
|
|
success:function(res){
|
|
that.setData({
|
|
enviorDayData:res.data
|
|
})
|
|
}
|
|
}),
|
|
|
|
//查询出预警状态饼图数据
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/applets/selectEnvironPieData',
|
|
data:{
|
|
"projectId":even,
|
|
"state":'1'
|
|
},
|
|
method:"GET",
|
|
success:function(res){
|
|
that.setData({
|
|
dayCountNum:res.data.dayCount,
|
|
monthCountNum:res.data.monthCount
|
|
})
|
|
if(res.data.dayList == ''){
|
|
that.init_zero([{"name":'',"value":'0'}]);
|
|
}else{
|
|
that.init_zero(res.data.dayList,res.data.dayList);
|
|
}
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
//预警状态本日预警
|
|
CheckdDayEnviron:function(even){
|
|
this.onClickShow();
|
|
var that = this;
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/applets/selectEnvironPieData',
|
|
data:{
|
|
"projectId":even.currentTarget.dataset.projectid,
|
|
"state":'1'
|
|
},
|
|
method:"GET",
|
|
success:function(res){
|
|
that.onClickHide();
|
|
that.setData({
|
|
dayCountNum:res.data.dayCount,
|
|
monthCountNum:res.data.monthCount
|
|
})
|
|
if(res.data.dayList == ''){
|
|
that.init_zero([{"name":'',"value":'0'}]);
|
|
}else{
|
|
that.init_zero(res.data.dayList,res.data.dayList);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//预警状态本月预警
|
|
CheckdMonthEnviron:function(even){
|
|
this.onClickShow();
|
|
var that = this;
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/applets/selectEnvironPieData',
|
|
data:{
|
|
"projectId":even.currentTarget.dataset.projectid,
|
|
"state":'2'
|
|
},
|
|
method:"GET",
|
|
success:function(res){
|
|
that.onClickHide();
|
|
that.setData({
|
|
dayCountNum:res.data.dayCount,
|
|
monthCountNum:res.data.monthCount
|
|
})
|
|
if(res.data.monthList == ''){
|
|
that.init_zero([{"name":'',"value":'0'}]);
|
|
}else{
|
|
that.init_zero(res.data.monthList,res.data.monthList);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//机械预警当天与当月切换
|
|
chechMachine:function(even){
|
|
this.onClickShow();
|
|
var that = this;
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/machicnery/selectMachineryEnviron',
|
|
data:{
|
|
"state":even.currentTarget.dataset.state,
|
|
"projectId":even.currentTarget.dataset.projectid,
|
|
},
|
|
method:"GET",
|
|
success:function(jxyj){
|
|
that.onClickHide();
|
|
that.setData({
|
|
machineEnvironCountDay:jxyj.data.dayCount,
|
|
machineEnvironCountmonth:jxyj.data.monthCount,
|
|
})
|
|
if(jxyj.data.list == ''){
|
|
that.init_sex([{"name":'',"value":'0'}]);
|
|
}else{
|
|
that.init_sex(jxyj.data.list);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//人员预警本月本日切换
|
|
checkUserEnivr:function(even){
|
|
this.onClickShow();
|
|
var that = this;
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/userinfo/selectUserEnviron',
|
|
data:{
|
|
"projectId":even.currentTarget.dataset.projectid,
|
|
"type":even.currentTarget.dataset.type
|
|
},
|
|
method:"GET",
|
|
success:function(ryyj){
|
|
that.onClickHide();
|
|
that.setData({
|
|
userEnvironCountDay:ryyj.data.dayCount,
|
|
userEnvironCountMonyh:ryyj.data.monthCount
|
|
})
|
|
if(ryyj.data.list == ''){
|
|
that.init_one([{"name":'',"value":'0'}]);
|
|
}else{
|
|
that.init_one(ryyj.data.list);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//视频预警切换
|
|
chechVideo:function(even){
|
|
var that =this;
|
|
wx.request({
|
|
url: app.globalData.reqUrl+'/weixin/video/getDayOutline',
|
|
method:'GET',
|
|
data:{
|
|
"projectId":even.currentTarget.dataset.projectid,
|
|
"type":even.currentTarget.dataset.type
|
|
},
|
|
success:function(resulatData) {
|
|
if(resulatData.data.list == ''){
|
|
that.init_four([{"name":'',"value":'0'}]);
|
|
}else{
|
|
that.init_four(resulatData.data.list);
|
|
}
|
|
that.setData({
|
|
videoDay:resulatData.data.dayCount,
|
|
videoMonth:resulatData.data.monthCount
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
//跳转到预警详情页面
|
|
YJXQ:function(even){
|
|
wx.navigateTo({
|
|
url: '../yujingxinxi/yujingxinxi'
|
|
})
|
|
},
|
|
|
|
//退出登录
|
|
TCDL:function(){
|
|
wx.clearStorageSync();
|
|
wx.setStorageSync('isReload', "1")
|
|
wx.redirectTo({
|
|
url:'../login/index',
|
|
})
|
|
},
|
|
|
|
//返回到更多功能
|
|
goGCLB:function(){
|
|
wx.redirectTo({
|
|
url:'../../pages/gengduogongneng/index'
|
|
})
|
|
}
|
|
}) |