|
|
|
@ -30,10 +30,12 @@
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 实例生命周期钩子 （销毁完毕）
|
|
|
|
// 实例生命周期钩子 （销毁完毕）
|
|
|
|
destroyed: function () {
|
|
|
|
destroyed: function () {
|
|
|
|
|
|
|
|
console.log('destroyed:');
|
|
|
|
store.commit('setDevice', null);
|
|
|
|
store.commit('setDevice', null);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
updateChart: function () {
|
|
|
|
updateChart: function () {
|
|
|
|
|
|
|
|
console.log('updateChart:');
|
|
|
|
var dataList = Enumerable.from(this.device.data).where(function (o) {
|
|
|
|
var dataList = Enumerable.from(this.device.data).where(function (o) {
|
|
|
|
return o.type === 10 || o.type === 20;
|
|
|
|
return o.type === 10 || o.type === 20;
|
|
|
|
}).toArray();
|
|
|
|
}).toArray();
|
|
|
|
@ -42,8 +44,10 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
changeTime: function (key, time,title) {
|
|
|
|
changeTime: function (key, time,title) {
|
|
|
|
|
|
|
|
console.log('changeTime:');
|
|
|
|
var vm = this;
|
|
|
|
var vm = this;
|
|
|
|
var url = '/IoTCenter/api/v1/Device/GetChartData';
|
|
|
|
var t = (new Date()).valueOf();
|
|
|
|
|
|
|
|
var url = '/IoTCenter/api/v1/Device/GetChartData?t=' + t;
|
|
|
|
var data = {
|
|
|
|
var data = {
|
|
|
|
number:this.device.number,
|
|
|
|
number:this.device.number,
|
|
|
|
key: key,
|
|
|
|
key: key,
|
|
|
|
@ -60,6 +64,7 @@
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
UpdateChartInternal(key, data, title) {
|
|
|
|
UpdateChartInternal(key, data, title) {
|
|
|
|
|
|
|
|
console.log('UpdateChartInternal:');
|
|
|
|
var canvas = document.getElementById(this.device.number + '-' + key);
|
|
|
|
var canvas = document.getElementById(this.device.number + '-' + key);
|
|
|
|
var chart;
|
|
|
|
var chart;
|
|
|
|
Chart.helpers.each(Chart.instances, function (instance) {
|
|
|
|
Chart.helpers.each(Chart.instances, function (instance) {
|
|
|
|
@ -67,12 +72,16 @@
|
|
|
|
chart = instance;
|
|
|
|
chart = instance;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
if (chart) {
|
|
|
|
console.log('chart:', chart);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (chart === '') {
|
|
|
|
chart.data = data;
|
|
|
|
chart.data = data;
|
|
|
|
chart.update();
|
|
|
|
chart.update();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
else {
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
|
|
|
|
// ctx.canvas.height = 150;
|
|
|
|
|
|
|
|
console.log('canvas.getContext:', ctx);
|
|
|
|
var options = {
|
|
|
|
var options = {
|
|
|
|
responsive: true,
|
|
|
|
responsive: true,
|
|
|
|
legend: {
|
|
|
|
legend: {
|
|
|
|
@ -84,8 +93,27 @@
|
|
|
|
},
|
|
|
|
},
|
|
|
|
animation: {
|
|
|
|
animation: {
|
|
|
|
duration: 0
|
|
|
|
duration: 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
scales: {
|
|
|
|
|
|
|
|
yAxes: [{
|
|
|
|
|
|
|
|
display: true,
|
|
|
|
|
|
|
|
gridLines: {
|
|
|
|
|
|
|
|
color: "rgb(210,210,211)"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
ticks: {
|
|
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
|
|
stepSize: 500,
|
|
|
|
|
|
|
|
beginAtZero: true,
|
|
|
|
|
|
|
|
padding: 20,
|
|
|
|
|
|
|
|
callback: function(value, index, values) {
|
|
|
|
|
|
|
|
return value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}]
|
|
|
|
|
|
|
|
}*/
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
chart = new Chart(ctx, {
|
|
|
|
chart = new Chart(ctx, {
|
|
|
|
type: 'line',
|
|
|
|
type: 'line',
|
|
|
|
data: data,
|
|
|
|
data: data,
|
|
|
|
|
zhengpengju
5 years ago