From 82fb7b6f3b5114da3e2a7b0b22fbaf317c953567 Mon Sep 17 00:00:00 2001
From: wanggang <76527413@qq.com>
Date: Sun, 29 Sep 2019 20:58:01 +0800
Subject: [PATCH] update

Former-commit-id: 9dfa353004d4d0e8c5bd60d329964f0f68449dfc
---
 projects/IoTCenter/wwwroot/home.html |   4 +
 projects/IoTCenter/wwwroot/node.html | 381 +++++++++++++--------------
 2 files changed, 194 insertions(+), 191 deletions(-)

diff --git a/projects/IoTCenter/wwwroot/home.html b/projects/IoTCenter/wwwroot/home.html
index 90b0c880..776b9edd 100644
--- a/projects/IoTCenter/wwwroot/home.html
+++ b/projects/IoTCenter/wwwroot/home.html
@@ -1,4 +1,8 @@
 <style>
+    .content-wrapper {
+        background-color: lightblue;
+    }
+
     input.switch {
         display: none;
     }
diff --git a/projects/IoTCenter/wwwroot/node.html b/projects/IoTCenter/wwwroot/node.html
index da5833f8..572edbd6 100644
--- a/projects/IoTCenter/wwwroot/node.html
+++ b/projects/IoTCenter/wwwroot/node.html
@@ -133,186 +133,57 @@
     </div>
 </div>
 <div class="row" v-if="ViewModel">
-    <div class="col-md-6" v-if="HasDevices('摄像头')">
-        <div class="row">
-            <div class="col-md-12">
-                <div class="box box-solid">
-                    <select class="form-control" id="camera" @change="CameraSelected">
-                        <option v-for="c in GetCameras()" :value="c.Number">{{c.DisplayName||c.Name}}</option>
-                    </select>
-                    <div style="width:100%;height:186px;margin:0;padding:0;background:#000;">
-                        <video id="flvPlayer" class="video" controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row" v-if="PTZControlSupport()">
-            <div class="col-md-12">
-                <div class="box box-solid">
-                    <div class="box-header with-border">
-                        <h3 class="box-title"><img src="/images/ptz.png" style="height:16px;margin-right:10px;" />云台操作</h3>
-                    </div>
-                    <div class="box-body" style="height:178px;">
-                        <table class="ptz">
-                            <tr>
-                                <td></td>
-                                <td></td>
-                                <td><img class="ajax camera Up" src="/images/up.png" /></td>
-                                <td></td>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td><img class="ajax camera Zoomin" src="/images/zoomin.png" /></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><img class="ajax camera Zoomout" src="/images/zoomout.png" /></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>
-            </div>
-        </div>
-    </div>
     <div class="col-md-6">
-        <div class="row" v-for="device in GetDevices('粉尘检测器')" :data-device-number="device.Number">
-            <div class="col-md-6  col-xs-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4 col-xs-4">
-                            <img src="/images/temperature.png" style="width:48px;height:48px;margin:19px;" />
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'温度','Description')}}</h3>
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度：{{GetDeviceDataValue(device.Number,'温度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6  col-xs-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4 col-xs-4">
-                            <img src="/images/humidity.png" style="width:48px;height:48px;margin:19px;" />
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'湿度','Description')}}</h3>
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度：{{GetDeviceDataValue(device.Number,'湿度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6  col-xs-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4 col-xs-4">
-                            <img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" />
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'PM2.5','Description')}}</h3>
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM2.5：{{GetDeviceDataValue(device.Number,'PM2.5','Value')}}{{ GetDeviceDataValue(device.Number,'PM2.5','Unit')}}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!--<div class="col-md-6  col-xs-6">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4 col-xs-4">
-                            <img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" />
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'PM100','Description')}}</h3>
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM10：{{GetDeviceDataValue(device.Number,'PM100','Value')}}{{ GetDeviceDataValue(device.Number,'PM100','Unit')}}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>-->
-            <div class="col-md-6  col-xs-6" v-for="device in GetDevices('光强检测器')" :data-device-number="device.Number">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4 col-xs-4">
-                            <img src="/images/light.png" style="width:48px;height:48px;margin:19px;" />
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'光照度','Description')}}</h3>
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} 光照 {{GetDeviceDataValue(device.Number,'光照度','Value')}}{{ GetDeviceDataValue(device.Number,'光照度','Unit')}}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6 col-xs-6" v-for="device in GetDevices('红外感应器')" :data-device-number="device.Number">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4 col-xs-4">
-                            <img src="/images/person.png" style="width:48px;height:48px;margin:19px;" />
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" />
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
+        <template v-if="HasDevices('摄像头')">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="box box-solid">
+                        <select class="form-control" id="camera" @change="CameraSelected">
+                            <option v-for="c in GetCameras()" :value="c.Number">{{c.DisplayName||c.Name}}</option>
+                        </select>
+                        <div style="width:100%;height:186px;margin:0;padding:0;background:#000;">
+                            <video id="flvPlayer" class="video" controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="col-md-6 col-xs-6" v-for="device in GetDevices('烟雾传感器')" :data-device-number="device.Number">
-                <div class="box box-solid">
-                    <div class="row">
-                        <div class="col-md-4 col-xs-4">
-                            <img src="/images/smoke.png" style="width:48px;height:48px;margin:19px;" />
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" />
-                        </div>
-                        <div class="col-md-4 col-xs-4" style="height:100px;">
-                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
+            <div class="row" id="ptz">
+                <div class="col-md-12">
+                    <div class="box box-solid">
+                        <div class="box-header with-border">
+                            <h3 class="box-title"><img src="/images/ptz.png" style="height:16px;margin-right:10px;" />云台操作</h3>
                         </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-12">
