deviceDetail

common/common.css

@@ -1,3 +1,19 @@
+/* 纵向 */
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+
+/* 横向*/
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+
 /* 按钮默认样式 */
 
 .btn {
@@ -5,11 +21,27 @@
     width: 69.33%;
     border-radius: 50rpx;
     color: white;
-    padding-top: 24rpx;
-    padding-bottom: 24rpx;
     font-size: 32rpx;
-    font-weight: 600;
-    line-height: 1;
+    font-weight: 550;
+    line-height: 2.875;
+}
+
+
+/* 解决ios 有边框的问题 */
+
+.btn:after {
+    border: none;
+}
+
+.btn-mini {
+    background-color: #353535;
+    border-radius: 30rpx;
+    padding-left: 20rpx;
+    padding-right: 20rpx;
+    color: white;
+    font-size: 24rpx;
+    font-weight: normal;
+    line-height: 2.16;
 }
 
 
@@ -48,4 +80,83 @@
 .btn-cancel-hover {
     background-color: #ccc8c8;
     color: #5c5b5b;
+}
+
+
+/* 黑色 字重400 24rpx大小的文字 */
+
+.black-normal-24rpx {
+    font-size: 24rpx;
+    font-weight: normal;
+    color: #353535;
+}
+
+
+/* 黑色 字重550 24rpx大小的文字 */
+
+.black-mudium-24rpx {
+    font-size: 24rpx;
+    font-weight: 550;
+    color: #353535;
+}
+
+
+/* 黑色 字重550 28rpx大小的文字 */
+
+.black-mudium-28rpx {
+    font-size: 28rpx;
+    font-weight: 550;
+    color: #353535;
+}
+
+
+/* 黑色 字重550 30rpx大小的文字 */
+
+.black-mudium-30rpx {
+    font-size: 30rpx;
+    font-weight: 550;
+    color: #353535;
+}
+
+
+/* 灰色 字重400 24rpx大小的文字 */
+
+.gray-normal-24rpx {
+    font-size: 24rpx;
+    font-weight: normal;
+    color: #999999;
+}
+
+
+/* 紫色 字重400 24rpx大小的文字 */
+
+.primary-normal-24rpx {
+    font-size: 24rpx;
+    font-weight: normal;
+    color: #353535;
+}
+
+
+/* 横线 */
+
+.line {
+    width: 92%;
+    height: 1px;
+    opacity: 0.2;
+    background-image: linear-gradient(to right, #c8c8c8, #484848, #979797);
+}
+
+
+/* 设备x1图片的大小*/
+
+.device-x1 {
+    width: 120rpx;
+    height: 111rpx;
+}
+
+
+/* view 按下的样式 */
+
+.view-hover {
+    background: rgba(0, 0, 0, 0.1);
 }

components/btAlert/btAlert.vue

@@ -1,9 +1,9 @@
 <template>
   <view class="bt-alert"> 
-    <view class="box">
-      <image class="img1" src="https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/ic_bluetooth_permission.png" mode="aspectFit"/>
-      <text class="text1">蓝牙权限</text>
-      <text class="text2">请开启手机蓝牙功能进行连接</text>
+    <view class="bt-box">
+      <image class="bt-img1" src="https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/ic_bluetooth_permission.png" mode="aspectFit"/>
+      <text class="bt-text1">蓝牙权限</text>
+      <text class="gray-normal-24rpx mt10">请开启手机蓝牙功能进行连接</text>
     </view>
     <image class="ic-close" src="../../static/common/ic_close.svg" mode="aspectFit" @click.self="close"/>
   </view>
@@ -46,7 +46,7 @@ export default {
   flex-direction: column;
   align-items: center;
 }
-.box {
+.bt-box {
   margin-top: 14vh;
   width: 69.33vw;
   height: 70.4vw;
@@ -56,24 +56,20 @@ export default {
   flex-direction: column;
   align-items: center;
 }
-.img1 {
+.bt-img1 {
   width: 38.4vw;
   height: 39.7vw;
   margin-top: 50rpx;
 }
-.text1 {
+.bt-text1 {
   margin-top: 30rpx;
   font-size: 36rpx;
-  font-family: PingFangSC-Semibold, PingFang SC;
   font-weight: 600;
   color: #353535;
 }
-.text2 {
+.mt10 {
   margin-top: 10rpx;
-  font-size: 30rpx;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #999999;
+  
 }
 .ic-close{
   margin-top: 20rpx;

components/device-manager/deviceItem/deviceItem.vue

@@ -1,26 +1,36 @@
 <template>
-  <view class="content" @click="goDeviceInfo">
+  <view class="flex-row device-item" :class="{ dih164: showBtn }"  :hover-class="showBtn ? 'none' : 'view-hover'" @click="goDeviceInfo">
     <image
-      class="device-img"
-      :src="'https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/productModel/2X/'+device.ProdModel+'.png'"
+      class="device-x1 ml32"
+      :src="
+        'https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/productModel/2X/' +
+        device.ProdModel +
+        '.png'
+      "
       mode="aspectFit"
     />
-    <battery :battery="device.Power" class="battery"></battery>
-    <view class="text-view">
-      <view class="product">
-        <text class="product-font">型号 {{device.ProdModel}}</text>
-        <text class="product-font" :class="{online:device.online}">{{device.online ? '在线':'离线'}}</text>
+    <battery :battery="device.Power" class="di-battery" :class="showBtn ? 'dimb26':'dimb62'"></battery>
+    <view class="di-text-view" :class="showBtn ? 'dimb26':'dimb62'">
+      <view class="flex-row di-product">
+        <text class="gray-normal-24rpx">型号 {{ device.ProdModel }}</text>
+        <text class="gray-normal-24rpx" :class="{ online: device.online }">{{
+          device.online ? "在线" : "离线"
+        }}</text>
       </view>
-      <text class="name-font">{{device.devName}}</text>
+      <text class="black-mudium-30rpx" style="margin-bottom: 6rpx">{{
+        device.devName
+      }}</text>
     </view>
-    <view class="bottom-line"></view>
-    <view class="right-view">
+    <view v-if="!showBtn" class="line di-bottom-line"></view>
+    <view class="di-right-view">
+      <button v-if="showBtn" class="btn-mini di-release" plain='true' @click.self="releaseClick">注销设备</button>
       <image
-        class="right-img"
+        v-if="!showBtn"
+        class="di-right-img"
         src="../../../static/common/right.svg"
         mode="aspectFit"
       />
-      <view class="red-point" v-if="false"/>
+      <view v-if="!showBtn && device.hasNewVer" class="di-red-point" />
     </view>
   </view>
 </template>
@@ -31,24 +41,35 @@ import battery from "../../battery/battery.vue";
 export default {
   components: { battery },
   props: {
-    device:{
-      type:Object,
-      default:function(){
+    // 设备信息的对象
+    device: {
+      type: Object,
+      default: function () {
         return {
-          devName:'猫王· 旅行者1号',
-          ProdModel:'MW-X',
-          Power:50,
-          
-        }
-      }
+          devName: "猫王· 旅行者1号",
+          ProdModel: "MW-V",
+          Power: 50,
+        };
+      },
+    },
+    //是否显示右侧的注销按钮
+    showBtn:{
+      type:Boolean,
+      default:false
     }
+
   },
   data: () => ({}),
   computed: {},
   methods: {
-	  goDeviceInfo() {
-	    this.$emit('onclick')
-	  },
+    //item点击
+    goDeviceInfo() {
+      this.$emit("onclick");
+    },
+    //注销按钮点击
+    releaseClick(){
+      this.$emit("onrelease");
+    }
   },
   watch: {},
 
@@ -65,64 +86,51 @@ export default {
 </script>
 
 <style>
-.content {
+.device-item {
   width: 100vw;
   height: 236rpx;
-  display: flex;
-  flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   position: relative;
 }
-.device-img {
-  width: 120rpx;
-  height: 111rpx;
+.dih164{
+  height: 164rpx
+}
+.dimb26{
+  margin-bottom: 26rpx;
+}
+.dimb62{
+  margin-bottom: 62rpx;
+}
+.ml32 {
   margin-left: 32rpx;
 }
-.battery {
+.di-battery {
   margin-left: 6rpx;
-  margin-bottom: 62rpx;
   align-self: flex-end;
 }
-.text-view {
+.di-text-view {
   margin-left: 42rpx;
-  margin-bottom: 62rpx;
   align-self: flex-end;
   display: flex;
   flex-direction: column-reverse;
 }
-.product {
+.di-product {
   width: 40vw;
-  display: flex;
-  flex-direction: row;
   justify-content: space-between;
 }
 
-.product-font {
-  font-size: 24rpx;
-  font-weight: 400;
-  color: #999999;
-}
-.online{
-  color: #684BBE;
+.online {
+  color: #684bbe;
 }
 
-.name-font {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #353535;
-  margin-bottom: 6rpx;
-}
-.bottom-line {
+.di-bottom-line {
   position: absolute;
   bottom: 0;
   left: 4vw;
   width: 92vw;
-  height: 1px;
-  opacity: 0.2;
-  background-image: linear-gradient(to right, #c8c8c8, #484848, #979797);
 }
-.right-view {
+.di-right-view {
   position: absolute;
   right: 0;
   height: 100%;
@@ -130,16 +138,23 @@ export default {
   flex-direction: row-reverse;
   align-items: center;
 }
-.right-img {
+.di-right-img {
   width: 13rpx;
   height: 21rpx;
   margin-right: 34rpx;
 }
-.red-point {
+.di-red-point {
   width: 12rpx;
   height: 12rpx;
   background: #fb0202;
   border-radius: 8rpx;
   margin-right: 30rpx;
 }
+.di-release{
+  background-color: #979797;
+  color: #353535;
+  align-self: flex-end;
+  margin-right: 44rpx;
+  margin-bottom: 30rpx;
+}
 </style>

pages.json

@@ -1,155 +1,149 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index", //首页
-			"style": {
-				"navigationBarTitleText": "猫王妙播"
-			}
-		},
-		{
-			"path": "pages/play/play",
-			"style": {
-				"navigationBarTitleText": "妙控",
-				"enablePullDownRefresh": false
-			}
+    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+        {
+            "path": "pages/index/index", //首页
+            "style": {
+                "navigationBarTitleText": "猫王妙播"
+            }
+        },
+        {
+            "path": "pages/play/play",
+            "style": {
+                "navigationBarTitleText": "妙控",
+                "enablePullDownRefresh": false
+            }
 
-		},
-		{
-			"path": "pages/mine/mine",
-			"style": {
-				"navigationBarTitleText": "我的",
-				"enablePullDownRefresh": false
-			}
+        },
+        {
+            "path": "pages/mine/mine",
+            "style": {
+                "navigationBarTitleText": "我的",
+                "enablePullDownRefresh": false
+            }
 
-		},
-		{
-			"path": "pages/login/login",
-			"style": {
-				"navigationBarTitleText": "登录",
-				"enablePullDownRefresh": false
-			}
+        },
+        {
+            "path": "pages/login/login",
+            "style": {
+                "navigationBarTitleText": "登录",
+                "enablePullDownRefresh": false
+            }
+
+        }, {
+            "path": "pages/demo/mqtt/mqttDemo",
+            "style": {
+                "navigationBarTitleText": "mqttDemo",
+                "enablePullDownRefresh": false
+            }
 
-		}, {
-			"path": "pages/demo/mqtt/mqttDemo",
-			"style": {
-				"navigationBarTitleText": "mqttDemo",
-				"enablePullDownRefresh": false
-			}
+        }, {
+            "path": "pages/demo/mqtt/deviceInfo",
+            "style": {
+                "navigationBarTitleText": "mqttDemo",
+                "enablePullDownRefresh": false
+            }
 
-		}
-		, {
-			"path": "pages/demo/mqtt/deviceInfo",
-			"style": {
-				"navigationBarTitleText": "mqttDemo",
-				"enablePullDownRefresh": false
-			}
-		
-		}
-	    ,{
-            "path" : "pages/addDevice/selectDevice/selectDevice",
-            "style" :                                                                                    
-            {
+        }, {
+            "path": "pages/addDevice/selectDevice/selectDevice",
+            "style": {
                 "navigationBarTitleText": "选择设备型号",
                 "enablePullDownRefresh": false
             }
-        }
-		,{
-            "path" : "pages/addDevice/connectDevice/connectDevice",
-            "style" :                                                                                    
-            {
+        }, {
+            "path": "pages/addDevice/connectDevice/connectDevice",
+            "style": {
                 "navigationBarTitleText": "连接设备",
                 "enablePullDownRefresh": false
             }
-        }
-        ,{
-            "path" : "pages/webview/webview",
-            "style" :                                                                                    
-            {
+        }, {
+            "path": "pages/webview/webview",
+            "style": {
                 "navigationBarTitleText": "",
                 "enablePullDownRefresh": false
             }
-            
+
         }
-        
-        ,{
-            "path" : "pages/mine/device/deviceManager/deviceManager",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
+
+        , {
+            "path": "pages/mine/device/deviceManager/deviceManager",
+            "style": {
+                "navigationBarTitleText": "管理设备",
                 "enablePullDownRefresh": false
             }
-            
-        }
-        ,{
-            "path" : "pages/mine/device/deviceDetail/deviceDetail",
-            "style" :                                                                                    
-            {
-                "navigationBarTitleText": "",
+
+        }, {
+            "path": "pages/mine/device/deviceDetail/deviceDetail",
+            "style": {
+                "navigationBarTitleText": "管理设备",
                 "enablePullDownRefresh": false
             }
-            
+
         }
     ],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "猫王妙播",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	},
-	"tabBar": {
-		"color": "#353535",
-		"selectedColor": "#6547A3",
-		"borderStyle": "black",
-		"backgroundColor": "#ffffff",
-		"list": [{
-				"pagePath": "pages/index/index",
-				"iconPath": "static/home/home.png",
-				"selectedIconPath": "static/home/home_selected.png",
-				"text": "首页"
-			},
-			{
-				"pagePath": "pages/play/play",
-				"iconPath": "static/home/play.png",
-				"selectedIconPath": "static/home/play_selected.png",
-				"text": "妙控"
-			},
-			{
-				"pagePath": "pages/mine/mine",
-				"iconPath": "static/home/mine.png",
-				"selectedIconPath": "static/home/mine_selected.png",
-				"text": "我的"
-			}
-		]
-	},
-	"condition": {
-			"current": 0,
-			"list": [
-				{
-					"name": "管理设备",
-					"path": "pages/mine/device/deviceManager/deviceManager"
-				},
-				{
-					"name": "webview",
-					"path": "pages/webview/webview",
-					"query": "path=help"
-				},
-				{
-					"name": "connectDevice",
-					"path": "pages/addDevice/connectDevice/connectDevice",
-					"query": "model=MW-M3&name=猫王·MW-M3"
-				},
-				{
-					"name": "device",
-					"path": "pages/addDevice/selectDevice/selectDevice"
-				},
-				{
-					"name": "mqtt",
-					"path": "pages/demo/mqtt/mqttDemo"
-				},
-				{
-					"name": "登录组件",
-					"path": "pages/login/login"
-				}
-			]
-		}
-}
+    "globalStyle": {
+        "navigationBarTextStyle": "black",
+        "navigationBarTitleText": "猫王妙播",
+        "navigationBarBackgroundColor": "#F8F8F8",
+        "backgroundColor": "#F8F8F8"
+    },
+    "tabBar": {
+        "color": "#353535",
+        "selectedColor": "#6547A3",
+        "borderStyle": "black",
+        "backgroundColor": "#ffffff",
+        "list": [{
+                "pagePath": "pages/index/index",
+                "iconPath": "static/home/home.png",
+                "selectedIconPath": "static/home/home_selected.png",
+                "text": "首页"
+            },
+            {
+                "pagePath": "pages/play/play",
+                "iconPath": "static/home/play.png",
+                "selectedIconPath": "static/home/play_selected.png",
+                "text": "妙控"
+            },
+            {
+                "pagePath": "pages/mine/mine",
+                "iconPath": "static/home/mine.png",
+                "selectedIconPath": "static/home/mine_selected.png",
+                "text": "我的"
+            }
+        ]
+    },
+    "condition": {
+        "current": 0,
+        "list": [{
+                "name": "设备详情",
+                "path": "pages/mine/device/deviceDetail/deviceDetail",
+				"query": "model=MW-M3&name=猫王·MW-M3&uuid=89860474192070498495"
+            },
+            {
+                "name": "管理设备",
+                "path": "pages/mine/device/deviceManager/deviceManager"
+            },
+            {
+                "name": "webview",
+                "path": "pages/webview/webview",
+                "query": "path=help"
+            },
+            {
+                "name": "connectDevice",
+                "path": "pages/addDevice/connectDevice/connectDevice",
+                "query": "model=MW-M3&name=猫王·MW-M3"
+            },
+            {
+                "name": "device",
+                "path": "pages/addDevice/selectDevice/selectDevice"
+            },
+            {
+                "name": "mqtt",
+                "path": "pages/demo/mqtt/mqttDemo"
+            },
+            {
+                "name": "登录组件",
+                "path": "pages/login/login"
+            }
+        ]
+    }
+}

pages/addDevice/connectDevice/connectDevice.vue

@@ -1,25 +1,30 @@
 <template>
   <view class="content">
     <image class="img" :src="productUrl" mode="aspectFit" />
-    <view class="hint mt1">
+    <view class="hint mt30">
       <image
         class="img1"
         :src="stateIcon"
         mode="aspectFit"
         v-if="showStateIcon"
       />
-      <text class="text1">{{ hintText }}</text>
+      <text class="black-mudium-24rpx">{{ hintText }}</text>
     </view>
-    <view class="hint mt1" v-if="showLink">
+    <view class="hint mt30" v-if="showLink">
       <image
         class="img2"
         src="../../../static/common/ic_smile.svg"
         mode="aspectFit"
       />
-      <text class="text2">{{ productHint }}</text>
+      <text class="primary-normal-24rpx">{{ productHint }}</text>
     </view>
     <view class="bottom content">
-      <button :loading="isloading" :class="buttonClass" @click="btnClick">
+      <button
+        :loading="isloading"
+        :class="buttonClass"
+        :hover-class="buttonHoverClass"
+        @click="btnClick"
+      >
         {{ buttonText }}
       </button>
     </view>
@@ -78,11 +83,18 @@ export default {
       if (this.btnName == "scaning" || this.btnName == "connecting") {
         return "btn disabled";
       } else if (this.btnName == "finish") {
-        return "btn finish";
+        return "btn btn-primary";
       } else {
         return "btn";
       }
     },
+    buttonHoverClass() {
+      if (this.btnName == "finish") {
+        return "btn-primary-hover";
+      } else {
+        return "btn-hover";
+      }
+    },
     productUrl() {
       return `https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/productModel/3X/${this.model}.png`;
     },
@@ -126,7 +138,7 @@ export default {
             device: {
               devName: this.productName,
               uuid: this.device.uuid,
-              ProdModel:this.model
+              ProdModel: this.model,
             },
           });
           //返回上上一级页面
@@ -334,37 +346,14 @@ export default {
   justify-content: center;
   align-items: center;
 }
-.mt1 {
+.mt30 {
   margin-top: 30rpx;
 }
-.text1 {
-  font-size: 24rpx;
-  font-weight: 700;
-  color: #353535;
-}
-.text2 {
-  font-size: 24rpx;
-  font-weight: 500;
-  color: #684bbe;
-}
-.btn {
-  background-color: #353535;
-  width: 69.33vw;
-  border-radius: 50rpx;
-  color: white;
-  padding-top: 24rpx;
-  padding-bottom: 24rpx;
-  font-size: 32rpx;
-  line-height: 1;
-}
 
 .disabled {
   background-color: #999999;
   cursor: not-allowed;
 }
-.finish {
-  background-color: #684bbe;
-}
 .bottom {
   position: fixed;
   top: 73.8vh;

pages/addDevice/selectDevice/selectDevice.vue

@@ -5,7 +5,7 @@
 				mode="aspectFit" class="img" />
 			<text class="text">猫王·MW-M3</text>
 		</view>
-		<view class="line"></view>
+		<view class="line line1"></view>
 		<view class="box top" @click="deviceClick('MW-M4')">
 			<image src="https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/productModel/3X/MW-M4.png"
 				mode="aspectFit" class="img" />
@@ -55,15 +55,11 @@
 		width: 100vw;
 		height: 100vh;
 		justify-content: center;
+		align-items: center;
 	}
 
-	.line {
+	.line1 {
 		width: 56vw;
-		height: 1px;
-		opacity: 0.2;
-		margin-left: auto;
-		margin-right: auto;
-		background-image: linear-gradient(to right, #c8c8c8, #484848, #979797);
 	}
 
 	.box {
@@ -95,9 +91,4 @@
 		margin-top: 30rpx;
 		font-size: 24rpx;
 	}
-
-	.location {
-		position: fixed;
-		top: 0;
-	}
 </style>

pages/demo/mqtt/deviceInfo.vue

@@ -12,13 +12,13 @@
 export default {
   components: {},
   data: () => ({
-    index:0,
+    uuid:'',
     list:[]
   }),
   computed: {
     infoList(){
-      if(this.$store.state.moduleMqtt.deviceList.length > this.index){
-        let object = this.$store.state.moduleMqtt.deviceList[this.index]
+      let object = this.$store.getters['moduleMqtt/getDeviceById'](this.uuid)
+      if(object){
         let list = []
         for (const key in object) {
           if (Object.hasOwnProperty.call(object, key)) {
@@ -29,45 +29,20 @@ export default {
             })
           }
         }
-        
         return list
-
       }else{
         return []
       }
     }
   },
   methods: {
-    getInfoList(){
-      console.log(`getInfoList1 ${this.$store.state.moduleMqtt.deviceList.length} index = ${this.index}` );
-      if(this.$store.state.moduleMqtt.deviceList.length > this.index){
-        console.log("getInfoList2");
-        let object = this.$store.state.moduleMqtt.deviceList[this.index]
-        let list = []
-        for (const key in object) {
-          if (Object.hasOwnProperty.call(object, key)) {
-            const element = object[key];
-            list.push({
-              key:key,
-              element:element,
-            })
-          }
-        }
-        console.log(list);
-        this.list = list
-
-      }
-
-    }
+    
   },
   watch: {},
 
   // 页面周期函数--监听页面加载
   onLoad(options) {
-    // if(options){
-    //   this.index = Number.parseInt(options.index)
-    // }
-    //this.getInfoList()
+    this.uuid = options.uuid
   },
   // 页面周期函数--监听页面初次渲染完成
   onReady() {},

pages/index/index.vue

@@ -1,12 +1,18 @@
 <template>
   <view class="content">
-    <button  @click="addDevice1" hover-class="button-hover">添加设备</button>
-    <device-item v-for="(device,index) in deviceList" :key="index" :device="device" @onclick='goDeviceInfo'></device-item>
+    <button @click="addDevice" class="btn" hover-class="btn-hover">添加设备</button>
+    <device-item
+      v-for="(device, index) in deviceList"
+      :key="index"
+      :device="device"
+      @onclick="goDeviceInfo(device)"
+    ></device-item>
+
   </view>
 </template>
 
 <script>
-import deviceItem from '../../components/device-manager/deviceItem/deviceItem.vue';
+import deviceItem from "../../components/device-manager/deviceItem/deviceItem.vue";
 export default {
   components: { deviceItem },
   data() {
@@ -17,25 +23,36 @@ export default {
   onLoad() {},
   methods: {
     addDevice() {
+      //添加设备
+      // this.$store.dispatch({
+      // 	type: "moduleMqtt/addDevice",
+      // 	clientId: `wx_${getApp().globalData.uid}`,
+      // 	device: {
+      // 		devName: "猫王。野力MAX",
+      // 		uuid: "89860474192070498495",
+      //     ProdModel:"MW-V"
+      // 	},
+      // });
+
       uni.navigateTo({
         url: "../addDevice/selectDevice/selectDevice",
       });
     },
-	goDeviceInfo() {
-	  console.log("goDeviceInfo");
-	  uni.navigateTo({
-	    url: "../demo/mqtt/deviceInfo",
-	    complete(res){
-	      console.warn(res);
-	    }
-	  });
-	},
+    goDeviceInfo(device) {
+      console.log("goDeviceInfo");
+      uni.navigateTo({
+        url: `../mine/device/deviceDetail/deviceDetail?model=${device.ProdModel}&name=${device.devName}&uuid=${device.uuid}`,
+        complete(res) {
+          console.warn(res);
+        },
+      });
+    },
+  },
+  computed: {
+    deviceList() {
+      return this.$store.state.moduleMqtt.deviceList;
+    },
   },
-  computed:{
-	  deviceList(){
-		  return this.$store.state.moduleMqtt.deviceList;
-	  }
-  }
 };
 </script>
 
@@ -47,22 +64,6 @@ export default {
   justify-content: center;
 }
 
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
 
-.text-area {
-  display: flex;
-  justify-content: center;
-}
 
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
 </style>

pages/mine/device/deviceDetail/deviceDetail.vue

@@ -1,22 +1,232 @@
 <template>
-	<view>
-		
+  <view class="flex-column">
+    <device-item showBtn="true" :device="device ? device : defaultDevice" @onclick="goDeviceInfo()"></device-item>
+    <text class="black-mudium-30rpx mt10 ml32">定时设置</text>
+    <view class="flex-row alarm-layout">
+      <view class="alarm">
+        <image
+          class="alarm-png"
+          src="https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/bg_device-alarm.png"
+          mode="aspectFit"
+        />
+        <view class="alarm-content" hover-class="view-hover radius16">
+          <text class="black-mudium-30rpx mb20">定时唤醒</text>
+          <text class="black-normal-24rpx alarm-time">去设置</text>
+          <image
+            class="alarm-rightic right-ic"
+            src="../../../../static/common/right.svg"
+            mode="aspectFit"
+          />
+        </view>
+      </view>
+      <view class="alarm ml26" > 
+		  <image
+          class="alarm-png"
+          src="https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/bg_device-alarm.png"
+          mode="aspectFit"
+        />
+        <view class="alarm-content" hover-class="view-hover radius16">
+          <text class="black-mudium-30rpx mb20">定时休眠</text>
+          <text class="black-normal-24rpx alarm-time">去设置</text>
+          <image
+            class="alarm-rightic right-ic"
+            src="../../../../static/common/right.svg"
+            mode="aspectFit"
+          />
+        </view>
+	  </view>
+    </view>
+
+	<view class="flex-row item mt20" hover-class="view-hover">
+		<text class="black-mudium-28rpx">网络</text>
+		<view class="item-right">
+			<image
+            class="right-ic"
+            src="../../../../static/common/right.svg"
+            mode="aspectFit"
+          />
+		</view>
+	</view>
+	<view class="line align-center"></view>
+
+	<view class="flex-row item">
+		<text class="black-mudium-28rpx">IMEI</text>
+		<text class="gray-normal-24rpx mr34">{{device ? device.imei : ""}}</text>
+	</view>
+	<view class="line align-center"></view>
+
+	<view class="flex-row item">
+		<text class="black-mudium-28rpx">序列号</text>
+		<text class="gray-normal-24rpx mr34">{{uuid}}</text>
+	</view>
+	<view class="line align-center"></view>
+
+	<view class="flex-row item" hover-class="view-hover">
+		<text class="black-mudium-28rpx">数据流量</text>
+		<view class="item-right">
+			<image
+            class="right-ic"
+            src="../../../../static/common/right.svg"
+            mode="aspectFit"
+          />
+		  <text class="gray-normal-24rpx mr18">unKnow</text>
+		</view>
+	</view>
+	<view class="line align-center"></view>
+
+	<view class="flex-row item"  hover-class="view-hover">
+		<text class="black-mudium-28rpx">发现设备</text>
+		<view class="item-right">
+			<image
+            class="right-ic"
+            src="../../../../static/common/right.svg"
+            mode="aspectFit"
+          />
+		  
+		</view>
+	</view>
+	<view class="line align-center"></view>
+
+	<view class="flex-row item">
+		<text class="black-mudium-28rpx">当前固件版本</text>
+		<text class="gray-normal-24rpx mr34">{{device ? device.Firmware : ""}}</text>
+	</view>
+	<view class="line align-center"></view>
+
+	<view class="flex-row item">
+		<text class="black-mudium-28rpx">最新固件版本</text>
+		<text class="gray-normal-24rpx mr34">1.0</text>
 	</view>
+	
+	<button class="btn btn-primary mt28 mb20" hover-class="btn-primary-hover">更新设备固件</button>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
+import deviceItem from "../../../../components/device-manager/deviceItem/deviceItem.vue";
+export default {
+  components: { deviceItem },
+  data() {
+    return {
+		uuid:'',
+		defaultDevice:{
+			devName: "猫王音响.Mate3",
+          	ProdModel: "MW-M3",
 		}
-	}
+	};
+  },
+  methods: {
+	  goDeviceInfo(){
+		  uni.navigateTo({
+		  	url:`../../../demo/mqtt/deviceInfo?uuid=${this.uuid}`
+		  })
+	  }
+  },
+  computed:{
+	  device(){
+		//   let device = this.$store.moduleMqtt.getters.getDeviceById(this.uuid)
+		let device = this.$store.getters['moduleMqtt/getDeviceById'](this.uuid)
+		  console.log(device);
+		  return device
+	  }
+  },
+  onLoad(option){
+	  this.uuid = option.uuid
+	  this.defaultDevice.devName = option.devName
+	  this.defaultDevice.ProdModel = option.model
+  }
+};
 </script>
 
 <style>
+.mt10 {
+  margin-top: 10rpx;
+}
+.ml32{
+ margin-left: 32rpx;
+}
+.alarm-layout {
+  margin-top: 12rpx;
+  justify-content: center;
+}
+.alarm {
+  width: 44vw;
+  height: 120rpx;
+  background: #ffffff;
+  box-shadow: 0px 0px 20px 0px rgba(213, 212, 212, 0.6);
+  border-radius: 16rpx;
+  filter: blur(0px);
+  position: relative;
+}
+.radius16{
+	 border-radius: 16rpx;
+}
+.alarm-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+  position: relative;
+  align-items: center;
+}
+.ml100 {
+  margin-left: 100rpx;
+}
+.ml26 {
+  margin-left: 26rpx;
+}
+.mb20 {
+  margin-bottom: 20rpx;
+}
+.mt20{
+	margin-top: 20rpx;
+}
 
+.alarm-rightic {
+  position: absolute;
+  bottom: 28rpx;
+  right: 80rpx;
+}
+.alarm-time {
+  align-self: center;
+  margin-bottom: 6rpx;
+}
+.alarm-png {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.item{
+	height: 100rpx;
+	justify-content: space-between;
+	padding-left: 34rpx;
+	padding-right: 34rpx;
+	align-items: center;
+}
+.item-right{
+	display: flex;
+	flex-direction: row-reverse;
+}
+.right-ic{
+	width: 13rpx;
+  height: 21rpx;
+  align-self: center;
+}
+.mr34{
+	margin-right: 34rpx;
+}
+.mr18{
+	margin-right: 18rpx;
+}
+.mt28{
+	margin-top: 28rpx;
+}
+.align-center{
+	align-self: center;
+}
 </style>

pages/mine/device/deviceManager/deviceManager.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="content">
-	  <device-item v-for="(device,index) in deviceList" :key="index" :device="device" @onclick="goDeviceInfo"></device-item>
+	  <device-item v-for="(device,index) in deviceList" :key="index" :device="device" @onclick="goDeviceInfo(device)"></device-item>
   </view>
 </template>
 
@@ -14,10 +14,10 @@ export default {
     };
   },
   methods: {
-	  goDeviceInfo() {
+	  goDeviceInfo(device) {
 	    console.log("goDeviceInfo");
 	    uni.navigateTo({
-	      url: "../../../demo/mqtt/deviceInfo",
+	      url: `../deviceDetail/deviceDetail?model=${device.ProdModel}&name=${device.devName}&uuid=${device.uuid}`,
 	      complete(res){
 	        console.warn(res);
 	      }

store/modules/moduleMqtt.js

@@ -1,12 +1,12 @@
 import mqtt from '../../common/mqtt.js'
 import Vue from 'vue'
-import {messageParse,indexOfUuid} from './mqttParse.js'
+import { messageParse, indexOfUuid } from './mqttParse.js'
 //import mqtt from 'mqtt/dist/mqtt.js'
 
 const options = {
-	clientId: "wx_" + parseInt(Math.random() * 100 + 800, 10),
-	keepalive: 28,//每28秒发送一次心跳
-	connectTimeout: 15 * 1000,//连接超时的时间
+    clientId: "wx_" + parseInt(Math.random() * 100 + 800, 10),
+    keepalive: 28, //每28秒发送一次心跳
+    connectTimeout: 15 * 1000, //连接超时的时间
 };
 
 
@@ -14,16 +14,16 @@ let url = 'wss://mqtt.test.radio1964.com'
 
 // #ifdef MP-WEIXIN
 url = 'wxs://mqtt.test.radio1964.com'
-// #endif
+    // #endif
 
 
 
 //订阅设备在线状态
 function subscribeDevicesStatus(dispatch, deviceList) {
-	deviceList.forEach((value) => {
-		let topic = `/${value.uuid}/status/onoffline`
-		dispatch('subscribe', topic)
-	})
+    deviceList.forEach((value) => {
+        let topic = `/${value.uuid}/status/onoffline`
+        dispatch('subscribe', topic)
+    })
 }
 
 //订阅消息
@@ -35,340 +35,352 @@ function subscribeDevicesStatus(dispatch, deviceList) {
 // }
 
 export default {
-	namespaced: true,
-	state: {
-		//当前选择的设备
-		currentDevice: null,
-		//用户设备列表
-		deviceList: [],
-		//mqtt客户端
-		mqttClient: null,
-		//收到的消息的历史记录
-		msgList: [],
-		//设备的播放信息
-		playInfo: {
-			title: "",
-			artist: "",
-			albumURI: "",
-			songInfoID: "",
-			songAlbumID: "",
-			Duration: 0,
-			channel: 1,
-			audioType: 1,
-			PlayState: 3,
-			PlayMode: 0
-
-		}
-
-	},
-	getters: {
-		//mqtt连接状态
-		connected: state => {
-			return state.mqttClient && state.mqttClient.connected
-		},
-
-	},
-	mutations: {
-		//添加设备
-		addDevice(state, device) {
-			state.deviceList.push(device)
-		},
-		//设置当前选择的设备
-		setCurrentDevice(state, device) {
-			//state.currentDevice = device
-			Vue.set(state, 'currentDevice', device)
-		},
-		//移除设备
-		removeDevice(state, device) {
-			let index = state.deviceList.indexOf(device)
-			state.deviceList.slice(index, 1)
-		},
-		//连接mqtt服务器 clientId为wx_加上用户的uid
-		connect(state, clientId) {
-			console.log(`connect clientId = ${clientId}`);
-			options.clientId = clientId
-			state.mqttClient = mqtt.connect(url, options)
-		},
-		//token失效，退出登录，需要清除数据
-		release(state) {
-			state.deviceList = []
-			state.currentDevice = null
-			state.mqttClient = null
-		},
-		//更新设备信息
-		updateDevice(state, data) {
-			Vue.set(state.deviceList, data.index, data.device)
-		},
-		//更新播放信息
-		updatePlayInfo(state, playinfo) {
-			state.playInfo = playinfo
-		}
-
-	},
-	actions: {
-		//添加设备
-		addDevice({ state, dispatch, commit, getters }, data) {
-			let clientId = (data.clientId) ? data.clientId : options.clientId
-			let device = data.device
-
-			console.log(`deviceList = ${state.deviceList} device = ${device}`);
-			//判断设备是否存在deviceList中
-			let findDevice = state.deviceList.find((item) => {
-				return item.uuid === device.uuid
-			})
-			if (findDevice == null) {
-				if (state.deviceList.length === 0) {
-					//设置当前的设备为添加的设备
-					commit('setCurrentDevice', device)
-				}
-				//添加设备
-				state.deviceList.push(device)
-				//如果已经连接
-				if (getters.connected) {
-					//订阅设备是否在线
-					subscribeDevicesStatus(dispatch, [device])
-					//if (state.currentDevice && state.currentDevice.uuid === device.uuid) {
-						//订阅当前设备的消息
-						//subscribeCurrDevice(dispatch, state.currentDevice)
-					//}
-
-				} else {//如果没有连接
-					//连接服务器
-					dispatch('connect', clientId)
-				}
-
-			}
-		},
-		//删除设备
-		removeDevice({ state, dispatch, commit, getters }, device) {
-			//判断设备是否存在deviceList中
-			let findDevice = state.deviceList.find((item) => {
-				return item.uuid === device.uuid
-			})
-			if (findDevice) {
-				//取消此设备的订阅
-				let topic = `/${device.uuid}/status/onoffline`
-				dispatch('unsubscribe', topic)
-				topic = `/${device.uuid}/status/pub_response`
-				dispatch('unsubscribe', topic)
-				//在设备列表中删除此设备
-				commit('removeDevice', findDevice)
-				//如果删除的是选中的设备
-				if (currentDevice && state.currentDevice.uuid == device.uuid) {
-					//清除当前选中的设备 todo 还是自动选中在线的设备
-					commit('setCurrentDevice', null)
-				}
-
-				if (state.deviceList.length === 0) {//所有的设备都已经删除,关闭连接
-					dispatch('disconnect')
-				}
-			}
-		},
-
-		//连接设备
-		connect({ state, dispatch, commit, getters }, clientId) {
-			if (state.mqttClient == null) {
-				//连接服务器
-				commit('connect', clientId)
-				//连接成功回调
-				state.mqttClient.on("connect", function () {
-					console.log("connect success!");
-					//订阅设备是否在线
-					subscribeDevicesStatus(dispatch, state.deviceList)
-					//订阅当前设备的消息
-					//subscribeCurrDevice(dispatch, state.currentDevice)
-				});
-
-				//异常回调
-				state.mqttClient.on("error", function (err) {
-					console.log(err);
-				});
-
-				state.mqttClient.on('offline', function () {
-
-					console.log(`offline callback`);
-				})
-
-				state.mqttClient.on('end', function () {
-
-					console.log(`end callback`);
-				})
-				//网络断开的回调
-				state.mqttClient.on('close', function () {
-					console.log(`close callback`);
-				})
-				//收到消息的回调
-				state.mqttClient.on('message', function (topic, message) {
-					console.log(`message = ${message.toString()}`);
-					//解析收到的消息
-					messageParse({ state, dispatch, commit, getters }, topic, message)
-
-					//这是测试的
-					state.msgList.push({
-						topic: topic.toString(),
-						msg: message.toString(),
-					});
-
-
-
-				})
-			} else {
-				if (!state.mqttClient.connected) {
-					console.log("reconnect");
-					state.mqttClient.reconnect()
-					//重连成功的回调
-					state.mqttClient.on("reconnect", function () {
-						console.log("reconnect success!");
-
-					});
-				}
-			}
-		},
-		//断开mqtt的连接
-		disconnect({ state, commit }, isRelease) {
-			console.log('disconnect')
-			if (state.mqttClient) {
-				state.mqttClient.end(false, () => {
-					console.log(`state.mqttClient.connected = ${state.mqttClient.connected}`);
-				})
-			}
-			if (isRelease) {
-				//清除数据
-				commit('release')
-			}
-		},
-		//发布消息
-		publishMsg({ state, dispatch, getters }, msg) {
-			let uuid = msg.uuid
-			let type = msg.mqttType;
-			let other = msg.other;
-			if (!getters.connected) {
-				return new Promise((resolve, reject) => {
-					reject('连接已断开')
-				});
-			} else {
-				let index = indexOfUuid(state.deviceList,uuid)
-				if (index >= 0) {
-					let device = state.deviceList[index];
-					if(device.online){
-						let topic = `/${uuid}/user/sub_control`;
-						let json = {
-							'DstDeviceName': uuid,
-							'SrcDeviceName': options.clientId,
-							'type': type,
-						}
-						if (other) {
-							json.other = other
-						}
-						let payload = JSON.stringify(json)
-						console.log(`publishWithType topic = ${topic} payload = ${payload}`);
-						return dispatch('publish', { topic, payload })
-					}else{
-						return new Promise((resolve, reject) => {
-							reject('设备已经离线')
-						});
-					}
-				}else{
-					return new Promise((resolve, reject) => {
-						reject('没有此设备')
-					});
-				}
-			}
-		},
-
-		//发布消息
-		publishWithType({ state, dispatch, getters }, payload) {
-			//console.log(payload);
-			//console.log(options);
-			let type = payload.mqttType;
-			let other = payload.other;
-			if (!getters.connected) {
-				return new Promise((resolve, reject) => {
-					reject('连接已断开')
-				});
-			} else if (!(state.currentDevice && state.currentDevice.online)) {
-				return new Promise((resolve, reject) => {
-					reject('设备已经离线')
-				});
-			} else {
-				let topic = `/${state.currentDevice.uuid}/user/sub_control`;
-				//console.log(payload);
-				//console.log(payload.mqttType);
-				let json = {
-					'DstDeviceName': state.currentDevice.uuid,
-					'SrcDeviceName': options.clientId,
-					'type': type,
-				}
-				if (other) {
-					json.other = other
-				}
-				let payload = JSON.stringify(json)
-				console.log(`publishWithType topic = ${topic} payload = ${payload}`);
-				return dispatch('publish', { topic, payload })
-
-			}
-
-		},
-
-		//发布消息
-		publish({ state, commit, getters }, message) {
-			console.log('publish');
-			console.log(message);
-			return new Promise((resolve, reject) => {
-				if (getters.connected) {
-					//发布消息
-					state.mqttClient.publish(message.topic, message.payload, (err) => {
-						if (err) {
-							console.warn(err);
-							reject(err)
-						} else {
-							resolve()
-						}
-					})
-				} else {
-					reject("mqttClient is not connected")
-				}
-			})
-		},
-		//订阅消息
-		subscribe({ state, commit, getters }, topic) {
-			console.log(`subscribe topic = ${topic}`);
-			return new Promise((resolve, reject) => {
-				if (getters.connected) {
-					//发布消息
-					state.mqttClient.subscribe(topic, (err) => {
-						if (err) {
-							console.log(err);
-							reject(err)
-						} else {
-							resolve()
-						}
-					})
-				} else {
-					reject("mqttClient is not connected")
-				}
-			})
-		},
-		//解除订阅消息
-		unsubscribe({ state, commit, getters }, topic) {
-			console.log(`unsubscribe topic = ${topic}`);
-			return new Promise((resolve, reject) => {
-				if (getters.connected) {
-					//发布消息
-					state.mqttClient.unsubscribe(topic, (err) => {
-						if (err) {
-							console.log(err);
-							reject(err)
-						} else {
-							resolve()
-						}
-					})
-				} else {
-					reject("mqttClient is not connected")
-				}
-			})
-		}
-
-	}
+    namespaced: true,
+    state: {
+        //当前选择的设备
+        currentDevice: null,
+        //用户设备列表
+        deviceList: [],
+        //mqtt客户端
+        mqttClient: null,
+        //收到的消息的历史记录
+        msgList: [],
+        //设备的播放信息
+        playInfo: {
+            title: "",
+            artist: "",
+            albumURI: "",
+            songInfoID: "",
+            songAlbumID: "",
+            Duration: 0,
+            channel: 1,
+            audioType: 1,
+            PlayState: 3,
+            PlayMode: 0
+
+        }
+
+    },
+    getters: {
+        //mqtt连接状态
+        connected: state => {
+            return state.mqttClient && state.mqttClient.connected
+        },
+        //更具index找到对应的设备
+        getDeviceByIndex: (state) => (index) => {
+            if (index < 0 || index >= state.deviceList.length) {
+                return null
+            } else {
+                return state.deviceList[index]
+            }
+        },
+        //根据uuid找到对应的设备
+        getDeviceById: (state) => (uuid) => {
+            return state.deviceList.find(todo => todo.uuid === uuid)
+        }
+
+    },
+    mutations: {
+        //添加设备
+        addDevice(state, device) {
+            state.deviceList.push(device)
+        },
+        //设置当前选择的设备
+        setCurrentDevice(state, device) {
+            //state.currentDevice = device
+            Vue.set(state, 'currentDevice', device)
+        },
+        //移除设备
+        removeDevice(state, device) {
+            let index = state.deviceList.indexOf(device)
+            state.deviceList.slice(index, 1)
+        },
+        //连接mqtt服务器 clientId为wx_加上用户的uid
+        connect(state, clientId) {
+            console.log(`connect clientId = ${clientId}`);
+            options.clientId = clientId
+            state.mqttClient = mqtt.connect(url, options)
+        },
+        //token失效，退出登录，需要清除数据
+        release(state) {
+            state.deviceList = []
+            state.currentDevice = null
+            state.mqttClient = null
+        },
+        //更新设备信息
+        updateDevice(state, data) {
+            Vue.set(state.deviceList, data.index, data.device)
+        },
+        //更新播放信息
+        updatePlayInfo(state, playinfo) {
+            state.playInfo = playinfo
+        }
+
+    },
+    actions: {
+        //添加设备
+        addDevice({ state, dispatch, commit, getters }, data) {
+            let clientId = (data.clientId) ? data.clientId : options.clientId
+            let device = data.device
+
+            console.log(`deviceList = ${state.deviceList} device = ${device}`);
+            //判断设备是否存在deviceList中
+            let findDevice = state.deviceList.find((item) => {
+                return item.uuid === device.uuid
+            })
+            if (findDevice == null) {
+                if (state.deviceList.length === 0) {
+                    //设置当前的设备为添加的设备
+                    commit('setCurrentDevice', device)
+                }
+                //添加设备
+                state.deviceList.push(device)
+                    //如果已经连接
+                if (getters.connected) {
+                    //订阅设备是否在线
+                    subscribeDevicesStatus(dispatch, [device])
+                        //if (state.currentDevice && state.currentDevice.uuid === device.uuid) {
+                        //订阅当前设备的消息
+                        //subscribeCurrDevice(dispatch, state.currentDevice)
+                        //}
+
+                } else { //如果没有连接
+                    //连接服务器
+                    dispatch('connect', clientId)
+                }
+
+            }
+        },
+        //删除设备
+        removeDevice({ state, dispatch, commit, getters }, device) {
+            //判断设备是否存在deviceList中
+            let findDevice = state.deviceList.find((item) => {
+                return item.uuid === device.uuid
+            })
+            if (findDevice) {
+                //取消此设备的订阅
+                let topic = `/${device.uuid}/status/onoffline`
+                dispatch('unsubscribe', topic)
+                topic = `/${device.uuid}/status/pub_response`
+                dispatch('unsubscribe', topic)
+                    //在设备列表中删除此设备
+                commit('removeDevice', findDevice)
+                    //如果删除的是选中的设备
+                if (currentDevice && state.currentDevice.uuid == device.uuid) {
+                    //清除当前选中的设备 todo 还是自动选中在线的设备
+                    commit('setCurrentDevice', null)
+                }
+
+                if (state.deviceList.length === 0) { //所有的设备都已经删除,关闭连接
+                    dispatch('disconnect')
+                }
+            }
+        },
+
+        //连接设备
+        connect({ state, dispatch, commit, getters }, clientId) {
+            if (state.mqttClient == null) {
+                //连接服务器
+                commit('connect', clientId)
+                    //连接成功回调
+                state.mqttClient.on("connect", function() {
+                    console.log("connect success!");
+                    //订阅设备是否在线
+                    subscribeDevicesStatus(dispatch, state.deviceList)
+                        //订阅当前设备的消息
+                        //subscribeCurrDevice(dispatch, state.currentDevice)
+                });
+
+                //异常回调
+                state.mqttClient.on("error", function(err) {
+                    console.log(err);
+                });
+
+                state.mqttClient.on('offline', function() {
+
+                    console.log(`offline callback`);
+                })
+
+                state.mqttClient.on('end', function() {
+
+                        console.log(`end callback`);
+                    })
+                    //网络断开的回调
+                state.mqttClient.on('close', function() {
+                        console.log(`close callback`);
+                    })
+                    //收到消息的回调
+                state.mqttClient.on('message', function(topic, message) {
+                    console.log(`message = ${message.toString()}`);
+                    //解析收到的消息
+                    messageParse({ state, dispatch, commit, getters }, topic, message)
+
+                    //这是测试的
+                    state.msgList.push({
+                        topic: topic.toString(),
+                        msg: message.toString(),
+                    });
+
+
+
+                })
+            } else {
+                if (!state.mqttClient.connected) {
+                    console.log("reconnect");
+                    state.mqttClient.reconnect()
+                        //重连成功的回调
+                    state.mqttClient.on("reconnect", function() {
+                        console.log("reconnect success!");
+
+                    });
+                }
+            }
+        },
+        //断开mqtt的连接
+        disconnect({ state, commit }, isRelease) {
+            console.log('disconnect')
+            if (state.mqttClient) {
+                state.mqttClient.end(false, () => {
+                    console.log(`state.mqttClient.connected = ${state.mqttClient.connected}`);
+                })
+            }
+            if (isRelease) {
+                //清除数据
+                commit('release')
+            }
+        },
+        //发布消息
+        publishMsg({ state, dispatch, getters }, msg) {
+            let uuid = msg.uuid
+            let type = msg.mqttType;
+            let other = msg.other;
+            if (!getters.connected) {
+                return new Promise((resolve, reject) => {
+                    reject('连接已断开')
+                });
+            } else {
+                let index = indexOfUuid(state.deviceList, uuid)
+                if (index >= 0) {
+                    let device = state.deviceList[index];
+                    if (device.online) {
+                        let topic = `/${uuid}/user/sub_control`;
+                        let json = {
+                            'DstDeviceName': uuid,
+                            'SrcDeviceName': options.clientId,
+                            'type': type,
+                        }
+                        if (other) {
+                            json.other = other
+                        }
+                        let payload = JSON.stringify(json)
+                        console.log(`publishWithType topic = ${topic} payload = ${payload}`);
+                        return dispatch('publish', { topic, payload })
+                    } else {
+                        return new Promise((resolve, reject) => {
+                            reject('设备已经离线')
+                        });
+                    }
+                } else {
+                    return new Promise((resolve, reject) => {
+                        reject('没有此设备')
+                    });
+                }
+            }
+        },
+
+        //发布消息
+        publishWithType({ state, dispatch, getters }, payload) {
+            //console.log(payload);
+            //console.log(options);
+            let type = payload.mqttType;
+            let other = payload.other;
+            if (!getters.connected) {
+                return new Promise((resolve, reject) => {
+                    reject('连接已断开')
+                });
+            } else if (!(state.currentDevice && state.currentDevice.online)) {
+                return new Promise((resolve, reject) => {
+                    reject('设备已经离线')
+                });
+            } else {
+                let topic = `/${state.currentDevice.uuid}/user/sub_control`;
+                //console.log(payload);
+                //console.log(payload.mqttType);
+                let json = {
+                    'DstDeviceName': state.currentDevice.uuid,
+                    'SrcDeviceName': options.clientId,
+                    'type': type,
+                }
+                if (other) {
+                    json.other = other
+                }
+                let payload = JSON.stringify(json)
+                console.log(`publishWithType topic = ${topic} payload = ${payload}`);
+                return dispatch('publish', { topic, payload })
+
+            }
+
+        },
+
+        //发布消息
+        publish({ state, commit, getters }, message) {
+            console.log('publish');
+            console.log(message);
+            return new Promise((resolve, reject) => {
+                if (getters.connected) {
+                    //发布消息
+                    state.mqttClient.publish(message.topic, message.payload, (err) => {
+                        if (err) {
+                            console.warn(err);
+                            reject(err)
+                        } else {
+                            resolve()
+                        }
+                    })
+                } else {
+                    reject("mqttClient is not connected")
+                }
+            })
+        },
+        //订阅消息
+        subscribe({ state, commit, getters }, topic) {
+            console.log(`subscribe topic = ${topic}`);
+            return new Promise((resolve, reject) => {
+                if (getters.connected) {
+                    //发布消息
+                    state.mqttClient.subscribe(topic, (err) => {
+                        if (err) {
+                            console.log(err);
+                            reject(err)
+                        } else {
+                            resolve()
+                        }
+                    })
+                } else {
+                    reject("mqttClient is not connected")
+                }
+            })
+        },
+        //解除订阅消息
+        unsubscribe({ state, commit, getters }, topic) {
+            console.log(`unsubscribe topic = ${topic}`);
+            return new Promise((resolve, reject) => {
+                if (getters.connected) {
+                    //发布消息
+                    state.mqttClient.unsubscribe(topic, (err) => {
+                        if (err) {
+                            console.log(err);
+                            reject(err)
+                        } else {
+                            resolve()
+                        }
+                    })
+                } else {
+                    reject("mqttClient is not connected")
+                }
+            })
+        }
+
+    }
 
 }