iot/projects/WebMVC/wwwroot/pages/node.html

<template>
    <layout v-bind:title="title">
        <!--场景-->
        <div class="row" v-if="node.scenes.length">
            <div class="col">
                <div class="card" style="margin:10px;">
                    <div class="card-header">{{node.name}}的场景</div>
                    <div class="card-body">
                        <button class="btn btn-success" v-for="scene in node.scenes" v-on:click="execScene(scene.id)">{{scene.name}}</button>
                    </div>
                </div>
            </div>
        </div>
        <!--环境-->
        <!--<div class="col col-md-12 my-2 px-3">环境</div>-->
        <div class="row">
            <!--光强检测器-->
            <div v-for="device in getDevices('光强检测器')" class="col" style="min-width:320px;">
                <iot-light v-bind:device="device"></iot-light>
            </div>
            <!--温湿度传感器-->
            <div v-for="device in getDevices('温湿度传感器')" class="col" style="min-width:320px;">
                <iot-humiture v-bind:device="device"></iot-humiture>
            </div>
            <!--烟雾报警器-->
            <div v-for="device in getDevices('烟雾报警器')" class="col" style="min-width:320px;">
                <iot-smoke v-bind:device="device"></iot-smoke>
            </div>
            <!--人体感应器-->
            <div v-for="device in getDevices('人体感应器')" class="col" style="min-width:320px;">
                <iot-person v-bind:device="device"></iot-person>
            </div>
            <!--</div>
            <div class="col col-md-12 my-2 px-3">用电</div>
            <div class="row">-->
            <!--门锁-->
            <div v-for="device in getDevices('门锁')" class="col" style="min-width:320px;">
                <iot-door v-bind:device="device"></iot-door>
            </div>
            <!--调色灯-->
            <div v-for="device in getDevices('调色灯')" class="col" style="min-width:320px;">
                <iot-color-light v-bind:device="device"></iot-color-light>
            </div>
            <!--窗帘电机-->
            <div v-for="device in getDevices('窗帘电机')" class="col" style="min-width:320px;">
                <iot-curtain v-bind:device="device"></iot-curtain>
            </div>
            <!--一路开关-->
            <div v-for="device in getDevices('一路开关')" class="col" style="min-width:320px;">
                <iot-switch v-bind:device="device"></iot-switch>
            </div>

            <!--三路开关-->
            <div v-for="device in getDevices('三路开关')" class="col" style="min-width:320px;">
                <iot-switch3 v-bind:device="device"></iot-switch3>
            </div>
            <!--插座-->
            <div v-for="device in getDevices('插座')" class="col" style="min-width:320px;">
                <iot-socket v-bind:device="device"></iot-socket>
            </div>

            <!--智能插座-->
            <div v-for="device in getDevices('智能插座')" class="col" style="min-width:320px;">
                <iot-socket v-bind:device="device"></iot-socket>
            </div>
        </div>
        <!--<div class="col col-md-12 my-2 px-3">遥控器</div>-->
        <div class="row">
            <!--摄像头-->
            <div v-for="device in getDevices('摄像头')" class="col" style="min-width:320px;">
                <iot-camera v-bind:device="device"></iot-camera>
            </div>
            <!--红外转发器-->
            <div v-for="device in getDevices('红外转发器')" class="col" style="min-width:320px;">
                <iot-ir v-bind:device="device"></iot-ir>
            </div>
            <!--串口控制器-->
            <div v-for="device in getSPDevices()" class="col" style="min-width:320px;">
                <iot-serial-port v-bind:device="device"></iot-serial-port>
            </div>
        </div>
    </layout>
</template>

<script>
    export default {
        data() {
            return {
                title: "节点",
                url: '/IoTCenter/api/v1/node/getNode?number=' + this.$route.query.number,
                node: {
                    devices: [],
                    scenes: []
                },
                events: ['SceneEntityInserted', 'SceneEntityUpdated', 'SceneEntityDeleted',
                    'NodeEntityInserted', 'NodeEntityUpdated', 'NodeEntityDeleted',
                    'DeviceEntityInserted', 'DeviceEntityUpdated', 'DeviceEntityDeleted',
                    'DataEntityInserted', 'DataEntityUpdated', 'DataEntityDeleted']
            };
        },
        mounted: function () {
            this.subscribe();
            this.load();
        },
        methods: {
            load: function () {
                var vm = this;
                var url = config.baseUrl + this.url;
                axios.post(url).then(function (response) {
                    vm.node = response.data;
                    vm.subscribe();
                });
            },
            getDevices: function (name) {
                return Enumerable.from(this.node.devices).where(function (o) { return o.name === name; }).toArray();
            },
            getSPDevices: function () {
                return Enumerable.from(this.node.devices).where(function (o) {
                    if (o.name === '串口控制器') {
                        var data = Enumerable.from(o.data)
                            .where(function (d) { return d.name === "指令"; })
                            .firstOrDefault();
                        if (data) {
                            var btns = Enumerable.from(JSON.parse(data.value))
                                .orderBy(function (b) { return b.order; })
                                .toArray();
                            if (Enumerable.from(btns).any(function (b) { return b.name !== '测试'; })) {
                                return true;
                            }
                        }
                        return false;
                    }
                    return false;
                }).toArray();
            },
            getDeviceDataAttr: function (number, name, attr) {
                var device = Enumerable.from(this.node.devices).where(function (o) { return o.number === number; }).firstOrDefault();
                var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
                if (data !== null) {
                    return data[attr];
                }
                return null;
            },
            getDataValue: function (number, name) {
                return this.getDeviceDataAttr(number, name, 'value');
            },
            scenes: function () {
                return Enumerable.from(this.node.scenes).orderBy('o=>o.displayOrder').toArray();
            },
            subscribe() {
                var vm = this;
                subscribe(this.events, function (method, data) {
                    var item = JSON.parse(data.message);
                    if (method.indexOf('Node') == 0) {
                        if (vm.node.id === item.id) {
                            if (method.indexOf('Deleted') >= 0) {
                                console.log('node has deleted');
                                router.push('/pages/nodes.html');
                            }
                            else {
                                vm.load();
                            }
                        }
                    }
                    else {
                        var list;
                        if (method.indexOf('Device') == 0) {
                            if (vm.node.id === device.nodeId) {
                                list = device.devices;
                            }
                        }
                        else if (method.indexOf('Scenes') == 0) {
                            if (vm.node.id === scene.nodeId) {
                                list = device.scenes;
                            }
                        }
                        else if (method.indexOf('Data') == 0) {
                            var device = Enumerable.from(vm.node.devices).firstOrDefault(function (o) { return o.id === item.deviceId; });
                            if (device) {
                                list = device.data;
                            }
                        }
                        if (list) {
                            if (method.indexOf('Deleted') >= 0) {
                                removeById(list, item);
                            }
                            else {
                                updateById(list, item);
                            }
                        }
                    }
                });
            },
            unsubscribe() {
                this.unsubscribe(this.events);
            },
            beforeDestroy: function () {
                unsubscribe();
            }
        }
    };
</script>