diff --git a/projects/IoTCenter/Views/Home/Node.cshtml b/projects/IoTCenter/Views/Home/Node.cshtml
index 61be5d41..9c512072 100644
--- a/projects/IoTCenter/Views/Home/Node.cshtml
+++ b/projects/IoTCenter/Views/Home/Node.cshtml
@@ -73,19 +73,16 @@
                 padding: 11px 0;
             }
 
-        .btns {
-            padding: 10.5px;
-        }
-
-            .btns .btn {
-                margin: 18px 0;
+            .ptz img, .control img {
+                cursor: pointer;
             }
 
-        .ptz img, .control img {
-            cursor: pointer;
+        form .label1 {
+            line-height: 50px;
+            vertical-align: middle;
         }
 
-        label.button input {
+        .ir label input {
             display: none;
         }
 
@@ -102,7 +99,7 @@
 
         input[type=range] {
             -webkit-appearance: none;
-            height: 25px;
+            height: 50px;
         }
 
             input[type=range]::-webkit-slider-runnable-track {
@@ -119,7 +116,7 @@
                 height: 16px;
                 width: 16px;
                 border-radius: 50%;
-                background-color: Highlight;
+                background-color: green;
                 margin-top: -5px;
             }
 
diff --git a/projects/IoTCenter/wwwroot/node.default.html b/projects/IoTCenter/wwwroot/node.default.html
index 976f167e..26be8f9f 100644
--- a/projects/IoTCenter/wwwroot/node.default.html
+++ b/projects/IoTCenter/wwwroot/node.default.html
@@ -1,27 +1,65 @@
-<div v-if="ViewModel" class="callout callout-info">
-    <h4>{{ViewModel.Name}}</h4>
+<div class="row">
+    <div v-if="ViewModel" class="callout callout-success">
+        <h4>{{ViewModel.Name}}</h4>
+    </div>
 </div>
 <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.DisplayName||c.Name}}</option>
-        </select>
-        <div style="width:100%;height:265px;margin:0;padding:0;background:#000;">
-            <video id="flvPlayer" class="video" controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
+        <div class="row">
+            <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:265px;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 class="row" v-if="PTZControlSupport()">
+            <div class="box box-solid">
+                <div class="box-header with-border">
+                    <img src="/images/ptz.png" style="height:18px;margin-right:10px;" />云台操作
+                </div>
+                <div class="box-body">
+                    <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 class="col-md-6">
         <div class="row">
             <div class="col-md-6">
-                <div class="box box-solid">
-                    <div class="row">
+                <div class="row">
+                    <div class="box box-solid">
                         <div class="col-md-4">
-                            <img src="/images/temperature.png" style="width:48px;height:48px;margin:20px;" />
+                            <img src="/images/temperature.png" style="width:48px;height:48px;margin:19px;" />
                         </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <h3 style="line-height:88px;margin:0;">{{GetData('温湿度传感器',null,null,'温度','Description')}}</h3>
+                        <div class="col-md-4" style="height:86px;">
+                            <h3 style="line-height:86px;margin:0;">{{GetData('温湿度传感器',null,null,'温度','Description')}}</h3>
                         </div>
-                        <div class="col-md-4" style="height:88px;">
+                        <div class="col-md-4" style="height:86px;">
                             <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度：{{GetData('温湿度传感器',null,null,'温度','Value')}}{{ GetData('温湿度传感器',null,null,'温度','Unit')}}</span>
                         </div>
                     </div>
@@ -31,12 +69,12 @@
                 <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;" />
+                            <img src="/images/humidity.png" style="width:48px;height:48px;margin:19px;" />
                         </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <h3 style="line-height:88px;margin:0;">{{GetData('温湿度传感器',null,null,'湿度','Description')}}</h3>
+                        <div class="col-md-4" style="height:86px;">
+                            <h3 style="line-height:86px;margin:0;">{{GetData('温湿度传感器',null,null,'湿度','Description')}}</h3>
                         </div>
-                        <div class="col-md-4" style="height:88px;">
+                        <div class="col-md-4" style="height:86px;">
                             <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度：{{GetData('温湿度传感器',null,null,'湿度','Value')}}{{ GetData('温湿度传感器',null,null,'温度','Unit')}}</span>
                         </div>
                     </div>
@@ -48,12 +86,12 @@
                 <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;" />
+                            <img src="/images/light.png" style="width:48px;height:48px;margin:19px;" />
                         </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <h3 style="line-height:88px;margin:0;">{{GetData('光强检测器',null,'前门','光照度','Description')}}</h3>
+                        <div class="col-md-4" style="height:86px;">
+                            <h3 style="line-height:86px;margin:0;">{{GetData('光强检测器',null,'前门','光照度','Description')}}</h3>
                         </div>
-                        <div class="col-md-4" style="height:88px;">
+                        <div class="col-md-4" style="height:86px;">
                             <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">前门光照：{{GetData('光强检测器',null,'前门','光照度','Value')}}{{ GetData('光强检测器',null,'前门','光照度','Unit')}}</span>
                         </div>
                     </div>
@@ -63,12 +101,12 @@
                 <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;" />
+                            <img src="/images/light.png" style="width:48px;height:48px;margin:19px;" />
                         </div>
-                        <div class="col-md-4" style="height:88px;">
-                            <h3 style="line-height:88px;margin:0;">{{GetData('光强检测器',null,'后门','光照度','Description')}}</h3>
+                        <div class="col-md-4" style="height:86px;">
+                            <h3 style="line-height:86px;margin:0;">{{GetData('光强检测器',null,'后门','光照度','Description')}}</h3>
                         </div>
-                        <div class="col-md-4" style="height:88px;">
+                        <div class="col-md-4" style="height:86px;">
                             <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">后门光照：{{GetData('光强检测器',null,'后门','光照度','Value') }}{{ GetData('光强检测器',null,'后门','光照度','Unit')}}</span>
                         </div>
                     </div>
@@ -80,12 +118,12 @@
                 <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;" />
+                            <img src="/images/person.png" style="width:48px;height:48px;margin:19px;" />
                         </div>
-                        <div class="col-md-4" style="height:88px;">
+                        <div class="col-md-4" style="height:86px;">
                             <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetData('红外感应器',null,'前门','状态','Value')==='警报'" />
                         </div>
-                        <div class="col-md-4" style="height:88px;">
+                        <div class="col-md-4" style="height:86px;">
                             <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">前门人体：{{GetData('红外感应器',null,'前门','状态','Value') }}</span>
                         </div>
                     </div>
@@ -95,214 +133,175 @@
                 <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;" />
+                            <img src="/images/person.png" style="width:48px;height:48px;margin:19px;" />
                         </div>
-                        <div class="col-md-4" style="height:88px;">
+                        <div class="col-md-4" style="height:86px;">
                             <img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetData('红外感应器',null,'后门','状态','Value')==='警报'" />
                         </div>
-                        <div class="col-md-4" style="height:88px;">
+                        <div class="col-md-4" style="height:86px;">
                             <span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">后门人体：{{GetData('红外感应器',null,'后门','状态','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>
-            <p v-else>该摄像头不支持云台</p>
-        </div>
-        <div class="box box-solid">
-            <div class="box-body row">
-                <div class="col-md-12">
-                    <canvas id="TemperatureChart" :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" :data-device-number="GetDeviceNumber('温湿度传感器')"></canvas>
+        <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:18px;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>
             </div>
         </div>
-        <div class="box box-solid">
-            <div class="box-body row">
-                <div class="col-md-12">
-                    <canvas id="LightChart1" :data-device-number="GetDeviceNumber('光强检测器','前门')"></canvas>
+        <div class="row">
+            <div class="col-md-12">
+                <div class="box box-solid btns">
+                    <div class="box-header with-border">
+                        <img src="/images/scene.png" style="height:18px;margin-right:10px;" />场景
+                    </div>
+                    <div class="box-body">
+                        <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>
+    <div class="col-md-6 control">
         <div class="box box-solid">
-            <div class="box-body row">
-                <div class="col-md-12">
-                    <canvas id="LightChart2" :data-device-number="GetDeviceNumber('光强检测器','后门')"></canvas>
+            <div class="box-header with-border">
+                <h3 class="box-title"><img src="/images/switch2.png" style="height:18px;margin-right:10px;" />一路开关</h3>
+                <div class="box-tools pull-right">
+                    <button class="btn btn-sm bg-olive ajax NodeSwitchOn" :data-node-number="ViewModel.Number">一键开</button>
+                    <button class="btn btn-sm bg-olive ajax NodeSwitchOff" :data-node-number="ViewModel.Number">一键关</button>
                 </div>
             </div>
-        </div>
-        <div class="box box-solid">
-            <div class="box-body row">
-                <div class="col-md-12">
-                    <canvas id="EnergyChart" :data-device-number="GetDeviceNumber('智能插座')"></canvas>
+            <div class="box-body">
+                <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,'状态')=='开'" @click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" />
+                            <img v-if="GetDataValue(device.Number,'状态')=='关'" @click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" />
+                        </div>
+                        <div class="row" style="text-align:center;">
+                            {{device.Name||device.DisplayName}}
+                        </div>
+                        <br />
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-    <div class="col-md-6 control">
-        <div class="box box-solid btns">
-            <div class="row">
-                <div class="col-md-4"><span style="display:inline-block;line-height:70px;">用电:</span></div>
-                <div class="col-md-4"><button class="btn btn-block btn-primary ajax NodePowerOn" :data-node-number="ViewModel.Number">一键开</button></div>
-                <div class="col-md-4"><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 class="col-md-6">
+        <div class="box box-solid">
+            <div class="box-header with-border">
+                <h3 class="box-title"><img src="/images/switch2.png" style="height:18px;margin-right:10px;" />三路开关</h3>
+                <div class="box-tools pull-right">
+                    <button class="btn btn-sm bg-olive ajax NodeSwitch3On" :data-node-number="ViewModel.Number">一键开</button>
+                    <button class="btn btn-sm bg-olive ajax NodeSwitch3Off" :data-node-number="ViewModel.Number">一键关</button>
                 </div>
             </div>
