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.
104 lines
4.5 KiB
104 lines
4.5 KiB
<template>
|
|
<layout :htmltitle="title">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1>{{title}}</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
|
|
<li class="breadcrumb-item"><router-link to="/routes/iotcenter/organs.html">机构列表</router-link></li>
|
|
<li class="breadcrumb-item active">{{title}}</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<div class="row overlay-wrapper">
|
|
<div class="col-md-12" v-if="nodes.length">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<input type="checkbox" id="All" class="checkall" @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" @click="SelectNode($event)">反选</button>
|
|
</div>
|
|
<div class="card-tools">
|
|
<button class="btn btn-success" @click="Power('On')">开</button>
|
|
<button class="btn btn-success" @click="Power('Off')">关</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-4 col-xs-6" v-for="item in nodes">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<input type="checkbox" name="numbers[]" class="item" :value="item.number" @change="SelectNode($event)">
|
|
<span v-if="item.isOnline" style="color:green;">{{item.name}}</span>
|
|
<span v-else style="color:red;">{{item.name}}</span>
|
|
</h3>
|
|
<div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{item.count}}</span></div>
|
|
</div>
|
|
<router-link :to="{path:'/routes/iotcenter/node.html',query:{number:item.number,organ:title}}" class="card-body" style="display: block; text-align: center;">
|
|
<img :src="baseUrl+item.image" style="margin: 0px auto; height: 64px;">
|
|
</router-link>
|
|
<div class="card-footer text-center">
|
|
<button class="btn btn-success" @click="nodePower(item.number,'On')">开</button>
|
|
<button class="btn btn-success" @click="nodePower(item.number,'Off')">关</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</layout>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data: function () {
|
|
return {
|
|
title: this.$route.query.name,
|
|
url: '/platform/api/v1/node/getNodes?organNumber=' + this.$route.query.number,
|
|
nodes: [],
|
|
events: ['IoTGatewayEntityInserted', 'IoTGatewayEntityUpdated', 'IoTGatewayEntityDeleted']
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.subscribe();
|
|
this.load();
|
|
},
|
|
methods: {
|
|
load() {
|
|
var url = this.baseUrl + this.url;
|
|
var vm = this;
|
|
axios.post(url).then(function (response) {
|
|
vm.nodes = response.data;
|
|
});
|
|
},
|
|
SelectNode: selectNode,
|
|
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 {
|
|
Swal.fire('没有选中任何项');
|
|
}
|
|
},
|
|
subscribe() {
|
|
var vm = this;
|
|
subscribe(this.events, function (method, data) {
|
|
vm.load();
|
|
});
|
|
},
|
|
unsubscribe() {
|
|
this.unsubscribe(this.events);
|
|
}
|
|
},
|
|
beforeDestroy: function () {
|
|
unsubscribe();
|
|
}
|
|
}</script>
|