-                <div class="box box-solid">
-                    <div class="box-header with-border">
-                        <h3 class="box-title"><img src="/images/batch.png" style="height:16px;margin-right:10px;" />批量操作</h3>
-                        <div class="box-tools pull-right">
-                            <button class="btn btn-sm bg-olive ajax NodePowerOn" :data-node-number="ViewModel.Number">一键开</button>
-                            <button class="btn btn-sm bg-olive ajax NodePowerOff" :data-node-number="ViewModel.Number">一键关</button>
+                        <div class="box-body" style="height:178px;">
+                            <table class="ptz">
+                                <tr>
+                                    <td></td>
+                                    <td></td>
+                                    <td><img class="ajax camera Up" src="/images/up.png" /></td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td><img class="ajax camera Zoomin" src="/images/zoomin.png" /></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><img class="ajax camera Zoomout" src="/images/zoomout.png" /></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>
-                    <div class="box-body" style="height:178px;">
-                        <button class="btn bg-olive margin ajax SwitchOn">开关开</button>
-                        <button class="btn bg-olive margin ajax SwitchOff">开关关</button>
-                        <button class="btn bg-olive margin ajax SocketOn">插座开</button>
-                        <button class="btn bg-olive margin ajax SocketOff">插座关</button>
-                        <br />
-                        <button class="btn bg-olive margin ajax Scene" v-for="scene in ViewModel.Scenes" :data-node-number="ViewModel.Number" :data-scene-name="scene.Name">{{scene.Name}}</button>
-                    </div>
                 </div>
             </div>
-        </div>
-    </div>
-    <template v-for="device in GetDevices('调色灯')">
-        <div class="col-md-6 control">
+        </template>
+
+        <template v-for="device in GetDevices('调色灯')">
             <div class="row">
                 <div class="col-md-12">
                     <div class="box box-solid btns">
@@ -360,10 +231,8 @@
                     </div>
                 </div>
             </div>
-        </div>
-    </template>
-    <template v-for="device in GetDevices('红外转发器')">
-        <div class="col-md-6 control">
+        </template>
+        <template v-for="device in GetDevices('红外转发器')">
             <div class="row">
                 <div class="col-md-12">
                     <div class="nav-tabs-custom">
@@ -440,8 +309,139 @@
                     </div>
                 </div>
             </div>
+        </template>
+    </div>
+    <div class="col-md-6">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="box box-solid">
+                    <div class="box-header with-border">
+                        <h3 class="box-title"><img src="/images/batch.png" style="height:16px;margin-right:10px;" />批量操作</h3>
+                        <div class="box-tools pull-right">
+                            <button class="btn btn-sm bg-olive ajax NodePowerOn" :data-node-number="ViewModel.Number">一键开</button>
+                            <button class="btn btn-sm bg-olive ajax NodePowerOff" :data-node-number="ViewModel.Number">一键关</button>
+                        </div>
+                    </div>
+                    <div class="box-body" style="height:178px;">
+                        <button class="btn bg-olive margin ajax SwitchOn">开关开</button>
+                        <button class="btn bg-olive margin ajax SwitchOff">开关关</button>
+                        <button class="btn bg-olive margin ajax SocketOn">插座开</button>
+                        <button class="btn bg-olive margin ajax SocketOff">插座关</button>
+                        <br />
+                        <button class="btn bg-olive margin ajax Scene" v-for="scene in ViewModel.Scenes" :data-node-number="ViewModel.Number" :data-scene-name="scene.Name">{{scene.Name}}</button>
+                    </div>
+                </div>
+            </div>
         </div>
