iot/projects/IoTCenter/Views/Home/Device.cshtml

@section bread{
    <li class="breadcrumb-item"><a href="@Url.Action("Product","Home",new { number=Context.Request.Query["productNumber"]})">产品</a></li>
}
<div id="template">
    <template v-if="device">
        <div class="row">
            <div class="col" v-if="device">
                <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-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>
    </template>
</div>
@section styles{
    <style>
        .camera img {
            width: 32px;
            margin: 0 auto;
        }
    </style>
}
@section scripts{
    <script>
        var baseUrl = '@Url.Content("~")';
        var hubUrl = "@Url.Content("~")/hub?group=page";
        var onMessage = null;
    </script>
    <script src="~/lib/WXInlinePlayer/prod.all.wasm.combine.js"></script>
    <script src="~/lib/WXInlinePlayer/index.js"></script>
    <script src="~/js/util.js"></script>
    <script src="~/js/iot.js"></script>
    <script src="~/js/message.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    title: "产品",
                    url: '/api/v1/product/getProducts',
                    device: null,
                };
            },
            mounted: function () {
                connect();
                this.load();
            },
            methods: {
                load: function () {
                    var vm = this;
                    axios.post(baseUrl + '/api/v1/device/getDevice?number=' + new URI().search(true).number).then(function (response) {
                        vm.device = response.data;
                        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 = '/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 () {
                    var o = this.device;
                    return o.name === '温湿度传感器' || o.name === 'PM2.5感应器' || o.name === '光强检测器' || o.name === '智能插座';
                }
            }
        });
        onMessage = function (method, json, to, from) {
            console.log(method + ":" + json);
            var item = JSON.parse(json);
            if (method === 'DataEntityInserted' ||
                method === 'DataEntityUpdated' ||
                method === 'DataEntityDeleted') {
                if (app.device.id === item.deviceId) {
                    updateById(app.device.data, item);
                    app.updateChart();
                }
            }
        }
    </script>
}