Former-commit-id: d3c04c08aedb1138d90a528b5e0d4d50b59676ad
TangShanKaiPing
wanggang 6 years ago
parent 9d95112d06
commit 82d337381c

@ -256,6 +256,30 @@ namespace IoTCenter.Controllers
return Json(ApiResponse.AsyncSuccess());
}
public IActionResult NodeSwitchOn(string connectionId, string node)
{
this.Power(connectionId, new string[] { node }, "On", o => o.Name.Contains("开关"));
return Json(ApiResponse.AsyncSuccess());
}
public IActionResult NodeSwitchOff(string connectionId, string node)
{
this.Power(connectionId, new string[] { node }, "Off", o => o.Name.Contains("开关"));
return Json(ApiResponse.AsyncSuccess());
}
public IActionResult NodeSocketOn(string connectionId, string node)
{
this.Power(connectionId, new string[] { node }, "On", o => o.Name.Contains("插座"));
return Json(ApiResponse.AsyncSuccess());
}
public IActionResult NodeSocketOff(string connectionId, string node)
{
this.Power(connectionId, new string[] { node }, "Off", o => o.Name.Contains("插座"));
return Json(ApiResponse.AsyncSuccess());
}
private void Power(string connectionId, string[] nodes, string command, Func<Device, bool> func)
{
var devices = this._deviceRepo.ReadOnlyTable()

@ -114,43 +114,6 @@
});
}
}
function onMessage() {
connection.on('Connected', function (id) {
connectionId = id;
});
}
</script>
<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);
@ -190,6 +153,45 @@
}
}
}
</script>
<script>
function onMessage() {
connection.on('Connected', function (id) {
connectionId = id;
});
}
</script>
<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
});
}
$('body').on('change', 'input.switch', function (e) {
if ($(this).is(':checked')) {
$(this).parent('label').addClass('on');
@ -218,6 +220,14 @@
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');
}

@ -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();
});
});

Loading…
Cancel
Save