MqttDemo/pages/index/device.vue

<template>
  <view class="content">
    <button @click="addDevice">添加设备</button>

    <button @click="getPlayInfo">获取播放信息</button>
    <button @click="getDeviceInfo">获取设备信息</button>
    <view class="dbox">
      <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
      > -->
    </view>
  </view>
</template>

<script>
import deviceCard from "../../components/deviceCard/deviceCard.vue";
import { mapState } from "vuex";
export default {
  components: { deviceCard },
  data() {
    return {
      //deviceList:[]
    };
  },
  onLoad() {
    //this.deviceList = this.$store.state.moduleMqtt.deviceList;
    uni.$on("mqtt_onoffline", this.onofflineCallback);
  },
  onUnload() {
    uni.$off("mqtt_onoffline", this.onofflineCallback);
  },
  methods: {
    onofflineCallback(value) {
      console.log("onofflineCallback");
    },
    //测试添加设备
    addDevice() {
      //添加设备
      this.$store.dispatch({
        type: "moduleMqtt/addDevice",
        clientId: "wx_18126447015",
        device: {
          name: "MW-M3",
          uuid: "89860474192070498495",
        },
      });
    },
    //获取播放信息
    getPlayInfo() {
      this.$store.dispatch({
        type: "moduleMqtt/publishWithType",
        mqttType: "get_position",
      }).then((result) => {
        
      }).catch((err) => {
        console.warn(err);
      });
    },
    //获取播放信息
    getDeviceInfo() {
      this.$store.dispatch({
        type: "moduleMqtt/publishWithType",
        mqttType: "get_dev_info",
      }).then((result) => {
        
      }).catch((err) => {
        console.warn(err);
        
      });
    },
    godoBle() {
      //添加设备
      // #ifdef MP-WEIXIN||APP-PLUS
      uni.navigateTo({
        url: "../ble/ScanBleDevice",
      });
      // #endif
      // #ifdef H5
      uni.navigateTo({
        url: "../ble/ConnectBleDevice",
      });
      // uni.showToast({
      // 	title:'H5页面不支持扫描设备',
      // 	icon:'none'
      // })
      // #endif
    },
  },
  computed: {
    // deviceList() {
    //   return this.$store.state.moduleMqtt.deviceList;
    // },
    ...mapState({
      deviceList: (state) => state.moduleMqtt.deviceList,
    }),
  },
};
</script>

<style>
.content {
  margin: 20rpx;
}
.dbox {
  display: flex;
  flex-direction: row;
}
.text1 {
  width: 150px;
  word-break: break-all;
  /* text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap; */
}
</style>