修改管理后台
This commit is contained in:
shenquanyi
@@ -1,373 +0,0 @@
|
||||
<!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 {
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.debug-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.debug-section {
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 6px;
|
||||
background: #fafafa;
|
||||
}
|
||||
.debug-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
color: #1890ff;
|
||||
}
|
||||
.debug-info {
|
||||
background: #f0f0f0;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
font-family: 'Courier New', monospace;
|
||||
white-space: pre-wrap;
|
||||
border-left: 4px solid #52c41a;
|
||||
font-size: 13px;
|
||||
}
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.input-item {
|
||||
flex: 1;
|
||||
}
|
||||
.input-item label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.input-item input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input-item input:focus {
|
||||
border-color: #1890ff;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
.test-case {
|
||||
margin-bottom: 10px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.test-case-info {
|
||||
flex: 1;
|
||||
}
|
||||
.test-case-name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.test-case-values {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
button {
|
||||
padding: 6px 12px;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
button:hover {
|
||||
background: #40a9ff;
|
||||
}
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.log-area {
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.clear-btn {
|
||||
background: #ff4d4f;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.clear-btn:hover {
|
||||
background: #ff7875;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="debug-container">
|
||||
<h1>经纬度输入调试工具</h1>
|
||||
|
||||
<!-- 实时输入测试 -->
|
||||
<div class="debug-section">
|
||||
<div class="debug-title">实时输入测试</div>
|
||||
<div class="input-group">
|
||||
<div class="input-item">
|
||||
<label>经度 (Longitude):</label>
|
||||
<input
|
||||
type="text"
|
||||
id="longitude"
|
||||
placeholder="请输入经度 (-180 到 180)"
|
||||
oninput="handleCoordinateInput('longitude', this.value)"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-item">
|
||||
<label>纬度 (Latitude):</label>
|
||||
<input
|
||||
type="text"
|
||||
id="latitude"
|
||||
placeholder="请输入纬度 (-90 到 90)"
|
||||
oninput="handleCoordinateInput('latitude', this.value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="debug-info" id="currentValues">
|
||||
当前值:
|
||||
经度: undefined (类型: undefined)
|
||||
纬度: undefined (类型: undefined)
|
||||
|
||||
提交数据:
|
||||
{}
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 15px;">
|
||||
<button onclick="simulateSubmit()">模拟提交到后端</button>
|
||||
<button onclick="clearCoordinates()" style="margin-left: 10px;">清空坐标</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预设测试用例 -->
|
||||
<div class="debug-section">
|
||||
<div class="debug-title">预设测试用例</div>
|
||||
<div id="testCases"></div>
|
||||
</div>
|
||||
|
||||
<!-- 操作日志 -->
|
||||
<div class="debug-section">
|
||||
<div class="debug-title">操作日志</div>
|
||||
<div class="log-area" id="logArea"></div>
|
||||
<button class="clear-btn" onclick="clearLogs()">清空日志</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 全局状态
|
||||
let formData = {
|
||||
longitude: undefined,
|
||||
latitude: undefined
|
||||
};
|
||||
|
||||
let logs = [];
|
||||
|
||||
const testCases = [
|
||||
{ name: '正常小数', longitude: '106.2400', latitude: '38.4900' },
|
||||
{ name: '整数', longitude: '106', latitude: '38' },
|
||||
{ name: '高精度小数', longitude: '106.234567', latitude: '38.487654' },
|
||||
{ name: '负数', longitude: '-106.2400', latitude: '-38.4900' },
|
||||
{ name: '包含字母', longitude: '106.24abc', latitude: '38.49xyz' },
|
||||
{ name: '多个小数点', longitude: '106.24.56', latitude: '38.49.78' },
|
||||
{ name: '空字符串', longitude: '', latitude: '' },
|
||||
{ name: '只有小数点', longitude: '.', latitude: '.' },
|
||||
{ name: '边界值', longitude: '180.0', latitude: '90.0' },
|
||||
{ name: '超出范围', longitude: '200.0', latitude: '100.0' }
|
||||
];
|
||||
|
||||
// 坐标解析器
|
||||
function parseCoordinate(value) {
|
||||
if (!value) return value;
|
||||
|
||||
// 移除非数字字符，保留小数点和负号
|
||||
const cleaned = value.toString().replace(/[^\d.-]/g, '');
|
||||
|
||||
// 确保只有一个小数点
|
||||
const parts = cleaned.split('.');
|
||||
let result;
|
||||
if (parts.length > 2) {
|
||||
result = parts[0] + '.' + parts.slice(1).join('');
|
||||
} else {
|
||||
result = cleaned;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// 处理坐标输入
|
||||
function handleCoordinateInput(type, value) {
|
||||
log(`${type === 'longitude' ? '经度' : '纬度'}输入: "${value}"`);
|
||||
|
||||
const parsed = parseCoordinate(value);
|
||||
log(`${type === 'longitude' ? '经度' : '纬度'}解析后: "${parsed}"`);
|
||||
|
||||
// 转换为数字
|
||||
const numValue = parsed === '' ? undefined : parseFloat(parsed);
|
||||
formData[type] = isNaN(numValue) ? undefined : numValue;
|
||||
|
||||
log(`${type === 'longitude' ? '经度' : '纬度'}最终值: ${formData[type]} (类型: ${typeof formData[type]})`);
|
||||
|
||||
// 更新输入框显示
|
||||
document.getElementById(type).value = parsed;
|
||||
|
||||
// 更新显示
|
||||
updateDisplay();
|
||||
}
|
||||
|
||||
// 更新显示
|
||||
function updateDisplay() {
|
||||
const currentValuesDiv = document.getElementById('currentValues');
|
||||
const submitData = getSubmitData();
|
||||
|
||||
currentValuesDiv.textContent = `当前值:
|
||||
经度: ${formData.longitude} (类型: ${typeof formData.longitude})
|
||||
纬度: ${formData.latitude} (类型: ${typeof formData.latitude})
|
||||
|
||||
提交数据:
|
||||
${JSON.stringify(submitData, null, 2)}`;
|
||||
}
|
||||
|
||||
// 获取提交数据
|
||||
function getSubmitData() {
|
||||
const submitData = {
|
||||
name: '测试农场',
|
||||
type: 'farm',
|
||||
owner: '测试负责人',
|
||||
phone: '13800138000',
|
||||
address: '测试地址',
|
||||
status: 'active'
|
||||
};
|
||||
|
||||
// 只有当经纬度有效时才添加
|
||||
if (formData.longitude !== undefined && formData.longitude !== null) {
|
||||
submitData.longitude = formData.longitude;
|
||||
}
|
||||
if (formData.latitude !== undefined && formData.latitude !== null) {
|
||||
submitData.latitude = formData.latitude;
|
||||
}
|
||||
|
||||
return submitData;
|
||||
}
|
||||
|
||||
// 应用测试用例
|
||||
function applyTestCase(testCase) {
|
||||
log(`\n=== 应用测试用例: ${testCase.name} ===`);
|
||||
log(`设置经度: "${testCase.longitude}"`);
|
||||
log(`设置纬度: "${testCase.latitude}"`);
|
||||
|
||||
// 设置输入框值并触发处理
|
||||
document.getElementById('longitude').value = testCase.longitude;
|
||||
document.getElementById('latitude').value = testCase.latitude;
|
||||
|
||||
handleCoordinateInput('longitude', testCase.longitude);
|
||||
handleCoordinateInput('latitude', testCase.latitude);
|
||||
}
|
||||
|
||||
// 模拟提交
|
||||
async function simulateSubmit() {
|
||||
log(`\n=== 模拟API提交 ===`);
|
||||
|
||||
const submitData = getSubmitData();
|
||||
log(`提交数据: ${JSON.stringify(submitData, null, 2)}`);
|
||||
|
||||
try {
|
||||
// 模拟API调用
|
||||
const response = await fetch('http://localhost:5350/api/farms', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(submitData)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
log(`API响应成功: ${JSON.stringify(result)}`);
|
||||
alert('提交成功');
|
||||
} catch (error) {
|
||||
log(`API调用失败: ${error.message}`);
|
||||
alert('API调用失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// 清空坐标
|
||||
function clearCoordinates() {
|
||||
formData.longitude = undefined;
|
||||
formData.latitude = undefined;
|
||||
document.getElementById('longitude').value = '';
|
||||
document.getElementById('latitude').value = '';
|
||||
updateDisplay();
|
||||
log('已清空坐标');
|
||||
}
|
||||
|
||||
// 日志功能
|
||||
function log(message) {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
logs.push(`[${timestamp}] ${message}`);
|
||||
updateLogDisplay();
|
||||
}
|
||||
|
||||
function updateLogDisplay() {
|
||||
const logArea = document.getElementById('logArea');
|
||||
logArea.textContent = logs.join('\n');
|
||||
logArea.scrollTop = logArea.scrollHeight;
|
||||
}
|
||||
|
||||
function clearLogs() {
|
||||
logs = [];
|
||||
updateLogDisplay();
|
||||
}
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 渲染测试用例
|
||||
const testCasesDiv = document.getElementById('testCases');
|
||||
testCases.forEach(testCase => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'test-case';
|
||||
div.innerHTML = `
|
||||
<div class="test-case-info">
|
||||
<div class="test-case-name">${testCase.name}</div>
|
||||
<div class="test-case-values">经度: ${testCase.longitude}, 纬度: ${testCase.latitude}</div>
|
||||
</div>
|
||||
<button onclick="applyTestCase({name: '${testCase.name}', longitude: '${testCase.longitude}', latitude: '${testCase.latitude}'})">应用</button>
|
||||
`;
|
||||
testCasesDiv.appendChild(div);
|
||||
});
|
||||
|
||||
log('调试工具已加载');
|
||||
log('请使用测试用例或手动输入来测试经纬度输入框');
|
||||
updateDisplay();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设备数据调试</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>设备数据调试</h1>
|
||||
<div id="result"></div>
|
||||
|
||||
<script>
|
||||
async function testDeviceAPI() {
|
||||
const resultDiv = document.getElementById('result');
|
||||
|
||||
try {
|
||||
console.log('开始测试设备API...');
|
||||
|
||||
// 测试API调用
|
||||
const response = await fetch('http://localhost:5350/api/devices/public');
|
||||
const data = await response.json();
|
||||
|
||||
console.log('API响应:', data);
|
||||
|
||||
// 显示结果
|
||||
const devices = data.data || [];
|
||||
const statusCount = {};
|
||||
devices.forEach(device => {
|
||||
statusCount[device.status] = (statusCount[device.status] || 0) + 1;
|
||||
});
|
||||
|
||||
resultDiv.innerHTML = `
|
||||
<h2>API测试结果</h2>
|
||||
<p><strong>设备总数:</strong> ${devices.length}</p>
|
||||
<p><strong>在线设备:</strong> ${statusCount.online || 0}</p>
|
||||
<p><strong>离线设备:</strong> ${statusCount.offline || 0}</p>
|
||||
<p><strong>维护设备:</strong> ${statusCount.maintenance || 0}</p>
|
||||
<h3>前3个设备:</h3>
|
||||
<pre>${JSON.stringify(devices.slice(0, 3), null, 2)}</pre>
|
||||
`;
|
||||
|
||||
} catch (error) {
|
||||
console.error('API测试失败:', error);
|
||||
resultDiv.innerHTML = `<p style="color: red;">API测试失败: ${error.message}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载后执行测试
|
||||
window.addEventListener('load', testDeviceAPI);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,187 +0,0 @@
|
||||
<!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: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.status {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.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: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
pre {
|
||||
background-color: #f8f9fa;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>用户管理调试页面</h1>
|
||||
|
||||
<div id="tokenStatus" class="status info">
|
||||
检查中...
|
||||
</div>
|
||||
|
||||
<div id="apiStatus" class="status info">
|
||||
等待测试...
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button onclick="checkToken()">检查Token</button>
|
||||
<button onclick="testLogin()">测试登录</button>
|
||||
<button onclick="testUsersAPI()">测试用户API</button>
|
||||
<button onclick="clearToken()">清除Token</button>
|
||||
</div>
|
||||
|
||||
<div id="results">
|
||||
<h3>测试结果:</h3>
|
||||
<pre id="output"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE_URL = 'http://localhost:5350/api';
|
||||
|
||||
function log(message) {
|
||||
const output = document.getElementById('output');
|
||||
output.textContent += new Date().toLocaleTimeString() + ': ' + message + '\n';
|
||||
}
|
||||
|
||||
function checkToken() {
|
||||
const token = localStorage.getItem('token');
|
||||
const tokenStatus = document.getElementById('tokenStatus');
|
||||
|
||||
if (token) {
|
||||
tokenStatus.className = 'status success';
|
||||
tokenStatus.textContent = `Token存在 (长度: ${token.length})`;
|
||||
log('Token存在: ' + token.substring(0, 50) + '...');
|
||||
} else {
|
||||
tokenStatus.className = 'status error';
|
||||
tokenStatus.textContent = 'Token不存在';
|
||||
log('Token不存在');
|
||||
}
|
||||
}
|
||||
|
||||
async function testLogin() {
|
||||
try {
|
||||
log('开始测试登录...');
|
||||
const response = await fetch(`${API_BASE_URL}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: 'admin',
|
||||
password: '123456'
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
log('登录响应: ' + JSON.stringify(data, null, 2));
|
||||
|
||||
if (data.success && data.token) {
|
||||
localStorage.setItem('token', data.token);
|
||||
log('Token已保存到localStorage');
|
||||
checkToken();
|
||||
} else {
|
||||
log('登录失败: ' + data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
log('登录错误: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function testUsersAPI() {
|
||||
try {
|
||||
log('开始测试用户API...');
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
if (!token) {
|
||||
log('错误: 没有找到token，请先登录');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/users`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
log('用户API响应: ' + JSON.stringify(data, null, 2));
|
||||
|
||||
const apiStatus = document.getElementById('apiStatus');
|
||||
if (data.success && data.data) {
|
||||
apiStatus.className = 'status success';
|
||||
apiStatus.textContent = `API正常 (获取到${data.data.length}个用户)`;
|
||||
} else {
|
||||
apiStatus.className = 'status error';
|
||||
apiStatus.textContent = 'API异常';
|
||||
}
|
||||
} catch (error) {
|
||||
log('用户API错误: ' + error.message);
|
||||
const apiStatus = document.getElementById('apiStatus');
|
||||
apiStatus.className = 'status error';
|
||||
apiStatus.textContent = 'API调用失败';
|
||||
}
|
||||
}
|
||||
|
||||
function clearToken() {
|
||||
localStorage.removeItem('token');
|
||||
log('Token已清除');
|
||||
checkToken();
|
||||
}
|
||||
|
||||
// 页面加载时自动检查token
|
||||
window.onload = function() {
|
||||
checkToken();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
256
admin-system/frontend/public/electronic-fence-demo.html
Normal file
256
admin-system/frontend/public/electronic-fence-demo.html
Normal file
@@ -0,0 +1,256 @@
|
||||
<!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: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
.header p {
|
||||
margin: 10px 0 0 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.content {
|
||||
padding: 30px;
|
||||
}
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.feature-card {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
}
|
||||
.feature-card h3 {
|
||||
color: #52c41a;
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
.feature-card ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.feature-card li {
|
||||
margin: 8px 0;
|
||||
color: #666;
|
||||
}
|
||||
.demo-section {
|
||||
margin: 30px 0;
|
||||
padding: 20px;
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.demo-section h3 {
|
||||
color: #52c41a;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
.screenshot {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 400px;
|
||||
background: #f0f0f0;
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: #52c41a;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
margin: 10px 10px 10px 0;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #73d13d;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #1890ff;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: #40a9ff;
|
||||
}
|
||||
.tech-stack {
|
||||
background: #f0f8ff;
|
||||
border: 1px solid #91d5ff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.tech-stack h3 {
|
||||
color: #1890ff;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
.tech-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.tech-item {
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>电子围栏功能演示</h1>
|
||||
<p>宁夏智慧养殖监管平台 - 智能设备模块</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="demo-section">
|
||||
<h3>🎯 功能概述</h3>
|
||||
<p>电子围栏功能允许用户在地图上绘制围栏区域，监控动物活动范围，并提供完整的围栏管理功能。支持多种围栏类型，实时统计区域内外的动物数量，为智慧养殖提供精准的地理围栏管理。</p>
|
||||
|
||||
<div class="screenshot">
|
||||
📍 地图界面截图区域<br>
|
||||
<small>显示围栏绘制和选择功能</small>
|
||||
</div>
|
||||
|
||||
<a href="/smart-devices/fence" class="btn">进入电子围栏页面</a>
|
||||
<a href="/api-docs" class="btn btn-secondary">查看API文档</a>
|
||||
</div>
|
||||
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card">
|
||||
<h3>🗺️ 地图绘制功能</h3>
|
||||
<ul>
|
||||
<li>支持多边形围栏绘制</li>
|
||||
<li>实时预览绘制过程</li>
|
||||
<li>自动保存坐标数据</li>
|
||||
<li>支持地图缩放和平移</li>
|
||||
<li>地图类型切换（地图/卫星）</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<h3>📊 围栏管理功能</h3>
|
||||
<ul>
|
||||
<li>围栏列表展示</li>
|
||||
<li>围栏搜索和筛选</li>
|
||||
<li>围栏信息面板</li>
|
||||
<li>围栏类型管理</li>
|
||||
<li>围栏状态监控</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<h3>📈 统计功能</h3>
|
||||
<ul>
|
||||
<li>区域内动物数量统计</li>
|
||||
<li>区域外动物数量统计</li>
|
||||
<li>放牧状态监控</li>
|
||||
<li>围栏使用率分析</li>
|
||||
<li>实时数据更新</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<h3>🔧 围栏类型</h3>
|
||||
<ul>
|
||||
<li>采集器电子围栏</li>
|
||||
<li>放牧围栏</li>
|
||||
<li>安全围栏</li>
|
||||
<li>自定义围栏类型</li>
|
||||
<li>围栏权限控制</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-stack">
|
||||
<h3>🛠️ 技术栈</h3>
|
||||
<div class="tech-list">
|
||||
<div class="tech-item">
|
||||
<strong>前端</strong><br>
|
||||
Vue 3 + Vite
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>UI组件</strong><br>
|
||||
Ant Design Vue
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>地图服务</strong><br>
|
||||
百度地图API
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>后端</strong><br>
|
||||
Node.js + Express
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>数据库</strong><br>
|
||||
MySQL + Sequelize
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<strong>认证</strong><br>
|
||||
JWT Token
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>🚀 快速开始</h3>
|
||||
<ol>
|
||||
<li><strong>登录系统</strong> - 使用管理员账号登录管理后台</li>
|
||||
<li><strong>导航到电子围栏</strong> - 进入"智能设备" → "电子围栏"页面</li>
|
||||
<li><strong>开始绘制</strong> - 点击"开始绘制"按钮，在地图上点击绘制围栏</li>
|
||||
<li><strong>保存围栏</strong> - 完成绘制后填写围栏信息并保存</li>
|
||||
<li><strong>管理围栏</strong> - 使用下拉框选择和管理现有围栏</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>📋 API接口</h3>
|
||||
<p>电子围栏功能提供完整的RESTful API接口：</p>
|
||||
<ul>
|
||||
<li><code>GET /api/electronic-fence</code> - 获取围栏列表</li>
|
||||
<li><code>POST /api/electronic-fence</code> - 创建围栏</li>
|
||||
<li><code>PUT /api/electronic-fence/:id</code> - 更新围栏</li>
|
||||
<li><code>DELETE /api/electronic-fence/:id</code> - 删除围栏</li>
|
||||
<li><code>GET /api/electronic-fence/stats/overview</code> - 获取统计概览</li>
|
||||
</ul>
|
||||
<a href="/api-docs" class="btn btn-secondary">查看完整API文档</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,135 +0,0 @@
|
||||
<!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;
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.test-item {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.success {
|
||||
background-color: #f6ffed;
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
.error {
|
||||
background-color: #fff2f0;
|
||||
border-color: #ffccc7;
|
||||
}
|
||||
button {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #40a9ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>自动登录功能测试</h1>
|
||||
|
||||
<div class="test-item">
|
||||
<h3>测试步骤：</h3>
|
||||
<ol>
|
||||
<li>点击"清除登录状态"按钮</li>
|
||||
<li>点击"访问登录页面"按钮</li>
|
||||
<li>观察是否自动登录并跳转到仪表盘</li>
|
||||
<li>点击"访问用户管理页面"测试路由守卫</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="test-item">
|
||||
<h3>当前状态：</h3>
|
||||
<p>Token: <span id="token-status">检查中...</span></p>
|
||||
<p>用户信息: <span id="user-status">检查中...</span></p>
|
||||
</div>
|
||||
|
||||
<div class="test-item">
|
||||
<h3>测试操作：</h3>
|
||||
<button onclick="clearLoginState()">清除登录状态</button>
|
||||
<button onclick="checkLoginState()">检查登录状态</button>
|
||||
<button onclick="visitLoginPage()">访问登录页面</button>
|
||||
<button onclick="visitUsersPage()">访问用户管理页面</button>
|
||||
<button onclick="visitDashboard()">访问仪表盘</button>
|
||||
</div>
|
||||
|
||||
<div class="test-item">
|
||||
<h3>测试结果：</h3>
|
||||
<div id="test-results"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addResult(message, isSuccess = true) {
|
||||
const results = document.getElementById('test-results');
|
||||
const div = document.createElement('div');
|
||||
div.className = isSuccess ? 'success' : 'error';
|
||||
div.style.margin = '10px 0';
|
||||
div.style.padding = '10px';
|
||||
div.style.borderRadius = '4px';
|
||||
div.innerHTML = `<strong>${new Date().toLocaleTimeString()}</strong>: ${message}`;
|
||||
results.appendChild(div);
|
||||
}
|
||||
|
||||
function clearLoginState() {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
addResult('已清除登录状态');
|
||||
checkLoginState();
|
||||
}
|
||||
|
||||
function checkLoginState() {
|
||||
const token = localStorage.getItem('token');
|
||||
const user = localStorage.getItem('user');
|
||||
|
||||
document.getElementById('token-status').textContent = token ? '已存在' : '不存在';
|
||||
document.getElementById('user-status').textContent = user ? JSON.parse(user).username : '未登录';
|
||||
|
||||
addResult(`登录状态检查 - Token: ${token ? '存在' : '不存在'}, 用户: ${user ? JSON.parse(user).username : '未登录'}`);
|
||||
}
|
||||
|
||||
function visitLoginPage() {
|
||||
addResult('正在访问登录页面...');
|
||||
window.open('http://localhost:5300/#/login', '_blank');
|
||||
}
|
||||
|
||||
function visitUsersPage() {
|
||||
addResult('正在访问用户管理页面...');
|
||||
window.open('http://localhost:5300/#/users', '_blank');
|
||||
}
|
||||
|
||||
function visitDashboard() {
|
||||
addResult('正在访问仪表盘...');
|
||||
window.open('http://localhost:5300/#/dashboard', '_blank');
|
||||
}
|
||||
|
||||
// 页面加载时检查状态
|
||||
window.onload = function() {
|
||||
checkLoginState();
|
||||
addResult('测试页面已加载，请按照测试步骤进行操作');
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
150
admin-system/frontend/public/test-export.html
Normal file
150
admin-system/frontend/public/test-export.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!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 {
|
||||
margin: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.test-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
margin: 10px;
|
||||
background: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background: #40a9ff;
|
||||
}
|
||||
.log {
|
||||
background: #f5f5f5;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test-container">
|
||||
<h1>智能项圈预警导出功能测试</h1>
|
||||
|
||||
<div>
|
||||
<button onclick="testExportColumns()">测试列配置</button>
|
||||
<button onclick="testExportData()">测试导出数据</button>
|
||||
<button onclick="clearLog()">清除日志</button>
|
||||
</div>
|
||||
|
||||
<div id="log" class="log"></div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
// 模拟ExportUtils类
|
||||
class ExportUtils {
|
||||
static getCollarAlertColumns() {
|
||||
return [
|
||||
{ title: '耳标编号', dataIndex: 'collarNumber', key: 'collarNumber' },
|
||||
{ title: '预警类型', dataIndex: 'alertType', key: 'alertType' },
|
||||
{ title: '预警级别', dataIndex: 'alertLevel', key: 'alertLevel' },
|
||||
{ title: '预警时间', dataIndex: 'alertTime', key: 'alertTime', dataType: 'datetime' },
|
||||
{ title: '设备电量', dataIndex: 'battery', key: 'battery' },
|
||||
{ title: '设备温度', dataIndex: 'temperature', key: 'temperature' },
|
||||
{ title: '当日步数', dataIndex: 'dailySteps', key: 'dailySteps' }
|
||||
]
|
||||
}
|
||||
|
||||
static exportAlertData(data, alertType) {
|
||||
const alertTypeMap = {
|
||||
collar: { name: '智能项圈预警', columns: this.getCollarAlertColumns() },
|
||||
eartag: { name: '智能耳标预警', columns: this.getEartagAlertColumns() }
|
||||
}
|
||||
|
||||
const config = alertTypeMap[alertType]
|
||||
if (!config) {
|
||||
throw new Error(`不支持的预警类型: ${alertType}`)
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
filename: `${config.name}数据_${new Date().toISOString().slice(0,10)}.xlsx`,
|
||||
columns: config.columns,
|
||||
data: data
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 测试数据
|
||||
const testData = [
|
||||
{
|
||||
collarNumber: '22012000108',
|
||||
alertType: '低电量预警',
|
||||
alertLevel: '高级',
|
||||
alertTime: '2025-01-18 10:30:00',
|
||||
battery: 98,
|
||||
temperature: 32.0,
|
||||
dailySteps: 66
|
||||
},
|
||||
{
|
||||
collarNumber: '15010000008',
|
||||
alertType: '离线预警',
|
||||
alertLevel: '高级',
|
||||
alertTime: '2025-01-18 09:15:00',
|
||||
battery: 83,
|
||||
temperature: 27.8,
|
||||
dailySteps: 5135
|
||||
}
|
||||
]
|
||||
|
||||
function log(message) {
|
||||
const logDiv = document.getElementById('log');
|
||||
logDiv.textContent += new Date().toLocaleTimeString() + ': ' + message + '\n';
|
||||
}
|
||||
|
||||
function testExportColumns() {
|
||||
log('=== 测试列配置 ===');
|
||||
const columns = ExportUtils.getCollarAlertColumns();
|
||||
log('列配置数量: ' + columns.length);
|
||||
columns.forEach((col, index) => {
|
||||
log(`${index + 1}. ${col.title} (${col.dataIndex})`);
|
||||
});
|
||||
}
|
||||
|
||||
function testExportData() {
|
||||
log('=== 测试导出数据 ===');
|
||||
try {
|
||||
const result = ExportUtils.exportAlertData(testData, 'collar');
|
||||
log('导出成功: ' + result.filename);
|
||||
log('列配置: ' + JSON.stringify(result.columns, null, 2));
|
||||
log('数据示例: ' + JSON.stringify(result.data[0], null, 2));
|
||||
} catch (error) {
|
||||
log('导出失败: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function clearLog() {
|
||||
document.getElementById('log').textContent = '';
|
||||
}
|
||||
|
||||
// 将函数暴露到全局作用域
|
||||
window.testExportColumns = testExportColumns;
|
||||
window.testExportData = testExportData;
|
||||
window.clearLog = clearLog;
|
||||
|
||||
// 页面加载完成后自动测试
|
||||
window.addEventListener('load', () => {
|
||||
log('页面加载完成，开始自动测试');
|
||||
testExportColumns();
|
||||
testExportData();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,227 +0,0 @@
|
||||
<!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;
|
||||
max-width: 1000px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.test-item {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.success {
|
||||
background-color: #f6ffed;
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
.error {
|
||||
background-color: #fff2f0;
|
||||
border-color: #ffccc7;
|
||||
}
|
||||
button {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #40a9ff;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 15px;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.json-display {
|
||||
background: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
white-space: pre-wrap;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>用户数据显示测试</h1>
|
||||
|
||||
<div class="test-item">
|
||||
<h3>测试步骤：</h3>
|
||||
<ol>
|
||||
<li>点击"测试API调用"按钮</li>
|
||||
<li>查看API响应数据</li>
|
||||
<li>点击"访问用户管理页面"查看前端显示</li>
|
||||
<li>对比数据是否一致</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="test-item">
|
||||
<h3>API测试：</h3>
|
||||
<button onclick="testAPI()">测试API调用</button>
|
||||
<button onclick="visitUsersPage()">访问用户管理页面</button>
|
||||
<button onclick="checkLocalStorage()">检查本地存储</button>
|
||||
</div>
|
||||
|
||||
<div class="test-item">
|
||||
<h3>API响应数据：</h3>
|
||||
<div id="api-response" class="json-display">点击"测试API调用"查看数据...</div>
|
||||
</div>
|
||||
|
||||
<div class="test-item">
|
||||
<h3>用户数据表格：</h3>
|
||||
<div id="users-table">暂无数据</div>
|
||||
</div>
|
||||
|
||||
<div class="test-item">
|
||||
<h3>测试结果：</h3>
|
||||
<div id="test-results"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addResult(message, isSuccess = true) {
|
||||
const results = document.getElementById('test-results');
|
||||
const div = document.createElement('div');
|
||||
div.className = isSuccess ? 'success' : 'error';
|
||||
div.style.margin = '10px 0';
|
||||
div.style.padding = '10px';
|
||||
div.style.borderRadius = '4px';
|
||||
div.innerHTML = `<strong>${new Date().toLocaleTimeString()}</strong>: ${message}`;
|
||||
results.appendChild(div);
|
||||
}
|
||||
|
||||
async function testAPI() {
|
||||
try {
|
||||
addResult('正在调用用户API...');
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
addResult('未找到token，请先登录', false);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch('http://localhost:5350/api/users', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// 显示API响应
|
||||
document.getElementById('api-response').textContent = JSON.stringify(data, null, 2);
|
||||
|
||||
// 创建用户表格
|
||||
if (data.success && data.data) {
|
||||
createUsersTable(data.data);
|
||||
addResult(`API调用成功，获取到 ${data.data.length} 个用户`);
|
||||
} else {
|
||||
addResult('API响应格式异常', false);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
addResult(`API调用失败: ${error.message}`, false);
|
||||
document.getElementById('api-response').textContent = `错误: ${error.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
function createUsersTable(users) {
|
||||
const tableContainer = document.getElementById('users-table');
|
||||
|
||||
if (!users || users.length === 0) {
|
||||
tableContainer.innerHTML = '<p>没有用户数据</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
let tableHTML = `
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>用户名</th>
|
||||
<th>邮箱</th>
|
||||
<th>角色</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
users.forEach(user => {
|
||||
tableHTML += `
|
||||
<tr>
|
||||
<td>${user.id}</td>
|
||||
<td>${user.username}</td>
|
||||
<td>${user.email}</td>
|
||||
<td>${user.role || '未知'}</td>
|
||||
<td>${user.status || '未知'}</td>
|
||||
<td>${user.created_at ? new Date(user.created_at).toLocaleString('zh-CN') : '未知'}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
tableHTML += `
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
|
||||
tableContainer.innerHTML = tableHTML;
|
||||
}
|
||||
|
||||
function visitUsersPage() {
|
||||
addResult('正在打开用户管理页面...');
|
||||
window.open('http://localhost:5300/#/users', '_blank');
|
||||
}
|
||||
|
||||
function checkLocalStorage() {
|
||||
const token = localStorage.getItem('token');
|
||||
const user = localStorage.getItem('user');
|
||||
|
||||
addResult(`Token: ${token ? '存在' : '不存在'}, 用户信息: ${user ? '存在' : '不存在'}`);
|
||||
|
||||
if (token) {
|
||||
addResult('Token内容: ' + token.substring(0, 50) + '...');
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时检查登录状态
|
||||
window.onload = function() {
|
||||
checkLocalStorage();
|
||||
addResult('测试页面已加载，请按照测试步骤进行操作');
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user