iot/projects/Platform/wwwroot/components/views/areas/default/device.vue

<template>
    <views-shared-layout>
        <template v-if="model">
            <div class="card">
                <div class="card-header">设备</div>
                <div class="card-body">
                    <div class="row">
                        <component :device="model" :is="'devices-'+model.ioTProduct.template"></component>
                    </div>
                </div>
            </div>
            <div v-for="data in getData()">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">{{ getName(data) }}</h3>
                            <ul role="tablist" class="nav nav-tabs card-tools">
                                <li class="nav-item"><a href="javascript:;" data-toggle="tab" class="nav-link active" @click="tabClick($event,data.key,'1d',data.name)">近1天</a></li>
                                <li class="nav-item"><a href="javascript:;" data-toggle="tab" class="nav-link" @click="tabClick($event,data.key,'7d',data.name)">近1周</a></li>
                                <li class="nav-item"><a href="javascript:;" data-toggle="tab" class="nav-link" @click="tabClick($event,data.key,'30d',data.name)">近30天</a></li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <canvas class="chart" style="width:60%;max-width:100%;" :id="model.number+'-'+data.key"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </views-shared-layout>
</template>
<script>
    export default {
        data: function () {
            return {
                title: '设备中心',
                url: config.service('platform/api/v1/Device/GetDevice?id=' + this.$route.query.id),
                time: '1d',
                model: null
            }
        },
        mounted: function () {
            this.subscribe();
            this.load();
        },
        beforeDestroy: function () {
            PubSub.unsubscribes(this.events);
        },
        methods: {
            load: function () {
                var vm = this;
                axios.post(this.url).then(function (response) {
                    vm.model = response.data;
                    vm.$nextTick(function () {
                        vm.updateChart();
                    });
                });
            },
            subscribe: function () {
                var vm = this;
                PubSub.subscribes(this.events, function (method, data) {
                    vm.load();
                });
            },
            getName: function (data) {
                if (data.unit) {
                    return data.name + data.unit;
                }
                return data.name;
            },
            getData: function () {
                return Enumerable.from(this.model.data).where(o => o.dataType === 20).toArray();
            },
            updateChart: function () {
                var dataList = this.getData();
                for (var i = 0; i < dataList.length; i++) {
                    this.changeTime(dataList[i].key, this.time, dataList[i].name);
                }
            },
            tabClick: function (event, key, time, title) {
                this.time = time;
                this.changeTime(key, time, title);
                var link = $(event.currentTarget);
                if (!link.hasClass('active')) {
                    link.parent().siblings().find('a.active').removeClass('active');
                    link.addClass('active');
                }
            },
            changeTime: function (key, time, title) {
                var vm = this;
                var url = config.service('platform/api/v1/Device/GetChartData');
                var data = {
                    number: this.model.number,
                    key: key,
                    time: time
                };
                axios.post(url, data, { crossDomain: true }).then(function (response) {
                    var data = response.data;
                    vm.UpdateChartInternal(key, data, title);
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            UpdateChartInternal(key, data, title) {
                var canvas = document.getElementById(this.model.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
                    });
                }
            }
        }
    }
</script>