Mini Shell
| Direktori : / |
|
|
| Current File : //device-api-test.html |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备API测试</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.test-section {
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
.test-section h3 {
margin-top: 0;
color: #333;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background: #0056b3;
}
.result {
margin-top: 15px;
padding: 10px;
background: #f8f9fa;
border-radius: 4px;
white-space: pre-wrap;
font-family: monospace;
font-size: 12px;
max-height: 400px;
overflow-y: auto;
}
.error {
background: #f8d7da;
color: #721c24;
}
.success {
background: #d4edda;
color: #155724;
}
</style>
</head>
<body>
<div class="container">
<h1>设备API测试页面</h1>
<div class="test-section">
<h3>测试设备详情API</h3>
<button onclick="testDeviceDetail(1)">测试设备ID=1</button>
<button onclick="testDeviceDetail(2)">测试设备ID=2</button>
<button onclick="testDeviceDetail(3)">测试设备ID=3</button>
<div id="device-result" class="result"></div>
</div>
<div class="test-section">
<h3>测试设备列表API</h3>
<button onclick="testDeviceList()">获取设备列表</button>
<div id="list-result" class="result"></div>
</div>
</div>
<script>
// 模拟token，实际应用中从localStorage获取
const token = 'test-token';
async function testDeviceDetail(deviceId) {
const resultDiv = document.getElementById('device-result');
resultDiv.textContent = '正在请求...';
resultDiv.className = 'result';
try {
const response = await fetch(`/Tapp/admin/api/mobile/v1/devices/${deviceId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
'Accept': 'application/json'
}
});
const data = await response.json();
resultDiv.textContent = JSON.stringify(data, null, 2);
resultDiv.className = 'result ' + (data.code === 0 ? 'success' : 'error');
// 特别显示用水量数据
if (data.code === 0 && data.data) {
const usageInfo = data.data.usage_info || {};
console.log('用水量数据:', {
today_usage: usageInfo.today_usage,
yesterday_usage: usageInfo.yesterday_usage,
month_usage: usageInfo.month_usage,
total_usage: usageInfo.total_usage,
cumulative_filtration_flow: usageInfo.cumulative_filtration_flow
});
}
} catch (error) {
resultDiv.textContent = '请求失败: ' + error.message;
resultDiv.className = 'result error';
console.error('API请求错误:', error);
}
}
async function testDeviceList() {
const resultDiv = document.getElementById('list-result');
resultDiv.textContent = '正在请求...';
resultDiv.className = 'result';
try {
const response = await fetch('/Tapp/admin/api/mobile/v1/devices', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
'Accept': 'application/json'
}
});
const data = await response.json();
resultDiv.textContent = JSON.stringify(data, null, 2);
resultDiv.className = 'result ' + (data.code === 0 ? 'success' : 'error');
} catch (error) {
resultDiv.textContent = '请求失败: ' + error.message;
resultDiv.className = 'result error';
console.error('API请求错误:', error);
}
}
// 页面加载时自动测试
window.onload = function() {
console.log('页面加载完成，可以开始测试API');
};
</script>
</body>
</html>