设备页面UI调整

pages/device/detail.vue

@@ -1,337 +1,352 @@
 <template>
   <view class="content">
-    <view class="header">
-      <view style="position: absolute;right:10rpx;top:30rpx;z-index: 9999">
-        <u-button @click="reportError" text="上报异常" type="error" size="mini"></u-button>
-      </view>
-  <u--form>
-    <u-form-item   style="border:0px"
-                   label="设备名称:"
-                   labelWidth="auto"
-                   :borderBottom="false"
-    >
-      <u--input disabled
-                placeholder="请选择分组"
-                border="none"
-                color="gray"
-                disabledColor="white"
-                v-model="deviceInfo.deviceName"
-      ></u--input>
-    </u-form-item>
-    <u-form-item   style="border:0px"
-                   label="所属机构:"
-                   labelWidth="auto"
-                   :borderBottom="false"
-    >
-      <u--input v-if="sysDept != null" disabled
-                placeholder="请选择分组22"
-                border="none"
-                color="gray"
-                disabledColor="white"
-                :value="sysDept.deptName"
-      ></u--input>
-
-      <u--input v-else-if="deviceInfo.deptId == -1" disabled
-                placeholder="请选择分组11"
-                border="none"
-                color="gray"
-                disabledColor="white"
-                value="已注销"
-      ></u--input>
-      <u--input v-else disabled
-                placeholder="未绑定"
-                border="none"
-                color="gray"
-                disabledColor="white"
-                value="未绑定"
-      ></u--input>
-    </u-form-item>
-
-    <u-form-item   style="border:0px"
-                   label="设备编号:"
-                   labelWidth="auto"
-                   :borderBottom="false"
-                   ref="item1"
-    >
-      <u--input disabled
-                border="none"
-                color="gray"
-                disabledColor="white"
-                v-model="deviceInfo.serialNumber"
-      ></u--input>
-    </u-form-item>
-
-    <u-form-item   style="border:0px"
-                   label="二维码ID:"
-                   labelWidth="auto"
-                   :borderBottom="false"
-                   ref="item1"
-    >
-      <u--input disabled
-                border="none"
-                color="gray"
-                disabledColor="white"
-                v-model="deviceInfo.qrcodeId"
-      ></u--input>
-    </u-form-item>
-
-    <u-form-item   style="border:0px"
-                   label="激活时间:"
-                   labelWidth="auto"
-                   :borderBottom="false"
-                   ref="item1"
-    >
-      <u--input disabled
-                border="none"
-                color="gray"
-                disabledColor="white"
-                :value="deviceInfo.activeTime"
-      ></u--input>
-    </u-form-item>
-
-
-    <u-form-item   style="border:0px"
-                  label="运行时长:"
-                  labelWidth="auto"
-                  :borderBottom="false"
-                  ref="item1"
-    >
-      <view style="width: 20%">
-        <u-button @click="seeTime()" type="primary" size="mini" text="查看时长"></u-button>
-      </view>
-    </u-form-item>
+    <view class="header" style="margin:0;padding: 0px;">
 
+      <view class="bg" style="position: fixed;top:0px;bottom:0px;left:0px;right:0px;background-image: url('/static/images/device/bg.png');background-size: 100% 100%;padding:0 40rpx">
+        <view style="position: absolute;right:10rpx;top:30rpx;z-index: 9999">
+          <u-button @click="reportError" color="#EC6D2F" text="上报异常" type="error" size="mini"></u-button>
+        </view>
 
-    <u-form-item   style="border:0px"
-                   label="位置信息:"
-                   labelWidth="auto"
-                   :borderBottom="false"
-                   ref="item1"
-    >
-      <view style="width: 20%">
-        <u-button @click="openLocation(deviceInfo)" type="primary" size="mini" text="查看位置"></u-button>
+        <view style="position: absolute;right:52rpx;top:116rpx;">
+          <view>
+            <u-image :showLoading="true" src="/static/images/device/zaixian.png" width="200rpx" height="200rpx" ></u-image>
+          </view>
+          <view style="position: absolute;color:#48C373;top:110rpx;left:70rpx">在线</view>
+        </view>
+        <view style="font-weight: bold;font-size: 30rpx;margin-top:20rpx">
+{{deviceInfo.deviceName}}
 
