Files
movecheck/API使用说明.md

6.9 KiB
Raw Permalink Blame History

API接口封装使用说明

📋 概述

已为您封装了完整的HTTP请求工具和API接口包括您需要的历史数据接口。

🛠️ 封装内容

1. HTTP请求工具 (src/utils/http.js)

  • 基于uni.request封装的通用HTTP工具类
  • 支持GET、POST、PUT、DELETE请求
  • 支持文件上传和下载
  • 统一的错误处理和日志记录
  • 可配置的基础URL、超时时间、请求头

2. API接口封装 (src/utils/api.js)

  • 统一管理所有API接口
  • 包含历史数据、设备、环境参数、报警、日志、用户等接口
  • 模块化设计,便于维护和扩展

3. 全局注册 (src/main.js)

  • 将HTTP服务和API注册为全局属性
  • 在Vue组件中可直接使用this.$httpthis.$api

🎯 历史数据接口

接口信息

  • URL: http://110.40.171.179:7999/api/data/history
  • 方法: POST
  • 入参:
{
  "startTime": "2025-09-30 06:51:40",
  "endTime": "2025-09-30 23:51:40"
}

使用方式

方式1: 直接使用API

import { dataHistoryApi } from '@/utils/api.js'

// 获取历史数据
const getHistoryData = async () => {
  try {
    const response = await dataHistoryApi.getHistory({
      startTime: "2025-09-30 06:51:40",
      endTime: "2025-09-30 23:51:40"
    })
    console.log('历史数据:', response)
  } catch (error) {
    console.error('获取失败:', error)
  }
}

方式2: 在Vue组件中使用

export default {
  data() {
    return {
      historyData: []
    }
  },
  methods: {
    async loadHistoryData() {
      try {
        uni.showLoading({
          title: '加载历史数据中...'
        })
        
        const response = await this.$api.dataHistory.getHistory({
          startTime: "2025-09-30 06:51:40",
          endTime: "2025-09-30 23:51:40"
        })
        
        if (response.code === 200) {
          this.historyData = response.data
          uni.showToast({
            title: '数据加载成功',
            icon: 'success'
          })
        }
      } catch (error) {
        console.error('加载失败:', error)
        uni.showToast({
          title: error.message || '数据加载失败',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}

方式3: 使用HTTP服务

// 直接使用HTTP服务
const response = await this.$http.post('/api/data/history', {
  startTime: "2025-09-30 06:51:40",
  endTime: "2025-09-30 23:51:40"
})

📚 其他API接口

设备相关接口

// 获取设备详情
const device = await this.$api.device.getDetail('deviceId')

// 获取设备列表
const devices = await this.$api.device.getList({ page: 1, size: 10 })

// 更新设备状态
await this.$api.device.updateStatus('deviceId', 'online')

环境参数接口

// 获取环境参数
const params = await this.$api.environment.getParams()

// 获取环境参数历史
const history = await this.$api.environment.getHistory({
  startTime: "2025-09-30 06:51:40",
  endTime: "2025-09-30 23:51:40"
})

报警相关接口

// 获取报警记录
const alarms = await this.$api.alarm.getRecords({ page: 1, size: 10 })

// 获取报警统计
const statistics = await this.$api.alarm.getStatistics()

// 处理报警
await this.$api.alarm.handleAlarm('alarmId', 'resolved')

系统日志接口

// 获取系统日志
const logs = await this.$api.log.getLogs({ page: 1, size: 10 })

// 获取日志统计
const statistics = await this.$api.log.getStatistics()

用户相关接口

// 用户登录
const loginResult = await this.$api.user.login({
  username: 'admin',
  password: 'password'
})

// 获取用户信息
const userInfo = await this.$api.user.getUserInfo()

// 更新用户信息
await this.$api.user.updateUserInfo({ name: '新用户名' })

⚙️ 配置选项

修改基础URL

// 在main.js中或组件中修改
this.$http.setBaseURL('https://your-api-domain.com')

修改超时时间

this.$http.setTimeout(15000) // 15秒

添加默认请求头

this.$http.setDefaultHeaders({
  'Authorization': 'Bearer your-token',
  'X-Custom-Header': 'custom-value'
})

🔧 错误处理

统一错误处理

try {
  const response = await this.$api.dataHistory.getHistory(params)
  // 处理成功响应
} catch (error) {
  // 统一错误处理
  console.error('API请求失败:', error.message)
  
  // 显示用户友好的错误信息
  uni.showToast({
    title: error.message || '请求失败',
    icon: 'error'
  })
}

自定义错误处理

// 在http.js中可以自定义错误处理逻辑
// 例如:根据错误码显示不同的提示信息

📝 使用示例

完整的使用示例

export default {
  data() {
    return {
      historyData: [],
      loading: false
    }
  },
  
  async onLoad() {
    await this.loadHistoryData()
  },
  
  methods: {
    async loadHistoryData() {
      this.loading = true
      
      try {
        // 获取今天的数据
        const today = new Date()
        const startTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
        const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59)
        
        const response = await this.$api.dataHistory.getHistory({
          startTime: this.formatDateTime(startTime),
          endTime: this.formatDateTime(endTime)
        })
        
        if (response.code === 200) {
          this.historyData = response.data
        } else {
          throw new Error(response.message || '数据加载失败')
        }
        
      } catch (error) {
        console.error('加载历史数据失败:', error)
        uni.showModal({
          title: '提示',
          content: error.message || '数据加载失败,请重试',
          showCancel: false
        })
      } finally {
        this.loading = false
      }
    },
    
    formatDateTime(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  }
}

🎉 总结

现在您可以在项目中使用封装好的API接口

  1. 历史数据接口: this.$api.dataHistory.getHistory(params)
  2. 其他业务接口: 设备、环境、报警、日志、用户等
  3. HTTP服务: this.$http 用于自定义请求
  4. 统一错误处理: 自动处理网络错误和业务错误
  5. 日志记录: 自动记录请求和响应日志

所有接口都已经配置好基础URL http://110.40.171.179:7999,您可以直接使用!