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.
84 lines
2.8 KiB
84 lines
2.8 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="overlay">
|
|
<i class="fas fa-2x fa-sync-alt"></i>
|
|
</div>
|
|
<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.DeviceCount}}</span></div>
|
|
</div>
|
|
<a class="card-body" :href="'/Home/Product/?number='+item.Number" style="display:block;text-align:center;">
|
|
<img :alt="item.Name" :src="item.Image" style="margin:0 auto;width:64px;" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@section scripts{
|
|
<script>
|
|
var vm = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
Products: []
|
|
},
|
|
mounted() {
|
|
this.load();
|
|
},
|
|
methods: {
|
|
load: function () {
|
|
var url = '/App/GetProducts?_=' + Date.now()
|
|
axios.post(url)
|
|
.then(function (response) {
|
|
vm.Products = response.data;
|
|
})
|
|
.catch(function (error) {
|
|
alert(error, '警告', function () { })
|
|
})
|
|
.then(function () {
|
|
$('.overlay').hide();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
var debug = true;
|
|
var wsUrl = '/hub?group=page';
|
|
var connectionId;
|
|
const connection = new signalR.HubConnectionBuilder()
|
|
.withUrl(wsUrl)
|
|
.build();
|
|
function connect() {
|
|
if (debug) { console.log('start connect to server:' + Date()); }
|
|
connection.start().then(function () {
|
|
|
|
}).catch(function (err) {
|
|
console.error(err.toString());
|
|
setTimeout(connect, 15 * 1000);
|
|
});
|
|
}
|
|
connection.on('Connected', function (id) {
|
|
connectionId = id;
|
|
console.log(connectionId);
|
|
});
|
|
connection.onclose(function (err) {
|
|
setTimeout(connect, 15 * 1000);
|
|
});
|
|
connection.on("ServerToClient", function (method, json, from) {
|
|
console.log(method + ':' + json);
|
|
if (method == 'ProductEntityInserted' ||
|
|
method == 'DeviceEntityInserted' ||
|
|
method == 'DeviceEntityDeleted') {
|
|
vm.load();
|
|
}
|
|
});
|
|
setTimeout(connect, 0);
|
|
</script>
|
|
} |