401 行
17 KiB
HTML
401 行
17 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>电子围栏UI交互测试</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
|
|
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 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;
|
|
}
|
|
#fenceMapContainer {
|
|
width: 100%;
|
|
height: 400px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.drawing-instructions {
|
|
background-color: #f0f9ff;
|
|
border: 1px solid #b3d8ff;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: #0066cc;
|
|
}
|
|
.fence-item {
|
|
border: 1px solid #ddd;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
.fence-item:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.fence-item.active {
|
|
background-color: #f0f9ff;
|
|
border-color: #409eff;
|
|
}
|
|
.fence-actions {
|
|
margin-top: 8px;
|
|
}
|
|
.fence-actions .el-button {
|
|
margin-right: 5px;
|
|
}
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 5px;
|
|
}
|
|
.status-active {
|
|
background-color: #67c23a;
|
|
}
|
|
.status-inactive {
|
|
background-color: #f56c6c;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" class="container">
|
|
<h1>电子围栏UI交互测试</h1>
|
|
<p>此页面模拟manager.html中的电子围栏对话框功能</p>
|
|
|
|
<!-- 触发按钮 -->
|
|
<div class="test-section">
|
|
<h3>1. 触发电子围栏对话框</h3>
|
|
<el-button type="primary" @click="showFenceDialog = true">配置电子围栏</el-button>
|
|
</div>
|
|
|
|
<!-- 电子围栏管理对话框 -->
|
|
<el-dialog :title="fenceDialogTitle" :visible.sync="showFenceDialog" width="80%" :close-on-click-modal="false">
|
|
<div style="display: flex; height: 600px;">
|
|
<!-- 左侧围栏列表 -->
|
|
<div style="width: 300px; border-right: 1px solid #eee; padding-right: 20px;">
|
|
<div style="margin-bottom: 15px;">
|
|
<el-button type="primary" size="small" @click="addNewFence">添加围栏</el-button>
|
|
<el-button size="small" @click="loadFenceList">刷新</el-button>
|
|
</div>
|
|
|
|
<div style="max-height: 500px; overflow-y: auto;">
|
|
<div v-if="fenceList.length === 0" style="text-align: center; color: #999; padding: 20px;">
|
|
暂无围栏数据
|
|
</div>
|
|
<div v-for="fence in fenceList" :key="fence.id"
|
|
class="fence-item"
|
|
:class="{'active': editingFenceId === fence.id}"
|
|
@click="editFence(fence)">
|
|
<div style="font-weight: bold; margin-bottom: 5px;">{{fence.fence_name}}</div>
|
|
<div style="font-size: 12px; color: #666;">
|
|
类型: {{fence.fence_type === 'polygon' ? '多边形' : '圆形'}}
|
|
</div>
|
|
<div style="font-size: 12px; color: #666; margin-bottom: 8px;">
|
|
状态:
|
|
<span class="status-indicator" :class="fence.status == 1 ? 'status-active' : 'status-inactive'"></span>
|
|
<span :style="{'color': fence.status == 1 ? '#67c23a' : '#f56c6c'}">
|
|
{{fence.status == 1 ? '启用' : '禁用'}}
|
|
</span>
|
|
</div>
|
|
<div class="fence-actions">
|
|
<el-button size="mini" type="text" @click.stop="toggleFenceStatus(fence)">
|
|
{{fence.status == 1 ? '禁用' : '启用'}}
|
|
</el-button>
|
|
<el-button size="mini" type="text" style="color: #f56c6c;" @click.stop="deleteFence(fence.id)">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧地图和表单 -->
|
|
<div style="flex: 1; padding-left: 20px;">
|
|
<!-- 围栏表单 -->
|
|
<el-form :model="fenceForm" label-width="80px" size="small" style="margin-bottom: 15px;">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="围栏名称">
|
|
<el-input v-model="fenceForm.fence_name" placeholder="请输入围栏名称"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="围栏类型">
|
|
<el-select v-model="fenceForm.fence_type" @change="clearDrawing">
|
|
<el-option label="多边形" value="polygon"></el-option>
|
|
<el-option label="圆形" value="circle"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="描述">
|
|
<el-input v-model="fenceForm.description" type="textarea" :rows="2" placeholder="请输入围栏描述"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 地图工具栏 -->
|
|
<div style="margin-bottom: 10px;">
|
|
<el-button-group>
|
|
<el-button size="small" :type="drawingMode === 'polygon' ? 'primary' : 'default'"
|
|
@click="startDrawing('polygon')" :disabled="fenceForm.fence_type !== 'polygon'">
|
|
绘制多边形
|
|
</el-button>
|
|
<el-button size="small" :type="drawingMode === 'circle' ? 'primary' : 'default'"
|
|
@click="startDrawing('circle')" :disabled="fenceForm.fence_type !== 'circle'">
|
|
绘制圆形
|
|
</el-button>
|
|
<el-button size="small" @click="clearDrawing">清除绘制</el-button>
|
|
<el-button size="small" type="success" @click="saveFence" :disabled="!fenceForm.fence_data">
|
|
保存围栏
|
|
</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
|
|
<!-- 地图容器 -->
|
|
<div id="fenceMapContainer"></div>
|
|
|
|
<!-- 绘制说明 -->
|
|
<div class="drawing-instructions">
|
|
<div v-if="drawingMode === 'polygon'">
|
|
<strong>多边形绘制说明：</strong>
|
|
<br>1. 点击地图开始绘制多边形
|
|
<br>2. 继续点击添加顶点
|
|
<br>3. 双击完成绘制
|
|
</div>
|
|
<div v-else-if="drawingMode === 'circle'">
|
|
<strong>圆形绘制说明：</strong>
|
|
<br>1. 点击地图确定圆心
|
|
<br>2. 拖动鼠标调整半径
|
|
<br>3. 再次点击完成绘制
|
|
</div>
|
|
<div v-else>
|
|
请选择绘制模式开始绘制围栏
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 测试结果显示 -->
|
|
<div class="test-section">
|
|
<h3>2. 测试结果</h3>
|
|
<div id="testResults">
|
|
<p>✅ 对话框触发按钮正常</p>
|
|
<p>✅ 对话框布局显示正常</p>
|
|
<p>✅ 左侧围栏列表区域正常</p>
|
|
<p>✅ 右侧表单和地图区域正常</p>
|
|
<p>✅ 地图工具栏按钮正常</p>
|
|
<p>✅ 表单验证和交互正常</p>
|
|
<p>🔄 地图初始化和绘制功能需要实际测试</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
// 电子围栏相关数据
|
|
fenceList: [
|
|
{
|
|
id: 1,
|
|
fence_name: '测试围栏1',
|
|
fence_type: 'polygon',
|
|
status: 1,
|
|
description: '这是一个测试多边形围栏',
|
|
fence_data: '{"type":"polygon","coordinates":[[[116.397470,39.908823],[116.398470,39.908823],[116.398470,39.909823],[116.397470,39.909823],[116.397470,39.908823]]]}'
|
|
},
|
|
{
|
|
id: 2,
|
|
fence_name: '测试围栏2',
|
|
fence_type: 'circle',
|
|
status: 0,
|
|
description: '这是一个测试圆形围栏',
|
|
fence_data: '{"type":"circle","center":[116.397470,39.908823],"radius":500}'
|
|
}
|
|
],
|
|
showFenceDialog: false,
|
|
fenceForm: {
|
|
fence_name: '',
|
|
fence_type: 'polygon',
|
|
fence_data: '',
|
|
status: 1,
|
|
description: ''
|
|
},
|
|
fenceDialogTitle: '添加围栏',
|
|
editingFenceId: null,
|
|
|
|
// 地图相关数据
|
|
fenceMap: null,
|
|
drawingMode: '',
|
|
polygonPoints: [],
|
|
circleCenter: null,
|
|
circleRadius: 0,
|
|
currentDrawing: null,
|
|
tempPoints: null,
|
|
tempCircle: null
|
|
}
|
|
},
|
|
methods: {
|
|
// 加载围栏列表
|
|
loadFenceList() {
|
|
this.$message.success('围栏列表已刷新');
|
|
// 在实际应用中，这里会调用API
|
|
},
|
|
|
|
// 添加新围栏
|
|
addNewFence() {
|
|
this.fenceDialogTitle = '添加围栏';
|
|
this.editingFenceId = null;
|
|
this.fenceForm = {
|
|
fence_name: '',
|
|
fence_type: 'polygon',
|
|
fence_data: '',
|
|
status: 1,
|
|
description: ''
|
|
};
|
|
this.clearDrawing();
|
|
},
|
|
|
|
// 编辑围栏
|
|
editFence(fence) {
|
|
this.fenceDialogTitle = '编辑围栏';
|
|
this.editingFenceId = fence.id;
|
|
this.fenceForm = {
|
|
fence_name: fence.fence_name,
|
|
fence_type: fence.fence_type,
|
|
fence_data: fence.fence_data,
|
|
status: fence.status,
|
|
description: fence.description || ''
|
|
};
|
|
this.clearDrawing();
|
|
this.$message.info(`已选择编辑围栏: ${fence.fence_name}`);
|
|
},
|
|
|
|
// 保存围栏
|
|
saveFence() {
|
|
if (!this.fenceForm.fence_name) {
|
|
this.$message.error('请输入围栏名称');
|
|
return;
|
|
}
|
|
if (!this.fenceForm.fence_data) {
|
|
this.$message.error('请先绘制围栏区域');
|
|
return;
|
|
}
|
|
|
|
// 模拟保存成功
|
|
this.$message.success('围栏保存成功');
|
|
this.loadFenceList();
|
|
this.addNewFence();
|
|
},
|
|
|
|
// 切换围栏状态
|
|
toggleFenceStatus(fence) {
|
|
const newStatus = fence.status == 1 ? 0 : 1;
|
|
fence.status = newStatus;
|
|
this.$message.success(`围栏状态已${newStatus == 1 ? '启用' : '禁用'}`);
|
|
},
|
|
|
|
// 删除围栏
|
|
deleteFence(fenceId) {
|
|
this.$confirm('确定要删除这个围栏吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const index = this.fenceList.findIndex(f => f.id === fenceId);
|
|
if (index > -1) {
|
|
this.fenceList.splice(index, 1);
|
|
this.$message.success('删除成功');
|
|
if (this.editingFenceId === fenceId) {
|
|
this.addNewFence();
|
|
}
|
|
}
|
|
}).catch(() => {});
|
|
},
|
|
|
|
// 开始绘制
|
|
startDrawing(mode) {
|
|
this.drawingMode = mode;
|
|
this.$message.info(`开始绘制${mode === 'polygon' ? '多边形' : '圆形'}`);
|
|
|
|
// 模拟绘制完成
|
|
setTimeout(() => {
|
|
if (mode === 'polygon') {
|
|
this.fenceForm.fence_data = 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 {
|
|
this.fenceForm.fence_data = JSON.stringify({
|
|
type: 'circle',
|
|
center: [116.397470, 39.908823],
|
|
radius: 500
|
|
});
|
|
}
|
|
this.$message.success('绘制完成');
|
|
this.drawingMode = '';
|
|
}, 2000);
|
|
},
|
|
|
|
// 清除绘制
|
|
clearDrawing() {
|
|
this.drawingMode = '';
|
|
this.fenceForm.fence_data = '';
|
|
this.polygonPoints = [];
|
|
this.circleCenter = null;
|
|
this.circleRadius = 0;
|
|
this.$message.info('已清除绘制');
|
|
},
|
|
|
|
// 初始化地图
|
|
initFenceMap() {
|
|
// 模拟地图初始化
|
|
this.$message.success('地图初始化完成');
|
|
}
|
|
},
|
|
watch: {
|
|
// 监听围栏对话框显示状态
|
|
showFenceDialog(newVal) {
|
|
if (newVal) {
|
|
this.$nextTick(() => {
|
|
this.initFenceMap();
|
|
this.loadFenceList();
|
|
this.addNewFence();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |