设备详情排版优化

src/pages/business/fireIot/deviceManage/components/deviceDetails.vue

@@ -11,40 +11,48 @@
     :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
   >
     <template #default>
-      <view class="flex bg-white p15 mb15">
-        <image style="width: 40px; height: 40px; margin: auto 15px auto 0" :src="'/static/images/404.png'" mode="aspectFill"></image>
 
-        <view style="margin: auto auto auto 0">
-          <view style="font-size: 15px"> {{ commonStore.deviceDetailsArray.deviceName }} </view>
-        </view>
+      <view style="  background: linear-gradient(to bottom, #FAFBFF, #E7F3FF);">
+        <view class="flex"  style="padding: 15px 15px  0"> 
+          <view style="margin: auto auto auto 0">
+            <view style="font-size: 16px;color:#000"> {{ detailData.deviceName }} </view>
+          </view>
 
-        <view style="margin: auto 0 auto 0">
-          <view :style="{ fontSize: '15px', color: commonStore.deviceDetailsArray.deviceStatus == 1 ? '#16bf00' : 'red' }">
-            {{ commonStore.deviceDetailsArray.deviceStatus == 1 ? "在线" : "离线" }}
+          <view style="margin: auto 0 auto 0">
+            <view style="margin-left: 20px; font-size: 12px;color: #ffffff;padding: 2px 10px; border-radius: 20px; line-height: 20px;" 
+              :style="{ fontSize: '15px', backgroundColor: detailData.deviceStatus == 1 ? '#16bf00' : 'red' }  ">
+              {{ detailData.deviceStatus == 1 ? "在线" : "离线" }}
+            </view>
           </view>
         </view>
-      </view>
+        <view class=" p15" style="color:rgba(0,0,0,.7)" >
+          <!-- <uni-section class="block mb10" title="基本信息" type="line"></uni-section> -->
+          <view class=" basicBox p0">
+            <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
 
-      <view class="bg-white p15 mb15">
-        <uni-section class="block mb10" title="基本信息" type="line"></uni-section>
-        <view class="tableType3 p0">
-          <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
-
-          <u-row v-for="po in dataList" :key="po">
-            <u-col span="4">
-              <view style="text-align: right; padding: 0px 5px 0px 5px">{{ po.title }}</view>
-            </u-col>
-            <u-col span="8">
-              <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
-            </u-col>
-          </u-row>
+            <u-row>
+                <u-col span="9" class="basicLeft">
+                  <view v-for="po in dataList" :key="po">
+                    <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.title }}:</view>
+                    <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
+                </view>
+                </u-col>
+                <u-col span="3">
+                  <image style="width: 80px; height: 80px; margin: auto 15px auto 0" :src="'/static/images/jg.png'" mode="aspectFill"></image>
+                </u-col>
+              </u-row>
+
+
+            
+          </view>
         </view>
       </view>
+      
 
       <view class="bg-white p15 mb15">
         <!-- 分段器组件 -->
-        <view class="app-subsection">
-          <u-subsection :list="list" :current="tabPosition" inactiveColor="#303133" :activeColor="proxy.$settingStore.themeColor.color" @change="tabPositionChange" style="width: 100%"></u-subsection>
+        <view class="app-subsection"> 
+          <u-subsection :list="list" mode="subsection" :current="tabPosition" @change="tabPositionChange" style="width: 100%;font-size:16px"></u-subsection>
         </view>
 
         <view v-if="tabPosition == 1">
@@ -70,10 +78,10 @@
         </view>
         <view v-if="tabPosition == 0">
           <u-empty v-if="realTimeDataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
-          <view v-else class="flex" style="flex-wrap: wrap; line-height: 36px">
-            <view style="width: 50%" v-for="realTime in realTimeDataList" :key="realTime">
+          <view v-else class="flex" style="flex-wrap: wrap; line-height: 36px;font-size:16px">
+            <view style="width: 100%;border-bottom:1px solid #F3F3F3" v-for="realTime in realTimeDataList" :key="realTime">
               {{ realTime.attributeName + "：" }}
-              {{ realTime.value }}
+              <view style="color:#000;display:inline-block;">{{ realTime.value }}</view>
               {{ realTime.attributeUnit ? realTime.attributeUnit : "" }}
             </view>
           </view>
@@ -172,8 +180,7 @@ const calendarStartTime = ref(""); //日历开始时间
 const calendarEndTime = ref(""); //日历结束时间
 const productId = ref(0); //产品id
 const deviceId = ref(0); //设备id
-const deviceUUID = ref("") //设备UUID
-const productCode = ref(""); //产品code
+const detailData = ref({}) //设备详情数据存储
 const deviceCotrolList = ref([]) //设备调试数据存储
 function open() {
   calendar.value.open();
@@ -196,8 +203,7 @@ function dmpDeviceInfoApi() {
       dataList.value[2].value = requset.data.records[0].simCode ;
       dataList.value[3].value = requset.data.records[0].installAddress
       dataList.value[4].value = requset.data.records[0].createdTime ? requset.data.records[0].createdTime.replace("T", " ") : requset.data.records[0].createdTime;
-      productCode.value = requset.data.records[0].productCode;
-      deviceUUID.value=requset.data.records[0].deviceUuid;
+      detailData.value=requset.data.records[0]
     }
   });
 }
@@ -223,7 +229,7 @@ function init() {
       });
 
       last({
-        deviceUUId: deviceUUID.value,
+        deviceUUId: detailData.value.deviceUuid,
         metrics: array,
       }).then((requsets) => {
         if (requsets.status === "SUCCESS") {
@@ -246,7 +252,7 @@ function deviceControlData(){
   getList({
     current: 1,
     size: 10,
-    productCode:productCode.value,
+    productCode:detailData.value.productCode,
   }).then((response) => {
     deviceCotrolList.value=response.data.records
     // console.log(response.data.records)
@@ -291,7 +297,7 @@ function historyMetricsApi() {
   historyMetrics({
     startTime: calendarStartTime.value?calendarStartTime.value+' 00:00:00':calendarStartTime.value,
     endTime: calendarEndTime.value?calendarEndTime.value+' 23:59:59':calendarEndTime.value,
-    deviceUUId: deviceUUID.value,
+    deviceUUId: detailData.value.deviceUuid,
     // deviceId: commonStore.deviceDetailsArray.deviceId,
     // deviceType: commonStore.deviceDetailsArray.deviceType,
     metrics: checkboxValueList.value,
@@ -355,10 +361,21 @@ watch(
 </script>
 
 <style lang="scss" scoped>
+.basicBox{
+  font-size:16px;
+  .basicLeft view{
+    display:inline-block;
+    line-height:30px;
+    .subsection__item__text{
+      font-size:16px!important
+    }
+
+  }
+}
 .app-subsection {
   display: flex;
   margin-bottom: 10px;
-  padding: 0px 5rem;
+  // padding: 0px 5rem;
 }
 .demo-layout{
   border:1px solid #e0e0e0;