From 361bed687ab6923cde7591c5fde6abc927b63a4f Mon Sep 17 00:00:00 2001
From: wanggang <76527413@qq.com>
Date: Fri, 7 Feb 2020 14:52:50 +0800
Subject: [PATCH] update

Former-commit-id: 9d8dbdbf3fad6892d04910727a7b7a7f61b518e3
---
 projects/WebApp/wwwroot/css/app.css           |  34 +++--
 .../wwwroot/pages/iot/device/camera.html      | 128 +++++++++++-------
 .../wwwroot/pages/iot/device/color-light.html |   6 +-
 .../wwwroot/pages/iot/device/curtain.html     |   4 +-
 .../wwwroot/pages/iot/device/gateway.html     |   4 +-
 .../wwwroot/pages/iot/device/humiture.html    |   4 +-
 .../WebApp/wwwroot/pages/iot/device/ir.html   |   2 +-
 .../wwwroot/pages/iot/device/light.html       |   4 +-
 .../wwwroot/pages/iot/device/person.html      |   4 +-
 .../wwwroot/pages/iot/device/serial-port.html |   2 +-
 .../wwwroot/pages/iot/device/smoke.html       |   4 +-
 .../wwwroot/pages/iot/device/socket.html      |   4 +-
 .../wwwroot/pages/iot/device/switch3.html     |   4 +-
 projects/WebApp/wwwroot/pages/iot/node.html   |  27 ++--
 14 files changed, 137 insertions(+), 94 deletions(-)

diff --git a/projects/WebApp/wwwroot/css/app.css b/projects/WebApp/wwwroot/css/app.css
index 34142fad..72eee0c4 100644
--- a/projects/WebApp/wwwroot/css/app.css
+++ b/projects/WebApp/wwwroot/css/app.css
@@ -57,6 +57,13 @@ label > * {
     padding-right: initial;
 }
 
+[class^="col-"] {
+    padding-left:0;
+    padding-right:0;
+}
+.card-body{
+    padding:10px;
+}
 [class^="weui"] {
     box-sizing: initial;
 }
