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

<template>
    <layout v-bind:title="title">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>{{product.name}}</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><router-link to="/">产品列表</router-link></li>
                    <li class="breadcrumb-item active">{{product.name}}</li>
                </ol>
            </div>
        </div>
        <div class="row overlay-wrapper">
            <div class="col-md-12" v-if="HasBatchCommand()">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <input type="checkbox" id="All" class="checkall" v-on:change="SelectDevice($event)" />
                            <label for="All" class="btn btn-sm btn-info" style="height:31px;margin-bottom:0;">全选</label>
                            <button class="btn btn-sm btn-info uncheck" v-on:click="SelectDevice($event)">反选</button>
                        </div>
                        <div class="card-tools">
                            <button class="btn btn-success" v-on:click="CallApiAll('On')">开</button>
                            <button class="btn btn-success" v-on:click="CallApiAll('Stop')" v-if="product.name.indexOf('窗帘电机')>=0">停</button>
                            <button class="btn btn-success" v-on:click="CallApiAll('Off')">关</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6" v-for="item in product.devices">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <label style="font-weight:normal;"><input type="checkbox" name="numbers[]" class="item" :value="item.number" v-if="HasBatchCommand()" v-on:change="SelectDevice($event)">{{item.name}}</label>
                        </h3>
                        <div class="card-tools">
                            <template v-if="HasBatchCommand()">
                                {{GetDataValue(item.number,'状态')}}
                            </template>
                        </div>
                    </div>
                    <router-link :to="{path:'/pages/device.html',query:{number:item.number}}" class="card-body" style="display: block; text-align: center;">
                        <img :src="config.baseUrl+product.image" style="margin: 0px auto; width: 64px;">
                        <div>
                            <template v-if="item.name==='光强检测器'">
                                {{GetDataValue(item.number,'光照度')}}
                            </template>
                            <template v-else-if="item.name==='温湿度传感器'">
                                {{GetDataValue(item.number,'温度')}}℃ {{GetDataValue(item.number,'湿度')}}RH%
                            </template>
                        </div>
                    </router-link>
                    <div class="card-footer">
                        {{item.node.name}}
                    </div>
                </div>
            </div>
        </div>
    </layout>
</template>
<script>
    export default {
        data: function () {
            return {
                title: '产品',
                url: '/IoTCenter/api/v1/product/getProduct?number=' + this.$route.query.number,
                product: {
                    name: "",
                    devices: []
                },
                events: ['ProductEntityInserted', 'ProductEntityUpdated', 'ProductEntityDeleted',
                    'DeviceEntityInserted', 'DeviceEntityUpdated', 'DeviceEntityDeleted',
                    'DataEntityInserted', 'DataEntityUpdated', 'DataEntityDeleted']
            }
        },
        mounted: function () {
            this.subscribe();
            this.load();
        },
        methods: {
            load() {
                var url = config.baseUrl + this.url;
                var vm = this;
                axios.post(url).then(function (response) {
                    vm.product = response.data;
                });
            },
            HasBatchCommand() {
                return this.product.name === '调色灯'
                    || this.product.name.indexOf('窗帘电机') >= 0
                    || this.product.name.indexOf('开关') >= 0
                    || this.product.name.indexOf('插座') >= 0;
            },
            GetDevices() {
                return Enumerable.from(this.product.devices).orderBy(function (o) { return o.displayOrder; }).orderBy(function (o) { return o.name; }).toArray();
            },
            GetDataValue(number, name) {
                var device = Enumerable.from(this.product.devices)
                    .where(function (o) { return o.number === number; })
                    .firstOrDefault();
                if (device !== null) {
                    var data = Enumerable.from(device.data)
                        .where(function (o) { return o.name === name; })
                        .firstOrDefault();
                    if (data) {
                        return data.value;
                    }
                }
                return null;
            },
            GetDeviceDataAttr(number, name, attr) {
                var device = Enumerable.from(this.product.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;
            },
            SelectDevice: selectNode,
            CallApiAll(method) {
                var numbers = [];
                $('.item:checked').each(function () {
                    numbers.push($(this).val());
                });
                if (numbers.length) {
                    for (var i = 0; i < numbers.length; i++) {
                        execApi(numbers[i], this.product.path + method);
                    }
                } else {
                    Swal.fire('没有选中任何项');
                }
            },
            subscribe() {
                var vm = this;
                subscribe(this.events, function (method, data) {
                    var item = JSON.parse(data.message);
                    if (method.indexOf('Product') == 0) {
                        vm.load();
                    }
                    else {
                        var list;
                        if (method.indexOf('Device') == 0) {
                            if (vm.product.id === device.productId) {
                                list = device.devices;
                            }
                        }
                        else {
                            if (method.indexOf('Device') == 0) {
                                if (vm.product.id === device.productId) {
                                    list = product.devices;
                                }
                            }
                            else if (method.indexOf('Data') == 0) {
                                var device = Enumerable.from(vm.product.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() {
                unsubscribe(this.events);
            }
        },
        beforeDestroy: function () {
            this.unsubscribe();
        }
    }
</script>