+        </view>
+        <view class="prop-text">
+          <text class="text-left">所属用户：</text>
+          <text class="text-right">{{sysDept.deptName}}</text>
+        </view>
+        <view class="prop-text">
+          <text class="text-left">设备编号：</text>
+          <text class="text-right">{{deviceInfo.serialNumber}}</text>
+        </view>
+        <view class="prop-text">
+          <text class="text-left">二维码ID：</text>
+          <text class="text-right">{{deviceInfo.qrcodeId}}</text>
+        </view>
 
-      </view>
-    </u-form-item>
-
-    <u-form-item   style="border:0px"
-                   label="设备信号:"
-                   labelWidth="auto"
-                   :borderBottom="false"
-    >
-      <u--input disabled
-                border="none"
-                color="gray"
-                disabledColor="white"
-                :value="deviceInfo.rssi"
-      ></u--input>
-    </u-form-item>
-
-    <u-form-item v-if="deviceInfo.networkAddress != null"   style="border:0px"
-                   label="设备网络:"
-                   labelWidth="auto"
-                   :borderBottom="false"
-                   ref="item1"
-    >
-      <u--input disabled
-                border="none"
-                color="gray"
-                disabledColor="white"
-                :value="deviceInfo.networkAddress+'('+deviceInfo.networkIp+')'"
-      ></u--input>
-    </u-form-item>
-
-    <u-form-item   style="border:0px"
-                   label="设备状态:"
-                   labelWidth="auto"
-                   :borderBottom="false"
-    >
-       <view style="width:90rpx">
-         <u-tag v-if="deviceInfo.status === 4" text="离线"  size="mini" type="info"></u-tag>
-         <u-tag v-if="deviceInfo.status === 3" text="在线"  size="mini" type="success"></u-tag>
-         <u-tag v-if="deviceInfo.status === 2" text="禁用"  size="mini" type="error"></u-tag>
-         <u-tag v-if="deviceInfo.status === 1" text="未激活"  size="mini" type="error"></u-tag>
-
-       </view>
-
-    </u-form-item>
-
-
-  </u--form>
-    </view>
-    <view class="text-area">
-      <u-tabs :list="summary" keyName="tabName" @change="getDeviceStatus"></u-tabs>
-
-      <view class="prop-container" style="background: white;padding:10px ">
-        <u-form>
-          <u-form-item   style="border:0px;position: relative"
-                         label=" "
-                         labelWidth="auto"
-                         :borderBottom="false"
-          >
-            <uni-row class="demo-uni-row">
-              <uni-col :span="12">
-                开机： <u-switch v-model="power.value" :loading ="power.loading" @change="changeProp('PowerControl')"></u-switch>
-              </uni-col>
-              <uni-col :span="12">
-                锁定： <u-switch v-model="lock.value" :loading ="lock.loading" @change="changeProp('LockControl')"></u-switch>
-              </uni-col>
-            </uni-row>
-
-          </u-form-item>
-
-         <view v-for="item in inputProp"  v-if="checkCommonProp(item)">
-           <uni-row class="demo-uni-row" v-if="item.type === 'integer'">
-             <uni-col :span="10">
-               <view class="item">{{item.name}}</view>
-             </uni-col>
-             <uni-col :span="10">
-               <view style="padding:0 10rpx">
-                 <u-input placeholder="请输入整数"   v-model="item.shadow">
-                 </u-input>
-               </view>
-             </uni-col>
-             <uni-col :span="4">
-               <view class="item" style="padding-top:14rpx">
-                 <u-button v-if="deviceInfo.status==3"
-                           @tap="send(item)"
-                           text="发送"
-                           type="success"
-                           size="mini"
-                 ></u-button>
-                 <u-button v-if="deviceInfo.status!=3"
-                           @tap="send(item)"
-                           text="发送"
-                           type="info"
-                           size="mini"
-                 ></u-button>
-               </view>
-             </uni-col>
-           </uni-row>
-
-
-           <uni-row class="demo-uni-row" v-if="item.type === 'string'">
-             <uni-col :span="10">
-               <view class="item">{{item.name}}</view>
-             </uni-col>
-             <uni-col :span="10">
-               <view style="padding:0 10rpx">
-                 <u-input  placeholder="请输入字符串"  v-model="item.shadow">
-                 </u-input>
+
+        <view class="prop-text">
+          <text class="text-left">激活时间：</text>
+          <text class="text-right">{{deviceInfo.activeTime}}</text>
+        </view>
+        <view class="prop-text">
+          <text class="text-left">查看位置：</text>
+          <view style="position: absolute;top:0px;left:120rpx">
+            <u-icon name="map-fill" label="查看位置" color="#2979ff" size="20" labelSize="12"></u-icon>
+          </view>
+        </view>
+
+        <view class="prop-card-area">
+
+          <view class="prop-card">
+            <view class="prop-card-top">{{ deviceInfo.rssi }}</view>
+            <view class="prop-card-bottom">设备信号</view>
+
+          </view>
+          <view class="prop-card">
+            <view class="prop-card-top">{{ timeobj.alltime }}</view>
+            <view class="prop-card-bottom">累计时长</view>
+
+          </view>
+          <view class="prop-card">
+            <view class="prop-card-top">{{ timeobj.avgtime }}</view>
+            <view class="prop-card-bottom">平均时长</view>
+
+          </view>
+        </view>
+
+         <view class="tab-area">
+
+           <u-tabs lineWidth="80" :activeStyle="{ color: '#3E9CFC' }" :list="summary" keyName="tabName" @change="getDeviceStatus"></u-tabs>
+           <view>
+             <uni-row class="demo-uni-row">
+               <uni-col :span="12">
+               </uni-col>
+             </uni-row>
+             <uni-row class="demo-uni-row">
+               <uni-col :span="12">
+
+               </uni-col>
+             </uni-row>
+
+             <view class="prop-item">
+               <view class="prop-item-left">开机</view>
+               <view class="prop-item-right"> <u-switch inactiveColor="lightgray" activeColor="rgb(96,195,113)" v-model="power.value" :loading ="power.loading" @change="changeProp('PowerControl')"></u-switch>
                </view>
