Uni-app SDK

<template>
  <view class="page">
    <!-- Tab 切换 -->
    <scroll-view class="detail-tab" :show-scrollbar="false" id="tab-wrap" scroll-x :scroll-left="scrollLeft">
      <view v-for="(item, index) in funcList" :key="item.id" :id="'tab-' + index" class="tab-item"
        :class="{ active: current === index }" @click="changeTab(index)">
        {{ item.title }}
      </view>
    </scroll-view>

    <!-- Swiper 内容 -->
    <swiper class="detail-swiper" :current="current" @change="onSwiperChange" :duration="300">
      <swiper-item v-for="(goods, gIndex) in funcList" :key="goods.id">
        <view class="swiper-list">
          <view class="tool-item" v-for="(err, eIndex) in goods.property" :key="err.id">
            <view class="label">
              {{ err.label}}
            </view>
            <view class="data-value">
              {{ err.value }}{{ err.unit ? ' (' + err.unit + ')' : '' }}
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
  
  <!-- 浮动操作按钮 -->
  <view class="floating-action-btn" @click="openSetting">
    <uni-icons type="gear" size="34" color="#567feb"></uni-icons>
  </view>
  
  <!-- 设置弹窗 -->
  <uni-popup ref="popup" type="top" :safe-area="false">
    <view class="setting-popup">
      <view class="close" @click="closeSetting">
        <uni-icons type="clear" size="30" color="#9e9e9e"></uni-icons>
      </view>
      <view class="title">{{ funcList[current]?.title }}操作</view>
      <view class="list">
        <view class="list-item" v-for="(func, gIndex) in funcList[current]?.function" :key="func.id"
          @click="handleOperationClick(func)">
          <view class="label">
            {{ func.label }}
          </view>
          <view class="data-value">
            {{ func.value }}{{ func.unit ? ' (' + func.unit + ')' : '' }}
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import {
  onShow,
  onLoad
} from '@dcloudio/uni-app'
import {
  ref,
  nextTick,
  getCurrentInstance
} from 'vue'

const {
  proxy
} = getCurrentInstance()
const $ddiot = proxy.$ddiot
const deviceMac = ref('')

/* 数据 */
const funcList = ref([])
const current = ref(0)
const scrollLeft = ref(0)
const websocket = ref(null)
const isConnected = ref(false)

/* popup */
const popup = ref(null)

// 初始化 WebSocket
const initWebSocket = async () => {
  console.log('开始初始化 WebSocket')
  if ($ddiot) {
    try {
      const res = await $ddiot.createSocket('addons')
      console.log('WebSocket 创建结果:', res)
      
      if (res && $ddiot.websocket) {
        websocket.value = $ddiot.websocket
        isConnected.value = true
        
        // 全局消息监听
        websocket.value.on('*', (message) => {
          console.log('全局消息监听message', message)
        })
        
        // 监听临时秘钥响应
        websocket.value.on('temp_secret_res', (message) => {
          console.log('temp_secret_res', message)
          if (message.code === 200) {
            uni.setStorageSync('app_secret', message.data.temp_secret)
          }
        })

        // 监听临时秘钥过期，过期了就重新获取
        websocket.value.on('app_secret_error', (message) => {
          console.log('app_secret_error', message)
          websocket.value.emit("temp-secret", {
            'app_id': $ddiot.appId,
          }, 'auth', 'addons', 'temp-secret')
        })

        // 监听命令响应
        websocket.value.on('command_res', (message) => {
          console.log('command_res', message)
          if (message.code === 200) {
            uni.showLoading({
              title: message.message
            })
            setTimeout(() => {
              uni.hideLoading()
            }, 1000)
          }
        })
        
        // 监听心跳响应
        websocket.value.on('heart_res', (message) => {
          console.log('heart_res', message)
        })

        // 监听操作错误
        websocket.value.on('operation_error', (message) => {
          console.log('operation_error', message)
        })

        // 监听操作成功
        websocket.value.on('operation_success', (message) => {
          console.log('operation_success', message)
          // 删除缓存池该事件消息
          if (websocket.value.removeBufferByEvent) {
            websocket.value.removeBufferByEvent(message.event)
          }
        })

        // 获取临时秘钥
        websocket.value.emit("temp-secret", {
          'app_id': $ddiot.appId,
        }, 'auth', 'addons', 'temp-secret')
      }
    } catch (error) {
      console.error('WebSocket 初始化失败:', error)
    }
  }
}

/* 打开弹窗 */
const openSetting = (err) => {
  popup.value?.open()
}
const closeSetting = () => {
  popup.value?.close()
}

/* tab 切换 */
const changeTab = (index) => {
  setCurrent(index)
}

/* swiper 切换 */
const onSwiperChange = (e) => {
  setCurrent(e.detail.current)
}

const handleOperationClick = (func) => {
  console.log('WebSocket 实例:', websocket.value)
  console.log('WebSocket 连接状态:', isConnected.value)
  
  // 检查 WebSocket 连接是否存在
  if (websocket.value && isConnected.value) {
    // 发送设备控制命令示例
    try {
      websocket.value.emit("operation", {
        "device_id": Number(func.device_id),
        "id": func.instruction_id,
        "imei": func.device_mac,
      }, 'yrddtu', 'dtu', 'command')
    } catch (error) {
      console.error('发送命令失败:', error)
    }
  } else {
    console.log('WebSocket 连接未初始化')
    // 尝试重新连接
    initWebSocket()
  }
}

/* 设置当前项 + tab 自动居中 */
const setCurrent = (index) => {
  current.value = index
  scrollToTab(index)
}

// 获取设备组数据
const getDeviceGroupData = (device_mac) => {
  $ddiot.request('/device/deviceGroup', 'POST', {
    device_mac
  }, true, {
    scene: 'iot'
  }).then(res => {
    funcList.value = res.data.child_device
    nextTick(() => {
      scrollToTab(0)
    })
  })
}

onLoad((options) => {
  deviceMac.value = options.mac || ''
  getDeviceGroupData(options.mac)
  // 初始化 WebSocket 连接
  initWebSocket()
})
</script>