akbleserver/pages/alldevices.uvue

<template>
  <scroll-view
    direction="vertical"
    class="manager-container"
    style="height: 100vh; flex: 1; min-height: 0;"
  >
    <view class="toolbar">
      <button @click="scanDevices" :disabled="scanning">{{ scanning ? '正在扫描...' : '扫描设备' }}</button>
      <button @click="measureAllBatteries">全部测电量</button>
    </view>
   <view class="card-list">
      <RingCard
        v-for="(dev, idx) in devices"
        :key="dev.deviceId"
        :name="dev.name"
        :deviceId="dev.deviceId"
        :isFullscreen="fullscreenDeviceId === dev.deviceId"
        :id="'ring_' + idx"
        @request-fullscreen="handleRequestFullscreen"
        @exit-fullscreen="handleExitFullscreen"
      />
    </view>
	
    <view class="log-section">
      <text>日志：</text>
      <scroll-view scroll-y style="height:120px;">
        <text v-for="(log, idx) in logs" :key="idx" style="font-size:12px;">{{ log }}</text>
      </scroll-view>
    </view>
  </scroll-view>
</template>

<script lang="uts">
	
import RingCard from '@/components/ringcard.uvue'
// #ifdef APP-ANDROID
import { bluetoothService } from '@/uni_modules/ak-sbsrv/utssdk/app-android/index.uts'
// #endif

// #ifdef WEB
import { bluetoothService } from '@/uni_modules/ak-sbsrv/utssdk/web/index.uts'
// #endif
import { PermissionManager } from '@/ak/PermissionManager.uts'
import type { BleDevice } from '@/uni_modules/ak-sbsrv/utssdk/interface.uts'
//import {sqliteContext} from '@/ak/sqlite.uts'

export default {
  components: { RingCard },
  data() {
    return {
      scanning: false,
      devices: [] as BleDevice[],
      logs: [] as string[],
      fullscreenDeviceId: '', // 当前全屏的设备id
      fullscreenElement: null as UniElement | null,
        isFullscreen: false,
        orientation: "landscape",
		  navigationUI:"hide",
    }
  },
  mounted() {
    PermissionManager.requestBluetoothPermissions(() => {});
    bluetoothService.on('deviceFound', (payload) => {
      try {
        console.log('ak deviceFound')
        const device = payload?.device;
        if (device == null || device.deviceId == null) return;
        const name = (device.name != null) ? device.name : '';
        if (name.indexOf('CF') !== 0) return;
        if (this.devices.find(d => d.deviceId === device.deviceId) == null) {
          this.devices.push(device);
          this.log('发现设备: ' + (name !== '' ? name : '未知设备') + ' (' + device.deviceId + ')');
        }
      } catch (err) {
        console.error('deviceFound handler error', err);
      }
    });
    bluetoothService.on('scanFinished', () => {
      this.scanning = false;
      this.log('扫描完成');
    });
    bluetoothService.on('connectionStateChanged', (payload) => {
      console.log('[AKBLE][LOG] 页面收到 connectionStateChanged', payload)
      const { device, state } = payload;
      this.log(`设备 ${device?.deviceId} 连接状态变为: ${state}`);
      // 通知对应的 RingCard 组件
      if (device?.deviceId != null && device.deviceId !== '') {
        const idx = this.devices.findIndex(d => d.deviceId === device!.deviceId);
        if (idx >= 0) {
          const refName = 'ring_' + idx;
          const ringCards = this.$refs[refName] as ComponentPublicInstance[] | ComponentPublicInstance;
          const arr = Array.isArray(ringCards) ? ringCards : [ringCards];
          if (arr.length > 0) {
            const ringCard = arr[0];
            ringCard.$callMethod('onConnectionStateChanged', state);
          }
        }
        //   sqliteContext.executeSql({
        //   sql: `
        //     INSERT INTO ble_event_log (device_id, event_type, timestamp)
        //     VALUES ('${device.deviceId}', '${state}', ${Date.now()})
        //   `,
        //   success: (res) => {
        //     console.log('保存连接日志成功', res);
        //   },
        //   fail: (err) => {
        //     console.error('保存连接日志失败', err);
        //   }
        // });
      }
    });
  },
  methods: {
    log(msg: string) {
      this.logs.unshift(`[${new Date().toTimeString().slice(0,8)}] ${msg}`);
      if (this.logs.length > 100) this.logs.length = 100;
    },
	getCurrentPage() : UniPage {
	  const pages = getCurrentPages()
	  return pages[pages.length - 1]
	},
    scanDevices() {
      this.scanning = true;
      this.devices = [];
      bluetoothService.scanDevices({ protocols: ['BLE'] });
      this.log('开始扫描...');
    },
    async measureAllBatteries() {
      for (let i = 0; i < this.devices.length; i++) {
        const refName = 'ring_' + i;
        const ringCards = this.$refs[refName] as ComponentPublicInstance[] | ComponentPublicInstance;
        const arr = Array.isArray(ringCards) ? ringCards : [ringCards];
        if (arr.length > 0) {
          const ringCard = arr[0];
          try {
            const battery = await ringCard.$callMethod('measureBattery');
            this.log(`设备 ${this.devices[i].deviceId} 电量: ${battery}`);
          } catch (err) {
            this.log('测量电量失败: ' + (err && (err as any).message ? (err as any).message : String(err)));
          }
        }
      }
    },
    onMeasure(deviceId: string) {
      // 记录日志或其它操作
    },
    async handleRequestFullscreen(deviceId: string) {
      this.fullscreenDeviceId = deviceId;
      // 让对应的卡片进入全屏
      const idx = this.devices.findIndex(d => d.deviceId === deviceId);
      if (idx >= 0) {
        const refName = 'ring_' + idx;
        // const ringCards = this.$refs[refName] as UTSArray<ComponentPublicInstance>;
        // if (ringCards.length > 0) {
        //   // @ts-ignore
        //   ringCards[0].$ref.fullscreenCard?.requestFullscreen?.({
        //     navigationUI: "hide",
        //     orientation: "auto"
        //   });
        // }
		console.log(refName)
		 this.fullscreenElement = uni.getElementById(refName) as UniElement;
		 
		 this.fullscreenElement?.requestFullscreen({
		            navigationUI: this.navigationUI,
		            orientation: this.orientation,
		            success: () => {
				          this.fullscreenDeviceId = deviceId;
		             console.log( "全屏")
		            },
		            fail: (err) => {
		              console.log('fail', err)
		            },
		            complete: () => {
		              console.log('complete')
		            }
		          })
      }
    },
    async handleExitFullscreen(deviceId: string) {
      this.fullscreenDeviceId = '';
      // 退出全屏
      const page = this.getCurrentPage();
      page.exitFullscreen(
	  {
	              success: () => {
	                 console.log( "退出全屏")
	              },
	              fail: (err) => {
	                console.log('fail', err)
	              },
	              complete: () => {
	                console.log('complete')
	              }
	            });
    }
  }
}
</script>

<style scoped>
.manager-container {
  padding: 16px;
  box-sizing: border-box;
  height: 100vh;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.toolbar { margin-bottom: 18px; }
.card-list {
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
}
.log-section { margin-top: 18px; }
</style>