|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
<h2 class="page-header" v-if="ViewModel">{{ViewModel.Name}}</h2>
|
|
|
|
|
<!--<h2 class="page-header" v-if="ViewModel">{{ViewModel.Name}}</h2>
|
|
|
|
|
<div class="row" v-if="ViewModel">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<canvas id="NodeChart" style="width:100%;height:250px;"></canvas>
|
|
|
|
@ -15,7 +15,7 @@
|
|
|
|
|
<canvas id="NodeChart" style="width:100%;height:250px;"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr />
|
|
|
|
|
<hr />-->
|
|
|
|
|
<div class="row" v-if="ViewModel">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<select class="form-control" id="camera" @change="CameraSelected">
|
|
|
|
@ -155,13 +155,13 @@
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<div class="box box-solid btns">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6"><button class="btn btn-block btn-primary">一键开</button></div>
|
|
|
|
|
<div class="col-md-6"><button class="btn btn-block btn-primary">一键关</button></div>
|
|
|
|
|
<div class="col-md-6"><button class="btn btn-block btn-primary ajax NodePowerOn" :data-node-number="ViewModel.Number">一键开</button></div>
|
|
|
|
|
<div class="col-md-6"><button class="btn btn-block btn-primary ajax NodePowerOff" :data-node-number="ViewModel.Number">一键关</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr style="margin: 0;" />
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-3" v-for="scene in ViewModel.Scenes">
|
|
|
|
|
<button class="btn btn-block btn-info">{{scene.Name}}</button>
|
|
|
|
|
<button class="btn btn-block btn-info ajax Scene" :data-node-number="ViewModel.Number" :data-scene-name="scene.Name">{{scene.Name}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -172,13 +172,13 @@
|
|
|
|
|
<div class="box box-solid btns">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-2"><span style="display:inline-block;line-height:70px;">开关:</span></div>
|
|
|
|
|
<div class="col-md-5"><button class="btn btn-block btn-primary">一键开</button></div>
|
|
|
|
|
<div class="col-md-5"><button class="btn btn-block btn-primary">一键关</button></div>
|
|
|
|
|
<div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSwitchOn" :data-node-number="ViewModel.Number">一键开</button></div>
|
|
|
|
|
<div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSwitchOff" :data-node-number="ViewModel.Number">一键关</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr style="margin: 0;" />
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-3" v-for="scene in ViewModel.Scenes">
|
|
|
|
|
<button class="btn btn-block btn-info">{{scene.Name}}</button>
|
|
|
|
|
<div class="col-md-3" v-for="device in ViewModel.Devices">
|
|
|
|
|
<button class="btn btn-block btn-info">{{device.Name}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -187,50 +187,38 @@
|
|
|
|
|
<div class="box box-solid btns">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-2"><span style="display:inline-block;line-height:70px;">插座:</span></div>
|
|
|
|
|
<div class="col-md-5"><button class="btn btn-block btn-primary">一键开</button></div>
|
|
|
|
|
<div class="col-md-5"><button class="btn btn-block btn-primary">一键关</button></div>
|
|
|
|
|
<div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSocketOn" :data-node-number="ViewModel.Number">一键开</button></div>
|
|
|
|
|
<div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSocketOff" :data-node-number="ViewModel.Number">一键关</button></div>
|
|
|
|
|
</div>
|
|
|
|
|
<hr style="margin: 0;" />
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-3" v-for="scene in ViewModel.Scenes">
|
|
|
|
|
<button class="btn btn-block btn-info">{{scene.Name}}</button>
|
|
|
|
|
<div class="col-md-3" v-for="device in ViewModel.Devices">
|
|
|
|
|
<button class="btn btn-block btn-info">{{device.Name}}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
var flvPlayer;
|
|
|
|
|
var decodedFrames;
|
|
|
|
|
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
|
|
|
|
|
});
|
|
|
|
|
var connection;
|
|
|
|
|
var connectionId;
|
|
|
|
|
$.ajaxSetup({
|
|
|
|
|
cache: false,
|
|
|
|
|
timeout: 5000
|
|
|
|
|
});
|
|
|
|
|
function connect() {
|
|
|
|
|
if (connection && connection.connection.connectionState === 1) {
|
|
|
|
|
console.log('has connected');
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
console.log('start connect to server:' + Date());
|
|
|
|
|
connection.start().then(function () {
|
|
|
|
|
console.log('signalR>start');
|
|
|
|
|
}).catch(function (err) {
|
|
|
|
|
console.error(err.toString());
|
|
|
|
|
setTimeout(connect, 10 * 1000);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function Color16() {//十六进制颜色随机
|
|
|
|
|
var r = Math.floor(Math.random() * 256);
|
|
|
|
@ -239,15 +227,82 @@
|
|
|
|
|
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');
|
|
|
|
|
function ajax(url, data, type) {
|
|
|
|
|
console.log(url);
|
|
|
|
|
type = type || 'get';
|
|
|
|
|
$('.overlay').show();
|
|
|
|
|
$.ajax({
|
|
|
|
|
type: type,
|
|
|
|
|
url: url,
|
|
|
|
|
data: data,
|
|
|
|
|
success: AjaxCallBack
|
|
|
|
|
}).fail(function (result) {
|
|
|
|
|
console.log('error');
|
|
|
|
|
console.log(result);
|
|
|
|
|
}).always(function () {
|
|
|
|
|
$('.overlay').hide();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
function AjaxCallBack(response) {
|
|
|
|
|
var result = response;
|
|
|
|
|
if (result.code === 0) {
|
|
|
|
|
if (result.type === 0) {
|
|
|
|
|
if (result.format === 1) {
|
|
|
|
|
console.log('format/1/base64 jpeg image');
|
|
|
|
|
$('#callback .page-content').html('<img class="shot" src="' + result.data + '">');
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
console.log('format/0/json object');
|
|
|
|
|
$('#callback .page-content').html(result.data);
|
|
|
|
|
}
|
|
|
|
|
app.popup.open('#callback');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
function onMessage() {
|
|
|
|
|
connection.on('Connected', function (id) {
|
|
|
|
|
connectionId = id;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
$('body').on('click', 'button.ajax', function (e) {
|
|
|
|
|
var data = $.map($('.switch:checked').toArray(), function (o) { return $(o).attr('data-node-number'); });
|
|
|
|
|
if ($(this).hasClass('AllPowerOn')) {
|
|
|
|
|
ajax('/App/AllPowerOn', { nodes: data }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('AllPowerOff')) {
|
|
|
|
|
ajax('/App/AllPowerOff', { nodes: data }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('AllSwitchOn')) {
|
|
|
|
|
ajax('/App/AllSwitchOn', { nodes: data }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('AllSwitchOff')) {
|
|
|
|
|
ajax('/App/AllSwitchOff', { nodes: data }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('AllSocketOn')) {
|
|
|
|
|
ajax('/App/AllSocketOn', { nodes: data }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('AllSocketOff')) {
|
|
|
|
|
ajax('/App/AllSocketOff', { nodes: data }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('NodePowerOn')) {
|
|
|
|
|
ajax('/App/NodePowerOn', { node: $(this).attr('data-node-number') }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('NodePowerOff')) {
|
|
|
|
|
ajax('/App/NodePowerOff', { node: $(this).attr('data-node-number') }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('NodeSwitchOn')) {
|
|
|
|
|
ajax('/App/NodeSwitchOn', { node: $(this).attr('data-node-number') }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('NodeSwitchOff')) {
|
|
|
|
|
ajax('/App/NodeSwitchOff', { node: $(this).attr('data-node-number') }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('NodeSocketOn')) {
|
|
|
|
|
ajax('/App/NodeSocketOn', { node: $(this).attr('data-node-number') }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('NodeSocketOff')) {
|
|
|
|
|
ajax('/App/NodeSocketOff', { node: $(this).attr('data-node-number') }, 'post');
|
|
|
|
|
} else if ($(this).hasClass('Scene')) {
|
|
|
|
|
ajax('/App/Scene', { node: $(this).attr('data-node-number'), name: $(this).attr('data-scene-name') }, 'post');
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
var flvPlayer;
|
|
|
|
|
var decodedFrames;
|
|
|
|
|
$('body').on('change', '#camera', function (e) {
|
|
|
|
|
UpdateCamera()
|
|
|
|
|
});
|
|
|
|
@ -318,9 +373,10 @@
|
|
|
|
|
$.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');
|
|
|
|
|
var wsUrl = '/hub?group=page';
|
|
|
|
|
connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
|
|
|
|
|
onMessage();
|
|
|
|
|
connect();
|
|
|
|
|
UpdateCamera();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|