From 911139f28ad167edc576aa105ed9224bcefe5030 Mon Sep 17 00:00:00 2001
From: wanggang <76527413@qq.com>
Date: Thu, 12 Sep 2019 11:34:15 +0800
Subject: [PATCH] update

Former-commit-id: a080525e2762d77ebd6cc8dcafd2a50445871fcf
---
 projects/IoTCenter/wwwroot/node.default.html | 1128 +++++++++---------
 1 file changed, 572 insertions(+), 556 deletions(-)

diff --git a/projects/IoTCenter/wwwroot/node.default.html b/projects/IoTCenter/wwwroot/node.default.html
index af105644..02171584 100644
--- a/projects/IoTCenter/wwwroot/node.default.html
+++ b/projects/IoTCenter/wwwroot/node.default.html
@@ -1,557 +1,573 @@
-<h2 class="page-header" v-if="ViewModel">{{ViewModel.Name}}</h2>
-<hr />
-<div class="row" v-if="ViewModel">
-    <div class="col-md-6">
-        <select class="form-control" id="camera" @change="CameraSelected">
-            <option v-for="c in GetCameras()" :value="c.Number">{{c.Name}}</option>
-        </select>
-        <div style="width:100%;height:265px;margin:0;padding:0;background:#000;">
-            <video id="flvPlayer" class="video" muted controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
-        </div>
-    </div>
-    <div class="col-md-6">
-        <div class="row">
-            <div class="col-md-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4">
-                            <img src="/images/temperature.png" style="width:48px;height:48px;margin:20px;" />
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <h3 style="line-height:88px;margin:0;">{{GetData('温度','Description')}}</h3>
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度：{{GetData('温度','Value') }} {{GetData('温度','Unit')}}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4">
-                            <img src="/images/humidity.png" style="width:48px;height:48px;margin:20px;" />
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <h3 style="line-height:88px;margin:0;">{{GetData('湿度','Description')}}</h3>
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度：{{GetData('湿度','Value') }} {{GetData('湿度','Unit')}}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4">
-                            <img src="/images/light.png" style="width:48px;height:48px;margin:20px;" />
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <h3 style="line-height:88px;margin:0;">{{GetDataByTag('前门','光照度','Description')}}</h3>
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">前门光照：{{GetDataByTag('前门','光照度','Value') }} {{GetDataByTag('前门','光照度','Unit')}}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4">
-                            <img src="/images/light.png" style="width:48px;height:48px;margin:20px;" />
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <h3 style="line-height:88px;margin:0;">{{GetDataByTag('后门','光照度','Description')}}</h3>
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">后门光照：{{GetDataByTag('后门','光照度','Value') }} {{GetDataByTag('后门','光照度','Unit')}}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4">
-                            <img src="/images/person.png" style="width:48px;height:48px;margin:20px;" />
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDataByTag('前门','状态','Value')==='警报'" />
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">前门人体：{{GetDataByTag('前门','状态','Value') }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4">
-                            <img src="/images/person.png" style="width:48px;height:48px;margin:20px;" />
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDataByTag('后门','状态','Value')==='警报'" />
-                        </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">后门人体：{{GetDataByTag('后门','状态','Value') }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-<div class="row" v-if="ViewModel">
-    <div class="col-md-6">
-        <div class="box box-solid">
-            <table class="ptz" v-if="PTZControlSupport()">
-                <tr>
-                    <td><img class="ajax camera Zoomin" src="/images/zoomin.png" /></td>
-                    <td></td>
-                    <td><img class="ajax camera Up" src="/images/up.png" /></td>
-                    <td></td>
-                    <td><img class="ajax camera Zoomout" src="/images/zoomout.png" /></td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td><img class="ajax camera Left" src="/images/left.png" /></td>
-                    <td><img class="ajax camera Stop" src="/images/stop.png" /></td>
-                    <td><img class="ajax camera Right" src="/images/right.png" /></td>
-                    <td></td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td></td>
-                    <td><img class="ajax camera Down" src="/images/down.png" /></td>
-                    <td></td>
-                    <td></td>
-                </tr>
-            </table>
-        </div>
-        <div class="box box-solid">
-            <div class="box-body row">
-                <div class="col-md-12">
-                    <canvas id="TemperatureChart" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('温湿度传感器')"></canvas>
-                </div>
-            </div>
-        </div>
-        <div class="box box-solid">
-            <div class="box-body row">
-                <div class="col-md-12">
-                    <canvas id="humidityChart" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('温湿度传感器')"></canvas>
-                </div>
-            </div>
-        </div>
-        <div class="box box-solid">
-            <div class="box-body row">
-                <div class="col-md-12">
-                    <canvas id="LightChart1" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('光强检测器','前门')"></canvas>
-                </div>
-            </div>
-        </div>
-        <div class="box box-solid">
-            <div class="box-body row">
-                <div class="col-md-12">
-                    <canvas id="LightChart2" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('光强检测器','后门')"></canvas>
-                </div>
-            </div>
-        </div>
-        <div class="box box-solid">
-            <div class="box-body row">
-                <div class="col-md-12">
-                    <canvas id="EnergyChart" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('智能插座')"></canvas>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-md-6">
-        <div class="box box-solid btns">
-            <div class="row">
-                <div class="col-md-2"><span style="display:inline-block;line-height:70px;">用电:</span></div>
-                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodePowerOn" :data-node-number="ViewModel.Number">一键开</button></div>
-                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodePowerOff" :data-node-number="ViewModel.Number">一键关</button></div>
-            </div>
-            <hr style="margin: 0;" />
-            <div class="row">
-                <div class="col-md-3" v-for="scene in ViewModel.Scenes">
-                    <button class="btn btn-block btn-info  ajax Scene" :data-node-number="ViewModel.Number" :data-scene-name="scene.Name">{{scene.Name}}</button>
-                </div>
-            </div>
-        </div>
-        <div class="box box-solid btns">
-            <div class="row">
-                <div class="col-md-2"><span style="display:inline-block;line-height:70px;">开关:</span></div>
-                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSwitchOn" :data-node-number="ViewModel.Number">一键开</button></div>
-                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSwitchOff" :data-node-number="ViewModel.Number">一键关</button></div>
-            </div>
-            <hr style="margin: 0;" />
-            <div class="row">
-                <div class="col-md-3" v-for="device in GetDevices('三路开关')">
-                    <div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
-                        <img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L1Off')" src="/images/on.png" />
-                        <img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L1On')" src="/images/off.png" />
-                        <img v-if="GetDataValue(device.Number,'L2状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L2Off')" src="/images/on.png" />
-                        <img v-if="GetDataValue(device.Number,'L2状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L2On')" src="/images/off.png" />
-                        <img v-if="GetDataValue(device.Number,'L3状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L3Off')" src="/images/on.png" />
-                        <img v-if="GetDataValue(device.Number,'L3状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L3On')" src="/images/off.png" />
-                    </div>
-                    <div class="row" style="text-align:center;">
-                        {{device.Name||device.DisplayName}}
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="box box-solid btns">
-            <div class="row">
-                <div class="col-md-2"><span style="display:inline-block;line-height:70px;">插座:</span></div>
-                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSocketOn" :data-node-number="ViewModel.Number">一键开</button></div>
-                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSocketOff" :data-node-number="ViewModel.Number">一键关</button></div>
-            </div>
-            <hr style="margin: 0;" />
-            <div class="row">
-                <div class="col-md-3" v-for="device in GetDevices('智能插座')">
-                    <div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
-                        <img v-if="GetDataValue(device.Number,'状态')=='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png"/>
-                        <img v-if="GetDataValue(device.Number,'状态')=='关'" v-on:click="CallApi(device.Number,'/Socket/On')" src="/images/off.png"/>
-                    </div>
-                    <div class="row" style="text-align:center;">
-                        {{device.Name||device.DisplayName}}
-                    </div>
-                </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(title, id, key, time) {
-        var number = $('#' + id).attr('data-device-number');
-        time = time || '30d';
-        var url = '/Home/GetChartData?number=' + number + '&key=' + key + '&time=' + time;
-        $.get(url, function (response) {
-            if (response) {
-                var ctx = document.getElementById(id).getContext('2d');
-                var data = {
-                    datasets: [{
-                        label: title,
-                        data: response.data,
-                        backgroundColor: Color16(),
-                        fill: false
-                    }],
-                    labels: response.labels
-                };
-                var options = {
-                    responsive: true,
-                    legend: {
-                        position: 'bottom',
-                    },
-                    title: {
-                        display: true,
-                        text: title
-                    },
-                    animation: {
-                        duration: 0
-                    }
-                };
-                var chart = new Chart(ctx, {
-                    type: 'line',
-                    data: data,
-                    options: options
-                });
-            }
-        });
-    }
-</script>
-<script>
-    $('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('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/Scene', { node: $(this).attr('data-node-number'), name: $(this).attr('data-scene-name') }, 'post');
-        }
-        return false;
-    });
-    $('body').on('mousedown', 'img.camera.ajax', function (e) {
-        var number = $('#camera').val();
-        if ($(this).hasClass('Zoomin')) {
-            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Zoomin' }, 'post');
-        } else if ($(this).hasClass('Zoomout')) {
-            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Zoomout' }, 'post');
-        } else if ($(this).hasClass('Left')) {
-            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Left' }, 'post');
-        } else if ($(this).hasClass('Right')) {
-            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Right' }, 'post');
-        } else if ($(this).hasClass('Up')) {
-            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Up' }, 'post');
-        } else if ($(this).hasClass('Down')) {
-            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Down' }, 'post');
-        } else if ($(this).hasClass('Stop')) {
-            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Stop' }, 'post');
-        }
-        return false;
-    });
-    $('body').on('mouseup', 'img.ajax', function (e) {
-        var number = $('#camera').val();
-        ajax('/App/Exec', { number: number, method: '/Onvif/Stop' }, 'post');
-        return false;
-    });
-</script>
-<script>
-    var flvPlayer;
-    var decodedFrames;
-    $('body').on('change', '#camera', function (e) {
-        UpdateCamera()
-    });
-    function UpdateCamera() {
-        var number = $('#camera').val();
-        var device = Enumerable.from(vm.ViewModel.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
-        var url = Enumerable.from(device.Data).where(o => o.Name === '主码流flv').firstOrDefault().Value;
-        closePlayer(flvPlayer);
-        playFlv(document.getElementById("flvPlayer"), url);
-    }
-    function playFlv(videoElement, url) {
-        try {
-            var flvPlayer = flvjs.createPlayer({
-                type: 'flv',
-                url: url,
-                isLive: true,
-                cors: true
-            }, {
-                    enableWorker: true,
-                    enableStashBuffer: false,
-                    stashInitialSize: 1,
-                    fixAudioTimestampGap: false
-                });
-            flvPlayer.attachMediaElement(videoElement);
-            flvPlayer.load();
-            var timer = setInterval(function () {
-                console.log('.');
-                if (flvPlayer.statisticsInfo.speed == 0) {
-                    console.log('reload1');
-                    clearInterval(timer);
-                    closePlayer(flvPlayer);
-                    playFlv(videoElement, url);
-                }
-                else if (decodedFrames && flvPlayer.statisticsInfo.decodedFrames <= decodedFrames) {
-                    console.log('reload2');
-                    clearInterval(timer);
-                    closePlayer(flvPlayer);
-                    playFlv(videoElement, url);
-                }
-                else if (flvPlayer.buffered.end(0) - flvPlayer.currentTime > 1) {
-                    console.log('reset currentTime');
-                    flvPlayer.currentTime = flvPlayer.buffered.end(0) - 0.001;
-                }
-                decodedFrames = flvPlayer.statisticsInfo.decodedFrames;
-            }, 10 * 1000);
-        } catch (e) {
-            console.log(e);
-        }
-    }
-    function closePlayer(flvPlayer) {
-        if (flvPlayer != null) {
-            flvPlayer.pause();
-            flvPlayer.unload();
-            flvPlayer.detachMediaElement();
-            flvPlayer.destroy();
-            flvPlayer = null;
-        }
-    }
-</script>
-<script>
-    var vm = new Vue({
-        el: '#template',
-        data() {
-            return { ViewModel: null }
-        },
-        mounted() {
-            var url = '/Home/GetNode' + '?number=' + new URI().query(true).number;
-            $.get(url, function (data) {
-                vm.ViewModel = data;
-                Vue.nextTick(function () {
-                    var wsUrl = '/hub?group=page';
-                    connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
-                    onMessage();
-                    connect();
-                    UpdateCamera();
-                    UpdateChart('温度', 'TemperatureChart', 'Temperature');
-                    UpdateChart('湿度', 'humidityChart', 'Humidity');
-                    UpdateChart('前门光照', 'LightChart1', 'Light');
-                    UpdateChart('后门光照', 'LightChart2', 'Light');
-                    UpdateChart('用电', 'EnergyChart', 'Energy');
-                });
-            });
-        },
-        methods: {
-            GetData(name, attr) {
-                var data = Enumerable
-                    .from(vm.ViewModel.Devices)
-                    .selectMany(function (o) { return o.Data; })
-                    .where(function (o) { return o.Name === name; })
-                    .firstOrDefault();
-                return data == null ? null : data[attr];
-            },
-            GetDataByTag(tag, name, attr) {
-                var data = Enumerable
-                    .from(vm.ViewModel.Devices)
-                    .where(function (o) { return o.Tag === tag; })
-                    .selectMany(function (o) { return o.Data; })
-                    .where(function (o) { return o.Name === name; })
-                    .firstOrDefault();
-                return data == null ? null : data[attr];
-            },
-            GetCameras() {
-                return Enumerable
-                    .from(vm.ViewModel.Devices)
-                    .where(function (o) { return o.Name === '摄像头' })
-                    .toArray();
-            },
-            CameraSelected() {
-                UpdateCamera();
-            },
-            PTZControlSupport() {
-                return true;
-                var number = $('#camera').val();
-                var device = Enumerable.from(vm.ViewModel.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
-                var data = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault().Value;
-                return data === '是';
-            },
-            GetDevices(name) {
-                return Enumerable.from(vm.ViewModel.Devices)
-                    .where(function (o) { return o.Name == name; })
-                    .toArray();
-            },
-            GetDevice(name, tag) {
-                var query = Enumerable.from(vm.ViewModel.Devices);
-                if (name) {
-                    query = query.where(function (o) { return o.Name === name; });
-                }
-                if (tag) {
-                    query = query.where(function (o) { return o.Tag === tag; });
-                }
-                return query.firstOrDefault();
-            },
-            GetDeviceNumber(name, tag) {
-                var device = vm.GetDevice(name, tag);
-                return device == null ? null : device.Number;
-            },
-            GetDataValue(number, name) {
-                var device = Enumerable.from(vm.ViewModel.Devices)
-                    .where(function (o) { return o.Number === number; })
-                    .firstOrDefault();
-                if (device != null) {
-                    var data = Enumerable.from(device.Data)
-                        .where(function (o) { return o.Name == name })
-                        .firstOrDefault();
-                    if (data != null) {
-                        return data.Value;
-                    }
-                }
-                return null;
-            },
-            CallApi(number, method) {
-                ajax('/App/Exec', { number:number,method:method }, 'post');
-            }
-        },
-        destroy() {
-            closePlayer();
-        }
-    });
+<h2 class="page-header" v-if="ViewModel">{{ViewModel.Name}}</h2>
+<hr />
+<div class="row" v-if="ViewModel">
+    <div class="col-md-6">
+        <select class="form-control" id="camera" @change="CameraSelected">
+            <option v-for="c in GetCameras()" :value="c.Number">{{c.Name}}</option>
+        </select>
+        <div style="width:100%;height:265px;margin:0;padding:0;background:#000;">
+            <video id="flvPlayer" class="video" muted controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <div class="row">
+            <div class="col-md-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <img src="/images/temperature.png" style="width:48px;height:48px;margin:20px;" />
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <h3 style="line-height:88px;margin:0;">{{GetData('温度','Description')}}</h3>
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度：{{GetData('温度','Value') }} {{GetData('温度','Unit')}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <img src="/images/humidity.png" style="width:48px;height:48px;margin:20px;" />
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <h3 style="line-height:88px;margin:0;">{{GetData('湿度','Description')}}</h3>
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度：{{GetData('湿度','Value') }} {{GetData('湿度','Unit')}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <img src="/images/light.png" style="width:48px;height:48px;margin:20px;" />
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <h3 style="line-height:88px;margin:0;">{{GetDataByTag('前门','光照度','Description')}}</h3>
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">前门光照：{{GetDataByTag('前门','光照度','Value') }} {{GetDataByTag('前门','光照度','Unit')}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <img src="/images/light.png" style="width:48px;height:48px;margin:20px;" />
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <h3 style="line-height:88px;margin:0;">{{GetDataByTag('后门','光照度','Description')}}</h3>
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">后门光照：{{GetDataByTag('后门','光照度','Value') }} {{GetDataByTag('后门','光照度','Unit')}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <img src="/images/person.png" style="width:48px;height:48px;margin:20px;" />
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDataByTag('前门','状态','Value')==='警报'" />
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">前门人体：{{GetDataByTag('前门','状态','Value') }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <img src="/images/person.png" style="width:48px;height:48px;margin:20px;" />
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDataByTag('后门','状态','Value')==='警报'" />
+                        </div>
+                        <div class="col-md-4" style="height:88px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">后门人体：{{GetDataByTag('后门','状态','Value') }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row" v-if="ViewModel">
+    <div class="col-md-6">
+        <div class="box box-solid">
+            <table class="ptz" v-if="PTZControlSupport()">
+                <tr>
+                    <td><img class="ajax camera Zoomin" src="/images/zoomin.png" /></td>
+                    <td></td>
+                    <td><img class="ajax camera Up" src="/images/up.png" /></td>
+                    <td></td>
+                    <td><img class="ajax camera Zoomout" src="/images/zoomout.png" /></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><img class="ajax camera Left" src="/images/left.png" /></td>
+                    <td><img class="ajax camera Stop" src="/images/stop.png" /></td>
+                    <td><img class="ajax camera Right" src="/images/right.png" /></td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td></td>
+                    <td><img class="ajax camera Down" src="/images/down.png" /></td>
+                    <td></td>
+                    <td></td>
+                </tr>
+            </table>
+        </div>
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="TemperatureChart" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('温湿度传感器')"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="humidityChart" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('温湿度传感器')"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="LightChart1" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('光强检测器','前门')"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="LightChart2" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('光强检测器','后门')"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="EnergyChart" style="width:100%;height:250px;" :data-device-number="GetDeviceNumber('智能插座')"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <div class="box box-solid btns">
+            <div class="row">
+                <div class="col-md-2"><span style="display:inline-block;line-height:70px;">用电:</span></div>
+                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodePowerOn" :data-node-number="ViewModel.Number">一键开</button></div>
+                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodePowerOff" :data-node-number="ViewModel.Number">一键关</button></div>
+            </div>
+            <hr style="margin: 0;" />
+            <div class="row">
+                <div class="col-md-3" v-for="scene in ViewModel.Scenes">
+                    <button class="btn btn-block btn-info  ajax Scene" :data-node-number="ViewModel.Number" :data-scene-name="scene.Name">{{scene.Name}}</button>
+                </div>
+            </div>
+        </div>
+        <div class="box box-solid btns">
+            <div class="row">
+                <div class="col-md-2"><span style="display:inline-block;line-height:70px;">开关:</span></div>
+                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSwitchOn" :data-node-number="ViewModel.Number">一键开</button></div>
+                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSwitchOff" :data-node-number="ViewModel.Number">一键关</button></div>
+            </div>
+            <hr style="margin: 0;" />
+            <div class="row">
+                <div class="col-md-3" v-for="device in GetDevices('三路开关')">
+                    <div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
+                        <img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L1Off')" src="/images/on.png" />
+                        <img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L1On')" src="/images/off.png" />
+                        <img v-if="GetDataValue(device.Number,'L2状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L2Off')" src="/images/on.png" />
+                        <img v-if="GetDataValue(device.Number,'L2状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L2On')" src="/images/off.png" />
+                        <img v-if="GetDataValue(device.Number,'L3状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L3Off')" src="/images/on.png" />
+                        <img v-if="GetDataValue(device.Number,'L3状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L3On')" src="/images/off.png" />
+                    </div>
+                    <div class="row" style="text-align:center;">
+                        {{device.Name||device.DisplayName}}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="box box-solid btns">
+            <div class="row">
+                <div class="col-md-2"><span style="display:inline-block;line-height:70px;">插座:</span></div>
+                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSocketOn" :data-node-number="ViewModel.Number">一键开</button></div>
+                <div class="col-md-5"><button class="btn btn-block btn-primary ajax NodeSocketOff" :data-node-number="ViewModel.Number">一键关</button></div>
+            </div>
+            <hr style="margin: 0;" />
+            <div class="row">
+                <div class="col-md-3" v-for="device in GetDevices('智能插座')">
+                    <div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
+                        <img v-if="GetDataValue(device.Number,'状态')=='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png"/>
+                        <img v-if="GetDataValue(device.Number,'状态')=='关'" v-on:click="CallApi(device.Number,'/Socket/On')" src="/images/off.png"/>
+                    </div>
+                    <div class="row" style="text-align:center;">
+                        {{device.Name||device.DisplayName}}
+                    </div>
+                </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;
+        });
+         connection.on("UpdateDevice", (message) => {
+                var newDevice = JSON.parse(message);
+                var update = false;
+                    for (var i = 0; i < vm.ViewModel.Devices.length; i++) {
+                        if (vm.ViewModel.Devices[i].Number == newDevice.Number) {
+                            update = true;
+                            break;
+                        }
+                    }
+                    if (update) {
+                        vm.ViewModel.Devices.splice(i, 1, newDevice);
+                    }
+                    else {
+                        vm.ViewModel.Devices.push(newDevice);
+                    }
+            });

+    }
+</script>
+<script>
+    function UpdateChart(title, id, key, time) {
+        var number = $('#' + id).attr('data-device-number');
+        time = time || '30d';
+        var url = '/Home/GetChartData?number=' + number + '&key=' + key + '&time=' + time;
+        $.get(url, function (response) {
+            if (response) {
+                var ctx = document.getElementById(id).getContext('2d');
+                var data = {
+                    datasets: [{
+                        label: title,
+                        data: response.data,
+                        backgroundColor: Color16(),
+                        fill: false
+                    }],
+                    labels: response.labels
+                };
+                var options = {
+                    responsive: true,
+                    legend: {
+                        position: 'bottom',
+                    },
+                    title: {
+                        display: true,
+                        text: title
+                    },
+                    animation: {
+                        duration: 0
+                    }
+                };
+                var chart = new Chart(ctx, {
+                    type: 'line',
+                    data: data,
+                    options: options
+                });
+            }
+        });
+    }
+</script>
+<script>
+    $('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('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/Scene', { node: $(this).attr('data-node-number'), name: $(this).attr('data-scene-name') }, 'post');
+        }
+        return false;
+    });
+    $('body').on('mousedown', 'img.camera.ajax', function (e) {
+        var number = $('#camera').val();
+        if ($(this).hasClass('Zoomin')) {
+            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Zoomin' }, 'post');
+        } else if ($(this).hasClass('Zoomout')) {
+            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Zoomout' }, 'post');
+        } else if ($(this).hasClass('Left')) {
+            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Left' }, 'post');
+        } else if ($(this).hasClass('Right')) {
+            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Right' }, 'post');
+        } else if ($(this).hasClass('Up')) {
+            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Up' }, 'post');
+        } else if ($(this).hasClass('Down')) {
+            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Down' }, 'post');
+        } else if ($(this).hasClass('Stop')) {
+            ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Stop' }, 'post');
+        }
+        return false;
+    });
+    $('body').on('mouseup', 'img.ajax', function (e) {
+        var number = $('#camera').val();
+        ajax('/App/Exec', { number: number, method: '/Onvif/Stop' }, 'post');
+        return false;
+    });
+</script>
+<script>
+    var flvPlayer;
+    var decodedFrames;
+    $('body').on('change', '#camera', function (e) {
+        UpdateCamera()
+    });
+    function UpdateCamera() {
+        var number = $('#camera').val();
+        var device = Enumerable.from(vm.ViewModel.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
+        var url = Enumerable.from(device.Data).where(o => o.Name === '主码流flv').firstOrDefault().Value;
+        closePlayer(flvPlayer);
+        playFlv(document.getElementById("flvPlayer"), url);
+    }
+    function playFlv(videoElement, url) {
+        try {
+            var flvPlayer = flvjs.createPlayer({
+                type: 'flv',
+                url: url,
+                isLive: true,
+                cors: true
+            }, {
+                    enableWorker: true,
+                    enableStashBuffer: false,
+                    stashInitialSize: 1,
+                    fixAudioTimestampGap: false
+                });
+            flvPlayer.attachMediaElement(videoElement);
+            flvPlayer.load();
+            var timer = setInterval(function () {
+                console.log('.');
+                if (flvPlayer.statisticsInfo.speed == 0) {
+                    console.log('reload1');
+                    clearInterval(timer);
+                    closePlayer(flvPlayer);
+                    playFlv(videoElement, url);
+                }
+                else if (decodedFrames && flvPlayer.statisticsInfo.decodedFrames <= decodedFrames) {
+                    console.log('reload2');
+                    clearInterval(timer);
+                    closePlayer(flvPlayer);
+                    playFlv(videoElement, url);
+                }
+                else if (flvPlayer.buffered.end(0) - flvPlayer.currentTime > 1) {
+                    console.log('reset currentTime');
+                    flvPlayer.currentTime = flvPlayer.buffered.end(0) - 0.001;
+                }
+                decodedFrames = flvPlayer.statisticsInfo.decodedFrames;
+            }, 10 * 1000);
+        } catch (e) {
+            console.log(e);
+        }
+    }
+    function closePlayer(flvPlayer) {
+        if (flvPlayer != null) {
+            flvPlayer.pause();
+            flvPlayer.unload();
+            flvPlayer.detachMediaElement();
+            flvPlayer.destroy();
+            flvPlayer = null;
+        }
+    }
+</script>
+<script>
+    var vm = new Vue({
+        el: '#template',
+        data() {
+            return { ViewModel: null }
+        },
+        mounted() {
+            var url = '/Home/GetNode' + '?number=' + new URI().query(true).number;
+            $.get(url, function (data) {
+                vm.ViewModel = data;
+                Vue.nextTick(function () {
+                    var wsUrl = '/hub?group=page';
+                    connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
+                    onMessage();
+                    connect();
+                    UpdateCamera();
+                    UpdateChart('温度', 'TemperatureChart', 'Temperature');
+                    UpdateChart('湿度', 'humidityChart', 'Humidity');
+                    UpdateChart('前门光照', 'LightChart1', 'Light');
+                    UpdateChart('后门光照', 'LightChart2', 'Light');
+                    UpdateChart('用电', 'EnergyChart', 'Energy');
+                });
+            });
+        },
+        methods: {
+            GetData(name, attr) {
+                var data = Enumerable
+                    .from(vm.ViewModel.Devices)
+                    .selectMany(function (o) { return o.Data; })
+                    .where(function (o) { return o.Name === name; })
+                    .firstOrDefault();
+                return data == null ? null : data[attr];
+            },
+            GetDataByTag(tag, name, attr) {
+                var data = Enumerable
+                    .from(vm.ViewModel.Devices)
+                    .where(function (o) { return o.Tag === tag; })
+                    .selectMany(function (o) { return o.Data; })
+                    .where(function (o) { return o.Name === name; })
+                    .firstOrDefault();
+                return data == null ? null : data[attr];
+            },
+            GetCameras() {
+                return Enumerable
+                    .from(vm.ViewModel.Devices)
+                    .where(function (o) { return o.Name === '摄像头' })
+                    .toArray();
+            },
+            CameraSelected() {
+                UpdateCamera();
+            },
+            PTZControlSupport() {
+                return true;
+                var number = $('#camera').val();
+                var device = Enumerable.from(vm.ViewModel.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
+                var data = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault().Value;
+                return data === '是';
+            },
+            GetDevices(name) {
+                return Enumerable.from(vm.ViewModel.Devices)
+                    .where(function (o) { return o.Name == name; })
+                    .toArray();
+            },
+            GetDevice(name, tag) {
+                var query = Enumerable.from(vm.ViewModel.Devices);
+                if (name) {
+                    query = query.where(function (o) { return o.Name === name; });
+                }
+                if (tag) {
+                    query = query.where(function (o) { return o.Tag === tag; });
+                }
+                return query.firstOrDefault();
+            },
+            GetDeviceNumber(name, tag) {
+                var device = vm.GetDevice(name, tag);
+                return device == null ? null : device.Number;
+            },
+            GetDataValue(number, name) {
+                var device = Enumerable.from(vm.ViewModel.Devices)
+                    .where(function (o) { return o.Number === number; })
+                    .firstOrDefault();
+                if (device != null) {
+                    var data = Enumerable.from(device.Data)
+                        .where(function (o) { return o.Name == name })
+                        .firstOrDefault();
+                    if (data != null) {
+                        return data.Value;
+                    }
+                }
+                return null;
+            },
+            CallApi(number, method) {
+                ajax('/App/Exec', { number:number,method:method }, 'post');
+            }
+        },
+        destroy() {
+            closePlayer();
+        }
+    });
 </script>
\ No newline at end of file