@@ -94,17 +101,17 @@ img {
 
 .ir table {
     border-collapse: separate;
-    margin: 8px auto;
-    padding: 4px;
-    border: 2px solid #ddd;
-    border-radius: 15px;
+    margin: 5px auto;
+    border: 1px solid #ddd;
+    border-radius: 5px;
 }
 
     .ir table td {
-        padding: 1px;
         text-align: center;
     }
-
+    .ir table button{
+        line-height:30px;
+    }
 .weui-grid__icon {
     width: 48px;
     height: 48px;
@@ -114,6 +121,7 @@ img {
 .card .weui-bar__item_on {
     background-color: #eee;
 }
+/*
 .wxinlineplayer + div {
     position:absolute;
     height:30px;
@@ -128,7 +136,7 @@ img {
 }
 .wxinlineplayer + div:hover {
     display: block;
-}
+}*/
 .control input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
     background-color: transparent;
@@ -137,10 +145,16 @@ img {
     border: 6px solid rgba(230,230,230,0.8);
     border-radius: 50%;
 }
-.ptz img{
+.camera img{
     width:32px;
     margin:0 auto;
 }
-.ptz td{
-    text-align:center;
+.camera td {
+    padding:2px 0;
+    text-align: center;
+}
+.video-container:-webkit-full-screen{
+    width: 100vw!important;
+    height: 100vh!important;
+    max-height: 100vh;
 }
\ No newline at end of file
diff --git a/projects/WebApp/wwwroot/pages/iot/device/camera.html b/projects/WebApp/wwwroot/pages/iot/device/camera.html
index 86ec84b1..d5146a91 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/camera.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/camera.html
@@ -1,48 +1,66 @@
 <template>
-    <div class="card" style="box-sizing:border-box;height:450px;margin:10px;">
+    <div class="card camera" style="box-sizing:border-box;height:490px;margin:10px;">
         <div class="card-header">
             {{device.displayName}}
         </div>
         <div class="card-body" style="padding:0;">
-            <div class="row" style="width:320px;height:240px;margin: 0 auto;background-color:#000;position:relative;">
+            <div class="row video-container" style="width:100%;height:240px;margin: 0 auto;background-color:#333;position:relative;">
                 <video controls muted autoplay :class="device.number" v-if="isFlvSupported" v-on:volumechange="volumeChange($event)" style="width:100%;height:100%;object-fit:contain;"></video>
-                <canvas width="1080" height="720" style="width:100%;height:100%;object-fit:contain;background: black;margin:0 auto;" :class="device.number+' wxinlineplayer'" v-else></canvas>
-                <div class="control">
-                    <a href="javascript:;" v-on:click="play()" style="color: #fff; margin: 0 10px; line-height: 30px;">
-                        <i class="ion ion-md-pause" v-if="playing"></i>
-                        <i v-else class="ion ion-md-play"></i>
-                    </a>
-                    <template v-if="playing">
-                        <a href="javascript:;" v-on:click="fullScreen()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
-                            <i class="ion ion-md-expand"></i>
+                <template v-else>
+                    <canvas width="1080" height="720" style="width:100%;height:100%;object-fit:contain;background: #333;margin:0 auto;" :class="device.number" v-on:click="showControls()"></canvas>
+                    <div :class="'control '+device.number" style="position:absolute;height:30px;left:0;right:0;bottom:0;background-color:#333;display: none;">
+                        <a href="javascript:;" v-on:click="play()" style="color: #fff; margin: 0 10px; line-height: 30px;">
+                            <i class="ion ion-md-pause" v-if="playing"></i>
+                            <i v-else class="ion ion-md-play"></i>
                         </a>
-                        <a href="javascript:;" v-on:click="mute()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
-                            <i class="ion ion-md-volume-off" v-if="muted"></i>
-                            <i class="ion ion-md-volume-high" v-else></i>
-                        </a>
-                        <input type="range" min="0" max="1" step="0.1" :value="volume" style="-webkit-appearance:none;float:right;width:80px;height:4px;margin:13px 2px;background:#666;outline:none;" v-on:change=volumeChange2($event) />
-                    </template>
-                </div>
+                        <template v-if="playing">
+                            <a href="javascript:;" v-on:click="fullScreen()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
+                                <i class="ion ion-md-expand"></i>
+                            </a>
+                            <a href="javascript:;" v-on:click="mute()" style="color:#fff;margin:0 10px;line-height:30px;float:right;">
+                                <i class="ion ion-md-volume-off" v-if="muted"></i>
+                                <i class="ion ion-md-volume-high" v-else></i>
+                            </a>
+                            <input type="range" min="0" max="1" step="0.1" :value="volume" style="-webkit-appearance:none;float:right;width:80px;height:4px;margin:13px 2px;background:#666;outline:none;" v-on:change=volumeChange2($event) />
+                        </template>
+                    </div>
+                </template>
             </div>
-            <div style="box-sizing: border-box;width: 320px;height: 140px;margin: 5px auto;" :class="'row ptz '+ device.number">
-                <table class="ptz" style="width: 100%; height: 100%;">
+            <div style="box-sizing: border-box;width: 100%;margin: 5px auto;" :class="'row ptz '+ device.number">
+                <table style="width: 100%; height:100px;">
                     <tr>
                         <td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StartRecord')">启动推流</button></td>
-                        <td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Up')" src="/IoTCenter/images/up.png" /></td>
+                        <td></td>
                         <td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StopRecord')">停止推流</button></td>
                     </tr>
-                    <tr>
-                        <td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Zoomin')" src="/IoTCenter/images/zoomin.png" /></td>
-                        <td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Left')" src="/IoTCenter/images/left.png" /></td>
-                        <td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Stop')" src="/IoTCenter/images/stop.png" /></td>
-                        <td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Right')" src="/IoTCenter/images/right.png" /></td>
-                        <td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Zoomout')" src="/IoTCenter/images/zoomout.png" /></td>
-                    </tr>
                     <tr>
                         <td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StartPush')">开始录像</button></td>
-                        <td><img v-if="ptz" v-on:click="execApi(device.number,'/Camera/Down')" src="/IoTCenter/images/down.png" /></td>
+                        <td></td>
                         <td colspan="2" style="text-align:center;"><button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(model.number,'/Onvif/StopPush')">停止录像</button></td>
                     </tr>
+                    <template v-if="ptz">
+                        <tr>
+                            <td></td>
+                            <td></td>
+                            <td><img v-on:click="execApi(device.number,'/Camera/Up')" src="/IoTCenter/images/up.png" /></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td><img v-on:click="execApi(device.number,'/Camera/Zoomin')" src="/IoTCenter/images/zoomin.png" /></td>
+                            <td><img v-on:click="execApi(device.number,'/Camera/Left')" src="/IoTCenter/images/left.png" /></td>
+                            <td><img v-on:click="execApi(device.number,'/Camera/Stop')" src="/IoTCenter/images/stop.png" /></td>
+                            <td><img v-on:click="execApi(device.number,'/Camera/Right')" src="/IoTCenter/images/right.png" /></td>
+                            <td><img v-on:click="execApi(device.number,'/Camera/Zoomout')" src="/IoTCenter/images/zoomout.png" /></td>
+                        </tr>
+                        <tr>
+                            <td></td>
+                            <td></td>
+                            <td><img v-on:click="execApi(device.number,'/Camera/Down')" src="/IoTCenter/images/down.png" /></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                    </template>
                 </table>
             </div>
         </div>
@@ -75,6 +93,14 @@
             this.stopWxInlinePlayer();
         },
         methods: {
+            play: function () {
+                if (this.playing) {
+                    this.wxInlinePlayer.stop();
+                }
+                else {
+                    this.wxInlinePlayer.play();
+                }
+            },
             playByFlvJs: function () {
                 var videoElement = $('video.' + this.device.number)[0];
                 var push = Enumerable.from(this.device.data).where(o => o.name === '推流').firstOrDefault();
@@ -141,13 +167,6 @@
                     this.flvPlayer = null;
                 }
             },
-            stopWxInlinePlayer: function () {
-                if (this.wxInlinePlayer) {
-                    this.wxInlinePlayer.stop();
-                    this.wxInlinePlayer.destroy();
-                    this.wxInlinePlayer = null;
-                }
-            },
             volumeChange: function (e) {
                 this.muted = e.target.muted;
                 this.volume = e.target.volume;
@@ -165,16 +184,13 @@
                         muted: true,
                         autoplay: true,
                         loop: false,
-                        isLive: false,
+                        isLive: true,
                         chunkSize: 128 * 1024,
                         preloadTime: 5e2,
                         bufferingTime: 1e3,
                         cacheSegmentCount: 64,
                         customLoader: null
                     });
-                    videoElement.addEventListener('click', () => {
-                        vm.wxInlinePlayer.play();
-                    });
                     vm.wxInlinePlayer.on('loadError', e => {
                         console.log('>>>>> load error happend: ', e);
                     });
@@ -201,13 +217,15 @@
                     });
                 });
             },
