iot/projects/Demo/Demo/wwwroot/js/app.js

var vm;
var app;
var node;
var device;
var connection;
var connectionId;

$.ajaxSetup({
    cache: false,
    timeout: 5000
});
function ajax(url) {
    console.log(url);
    app.dialog.progress();
    $.get(url, function (response) {
        if (response.code === 0) {
            if (response.type === 0) {
                if (response.format === 1) {
                    console.log('format/1/base64 jpeg image');
                    $('#callback .page-content .block').html('<img class="shot" src="' + response.data + '">');
                }
                else {
                    console.log('format/0/json object');
                    $('#callback .page-content .block').html(response.data);
                }
                app.popup.open('#callback');
            }
        }
    }).fail(function (result) {
        console.log('error');
        console.log(result);
    }).always(function () {
        app.dialog.close();
    });;
}
// Init F7 Vue Plugin
Framework7.use(Framework7Vue);

// Init Page Components
Vue.component('page-home', {
    template: '#page-home',
    data() {
        return {
        };
    },
    mounted() {
    },
    methods: {
    }
});
Vue.component('page-login', {
    template: '#page-login',
    data() {
        return {
            Server: localStorage.getItem('Server'),
            UserName: localStorage.getItem('UserName'),
            Password: null,
            RememberMe: localStorage.getItem('RememberMe')
        };
    },
    mounted() {
        $('form').removeData('validator');
        $('form').removeData('unobtrusiveValidation');
        $.validator.unobtrusive.parse('form');
    },
    methods: {
        OnSubmit: function (e) {
            if (!$('form').valid()) {
                return;
            }
            var url = e.target.action;
            var data = $(e.target).serialize();
            var current = this;
            $.post(url, data, function (response) {
                if (response.Code === 0) {
                    vm.Token = response.Token;
                    if (current.RememberMe === true) {
                        localStorage.setItem("Token", response.Token);
                        localStorage.setItem("Server", current.Server);
                        localStorage.setItem("UserName", current.UserName);
                        localStorage.setItem("NickName", response.NickName);
                        localStorage.setItem("Title", response.Title);
                        localStorage.setItem("IoTServer", _.trimEnd(response.IoTServer, ['/']));
                    }
                    else {
                        localStorage.removeItem("Token");
                    }
                    vm.Server = current.Server;
                    vm.RememberMe = current.RememberMe;
                    vm.UserName = current.UserName;
                    vm.NickName = response.NickName;
                    vm.Title = response.Title;
                    vm.IoTServer = _.trimEnd(response.IoTServer, ['/']);
                    vm.$f7.view.current.router.back();
                }
                else {
                    app.dialog.alert(response.Message, "消息");
                }
            }).fail(function (e) {
                var message;
                if (e.status === 0) {
                    message = "不是有效的服务器地址";
                }
                else {
                    message = e.status + ":" + e.statusText;
                }
                vm.$f7.dialog.alert(message, "消息");
            });
        }
    }
});
Vue.component('page-node', {
    template: '#page-node',
    data() {
        return {
            Node: {
                Number: null,
                Name: null,
                Sences: [],
                Devices: []
            }
        }
    },
    mounted() {
        this.Node.Number = this.$f7route.params.number;
        this.Node.Name = this.$f7route.params.name;
        node = this;
        //load node with sence and device, without apis
        var ajaxUrl = vm.IoTServer + "/App/GetNode?token=" + vm.Token + '&number=' + this.Node.Number;
        app.dialog.progress();
        $.get(ajaxUrl, function (response) {
            this.Node = response;
        }).always(function () {
            app.dialog.close();
        });
    },
    destroyed() {
        node = null;
    },
    methods: {
        getData(device, dataName) {
            if (device != null) {
                var data = _.first(_.filter(device.Data, function (o) { return o.Name === dataName }));
                if (data != null) {
                    if (data.Value) {
                        var value = data.Value;
                        if (data.Unit) {
                            value += " " + data.Unit;
                        }
                        if (data.Description) {
                            value += " " + data.Description;
                        }
                        return value;
                    }
                    else {
                        console.log('值为空：' + device.Name + '/' + dataName);
                    }
                }
                else {
                    console.log('无法找到：' + device.Name + '/' + dataName);
                }

            }
            else {
                console.log('无法找到：' + dataName);
            }
            return "";
        },
        getDevices: function () {
            var args = arguments;
            return _.chain(this.Node.Devices).filter(function (device) {
                return _.chain(args).filter(function (name) { return device.Name.indexOf(name) != -1; }).value().length > 0;
            }).orderBy(['DisplayOrder', 'Name']).value();
        },
        callSence(id) {
            var url = vm.IoTServer + '/Command/Sence/?node=' + this.Node.Number + '&id=' + id;
            ajax(url);
        },
        call: function (id, cmd, query) {
            query = query || '';
            var url = vm.IoTServer + '/Command/Exec/?connectionId=' + connectionId + '&node=' + this.Node.Number + '&cmd=' + cmd + '&id=' + id;
            if (query != '') {
                url += "&" + query;
            }
            ajax(url);
        },
        callAll: function (name, cmd, query) {
            query = query || '';
            var url = vm.IoTServer + '/Command/ExecAll/?connectionId=' + connectionId + '&node=' + this.Node.Number + '&cmd=' + cmd;
            var list = this.getDevices(name);
            for (var i = 0; i < list.length; i++) {
                url += '&id[' + i + ']=' + list[i].Id;
            }
            if (query != '') {
                url += "&" + query;
            }
            ajax(url);
        }
    }
});
Vue.component('page-device', {
    template: '#page-device',
    data() {
        return {
            Device: {
                Number: null,
                Name: null,
                Data: [],
                Apis: []
            }
        }
    },
    mounted() {
        this.Device.Number = this.$f7route.params.number;
        this.Device.Name = this.$f7route.params.name;
        device = this;
        //load node with sence and device, without apis
        var ajaxUrl = vm.IoTServer + "/App/GetDevice?token=" + vm.Token + '&number=' + this.Device.Number;
        app.dialog.progress();
        $.get(ajaxUrl, function (response) {
            node.Device = response;
        }).always(function () {
            app.dialog.close();
        });
    },
    destroyed() {
        device = null;
    },
});
Vue.component('page-not-found', {
    template: '#page-not-found'
});
// Init App
vm = new Vue({
    el: '#app',
    data() {
        return {
            f7params: {
                root: '#app',
                id: 'io.framework7.testapp',
                name: 'Framework7',
                theme: 'auto',
                routes: [
                    {
                        path: '/',
                        component: 'page-home'
                    },
                    {
                        path: '/login/',
                        component: 'page-login'
                    },
                    {
                        path: '/node/:number/name/:name',
                        component: 'page-node'
                    },
                    {
                        path: '/device/:number/name/:name',
                        component: 'page-device'
                    },
                    {
                        path: '(.*)',
                        component: 'page-not-found',
                    },
                ],
            },
            Title: localStorage.getItem('Title'),
            Server: localStorage.getItem('Server'),
            Token: localStorage.getItem('Token'),
            UserName: localStorage.getItem('UserName'),
            RememberMe: localStorage.getItem('RememberMe'),
            NickName: localStorage.getItem('NickName'),
            IoTServer: localStorage.getItem('IoTServer'),
            User: null,
            Nodes: [],
            Messages: [],
        }
    },
    mounted() {
        this.$f7ready((f7) => {
            app = this.$f7;
            if (this.Token) {
                this.init();
            }
            else {
                f7.view.current.router.navigate('/login/')
            }
        });
    },
    methods: {
        init() {
            var baseUrl = this.IoTServer;
            var wsUrl = baseUrl + "/hub?group=page";
            var ajaxUrl = baseUrl + "/App/GetNodes?token=" + this.Token;
            $.get(ajaxUrl, function (response) {
                vm.Nodes = response;
            });
            connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
            onMessage();
            connect();
        }
    }
});
///
function connect() {
    if (connection && connection.connection.connectionState === 1) {
        console.log('has connected');
    }
    else {
        console.log('start connect to server:' + Date());
        connection.start().then(function () {
            console.log('signalR>start');
        }).catch(function (err) {
            console.error(err.toString());
            setTimeout(connect, 10 * 1000);
        });
    }
}
function onMessage() {
    connection.on('Connected', function (id) {
        connectionId = id;
    });
    connection.on('ApiResult', function (result) {
        result = JSON.parse(result);
        if (result.code === 0) {
            if (result.type === 0) {
                if (result.format === 1) {
                    console.log('format/1/base64 jpeg image');
                    $('#callback .page-content .block').html('<img class="shot" src="' + result.data + '">');
                }
                else {
                    console.log('format/0/json object');
                    $('#callback .page-content .block').html(result.data);
                }
                app.popup.open('#callback');
            }
        }
    });
    connection.on("UpdateNode", (message) => {
        var node = JSON.parse(message);
        var oldNode = _.chain(vm.Nodes).filter(o => o.Number === node.Number).first().value();
        oldNode.Name = node.Name;
        console.log('update:' + node.Name);
    });
    connection.on("UpdateDevice", (message) => {
        var device = JSON.parse(message);
        //var update = false;
        //var node = _.chain(vm.model).filter(o => o.Number === device.Node.Number).first().value();
        //for (var i = 0; i < node.Devices.length; i++) {
        //    if (node.Devices[i].Number == device.Number) {
        //        update = true;
        //        break;
        //    }
        //}
        //if (update) {
        //    node.Devices.splice(i, 1, device);
        //}
        //else {
        //    node.Devices.push(device);
        //}
        //console.log('update:' + device.DisplayName);
        while (vm.Messages.length >= 20) {
            vm.Messages.pop();
        }
        vm.Messages.push(device);
        if (node && node.Node) {
            var update = false;
            for (var i = 0; i < node.Node.Devices.length; i++) {
                if (node.Node.Devices[i].Number == device.Number) {
                    update = true;
                    break;
                }
            }
            if (update) {
                node.Node.Devices.splice(i, 1, device);
            }
            else {
                node.Node.Devices.push(device);
            }
        }
    });
    connection.on("DeleteDevice", (message) => {
        var number = message;
        for (var i = 0; i < vm.model.length; i++) {
            var node = vm.model[i];
            for (var j = 0; j < node.Devices.length; j++) {
                if (node.Devices[j].Number == number) {
                    node.Devices.splice(j, 1);
                    break;
                }
            }
        }
        console.log('delete:' + number);
    });
    connection.onclose(function () {
        setTimeout(connect, 10 * 1000);
    });
}