houjie 4 years ago
parent
commit
5e6f3b5c3e

+ 16 - 5
components/deviceCard/deviceCard.vue

@@ -1,9 +1,10 @@
 <template>
-  <view class="box">
+  <view class="box"  @click="goDeviceInfo">
     <view class="topBox">
-      <text>{{device.name}}</text>
+      <text>{{device.devName}}</text>
       <text>{{device.online ? '在线':'离线'}}</text>
     </view>
+    <text>电量:{{device.Power}}%</text>
     <text class="iccid" space="ensp">uuid: {{device.uuid}}</text>
   </view>
 </template>
@@ -24,7 +25,17 @@ export default {
   },
   data: () => ({}),
   computed: {},
-  methods: {},
+  methods: {
+    goDeviceInfo() {
+      console.log("goDeviceInfo");
+      uni.navigateTo({
+        url: "../deviceInfo/deviceInfo",
+        complete(res){
+          console.warn(res);
+        }
+      });
+    },
+  },
   watch: {},
 
   // 组件周期函数--监听组件挂载完毕
@@ -44,8 +55,8 @@ export default {
   display: flex;
   flex-direction:column;
   justify-content: space-between;
-  width: 35vw;
-  height: 18vw;
+  width: 40vw;
+  height: 25vw;
   border: 1rpx solid #333333;
 }
 .topBox{

+ 3 - 0
pages.json

@@ -64,6 +64,9 @@
 			"style":{
 				"onReachBottomDistance": 80
 			}
+		},
+		{
+			"path" : "pages/deviceInfo/deviceInfo"
 		}
     ],
 	"dependencies": {

+ 101 - 0
pages/deviceInfo/deviceInfo.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="device-info">
+    <text v-for="(item,index) in infoList" :key="index" space="ensp" class="t">
+      {{item.key}} : {{item.element}}
+    </text>
+
+  </view>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  data: () => ({
+    index:0,
+    list:[]
+  }),
+  computed: {
+    infoList(){
+      if(this.$store.state.moduleMqtt.deviceList.length > this.index){
+        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,
+              element,
+            })
+          }
+        }
+        
+        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()
+  },
+  // 页面周期函数--监听页面初次渲染完成
+  onReady() {},
+  // 页面周期函数--监听页面显示(not-nvue)
+  onShow() {},
+  // 页面周期函数--监听页面隐藏
+  onHide() {},
+  // 页面周期函数--监听页面卸载
+  onUnload() {},
+  // 页面处理函数--监听用户下拉动作
+  onPullDownRefresh() {
+    uni.stopPullDownRefresh();
+  },
+  // 页面处理函数--监听用户上拉触底
+  onReachBottom() {},
+  // 页面处理函数--监听页面滚动(not-nvue)
+  /* onPageScroll(event) {}, */
+  // 页面处理函数--用户点击右上角分享
+  /* onShareAppMessage(options) {}, */
+};
+</script>
+
+<style>
+.device-info{
+  display: flex;
+  flex-direction: column;
+}
+.t{
+  margin: 10rpx;
+}
+</style>

+ 78 - 32
pages/index/device.vue

@@ -1,27 +1,31 @@
 <template>
   <view class="content">
-    <view class="dbox">
+    <!-- <view class="dbox">
       <button @click="addDevice">添加设备</button>
-      <!-- <button @click="getPlayInfo">获取播放信息</button> -->
+      <button @click="getPlayInfo">获取播放信息</button>
       <button @click="getDeviceInfo">获取设备信息</button>
-    </view>
+    </view> -->
     <view class="dbox">
+      <button @click="addDevice" class="btn">+</button>
       <device-card
         v-for="(device, index) in deviceList"
         :key="index"
         :device="device"
+       
       ></device-card>
-      <!-- <text v-for="(device, index) in deviceList" :key="index" space="ensp"
-        >{{ device.name }} {{ device.online }}</text
-      > -->
+      <!-- <device-card v-if="currentDevice" :device="currentDevice"/> -->
     </view>
     <view class="play-info">
       <image class="play-thmub" :src="playInfo.albumURI" mode="aspectFit" />