-             </uni-col>
-             <uni-col :span="4">
-               <view class="item" style="padding-top:14rpx">
-                 <u-button v-if="deviceInfo.status==3"
-                           @tap="send(item)"
-                           text="发送"
-                           type="success"
-                           size="mini"
-                 ></u-button>
-                 <u-button v-if="deviceInfo.status!=3"
-                           @tap="send(item)"
-                           text="发送"
-                           type="info"
-                           size="mini"
-                 ></u-button>
+             </view>
+             <view class="prop-item">
+               <view class="prop-item-left">锁定</view>
+               <view class="prop-item-right">
+                 <u-switch inactiveColor="lightgray" activeColor="rgb(96,195,113)" v-model="lock.value" :loading ="lock.loading" @change="changeProp('LockControl')"></u-switch>
                </view>
-             </uni-col>
-           </uni-row>
-
-
-           <uni-row class="demo-uni-row" v-if="item.type === 'array'">
-             <uni-col :span="10">
-               <view class="item">{{item.name}}</view>
-             </uni-col>
-             <uni-col :span="10">
-               <view style="padding:0 10rpx">
-                 <u-input  placeholder="请使用英文逗号分隔的字符串"  v-model="item.shadow">
-                 </u-input>
+             </view>
+             <view v-for="item in inputProp"  v-if="checkCommonProp(item)">
+               <view class="prop-item">
+                 <view class="prop-item-left">{{item.name}}</view>
+                 <view class="prop-item-right">
+                   <view v-if="item.type === 'integer'" style="width:240rpx;position: absolute;left: -260rpx;top: -10rpx;">
+                     <u-input placeholder="请输入整数"   v-model="item.shadow">
+                     </u-input>
+                   </view>
+                   <view style="padding:0 10rpx;width:260rpx;position: absolute;left: -270rpx;top: -10rpx;" v-if="item.type === 'string'">
+                     <u-input  placeholder="请输入字符串"  v-model="item.shadow">
+                     </u-input>
+                   </view>
+                   <view style="padding:0 10rpx;width:260rpx;position: absolute;left: -270rpx;top: -10rpx;" v-if="item.type === 'array'">
+                     <u-input  placeholder="请使用英文逗号分隔的字符串"  v-model="item.shadow">
+                     </u-input>
+                   </view>
+                   <view style="padding:0 10rpx;position: absolute;left: -300rpx;top: -10rpx;" v-if="item.type === 'enum'">
+
+                     <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="left" v-if="item.text != null && item.text.length>0" :title="item.text">
+                       <u-icon slot="icon" size="12" name="arrow-down"></u-icon>
+
+                     </u-cell>
+
+                     <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="down" v-else title="请选择">
+                       <u-icon slot="icon" size="12" name="arrow-down"></u-icon>
+
+                     </u-cell>
+
+                   </view>
+                   <view class="item" style="padding-top:14rpx">
+                     <u-button v-if="deviceInfo.status==3"
+                               @tap="send(item)"
+                               text="发送"
+                               type="success"
+                               size="mini"
+                     ></u-button>
+                     <u-button v-if="deviceInfo.status!=3"
+                               @tap="send(item)"
+                               text="发送"
+                               type="info"
+                               size="mini"
+                     ></u-button>
+                   </view>
+                 </view>
                </view>
