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.
iot/projects/IoTCenter/Views/Home/Nodes.cshtml

97 lines
3.8 KiB

@{
HideBread = true;
}
<br />
<div class="row">
<div class="col-md-12" v-if="model.length">
<div class="card">
<div class="card-header">
<div class="card-title">
<input type="checkbox" id="All" class="checkall" v-on:change="SelectNode($event)" />
<label for="All" class="btn btn-sm btn-info" style="height:31px;margin-bottom:0;">全选</label>
<button class="btn btn-sm btn-info uncheck" v-on:click="SelectNode($event)">反选</button>
</div>
<div class="card-tools">
<button class="btn btn-success" v-on:click="Power('On')">开</button>
<button class="btn btn-success" v-on:click="Power('Off')">关</button>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" v-for="item in GetNodes()">
<div class="card">
<div class="card-header">
<h3 class="card-title">
<label style="font-weight:normal;"><input type="checkbox" name="numbers[]" class="item" :value="item.number" v-on:change="SelectNode($event)">{{item.name}}</label>
</h3>
<div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{item.DeviceCount}}</span></div>
</div>
<a class="card-body" :href="'@Url.Content("~")/Home/Node/?number='+item.number" style="display:block;text-align:center;">
<img :alt="item.name" :src="'@Url.Content("~")'+item.image" style="margin:0 auto;width:64px;" />
</a>
</div>
</div>
</div>
@section scripts{
<script>
var baseUrl = '@Url.Content("~")';
var hubUrl = "@Url.Content("~")/hub?group=page";
var onMessage = null;
</script>
<script src="~/lib/WXInlinePlayer/index.js"></script>
<script src="~/js/util.js"></script>
<script src="~/js/iot.js"></script>
<script src="~/js/message.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
title: "产品",
url: '/api/v1/node/getNodes',
model: []
};
},
mounted: function () {
connect();
this.load();
},
methods: {
load: function () {
var vm = this;
axios.post(baseUrl + '/api/v1/node/getNodes').then(function (response) {
vm.model = response.data;
});
},
GetNodes() {
return Enumerable.from(this.model).orderBy('o=>o.displayOrder').toArray();
},
SelectNode: Select,
Power(method) {
var numbers = [];
$('.item:checked').each(function () {
numbers.push($(this).val());
});
if (numbers.length) {
for (var i = 0; i < numbers.length; i++) {
nodePower(numbers[i], method);
}
}
else {
toastr.error('没有选中任何项');
}
}
}
});
onMessage = function (method, json, to, from) {
var item = JSON.parse(json);
if (method === 'NodeEntityInserted' ||
method === 'NodeEntityUpdated' ||
method === 'NodeEntityDeleted' ||
method === 'DeviceEntityInserted' ||
method === 'DeviceEntityDeleted') {
loadData();
}
}
</script>
}