-            play: function () {
-                if (this.playing) {
+            stopWxInlinePlayer: function () {
+                if (this.wxInlinePlayer) {
                     this.wxInlinePlayer.stop();
+                    this.wxInlinePlayer.destroy();
+                    this.wxInlinePlayer = null;
                 }
-                else {
-                    this.wxInlinePlayer.play();
-                }
+            },
+            showControls: function (e) {
+                $('.control.' + this.device.number).toggle();
             },
             mute: function () {
                 this.muted = !this.muted;
@@ -219,12 +237,28 @@
             },
             fullScreen: function () {
                 var videoElement = $('canvas.' + this.device.number)[0];
-                videoElement.requestFullscreen();
+                var container = $(videoElement).parents('.video-container')[0];
+                if (document.fullscreen || document.webkitFullscreenElement) {
+                    if (document.webkitExitFullscreen) {
+                        document.webkitExitFullscreen();
+                    }
+                    else {
+                        document.exitFullscreen();
+                    }
+                }
+                else {
+                    if (container.webkitRequestFullScreen) {
+                        container.webkitRequestFullScreen();
+                    }
+                    else {
+                        container.requestFullscreen();
+                    }
+                }
             }
         },
         computed: {
             url: function () {
-                return 'http://localhost/music.flv';
+                return location.protocol + '//' + location.hostname + location.pathname + 'music.flv';
                 //return getDeviceDataValue(this.device, 'flv');
             },
             isFlvSupported: function () {
diff --git a/projects/WebApp/wwwroot/pages/iot/device/color-light.html b/projects/WebApp/wwwroot/pages/iot/device/color-light.html
index 95ef416d..c0512974 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/color-light.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/color-light.html
@@ -7,17 +7,17 @@
         </div>
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
-                <div class="col col-md-2 col-sm-2 align-self-center">
+                <div class="col-2 align-self-center">
                     <div class="mh-100" :style="'width:48px;height:48px;border-radius: 10px;background:'+hsl"></div>
                 </div>
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                <div class="col-8 align-self-center">
                     <div class="row" style="height:58px;">
                         <input v-on:change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="height:16px;margin:0 auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);" />
                         <input v-on:change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'height:16px;margin:0 auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'"/>
                         <input v-on:change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="height:16px;margin:0 auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #000 0%, #fff 100%);"/>
                     </div>
                 </div>
-                <div class="col col-md-2 col-sm-2 align-self-center">
+                <div class="col-2 align-self-center text-center">
                     <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="/IoTCenter/images/on.png" />
                     <img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" src="/IoTCenter/images/off.png" />
                 </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/curtain.html b/projects/WebApp/wwwroot/pages/iot/device/curtain.html
index 5d908ed4..2bedcfd5 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/curtain.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/curtain.html
@@ -7,10 +7,10 @@
         </div>
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
-                <div class="col col-md-4 col-sm-4 align-self-center">
+                <div class="col-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/curtain.png" style="width:48px;" />
                 </div>
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                <div class="col-8 align-self-center">
                     <div class="row" style="line-height:28px;">
                         <span class="badge badge-info" style="line-height:26px;">{{getDeviceDataValue(device,'状态')}}</span>
                         <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/On')" src="/IoTCenter/images/left.png" />
diff --git a/projects/WebApp/wwwroot/pages/iot/device/gateway.html b/projects/WebApp/wwwroot/pages/iot/device/gateway.html
index 35208278..0b3a4959 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/gateway.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/gateway.html
@@ -5,10 +5,10 @@
         </div>
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
-                <div class="col col-md-4 col-sm-4 align-self-center">
+                <div class="col-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/gateway.png" style="width:48px;" />
                 </div>
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                <div class="col-8 align-self-center">
                     <div class="row" style="line-height:25px;">
                         <button class="weui-btn weui-btn_mini weui-btn_default" v-on:click="execApi(device.number,'/Gateway/X9d')">版本</button>
                         <span class="badge badge-info" style="line-height:26px;">{{getDeviceDataValue(device,'版本')}}</span>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/humiture.html b/projects/WebApp/wwwroot/pages/iot/device/humiture.html
index a91ffbd7..ec81b7de 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/humiture.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/humiture.html
@@ -7,10 +7,10 @@
         </div>
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
-                <div class="col col-md-4 col-sm-4 align-self-center">
+                <div class="col-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/humiture.png" />
                 </div>
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                <div class="col-8 align-self-center">
                     <div class="row" style="height:25px;line-height:25px;">
                         <span>
                             温度：
diff --git a/projects/WebApp/wwwroot/pages/iot/device/ir.html b/projects/WebApp/wwwroot/pages/iot/device/ir.html
index 573e347b..182b6b76 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/ir.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/ir.html
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="card" style="box-sizing:border-box;height:550px;margin:10px;">
+        <div class="card" style="box-sizing:border-box;height:490px;margin:10px;">
             <div class="card-header">
                 {{device.displayName}}
                 <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/light.html b/projects/WebApp/wwwroot/pages/iot/device/light.html
index aaaa1630..58113326 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/light.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/light.html
@@ -7,10 +7,10 @@
         </div>
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
-                <div class="col col-md-4 col-sm-4 align-self-center">
+                <div class="col-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/light.png" />
                 </div>
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                <div class="col-8 align-self-center">
                     <div class="row" style="line-height:28px;">
                         <span>
                             光照度：
diff --git a/projects/WebApp/wwwroot/pages/iot/device/person.html b/projects/WebApp/wwwroot/pages/iot/device/person.html
index 22895abc..f5366f27 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/person.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/person.html
@@ -7,10 +7,10 @@
         </div>
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
-                <div class="col col-md-4 col-sm-4 align-self-center">
+                <div class="col-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/person.png" style="width:48px;" />
                 </div>
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                <div class="col-8 align-self-center">
                     <div class="row" style="line-height:28px;">
                         <span>
                             状态：
diff --git a/projects/WebApp/wwwroot/pages/iot/device/serial-port.html b/projects/WebApp/wwwroot/pages/iot/device/serial-port.html
index 864c2535..94504a76 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/serial-port.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/serial-port.html
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="card" style="box-sizing:border-box;height:340px;margin:10px;">
+        <div class="card" style="box-sizing:border-box;height:490px;margin:10px;">
             <div class="card-header">
                 {{device.displayName}}
                 <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/smoke.html b/projects/WebApp/wwwroot/pages/iot/device/smoke.html
index 8f36252c..51b741dd 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/smoke.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/smoke.html
@@ -7,10 +7,10 @@
         </div>
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
-                <div class="col col-md-4 col-sm-4 align-self-center">
+                <div class="col-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/smoke.png" style="width:48px;" />
                 </div>
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                <div class="col-8 align-self-center">
                     <div class="row" style="line-height:28px;">
                         <span>
                             状态：
diff --git a/projects/WebApp/wwwroot/pages/iot/device/socket.html b/projects/WebApp/wwwroot/pages/iot/device/socket.html
index 49fd7a6a..f8a2c22f 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/socket.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/socket.html
@@ -7,10 +7,10 @@
         </div>
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
-                <div class="col col-md-4 col-sm-4 align-self-center">
+                <div class="col-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/socket.png" style="width:48px;" />
                 </div>
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                <div class="col-8 align-self-center">
                     <div class="row" style="line-height:28px;">
                         <span class="badge badge-info" style="line-height:26px;">{{electricity}} kW‧h</span>
                         <img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="/IoTCenter/images/on.png" />
diff --git a/projects/WebApp/wwwroot/pages/iot/device/switch3.html b/projects/WebApp/wwwroot/pages/iot/device/switch3.html
index 0a14b84b..28c5e143 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/switch3.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/switch3.html
@@ -7,10 +7,10 @@
         </div>
         <div class="card-body">
             <div class="row" style="height:100%;width:300px;margin: 0 auto;">
-                <div class="col col-md-4 col-sm-4 align-self-center">
+                <div class="col-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/switch1.png" style="width:48px;" />
                 </div>
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                <div class="col-8 align-self-center">
                     <div class="row" style="line-height:28px;">
                         <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='开'" v-on:click="execApi(device.number,'/Switch3/L1Off')" src="/IoTCenter/images/on.png" />
                         <img style="height:32px;" v-if="getDeviceDataValue(device,'L1状态')=='关'" v-on:click="execApi(device.number,'/Switch3/L1On')" src="/IoTCenter/images/off.png" />
diff --git a/projects/WebApp/wwwroot/pages/iot/node.html b/projects/WebApp/wwwroot/pages/iot/node.html
index 2b5905c0..e7d67bb7 100644
--- a/projects/WebApp/wwwroot/pages/iot/node.html
+++ b/projects/WebApp/wwwroot/pages/iot/node.html
@@ -6,7 +6,7 @@
         <h1 class="weui-header-title">{{node.name}}</h1>
     </div>    
     <!--场景-->
-    <div class="row">
+    <div class="row" v-if="scenes.length">
         <div class="col col-md-12">
             <div class="card">
                 <div class="card-header">场景</div>
@@ -17,7 +17,7 @@
         </div>
     </div>
     <!--环境-->
-    <div class="col col-md-12 my-2 px-3">环境</div>
+    <!--<div class="col col-md-12 my-2 px-3">环境</div>-->
     <div class="row">
         <!--光强检测器-->
         <div v-for="device in getDevices('光强检测器')" class="col" style="min-width:320px;">
@@ -35,10 +35,9 @@
         <div v-for="device in getDevices('人体感应器')" class="col" style="min-width:320px;">
             <iot-person v-bind:device="device"></iot-person>
         </div>
-    </div>
-    <!--电器-->
+    <!--</div>
     <div class="col col-md-12 my-2 px-3">用电</div>
-    <div class="row">
+    <div class="row">-->
         <!--调色灯-->
         <div v-for="device in getDevices('调色灯')" class="col" style="min-width:320px;">
             <iot-color-light v-bind:device="device"></iot-color-light>
@@ -56,21 +55,17 @@
             <iot-socket v-bind:device="device"></iot-socket>
         </div>
     </div>
-    <div class="col col-md-12 my-2 px-3">遥控器</div>
-    <!--红外转发器-->
-    <div class="row">
-        <div v-for="device in getDevices('红外转发器')" class="col" style="min-width:320px;">
-            <iot-ir v-bind:device="device"></iot-ir>
-        </div>
-    </div>
-    <!--红外转发器-->
+    <!--<div class="col col-md-12 my-2 px-3">遥控器</div>-->
     <div class="row">
+        <!--摄像头-->
         <div v-for="device in getDevices('摄像头')" class="col" style="min-width:320px;">
             <iot-camera v-bind:device="device"></iot-camera>
         </div>
-    </div>
-    <!--串口控制器-->
-    <div class="row">
+        <!--红外转发器-->
+        <div v-for="device in getDevices('红外转发器')" class="col" style="min-width:320px;">
+            <iot-ir v-bind:device="device"></iot-ir>
+        </div>
+        <!--串口控制器-->
         <div v-for="device in getDevices('串口控制器')" class="col" style="min-width:320px;">
             <iot-serial-port v-bind:device="device"></iot-serial-port>
         </div>