From e196877aa18e03d7b6bdc40e24f33c75e6aa61ce Mon Sep 17 00:00:00 2001
From: wanggang <76527413@qq.com>
Date: Sun, 2 Feb 2020 13:28:08 +0800
Subject: [PATCH] update

Former-commit-id: 8d700465214a24588dfb8cf196fe18331c53549a
---
 projects/IoTCenter/wwwroot/images/device.png  | Bin 0 -> 756 bytes
 projects/IoTCenter/wwwroot/images/light.png   | Bin 3179 -> 2193 bytes
 projects/IoTCenter/wwwroot/images/node.png    | Bin 0 -> 1771 bytes
 projects/WebApp/wwwroot/css/app.css           |  15 +-
 projects/WebApp/wwwroot/js/iot.js             |   2 +-
 projects/WebApp/wwwroot/pages/home.html       |  30 ++--
 .../wwwroot/pages/iot/device/humiture.html    |  18 +--
 .../WebApp/wwwroot/pages/iot/device/ir.html   |  42 ++++--
 .../wwwroot/pages/iot/device/light.html       |   6 +-
 .../wwwroot/pages/iot/device/person.html      |   6 +-
 .../wwwroot/pages/iot/device/smoke.html       |   4 +-
 projects/WebApp/wwwroot/pages/iot/node.html   | 134 ++----------------
 projects/WebApp/wwwroot/pages/iot/nodes.html  |  16 +--
 .../WebApp/wwwroot/pages/iot/product.html     |  18 +--
 .../WebApp/wwwroot/pages/iot/products.html    |  16 +--
 15 files changed, 103 insertions(+), 204 deletions(-)
 create mode 100644 projects/IoTCenter/wwwroot/images/device.png
 create mode 100644 projects/IoTCenter/wwwroot/images/node.png

diff --git a/projects/IoTCenter/wwwroot/images/device.png b/projects/IoTCenter/wwwroot/images/device.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7dbf0f932de78efbcb99fe05055aec3f92f0524
GIT binary patch
literal 756
zcmV<Q0t@|#P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0008JNkl<ZXhZE;
zO=}ZT6g~G%6a*K^MBIo_KPGJ#iYr%wji4J>A}&Nhcbb`YQU5?&!G$1nQ8Lk;f*;^Y
zK@oM42wk~SL`pJ6L~*5=1a#NTyE17CL6df7-iTJ-Y!bpf_nvd_$qV;|u*o0V<ouxp
z{Ot+q3FrwZcHsZEP<Fwa5C*ORI0#_7Vzc7HzXS9ZQeO2Z3onO(hfZLJ`(acfSOoAG
zz;hYkYg`5@@rEI@5_F6}X9bKS-|W5hLHULX$XAxHOXe{SFt0*H6)Ox(g7L|BtShku
z<Xo@H0p>&oN0~99N+b!M2sPQkD>5+CvaO<$fME%e5Q~Bd8>j{JTS!kJif{U2w1s{>
zg|vmVh4k;h;10xeM&xjP3h7fQvRMWPY71!#{c9Fd<dX=V+CGq|dP*SWjjTOo)l%Y;
zC{1`Xl4zwg%Z>XCT5LI%o2YV1AhYb<0MQ=b-hVpQPHa}ZnQ)nB=IORmcoUUR?=Gq8
z+ZKg6LY!Z+=1kXP8K4+vqWOjT7#rdN2#>-Xu>^#{rt3Wfa2(9fAZXyd%x_60jez(f
z2(yIM+YAP3V9bK)HUxi+(hQc^3E&I}@7LQ!HoRKQSC&snz#{OrD20)d07&_RMW)^=
z?R&Cb-3<jqBHb61riG%^)&jyV<rbC>Ff#dW#|Vdnz<l_H6&bn^ek415M;NF|iD@vp
z2LhqfY)y^7i_+ykY9Z5Yyas411Aebiw)ffwFzkK!=Ufip72hr#RuQ3Op`6<|NlZ6=
z$J(8Qgjx1JGx6n?U3i)VzdA{U$1Hm%Ky*veO0iuUk90h)mCII^Mg(uEg87o~STB;&
zP!bRp&6mBqOgNW>05R@09qW7&>>5T{KvzVizANYmD-IDOBfVy6^h+Gfpx9IdsFF~@
mYXK_VO9QJXkVY3(a{L6>@EcF3DH<dI0000<MNUMnLSTYV+e{Y#

literal 0
HcmV?d00001

diff --git a/projects/IoTCenter/wwwroot/images/light.png b/projects/IoTCenter/wwwroot/images/light.png
index 6bdb53796a085b3b026f8baccf9fa148002335b5..f7767dc9fe07c56e38ec8825d1466586c3937bef 100644
GIT binary patch
literal 2193
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
T$EBsH00000NkvXXu0mjft#~<d

literal 3179
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
RH+cX6002ovPDHLkV1iN%*G~Wd

diff --git a/projects/IoTCenter/wwwroot/images/node.png b/projects/IoTCenter/wwwroot/images/node.png
new file mode 100644
index 0000000000000000000000000000000000000000..5305b9ff3f2597b3020e5973fff9bd8c66410b0b
GIT binary patch
literal 1771
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
N002ovPDHLkV1jU*Ir0Di

literal 0
HcmV?d00001

diff --git a/projects/WebApp/wwwroot/css/app.css b/projects/WebApp/wwwroot/css/app.css
index b2572f08..5e74fcbf 100644
--- a/projects/WebApp/wwwroot/css/app.css
+++ b/projects/WebApp/wwwroot/css/app.css
@@ -767,16 +767,21 @@ img {
 
 .ir table,.ir .table {
     border-collapse: separate;
-    margin: 15px auto;
-    padding: 15px;
+    margin: 5px auto;
+    padding: 5px;
     border: 2px solid #ddd;
     border-radius: 15px;
 }
 
     .ir table td {
-        padding: 5px;
+        padding: 2px;
         text-align: center;
     }
     .ir .table button{
-        margin:5px;
-    }
\ No newline at end of file
+        margin:2px;
+    }
+.weui-grid__icon {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto;
+}
\ No newline at end of file
diff --git a/projects/WebApp/wwwroot/js/iot.js b/projects/WebApp/wwwroot/js/iot.js
index e9eb896e..72608416 100644
--- a/projects/WebApp/wwwroot/js/iot.js
+++ b/projects/WebApp/wwwroot/js/iot.js
@@ -22,7 +22,7 @@ function getDeviceDataUnit(device, name) {
 function getDeviceData(device, name) {
     var data = Enumerable.from(device.data).where(o => o.name === name).firstOrDefault();
     if (data) {
-        return data['value'] + data['unit'];
+        return data['value'] + data['unit'] ? ' ' + data['unit']:'';
     }
     return null;
 }
diff --git a/projects/WebApp/wwwroot/pages/home.html b/projects/WebApp/wwwroot/pages/home.html
index 959c5f49..cbd187b6 100644
--- a/projects/WebApp/wwwroot/pages/home.html
+++ b/projects/WebApp/wwwroot/pages/home.html
@@ -4,22 +4,20 @@
             <h2>消息</h2>
         </div>
         <div class="weui-tab__content">
-            <div class="col-md-12 my-2">物联网</div>
-            <div class="col-md-12">
-                <div class="row">
-                    <router-link to="/pages/iot/products" class="col-md-2 col-sm-3 col-4 p-1">
-                        <div class="weui-grid__icon">
-                            <i class="ion ion-md-laptop weui-tabbar__icon"></i>
-                        </div>
-                        <p class="weui-grid__label">设备</p>
-                    </router-link>
-                    <router-link to="/pages/iot/nodes" class="col-md-2 col-sm-3 col-4 p-1">
-                        <div class="weui-grid__icon">
-                            <i class="ion ion-md-share weui-tabbar__icon"></i>
-                        </div>
-                        <p class="weui-grid__label">智慧教室</p>
-                    </router-link>
-                </div>
+            <div class="row p-3">物联网</div>
+            <div class="row">
+                <router-link to="/pages/iot/products" class="col-md-2 col-sm-3 col-4 p-3">
+                    <div class="weui-grid__icon">
+                        <img src="/IoTCenter/images/device.png"/>
+                    </div>
+                    <p class="weui-grid__label">设备</p>
+                </router-link>
+                <router-link to="/pages/iot/nodes" class="col-md-2 col-sm-3 col-4 p-3">
+                    <div class="weui-grid__icon">
+                        <img src="/IoTCenter/images/node.png" />
+                    </div>
+                    <p class="weui-grid__label">智慧教室</p>
+                </router-link>
             </div>
         </div>
         <div class="weui-tab__content">
diff --git a/projects/WebApp/wwwroot/pages/iot/device/humiture.html b/projects/WebApp/wwwroot/pages/iot/device/humiture.html
index a15204c7..a91ffbd7 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/humiture.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/humiture.html
@@ -1,38 +1,38 @@
 <template>
-    <div class="card">
+    <div class="card" style="box-sizing:border-box;height:150px;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>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
         <div class="card-body">
-            <div class="row media" style="height:100px;">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
                 <div class="col col-md-4 col-sm-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="row" style="height:50px;line-height:28px;">
+                    <div class="row" style="height:25px;line-height:25px;">
                         <span>
                             温度：
-                            <span class="text-success mx-2" style="font-size:28px;" v-if="getDeviceDataDescription(device,'温度')==='适中'">
+                            <span class="text-success mx-2" style="font-size:20px;" v-if="getDeviceDataDescription(device,'温度')==='适中'">
                                 {{getDeviceDataDescription(device,'温度')}}
                             </span>
-                            <span v-else class="text-danger" style="font-size:28px;">
+                            <span v-else class="text-danger" style="font-size:20px;">
                                 {{getDeviceDataDescription(device,'温度')}}
                             </span>
                             {{getDeviceData(device,'温度')}}
                         </span>
                     </div>
-                    <div class="row" style="height:50px;line-height:28px;">
+                    <div class="row" style="height:25px;line-height:20px;">
                         <span>
                             湿度：
-                            <span class="text-success" style="font-size:28px;" v-if="getDeviceDataDescription(device,'湿度')==='适中'">
+                            <span class="text-success" style="font-size:20px;" v-if="getDeviceDataDescription(device,'湿度')==='适中'">
                                 {{getDeviceDataDescription(device,'湿度')}}
                             </span>
-                            <span v-else class="text-danger mx-2" style="font-size:28px;">
+                            <span v-else class="text-danger mx-2" style="font-size:20px;">
                                 {{getDeviceDataDescription(device,'湿度')}}
                             </span>
-                            {{getDeviceData(device,'温度')}}
+                            {{getDeviceData(device,'湿度')}}
                         </span>
                     </div>
                 </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/ir.html b/projects/WebApp/wwwroot/pages/iot/device/ir.html
index eac2737c..8c63e5c3 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/ir.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/ir.html
@@ -5,7 +5,7 @@
             <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
-        <div class="card-body">
+        <div class="card-body" style="padding-top:0;">
             <div class="weui-tab">
                 <div class="weui-navbar">
                     <a href="javascript:;" class="weui-tabbar__item">
@@ -23,7 +23,6 @@
                 </div>
                 <div class="weui-tab__panel media ir">
                     <div class="weui-tab__content">
-                        <div>{{code}}={{power.value}}+{{pattern.value}}+{{direction.value}}+{{wind.value}}+{{temperature.value}}</div>
                         <table>
                             <tr>
                                 <td>
@@ -70,10 +69,10 @@
                         <table>
                             <tr>
                                 <td>
-                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="2" v-on:click="tv($event)">AV</button>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">电源</button>
                                 </td>
                                 <td>
-                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">电源</button>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="2" v-on:click="tv($event)">AV</button>
                                 </td>
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="15" v-on:click="tv($event)">静音</button>
@@ -114,12 +113,15 @@
                             </tr>
                             <tr>
                                 <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="13" v-on:click="tv($event)">返回</button>
                                 </td>
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="0" v-on:click="tv($event)">0</button>
                                 </td>
                                 <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="14" v-on:click="tv($event)">退出</button>
                                 </td>
+
                             </tr>
                             <tr>
                                 <td>
@@ -181,7 +183,17 @@
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="25" v-on:click="tv($event)">↓</button>
                                 </td>
-
+                            </tr>
+                            <tr>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="26" v-on:click="tv($event)">快退</button>
+                                </td>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">播放</button>
+                                </td>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">快进</button>
+                                </td>
                             </tr>
                         </table>
                     </div>
@@ -189,11 +201,9 @@
                         <table>
                             <tr>
                                 <td>
-                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="2" v-on:click="tv($event)">关</button>
-                                </td>
-                                <td>
-                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">开</button>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">电源</button>
                                 </td>
+                                <td></td>
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="15" v-on:click="tv($event)">静音</button>
                                 </td>
@@ -233,11 +243,13 @@
                             </tr>
                             <tr>
                                 <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="13" v-on:click="tv($event)">返回</button>
                                 </td>
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="0" v-on:click="tv($event)">0</button>
                                 </td>
                                 <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="14" v-on:click="tv($event)">退出</button>
                                 </td>
                             </tr>
                             <tr>
@@ -300,7 +312,17 @@
                                 <td>
                                     <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="25" v-on:click="tv($event)">↓</button>
                                 </td>
-
+                            </tr>
+                            <tr>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="26" v-on:click="tv($event)">快退</button>
+                                </td>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">播放</button>
+                                </td>
+                                <td>
+                                    <button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">快进</button>
+                                </td>
                             </tr>
                         </table>
                     </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/device/light.html b/projects/WebApp/wwwroot/pages/iot/device/light.html
index 558cc95c..aaaa1630 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/light.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/light.html
@@ -1,14 +1,14 @@
 <template>
-    <div class="card">
+    <div class="card" style="box-sizing:border-box;height:150px;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>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
         <div class="card-body">
-            <div class="row media" style="height:100px;">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
                 <div class="col col-md-4 col-sm-4 align-self-center">
-                    <img class="mh-100" src="/IoTCenter/images/light.png" style="width:48px;" />
+                    <img class="mh-100" src="/IoTCenter/images/light.png" />
                 </div>
                 <div class="col col-md-8 col-sm-8 align-self-center">
                     <div class="row" style="line-height:28px;">
diff --git a/projects/WebApp/wwwroot/pages/iot/device/person.html b/projects/WebApp/wwwroot/pages/iot/device/person.html
index f191bd8b..22895abc 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/person.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/person.html
@@ -1,14 +1,14 @@
 <template>
-    <div class="card">
+    <div class="card" style="box-sizing:border-box;height:150px;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>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
         <div class="card-body">
-            <div class="row media" style="height:100px;">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
                 <div class="col col-md-4 col-sm-4 align-self-center">
-                    <img class="mh-100" src="/IoTCenter/images/smoke.png" style="width:48px;" />
+                    <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="row" style="line-height:28px;">
diff --git a/projects/WebApp/wwwroot/pages/iot/device/smoke.html b/projects/WebApp/wwwroot/pages/iot/device/smoke.html
index f191bd8b..8f36252c 100644
--- a/projects/WebApp/wwwroot/pages/iot/device/smoke.html
+++ b/projects/WebApp/wwwroot/pages/iot/device/smoke.html
@@ -1,12 +1,12 @@
 <template>
-    <div class="card">
+    <div class="card" style="box-sizing:border-box;height:150px;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>
             <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
         </div>
         <div class="card-body">
-            <div class="row media" style="height:100px;">
+            <div class="row" style="height:100%;width:300px;margin: 0 auto;">
                 <div class="col col-md-4 col-sm-4 align-self-center">
                     <img class="mh-100" src="/IoTCenter/images/smoke.png" style="width:48px;" />
                 </div>
diff --git a/projects/WebApp/wwwroot/pages/iot/node.html b/projects/WebApp/wwwroot/pages/iot/node.html
index d78748e6..d5783b7f 100644
--- a/projects/WebApp/wwwroot/pages/iot/node.html
+++ b/projects/WebApp/wwwroot/pages/iot/node.html
@@ -19,138 +19,20 @@
     <div class="col col-md-12 my-2 px-3">环境</div>
     <div class="row">
         <!--光强检测器-->
-        <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('光强检测器')">
-            <div class="card">
-                <div class="card-header">
-                    {{device.displayName}}
-                    <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
-                    <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
-                </div>
-                <div class="card-body">
-                    <div class="row media" style="height:100px;">
-                        <div class="col col-md-4 col-sm-4 align-self-center">
-                            <img class="mh-100" src="/IoTCenter/images/light.png" style="width:48px;" />
-                        </div>
-                        <div class="col col-md-8 col-sm-8 align-self-center">
-                            <div class="row" style="line-height:28px;">
-                                <span>
-                                    光照度：
-                                    <span class="text-success" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'光照度','description')==='适中'">
-                                        {{getDeviceDataAttr(device.number,'光照度','description')}}
-                                    </span>
-                                    <span v-else class="text-danger mx-2" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'光照度','description')}}
-                                    </span>
-                                    {{getDeviceDataAttr(device.number,'光照度','value')}}{{ getDeviceDataAttr(device.number,'光照度','unit')}}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('光强检测器')" class="col" style="min-width:320px;">
+            <iot-light v-bind:device="device"></iot-light>
         </div>
         <!--温湿度传感器-->
-        <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('温湿度传感器')">
-            <div class="card">
-                <div class="card-header">
-                    {{device.displayName}}
-                    <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
-                    <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
-                </div>
-                <div class="card-body">
-                    <div class="row media" style="height:100px;">
-                        <div class="col col-md-4 col-sm-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="row" style="height:50px;line-height:28px;">
-                                <span>
-                                    温度：
-                                    <span class="text-success mx-2" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'温度','description')==='适中'">
-                                        {{getDeviceDataAttr(device.number,'温度','description')}}
-                                    </span>
-                                    <span v-else class="text-danger" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'温度','description')}}
-                                    </span>
-                                    {{getDeviceDataAttr(device.number,'温度','value')}}{{ getDeviceDataAttr(device.number,'温度','unit')}}
-                                </span>
-                            </div>
-                            <div class="row" style="height:50px;line-height:28px;">
-                                <span>
-                                    湿度：
-                                    <span class="text-success" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'湿度','description')==='适中'">
-                                        {{getDeviceDataAttr(device.number,'湿度','description')}}
-                                    </span>
-                                    <span v-else class="text-danger mx-2" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'湿度','description')}}
-                                    </span>
-                                    {{getDeviceDataAttr(device.number,'湿度','value')}}{{ getDeviceDataAttr(device.number,'湿度','unit')}}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('温湿度传感器')" class="col"  style="min-width:320px;">
+            <iot-humiture v-bind:device="device"></iot-humiture>
         </div>
         <!--烟雾报警器-->
-        <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('烟雾报警器')">
-            <div class="card">
-                <div class="card-header">
-                    {{device.displayName}}
-                    <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
-                    <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
-                </div>
-                <div class="card-body">
-                    <div class="row media" style="height:100px;">
-                        <div class="col col-md-4 col-sm-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="row" style="line-height:28px;">
-                                <span>
-                                    状态：
-                                    <span class="text-success" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'状态','value')==='正常'">
-                                        {{getDeviceDataAttr(device.number,'状态','value')}}
-                                    </span>
-                                    <span v-else class="text-danger mx-2" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'状态','value')}}
-                                    </span>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('烟雾报警器')" class="col"  style="min-width:320px;">
+            <iot-smoke v-bind:device="device"></iot-smoke>
         </div>
         <!--人体感应器-->
-        <div class="col col-md-2 col-sm-3 col-4 " v-for="device in getDevices('人体感应器')">
-            <div class="card">
-                <div class="card-header">
-                    {{device.displayName}}
-                    <span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
-                    <span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
-                </div>
-                <div class="card-body">
-                    <div class="row media" style="height:100px;">
-                        <div class="col col-md-4 col-sm-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="row" style="line-height:28px;">
-                                <span>
-                                    状态：
-                                    <span class="text-success" style="font-size:28px;" v-if="getDeviceDataAttr(device.number,'状态','value')==='正常'">
-                                        {{getDeviceDataAttr(device.number,'状态','value')}}
-                                    </span>
-                                    <span v-else class="text-danger mx-2" style="font-size:28px;">
-                                        {{getDeviceDataAttr(device.number,'状态','value')}}
-                                    </span>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div v-for="device in getDevices('人体感应器')" class="col"  style="min-width:320px;">
+            <iot-person v-bind:device="device"></iot-person>
         </div>
     </div>
     <!--电器-->
diff --git a/projects/WebApp/wwwroot/pages/iot/nodes.html b/projects/WebApp/wwwroot/pages/iot/nodes.html
index 7a0f467e..026eb221 100644
--- a/projects/WebApp/wwwroot/pages/iot/nodes.html
+++ b/projects/WebApp/wwwroot/pages/iot/nodes.html
@@ -4,14 +4,12 @@
             <mt-button icon="back">back</mt-button>
         </router-link>
     </mt-header>
-    <div class="col-md-12">
-        <div class="row">
-            <router-link v-for="node in nodes" :to="{path:'/pages/iot/node',query:{number:node.number}}" class="col-md-2 col-sm-3 col-4 m-2">
-                <div class="weui-grid__icon">
-                    <img :src="'/IoTCenter'+node.image" />
-                </div>
-                <p class="weui-grid__label">{{node.name}}（{{node.count}}）</p>
-            </router-link>
-        </div>
+    <div class="row">
+        <router-link v-for="node in nodes" :to="{path:'/pages/iot/node',query:{number:node.number}}" class="col-md-2 col-sm-3 col-4 p-3">
+            <div class="weui-grid__icon">
+                <img :src="'/IoTCenter'+node.image" />
+            </div>
+            <p class="weui-grid__label">{{node.name}}（{{node.count}}）</p>
+        </router-link>
     </div>
 </div>
\ No newline at end of file
diff --git a/projects/WebApp/wwwroot/pages/iot/product.html b/projects/WebApp/wwwroot/pages/iot/product.html
index 902e4649..7aa9decc 100644
--- a/projects/WebApp/wwwroot/pages/iot/product.html
+++ b/projects/WebApp/wwwroot/pages/iot/product.html
@@ -4,16 +4,12 @@
             <mt-button icon="back">back</mt-button>
         </router-link>
     </mt-header>
-    <div class="col-md-12">
-        <div class="row">
-            <template v-if="product">
-                <router-link v-for="device in product.devices" :to="{path:'/pages/iot/device',query:{number:device.number}}" class="col-lg-3 col-md-4 col-sm-6 p-5">
-                    <div class="weui-grid__icon">
-                        <img :src="'/IoTCenter'+product.image" />
-                    </div>
-                    <p class="weui-grid__label">{{device.displayName}}</p>
-                </router-link>
-            </template>
-        </div>
+    <div class="row">
+        <router-link v-if="product" v-for="device in product.devices" :to="{path:'/pages/iot/device',query:{number:device.number}}" class="col-lg-3 col-md-4 col-sm-6 p-3">
+            <div class="weui-grid__icon">
+                <img :src="'/IoTCenter'+product.image" />
+            </div>
+            <p class="weui-grid__label">{{device.displayName}}</p>
+        </router-link>
     </div>
 </div>
