import * as echarts from '../../components/ec-canvas/echarts';
|
var Constant = require('../../utils/constant.js');
|
var util = require('../../utils/util.js');
|
var historyChart = null;
|
Page({
|
|
/**
|
* 页面的初始数据
|
*/
|
data: {
|
ContentID: '',
|
ec1: {
|
onInit: function (canvas, width, height, dpr) {
|
historyChart = echarts.init(canvas, null, {
|
width: width,
|
height: height,
|
devicePixelRatio: dpr
|
});
|
canvas.setChart(historyChart);
|
return historyChart;
|
}
|
},
|
startPoint: null,
|
windowWidth: 0, //设备的宽度
|
windowHeight: 0, //设备的高度
|
refreshButtonTop: 0,
|
refreshButtonLeft: 0,
|
recordsHistory: [], //历史记录
|
today: util.formatDay(new Date()),
|
historyStartDate: "2021-01-01",
|
historyEndDate: util.formatDay(new Date()),
|
isShowChart: false, //当传入的值的类型是数值类型的时候显示图表
|
},
|
|
/**
|
* 生命周期函数--监听页面加载
|
*/
|
onLoad: function (options) {
|
var that = this
|
let itemObj = JSON.parse(options.item)
|
wx.setNavigationBarTitle({
|
title: itemObj.Name,
|
})
|
// console.log(itemObj, '单个巡检点信息')
|
let valueType = itemObj.ValueType
|
if (valueType == 1 || valueType == 2) {
|
this.setData({
|
isShowChart: true
|
})
|
} else {
|
this.setData({
|
isShowChart: false
|
})
|
}
|
|
//获取设备的宽高
|
wx.getSystemInfo({ //用于实现移动本界面的刷新图标
|
success: function (res) {
|
that.setData({
|
windowHeight: res.windowHeight,
|
windowWidth: res.windowWidth,
|
refreshButtonTop: res.windowHeight * 0.80, //这里定义刷新按钮的初始位置
|
refreshButtonLeft: res.windowWidth * 0.85, //这里定义刷新按钮的初始位置
|
})
|
}
|
})
|
this.setData({
|
ContentID: itemObj.ContentID
|
})
|
|
this.getHistoryRecord()
|
},
|
//获取历史记录
|
getHistoryRecord: function () {
|
wx.showLoading({
|
title: '加载中...',
|
})
|
let ContentID = this.data.ContentID
|
let StartDay = this.data.historyStartDate
|
let EndDay = this.data.historyEndDate
|
let recordData = []
|
wx.request({
|
url: Constant.BASE_SERVER_URL + 'repair/Mobile/InspectRecord/GetContentHistoryValueList',
|
method: 'GET',
|
data: {
|
ContentID: ContentID,
|
StartDay: StartDay,
|
EndDay: EndDay
|
},
|
success: res => {
|
wx.hideLoading()
|
// console.log(res, '349')
|
let result = res.data
|
if (result.Code != 0) {
|
wx.showModal({
|
title: '提示',
|
content: result.Message,
|
})
|
this.setData({
|
recordsHistory: []
|
})
|
//console.log(this.data.recordsHistory)
|
return;
|
}
|
if (result.Data.length == 0 || result.Data == "" || result.Data == undefined) {
|
wx.showModal({
|
title: '提示',
|
content: '未查询到数据',
|
})
|
this.setData({
|
recordsHistory: []
|
})
|
//console.log(this.data.recordsHistory)
|
return;
|
}
|
for (let i = 0; i < result.Data.length; i++) {
|
let record = result.Data[i]
|
record.Time = util.functions.sub(record.Time, 0, 16)
|
this.getHistoryRecordStatus(record)
|
recordData.push(record)
|
}
|
|
this.setData({
|
recordsHistory: recordData.reverse()
|
})
|
// console.log(recordData, 375)
|
},
|
fail: err => {
|
wx.hideLoading()
|
// console.log(err)
|
wx.showModal({
|
title: '提示',
|
content: err,
|
})
|
}
|
})
|
},
|
//修改历史记录的状态及值类型对应的相应文字
|
getHistoryRecordStatus(record) {
|
if (record.Status == 1) {
|
record.Status = '正常'
|
record.textColor = ""
|
}
|
if (record.Status == 2) {
|
record.Status = '异常'
|
record.textColor = "text-red"
|
}
|
// if () {
|
|
// }
|
return record
|
},
|
//初始化图标
|
initHistoryChart: function () {
|
var that = this
|
let recordsHistory = that.data.recordsHistory
|
let xData = []
|
let seriesData = []
|
let warryCount = []
|
|
|
// console.log(recordsHistory)
|
for (let i = 0; i < recordsHistory.length; i++) {
|
recordsHistory[i].Time = util.functions.sub(recordsHistory[i].Time, 0, 16)
|
xData.push(recordsHistory[i].Time)
|
seriesData.push(recordsHistory[i].Value)
|
|
if (recordsHistory[i].Status == '异常') {
|
let real_alarm_point = {
|
value: "",
|
coord: [recordsHistory[i].Time, recordsHistory[i].Value],
|
itemStyle: {
|
color: '#ff0000'
|
}
|
}
|
warryCount.push(real_alarm_point)
|
}
|
}
|
|
// console.log(xData, seriesData)
|
historyChart.setOption({
|
title: {
|
text: '历史巡检值',
|
top: '15',
|
left: 'center',
|
align: 'right',
|
textStyle: {
|
color: '#16b5cb'
|
}
|
},
|
tooltip: {
|
show: true,
|
trigger: 'axis',
|
formatter: function (params) {
|
// console.log('50', params);
|
return '时间：' + util.functions.sub(params[0].axisValue) + '\n' + "实时值：" + params[0].value;
|
},
|
},
|
grid: {
|
bottom: '20%',
|
},
|
xAxis: {
|
type: 'category',
|
data: xData,
|
axisLine: {
|
onZero: false
|
},
|
axisTick: {
|
alignWithLabel: true,
|
show: true,
|
interval: 'auto'
|
},
|
axisLabel: {
|
formatter: function (value, index) {
|
// console.log('50', value);
|
let time = new Date(value)
|
let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
|
let day = time.getDate()
|
return month + '-' + day
|
},
|
}
|
|
},
|
yAxis: {
|
type: 'value',
|
splitLine: {
|
lineStyle: {
|
type: 'dashed' // y轴分割线类型
|
}
|
},
|
},
|
dataZoom: [{
|
type: 'slider', //图表下方的伸缩条
|
show: true, //是否显示
|
realtime: true, //
|
start: 0, //伸缩条开始位置（1-100），可以随时更改
|
end: 100, //伸缩条结束位置（1-100），可以随时更改
|
left: 10,
|
right: 15,
|
fillerColor: "rgba(22,181,203,0.4)", //选中范围的填充颜色。
|
borderColor: "#ddd", //边框颜色。
|
backgroundColor: "rgba(167,183,204,0.4)", //组件的背景颜色
|
throttle: 100, //设置触发视图刷新的频率。单位为毫秒（ms）。
|
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
handleSize: '80%', // 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
|
handleStyle: {
|
color: '#16b5cb',
|
shadowBlur: 3, // shadowBlur图片阴影模糊值，shadowColor阴影的颜色
|
shadowColor: '#77CCD8',
|
shadowOffsetX: 1,
|
shadowOffsetY: 1,
|
opacity: 0.6,
|
}
|
}],
|
series: [{
|
data: seriesData,
|
type: 'line',
|
smooth: false,
|
itemStyle: {
|
normal: {
|
color: '#16b5cb', //改变折线点的颜色
|
lineStyle: {
|
color: '#16b5cb' //改变折线颜色
|
}
|
}
|
},
|
markPoint: {
|
symbol: 'pin',
|
symbolSize: 10,
|
data: warryCount
|
},
|
markLine: {
|
data: [{
|
type: 'max',
|
name: '最大值',
|
},
|
{
|
type: 'min',
|
name: '最小值',
|
}
|
],
|
}
|
}]
|
})
|
},
|
|
//开始时间选择
|
bindStartDateChange: function (e) {
|
var that = this
|
that.setData({
|
historyStartDate: e.detail.value
|
})
|
that.getHistoryRecord()
|
setTimeout(() => {
|
that.initHistoryChart()
|
}, 500);
|
},
|
//结束时间选择
|
bindEndDateChange: function (e) {
|
var that = this
|
that.setData({
|
historyEndDate: e.detail.value
|
})
|
that.getHistoryRecord()
|
setTimeout(() => {
|
that.initHistoryChart()
|
}, 500);
|
},
|
//刷新
|
tapRefreshTree: function () {
|
this.getHistoryRecord()
|
this.initHistoryChart()
|
},
|
|
//以下是按钮拖动事件
|
buttonStart: function (e) {
|
let startPoint = this.data.startPoint
|
startPoint = e.touches[0] //获取拖动开始点
|
this.setData({
|
startPoint: startPoint
|
})
|
},
|
buttonMove: function (e) {
|
let startPoint = this.data.startPoint
|
let endPoint = e.touches[e.touches.length - 1] //获取拖动结束点
|
//计算在X轴上拖动的距离和在Y轴上拖动的距离
|
let translateX = endPoint.clientX - startPoint.clientX
|
let translateY = endPoint.clientY - startPoint.clientY
|
startPoint = endPoint //重置开始位置
|
let refreshButtonTop = this.data.refreshButtonTop + translateY
|
let refreshButtonLeft = this.data.refreshButtonLeft + translateX
|
//判断是移动否超出屏幕
|
if (refreshButtonLeft + 50 >= this.data.windowWidth) {
|
refreshButtonLeft = this.data.windowWidth - 50;
|
}
|
if (refreshButtonLeft <= 0) {
|
refreshButtonLeft = 0;
|
}
|
if (refreshButtonTop <= 0) {
|
refreshButtonTop = 0
|
}
|
if (refreshButtonTop + 50 >= this.data.windowHeight) {
|
refreshButtonTop = this.data.windowHeight - 50;
|
}
|
this.setData({
|
refreshButtonTop: refreshButtonTop,
|
refreshButtonLeft: refreshButtonLeft,
|
startPoint: startPoint
|
})
|
},
|
buttonEnd: function () {},
|
/**
|
* 生命周期函数--监听页面初次渲染完成
|
*/
|
onReady: function () {
|
var that = this
|
let isShowChart = that.data.isShowChart
|
if (isShowChart) {
|
setTimeout(function () {
|
that.initHistoryChart()
|
}, 1000)
|
}
|
},
|
|
/**
|
* 生命周期函数--监听页面显示
|
*/
|
onShow: function () {
|
|
},
|
|
/**
|
* 生命周期函数--监听页面隐藏
|
*/
|
onHide: function () {
|
|
},
|
|
/**
|
* 生命周期函数--监听页面卸载
|
*/
|
onUnload: function () {
|
|
},
|
|
/**
|
* 页面相关事件处理函数--监听用户下拉动作
|
*/
|
onPullDownRefresh: function () {
|
|
},
|
|
/**
|
* 页面上拉触底事件的处理函数
|
*/
|
onReachBottom: function () {
|
|
},
|
|
/**
|
* 用户点击右上角分享
|
*/
|
onShareAppMessage: function () {
|
|
}
|
})
|
