iot/projects/IoTCenter/wwwroot/home.html

<style>
    .content-wrapper {
        background-color: lightblue;
    }

    input.switch {
        display: none;
    }

    label.switch {
        display: inline-block;
        width: 60px;
        height: 30px;
        border-radius: 30px;
    }

        label.switch.on {
            background-color: green;
        }

        label.switch.off {
            background-color: grey;
        }

        label.switch.on::before {
            content: '';
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            background-color: white;
            position: absolute;
            left: 0;
        }

        label.switch.off::after {
            content: '';
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            background-color: white;
            position: absolute;
            right: 0;
        }
</style>
<div class="row" v-if="ViewModel">
    <div class="col-md-6">
        <div class="box box-solid">
            <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-solid">
            <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.toFixed(2)}} 千瓦时</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-12">
        <div class="box box-solid">
            <table class="table">
                <tr>
                    <td>
                        <button class="btn btn-olive btn-primary ajax AllPowerOn">一键开</button>
                    </td>
                    <td>
                        <button class="btn btn-olive btn-primary ajax AllPowerOff">一键关</button>
                    </td>
                    <td>
                        <button class="btn btn-olive btn-primary ajax AllSwitchOn">一路开关开</button>
                    </td>
                    <td>
                        <button class="btn btn-olive btn-primary ajax AllSwitchOff">一路开关关</button>
                    </td>
                    <td>
                        <button class="btn btn-olive btn-primary ajax AllSwitch3On">三路开关开</button>
                    </td>
                    <td>
                        <button class="btn btn-olive btn-primary ajax AllSwitch3Off">三路开关关</button>
                    </td>
                    <td>
                        <button class="btn btn-olive btn-primary ajax AllSocketOn">插座开</button>
                    </td>
                    <td>
                        <button class="btn btn-olive btn-primary ajax AllSocketOff">插座关</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-md-12">
        <div class="box box-solid">
            <div class="row">
                <button class="btn btn-block btn-info ajax GlobalScene" v-for="scene in ViewModel.Scenes" :data-scene-id="scene.Id">{{scene.Name}}</button>
            </div>
        </div>
    </div>
</div>
<div class="row" v-if="ViewModel">
    <div class="col-md-4" v-for="node in ViewModel.Nodes">
        <div class="box box-solid">
            <div class="box-header">
                <h3 class="box-title">{{node.Name}}</h3>
                <div class="pull-right box-tools">
                    <label class="switch on"><input :data-node-number="node.Number" class="switch" type="checkbox" checked /></label>
                </div>
            </div>
            <div class="box-body">
                <a :href="'/Node?number='+node.Number+'&template='+node.Template"><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 ajax NodePowerOn" :data-node-number="node.Number">一键开</button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-block btn-primary ajax NodePowerOff" :data-node-number="node.Number">一键关</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 ajax Scene" :data-scene-id="scene.Id">{{scene.Name}}</button>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var connection;
    var connectionId;
    $.ajaxSetup({
        cache: false,
        timeout: 5000
    });
    function connect() {
        if (connection && connection.connection.connectionState === 1) {
            console.log('has connected');
        }
        else {
            console.log('start connect to server:' + Date());
            connection.start().then(function () {
                console.log('signalR>start');
            }).catch(function (err) {
                console.error(err.toString());
                setTimeout(connect, 10 * 1000);
            });
        }
    }
    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;
    }
    function ajax(url, data, type) {
        console.log(url);
        type = type || 'get';
        $('.overlay').show();
        $.ajax({
            type: type,
            url: url,
            data: data,
            success: AjaxCallBack
        }).fail(function (result) {
            console.log('error');
            console.log(result);
        }).always(function () {
            $('.overlay').hide();
        });
    }
    function AjaxCallBack(response) {
        var result = response;
        if (result.code === 0) {
            if (result.type === 0) {
                if (result.format === 1) {
                    console.log('format/1/base64 jpeg image');
                    $('#callback .page-content').html('<img class="shot" src="' + result.data + '">');
                }
                else {
                    console.log('format/0/json object');
                    $('#callback .page-content').html(result.data);
                }
                app.popup.open('#callback');
            }
        }
    }
</script>
<script>
    function onMessage() {
        connection.on('Connected', function (id) {
            connectionId = id;
        });
    }
</script>
<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
        });
    }
    $('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');
        }
    });

    $('body').on('click', 'button.ajax', function (e) {
        var data = $.map($('.switch:checked').toArray(), function (o) { return $(o).attr('data-node-number'); });
        if ($(this).hasClass('AllPowerOn')) {
            ajax('/App/AllPowerOn', { nodes: data }, 'post');
        } else if ($(this).hasClass('AllPowerOff')) {
            ajax('/App/AllPowerOff', { nodes: data }, 'post');
        } else if ($(this).hasClass('AllSwitchOn')) {
            ajax('/App/AllSwitchOn', { nodes: data }, 'post');
        } else if ($(this).hasClass('AllSwitchOff')) {
            ajax('/App/AllSwitchOff', { nodes: data }, 'post');
        } else if ($(this).hasClass('AllSwitch3On')) {
            ajax('/App/AllSwitch3On', { nodes: data }, 'post');
        } else if ($(this).hasClass('AllSwitch3Off')) {
            ajax('/App/AllSwitch3Off', { nodes: data }, 'post');
        } else if ($(this).hasClass('AllSocketOn')) {
            ajax('/App/AllSocketOn', { nodes: data }, 'post');
        } else if ($(this).hasClass('AllSocketOff')) {
            ajax('/App/AllSocketOff', { nodes: data }, 'post');
        } else if ($(this).hasClass('NodePowerOn')) {
            ajax('/App/NodePowerOn', { node: $(this).attr('data-node-number') }, 'post');
        } else if ($(this).hasClass('NodePowerOff')) {
            ajax('/App/NodePowerOff', { node: $(this).attr('data-node-number') }, 'post');
        } else if ($(this).hasClass('NodeSwitchOn')) {
            ajax('/App/NodeSwitchOn', { node: $(this).attr('data-node-number') }, 'post');
        } else if ($(this).hasClass('NodeSwitchOff')) {
            ajax('/App/NodeSwitchOff', { node: $(this).attr('data-node-number') }, 'post');
        } else if ($(this).hasClass('NodeSocketOn')) {
            ajax('/App/NodeSocketOn', { node: $(this).attr('data-node-number') }, 'post');
        } else if ($(this).hasClass('NodeSocketOff')) {
            ajax('/App/NodeSocketOff', { node: $(this).attr('data-node-number') }, 'post');
        } else if ($(this).hasClass('Scene')) {
            ajax('/App/ExecScene', { connectionId: connectionId, id: $(this).attr('data-scene-id') }, 'post');
        } else if ($(this).hasClass('GlobalScene')) {
            ajax('/App/ExecGlobalScene', { connectionId: connectionId, id: $(this).attr('data-scene-id') }, 'post');
        }
        return false;
    });
</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');
                });
                var wsUrl = '/hub?group=page';
                connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
                onMessage();
                connect();
            });
        }
    });
</script>