\ No newline at end of file
diff --git a/projects/WebApp/wwwroot/pages/iot/products.html b/projects/WebApp/wwwroot/pages/iot/products.html
index d4710d13..3b2b2ba6 100644
--- a/projects/WebApp/wwwroot/pages/iot/products.html
+++ b/projects/WebApp/wwwroot/pages/iot/products.html
@@ -4,14 +4,12 @@
             <mt-button icon="back">back</mt-button>
         </router-link>
     </mt-header>
-    <div class="col-md-12">
-        <div class="row">
-            <router-link v-for="product in products" :to="{path:'/pages/iot/product',query:{number:product.number}}" class="col-md-2 col-sm-3 col-4 p-1">
-                <div class="weui-grid__icon">
-                    <img :src="'/IoTCenter'+product.image" />
-                </div>
-                <p class="weui-grid__label">{{product.name}}（{{product.count}}）</p>
-            </router-link>
-        </div>
+    <div class="row">
+        <router-link v-for="product in products" :to="{path:'/pages/iot/product',query:{number:product.number}}" class="col-md-2 col-sm-3 col-4 p-3">
+            <div class="weui-grid__icon">
+                <img class="weui-tabbar__icon" :src="'/IoTCenter'+product.image" />
+            </div>
+            <p class="weui-grid__label">{{product.name}}（{{product.count}}）</p>
+        </router-link>
     </div>
 </div>
\ No newline at end of file