-        </div>
-        <div class="box box-solid btns">
-            <div class="row">
-                <div class="col-md-4"><span style="display:inline-block;line-height:70px;">一路开关:</span></div>
-                <div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSwitchOn" :data-node-number="ViewModel.Number">一键开</button></div>
-                <div class="col-md-4"><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,'状态')=='开'" @click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" />
-                        <img v-if="GetDataValue(device.Number,'状态')=='关'" @click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" />
-                    </div>
-                    <div class="row" style="text-align:center;">
-                        {{device.Name||device.DisplayName}}
+            <div class="box-body">
+                <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状态')=='开'" @click="CallApi(device.Number,'/Switch3/L1Off')" src="/images/on.png" />
+                            <img v-if="GetDataValue(device.Number,'L1状态')=='关'" @click="CallApi(device.Number,'/Switch3/L1On')" src="/images/off.png" />
+                            <img v-if="GetDataValue(device.Number,'L2状态')=='开'" @click="CallApi(device.Number,'/Switch3/L2Off')" src="/images/on.png" />
+                            <img v-if="GetDataValue(device.Number,'L2状态')=='关'" @click="CallApi(device.Number,'/Switch3/L2On')" src="/images/off.png" />
+                            <img v-if="GetDataValue(device.Number,'L3状态')=='开'" @click="CallApi(device.Number,'/Switch3/L3Off')" src="/images/on.png" />
+                            <img v-if="GetDataValue(device.Number,'L3状态')=='关'" @click="CallApi(device.Number,'/Switch3/L3On')" src="/images/off.png" />
+                        </div>
+                        <div class="row" style="text-align:center;">
+                            {{device.Name||device.DisplayName}}
+                        </div>
+                        <br />
                     </div>
