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.
94 lines
3.3 KiB
94 lines
3.3 KiB
@{
|
|
HideBread = true;
|
|
}
|
|
<div class="row" style="text-align:center;">
|
|
<img src="~/images/home.png" style="max-width:100%;margin:0 auto;" />
|
|
</div>
|
|
<br />
|
|
<div class="row overlay-wrapper">
|
|
<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>
|
|
<a class="card-body" :href="'@Url.Content("~")/Home/Product/?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 class="col-md-12" v-if="scenes.length">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">全局场景</h3>
|
|
<div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{scenes.length}}</span></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<button class="btn btn-success" v-for="scene in scenes" v-on:click="execScene(scene.id)">{{scene.name}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@section styles{
|
|
<style>
|
|
.card-body button.btn {
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
}
|
|
@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/product/getProducts',
|
|
products: [],
|
|
scenes: []
|
|
};
|
|
},
|
|
mounted: function () {
|
|
connect();
|
|
this.load();
|
|
},
|
|
methods: {
|
|
load: function () {
|
|
var vm = this;
|
|
axios.post(baseUrl + '/api/v1/product/getProducts').then(function (response) {
|
|
vm.products = response.data;
|
|
});
|
|
axios.post(baseUrl + '/api/v1/Scene/GetScenes').then(function (response) {
|
|
vm.scenes = response.data;
|
|
});
|
|
}
|
|
}
|
|
});
|
|
onMessage = function (method, json, to, from) {
|
|
var item = JSON.parse(json);
|
|
if (method === 'ProductEntityInserted' ||
|
|
method === 'ProductEntityUpdated' ||
|
|
method === 'ProductEntityDeleted' ||
|
|
method === 'DeviceEntityInserted' ||
|
|
method === 'DeviceEntityDeleted') {
|
|
app.load();
|
|
}
|
|
else if (method === 'SceneEntityInserted' ||
|
|
method === 'SceneEntityUpdated' ||
|
|
method === 'SceneEntityDeleted') {
|
|
if (item.nodeId === null) {
|
|
app.load();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
} |