zhaobing’
1 year ago
8 changed files with 477 additions and 271 deletions
@ -1,143 +1,276 @@ |
|||
// package/deviceBigdataGraph/detail/detail.js
|
|||
import * as echarts from '../../components/ec-canvas/echarts'; |
|||
function setOption(chart, data1,data2) { |
|||
const option = { |
|||
legend: { |
|||
data: ['设备故障率', '设备完好率'], |
|||
top:'-5px' |
|||
}, |
|||
title:{ |
|||
text:'单位%', |
|||
top:'-5px', |
|||
textStyle:{ |
|||
fontSize:'10px', |
|||
fontWeight:'normal' |
|||
const moment = require("../../../utils/moment"); |
|||
|
|||
function setOption(chart, data1, data2,xdata) { |
|||
const option = { |
|||
legend: { |
|||
data:['设备故障率', '设备完好率'], |
|||
top: '-5px' |
|||
}, |
|||
title: { |
|||
text: '单位%', |
|||
top: '-5px', |
|||
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%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
this.ecComponent = this.selectComponent('#device-status-chart'); |
|||
|
|||
}, |
|||
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() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
Page({ |
|||
}, |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
ec: { |
|||
// onInit: initChart,
|
|||
lazyLoad: true, // 将 lazyLoad 设为 true 后，需要手动初始化图表
|
|||
}, |
|||
isLoaded: false, |
|||
list: [1,2,3] |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
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() { |
|||
|
|||
} |
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
Loading…
Reference in new issue