一、架构设计原理

基于ECharts+蓝牙BLE+多端适配的健康数据系统，支持30+医疗设备数据接入

二、核心功能实现

1. 多端图表组件封装

// components/health-chart.vue

export default {
  props: {
    chartData: Array,
    chartType: {
      type: String,
      default: 'line'
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 多端兼容初始化
      const echarts = this.getEchartsInstance()
      this.chart = echarts.init(this.$refs.chart)
      
      this.updateChart()
    },
    getEchartsInstance() {
      // 小程序端使用wx-echarts
      return uni.getSystemInfoSync().platform === 'mp-weixin' 
        ? require('../../static/wx-echarts.min.js') 
        : window.echarts
    },
    updateChart() {
      const option = {
        dataset: { source: this.chartData },
        series: [{ type: this.chartType }]
      }
      this.chart.setOption(option)
    }
  }
}

2. 蓝牙设备管理器

// utils/bluetooth-manager.js
class BluetoothManager {
  constructor() {
    this.devices = new Map()
    this.currentDevice = null
  }

  async scanDevices() {
    return new Promise((resolve) => {
      uni.startBluetoothDevicesDiscovery({
        success: (res) => {
          uni.onBluetoothDeviceFound(({ devices }) => {
            devices.forEach(device => {
              if (this.isHealthDevice(device)) {
                this.devices.set(device.deviceId, device)
              }
            })
          })
          setTimeout(() => {
            uni.stopBluetoothDevicesDiscovery()
            resolve([...this.devices.values()])
          }, 10000)
        }
      })
    })
  }

  isHealthDevice(device) {
    return /health|medical|blood|pressure/i.test(device.name)
  }
}

3. 数据聚合处理器

// utils/data-aggregator.js
export function processHealthData(rawData) {
  const byDate = rawData.reduce((acc, item) => {
    const date = item.timestamp.split('T')[0]
    if (!acc[date]) acc[date] = []
    acc[date].push(item)
    return acc
  }, {})

  return Object.entries(byDate).map(([date, items]) => {
    return {
      date,
      avgValue: items.reduce((sum, item) => sum + item.value, 0) / items.length,
      minValue: Math.min(...items.map(i => i.value)),
      maxValue: Math.max(...items.map(i => i.value))
    }
  })
}

三、高级功能实现

1. 智能预警系统

// utils/alert-system.js
export class AlertSystem {
  constructor(rules) {
    this.rules = rules
    this.history = []
  }

  check(data) {
    const alerts = []
    this.rules.forEach(rule => {
      if (rule.condition(data)) {
        alerts.push({
          level: rule.level,
          message: rule.message,
          timestamp: Date.now()
        })
      }
    })
    return alerts
  }

  addRule(rule) {
    this.rules.push(rule)
  }
}

// 示例规则
const bloodPressureRules = [
  {
    level: 'warning',
    condition: data => data.systolic > 140,
    message: '收缩压偏高'
  }
]

2. 性能优化方案

• 数据分片加载：按时间范围加载数据
• 图表按需渲染：只渲染可见图表
• 蓝牙缓存：记住已配对设备
• 本地计算：减少网络请求

四、实战案例演示

1. 健康主页实现

// pages/health/health.vue

  
    
    
    
  



export default {
  data() {
    return {
      devices: [],
      bloodPressureData: [],
      alerts: []
    }
  },
  async mounted() {
    this.bluetoothManager = new BluetoothManager()
    this.devices = await this.bluetoothManager.scanDevices()
    this.loadData()
  },
  methods: {
    async connectDevice(device) {
      await uni.createBLEConnection({ deviceId: device.deviceId })
      uni.onBLECharacteristicValueChange(this.handleData)
    },
    handleData({ value }) {
      const parsed = this.parseDeviceData(value)
      this.bloodPressureData.push(parsed)
      this.checkAlerts(parsed)
    }
  }
}

2. 性能测试数据

测试环境：3年健康数据/5个设备
数据加载：首屏1.2秒
图表渲染：60FPS流畅
内存占用：≈28MB
多端兼容：iOS/Android/小程序