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.
75 lines
2.4 KiB
75 lines
2.4 KiB
<div class="row" v-if="ViewModel">
|
|
<div class="col-md-12">
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="row" v-if="ViewModel">
|
|
节点详情
|
|
</div>
|
|
<script>
|
|
function UpdateChart(id, title, data, labels, colors, type) {
|
|
var ctx = document.getElementById(id).getContext('2d');
|
|
colors = colors || $.map(data, function (item) { return Color16(item); });
|
|
var data = {
|
|
datasets: [{
|
|
label: title,
|
|
data: data,
|
|
backgroundColor: colors
|
|
}],
|
|
labels: labels
|
|
};
|
|
var options = {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'right',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: title
|
|
},
|
|
animation: {
|
|
duration: 0
|
|
}
|
|
};
|
|
var chart = new Chart(ctx, {
|
|
type: type,
|
|
data: data,
|
|
options: options
|
|
});
|
|
}
|
|
function Color16() {//十六进制颜色随机
|
|
var r = Math.floor(Math.random() * 256);
|
|
var g = Math.floor(Math.random() * 256);
|
|
var b = Math.floor(Math.random() * 256);
|
|
var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
|
|
return color;
|
|
}
|
|
$('body').on('change', 'input.switch', function (e) {
|
|
if ($(this).is(':checked')) {
|
|
$(this).parent('label').addClass('on');
|
|
$(this).parent('label').removeClass('off');
|
|
} else {
|
|
$(this).parent('label').addClass('off');
|
|
$(this).parent('label').removeClass('on');
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
var vm = new Vue({
|
|
el: '#template',
|
|
data() {
|
|
return { ViewModel: null }
|
|
},
|
|
mounted() {
|
|
var url = '/Home/GetNode' + '?number=' + new URI().query(true).number;
|
|
$.get(url, function (data) {
|
|
vm.ViewModel = data;
|
|
Vue.nextTick(function () {
|
|
//UpdateChart('NodeChart', '节点', vm.ViewModel.NodeChart.data, vm.ViewModel.NodeChart.labels, null, 'doughnut');
|
|
//UpdateChart('DeviceChart', '设备', vm.ViewModel.DeviceChart.data, vm.ViewModel.DeviceChart.labels, null, 'pie');
|
|
//UpdateChart('EnergyChart', '用电', vm.ViewModel.EnergyChart.data, vm.ViewModel.EnergyChart.labels, null, 'bar');
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script> |