zhaobing’
1 year ago
8 changed files with 477 additions and 271 deletions
@ -1,143 +1,276 @@ |
|||||
// package/deviceBigdataGraph/detail/detail.js
|
// package/deviceBigdataGraph/detail/detail.js
|
||||
import * as echarts from '../../components/ec-canvas/echarts'; |
import * as echarts from '../../components/ec-canvas/echarts'; |
||||
function setOption(chart, data1,data2) { |
const moment = require("../../../utils/moment"); |
||||
const option = { |
|
||||
legend: { |
function setOption(chart, data1, data2,xdata) { |
||||
data: ['设备故障率', '设备完好率'], |
const option = { |
||||
top:'-5px' |
legend: { |
||||
}, |
data:['设备故障率', '设备完好率'], |
||||
title:{ |
top: '-5px' |
||||
text:'单位%', |
}, |
||||
top:'-5px', |
title: { |
||||
textStyle:{ |
text: '单位%', |
||||
fontSize:'10px', |
top: '-5px', |
||||
fontWeight:'normal' |
textStyle: { |
||||
|
fontSize: '10px', |
||||
|
fontWeight: 'normal' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
top: '5%', |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data:xdata |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
}, |
||||
|
series: [{ |
||||
|
name: '设备完好率', |
||||
|
data: data1, |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
name: '设备故障率', |
||||
|
data: data2, |
||||
|
type: 'line' |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
chart.setOption(option); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
ec: { |
||||
|
// onInit: initChart,
|
||||
|
lazyLoad: true, // 将 lazyLoad 设为 true 后，需要手动初始化图表
|
||||
|
}, |
||||
|
isLoaded: false, |
||||
|
list: [1, 2, 3], |
||||
|
count: 0, //设备总数
|
||||
|
deviceList: [], //设备列表
|
||||
|
equipmentFailureRate: 0, //设备故障率
|
||||
|
equipmentIntegrityRate: 0, //设备完好率
|
||||
|
normalCount: 0, //正常数量
|
||||
|
abnormalCount: 0, //异常数量
|
||||
|
unknownCount: 0, //未知数量
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
initChart: function (data1, data2,xData) { |
||||
|
this.ecComponent = this.selectComponent('#device-status-chart'); |
||||
|
this.ecComponent.init((canvas, width, height, dpr) => { |
||||
|
const chart = echarts.init(canvas, null, { |
||||
|
width: width, |
||||
|
height: height, |
||||
|
devicePixelRatio: dpr // new
|
||||
|
}); |
||||
|
setOption(chart, data1, data2,xData); |
||||
|
|
||||
|
// 将图表实例绑定到 this 上，可以在其他成员函数中访问
|
||||
|
this.chart = chart; |
||||
|
|
||||
|
this.setData({ |
||||
|
isLoaded: true, |
||||
|
}); |
||||
|
|
||||
|
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
|
||||
|
return chart; |
||||
|
}); |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
const that = this |
||||
|
//上次菜单传入设备列表
|
||||
|
const complexArray = JSON.parse(decodeURIComponent(options.arrayData)); |
||||
|
//上级菜单传入巡检记录
|
||||
|
const patrolRecord = JSON.parse(decodeURIComponent(options.patrolRecord)) |
||||
|
const today = moment(); |
||||
|
// 创建一个对象来存储每个pointId的最大inspectionTime
|
||||
|
const maxInspectionTimeByPointId = {}; |
||||
|
const sevenDaysAgo = moment().subtract(7, 'days'); // 获取七天前的日期
|
||||
|
// 过滤出近七天内的最新记录(同点位+同一天的最新记录)
|
||||
|
const latestRecords = patrolRecord.filter((record) => { |
||||
|
const inspectionDate = moment(record.inspectionTime).format('YYYY-MM-DD'); |
||||
|
const isWithin7Days = moment(today).diff(inspectionDate, 'days') <= 7; |
||||
|
if (!isWithin7Days) { |
||||
|
return false; |
||||
|
} |
||||
|
return patrolRecord.every((r) => { |
||||
|
if (r.pointId === record.pointId && moment(r.inspectionTime).isSame(moment(record.inspectionTime), 'day')) { |
||||
|
return moment(r.inspectionTime).isSameOrBefore(moment(record.inspectionTime)); |
||||
|
} |
||||
|
return true; |
||||
|
}); |
||||
|
}); |
||||
|
//调用每天的函数处理每天的正常-异常-未知的个数
|
||||
|
const sevenDays= that.calculateDailyDeviceStatusCounts(latestRecords) |
||||
|
// 遍历数据并更新maxInspectionTimeByPointId
|
||||
|
patrolRecord.forEach((item) => { |
||||
|
const {pointId,inspectionTime} = item; |
||||
|
if (pointId in maxInspectionTimeByPointId) { |
||||
|
if (inspectionTime > maxInspectionTimeByPointId[pointId]) { |
||||
|
maxInspectionTimeByPointId[pointId] = inspectionTime; |
||||
|
} |
||||
|
} else { |
||||
|
maxInspectionTimeByPointId[pointId] = inspectionTime; |
||||
|
} |
||||
|
}); |
||||
|
// 过滤数据以获取相同pointId中inspectionTime最大的记录
|
||||
|
const filteredData = patrolRecord.filter((item) => { |
||||
|
const { pointId,inspectionTime} = item; |
||||
|
const inspectionDate = moment(inspectionTime); |
||||
|
if (inspectionDate.isBetween(sevenDaysAgo, today, null, '[]')) { |
||||
|
return inspectionTime === maxInspectionTimeByPointId[pointId]; |
||||
|
} |
||||
|
return false; |
||||
|
}); |
||||
|
//七天内最新的数据(正常)
|
||||
|
const statusCounts =that.classifiedStatistics(filteredData) |
||||
|
const {unknown,normal,abnormal}=statusCounts |
||||
|
const deviceCount=complexArray.length |
||||
|
that.setData({ |
||||
|
count: complexArray.length || 0, |
||||
|
deviceList: complexArray, |
||||
|
equipmentFailureRate:deviceCount?Math.round(((unknown+abnormal)/deviceCount)*100):0, |
||||
|
quipmentIntegrityRate:deviceCount?Math.round((normal/deviceCount)*100):0 |
||||
|
}) |
||||
|
//正常数据
|
||||
|
const data1=Object.values(sevenDays).map(item=>Number(Math.round((item.normal/complexArray.length)*100))) |
||||
|
//故障数据
|
||||
|
const data2=Object.values(sevenDays).map(item=>Number(Math.round((item.abnormal+item.unknown/complexArray.length)*100))) |
||||
|
const xData=Object.keys(sevenDays) |
||||
|
setTimeout(() => { |
||||
|
that.initChart(data1,data2,xData) |
||||
|
}, 1000) |
||||
|
|
||||
|
}, |
||||
|
//分类统计设备,异常-正常-未知个数
|
||||
|
classifiedStatistics:function(list){ |
||||
|
let normal = 0; |
||||
|
let abnormal = 0; |
||||
|
let unknown = 0; |
||||
|
list.forEach((item) => { |
||||
|
const inspectContent = item.alarm ? (item?.points?.inspectContent || []) : []; |
||||
|
if (inspectContent && inspectContent.length && Array.isArray(inspectContent)) { |
||||
|
inspectContent.forEach((p) => { |
||||
|
// 如果设备有报警
|
||||
|
if (p.alarm) { |
||||
|
if (item.patrolRecordIssueHandles.length) { |
||||
|
const state = item.patrolRecordIssueHandles[0].state; |
||||
|
if (state === 6) { |
||||
|
// 正常
|
||||
|
normal += 1; |
||||
|
} else if (state === 5) { |
||||
|
// 未知
|
||||
|
unknown += 1; |
||||
|
} else { |
||||
|
// 异常
|
||||
|
abnormal += 1; |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
// 正常
|
||||
|
normal += 1; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
return {normal,unknown,abnormal} |
||||
|
}, |
||||
|
//统计每天异常-正常-未知个数
|
||||
|
calculateDailyDeviceStatusCounts:function(data) { |
||||
|
const dateRange = [] |
||||
|
const today = moment() |
||||
|
for (let i = 6; i >= 0; i--) { |
||||
|
dateRange.push(today.clone().subtract(i, 'days').format('YYYY-MM-DD')); |
||||
} |
} |
||||
|
const dailyCounts = {}; |
||||
|
// 初始化每一天的统计为零
|
||||
|
dateRange.forEach((date) => { |
||||
|
dailyCounts[date] = { |
||||
|
normal: 0, |
||||
|
unknown: 0, |
||||
|
abnormal: 0 |
||||
|
}; |
||||
|
}); |
||||
|
// 遍历数据，根据日期统计
|
||||
|
data.forEach((item) => { |
||||
|
const inspectionDate = moment(item.inspectionTime).format('YYYY-MM-DD'); |
||||
|
if (dailyCounts[inspectionDate] !== undefined) { |
||||
|
const status = item.patrolRecordIssueHandles.length ? item.patrolRecordIssueHandles[0].state : 6; |
||||
|
if (status === 6) { |
||||
|
dailyCounts[inspectionDate].normal += 1; |
||||
|
} else if (status === 5) { |
||||
|
dailyCounts[inspectionDate].unknown += 1; |
||||
|
} else { |
||||
|
dailyCounts[inspectionDate].abnormal += 1; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
return dailyCounts; |
||||
}, |
}, |
||||
grid: { |
/** |
||||
top: '5%', |
* 生命周期函数--监听页面初次渲染完成 |
||||
left: '3%', |
*/ |
||||
right: '4%', |
onReady() { |
||||
bottom: '3%', |
this.ecComponent = this.selectComponent('#device-status-chart'); |
||||
containLabel: true |
|
||||
}, |
}, |
||||
xAxis: { |
|
||||
type: 'category', |
/** |
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow() { |
||||
|
|
||||
}, |
}, |
||||
yAxis: { |
|
||||
type: 'value', |
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide() { |
||||
|
|
||||
}, |
}, |
||||
series: [ |
|
||||
{ |
|
||||
name:'设备完好率', |
|
||||
data: data1, |
|
||||
type: 'line' |
|
||||
}, |
|
||||
{ |
|
||||
name:'设备故障率', |
|
||||
data: data2, |
|
||||
type: 'line' |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
chart.setOption(option); |
|
||||
} |
|
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
Page({ |
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh() { |
||||
|
|
||||
/** |
}, |
||||
* 页面的初始数据 |
|
||||
*/ |
/** |
||||
data: { |
* 页面上拉触底事件的处理函数 |
||||
ec: { |
*/ |
||||
// onInit: initChart,
|
onReachBottom() { |
||||
lazyLoad: true, // 将 lazyLoad 设为 true 后，需要手动初始化图表
|
|
||||
}, |
}, |
||||
isLoaded: false, |
|
||||
list: [1,2,3] |
/** |
||||
}, |
* 用户点击右上角分享 |
||||
|
*/ |
||||
/** |
onShareAppMessage() { |
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
} |
||||
initChart: function (data1,data2) { |
|
||||
this.ecComponent = this.selectComponent('#device-status-chart'); |
|
||||
|
|
||||
this.ecComponent.init((canvas, width, height, dpr) => { |
|
||||
const chart = echarts.init(canvas, null, { |
|
||||
width: width, |
|
||||
height: height, |
|
||||
devicePixelRatio: dpr // new
|
|
||||
}); |
|
||||
setOption(chart, data1,data2); |
|
||||
|
|
||||
// 将图表实例绑定到 this 上，可以在其他成员函数中访问
|
|
||||
this.chart = chart; |
|
||||
|
|
||||
this.setData({ |
|
||||
isLoaded: true, |
|
||||
}); |
|
||||
|
|
||||
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
|
|
||||
return chart; |
|
||||
}); |
|
||||
}, |
|
||||
onLoad(options) { |
|
||||
setTimeout(() => { |
|
||||
this.initChart([1,2,3,4,5,6],[1,2,3,10,1]) |
|
||||
}, 1000) |
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面初次渲染完成 |
|
||||
*/ |
|
||||
onReady() { |
|
||||
this.ecComponent = this.selectComponent('#device-status-chart'); |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面显示 |
|
||||
*/ |
|
||||
onShow() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面隐藏 |
|
||||
*/ |
|
||||
onHide() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面卸载 |
|
||||
*/ |
|
||||
onUnload() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 页面相关事件处理函数--监听用户下拉动作 |
|
||||
*/ |
|
||||
onPullDownRefresh() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 页面上拉触底事件的处理函数 |
|
||||
*/ |
|
||||
onReachBottom() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 用户点击右上角分享 |
|
||||
*/ |
|
||||
onShareAppMessage() { |
|
||||
|
|
||||
} |
|
||||
}) |
}) |
||||
Loading…
Reference in new issue