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.
76 lines
3.1 KiB
76 lines
3.1 KiB
<template>
|
|
<layout :htmltitle="title">
|
|
<h2 style="font-size:1.5rem;margin:.5em 0;">产品<span data-toggle="tooltip" class="badge bg-green">{{products.length}}</span></h2>
|
|
<div class="row">
|
|
<div class="col-md-2 col-sm-4 col-xs-6" v-for="item in products">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">{{item.name}}</h3>
|
|
<div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{item.count}}</span></div>
|
|
</div>
|
|
<router-link :to="{path:'/routes/iot/product.html',query:{number:item.number}}" class="card-body" style="display: block; text-align: center;">
|
|
<img :src="baseUrl+item.image" style="margin: 0px auto; width: 64px;">
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h2 style="font-size:1.5rem;margin:.5em 0;">平台场景<span data-toggle="tooltip" class="badge bg-green">{{scenes.length}}</span></h2>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<a class="btn btn-app" href="javascript:;" v-for="scene in scenes" @click="execOrganScene(scene.id)">
|
|
<img :src="baseUrl+scene.image" style="height:20px;max-width:68px;" />
|
|
<div>{{scene.organ.name}}-{{scene.name}}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</layout>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data: function () {
|
|
return {
|
|
title: '产品列表',
|
|
getProductsApi: '/IoTCenter/api/v1/product/getProducts',
|
|
getScenesApi: '/IoTCenter/api/v1/scene/getScenes',
|
|
url: '/IoTCenter/api/v1/product/getProducts',
|
|
products: [],
|
|
scenes: [],
|
|
events: ['ProductEntityInserted', 'ProductEntityUpdated', 'ProductEntityDeleted',
|
|
'DeviceEntityInserted', 'DeviceEntityUpdated', 'DeviceEntityDeleted',
|
|
'SceneEntityInserted', 'SceneEntityUpdated', 'SceneEntityDeleted']
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.subscribe();
|
|
this.load();
|
|
},
|
|
methods: {
|
|
load() {
|
|
var vm = this;
|
|
axios.post(this.baseUrl + this.getProductsApi).then(function (response) {
|
|
vm.products = response.data;
|
|
});
|
|
axios.post(this.baseUrl + this.getScenesApi).then(function (response) {
|
|
vm.scenes = response.data;
|
|
});
|
|
},
|
|
subscribe() {
|
|
var vm = this;
|
|
subscribe(this.events, function (method, data) {
|
|
vm.load();
|
|
});
|
|
},
|
|
unsubscribe() {
|
|
this.unsubscribe(this.events);
|
|
}
|
|
},
|
|
beforeDestroy: function () {
|
|
unsubscribe();
|
|
}
|
|
}
|
|
</script>
|