|
|
<!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: 1200px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.section {
|
|
|
background: white;
|
|
|
padding: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
|
}
|
|
|
.btn {
|
|
|
background-color: #007bff;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
padding: 10px 20px;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
margin-right: 10px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.btn:hover {
|
|
|
background-color: #0056b3;
|
|
|
}
|
|
|
.btn:disabled {
|
|
|
background-color: #ccc;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
th, td {
|
|
|
border: 1px solid #ddd;
|
|
|
padding: 8px;
|
|
|
text-align: left;
|
|
|
}
|
|
|
th {
|
|
|
background-color: #f8f9fa;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.result {
|
|
|
margin-top: 15px;
|
|
|
padding: 10px;
|
|
|
background-color: #f8f9fa;
|
|
|
border-radius: 4px;
|
|
|
white-space: pre-wrap;
|
|
|
max-height: 400px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
.error {
|
|
|
background-color: #f8d7da;
|
|
|
color: #721c24;
|
|
|
}
|
|
|
.success {
|
|
|
background-color: #d4edda;
|
|
|
color: #155724;
|
|
|
}
|
|
|
input[type="file"] {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<h1>ATC数据处理系统 - API接口测试</h1>
|
|
|
|
|
|
<!-- 文件上传测试 -->
|
|
|
<div class="section">
|
|
|
<h2>1. 文件上传测试</h2>
|
|
|
<input type="file" id="fileInput" accept=".csv,.xlsx,.xls">
|
|
|
<button class="btn" onclick="uploadFile()">上传文件</button>
|
|
|
<div id="uploadResult" class="result"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 原始数据查看 -->
|
|
|
<div class="section">
|
|
|
<h2>2. 原始数据查看（修复后）</h2>
|
|
|
<button class="btn" onclick="getOriginalData()">获取上传的原始数据</button>
|
|
|
<div id="originalDataResult" class="result"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 处理数据查看 -->
|
|
|
<div class="section">
|
|
|
<h2>3. 处理后数据查看</h2>
|
|
|
<button class="btn" onclick="getProcessedData()">获取AI处理后的数据</button>
|
|
|
<div id="processedDataResult" class="result"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 完整处理流程 -->
|
|
|
<div class="section">
|
|
|
<h2>4. 完整处理流程</h2>
|
|
|
<button class="btn" onclick="processData()">执行完整处理</button>
|
|
|
<div id="processResult" class="result"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 统计信息 -->
|
|
|
<div class="section">
|
|
|
<h2>5. 统计信息</h2>
|
|
|
<button class="btn" onclick="getStatistics()">获取统计信息</button>
|
|
|
<div id="statisticsResult" class="result"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
const API_BASE = 'http://127.0.0.1:8000/api';
|
|
|
|
|
|
function showResult(elementId, data, isError = false) {
|
|
|
const element = document.getElementById(elementId);
|
|
|
element.className = `result ${isError ? 'error' : 'success'}`;
|
|
|
|
|
|
if (typeof data === 'object') {
|
|
|
element.textContent = JSON.stringify(data, null, 2);
|
|
|
} else {
|
|
|
element.textContent = data;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function showTable(elementId, data, title = '') {
|
|
|
const element = document.getElementById(elementId);
|
|
|
|
|
|
if (!data || !Array.isArray(data) || data.length === 0) {
|
|
|
element.innerHTML = `<div class="result error">没有数据显示</div>`;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const columns = Object.keys(data[0]);
|
|
|
|
|
|
let html = title ? `<h4>${title}</h4>` : '';
|
|
|
html += '<table><thead><tr>';
|
|
|
columns.forEach(col => {
|
|
|
html += `<th>${col}</th>`;
|
|
|
});
|
|
|
html += '</tr></thead><tbody>';
|
|
|
|
|
|
data.slice(0, 10).forEach(row => { // 只显示前10条
|
|
|
html += '<tr>';
|
|
|
columns.forEach(col => {
|
|
|
html += `<td>${row[col] || '无'}</td>`;
|
|
|
});
|
|
|
html += '</tr>';
|
|
|
});
|
|
|
|
|
|
html += '</tbody></table>';
|
|
|
|
|
|
if (data.length > 10) {
|
|
|
html += `<p>显示前10条，共${data.length}条数据</p>`;
|
|
|
}
|
|
|
|
|
|
element.innerHTML = html;
|
|
|
}
|
|
|
|
|
|
async function uploadFile() {
|
|
|
const fileInput = document.getElementById('fileInput');
|
|
|
const file = fileInput.files[0];
|
|
|
|
|
|
if (!file) {
|
|
|
showResult('uploadResult', '请选择文件', true);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const formData = new FormData();
|
|
|
formData.append('file', file);
|
|
|
|
|
|
try {
|
|
|
const response = await fetch(`${API_BASE}/upload/`, {
|
|
|
method: 'POST',
|
|
|
body: formData
|
|
|
});
|
|
|
|
|
|
const result = await response.json();
|
|
|
showResult('uploadResult', result);
|
|
|
} catch (error) {
|
|
|
showResult('uploadResult', `上传失败: ${error.message}`, true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function getOriginalData() {
|
|
|
try {
|
|
|
const response = await fetch(`${API_BASE}/original-data/`);
|
|
|
const result = await response.json();
|
|
|
|
|
|
if (result.status === 'success' && result.data) {
|
|
|
showTable('originalDataResult', result.data, `原始数据 (${result.count}条)`);
|
|
|
} else {
|
|
|
showResult('originalDataResult', result);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
showResult('originalDataResult', `获取失败: ${error.message}`, true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function getProcessedData() {
|
|
|
try {
|
|
|
const response = await fetch(`${API_BASE}/processed-data/`);
|
|
|
const result = await response.json();
|
|
|
|
|
|
if (result.status === 'success' && result.data) {
|
|
|
showTable('processedDataResult', result.data, `处理后数据 (${result.count}条)`);
|
|
|
} else {
|
|
|
showResult('processedDataResult', result);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
showResult('processedDataResult', `获取失败: ${error.message}`, true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function processData() {
|
|
|
try {
|
|
|
const response = await fetch(`${API_BASE}/process-data/`, {
|
|
|
method: 'POST'
|
|
|
});
|
|
|
|
|
|
const result = await response.json();
|
|
|
showResult('processResult', result);
|
|
|
} catch (error) {
|
|
|
showResult('processResult', `处理失败: ${error.message}`, true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async function getStatistics() {
|
|
|
try {
|
|
|
const response = await fetch(`${API_BASE}/statistics/`);
|
|
|
const result = await response.json();
|
|
|
showResult('statisticsResult', result);
|
|
|
} catch (error) {
|
|
|
showResult('statisticsResult', `获取失败: ${error.message}`, true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 页面加载完成后检查服务器连接
|
|
|
window.onload = async function() {
|
|
|
try {
|
|
|
const response = await fetch(`${API_BASE}/health/`);
|
|
|
const result = await response.json();
|
|
|
|
|
|
if (result.status === 'ok') {
|
|
|
console.log('✅ 后端服务器连接正常');
|
|
|
} else {
|
|
|
console.warn('⚠️ 后端服务器响应异常');
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('❌ 无法连接到后端服务器:', error.message);
|
|
|
alert('警告: 无法连接到后端服务器，请确保Django服务器正在运行');
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