-             </uni-col>
-             <uni-col :span="4">
-               <view class="item" style="padding-top:14rpx">
-                 <u-button v-if="deviceInfo.status==3"
-                           @tap="send(item)"
-                           text="发送"
-                           type="success"
-                           size="mini"
-                 ></u-button>
-                 <u-button v-if="deviceInfo.status!=3"
-                           @tap="send(item)"
-                           text="发送"
-                           type="info"
-                           size="mini"
-                 ></u-button>
+             </view>
+            <view style="margin-top:20rpx;margin-left:20rpx">
+              <u--text text="属性监控" style="margin-top:20px"></u--text>
+            </view>
+             <view class="prop-item"  v-if="checkCommonProp(item)"  v-for="item in deviceInfo.readOnlyList">
+                 <view class="prop-item-left">{{item.name}}</view>
+                 <view class="prop-item-right" style="top:0rpx;">
+                   <u-input v-if="checkItemValue(item)"  placeholder="请输入字符串" disabled=""  :value="item.shadow+' '+item.unit">
+                   </u-input>
+                 </view>
                </view>
-             </uni-col>
-           </uni-row>
+           </view>
+         </view>
 
-           <uni-row class="demo-uni-row" v-if="item.type === 'enum'">
-             <uni-col :span="10">
-               <view class="item">{{item.name}}</view>
-             </uni-col>
-             <uni-col :span="10">
-               <view style="padding:0 10rpx">
 
-                 <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="left" v-if="item.text != null && item.text.length>0" :title="item.text">
-                   <u-icon slot="icon" size="12" name="arrow-down"></u-icon>
+      </view>
 
-                 </u-cell>
+<!--  <u&#45;&#45;form>-->
+<!--    <u-form-item   style="border:0px"-->
+<!--                   label="设备名称:"-->
+<!--                   labelWidth="auto"-->
+<!--                   :borderBottom="false"-->
+<!--    >-->
+<!--      <u&#45;&#45;input disabled-->
+<!--                placeholder="请选择分组"-->
+<!--                border="none"-->
+<!--                color="gray"-->
+<!--                disabledColor="white"-->
+<!--                v-model="deviceInfo.deviceName"-->
+<!--      ></u&#45;&#45;input>-->
+<!--    </u-form-item>-->
+<!--    <u-form-item   style="border:0px"-->
+<!--                   label="所属机构:"-->
+<!--                   labelWidth="auto"-->
+<!--                   :borderBottom="false"-->
+<!--    >-->
+<!--      <u&#45;&#45;input v-if="sysDept != null" disabled-->
+<!--                placeholder="请选择分组22"-->
+<!--                border="none"-->
+<!--                color="gray"-->
+<!--                disabledColor="white"-->
+<!--                :value="sysDept.deptName"-->
+<!--      ></u&#45;&#45;input>-->
 
-                 <u-cell customStyle="border:0px;" size="mini" @click="chooseItemData(item)" arrow-direction="down" v-else title="请选择">
-                   <u-icon slot="icon" size="12" name="arrow-down"></u-icon>
+<!--      <u&#45;&#45;input v-else-if="deviceInfo.deptId == -1" disabled-->
+<!--                placeholder="请选择分组11"-->
+<!--                border="none"-->
+<!--                color="gray"-->
+<!--                disabledColor="white"-->
+<!--                value="已注销"-->
+<!--      ></u&#45;&#45;input>-->
+<!--      <u&#45;&#45;input v-else disabled-->
+<!--                placeholder="未绑定"-->
+<!--                border="none"-->
+<!--                color="gray"-->
+<!--                disabledColor="white"-->
+<!--                value="未绑定"-->
+<!--      ></u&#45;&#45;input>-->
+<!--    </u-form-item>-->
 