-      <text style="margin-top: 30rpx">{{ playInfo.title }}</text>
-      <text style="margin-top: 30rpx">{{ playInfo.artist }}</text>
+      <text style="margin-top: 20rpx">{{ playInfo.title }}</text>
+      <text style="margin-top: 20rpx">{{ playInfo.artist }}</text>
     </view>
     <view class="play-ctrl">
-      <image src="../../static/image/play/previous.png" class="next-icon" @click="previous"/>
+      <image
+        src="../../static/image/play/previous.png"
+        class="next-icon"
+        @click="previous"
+      />
       <image
         v-if="playInfo.PlayState != 1"
         src="../../static/image/play/play.png"
@@ -34,13 +38,32 @@
         class="next-icon"
         @click="pause"
       />
-      <image src="../../static/image/play/next.png" class="next-icon" @click="next"/>
-      
+      <image
+        src="../../static/image/play/next.png"
+        class="next-icon"
+        @click="next"
+      />
     </view>
-    <text style="margin-top: 30rpx; margin-left:50rpx">音量</text>
-    <slider value="20" class="progress"  min="0" max="100" step="1" @change="setVolume" show-value></slider>
-    <text style="margin-top: 30rpx; margin-left:50rpx">频道</text>
-    <slider :value="playInfo.channel" class="progress"  min="0" max="11" step="1" @change="setChannel" show-value></slider>
+    <text style="margin-top: 20rpx; margin-left: 50rpx">音量</text>
+    <slider
+      :value="currentDevice && currentDevice.Volume ? currentDevice.Volume : 0"
+      class="progress"
+      min="0"
+      max="100"
+      step="1"
+      @change="setVolume"
+      show-value
+    ></slider>
+    <text style="margin-top: 10rpx; margin-left: 50rpx">频道</text>
+    <slider
+      :value="playInfo.channel"
+      class="progress"
+      min="0"
+      max="11"
+      step="1"
+      @change="setChannel"
+      show-value
+    ></slider>
   </view>
 </template>
 
@@ -72,7 +95,7 @@ export default {
         type: "moduleMqtt/addDevice",
         clientId: "wx_650633",
         device: {
-          name: "MW-M3",
+          devName: "MW-V",
           uuid: "89860474192070498495",
         },
       });
@@ -150,40 +173,51 @@ export default {
         });
     },
     //设置音量
