|
|
|
|
@ -1,15 +1,59 @@
|
|
|
|
|
<template>
|
|
|
|
|
<layout v-bind:title="title">
|
|
|
|
|
<div class="row mb-2">
|
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
<h1>{{product.name}}</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 active">{{product.name}}</li>
|
|
|
|
|
</ol>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row overlay-wrapper">
|
|
|
|
|
<div class="col-md-12" v-if="HasBatchCommand()">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<div class="card-title">
|
|
|
|
|
<input type="checkbox" id="All" class="checkall" v-on:change="SelectDevice($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="SelectDevice($event)">反选</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-tools">
|
|
|
|
|
<button class="btn btn-success" v-on:click="CallApiAll('On')">开</button>
|
|
|
|
|
<button class="btn btn-success" v-on:click="CallApiAll('Stop')" v-if="product.name.indexOf('窗帘电机')>=0">停</button>
|
|
|
|
|
<button class="btn btn-success" v-on:click="CallApiAll('Off')">关</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2 col-sm-4 col-xs-6" v-for="item in product.devices">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
<h3 class="card-title">{{item.displayName||item.name}}</h3>
|
|
|
|
|
<div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{item.count}}</span></div>
|
|
|
|
|
<h3 class="card-title">
|
|
|
|
|
<label style="font-weight:normal;"><input type="checkbox" name="numbers[]" class="item" :value="item.number" v-if="HasBatchCommand()" v-on:change="SelectDevice($event)">{{item.name}}</label>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="card-tools">
|
|
|
|
|
<template v-if="HasBatchCommand()">
|
|
|
|
|
{{GetDataValue(item.number,'状态')}}
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<router-link :to="{path:'/pages/device.html',query:{number:item.number}}" class="card-body" style="display: block; text-align: center;">
|
|
|
|
|
<img :src="config.baseUrl+product.image" style="margin: 0px auto; width: 64px;">
|
|
|
|
|
<div>
|
|
|
|
|
<template v-if="item.name==='光强检测器'">
|
|
|
|
|
{{GetDataValue(item.number,'光照度')}}
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="item.name==='温湿度传感器'">
|
|
|
|
|
{{GetDataValue(item.number,'温度')}}℃ {{GetDataValue(item.number,'湿度')}}RH%
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</router-link>
|
|
|
|
|
<div class="card-footer">
|
|
|
|
|
{{item.node.name}}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -22,6 +66,7 @@
|
|
|
|
|
title: '产品',
|
|
|
|
|
url: '/IoTCenter/api/v1/product/getProduct?number=' + this.$route.query.number,
|
|
|
|
|
product: {
|
|
|
|
|
name: "",
|
|
|
|
|
devices: []
|
|
|
|
|
},
|
|
|
|
|
events: ['ProductEntityInserted', 'ProductEntityUpdated', 'ProductEntityDeleted',
|
|
|
|
|
@ -41,10 +86,55 @@
|
|
|
|
|
vm.product = response.data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
HasBatchCommand() {
|
|
|
|
|
return this.product.name === '调色灯'
|
|
|
|
|
|| this.product.name.indexOf('窗帘电机') >= 0
|
|
|
|
|
|| this.product.name.indexOf('开关') >= 0
|
|
|
|
|
|| this.product.name.indexOf('插座') >= 0;
|
|
|
|
|
},
|
|
|
|
|
GetDevices() {
|
|
|
|
|
return Enumerable.from(this.product.devices).orderBy(function (o) { return o.displayOrder; }).orderBy(function (o) { return o.name; }).toArray();
|
|
|
|
|
},
|
|
|
|
|
GetDataValue(number, name) {
|
|
|
|
|
var device = Enumerable.from(this.product.devices)
|
|
|
|
|
.where(function (o) { return o.number === number; })
|
|
|
|
|
.firstOrDefault();
|
|
|
|
|
if (device !== null) {
|
|
|
|
|
var data = Enumerable.from(device.data)
|
|
|
|
|
.where(function (o) { return o.name === name; })
|
|
|
|
|
.firstOrDefault();
|
|
|
|
|
if (data) {
|
|
|
|
|
return data.value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
},
|
|
|
|
|
GetDeviceDataAttr(number, name, attr) {
|
|
|
|
|
var device = Enumerable.from(this.product.devices).where(function (o) { return o.number === number; }).firstOrDefault();
|
|
|
|
|
var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
|
|
|
|
|
if (data !== null) {
|
|
|
|
|
return data[attr];
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
},
|
|
|
|
|
SelectDevice: selectNode,
|
|
|
|
|
CallApiAll(method) {
|
|
|
|
|
var numbers = [];
|
|
|
|
|
$('.item:checked').each(function () {
|
|
|
|
|
numbers.push($(this).val());
|
|
|
|
|
});
|
|
|
|
|
if (numbers.length) {
|
|
|
|
|
for (var i = 0; i < numbers.length; i++) {
|
|
|
|
|
execApi(numbers[i], this.product.path + method);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
Swal.fire('没有选中任何项');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
subscribe() {
|
|
|
|
|
var vm = this;
|
|
|
|
|
subscribe(this.events, function (method, data) {
|
|
|
|
|
var item = JSON.product(data.message);
|
|
|
|
|
var item = JSON.parse(data.message);
|
|
|
|
|
if (method.indexOf('Product') == 0) {
|
|
|
|
|
vm.load();
|
|
|
|
|
}
|
|
|
|
|
|
