iot/projects/IoTCenter/wwwroot/home.default.html

<div class="row" v-if="ViewModel">
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-body row">
                <div class="col-md-6">
                    <canvas id="NodeChart" style="width:100%;height:250px;"></canvas>
                    <div class="description-block border-right">
                        <span class="description-text">节点：{{ViewModel.NodeChart.total}} 在线：{{ViewModel.NodeChart.online}} 离线：{{ViewModel.NodeChart.offline}}</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <canvas id="DeviceChart" style="width:100%;height:250px;"></canvas>
                    <div class="description-block">
                        <span class="description-text">设备：{{ViewModel.DeviceChart.total}} 在线：{{ViewModel.DeviceChart.online}} 离线：{{ViewModel.DeviceChart.offline}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-body row">
                <div class="col-md-12">
                    <canvas id="EnergyChart" style="width:100%;height:250px;"></canvas>
                    <div class="description-block">
                        <span class="description-text">总电量：{{ViewModel.EnergyChart.total}} 千瓦时</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" v-if="ViewModel">
    <div class="col-md-4">
        <select class="form-control select search">
            <option value="">选择教室</option>
            <option v-for="node in ViewModel.Nodes" value="node.Number">{{node.Name}}</option>
        </select>
    </div>
    <div class="col-md-2">
    </div>
    <div class="col-md-1">
        <button class="btn btn-block btn-primary">一键开</button>
    </div>
    <div class="col-md-1">
        <button class="btn btn-block btn-primary">一键关</button>
    </div>
    <div class="col-md-1">
        <button class="btn btn-block btn-primary">开关开</button>
    </div>
    <div class="col-md-1">
        <button class="btn btn-block btn-primary">开关关</button>
    </div>
    <div class="col-md-1">
        <button class="btn btn-block btn-primary">插座开</button>
    </div>
    <div class="col-md-1">
        <button class="btn btn-block btn-primary">插座关</button>
    </div>
</div>

<hr />
<div class="row" v-if="ViewModel">
    <div class="col-md-4" v-for="node in ViewModel.Nodes">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">{{node.Name}}</h3>
                <div class="pull-right box-tools">
                    <label class="switch on"><input class="switch" type="checkbox" checked /></label>
                </div>
            </div>
            <div class="box-body">
                <a :href="'/Node?number='+node.Number"><img :src="node.Image" style="max-width:100%;height:auto;border-radius:10px;" /></a>
            </div>
            <div class="box-footer">
                <div class="row">
                    <div class="col-md-6">
                        <button class="btn btn-block btn-primary">一键开</button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-block btn-primary">一键关</button>
                    </div>
                </div>
                <hr />
                <div class="row" v-if="node.Scenes.length">
                    <template v-for="scene in node.Scenes">
                        <div class="col-md-3" v-if="scene.Tag=='home'">
                            <button class="btn btn-block btn-info">{{scene.Name}}</button>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function UpdateChart(id, title, data, labels, colors, type) {
        var ctx = document.getElementById(id).getContext('2d');
        colors = colors || $.map(data, function (item) { return Color16(item); });
        var data = {
            datasets: [{
                label: title,
                data: data,
                backgroundColor: colors
            }],
            labels: labels
        };
        var options = {
            responsive: true,
            legend: {
                position: 'right',
            },
            title: {
                display: true,
                text: title
            },
            animation: {
                duration: 0
            }
        };
        var chart = new Chart(ctx, {
            type: type,
            data: data,
            options: options
        });
    }
    function Color16() {//十六进制颜色随机
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
        return color;
    }
    $('body').on('change', 'input.switch', function (e) {
        if ($(this).is(':checked')) {
            $(this).parent('label').addClass('on');
            $(this).parent('label').removeClass('off');
        } else {
            $(this).parent('label').addClass('off');
            $(this).parent('label').removeClass('on');
        }
    });
</script>
<script>
    var vm = new Vue({
        el: '#template',
        data() {
            return { ViewModel: null }
        },
        mounted() {
            var url = '/Home/GetNodeList';
            $.get(url, function (data) {
                vm.ViewModel = data;
                Vue.nextTick(function () {
                    UpdateChart('NodeChart', '节点', vm.ViewModel.NodeChart.data, vm.ViewModel.NodeChart.labels, null, 'pie');
                    UpdateChart('DeviceChart', '设备', vm.ViewModel.DeviceChart.data, vm.ViewModel.DeviceChart.labels, null, 'doughnut');
                    UpdateChart('EnergyChart', '用电', vm.ViewModel.EnergyChart.data, vm.ViewModel.EnergyChart.labels, null, 'bar');
                });
            });
        }
    });
</script>