-                 </u-cell>
+<!--    <u-form-item   style="border:0px"-->
+<!--                   label="设备编号:"-->
+<!--                   labelWidth="auto"-->
+<!--                   :borderBottom="false"-->
+<!--                   ref="item1"-->
+<!--    >-->
+<!--      <u&#45;&#45;input disabled-->
+<!--                border="none"-->
+<!--                color="gray"-->
+<!--                disabledColor="white"-->
+<!--                v-model="deviceInfo.serialNumber"-->
+<!--      ></u&#45;&#45;input>-->
+<!--    </u-form-item>-->
 
-               </view>
-             </uni-col>
-             <uni-col :span="4">
-               <view class="item" style="padding-top:14rpx">
-                 <u-button v-if="deviceInfo.status==3"
-                           @tap="send(item)"
-                           text="发送"
-                           type="success"
-                           size="mini"
-                 ></u-button>
-                 <u-button v-if="deviceInfo.status!=3"
-                           @tap="send(item)"
-                           text="发送"
-                           type="info"
-                           size="mini"
-                 ></u-button>
-               </view>
-             </uni-col>
-           </uni-row>
+<!--    <u-form-item   style="border:0px"-->
+<!--                   label="二维码ID:"-->
+<!--                   labelWidth="auto"-->
+<!--                   :borderBottom="false"-->
+<!--                   ref="item1"-->
+<!--    >-->
+<!--      <u&#45;&#45;input disabled-->
+<!--                border="none"-->
+<!--                color="gray"-->
+<!--                disabledColor="white"-->
+<!--                v-model="deviceInfo.qrcodeId"-->
+<!--      ></u&#45;&#45;input>-->
+<!--    </u-form-item>-->
 
+<!--    <u-form-item   style="border:0px"-->
+<!--                   label="激活时间:"-->
+<!--                   labelWidth="auto"-->
+<!--                   :borderBottom="false"-->
+<!--                   ref="item1"-->
+<!--    >-->
+<!--      <u&#45;&#45;input disabled-->
+<!--                border="none"-->
+<!--                color="gray"-->
+<!--                disabledColor="white"-->
+<!--                :value="deviceInfo.activeTime"-->
+<!--      ></u&#45;&#45;input>-->
+<!--    </u-form-item>-->
 
 
+<!--    <u-form-item   style="border:0px"-->
+<!--                  label="运行时长:"-->
+<!--                  labelWidth="auto"-->
+<!--                  :borderBottom="false"-->
+<!--                  ref="item1"-->
+<!--    >-->
+<!--      <view style="width: 20%">-->
+<!--        <u-button @click="seeTime()" type="primary" size="mini" text="查看时长"></u-button>-->
+<!--      </view>-->
+<!--    </u-form-item>-->
 
-         </view>
 
-          <u-line></u-line>
-          <u--text text="属性监控" style="margin-top:20px"></u--text>
+<!--    <u-form-item   style="border:0px"-->
+<!--                   label="位置信息:"-->
+<!--                   labelWidth="auto"-->
+<!--                   :borderBottom="false"-->
+<!--                   ref="item1"-->
+<!--    >-->
+<!--      <view style="width: 20%">-->
+<!--        <u-button @click="openLocation(deviceInfo)" type="primary" size="mini" text="查看位置"></u-button>-->
 
-          <view>
 
+<!--      </view>-->
+<!--    </u-form-item>-->
 
-            <uni-row class="demo-uni-row"  v-if="checkCommonProp(item)"  v-for="item in deviceInfo.readOnlyList">
-              <uni-col :span="10">
-                <view class="item">{{item.name}}</view>
-              </uni-col>
-              <uni-col :span="10">
-                <view style="padding:0 10rpx">
-                  <u-input  placeholder="请输入字符串" disabled=""  :value="item.shadow+' '+item.unit">
-                  </u-input>
-                </view>
-              </uni-col>
-            </uni-row>
+<!--    <u-form-item   style="border:0px"-->
+<!--                   label="设备信号:"-->
+<!--                   labelWidth="auto"-->
+<!--                   :borderBottom="false"-->
+<!--    >-->
+<!--      <u&#45;&#45;input disabled-->
+<!--                border="none"-->
+<!--                color="gray"-->
+<!--                disabledColor="white"-->
+<!--                :value="deviceInfo.rssi"-->
+<!--      ></u&#45;&#45;input>-->
+<!--    </u-form-item>-->
 