-                    <br />
                 </div>
             </div>
         </div>
-
-        <div class="box box-solid btns">
-            <div class="row">
-                <div class="col-md-4"><span style="display:inline-block;line-height:70px;">三路开关:</span></div>
-                <div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSwitch3On" :data-node-number="ViewModel.Number">一键开</button></div>
-                <div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSwitch3Off" :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状态')=='开'" @click="CallApi(device.Number,'/Switch3/L1Off')" src="/images/on.png" />
-                        <img v-if="GetDataValue(device.Number,'L1状态')=='关'" @click="CallApi(device.Number,'/Switch3/L1On')" src="/images/off.png" />
-                        <img v-if="GetDataValue(device.Number,'L2状态')=='开'" @click="CallApi(device.Number,'/Switch3/L2Off')" src="/images/on.png" />
-                        <img v-if="GetDataValue(device.Number,'L2状态')=='关'" @click="CallApi(device.Number,'/Switch3/L2On')" src="/images/off.png" />
-                        <img v-if="GetDataValue(device.Number,'L3状态')=='开'" @click="CallApi(device.Number,'/Switch3/L3Off')" src="/images/on.png" />
-                        <img v-if="GetDataValue(device.Number,'L3状态')=='关'" @click="CallApi(device.Number,'/Switch3/L3On')" src="/images/off.png" />
-                    </div>
-                    <div class="row" style="text-align:center;">
-                        {{device.Name||device.DisplayName}}
-                    </div>
-                    <br />
+    </div>
+    <div class="col-md-6">
+        <div class="box box-solid">
+            <div class="box-header with-border">
+                <h3 class="box-title"><img src="/images/switch2.png" style="height:18px;margin-right:10px;" />插座</h3>
+                <div class="box-tools pull-right">
+                    <button class="btn btn-sm bg-olive ajax NodeSocketOn" :data-node-number="ViewModel.Number">一键开</button>
+                    <button class="btn btn-sm bg-olive ajax NodeSocketOff" :data-node-number="ViewModel.Number">一键关</button>
                 </div>
             </div>