-    setVolume(event){
+    setVolume(event) {
       console.log(event.target.value);
       this.$store
         .dispatch({
           type: "moduleMqtt/publishWithType",
           mqttType: "volume_set",
-          other:{
-            'volume':event.target.value
-          }
+          other: {
+            volume: event.target.value,
+          },
         })
         .then((result) => {})
         .catch((err) => {
           console.warn(err);
         });
-
     },
     //设置频道
-    setChannel(event){
+    setChannel(event) {
       console.log(event.target.value);
       this.$store
         .dispatch({
           type: "moduleMqtt/publishWithType",
           mqttType: "play",
-          other:{
-            'user_id':'650633',
-            'timestamp':'1560652541',
-            'channel_id':event.target.value+''
-          }
+          other: {
+            user_id: "650633",
+            timestamp: "", //暂时没有时间戳,先不填
+            channel_id: event.target.value + "",
+            url: "",
+            media_data: "",
+            order: "",
+            resource_from: "",
+          },
         })
         .then((result) => {})
         .catch((err) => {
           console.warn(err);
         });
-
+    },
+    goDeviceInfo() {
+      console.log("goDeviceInfo");
+      uni.navigateTo({
+        url: "../deviceInfo/deviceInfo",
+        complete(res){
+          console.warn(res);
+        }
+      });
     },
     godoBle() {
       //添加设备
@@ -210,6 +244,7 @@ export default {
     ...mapState({
       deviceList: (state) => state.moduleMqtt.deviceList,
       playInfo: (state) => state.moduleMqtt.playInfo,
+      currentDevice: (state) => state.moduleMqtt.currentDevice,
     }),
   },
 };
@@ -217,7 +252,6 @@ export default {
 
 <style>
 .content {
-  margin: 10rpx;
   display: flex;
   flex-direction: column;
 }
@@ -229,6 +263,20 @@ export default {
 .dbox {
   display: flex;
   flex-direction: row;
+  width: 100vw;
+  justify-content: flex-start;
+}
+.btn {
+  margin-left: 0rpx;
+  margin-right: 10rpx;
+  width: 160rpx;
+  height: 25vw;
+  /* display: flex; */
+  /* justify-content: center;
+  align-items: center; */
+  line-height: 25vw;
+  border: 1rpx solid #333333;
+  font-size: 120rpx;
 }
 .text1 {
   width: 150px;
@@ -254,10 +302,8 @@ export default {
   width: 54rpx;
   height: 60rpx;
 }
-.progress{
+.progress {
   align-self: center;
   width: 80vw;
- 
 }
-
 </style>

+ 4 - 5
store/modules/moduleMqtt.js

@@ -75,7 +75,8 @@ export default {
 		},
 		//设置当前选择的设备
 		setCurrentDevice(state, device) {
-			state.currentDevice = device
+			//state.currentDevice = device
+			Vue.set(state,'currentDevice',device)
 		},
 		//移除设备
 		removeDevice(state, device) {
@@ -94,11 +95,9 @@ export default {
 			state.currentDevice = null
 			state.mqttClient = null
 		},
-		//设置设备的在线状态
-		updateDeviceState(state,data){
+		//更新设备信息
+		updateDevice(state,data){
 			Vue.set(state.deviceList,data.index,data.device)
-			//state.deviceList[data.index] = {...state.deviceList[data.index], online:data.online}
-			//state.deviceList[data.index].online = data.online
 		},
 		//更新播放信息
 		updatePlayInfo(state,playinfo){

+ 76 - 45
store/modules/mqttParse.js

@@ -1,11 +1,11 @@
-function isEmpty(str){
-    if(str){
+function isEmpty(str) {
+    if (str) {
         return true
     }
-    if(!str.length){
+    if (!str.length) {
         return true
     }
-    if(str == 'unknow'){
+    if (str == 'unknow') {
         return true
     }
     return false
@@ -18,46 +18,46 @@ function isEmpty(str){
  * @param {*} topic 
  * @param {*} message 
  */
-function receiveOnOffline({state, dispatch,commit},fromDeviceUuid, message){
-    
+function receiveOnOffline({ state, dispatch, commit }, fromDeviceUuid, message) {
+
     let index = -1
     for (var i = 0; i < state.deviceList.length; i++) {
-        if(state.deviceList[i].uuid === fromDeviceUuid){
+        if (state.deviceList[i].uuid === fromDeviceUuid) {
             index = i;
             break
         }
     }
     console.log(`state index = ${index}`);
-    if(index >= 0){
+    if (index >= 0) {
         let stateJson = JSON.parse(message)
         //console.log(stateJson);
-        let device = state.deviceList[i];
+        let device = state.deviceList[index];
         //设备在线
-        if(stateJson.state === 'online'){
+        if (stateJson.state === 'online') {
             device.online = true
             //更新设备状态信息
-            commit('updateDeviceState',{index,device})
-            //commit('updateDeviceState',{index,online:true})
-            //state.deviceList[index].online = true
-            if(state.currentDevice && state.currentDevice.uuid == device.uuid){ //当前设备在线
-                //延时获取播放信息
-                setTimeout(function() {
+            commit('updateDevice', { index, device })
+            if (state.currentDevice && state.currentDevice.uuid == device.uuid) { //当前设备在线
+                //延时获取设备信息和播放信息
+                setTimeout(async function () {
+                    await dispatch({
+                        type: 'publishWithType',
+                        mqttType: 'get_dev_info',
+                    })
                     dispatch({
-                        type:'publishWithType',
-                        mqttType:'get_position',
+                        type: "publishWithType",
+                        mqttType: "get_position",
                     })
                 }, 200);
-                
+
             }
-        }else{
+        } else {
             device.online = false
             //更新设备状态信息
-            commit('updateDeviceState',{index,device})
-            //commit('updateDeviceState',{index,online:true})
-            //state.deviceList[index].online = false
+            commit('updateDevice', { index, device })
         }
         //发送通知
-        uni.$emit('mqtt_onoffline',stateJson)
+        uni.$emit('mqtt_onoffline', stateJson)
         // state.deviceList.forEach(element => {
         // 	console.log(`online = ${element.online}`);
         //   });
@@ -69,18 +69,18 @@ function receiveOnOffline({state, dispatch,commit},fromDeviceUuid, message){
  * @param {*} param0 
  * @param {*} jsonPayload 
  */
-function updatePlayInfo({commit}, jsonPayload){
-    if(jsonPayload.other){
+function updatePlayInfo({ commit }, jsonPayload) {
+    if (jsonPayload.other) {
         let playinfo = jsonPayload.other
-        
-        if(isEmpty(playinfo.title)){
+
+        if (isEmpty(playinfo.title)) {
             playinfo.title = '猫王妙播'
         }
-        if(isEmpty(playinfo.albumURI)){
-            playinfo.albumURI =  "https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/bg_place_holder.png"
+        if (isEmpty(playinfo.albumURI)) {
+            playinfo.albumURI = "https://airsmart-photo1.oss-cn-shanghai.aliyuncs.com/wx/bg_place_holder.png"
         }
 
-        commit('updatePlayInfo',playinfo)
+        commit('updatePlayInfo', playinfo)
     }
 }
 
@@ -92,38 +92,69 @@ function updatePlayInfo({commit}, jsonPayload){
  * @param {*} topic     主题
  * @param {*} message   playload
  */
-function messageParse({state, dispatch,commit,getters},topic, message){
+function messageParse({ state, dispatch, commit, getters }, topic, message) {
     //console.log(`message = ${message.toString()}`);
+
     let arr = topic.split("/");
-    if(arr.length >1){
+    if (arr.length > 1) {
         let fromDeviceUuid = arr[1]
         //设备在线和离线的消息
-        if(topic.endsWith('onoffline')){
-            receiveOnOffline({state, dispatch,commit},fromDeviceUuid, message)
-            
-        }else{
+        if (topic.endsWith('onoffline')) {
+            receiveOnOffline({ state, dispatch, commit }, fromDeviceUuid, message)
+        }else {
             //收到设备发过来的数据
-            try{
+            try {
                 let jsonObj = JSON.parse(message.toString())
-                if(jsonObj.type){
+                if (jsonObj.type) {
                     //收到播放信息
-                    if(jsonObj.type == 'get_position'){
+                    if (jsonObj.type == 'get_position') {
                         //判断是否是当前选中的设备
-                        if(state.currentDevice && state.currentDevice.uuid == fromDeviceUuid){
+                        if (state.currentDevice && state.currentDevice.uuid == fromDeviceUuid) {
                             //更新播放信息
-                            updatePlayInfo({commit}, jsonObj)
+                            updatePlayInfo({ commit }, jsonObj)
                         }
+                    } else if (jsonObj.type == 'get_dev_info') {
+                        //更新设备信息
+                        updateDeviceInfo({ state,commit }, jsonObj)
                     }
                 }
-            }catch(e){
+            } catch (e) {
                 console.warn(e);
             }
-            
-            
+
+
         }
     }
 }
 
+function updateDeviceInfo({ state, commit }, jsonPayload) {
+    let index = -1
+    for (var i = 0; i < state.deviceList.length; i++) {
+        if (state.deviceList[i].uuid === jsonPayload.SrcDeviceName) {
+            index = i;
+            break
+        }
+    }
+    console.log(`state index = ${index}`);
+    if (index >= 0 && jsonPayload.other) {
+        let device = state.deviceList[index];
+        let nowDevice = jsonPayload.other
+        nowDevice.uuid = device.uuid
+        nowDevice.online = device.online
+        console.log(nowDevice);
+        //更新设备状态信息
+        commit('updateDevice', { index, device:nowDevice })
+        state.deviceList.forEach(element => {
+        	console.log(element);
+          });
+        //更新当前的设备状态信息
+        if(state.currentDevice && state.currentDevice.uuid === device.uuid){
+            commit('setCurrentDevice', nowDevice)
+        }
+
+    }
+}
+
 
 
 module.exports = messageParse