-          </view>
-        </u-form>
+<!--    <u-form-item v-if="deviceInfo.networkAddress != null"   style="border:0px"-->
+<!--                   label="设备网络:"-->
+<!--                   labelWidth="auto"-->
+<!--                   :borderBottom="false"-->
+<!--                   ref="item1"-->
+<!--    >-->
+<!--      <u&#45;&#45;input disabled-->
+<!--                border="none"-->
+<!--                color="gray"-->
+<!--                disabledColor="white"-->
+<!--                :value="deviceInfo.networkAddress+'('+deviceInfo.networkIp+')'"-->
+<!--      ></u&#45;&#45;input>-->
+<!--    </u-form-item>-->
 
-      </view>
+<!--    <u-form-item   style="border:0px"-->
+<!--                   label="设备状态:"-->
+<!--                   labelWidth="auto"-->
+<!--                   :borderBottom="false"-->
+<!--    >-->
+<!--       <view style="width:90rpx">-->
+<!--         <u-tag v-if="deviceInfo.status === 4" text="离线"  size="mini" type="info"></u-tag>-->
+<!--         <u-tag v-if="deviceInfo.status === 3" text="在线"  size="mini" type="success"></u-tag>-->
+<!--         <u-tag v-if="deviceInfo.status === 2" text="禁用"  size="mini" type="error"></u-tag>-->
+<!--         <u-tag v-if="deviceInfo.status === 1" text="未激活"  size="mini" type="error"></u-tag>-->
+
+<!--       </view>-->
+
+<!--    </u-form-item>-->
+
+
+<!--  </u&#45;&#45;form>-->
+<!--    </view>-->
+<!--    <view class="text-area">-->
+<!--      <u-tabs :list="summary" keyName="tabName" @change="getDeviceStatus"></u-tabs>-->
+
+<!--      <view class="prop-container" style="background: white;padding:10px ">-->
+<!--        <u-form>-->
+<!--          <u-form-item   style="border:0px;position: relative"-->
+<!--                         label=" "-->
+<!--                         labelWidth="auto"-->
+<!--                         :borderBottom="false"-->
+<!--          >-->
+<!--            <uni-row class="demo-uni-row">-->
+<!--              <uni-col :span="12">-->
+<!--                开机： <u-switch v-model="power.value" :loading ="power.loading" @change="changeProp('PowerControl')"></u-switch>-->
+<!--              </uni-col>-->
+<!--              <uni-col :span="12">-->
+<!--                锁定： <u-switch v-model="lock.value" :loading ="lock.loading" @change="changeProp('LockControl')"></u-switch>-->
+<!--              </uni-col>-->
+<!--            </uni-row>-->
+
+<!--          </u-form-item>-->
+
+
+
+<!--          <u-line></u-line>-->
+<!--          <view>-->
+
+
+<!--            <uni-row class="demo-uni-row"  v-if="checkCommonProp(item)"  v-for="item in deviceInfo.readOnlyList">-->
+<!--              <uni-col :span="10">-->
+<!--                <view class="item">{{item.name}}</view>-->
+<!--              </uni-col>-->
+<!--              <uni-col :span="10">-->
+<!--                <view style="padding:0 10rpx">-->
+<!--                  <u-input  placeholder="请输入字符串" disabled=""  :value="item.shadow+' '+item.unit">-->
+<!--                  </u-input>-->
+<!--                </view>-->
+<!--              </uni-col>-->
+<!--            </uni-row>-->
+
+<!--          </view>-->
+<!--        </u-form>-->
+
+<!--      </view>-->
       <u-picker @cancel="show=null" :show="show!=null" :columns="columns" @confirm="confirmItemData" keyName="text"></u-picker>
       <u-modal @cancel="cancel" :show="showErrDlg" title="异常上报" :showCancelButton="true" @confirm="doReportError" >
         <view class="slot-content">
@@ -344,15 +359,15 @@
         </view>
       </u-modal>
 
-      <u-modal  :show="showTimeDlg" title="查看时长"  @confirm="closeTime" >
-        <view class="slot-content">
-            <view v-if="timeobj!=null && deviceInfo.status == 3">本次运行时长：{{ timeobj.runtime }}</view>
-          <view v-if="timeobj!=null ">累计时长：{{ timeobj.alltime }}</view>
+<!--      <u-modal  :show="showTimeDlg" title="查看时长"  @confirm="closeTime" >-->
+<!--        <view class="slot-content">-->
+<!--            <view v-if="timeobj!=null && deviceInfo.status == 3">本次运行时长：{{ timeobj.runtime }}</view>-->
+<!--          <view v-if="timeobj!=null ">累计时长：{{ timeobj.alltime }}</view>-->
 