-        </div>
-        <div class="box box-solid btns">
-            <div class="row">
-                <div class="col-md-4"><span style="display:inline-block;line-height:70px;">插座:</span></div>
-                <div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSocketOn" :data-node-number="ViewModel.Number">一键开</button></div>
-                <div class="col-md-4"><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,'状态')=='开'" @click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" />
-                        <img v-if="GetDataValue(device.Number,'状态')=='关'" @click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" />
-                    </div>
-                    <div class="row" style="text-align:center;">
-                        {{device.Name||device.DisplayName}}
+            <div class="box-body">
+                <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,'状态')=='开'" @click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" />
+                            <img v-if="GetDataValue(device.Number,'状态')=='关'" @click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" />
+                        </div>
+                        <div class="row" style="text-align:center;">
+                            {{device.Name||device.DisplayName}}
+                        </div>
+                        <br />
                     </div>
-                    <br />
                 </div>
             </div>
         </div>
-
-        <div class="box box-solid btns">
-            <template v-for="device in GetDevices('调色灯')">
-                <div class="row" style="text-align:center;">
-                    {{device.Name||device.DisplayName}}
-                </div>
-                <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,'状态')=='开'" @click="CallApi(device.Number,'/ColorLight/Off')" src="/images/on.png" />
-                    <img v-if="GetDataValue(device.Number,'状态')=='关'" @click="CallApi(device.Number,'/ColorLight/On')" src="/images/off.png" />
+    </div>
+    <template v-for="device in GetDevices('调色灯')">
+        <div class="col-md-6">
+            <div class="box box-solid">
+                <div class="box-header with-border">
+                    <h3 class="box-title"><img src="/images/light2.png" style="height:18px;margin-right:10px;" />{{device.Name||device.DisplayName}}</h3>
+                    <div class="box-tools pull-right">
+                        <img v-if="GetDataValue(device.Number,'状态')=='开'" @click="CallApi(device.Number,'/ColorLight/Off')" src="/images/on.png" />
+                        <img v-if="GetDataValue(device.Number,'状态')=='关'" @click="CallApi(device.Number,'/ColorLight/On')" src="/images/off.png" />
+                    </div>
                 </div>
