289 lines
6.9 KiB
Markdown
289 lines
6.9 KiB
Markdown
|
|
# 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.$http`和`this.$api`
|
|||
|
|
|
|||
|
|
## 🎯 历史数据接口
|
|||
|
|
|
|||
|
|
### 接口信息
|
|||
|
|
- **URL**: `http://110.40.171.179:7999/api/data/history`
|
|||
|
|
- **方法**: POST
|
|||
|
|
- **入参**:
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"startTime": "2025-09-30 06:51:40",
|
|||
|
|
"endTime": "2025-09-30 23:51:40"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 使用方式
|
|||
|
|
|
|||
|
|
#### 方式1: 直接使用API
|
|||
|
|
```javascript
|
|||
|
|
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组件中使用
|
|||
|
|
```javascript
|
|||
|
|
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服务
|
|||
|
|
```javascript
|
|||
|
|
// 直接使用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接口
|
|||
|
|
|
|||
|
|
### 设备相关接口
|
|||
|
|
```javascript
|
|||
|
|
// 获取设备详情
|
|||
|
|
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')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 环境参数接口
|
|||
|
|
```javascript
|
|||
|
|
// 获取环境参数
|
|||
|
|
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"
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 报警相关接口
|
|||
|
|
```javascript
|
|||
|
|
// 获取报警记录
|
|||
|
|
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')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 系统日志接口
|
|||
|
|
```javascript
|
|||
|
|
// 获取系统日志
|
|||
|
|
const logs = await this.$api.log.getLogs({ page: 1, size: 10 })
|
|||
|
|
|
|||
|
|
// 获取日志统计
|
|||
|
|
const statistics = await this.$api.log.getStatistics()
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 用户相关接口
|
|||
|
|
```javascript
|
|||
|
|
// 用户登录
|
|||
|
|
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
|
|||
|
|
```javascript
|
|||
|
|
// 在main.js中或组件中修改
|
|||
|
|
this.$http.setBaseURL('https://your-api-domain.com')
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 修改超时时间
|
|||
|
|
```javascript
|
|||
|
|
this.$http.setTimeout(15000) // 15秒
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 添加默认请求头
|
|||
|
|
```javascript
|
|||
|
|
this.$http.setDefaultHeaders({
|
|||
|
|
'Authorization': 'Bearer your-token',
|
|||
|
|
'X-Custom-Header': 'custom-value'
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🔧 错误处理
|
|||
|
|
|
|||
|
|
### 统一错误处理
|
|||
|
|
```javascript
|
|||
|
|
try {
|
|||
|
|
const response = await this.$api.dataHistory.getHistory(params)
|
|||
|
|
// 处理成功响应
|
|||
|
|
} catch (error) {
|
|||
|
|
// 统一错误处理
|
|||
|
|
console.error('API请求失败:', error.message)
|
|||
|
|
|
|||
|
|
// 显示用户友好的错误信息
|
|||
|
|
uni.showToast({
|
|||
|
|
title: error.message || '请求失败',
|
|||
|
|
icon: 'error'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 自定义错误处理
|
|||
|
|
```javascript
|
|||
|
|
// 在http.js中可以自定义错误处理逻辑
|
|||
|
|
// 例如:根据错误码显示不同的提示信息
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📝 使用示例
|
|||
|
|
|
|||
|
|
### 完整的使用示例
|
|||
|
|
```javascript
|
|||
|
|
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`,您可以直接使用!
|