356 行
13 KiB
HTML
356 行
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>电子围栏集成测试</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
margin: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
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: 20px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
}
|
||
.test-section h3 {
|
||
color: #333;
|
||
margin-top: 0;
|
||
}
|
||
.test-result {
|
||
margin-top: 10px;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
}
|
||
.success {
|
||
background-color: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
.error {
|
||
background-color: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
.info {
|
||
background-color: #d1ecf1;
|
||
color: #0c5460;
|
||
border: 1px solid #bee5eb;
|
||
}
|
||
button {
|
||
background-color: #007bff;
|
||
color: white;
|
||
border: none;
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
button:hover {
|
||
background-color: #0056b3;
|
||
}
|
||
input, textarea {
|
||
width: 100%;
|
||
padding: 8px;
|
||
margin: 5px 0;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>电子围栏集成功能测试</h1>
|
||
<p>此页面用于测试在manager.html中集成的电子围栏功能</p>
|
||
|
||
<!-- 测试API连接 -->
|
||
<div class="test-section">
|
||
<h3>1. 测试API连接</h3>
|
||
<p>测试与XcxController中电子围栏API的连接</p>
|
||
<button onclick="testApiConnection()">测试API连接</button>
|
||
<div id="apiResult" class="test-result" style="display:none;"></div>
|
||
</div>
|
||
|
||
<!-- 测试围栏列表获取 -->
|
||
<div class="test-section">
|
||
<h3>2. 测试围栏列表获取</h3>
|
||
<p>测试获取电子围栏列表功能</p>
|
||
<button onclick="testGetFenceList()">获取围栏列表</button>
|
||
<div id="fenceListResult" class="test-result" style="display:none;"></div>
|
||
</div>
|
||
|
||
<!-- 测试围栏添加 -->
|
||
<div class="test-section">
|
||
<h3>3. 测试围栏添加</h3>
|
||
<p>测试添加新的电子围栏</p>
|
||
<div class="form-group">
|
||
<label>围栏名称:</label>
|
||
<input type="text" id="fenceName" value="测试围栏" placeholder="输入围栏名称">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>围栏类型:</label>
|
||
<select id="fenceType">
|
||
<option value="polygon">多边形</option>
|
||
<option value="circle">圆形</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>围栏描述:</label>
|
||
<textarea id="fenceDescription" placeholder="输入围栏描述">这是一个测试围栏</textarea>
|
||
</div>
|
||
<button onclick="testAddFence()">添加测试围栏</button>
|
||
<div id="addFenceResult" class="test-result" style="display:none;"></div>
|
||
</div>
|
||
|
||
<!-- 测试坐标检查 -->
|
||
<div class="test-section">
|
||
<h3>4. 测试坐标点检查</h3>
|
||
<p>测试检查坐标点是否在围栏内</p>
|
||
<div class="form-group">
|
||
<label>纬度:</label>
|
||
<input type="number" id="testLat" value="39.908823" step="0.000001" placeholder="输入纬度">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>经度:</label>
|
||
<input type="number" id="testLng" value="116.397470" step="0.000001" placeholder="输入经度">
|
||
</div>
|
||
<button onclick="testCheckPoint()">检查坐标点</button>
|
||
<div id="checkPointResult" class="test-result" style="display:none;"></div>
|
||
</div>
|
||
|
||
<!-- 测试结果汇总 -->
|
||
<div class="test-section">
|
||
<h3>5. 测试结果汇总</h3>
|
||
<div id="summaryResult" class="test-result info">
|
||
<p>点击上方按钮开始测试各项功能</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let testResults = {
|
||
apiConnection: false,
|
||
getFenceList: false,
|
||
addFence: false,
|
||
checkPoint: false
|
||
};
|
||
|
||
// 显示结果
|
||
function showResult(elementId, message, isSuccess = true) {
|
||
const element = document.getElementById(elementId);
|
||
element.style.display = 'block';
|
||
element.className = 'test-result ' + (isSuccess ? 'success' : 'error');
|
||
element.innerHTML = message;
|
||
}
|
||
|
||
// 更新汇总结果
|
||
function updateSummary() {
|
||
const total = Object.keys(testResults).length;
|
||
const passed = Object.values(testResults).filter(result => result).length;
|
||
const summaryElement = document.getElementById('summaryResult');
|
||
|
||
let summaryHtml = `<h4>测试进度: ${passed}/${total}</h4>`;
|
||
summaryHtml += '<ul>';
|
||
summaryHtml += `<li>API连接测试: ${testResults.apiConnection ? '✅ 通过' : '❌ 未通过'}</li>`;
|
||
summaryHtml += `<li>围栏列表获取: ${testResults.getFenceList ? '✅ 通过' : '❌ 未通过'}</li>`;
|
||
summaryHtml += `<li>围栏添加功能: ${testResults.addFence ? '✅ 通过' : '❌ 未通过'}</li>`;
|
||
summaryHtml += `<li>坐标点检查: ${testResults.checkPoint ? '✅ 通过' : '❌ 未通过'}</li>`;
|
||
summaryHtml += '</ul>';
|
||
|
||
if (passed === total) {
|
||
summaryHtml += '<p style="color: green; font-weight: bold;">🎉 所有测试通过！电子围栏功能集成成功！</p>';
|
||
}
|
||
|
||
summaryElement.innerHTML = summaryHtml;
|
||
}
|
||
|
||
// 测试API连接
|
||
function testApiConnection() {
|
||
showResult('apiResult', '正在测试API连接...', true);
|
||
|
||
// 模拟API连接测试
|
||
fetch('/index.php/Retail/Xcx/getFenceList', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
body: 'page=1&limit=1'
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
testResults.apiConnection = true;
|
||
showResult('apiResult', `✅ API连接成功！<br>响应: ${JSON.stringify(data, null, 2)}`, true);
|
||
updateSummary();
|
||
})
|
||
.catch(error => {
|
||
testResults.apiConnection = false;
|
||
showResult('apiResult', `❌ API连接失败: ${error.message}`, false);
|
||
updateSummary();
|
||
});
|
||
}
|
||
|
||
// 测试获取围栏列表
|
||
function testGetFenceList() {
|
||
showResult('fenceListResult', '正在获取围栏列表...', true);
|
||
|
||
fetch('/index.php/Retail/Xcx/getFenceList', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
body: 'page=1&limit=10'
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 1) {
|
||
testResults.getFenceList = true;
|
||
showResult('fenceListResult', `✅ 围栏列表获取成功！<br>数据: ${JSON.stringify(data, null, 2)}`, true);
|
||
} else {
|
||
testResults.getFenceList = false;
|
||
showResult('fenceListResult', `❌ 围栏列表获取失败: ${data.msg}`, false);
|
||
}
|
||
updateSummary();
|
||
})
|
||
.catch(error => {
|
||
testResults.getFenceList = false;
|
||
showResult('fenceListResult', `❌ 请求失败: ${error.message}`, false);
|
||
updateSummary();
|
||
});
|
||
}
|
||
|
||
// 测试添加围栏
|
||
function testAddFence() {
|
||
const fenceName = document.getElementById('fenceName').value;
|
||
const fenceType = document.getElementById('fenceType').value;
|
||
const fenceDescription = document.getElementById('fenceDescription').value;
|
||
|
||
if (!fenceName) {
|
||
showResult('addFenceResult', '❌ 请输入围栏名称', false);
|
||
return;
|
||
}
|
||
|
||
showResult('addFenceResult', '正在添加测试围栏...', true);
|
||
|
||
// 生成测试围栏数据
|
||
let fenceData;
|
||
if (fenceType === 'polygon') {
|
||
fenceData = JSON.stringify({
|
||
type: 'polygon',
|
||
coordinates: [[
|
||
[116.397470, 39.908823],
|
||
[116.398470, 39.908823],
|
||
[116.398470, 39.909823],
|
||
[116.397470, 39.909823],
|
||
[116.397470, 39.908823]
|
||
]]
|
||
});
|
||
} else {
|
||
fenceData = JSON.stringify({
|
||
type: 'circle',
|
||
center: [116.397470, 39.908823],
|
||
radius: 500
|
||
});
|
||
}
|
||
|
||
const formData = new URLSearchParams();
|
||
formData.append('fence_name', fenceName);
|
||
formData.append('fence_type', fenceType);
|
||
formData.append('fence_data', fenceData);
|
||
formData.append('description', fenceDescription);
|
||
formData.append('status', '1');
|
||
|
||
fetch('/index.php/Retail/Xcx/addFence', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 1) {
|
||
testResults.addFence = true;
|
||
showResult('addFenceResult', `✅ 围栏添加成功！<br>响应: ${JSON.stringify(data, null, 2)}`, true);
|
||
} else {
|
||
testResults.addFence = false;
|
||
showResult('addFenceResult', `❌ 围栏添加失败: ${data.msg}`, false);
|
||
}
|
||
updateSummary();
|
||
})
|
||
.catch(error => {
|
||
testResults.addFence = false;
|
||
showResult('addFenceResult', `❌ 请求失败: ${error.message}`, false);
|
||
updateSummary();
|
||
});
|
||
}
|
||
|
||
// 测试坐标点检查
|
||
function testCheckPoint() {
|
||
const lat = document.getElementById('testLat').value;
|
||
const lng = document.getElementById('testLng').value;
|
||
|
||
if (!lat || !lng) {
|
||
showResult('checkPointResult', '❌ 请输入有效的经纬度', false);
|
||
return;
|
||
}
|
||
|
||
showResult('checkPointResult', '正在检查坐标点...', true);
|
||
|
||
const formData = new URLSearchParams();
|
||
formData.append('latitude', lat);
|
||
formData.append('longitude', lng);
|
||
|
||
fetch('/index.php/Retail/Xcx/checkPointInFence', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
},
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 1) {
|
||
testResults.checkPoint = true;
|
||
showResult('checkPointResult', `✅ 坐标点检查成功！<br>结果: ${JSON.stringify(data, null, 2)}`, true);
|
||
} else {
|
||
testResults.checkPoint = false;
|
||
showResult('checkPointResult', `❌ 坐标点检查失败: ${data.msg}`, false);
|
||
}
|
||
updateSummary();
|
||
})
|
||
.catch(error => {
|
||
testResults.checkPoint = false;
|
||
showResult('checkPointResult', `❌ 请求失败: ${error.message}`, false);
|
||
updateSummary();
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
updateSummary();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |