|
|
|
|
@ -1,13 +1,32 @@
|
|
|
|
|
<template>
|
|
|
|
|
<views-shared-layout>
|
|
|
|
|
<div class="card" v-if="model">
|
|
|
|
|
<div class="card-header">设备</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<component :device="model" :is="'devices-'+model.ioTProduct.template"></component>
|
|
|
|
|
<template v-if="model">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-header">设备</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<component :device="model" :is="'devices-'+model.ioTProduct.template"></component>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-for="data in getData()">
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<h3 class="card-title">{{ getName(data) }}</h3>
|
|
|
|
|
<ul role="tablist" class="nav nav-tabs card-tools">
|
|
|
|
|
<li class="nav-item"><a href="javascript:;" data-toggle="tab" class="nav-link active" @click="tabClick($event,data.key,'1d',data.name)">近1天</a></li>
|
|
|
|
|
<li class="nav-item"><a href="javascript:;" data-toggle="tab" class="nav-link" @click="tabClick($event,data.key,'7d',data.name)">近1周</a></li>
|
|
|
|
|
<li class="nav-item"><a href="javascript:;" data-toggle="tab" class="nav-link" @click="tabClick($event,data.key,'30d',data.name)">近30天</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<canvas class="chart" style="width:60%;max-width:100%;" :id="model.number+'-'+data.key"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</views-shared-layout>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
@ -16,6 +35,7 @@
|
|
|
|
|
return {
|
|
|
|
|
title: '设备中心',
|
|
|
|
|
url: config.service('platform/api/v1/Device/GetDevice?id=' + this.$route.query.id),
|
|
|
|
|
time: '1d',
|
|
|
|
|
model: null
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -27,33 +47,95 @@
|
|
|
|
|
PubSub.unsubscribes(this.events);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
load:function() {
|
|
|
|
|
load: function () {
|
|
|
|
|
var vm = this;
|
|
|
|
|
axios.post(this.url).then(function (response) {
|
|
|
|
|
vm.model = response.data;
|
|
|
|
|
vm.$nextTick(function () {
|
|
|
|
|
vm.updateChart();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
subscribe:function() {
|
|
|
|
|
subscribe: function () {
|
|
|
|
|
var vm = this;
|
|
|
|
|
PubSub.subscribes(this.events, function (method, data) {
|
|
|
|
|
parent.load();
|
|
|
|
|
vm.load();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getBuildingName: function (device) {
|
|
|
|
|
if (device.ioTGateway.building) {
|
|
|
|
|
return device.ioTGateway.building.name;
|
|
|
|
|
getName: function (data) {
|
|
|
|
|
if (data.unit) {
|
|
|
|
|
return data.name + data.unit;
|
|
|
|
|
}
|
|
|
|
|
return data.name;
|
|
|
|
|
},
|
|
|
|
|
getData: function () {
|
|
|
|
|
return Enumerable.from(this.model.data).where(o => o.dataType === 20).toArray();
|
|
|
|
|
},
|
|
|
|
|
updateChart: function () {
|
|
|
|
|
var dataList = this.getData();
|
|
|
|
|
for (var i = 0; i < dataList.length; i++) {
|
|
|
|
|
this.changeTime(dataList[i].key, this.time, dataList[i].name);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
tabClick: function (event, key, time, title) {
|
|
|
|
|
this.time = time;
|
|
|
|
|
this.changeTime(key, time, title);
|
|
|
|
|
var link = $(event.currentTarget);
|
|
|
|
|
if (!link.hasClass('active')) {
|
|
|
|
|
link.parent().siblings().find('a.active').removeClass('active');
|
|
|
|
|
link.addClass('active');
|
|
|
|
|
}
|
|
|
|
|
return '';
|
|
|
|
|
},
|
|
|
|
|
getCategoryName: function (device) {
|
|
|
|
|
if (device.ioTProduct.ioTProductCategory) {
|
|
|
|
|
return device.ioTProduct.ioTProductCategory.name;
|
|
|
|
|
changeTime: function (key, time, title) {
|
|
|
|
|
var vm = this;
|
|
|
|
|
var url = config.service('platform/api/v1/Device/GetChartData');
|
|
|
|
|
var data = {
|
|
|
|
|
number: this.model.number,
|
|
|
|
|
key: key,
|
|
|
|
|
time: time
|
|
|
|
|
};
|
|
|
|
|
axios.post(url, data, { crossDomain: true }).then(function (response) {
|
|
|
|
|
var data = response.data;
|
|
|
|
|
vm.UpdateChartInternal(key, data, title);
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
UpdateChartInternal(key, data, title) {
|
|
|
|
|
var canvas = document.getElementById(this.model.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
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy: function () {
|
|
|
|
|
unsubscribe();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
