agri-app/pages/demo/index.vue

<template>
  <view class="container">
    <uni-section :title="lastTopic" type="line" padding>
      <uni-grid :column="4" border-color="#03a9f4">
        <uni-grid-item :index="0">
          <view class="grid-item-box">
            <text class="text">{{ temp1 }} </text>
            <text class="text"> 温度1 ℃</text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="1">
          <view class="grid-item-box">
            <text class="text">{{ temp2 }}</text>
            <text class="text"> 温度2 </text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="2">
          <view class="grid-item-box">
            <text class="text">{{ temp3 }}</text>
            <text class="text"> 温度3 </text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="3">
          <view class="grid-item-box">
            <text class="text">{{ temp4 }}</text>
            <text class="text"> 温度4 </text>
          </view>
        </uni-grid-item>
      </uni-grid>
      <uni-grid :column="4" border-color="#03a9f4">
        <uni-grid-item :index="0">
          <view class="grid-item-box">
            <text class="text">{{ humi1 }}</text>
            <text class="text"> 湿度1 </text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="1">
          <view class="grid-item-box">
            <text class="text">{{ humi2 }}</text>
            <text class="text"> 湿度2 </text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="2">
          <view class="grid-item-box">
            <text class="text">{{ humi3 }}</text>
            <text class="text"> 湿度3 </text>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="3">
          <view class="grid-item-box">
            <text class="text">{{ humi4 }}</text>
            <text class="text"> 湿度4 %RH</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
  </view>
</template>

<script>
import mqtt from 'mqtt/dist/mqtt.js' //引入mqtt依赖
// 然后 mqtt.connect(...)

let client = null

export default {
  data() {
    return {
      connected: false,
      temp1: null,
      humi1: null,
      temp2: null,
      humi2: null,
      temp3: null,
      humi3: null,
      temp4: null,
      humi4: null,
      lastTopic: "设备" + '',
      lastRaw: ''
    }
  },
  onLoad() {
    const clientId = 'uniapp_' + Date.now() + '_' + Math.floor(Math.random() * 100000)

    client = mqtt.connect('ws://1.94.254.176:9001', {
      clientId,
      username: 'admin',          // 没有就删
      password: 'Admin#12345678',        // 没有就删
      clean: true,
      reconnectPeriod: 2000,
      connectTimeout: 5000
    })

    client.on('connect', () => {
      this.connected = true
      client.subscribe('dtu/+/up', { qos: 0 })
    })

    client.on('message', (topic, payload) => {
      this.lastTopic = "设备【" + topic+"】"
      const s = payload.toString()
      this.lastRaw = s

      // 只处理JSON（混二进制就直接丢）
      if (!(s.startsWith('{') && s.endsWith('}'))) return
      let obj
      try { obj = JSON.parse(s) } catch(e) { return }

      // 你的键：温度101~104、湿度201~204（按你之前约定温度/10、湿度/10）
      const div10 = (v) => (v == null ? null : Math.round((Number(v)/10)*10)/10)

      this.temp1 = div10(obj["201"]); this.humi1 = div10(obj["101"])
      this.temp2 = div10(obj["202"]); this.humi2 = div10(obj["102"])
      this.temp3 = div10(obj["203"]); this.humi3 = div10(obj["103"])
      this.temp4 = div10(obj["204"]); this.humi4 = div10(obj["104"])
    })

    client.on('close', () => { this.connected = false })
    client.on('error', () => { this.connected = false })
  },
  onUnload() {
    try { client && client.end(true) } catch(e) {}


//     页面上直接展示：
//
// 连接状态 connected
//
//     temp1/humi1 … temp4/humi4
//
//     lastTopic 和 lastRaw（排查时非常有用）
  }
}

</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.text {
  font-size: 22px;
  font-weight: bolder;
  display: inline-block;
}
.text:nth-child(even) {
  font-size: 14px;
  margin-top: 5px;
  color: #9c9c9c;
}

.example-body {
  /* #ifndef APP-NVUE */
  // display: block;
  /* #endif */
}

.grid-dynamic-box {
  margin-bottom: 15px;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-item-box-row {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}


/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
  .swiper {
    height: 630px;
  }
}

@media screen and (min-width: 1425px) {
  .swiper {
    height: 830px;
  }
}

/* #endif */
</style>