@{
    HideBread = true;
}
<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 Nodes">
        <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/Node/?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: {
                Nodes: []
            },
            mounted() {
                this.load();
            },
            methods: {
                load: function () {
                    var url = '/App/GetNodes?_=' + Date.now()
                    axios.post(url)
                        .then(function (response) {
                            vm.Nodes = 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 == 'EntityDeleted') {
                vm.load();
            }
        });
        setTimeout(connect, 0);
    </script>
}