zhaobing’
1 year ago
11 changed files with 368 additions and 154 deletions
@ -1,123 +1,216 @@ |
|||||
// package/deviceBigdataGraph/lifeWarning/lifeWarning.js
|
// package/deviceBigdataGraph/lifeWarning/lifeWarning.js
|
||||
import * as echarts from '../../components/ec-canvas/echarts'; |
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 = { |
const option = { |
||||
grid: { |
grid: { |
||||
top: '5%', |
top: '5%', |
||||
left: '3%', |
left: '3%', |
||||
right: '4%', |
right: '4%', |
||||
bottom: '3%', |
bottom: '3%', |
||||
containLabel: true |
containLabel: true |
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value', |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
data: data, |
|
||||
type: 'line' |
|
||||
}, |
}, |
||||
] |
xAxis: { |
||||
|
type: 'category', |
||||
|
data: xData |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
}, |
||||
|
series: [{ |
||||
|
data: seriesData, |
||||
|
type: 'line' |
||||
|
}, ] |
||||
}; |
}; |
||||
chart.setOption(option); |
chart.setOption(option); |
||||
} |
} |
||||
Page({ |
Page({ |
||||
|
|
||||
/** |
/** |
||||
* 页面的初始数据 |
* 页面的初始数据 |
||||
*/ |
*/ |
||||
data: { |
data: { |
||||
ec: { |
ec: { |
||||
// onInit: initChart,
|
// onInit: initChart,
|
||||
lazyLoad: true, // 将 lazyLoad 设为 true 后，需要手动初始化图表
|
lazyLoad: true, // 将 lazyLoad 设为 true 后，需要手动初始化图表
|
||||
}, |
}, |
||||
isLoaded: false, |
isLoaded: false, |
||||
list: [1,2,3] |
list: [1, 2, 3], |
||||
}, |
count: 0, //总设备数
|
||||
initChart: function (data) { |
guaranteedRate: 0, //过保率
|
||||
this.ecComponent = this.selectComponent('#device-status-chart'); |
warrantyPeriod: 0, //质保期
|
||||
this.ecComponent.init((canvas, width, height, dpr) => { |
next30days: [], //未来30天过期的设备列表
|
||||
const chart = echarts.init(canvas, null, { |
}, |
||||
width: width, |
initChart: function (seriesData, xData) { |
||||
height: height, |
this.ecComponent = this.selectComponent('#device-status-chart'); |
||||
devicePixelRatio: dpr // new
|
this.ecComponent.init((canvas, width, height, dpr) => { |
||||
}); |
const chart = echarts.init(canvas, null, { |
||||
setOption(chart, data); |
width: width, |
||||
|
height: height, |
||||
// 将图表实例绑定到 this 上，可以在其他成员函数中访问
|
devicePixelRatio: dpr // new
|
||||
this.chart = chart; |
}); |
||||
|
setOption(chart, seriesData, xData); |
||||
this.setData({ |
|
||||
isLoaded: true, |
// 将图表实例绑定到 this 上，可以在其他成员函数中访问
|
||||
}); |
this.chart = chart; |
||||
|
|
||||
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
|
this.setData({ |
||||
return chart; |
isLoaded: true, |
||||
}); |
}); |
||||
}, |
|
||||
/** |
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
|
||||
* 生命周期函数--监听页面加载 |
return chart; |
||||
*/ |
}); |
||||
onLoad(options) { |
}, |
||||
const {windowHeight}=wx.getSystemInfoSync() |
/** |
||||
const pageHeight=windowHeight - 48 |
* 生命周期函数--监听页面加载 |
||||
setTimeout(() => { |
*/ |
||||
this.initChart([1,2,3,4,5,6]) |
onLoad(options) { |
||||
}, 1000) |
const projectList=decodeURIComponent(options.arrayData) |
||||
const that = this |
const complexArray = JSON.parse(projectList); |
||||
that.setData({pageHeight:pageHeight+'px'}) |
const { |
||||
}, |
windowHeight |
||||
|
} = wx.getSystemInfoSync() |
||||
/** |
const pageHeight = windowHeight - 48 |
||||
* 生命周期函数--监听页面初次渲染完成 |
const that = this |
||||
*/ |
that.setData({ |
||||
onReady() { |
pageHeight: pageHeight + 'px' |
||||
|
}) |
||||
}, |
Request.get(getDevices()).then(res => { |
||||
|
if (res && res.length) { |
||||
/** |
// 获取当前日期
|
||||
* 生命周期函数--监听页面显示 |
const currentDate = new Date(); |
||||
*/ |
// 计算 30 天后的日期
|
||||
onShow() { |
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); |
||||
onHide() { |
// 创建日期范围
|
||||
|
const dateRange = []; |
||||
}, |
//30天内过期设备列表
|
||||
|
const expiringDevices = []; |
||||
/** |
for (let i = 0; i < 6; i++) { |
||||
* 生命周期函数--监听页面卸载 |
const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + i, 1); |
||||
*/ |
dateRange.push({ |
||||
onUnload() { |
start: startOfMonth, |
||||
|
end: new Date(startOfMonth.getFullYear(), startOfMonth.getMonth() + 1, 0) |
||||
}, |
}); |
||||
|
} |
||||
/** |
// 遍历设备列表
|
||||
* 页面相关事件处理函数--监听用户下拉动作 |
res.forEach((device) => { |
||||
*/ |
const guaranteeDate = new Date(device.dateGuarantee); |
||||
onPullDownRefresh() { |
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) { |
||||
onReachBottom() { |
device.project = project; |
||||
|
} |
||||
}, |
}); |
||||
|
expiringDevices.push(device); |
||||
/** |
} |
||||
* 用户点击右上角分享 |
// 检查设备的 dateGuarantee 是否在日期范围内
|
||||
*/ |
for (let i = 0; i < dateRange.length; i++) { |
||||
onShareAppMessage() { |
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