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

<template>
    <layout v-bind:title="title">
        <div v-if="device">
            <div class="row">
                <div class="col">
                    <iot-gateway v-if="device.name==='网关'" v-bind:device="device"></iot-gateway>
                    <iot-light v-else-if="device.name==='光强检测器'" v-bind:device="device"></iot-light>
                    <iot-humiture v-else-if="device.name==='温湿度传感器'" v-bind:device="device"></iot-humiture>
                    <iot-smoke v-else-if="device.name==='烟雾报警器'" v-bind:device="device"></iot-smoke>
                    <iot-person v-else-if="device.name==='人体感应器'" v-bind:device="device"></iot-person>
                    <iot-curtain v-else-if="device.name==='窗帘电机'" v-bind:device="device"></iot-curtain>
                    <iot-switch v-else-if="device.name==='一路开关'" v-bind:device="device"></iot-switch>
                    <iot-switch3 v-else-if="device.name==='三路开关'" v-bind:device="device"></iot-switch3>
                    <iot-socket v-else-if="device.name==='插座'" v-bind:device="device"></iot-socket>
                    <iot-socket v-else-if="device.name==='智能插座'" v-bind:device="device"></iot-socket>
                    <iot-ir v-else-if="device.name==='红外转发器'" v-bind:device="device" v-bind:edit="true"></iot-ir>
                    <iot-color-light v-else-if="device.name==='调色灯'" v-bind:device="device"></iot-color-light>
                    <iot-door v-else-if="device.name==='门锁'" v-bind:device="device"></iot-door>
                    <iot-camera v-else-if="device.name==='摄像头'" v-bind:device="device"></iot-camera>
                    <iot-serial-port v-else-if="device.name==='串口控制器'" v-bind:device="device" v-bind:edit="true"></iot-serial-port>
                </div>
            </div>
            <!--折线图-->
            <div class="row" v-if="hasChart()">
                <template v-for="data in device.data">
                    <div class="col-md-12" v-if="data.type===10||data.type===20">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">{{data.name}}(单位：{{data.unit}})</h3>
                                <ul role="tablist" class="nav nav-tabs card-tools">
                                    <li class="nav-item"><a href="#tab_11165f469-8f244804008d1500" data-toggle="tab" class="nav-link active" v-on:click="changeTime(data.key,'1d',data.name)">近24小时</a></li>
                                    <li class="nav-item"><a href="#tab_21165f469-8f244804008d1500" data-toggle="tab" class="nav-link" v-on:click="changeTime(data.key,'7d',data.name)">近7日</a></li>
                                    <li class="nav-item"><a href="#tab_31165f469-8f244804008d1500" data-toggle="tab" class="nav-link" v-on:click="changeTime(data.key,'30d',data.name)">近30日</a></li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <canvas class="chart" style="width:60%;max-width:100%;" :id="device.number+'-'+data.key"></canvas>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </layout>
</template>
<script>
    export default {
        data: function () {
            return {
                title: '设备',
                url: '/IoTCenter/api/v1/device/getDevice?number=' + this.$route.query.number,
                device: null,
                events: ['DeviceEntityInserted', 'DeviceEntityUpdated', 'DeviceEntityInserted',
                    'DataEntityInserted', 'DataEntityUpdated', 'DataEntityInserted']
            }
        },
        mounted: function () {
            this.subscribe();
            this.load();
        },
        methods: {
            load() {
                var url = config.baseUrl + this.url;
                var vm = this;
                axios.post(url).then(function (response) {
                    vm.device = response.data;
                    vm.subscribe();
                    vm.$nextTick(function () {
                        vm.updateChart();
                    });
                });
            },
            updateChart: function () {
                var dataList = Enumerable.from(this.device.data).where(function (o) {
                    return o.type === 10 || o.type === 20;
                }).toArray();
                for (var i = 0; i < dataList.length; i++) {
                    this.changeTime(dataList[i].key, '1d', dataList[i].name);
                }
            },
            changeTime: function (key, time, title) {
                var vm = this;
                var url = config.baseUrl + '/IoTCenter/api/v1/Device/GetChartData';
                var data = {
                    number: this.device.number,
                    key: key,
                    time: time
                };
                axios.post(url, data, { crossDomain: true })
                    .then(function (response) {
                        var data = response.data;
                        vm.UpdateChartInternal(key, data, title);
                        console.log('折线图更新成功');
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            UpdateChartInternal(key, data, title) {
                var canvas = document.getElementById(this.device.number + '-' + key);
                var chart;
                Chart.helpers.each(Chart.instances, function (instance) {
                    if (instance.chart.canvas.id === canvas.id) {
                        chart = instance;
                    }
                });
                if (chart) {
                    chart.data = data;
                    chart.update();
                }
                else {
                    var ctx = canvas.getContext('2d');
                    var options = {
                        responsive: true,
                        legend: {
                            position: 'bottom'
                        },
                        title: {
                            display: false,
                            text: title
                        },
                        animation: {
                            duration: 0
                        }
                    };
                    chart = new Chart(ctx, {
                        type: 'line',
                        data: data,
                        options: options
                    });
                }
            },
            hasChart: function () {
                if (this.device) {
                    return this.device.name === '温湿度传感器' ||
                        this.device.name === 'PM2.5感应器' ||
                        this.device.name === '光强检测器' ||
                        this.device.name === '智能插座';
                }
                return false;
            },
            subscribe() {
                var vm = this;
                subscribe(this.events, function (method, data) {
                    if (method.indexOf('Data') == 0) {
                        updateById(vm.device.data, JSON.parse(data.message));
                        if (vm.hasChart()) {
                            vm.updateChart();
                        }
                    }
                });
            },
            unsubscribe() {
                unsubscribe(this.events);
            }
        },
        beforeDestroy: function () {
            this.unsubscribe();
        }
    }
</script>