-             <view v-if="timeobj!=null ">平均每天运行时长：{{ timeobj.avgtime }}</view>
+<!--             <view v-if="timeobj!=null ">平均每天运行时长：{{ timeobj.avgtime }}</view>-->
 
-        </view>
-      </u-modal>
+<!--        </view>-->
+<!--      </u-modal>-->
     </view>
   </view>
 </template>
@@ -362,8 +377,9 @@ import { getDetail,getDeviceStatus,cacheJsonThingsModel,reportError ,getDeviceRu
 import UButton from "../../uni_modules/uview-ui/components/u-button/u-button";
 import UForm from "../../uni_modules/uview-ui/components/u--form/u--form";
 import UInput from "../../uni_modules/uview-ui/components/u--input/u--input";
+import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";
 export default {
-  components: {UInput, UForm, UButton},
+  components: {UImage, UInput, UForm, UButton},
   data(){
       return {
         modelKey:['PowerControl','LockControl'],
@@ -391,11 +407,12 @@ export default {
         columns:[],
         location:{},
         sysDept:null,
-        timeobj:null,
+        timeobj:{alltime:0,avgtime:0},
       }
   },
   onLoad: function(opt) {
     this.id = opt.id;
+    this.id = 61;
    this.connectMqtt();
     this.getDetail();
   },
@@ -404,6 +421,15 @@ export default {
     this.mqttUnSubscribe(this.deviceInfo);
   },
   methods:{
+    checkItemValue(item){
+      if(!item.shadow){
+        item.shadow = 0;
+      }
+      if(!item.unit){
+        item.unit = "";
+      }
+      return true;
+    },
     changeProp(key){
       let item = null;
       let obj = null;
@@ -434,6 +460,12 @@ export default {
       let self = this;
       getDeviceRunTime(this.id).then(res=>{
         self.timeobj = res.data;
+        if(self.timeobj.avgtime == ""){
+          self.timeobj.avgtime = 0;
+        }
+        if(self.timeobj.alltime == ""){
+          self.timeobj.alltime = 0;
+        }
       })
     },
     seeTime(){
@@ -525,6 +557,7 @@ export default {
         self.parseSummay(res.data.summary)
         self.mqttSubscribe(res.data);
         self.getDeviceStatus();
+        self.seeTime();
       });
     },
     getDeviceStatus(e){
@@ -884,7 +917,6 @@ export default {
 }
 .content {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
 }
@@ -922,4 +954,73 @@ export default {
   height: 80rpx;
   line-height: 80rpx;
 }
+.bg{
+    position: relative;
+}
+.text-left{
+  color: #8A92A5;
+}
+.text-right{
+  color: #545454;
+}
+.prop-text{
+  position: relative;
+  margin:20rpx 0;
+  font-size: 26rpx;
+}
+.prop-card-area{
+
+}
+.prop-card{
+  width: 29%;
+  height: 100rpx;
+  text-align: center;
+  display: inline-block;
+  background: #F5FCFF;
+  box-shadow: 0px 9rpx 8rpx 0px rgba(0,0,0,0.09);
+  border-radius: 8rpx;
+  margin:0px 15rpx;
+  line-height: 48rpx;
+}
+.prop-card-top{
+
+  color: #3E9CFC;
+}
+.prop-card-bottom{
+
+  color: #8A92A5;
+}
+
+.tab-area {
+  background: white;
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top:480rpx;
+  bottom:-20px;
+  min-height: 200rpx;
+  box-shadow: 0rpx 5rpx 27rpx 0rpx rgba(195, 195, 195, 0.4);
+  border-radius: 40rpx;
+  overflow-y: auto;
+ padding-bottom:80rpx;
+}
+.prop-item{
+  justify-content:center;
+  position: relative;
+  border-bottom: 1px solid lightgray;
+  height: 80rpx;
+  margin:0 20rpx;
+}
+.prop-item-left{
+  position: absolute;
+  left:10rpx;
+  top:22rpx;
+  color: #545454;
+}
+
+.prop-item-right{
+  position: absolute;
+  right:10rpx;
+  top:10rpx;
+}
 </style>