zhaobing’
1 year ago
11 changed files with 368 additions and 154 deletions
@ -1,123 +1,216 @@ |
|||
// package/deviceBigdataGraph/lifeWarning/lifeWarning.js
|
|||
import * as echarts from '../../components/ec-canvas/echarts'; |
|||
function setOption(chart, data) { |
|||
import { |
|||
getAllPatrol, |
|||
getDevices,getProjectList |
|||
} from "../../../utils/getApiUrl"; |
|||
import { |
|||
Request |
|||
} from "../../../common"; |
|||
const moment = require("../../../utils/moment"); |
|||
|
|||
function setOption(chart, seriesData, xData) { |
|||
const option = { |
|||
grid: { |
|||
top: '5%', |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: data, |
|||
type: 'line' |
|||
grid: { |
|||
top: '5%', |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
] |
|||
xAxis: { |
|||
type: 'category', |
|||
data: xData |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
}, |
|||
series: [{ |
|||
data: seriesData, |
|||
type: 'line' |
|||
}, ] |
|||
}; |
|||
chart.setOption(option); |
|||
} |
|||
} |
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
ec: { |
|||
// onInit: initChart,
|
|||
lazyLoad: true, // 将 lazyLoad 设为 true 后，需要手动初始化图表
|
|||
}, |
|||
isLoaded: false, |
|||
list: [1,2,3] |
|||
}, |
|||
initChart: function (data) { |
|||
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, data); |
|||
|
|||
// 将图表实例绑定到 this 上，可以在其他成员函数中访问
|
|||
this.chart = chart; |
|||
|
|||
this.setData({ |
|||
isLoaded: true, |
|||
}); |
|||
|
|||
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
|
|||
return chart; |
|||
}); |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
const {windowHeight}=wx.getSystemInfoSync() |
|||
const pageHeight=windowHeight - 48 |
|||
setTimeout(() => { |
|||
this.initChart([1,2,3,4,5,6]) |
|||
}, 1000) |
|||
const that = this |
|||
that.setData({pageHeight:pageHeight+'px'}) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
ec: { |
|||
// onInit: initChart,
|
|||
lazyLoad: true, // 将 lazyLoad 设为 true 后，需要手动初始化图表
|
|||
}, |
|||
isLoaded: false, |
|||
list: [1, 2, 3], |
|||
count: 0, //总设备数
|
|||
guaranteedRate: 0, //过保率
|
|||
warrantyPeriod: 0, //质保期
|
|||
next30days: [], //未来30天过期的设备列表
|
|||
}, |
|||
initChart: function (seriesData, 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, seriesData, xData); |
|||
|
|||
// 将图表实例绑定到 this 上，可以在其他成员函数中访问
|
|||
this.chart = chart; |
|||
|
|||
this.setData({ |
|||
isLoaded: true, |
|||
}); |
|||
|
|||
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
|
|||
return chart; |
|||
}); |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
const projectList=decodeURIComponent(options.arrayData) |
|||
const complexArray = JSON.parse(projectList); |
|||
const { |
|||
windowHeight |
|||
} = wx.getSystemInfoSync() |
|||
const pageHeight = windowHeight - 48 |
|||
const that = this |
|||
that.setData({ |
|||
pageHeight: pageHeight + 'px' |
|||
}) |
|||
Request.get(getDevices()).then(res => { |
|||
if (res && res.length) { |
|||
// 获取当前日期
|
|||
const currentDate = new Date(); |
|||
// 计算 30 天后的日期
|
|||
const thirtyDaysLater = new Date(currentDate); |
|||
thirtyDaysLater.setDate(thirtyDaysLater.getDate() + 30); |
|||
// 计算半年后的日期
|
|||
const sixMonthsLater = new Date(); |
|||
sixMonthsLater.setMonth(sixMonthsLater.getMonth() + 6); |
|||
// 初始化每个月的设备计数数组
|
|||
const monthlyCounts = new Array(6).fill(0); |
|||
// 创建日期范围
|
|||
const dateRange = []; |
|||
//30天内过期设备列表
|
|||
const expiringDevices = []; |
|||
for (let i = 0; i < 6; i++) { |
|||
const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + i, 1); |
|||
dateRange.push({ |
|||
start: startOfMonth, |
|||
end: new Date(startOfMonth.getFullYear(), startOfMonth.getMonth() + 1, 0) |
|||
}); |
|||
} |
|||
// 遍历设备列表
|
|||
res.forEach((device) => { |
|||
const guaranteeDate = new Date(device.dateGuarantee); |
|||
if (guaranteeDate >= currentDate && guaranteeDate <= thirtyDaysLater) { |
|||
const pointDevices = device.pointDevices; |
|||
pointDevices.forEach((pointDevice) => { |
|||
const point = pointDevice.point; |
|||
// 查找匹配项目
|
|||
const project = complexArray.find((project) => project.id === point.projectId); |
|||
if (project) { |
|||
device.project = project; |
|||
} |
|||
}); |
|||
expiringDevices.push(device); |
|||
} |
|||
// 检查设备的 dateGuarantee 是否在日期范围内
|
|||
for (let i = 0; i < dateRange.length; i++) { |
|||
if (guaranteeDate >= dateRange[i].start && guaranteeDate <= dateRange[i].end) { |
|||
// 设备在当前月内到期
|
|||
monthlyCounts[i]++; |
|||
break; // 结束循环，不需要继续检查其他月份
|
|||
} |
|||
} |
|||
}); |
|||
const xAxisLabels = []; |
|||
// 生成未来六个月的月份
|
|||
for (let i = 0; i < 6; i++) { |
|||
// const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + i, 1);
|
|||
// const year = nextMonth.getFullYear();
|
|||
// const month = String(nextMonth.getMonth() + 1).padStart(2, '0'); // 月份格式化为两位数
|
|||
// const label = `${year}-${month}`;
|
|||
// xAxisLabels.push(label);
|
|||
const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + i, 1); |
|||
const month = nextMonth.toLocaleDateString('en-US', { |
|||
month: 'short' |
|||
}); // 获取月份的缩写
|
|||
xAxisLabels.push(month); |
|||
} |
|||
//过期的
|
|||
const guaranteedRate = res.filter(item => moment(item.dateGuarantee).isBefore(moment()))?.length || 0 |
|||
//没过期的
|
|||
const warrantyPeriod = res.filter(item => moment(item.dateGuarantee).isAfter(moment()))?.length || 0 |
|||
that.setData({ |
|||
count: res.length, |
|||
guaranteedRate: guaranteedRate, |
|||
warrantyPeriod: warrantyPeriod, |
|||
next30days:expiringDevices |
|||
}) |
|||
setTimeout(() => { |
|||
this.initChart(monthlyCounts, xAxisLabels) |
|||
}, 1000) |
|||
} else { |
|||
|
|||
} |
|||
}) |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
Loading…
Reference in new issue