You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
4.5 KiB
105 lines
4.5 KiB
function pages_iot_device() {
|
|
return Vue.component('pages_iot_device', function (resolve, reject) {
|
|
axios.get("/pages/iot/device.html").then(function (response) {
|
|
resolve({
|
|
template: response.data,
|
|
data() {
|
|
return {
|
|
url: '/IoTCenter/api/v1/device/getDevice?number=' + this.$route.query.number
|
|
};
|
|
},
|
|
mounted: function () {
|
|
var vm = this;
|
|
axios.post(this.url)
|
|
.then(function (response) {
|
|
store.commit('setDevice', response.data);
|
|
$('title').text(response.data.displayName);
|
|
vm.$nextTick(function () {
|
|
weui.tab('.weui-tab');
|
|
vm.updateChart();
|
|
});
|
|
})
|
|
.catch(function (error) {
|
|
})
|
|
.finally(function () {
|
|
|
|
});
|
|
},
|
|
destroyed: function () {
|
|
store.commit('setDevice', null);
|
|
},
|
|
methods: {
|
|
updateChart: function () {
|
|
var dataList = Enumerable.from(this.device.data).where(function (o) {
|
|
return o.type === 10 || o.type === 20;
|
|
}).toArray();
|
|
for (var i = 0; i < dataList.length; i++) {
|
|
this.changeTime(dataList[i].key, '1d',dataList[i].name);
|
|
}
|
|
},
|
|
changeTime: function (key, time,title) {
|
|
var vm = this;
|
|
var url = '/IoTCenter/api/v1/Device/GetChartData';
|
|
var data = {
|
|
number:this.device.number,
|
|
key: key,
|
|
time: time
|
|
};
|
|
axios.post(url,data, { crossDomain: true })
|
|
.then(function (response) {
|
|
var data = response.data;
|
|
vm.UpdateChartInternal(key, data,title);
|
|
console.log('折线图更新成功');
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
},
|
|
UpdateChartInternal(key, data,title) {
|
|
var canvas = document.getElementById(this.device.number + '-' + key);
|
|
var chart;
|
|
Chart.helpers.each(Chart.instances, function (instance) {
|
|
if (instance.chart.canvas.id === canvas.id) {
|
|
chart = instance;
|
|
}
|
|
});
|
|
if (chart) {
|
|
chart.data = data;
|
|
chart.update();
|
|
}
|
|
else {
|
|
var ctx = canvas.getContext('2d');
|
|
var options = {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'bottom'
|
|
},
|
|
title: {
|
|
display: false,
|
|
text: title
|
|
},
|
|
animation: {
|
|
duration: 0
|
|
}
|
|
};
|
|
chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: options
|
|
});
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
device: function () {
|
|
return store.state.device;
|
|
},
|
|
hasChart: function () {
|
|
var o = this.device;
|
|
return o.name === '温湿度传感器' || o.name === 'PM2.5感应器' || o.name === '光强检测器' || o.name === '智能插座';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
} |