aiotagro/nxxmdata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

删除前端废弃组件和示例文件

Browse Source
This commit is contained in:
ylweng
2025-09-12 21:53:14 +08:00
parent 7e093946a8
commit bc3b3d7b52
98 changed files with 14136 additions and 14931 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
admin-system/public/electronic-fence-demo.html Normal file
View 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>

90
admin-system/public/map-test.html Normal file
View File

@@ -0,0 +1,90 @@
<!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>
#mapContainer {
width: 100%;
height: 500px;
border: 2px solid #ccc;
margin: 20px 0;
}
.log {
background: #f5f5f5;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
font-family: monospace;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>百度地图测试页面</h1>
<div id="mapContainer"></div>
<div class="log" id="logContainer">正在加载百度地图API...</div>
<script>
const logContainer = document.getElementById('logContainer');
function log(message) {
console.log(message);
logContainer.textContent += '\n' + new Date().toLocaleTimeString() + ': ' + message;
}
// 百度地图API回调函数
window.initBMap = function() {
log('百度地图API加载成功');
try {
// 创建地图实例
const map = new BMap.Map('mapContainer');
log('地图实例创建成功');
// 设置中心点和缩放级别
const point = new BMap.Point(106.27, 38.47); // 银川市中心
map.centerAndZoom(point, 12);
log('地图中心点设置成功: ' + point.lng + ', ' + point.lat);
// 启用滚轮缩放
map.enableScrollWheelZoom(true);
log('滚轮缩放已启用');
// 添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
log('地图控件添加成功');
// 添加测试标记
const marker = new BMap.Marker(point);
map.addOverlay(marker);
log('测试标记添加成功');
// 添加信息窗口
const infoWindow = new BMap.InfoWindow('这是一个测试标记点');
marker.addEventListener('click', function() {
map.openInfoWindow(infoWindow, point);
});
log('信息窗口事件绑定成功');
log('地图初始化完成！');
} catch (error) {
log('地图初始化失败: ' + error.message);
console.error('地图初始化失败:', error);
}
};
// 动态加载百度地图API
const script = document.createElement('script');
script.src = 'https://api.map.baidu.com/api?v=3.0&ak=3AN3VahoqaXUs32U8luXD2Dwn86KK5B7&callback=initBMap';
script.onerror = function() {
log('百度地图API加载失败');
};
document.head.appendChild(script);
log('开始加载百度地图API...');
</script>
</body>
</html>

150
admin-system/public/test-export.html Normal file
View 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>