-    </template>
+        <div class="row" v-for="device in GetDevices('粉尘检测器')" :data-device-number="device.Number">
+            <div class="col-md-6  col-xs-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4 col-xs-4">
+                            <img src="/images/temperature.png" style="width:48px;height:48px;margin:19px;" />
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'温度','Description')}}</h3>
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度：{{GetDeviceDataValue(device.Number,'温度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6  col-xs-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4 col-xs-4">
+                            <img src="/images/humidity.png" style="width:48px;height:48px;margin:19px;" />
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'湿度','Description')}}</h3>
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度：{{GetDeviceDataValue(device.Number,'湿度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6  col-xs-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4 col-xs-4">
+                            <img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" />
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'PM2.5','Description')}}</h3>
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM2.5：{{GetDeviceDataValue(device.Number,'PM2.5','Value')}}{{ GetDeviceDataValue(device.Number,'PM2.5','Unit')}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--<div class="col-md-6  col-xs-6">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4 col-xs-4">
+                            <img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" />
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'PM100','Description')}}</h3>
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM10：{{GetDeviceDataValue(device.Number,'PM100','Value')}}{{ GetDeviceDataValue(device.Number,'PM100','Unit')}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>-->
+            <div class="col-md-6  col-xs-6" v-for="device in GetDevices('光强检测器')" :data-device-number="device.Number">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4 col-xs-4">
+                            <img src="/images/light.png" style="width:48px;height:48px;margin:19px;" />
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <h3 style="line-height:100px;margin:0;">{{GetDeviceDataValue(device.Number,'光照度','Description')}}</h3>
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} 光照 {{GetDeviceDataValue(device.Number,'光照度','Value')}}{{ GetDeviceDataValue(device.Number,'光照度','Unit')}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6 col-xs-6" v-for="device in GetDevices('红外感应器')" :data-device-number="device.Number">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4 col-xs-4">
+                            <img src="/images/person.png" style="width:48px;height:48px;margin:19px;" />
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" />
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6 col-xs-6" v-for="device in GetDevices('烟雾传感器')" :data-device-number="device.Number">
+                <div class="box box-solid">
+                    <div class="row">
+                        <div class="col-md-4 col-xs-4">
+                            <img src="/images/smoke.png" style="width:48px;height:48px;margin:19px;" />
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" />
+                        </div>
+                        <div class="col-md-4 col-xs-4" style="height:100px;">
+                            <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('一路开关')" :data-device-number="device.Number">
         <div class="box box-solid">
             <div class="box-header with-border">
@@ -748,6 +748,13 @@
         if (number) {
             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;
+            var hasPtz = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault().Value === '是';
+            if (hasPtz) {
+                $('#ptz').show();
+            }
+            else {
+                $('#ptz').hide();
+            }
             closePlayer(flvPlayer);
             playFlv(document.getElementById("flvPlayer"), url);
         }
@@ -809,17 +816,19 @@
     var vm = new Vue({
         el: '#template',
         data() {
-            return { ViewModel: null }
+            return {
+                ViewModel: null
+            }
         },
         mounted() {
             var url = '/Home/GetNode' + '?number=' + new URI().query(true).number;
             $.get(url, function (data) {
                 vm.ViewModel = data;
+                var wsUrl = '/hub?group=page';
+                connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
+                onMessage();
+                connect();
                 Vue.nextTick(function () {
-                    var wsUrl = '/hub?group=page';
-                    connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
-                    onMessage();
-                    connect();
                     UpdateCamera();
                     //UpdateChart('温度', 'TemperatureChart', 'Temperature');
                     //UpdateChart('湿度', 'humidityChart', 'Humidity');
@@ -859,19 +868,9 @@
                     .toArray();
             },
             CameraSelected() {
+                console.log('camera selected:' + new Date());
                 UpdateCamera();
             },
-            PTZControlSupport() {
-                var number = $('#camera').val();
-                var device = Enumerable.from(vm.ViewModel.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
-                if (device) {
-                    var data = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault();
-                    if (data) {
-                        return data.Value === '是';
-                    }
-                }
-                return false;
-            },
             GetDevices(name) {
                 return Enumerable.from(vm.ViewModel.Devices)
                     .where(function (o) { return o.Name == name; })