-                <div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
+                <div class="box-body">
                     <form method="get" action="/App/Exec">
                         <input type="hidden" name="Number" :value="device.Number" />
                         <input type="hidden" name="Method" value="/ColorLight/SetBrightness" />
                         <div class="row">
                             <div class="col-md-3">
-                                亮度：
+                                <span class="label1">亮度</span>
                             </div>
                             <div class="col-md-9">
                                 <input @change="AjaxSubmit($event,device.Number,'亮度')" type="range" min="0" step="1" max="255" name="Brightness" :value="GetDataValue(device.Number,'亮度')" />
                             </div>
                         </div>
                     </form>
-                </div>
-                <form method="get" action="/App/Exec">
-                    <input type="hidden" name="Number" :value="device.Number" />
-                    <input type="hidden" name="Method" value="/ColorLight/SetColor" />
-                    <div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
-                        <div class="col-md-3">
-                            色调：
-                        </div>
-                        <div class="col-md-9">
-                            <input @change="AjaxSubmit($event,device.Number,'色调')" type="range" min="0" step="1" max="255" name="Hue" :value="GetDataValue(device.Number,'色调')" />
-                        </div>
-                    </div>
-                    <div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
-                        <div class="col-md-3">
-                            饱和度：
+                    <form method="get" action="/App/Exec">
+                        <input type="hidden" name="Number" :value="device.Number" />
+                        <input type="hidden" name="Method" value="/ColorLight/SetColor" />
+                        <div class="row">
+                            <div class="col-md-3">
+                                <span class="label1">色调</span>
+                            </div>
+                            <div class="col-md-9">
+                                <input @change="AjaxSubmit($event,device.Number,'色调')" type="range" min="0" step="1" max="255" name="Hue" :value="GetDataValue(device.Number,'色调')" />
+                            </div>
                         </div>
-                        <div class="col-md-9">
-                            <input @change="AjaxSubmit($event,device.Number,'饱和度')" type="range" min="0" step="1" max="255" name="Saturation" :value="GetDataValue(device.Number,'饱和度')" />
+                        <div class="row">
+                            <div class="col-md-3">
+                                <span class="label1">饱和度</span>
+                            </div>
+                            <div class="col-md-9">
+                                <input @change="AjaxSubmit($event,device.Number,'饱和度')" type="range" min="0" step="1" max="255" name="Saturation" :value="GetDataValue(device.Number,'饱和度')" />
+                            </div>
                         </div>
-                    </div>
-                </form>
-            </template>
+                    </form>
+                </div>
+            </div>
         </div>
-
-        <div class="box box-solid btns">
-            <template v-for="device in GetDevices('红外转发器')">
-                <div class="row" style="text-align:center;">
-                    {{device.Name||device.DisplayName}}
+    </template>
+    <template v-for="device in GetDevices('红外转发器')">
+        <div class="col-md-6">
+            <div class="box box-solid btns">
+                <div class="box-header with-border">
+                    <h3 class="box-title"><img src="/images/control.png" style="height:18px;margin-right:10px;" />{{device.Name||device.DisplayName}}</h3>
                 </div>
                 <div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
                     <form class="device KeyCodeType1 ir" method="get" action="/App/Exec">
@@ -312,28 +311,28 @@
                         <input type="hidden" name="Code" :value="GetDataValue(device.Number,'按键')" />
                         <div class="row">
                             <div class="col-md-2">
-                                <label>电源：</label>
+                                <span class="label1">电源</span>
                             </div>
                             <div class="col-md-10">
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="power" type="radio" value="2" v-model="getCode1(GetDataValue(device.Number,'按键')).power" />开</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="power" type="radio" value="1" v-model="getCode1(GetDataValue(device.Number,'按键')).power" />关</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="power" type="radio" value="2" v-model="getCode1(GetDataValue(device.Number,'按键')).power" />开</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="power" type="radio" value="1" v-model="getCode1(GetDataValue(device.Number,'按键')).power" />关</label>
                             </div>
                         </div>
                         <div class="row">
                             <div class="col-md-2">
