首页，设备详情页面整改

frontend_lock/src/api/request.ts

@@ -1,9 +1,19 @@
+/*
+ * @Author: your name
+ * @Date: 2021-03-12 09:28:04
+ * @LastEditTime: 2021-03-12 14:37:03
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \frontend_lock\src\api\request.ts
+ */
 import Taro from '@tarojs/taro';
 import { getToken, getUserInfo ,remove} from '../utils/cache'
 import {wxLogin} from '../utils/login'
 
 //const baseUrl = `https://yapi.baidu.com/mock/15269`
-const baseUrl = `http://localhost:9858/api/`
+// const baseUrl = `http://192.168.0.186:9858/api/`
+const baseUrl = `http://47.92.238.200:9858/api/`
+
 
 
 /**
@@ -24,7 +34,7 @@ function request(opt) {
         // 'X-Litemall-Token': getToken()
       },
       success: function (res) {
-      console.log('请求成功',res)
+      // console.log('请求成功',res)
       resolve(res.data)
         // if (res.statusCode == 200) {
           // resolve(res.data)

frontend_lock/src/pages/deviceDetail/index.scss

@@ -1,24 +1,38 @@
 .deviceDetail{
   overflow-y: auto;
+  padding: 0 30px;
+  box-sizing: border-box;
   .deviceDetailHeader{
     width: 100%;
-    height: 260px;
-    background-color: #3C6EF0;
+    height: 330px;
+    // background-color: #3C6EF0;
+    background: url(../../assets/images/deviceDetail/deviceD.png) center center no-repeat;
+    background-size: 100% 100%;
     overflow: hidden;
+   
+    
+    margin-top: 30px;
     .deviceDetailInfo{
       width: 100%;
-      height: 200px;
-      padding-left: 76px;
+      height: 170px;
+      padding-left: 65px;
       box-sizing: border-box;
       display: flex;
-      justify-content: center;
       align-items: center;
+      position: relative;
       .deviceDetailInfoLeft{
         width: 96px;
         height: 96px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         background: #FFFFFF;
         box-shadow: 0px 3px 10px rgba(40, 40, 40, 0.16);
-        border-radius: 50%;
+        border-radius: 50%; 
+        .leftImg{
+          width: 40px;
+          height: 60px;
+        }
       }
       .deviceDetailInfoRight{
         width: 70%;
@@ -41,21 +55,7 @@
           color: #FFFFFF;
           margin-right: 24px;
         }
-        .topOnline{
-          width: 68px;
-          height: 28px;
-          // line-height: 22px;
-          display: flex;
-          justify-content: center;
-          align-items:center;
-          background: #00D06D;
-          border-radius: 0 10px 0 10px;
-          font-size: 20px;
-          font-family: PingFangSC-Regular;
-          color: #FFFFFF;
-          border: 1px solid rgba(0, 0, 0, 0);
-          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
-        }
+       
         }
         .dirBottom{
           width: 100%;
@@ -68,52 +68,90 @@
           color: #ECECEC;
         }
       }
+      .topOnline{
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 68px;
+        height: 28px;
+        // line-height: 22px;
+        display: flex;
+        justify-content: center;
+        align-items:center;
+        background: #00D06D;
+        border-radius: 0 10px 0 10px;
+        font-size: 20px;
+        font-family: PingFangSC-Regular;
+        color: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0);
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
+      }
+    }
+    .deviceInfo{
+      width: 100%;
+      height: 120px;
+      display: flex;
+      align-items: center;
+      padding: 0  40px;
+      box-sizing: border-box;
+      .deviceInfoItem{
+        width: 33.3%;
+        text-align: center;
+        .itemT{
+          width: 100%;
+          height: 65px;
+          font-size: 49px;
+          // font-family: Roboto;
+          font-weight: 400;
+          color: #FFFFFF;
+          margin-bottom: 25px;
+          .image{
+            width: 44px;
+            height: 100%;
+          }
+        }
+        .itemB{
+          width: 100%;
+          height: 33px;
+          font-size: 24px;
+          font-family: '.PingFang SC';
+          font-weight: 300;
+          line-height: 18px;
+          color: #FFFFFF;
+          
+        }
+
+      }
+
     }
+    
   }
   // 快捷操作
   .shortcuts{
-    margin-top: -60px;
+    // margin-top: -60px;
     // z-index: 9999;
     margin-bottom: 16px;
-    padding: 0 30px;
-    box-sizing: border-box;
-    .shortCard{
-      width: 100%;
-      height: 332px;
+    width: 100%;
+    height: 200px;
+      .at-grid__flex .at-grid-item__content{
+        height: 85%;
+        background-color: #F7F7F7;
+        border-color: #F7F7F7;
+      }
       .at-grid__flex .content-inner__img{
-        width: 128px;
-        height: 128px;
+        width: 96px;
+        height: 96px;
       }
-      // .content-inner__icon {
-      //   width: 128px;
-      //   height: 128px;
-      //   display: flex;
-      //   justify-content: center;
-      //   align-items: center;
-      //   background: #FFFFFF;
-      //   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
-      //   border-radius: 50%;
-      //   opacity: 1;
-      // }
       .content-inner__text{
         font-size: 28px;
         font-weight: 300;
         color: #646464;
       }
-    }
-    .at-card__header-title{
-      height: 40px;
-      font-size: 28px;
-      font-family: PingFang;
-      font-weight: 400;
-      color: #323232;
-    }
+   
   }
 
   .deviceRecordTab{
     border-radius: 8px;
-    padding: 0 30px;
-    box-sizing: border-box;
     z-index: 999;
     .at-tabs__item{
       font-size: 28px;

frontend_lock/src/pages/deviceDetail/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-02-19 11:59:48
- * @LastEditTime: 2021-03-02 16:01:57
+ * @LastEditTime: 2021-03-12 17:40:31
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \intelligentLock\src\pages\index\index.vue
@@ -18,25 +18,42 @@
       <view class="deviceDetailHeader">
         <view class="deviceDetailInfo">
           <view class="deviceDetailInfoLeft">
-
+            <image :src=iceBoxPng
+                   class="leftImg" />
           </view>
           <view class="deviceDetailInfoRight">
             <view class="dirTop">
               <view class="topName">一号冰箱</view>
-              <view class="topOnline">在线</view>
+
             </view>
             <view class="dirBottom">2021-02-07 16:00:00</view>
           </view>
+          <view class="topOnline">在线</view>
+        </view>
+        <view class="deviceInfo">
+          <view class="deviceInfoItem">
+            <p class="itemT">-86℃</p>
+            <p class="itemB">当前温度</p>
+          </view>
+          <view class="deviceInfoItem">
+            <p class="itemT">95%</p>
+            <p class="itemB">当前湿度</p>
+          </view>
+          <view class="deviceInfoItem">
+            <view class="itemT">
+              <image :src=clockPng
+                     class="image" />
+            </view>
+            <p class="itemB">关闭状态</p>
+          </view>
         </view>
       </view>
       <!-- 快捷操作 -->
       <view class="shortcuts">
-        <AtCard title='快捷操作'
-                class="shortCard">
-          <AtGrid :data="dataGrid"
-                  :hasBorder="false"
-                  :onClick="GridItemClick" />
-        </AtCard>
+        <AtGrid :data="dataGrid"
+                :hasBorder="false"
+                :onClick="GridItemClick" />
+
       </view>
       <!-- 设备 -->
       <view class="message">
@@ -97,6 +114,8 @@ import slockPng from '../../assets/images/message/record.png'
 import temporaryPng from "../../assets/images/deviceDetail/temporary.png"
 import openClockPng from "../../assets/images/deviceDetail/slocks.png"
 import devicePng from "../../assets/images/deviceDetail/bindingEquip.png"
+import clockPng from "../../assets/images/deviceDetail/clock.png"
+import iceBoxPng from "../../assets/images/deviceDetail/iceBox.png"
 export default {
   data () {
     return {
@@ -104,6 +123,8 @@ export default {
       numberPng,
       msg: '首页',
       currentTab: 0,
+      clockPng,
+      iceBoxPng,
       tabList: [
         { title: '开锁记录' },
         { title: '报警详情' }

frontend_lock/src/pages/index/index.scss

@@ -2,36 +2,42 @@
   width: 100%;
   height: 260px;
   margin-top: 20px;
-  padding-left: 86px;
-  box-sizing: border-box;
+ 
   position: relative;
   background: url(../../assets/images/index/bgImg.png) center center no-repeat;
   background-size: 100% 100%;
-  .hospitalName{
+  .detailTop{
     width: 100%;
-    height: 45px;
-    margin-top: 50px;
-    margin-bottom: 20px;
-    font-size: 32px;
-    font-family: '.PingFang SC';
-    font-weight: 400;
-    color: #FFFFFF;
-  }
-  .line{
-    width: 110px;
-    height: 0px;
-    border: 1px solid #FFFFFF;
-    margin-bottom: 20px;
+    padding-left: 86px;
+    box-sizing: border-box;
+    .hospitalName{
+      width: 100%;
+      height: 45px;
+      margin-top: 50px;
+      margin-bottom: 20px;
+      font-size: 32px;
+      font-family: '.PingFang SC';
+      font-weight: 400;
+      color: #FFFFFF;
+    }
+    .line{
+      width: 110px;
+      height: 0px;
+      border: 1px solid #FFFFFF;
+      margin-bottom: 20px;
+    }
   }
+  
   .deviceBox{
     width: 100%;
     height: 60px;
+    padding: 30px;
+    box-sizing: border-box;
     display: flex;
     justify-content: space-around;
     align-items: center;
-    
     .deviceBoxItem{
-      width: 100%;
+      width: 33.3%;
       height: 60px;
      display: flex;
      align-items: center;
@@ -39,9 +45,12 @@
       color: #FFFFFF;
       opacity: 0.7;
       .deviceText{
+        display: inline-block;
+        width: 100%;
+        text-align: center;
         font-size: 36px;
         color: #FFFFFF;
-        margin-left: 10px;
+        // margin-left: 10px;
       }
     }
   }

frontend_lock/src/pages/index/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-02-19 11:59:48
- * @LastEditTime: 2021-03-01 15:12:09
+ * @LastEditTime: 2021-03-12 14:50:23
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \intelligentLock\src\pages\index\index.vue
@@ -15,12 +15,14 @@
                 color='#646464' />
     </view> -->
     <view class="detail">
-      <view class="hospitalName">山东省立医院</view>
-      <view class="line"></view>
+      <view class="detailTop">
+        <view class="hospitalName">山东省立医院</view>
+        <view class="line"></view>
+      </view>
       <view class="deviceBox">
-        <view class="deviceBoxItem">全部设备 <text class="deviceText">{{all}}</text></view>
-        <view class="deviceBoxItem">在线设备<text class="deviceText">{{online}}</text></view>
-        <view class="deviceBoxItem">离线设备<text class="deviceText">{{ofline}}</text></view>
+        <view class="deviceBoxItem"> <text class="deviceText">{{all}}</text></view>
+        <view class="deviceBoxItem"><text class="deviceText">{{online}}</text></view>
+        <view class="deviceBoxItem"><text class="deviceText">{{ofline}}</text></view>
 
       </view>
     </view>
@@ -69,7 +71,8 @@
             </AtTabsPane>
             <AtTabsPane :current="currentTab"
                         :index="1">
-              <view class="tab-content deviceList">
+              <view class="tab-content deviceList"
+                    style="margin-left:7px">
                 <view class="deviceItem"
                       v-for="(item,index) in deviceList"
                       v-show="item.DState == 1"
@@ -102,7 +105,8 @@
             </AtTabsPane>
             <AtTabsPane :current="currentTab"
                         :index="2">
-              <view class="tab-content deviceList">
+              <view class="tab-content deviceList"
+                    style="margin-left:15px">
                 <view class="deviceItem"
                       v-for="(item,index) in deviceList"
                       v-show="item.DState == 2"
@@ -181,7 +185,6 @@ export default {
       const params = { _currentPage: this.currentPage, _size: this.size, openid: this.openid }
       getchannels(params)
         .then(res => {
-          console.log('----res----', res)
           this.deviceList = res.items
           //全部设备数量
           this.all = this.deviceList.length
@@ -197,7 +200,6 @@ export default {
     },
     //赋传感器数据
     loaddata (code, k) {
-      console.log('----code---', code)
       let _this = this
       datavalue(code.Serial)
         .then(res => {