// test/reportTable/index.js
|
import * as echarts from '../../components/ec-canvas/echarts';
|
var dateTimePickerCtrl = require('../../utils/dateTimePicker.js'); //日期控件
|
var Constant = require('../../utils/constant.js');
|
var util = require('../../utils/util.js');
|
|
|
|
//求和
|
function sumInArray(arr) {
|
return arr.reduce((pre, cur) => {
|
return pre + cur
|
})
|
}
|
|
//计算echarts 的 max ，min ，interval
|
function getChartMaxMinInterval(max, min, splitNumber) {
|
function getMaxMinNumber(n, l) {
|
var a1 = Math.floor(Math.log(n) / Math.LN10)
|
var b
|
if (l) {
|
a1 < 2 ? b = (n / Math.pow(10, a1) - parseInt(n / Math.pow(10, a1))) > 0.5 ? Math.round(n / Math.pow(10, a1)) * Math.pow(10, a1) : (parseInt(n / Math.pow(10, a1)) + 0.5) * Math.pow(10, a1) : b = Math.ceil(n / Math.pow(10, 1)) * Math.pow(10, 1)
|
} else {
|
a1 < 2 ? b = (n / Math.pow(10, a1) - parseInt(n / Math.pow(10, a1))) > 0.5 ? (parseInt(n / Math.pow(10, a1)) + 0.5) * Math.pow(10, a1) : Math.floor(n / Math.pow(10, a1)) * Math.pow(10, a1) : b = Math.floor(n / Math.pow(10, 1)) * Math.pow(10, 1)
|
}
|
return l ? -20 <= a1 ? +b.toFixed(a1 < 0 ? -a1 + 1 : 0) : b : b
|
}
|
var interval = 0;
|
if ((max - min) % splitNumber != 0) {
|
interval = getMaxMinNumber((max - min) / splitNumber, 1);
|
max = parseFloat((parseFloat((interval * splitNumber).toFixed(12)) + min).toFixed(12)) //解决小数精度一般问题，极端问题并不能解决。
|
min = min
|
} else {
|
interval = (max - min) / splitNumber;
|
min = min
|
max = max
|
}
|
return {
|
max: max,
|
min: min,
|
interval: interval
|
}
|
}
|
|
var m_echart_q = null; //供水量图表
|
var m_echart_d = null; //用电量图表
|
var m_echart_nh = null; //千吨水能耗图表
|
Page({
|
|
/**
|
* 页面的初始数据
|
*/
|
data: {
|
width: '',
|
height: '',
|
colHeight: '',
|
colWidth: '',
|
scrollTop: 0,
|
VerticalNavTop: 0,
|
stationName: '', //泵站名称
|
stationID: '', //泵站id
|
requestData: {
|
stationID: "",
|
year: '',
|
month: '',
|
},
|
dataMaxD: 10,
|
dataMaxQ: 10,
|
dataMaxNH: 10,
|
backgroundSizeD: [],
|
backgroundSizeQ: [],
|
backgroundSizeNH: [],
|
dateStart: "",
|
dateEnd: "",
|
startDate: "",
|
endDate: "",
|
selectDate: '', //日期选择后的日期
|
isShowFilter: false, //是否显示日期筛选
|
isLeftScroll: false, //判断左边的scroll-view 的方法是否调用
|
isRightScroll: false, //判断右边的scroll-view 的方法是否调用
|
timeList: [], //存储开关机时间、用电量、供水量的数组，
|
list: [], //存储表格内容元素宽高的数组
|
load: true,
|
curveTabIndex:0,
|
q: { //供水量
|
onInit: function (canvas, width, height, dpr) {
|
m_echart_q = echarts.init(canvas, null, {
|
width: width,
|
height: height,
|
devicePixelRatio: dpr
|
});
|
canvas.setChart(m_echart_q);
|
return m_echart_q;
|
}
|
},
|
d: { //用电量
|
onInit: function (canvas, width, height, dpr) {
|
m_echart_d = echarts.init(canvas, null, {
|
width: width,
|
height: height,
|
devicePixelRatio: dpr
|
});
|
canvas.setChart(m_echart_d);
|
return m_echart_d;
|
}
|
},
|
nh: { //千吨水能耗
|
onInit: function (canvas, width, height, dpr) {
|
m_echart_nh = echarts.init(canvas, null, {
|
width: width,
|
height: height,
|
devicePixelRatio: dpr
|
});
|
canvas.setChart(m_echart_nh);
|
return m_echart_nh;
|
}
|
},
|
chartData: [],//图表数据
|
|
},
|
|
/**
|
* 生命周期函数--监听页面加载
|
*/
|
onLoad: function (options) {
|
// console.log(options, 328)
|
// options.id = 13;
|
// options.name = "松花江泵站";
|
|
let that = this;
|
wx.getSystemInfo({ //获取设备的宽度和高度
|
success: (res) => {
|
// console.log(res.windowWidth, res.windowHeight, '设备物理宽高')
|
that.setData({
|
width: res.windowWidth,
|
height: res.windowHeight
|
})
|
},
|
fail: (err) => {
|
console.log(err)
|
}
|
})
|
that.initialDateTimePicker();
|
var requestData = that.data.requestData
|
requestData.stationID = options.id
|
that.setData({
|
stationID: options.id,
|
requestData: requestData,
|
stationName: options.name
|
})
|
that.initData();
|
},
|
//初始化数据
|
initData: function () {
|
wx.showLoading({
|
title: '数据加载中...',
|
})
|
var that = this
|
var requestData = that.data.requestData
|
wx.request({
|
url: Constant.BASE_SERVER_URL + 'Main/Mobile/StationRunAna/GetSingleMonthStatisticsInfo',
|
method: "GET",
|
data: {
|
StationID: requestData.stationID,
|
Year: requestData.year,
|
Month: requestData.month
|
},
|
success: res => {
|
wx.hideLoading()
|
var result = res.data.Data
|
// console.log(result)
|
//return
|
if (res.data.Code != 0) {
|
wx.showToast({
|
title: '数据加载失败',
|
icon: 'none',
|
duration: 2000
|
})
|
return;
|
}
|
//构造表格需要的数据格式
|
var recordArr = result.DayRecords;
|
var tempArr = []
|
var chartData = []
|
|
for (var i = 0; i < recordArr.length; i++) {
|
var item = recordArr[i];
|
var D = item.Ed ? item.Ed : 0
|
var day = item.Day
|
var Q = item.Ws ? item.Ws : 0
|
var NH = 0
|
if (Q != 0 && D != 0) {
|
NH = D * 1000 / Q;
|
NH = parseFloat(NH.toFixed(2));
|
}
|
tempArr.push({
|
Q: Q,
|
day: new Date(day).getDate(),
|
D: D,
|
NH: NH
|
})
|
chartData.push({
|
Q: Q,
|
day: day,
|
D: D,
|
NH: NH
|
})
|
|
}
|
// console.log(chartData)
|
|
var dataMaxArrD = tempArr.map(item => {
|
return item.D
|
})
|
var dataMaxD = Math.max.apply(null, dataMaxArrD)
|
var dataMaxArrQ = tempArr.map(item => {
|
return item.Q
|
})
|
var dataMaxQ = Math.max.apply(null, dataMaxArrQ)
|
|
var dataMaxArrNH = tempArr.map(item => {
|
return item.NH
|
})
|
var dataMaxNH = Math.max.apply(null, dataMaxArrNH)
|
|
|
var QS = sumInArray(dataMaxArrQ)
|
var DS = sumInArray(dataMaxArrD)
|
DS = parseFloat(DS.toFixed(2))
|
QS = parseFloat(QS.toFixed(0))
|
|
var NHS = sumInArray(dataMaxArrNH)
|
NHS = parseFloat(NHS.toFixed(2))
|
|
var backgroundSizeD = [];
|
var backgroundSizeQ = [];
|
var backgroundSizeNH = [];
|
if (dataMaxD > 0) {
|
backgroundSizeD = tempArr.map(item => {
|
return parseFloat((item.D / dataMaxD).toFixed(2)) * 100 + "% 25px"
|
})
|
}
|
|
if (dataMaxQ > 0) {
|
backgroundSizeQ = tempArr.map(item => {
|
return parseFloat((item.Q / dataMaxQ).toFixed(2)) * 100 + "% 25px"
|
})
|
}
|
|
if (dataMaxNH > 0) {
|
backgroundSizeNH = tempArr.map(item => {
|
return parseFloat((item.NH / dataMaxNH).toFixed(2)) * 100 + "% 25px"
|
})
|
}
|
|
that.setData({
|
timeList: tempArr,
|
dataMaxD: dataMaxD,
|
dataMaxQ: dataMaxQ,
|
dataMaxNH: dataMaxNH,
|
QS: result.Ws ? result.Ws : QS,
|
DS: result.Ed ? result.Ed : DS,
|
NHS: NHS,
|
backgroundSizeD: backgroundSizeD,
|
backgroundSizeQ: backgroundSizeQ,
|
backgroundSizeNH: backgroundSizeNH,
|
chartData: chartData
|
})
|
|
setTimeout(function () {
|
that.onInitQ();
|
// that.onInitD();
|
// that.onInitNH();
|
}, 800)
|
},
|
|
fail: err => {
|
wx.hideLoading();
|
if (err.errMsg == "request:fail ")
|
wx.showToast({
|
title: '网络请求失败',
|
icon: 'none',
|
duration: 2000
|
})
|
// console.log(err)
|
}
|
})
|
},
|
|
|
//能效分析tab切换
|
tapCurveTab: function (e) {
|
var that = this;
|
var curveTabIndex = e.target.dataset.index;
|
this.setData({
|
curveTabIndex: curveTabIndex,
|
})
|
if (curveTabIndex == 0) {
|
setTimeout(function () {
|
that.onInitQ();
|
if(m_echart_q){
|
m_echart_q.resize();
|
}else{
|
}
|
}, 500)
|
} else if (curveTabIndex == 1) {
|
setTimeout(function () {
|
that.onInitD();
|
if(m_echart_d){
|
m_echart_d.resize();
|
}else{
|
}
|
}, 800)
|
|
} else if (curveTabIndex == 2) {
|
setTimeout(function () {
|
that.onInitNH();
|
if(m_echart_nh){
|
m_echart_nh.resize();
|
}else{
|
}
|
}, 500)
|
}
|
},
|
onInitQ: function () {
|
var data = this.data.chartData
|
var xAxisData = data.map((item) => {
|
return item.day
|
})
|
var Q = data.map((item) => {
|
return item.Q
|
})
|
// console.log(m_echart_q)
|
|
var option = {
|
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params) {
|
// console.log(params)
|
var data = params
|
//console.log(data)
|
var str = ''
|
str += new Date(data[0].axisValue).getDate() + '日\n'
|
for (var i = 0; i < data.length; i++) {
|
var node = data[i]
|
if (i == data.length - 1) {
|
str += node.seriesName + '：' + node.value
|
} else {
|
str += node.seriesName + '：' + node.value + '\n'
|
}
|
|
}
|
return str;
|
},
|
},
|
xAxis: {
|
type: 'category',
|
axisLabel: {
|
formatter: function (value, index) {
|
return new Date(value).getDate();
|
}
|
},
|
data: xAxisData,
|
axisTick: {
|
alignWithLabel: true
|
},
|
},
|
grid: {
|
containLabel: true,
|
x: '20',
|
y: '35',
|
x2: 35,
|
y2: '20'
|
},
|
yAxis: [{
|
type: 'value',
|
name: 'm³',
|
scale: true
|
},
|
|
],
|
series: [{
|
name: '供水量',
|
data: Q,
|
type: 'line',
|
},
|
|
]
|
};
|
m_echart_q.setOption(option)
|
},
|
onInitD: function () {
|
var data = this.data.chartData
|
var xAxisData = data.map((item) => {
|
return item.day
|
})
|
|
var D = data.map((item) => {
|
return item.D
|
})
|
|
|
var option = {
|
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params) {
|
// console.log(params)
|
var data = params
|
//console.log(data)
|
var str = ''
|
str += new Date(data[0].axisValue).getDate() + '日\n'
|
for (var i = 0; i < data.length; i++) {
|
var node = data[i]
|
if (i == data.length - 1) {
|
str += node.seriesName + '：' + node.value
|
} else {
|
str += node.seriesName + '：' + node.value + '\n'
|
}
|
|
}
|
return str;
|
},
|
},
|
xAxis: {
|
type: 'category',
|
axisLabel: {
|
formatter: function (value, index) {
|
return new Date(value).getDate();
|
}
|
},
|
data: xAxisData,
|
axisTick: {
|
alignWithLabel: true
|
},
|
},
|
grid: {
|
containLabel: true,
|
x: '20',
|
y: '35',
|
x2: 35,
|
y2: '20'
|
},
|
yAxis: [
|
{
|
type: 'value',
|
name: 'KWh',
|
scale: true
|
},
|
|
],
|
series: [
|
{
|
name: '用电量',
|
data: D,
|
type: 'line',
|
},
|
|
]
|
};
|
m_echart_d.setOption(option)
|
|
|
},
|
onInitNH: function () {
|
var data = this.data.chartData
|
var xAxisData = data.map((item) => {
|
return item.day
|
})
|
|
var NH = data.map((item) => {
|
return item.NH
|
})
|
|
var option = {
|
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params) {
|
// console.log(params)
|
var data = params
|
//console.log(data)
|
var str = ''
|
str += new Date(data[0].axisValue).getDate() + '日\n'
|
for (var i = 0; i < data.length; i++) {
|
var node = data[i]
|
if (i == data.length - 1) {
|
str += node.seriesName + '：' + node.value
|
} else {
|
str += node.seriesName + '：' + node.value + '\n'
|
}
|
|
}
|
return str;
|
},
|
},
|
xAxis: {
|
type: 'category',
|
axisLabel: {
|
formatter: function (value, index) {
|
return new Date(value).getDate();
|
}
|
},
|
data: xAxisData,
|
axisTick: {
|
alignWithLabel: true
|
},
|
},
|
grid: {
|
containLabel: true,
|
x: '20',
|
y: '20',
|
x2: 35,
|
y2: '20'
|
},
|
yAxis: [
|
{
|
type: 'value',
|
name: '',
|
scale: true,
|
},
|
],
|
series: [
|
{
|
name: '千吨水能耗',
|
data: NH,
|
type: 'line',
|
}
|
]
|
};
|
m_echart_nh.setOption(option)
|
},
|
//监听左侧滚动事件
|
leftScroll: function (e) {
|
// this.setData({
|
// isLeftScroll: true,
|
// isRightScroll: false,
|
// leftScrollTop: e.detail.scrollTop
|
// })
|
},
|
VerticalMain(e) {
|
let that = this;
|
let list = that.data.list;
|
let listbak = that.data.list;
|
let tabHeight = 0;
|
if (this.data.load) {
|
list = listbak
|
for (let i = 0; i < list.length; i++) {
|
let view = wx.createSelectorQuery().select("#main-" + list[i].id);
|
view.fields({
|
size: true
|
}, data => {
|
// console.log(data)
|
list[i].top = tabHeight;
|
tabHeight = tabHeight + data.height;
|
list[i].bottom = tabHeight;
|
}).exec();
|
}
|
// console.log(list, 111111);
|
that.setData({
|
load: false,
|
list: list
|
})
|
}
|
let scrollTop = e.detail.scrollTop;
|
// console.log(e.detail.scrollTop)
|
that.setData({
|
// VerticalNavTop: (list[i].id) * 26,
|
VerticalNavTop: scrollTop
|
})
|
// console.log(that.data.VerticalNavTop)
|
},
|
//监听右侧滚动事件
|
rightScroll: function (e) {
|
// console.log(e.detail.scrollTop)
|
this.setData({
|
isLeftScroll: true,
|
rightScrollTop: e.detail.scrollTop,
|
})
|
},
|
//开关机总表明细
|
toDetial: function (e) {
|
console.log(e.currentTarget.dataset.id, 284)
|
var selectDate = this.data.selectDate
|
var year = this.data.requestData.year
|
var month = this.data.requestData.month
|
wx.navigateTo({
|
url: '../Detail/index?id=' + e.currentTarget.dataset.id + '&year=' + year + '&month=' + month + '&name=' + e.currentTarget.dataset.pumpName + '&selectDate=' + selectDate,
|
})
|
},
|
//显示隐藏日期筛选查询
|
filterClick: function () {
|
var isShowFilter = this.data.isShowFilter
|
if (isShowFilter) {
|
isShowFilter = false
|
} else {
|
isShowFilter = true
|
}
|
this.setData({
|
isShowFilter: isShowFilter
|
})
|
},
|
//获取日期
|
initialDateTimePicker: function () {
|
var that = this;
|
var requestData = that.data.requestData;
|
var setDateStart = dateTimePickerCtrl.getDate(1);
|
var setDateEnd = dateTimePickerCtrl.getDate();
|
//console.log('当前日期', setDateEnd)
|
requestData.year = setDateEnd.substring(0, 4)
|
requestData.month = setDateEnd.substring(5, 7)
|
if (new Date().getDate() < 10) {
|
requestData.month = new Date(util.getDay(-10)).getMonth() + 1
|
}
|
that.setData({
|
requestData: requestData,
|
dateStart: setDateStart,
|
dateEnd: setDateEnd.substring(0, 7),
|
endDate: setDateEnd,
|
selectDate: setDateEnd.substring(0, 7)
|
});
|
},
|
//点击选择年、月份的事件
|
changeDateStart(e) {
|
//console.log(e.detail.value)
|
var requestData = this.data.requestData
|
var year = e.detail.value.substring(0, 4);
|
var month = e.detail.value.substring(5, 7);
|
requestData.year = year
|
requestData.month = month
|
this.setData({
|
requestData: requestData,
|
dateEnd: e.detail.value,
|
isShowFilter: false,
|
selectDate: e.detail.value,
|
curveTabIndex:0
|
});
|
//console.log(e.detail.value, year, month)
|
this.initData();
|
},
|
/**
|
* 生命周期函数--监听页面初次渲染完成
|
*/
|
onReady: function () {
|
//获取开机时间、用电量、供水量表格的宽高
|
let that = this
|
// 获取元素宽高进行表格适配
|
},
|
|
/**
|
* 生命周期函数--监听页面显示
|
*/
|
onShow: function () {},
|
|
/**
|
* 生命周期函数--监听页面隐藏
|
*/
|
onHide: function () {
|
|
},
|
|
/**
|
* 生命周期函数--监听页面卸载
|
*/
|
onUnload: function () {
|
|
},
|
|
/**
|
* 页面相关事件处理函数--监听用户下拉动作
|
*/
|
onPullDownRefresh: function () {
|
|
},
|
|
/**
|
* 页面上拉触底事件的处理函数
|
*/
|
onReachBottom: function () {
|
|
},
|
|
/**
|
* 用户点击右上角分享
|
*/
|
onShareAppMessage: function () {
|
return Constant.Share;
|
},
|
})
|