-                                <label>模式：</label>
+                                <span class="label1">模式</span>
                             </div>
                             <div class="col-md-10">
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="0" />制冷</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="120" />自动</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="240" />制热</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="360" />抽湿</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="480" />送风</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="0" />制冷</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="120" />自动</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="240" />制热</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="360" />抽湿</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="pattern" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" value="480" />送风</label>
                             </div>
                         </div>
                         <div class="row">
                             <div class="col-md-2">
-                                <label>温度：</label>
+                                <span class="label1">温度</span>
                             </div>
                             <div class="col-md-10">
                                 <input @change="SendCode1($event)" name="temperature" type="range" step="1" min="1" max="15" :value="getCode1(GetDataValue(device.Number,'按键')).temperature" />
@@ -341,28 +340,74 @@
                         </div>
                         <div class="row">
                             <div class="col-md-2">
-                                <label>风向：</label>
+                                <span class="label1">风向</span>
                             </div>
                             <div class="col-md-10">
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="direction" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" value="0" />任意</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="direction" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" value="60" />手动</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="direction" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" value="75" />自动</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="direction" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" value="0" />任意</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="direction" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" value="60" />手动</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="direction" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" value="75" />自动</label>
                             </div>
                         </div>
                         <div class="row">
                             <div class="col-md-2">
-                                <label>风量：</label>
+                                <span class="label1">风量</span>
                             </div>
                             <div class="col-md-10">
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="wind" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" value="0" />自动</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="wind" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" value="15" />高</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="wind" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" value="30" />中</label>
-                                <label class="button button-raised button-round"><input @change="SendCode1($event)" name="wind" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" value="45" />低</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="wind" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" value="0" />自动</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="wind" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" value="15" />高</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="wind" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" value="30" />中</label>
+                                <label class="btn btn-sm bg-olive margin"><input @change="SendCode1($event)" name="wind" type="radio" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" value="45" />低</label>
                             </div>
                         </div>
                     </form>
                 </div>
-            </template>
+            </div>
+        </div>
+    </template>
+
+    <div class="col-md-6">
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="TemperatureChart" :data-device-number="GetDeviceNumber('温湿度传感器')"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="humidityChart" :data-device-number="GetDeviceNumber('温湿度传感器')"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="LightChart1" :data-device-number="GetDeviceNumber('光强检测器','前门')"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="LightChart2" :data-device-number="GetDeviceNumber('光强检测器','后门')"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6">
+        <div class="box box-solid">
+            <div class="box-body row">
+                <div class="col-md-12">
+                    <canvas id="EnergyChart" :data-device-number="GetDeviceNumber('智能插座')"></canvas>
+                </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj b/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj
index 2d132979..4fed1a7b 100644
--- a/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj
+++ b/projects/IoTClient/Assets/StreamingAssets/IoT.Resources.csproj
@@ -12,7 +12,12 @@
    <ItemGroup>
     <EmbeddedResource Include="wwwroot\**\*" />
   </ItemGroup><ItemGroup>
+    <None Remove="wwwroot\images\batch.png" />
     <None Remove="wwwroot\images\classroom.png" />
+    <None Remove="wwwroot\images\light2.png" />
+    <None Remove="wwwroot\images\ptz.png" />
+    <None Remove="wwwroot\images\scene.png" />
+    <None Remove="wwwroot\images\switch2.png" />
     <None Remove="wwwroot\images\temperature.png" />
   </ItemGroup>
 </Project>
\ No newline at end of file
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/batch.png b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/batch.png
new file mode 100644
index 00000000..4003d3a7
Binary files /dev/null and b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/batch.png differ
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/light2.png b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/light2.png
new file mode 100644
index 00000000..e6f66bf8
Binary files /dev/null and b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/light2.png differ
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/ptz.png b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/ptz.png
new file mode 100644
index 00000000..89f8b151
Binary files /dev/null and b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/ptz.png differ
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/scene.png b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/scene.png
new file mode 100644
index 00000000..bf147c4a
Binary files /dev/null and b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/scene.png differ
diff --git a/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/switch2.png b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/switch2.png
new file mode 100644
index 00000000..a59f57a4
Binary files /dev/null and b/projects/IoTClient/Assets/StreamingAssets/wwwroot/images/switch2.png differ