From ee89710ca4f2f433e320130ac71390d87f275cfc Mon Sep 17 00:00:00 2001
From: “wangming” <“wangming@antissoft.com”>
Date: Tue, 10 Mar 2026 18:24:36 +0800
Subject: [PATCH] Refactor Form.vue to enhance layout and functionality. Updated form fields for better user experience, added map location feature with longitude and latitude inputs, and improved fence status display. Adjusted dialog width for improved visibility.

---
 antis-ncc-admin/src/views/lqMdxx/Form.vue | 940 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 1 file changed, 700 insertions(+), 240 deletions(-)

diff --git a/antis-ncc-admin/src/views/lqMdxx/Form.vue b/antis-ncc-admin/src/views/lqMdxx/Form.vue
index 4dcc5be..6f82389 100644
--- a/antis-ncc-admin/src/views/lqMdxx/Form.vue
+++ b/antis-ncc-admin/src/views/lqMdxx/Form.vue
@@ -1,258 +1,718 @@
-<template>
-	<el-dialog :title="!dataForm.id ? '新建' :  isDetail ? '详情':'编辑'" :close-on-click-modal="false" :visible.sync="visible" class="NCC-dialog NCC-dialog_center" lock-scroll width="600px">
-		<el-row :gutter="15" class="" >
-				<el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
-					<el-col :span="24" v-if="false" >
-						<el-form-item label="主键" prop="id">
-							<el-input v-model="dataForm.id" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="门店编码" prop="mdbm">
-							<el-input v-model="dataForm.mdbm" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="单据门店编号" prop="djmdbh">
-							<el-input v-model="dataForm.djmdbh" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="单据门店" prop="djmd">
-							<el-input v-model="dataForm.djmd" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="店名" prop="dm">
-							<el-input v-model="dataForm.dm" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="城市" prop="cs">
-							<el-input v-model="dataForm.cs" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="地址" prop="dz">
-							<el-input v-model="dataForm.dz" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="姓名" prop="xm">
-							<el-input v-model="dataForm.xm" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="电话号码" prop="dhhm">
-							<el-input v-model="dataForm.dhhm" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="座机" prop="zj">
-							<el-input v-model="dataForm.zj" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="开业时间" prop="kysj">
-							<el-date-picker v-model="dataForm.kysj" placeholder="请选择" clearable :style='{"width":"100%"}' type='date' format="yyyy-MM-dd" value-format="timestamp" >
-							</el-date-picker>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="最新状态" prop="zxzt">
-							<el-select v-model="dataForm.zxzt" placeholder="请选择" clearable :style='{"width":"100%"}' >
-								<el-option v-for="(item, index) in zxztOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="工商名称" prop="gsmc">
-							<el-input v-model="dataForm.gsmc" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="法人" prop="fr">
-							<el-input v-model="dataForm.fr" placeholder="请输入" clearable :style='{"width":"100%"}' >
-							</el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="有无社保" prop="ywsb">
-							<el-select v-model="dataForm.ywsb" placeholder="请选择" clearable :style='{"width":"100%"}' >
-								<el-option v-for="(item, index) in ywsbOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="在职人数" prop="zzrs">
-							<el-input-number v-model="dataForm.zzrs" :min="0" :step="1" :precision="0" placeholder="请输入" :style='{"width":"100%"}' />
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="门店类别" prop="storeCategory">
-							<el-select v-model="dataForm.storeCategory" placeholder="请选择" clearable :style='{"width":"100%"}' >
-								<el-option v-for="(item, index) in storeCategoryOptions" :key="index" :label="item.Name" :value="item.Value" ></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :span="24">
-						<el-form-item label="门店类型" prop="storeType">
-							<el-select v-model="dataForm.storeType" placeholder="请选择" clearable :style='{"width":"100%"}' >
-								<el-option v-for="(item, index) in storeTypeOptions" :key="index" :label="item.Name" :value="item.Value" ></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-				</el-form>
+<template>
+	<el-dialog :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'" :close-on-click-modal="false"
+		:visible.sync="visible" class="NCC-dialog NCC-dialog_center" lock-scroll width="720px">
+		<el-row :gutter="15">
+			<el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right"
+				:disabled="!!isDetail" :rules="rules">
+				<!-- 基础信息字段 -->
+				<el-col :span="24" v-if="false">
+					<el-form-item label="主键" prop="id">
+						<el-input v-model="dataForm.id" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="门店编码" prop="mdbm">
+						<el-input v-model="dataForm.mdbm" placeholder="请输入" clearable />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="店名" prop="dm">
+						<el-input v-model="dataForm.dm" placeholder="请输入" clearable />
+					</el-form-item>
+				</el-col>
+				<el-col :span="24">
+					<el-form-item label="地址" prop="dz">
+						<el-input v-model="dataForm.dz" placeholder="请输入完整地址" clearable>
+							<el-button slot="append" icon="el-icon-location-outline"
+								@click="handleOpenLocation">地图定位</el-button>
+						</el-input>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="经度" prop="longitude">
+						<el-input v-model="dataForm.longitude" readonly placeholder="请通过地图定位选择" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="纬度" prop="latitude">
+						<el-input v-model="dataForm.latitude" readonly placeholder="请通过地图定位选择" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="24">
+					<el-form-item label="电子围栏">
+						<div class="fence-status-bar">
+							<el-tag :type="dataForm.fencePolygons && dataForm.fencePolygons.length ? 'success' : 'info'"
+								size="medium">
+								{{ (dataForm.fencePolygons && dataForm.fencePolygons.length) ? '已设置围栏 (1块)' : '未设置围栏' }}
+							</el-tag>
+							<el-button type="primary" size="mini" icon="el-icon-edit" style="margin-left: 10px"
+								:disabled="!dataForm.longitude || !dataForm.latitude" @click="handleOpenFence">
+								设置围栏
+							</el-button>
+							<span v-if="!dataForm.longitude" class="hint-text">（请先完成地图定位）</span>
+						</div>
+					</el-form-item>
+				</el-col>
+
+				<!-- 其他业务字段 -->
+				<el-col :span="12">
+					<el-form-item label="城市" prop="cs">
+						<el-input v-model="dataForm.cs" placeholder="请输入" clearable />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="最新状态" prop="zxzt">
+						<el-select v-model="dataForm.zxzt" placeholder="请选择" clearable :style='{ "width": "100%" }'>
+							<el-option v-for="(item, index) in zxztOptions" :key="index" :label="item.fullName"
+								:value="item.id"></el-option>
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="门店类别" prop="storeCategory">
+						<el-select v-model="dataForm.storeCategory" placeholder="请选择" clearable
+							:style='{ "width": "100%" }'>
+							<el-option v-for="(item, index) in storeCategoryOptions" :key="index" :label="item.Name"
+								:value="item.Value"></el-option>
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="门店类型" prop="storeType">
+						<el-select v-model="dataForm.storeType" placeholder="请选择" clearable
+							:style='{ "width": "100%" }'>
+							<el-option v-for="(item, index) in storeTypeOptions" :key="index" :label="item.Name"
+								:value="item.Value"></el-option>
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="姓名" prop="xm">
+						<el-input v-model="dataForm.xm" placeholder="请输入" clearable />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="电话号码" prop="dhhm">
+						<el-input v-model="dataForm.dhhm" placeholder="请输入" clearable />
+					</el-form-item>
+				</el-col>
+			</el-form>
 		</el-row>
 		<span slot="footer" class="dialog-footer">
 			<el-button @click="visible = false">取 消</el-button>
 			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
 		</span>
+
+		<!-- 定位弹窗 -->
+		<el-dialog title="门店地图定位" :visible.sync="locationVisible" width="800px" append-to-body class="map-dialog">
+			<div class="map-container-wrapper">
+				<div class="map-header-bar">
+					<span>在地图上点击以选择门店位置（仅支持单个标记）</span>
+					<div class="coordinate-info" v-if="tempMarker.lng">
+						当前选择：{{ tempMarker.lng.toFixed(6) }}, {{ tempMarker.lat.toFixed(6) }}
+					</div>
+				</div>
+				<div id="location-map" class="map-canvas"></div>
+			</div>
+			<span slot="footer" class="dialog-footer">
+				<el-button @click="locationVisible = false">取 消</el-button>
+				<el-button type="primary" @click="confirmLocation" :disabled="!tempMarker.lng">确 定</el-button>
+			</span>
+		</el-dialog>
+
+		<!-- 围栏设置弹窗 -->
+		<el-dialog title="设置电子围栏" :visible.sync="fenceVisible" width="1000px" append-to-body class="map-dialog">
+			<div class="fence-editor-layout">
+				<div class="map-side-panel">
+					<div class="panel-header">图形管理 ({{ fenceBuffer.length }})</div>
+					<div class="shape-list">
+						<div v-for="(shape, index) in fenceBuffer" :key="index" class="shape-item">
+							<i :class="getShapeIcon(shape.type)"></i>
+							<span class="shape-name">{{ getShapeName(shape.type) }} {{ index + 1 }}</span>
+							<el-button type="text" icon="el-icon-delete" class="delete-btn"
+								@click="removeBufferShape(index)"></el-button>
+						</div>
+						<div v-if="!fenceBuffer.length" class="empty-text">暂无图形，请在右侧绘制</div>
+					</div>
+					<div class="panel-footer">
+						<p class="warning-text" v-if="fenceBuffer.length > 1">
+							<i class="el-icon-warning"></i> 注意：最终只能保留1个围栏
+						</p>
+					</div>
+				</div>
+				<div class="map-main-area">
+					<div class="map-toolbar">
+						<div v-for="tool in fenceTools" :key="tool.id" class="tool-btn"
+							:class="{ active: activeFenceTool === tool.id }" @click="changeFenceTool(tool.id)">
+							<span class="tool-icon" :class="'tool-icon--' + tool.id"></span>
+							<span class="tool-label">{{ tool.name }}</span>
+						</div>
+					</div>
+					<div id="fence-map" class="map-canvas"></div>
+				</div>
+			</div>
+			<span slot="footer" class="dialog-footer">
+				<div class="footer-hint" v-if="fenceBuffer.length > 1">请删除多余图形，仅保留一个围栏后再保存</div>
+				<el-button @click="fenceVisible = false">取 消</el-button>
+				<el-button type="primary" @click="confirmFence" :disabled="fenceBuffer.length !== 1">确 定 保 存</el-button>
+			</span>
+		</el-dialog>
 	</el-dialog>
 </template>
+
 <script>
-	import request from '@/utils/request'
-	import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
-	import { previewDataInterface } from '@/api/systemData/dataInterface'
-	export default {
-		components: {},
-		props: [],
-		data() {
-			return {
-				loading: false,
-				visible: false,
-				isDetail: false,
-				dataForm: {
-					id:'',
-					id:undefined,
-					mdbm:undefined,
-					djmdbh:undefined,
-					djmd:undefined,
-					dm:undefined,
-					cs:undefined,
-					dz:undefined,
-					xm:undefined,
-					dhhm:undefined,
-					zj:undefined,
-					kysj:undefined,
-					zxzt:undefined,
-					gsmc:undefined,
-					fr:undefined,
-					ywsb:undefined,
-					zzrs:0,
-					storeCategory:undefined,
-					storeType:undefined,
-				},
-				rules: {
-				},
-				zxztOptions:[{"fullName":"开店","id":"开店"},{"fullName":"闭店","id":"闭店"}],
-				ywsbOptions:[{"fullName":"有","id":"有"},{"fullName":"无","id":"无"}],
-				storeCategoryOptions:[],
-				storeTypeOptions:[],
-			}
+import request from '@/utils/request'
+
+export default {
+	data() {
+		return {
+			loading: false,
+			visible: false,
+			isDetail: false,
+			dataForm: {
+				id: undefined,
+				mdbm: undefined,
+				dm: undefined,
+				dz: undefined,
+				cs: undefined,
+				xm: undefined,
+				dhhm: undefined,
+				zxzt: undefined,
+				storeCategory: undefined,
+				storeType: undefined,
+				longitude: null,
+				latitude: null,
+				fencePolygons: [],
+			},
+			rules: {
+				mdbm: [{ required: true, message: '请输入门店编码', trigger: 'blur' }],
+				dm: [{ required: true, message: '请输入店名', trigger: 'blur' }],
+				dz: [{ required: true, message: '请输入地址', trigger: 'blur' }],
+			},
+			zxztOptions: [{ fullName: '开店', id: '开店' }, { fullName: '闭店', id: '闭店' }],
+			storeCategoryOptions: [],
+			storeTypeOptions: [],
+
+			// 定位弹窗相关
+			locationVisible: false,
+			locationMap: null,
+			locationMarkerLayer: null,
+			tempMarker: { lng: null, lat: null },
+
+			// 围栏弹窗相关
+			fenceVisible: false,
+			fenceMap: null,
+			fenceEditor: null,
+			fenceDrawLayers: {},     // 绘图图层（只保留多边形 / 圆形）
+			fenceDisplayLayer: null, // 展示层（显示 buffer 中的图形）
+			activeFenceTool: 'polygon',
+			fenceBuffer: [], // 临时存放绘制的多个图形：[{ id, type, points, geometry }]
+			// 目前仅支持多边形 / 圆形两个工具，矩形与椭圆功能取消
+			fenceTools: [
+				{ id: 'polygon', name: '多边形' },
+				{ id: 'circle', name: '圆形' }
+			]
+		}
+	},
+	created() {
+		this.loadStoreCategoryOptions();
+		this.loadStoreTypeOptions();
+	},
+	methods: {
+		loadStoreCategoryOptions() {
+			request({ url: '/api/Extend/lqmdxx/Selector/StoreCategory', method: 'get' })
+				.then(res => { this.storeCategoryOptions = res.data || []; });
 		},
-		computed: {},
-        watch: {},
-        created() {
-			this.loadStoreCategoryOptions();
-			this.loadStoreTypeOptions();
+		loadStoreTypeOptions() {
+			request({ url: '/api/Extend/lqmdxx/Selector/StoreType', method: 'get' })
+				.then(res => { this.storeTypeOptions = res.data || []; });
 		},
-		mounted() {
-        },
-		methods: {
-			goBack() {
-                this.$emit('refresh')
-            },
-			// 加载门店类别选项
-			loadStoreCategoryOptions() {
-				request({
-					url: '/api/Extend/lqmdxx/Selector/StoreCategory',
-					method: 'get'
-				}).then(res => {
-					this.storeCategoryOptions = res.data || [];
-				}).catch(err => {
-					console.error('加载门店类别选项失败:', err);
-					this.storeCategoryOptions = [];
+
+		init(id, isDetail) {
+			this.dataForm.id = id || 0;
+			this.visible = true;
+			this.isDetail = isDetail || false;
+			this.$nextTick(() => {
+				this.$refs['elForm'].resetFields();
+				if (this.dataForm.id) {
+					request({ url: '/api/Extend/LqMdxx/' + this.dataForm.id, method: 'get' })
+						.then(res => {
+							this.dataForm = res.data;
+						});
+				}
+			})
+		},
+
+		loadTMapScript() {
+			return new Promise((resolve, reject) => {
+				if (window.TMap) return resolve();
+				const script = document.createElement('script');
+				script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=YRXBZ-NEV6T-K7SXH-VJPMF-G5IQF-F3FCJ&libraries=tools,geometry';
+				script.onload = resolve;
+				script.onerror = reject;
+				document.body.appendChild(script);
+			});
+		},
+
+		// --- 门店定位逻辑 ---
+		handleOpenLocation() {
+			this.locationVisible = true;
+			this.tempMarker = { lng: this.dataForm.longitude, lat: this.dataForm.latitude };
+			this.$nextTick(() => {
+				this.initLocationMap();
+			});
+		},
+
+		initLocationMap() {
+			this.loadTMapScript().then(() => {
+				const TMap = window.TMap;
+				const centerLat = this.tempMarker.lat || 30.656149; // 成都
+				const centerLng = this.tempMarker.lng || 104.065735;
+				const center = new TMap.LatLng(centerLat, centerLng);
+
+				this.locationMap = new TMap.Map('location-map', { center, zoom: 14 });
+				this.locationMarkerLayer = new TMap.MultiMarker({ map: this.locationMap, geometries: [] });
+
+				if (this.tempMarker.lng) {
+					this.locationMarkerLayer.setGeometries([{ id: 'm', position: new TMap.LatLng(this.tempMarker.lat, this.tempMarker.lng) }]);
+				}
+
+				this.locationMap.on('click', (evt) => {
+					if (!evt.latLng) return;
+					const lat = evt.latLng.getLat();
+					const lng = evt.latLng.getLng();
+					this.tempMarker = { lng, lat };
+					this.locationMarkerLayer.setGeometries([{ id: 'm', position: evt.latLng }]);
 				});
-			},
-			// 加载门店类型选项
-			loadStoreTypeOptions() {
-				request({
-					url: '/api/Extend/lqmdxx/Selector/StoreType',
-					method: 'get'
-				}).then(res => {
-					this.storeTypeOptions = res.data || [];
-				}).catch(err => {
-					console.error('加载门店类型选项失败:', err);
-					this.storeTypeOptions = [];
+			});
+		},
+
+		confirmLocation() {
+			this.dataForm.longitude = this.tempMarker.lng;
+			this.dataForm.latitude = this.tempMarker.lat;
+			this.locationVisible = false;
+		},
+
+		// --- 围栏设置逻辑 ---
+		handleOpenFence() {
+			if (!this.dataForm.longitude) return;
+			this.fenceVisible = true;
+			// 初始化 Buffer：历史上如果有多块，只保留第一块，保证始终至多一个围栏
+			const polygons = Array.isArray(this.dataForm.fencePolygons) ? this.dataForm.fencePolygons : [];
+			if (polygons.length > 0 && Array.isArray(polygons[0])) {
+				this.fenceBuffer = [{
+					id: `old-${Date.now()}`,
+					type: 'polygon',
+					points: polygons[0]
+				}];
+			} else {
+				this.fenceBuffer = [];
+			}
+			this.$nextTick(() => {
+				this.initFenceMap();
+			});
+		},
+
+		initFenceMap() {
+			this.loadTMapScript().then(() => {
+				const TMap = window.TMap;
+				const center = new TMap.LatLng(this.dataForm.latitude, this.dataForm.longitude);
+				this.fenceMap = new TMap.Map('fence-map', { center, zoom: 16 });
+
+				// 1. 门店位置固定标点
+				this.fenceStoreMarkerLayer = new TMap.MultiMarker({
+					map: this.fenceMap,
+					geometries: [{ id: 'store', position: center }]
 				});
-			},
-			init(id, isDetail) {
-				this.dataForm.id = id || 0;
-                this.visible = true;
-                this.isDetail = isDetail || false;
-				this.$nextTick(() => {
-					this.$refs['elForm'].resetFields();
-					if (this.dataForm.id) {
-						request({
-							url: '/api/Extend/LqMdxx/' + this.dataForm.id,
-							method: 'get'
-						}).then(res =>{
-							this.dataForm = res.data;
+
+				// 2. 初始化展示层
+				this.fenceDisplayLayer = new TMap.MultiPolygon({
+					map: this.fenceMap,
+					geometries: [],
+					styles: {
+						default: new TMap.PolygonStyle({
+							color: 'rgba(41,182,246,0.2)',
+							borderColor: 'rgba(41,182,246,0.9)',
+							borderWidth: 2
 						})
 					}
+				});
+
+				// 3. 构建临时绘制图层：
+				//    - 一个多边形图层 polygonLayer
+				//    - 一个圆形图层 circleLayer
+				const polygonLayer = new TMap.MultiPolygon({
+					map: this.fenceMap,
+					geometries: [],
+					styles: {
+						default: new TMap.PolygonStyle({
+							color: 'rgba(255,152,0,0.2)',
+							borderColor: '#FF9800',
+							borderWidth: 2
+						})
+					}
+				});
+				const circleLayer = new TMap.MultiCircle({
+					map: this.fenceMap,
+					geometries: [],
+					styles: {
+						default: new TMap.CircleStyle({
+							color: 'rgba(255,152,0,0.2)',
+							borderColor: '#FF9800',
+							borderWidth: 2
+						})
+					}
+				});
+				this.fenceDrawLayers = {
+					polygon: polygonLayer,
+					circle: circleLayer
+				};
+
+				// 4. 初始化唯一编辑器（后续不再整体销毁，只清空内容）
+				this.fenceEditor = new TMap.tools.GeometryEditor({
+					map: this.fenceMap,
+					overlayList: [
+						{ overlay: polygonLayer, id: 'polygon' },
+						{ overlay: circleLayer, id: 'circle' }
+					],
+					actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW,
+					activeOverlayId: 'polygon',
+					snappable: true
+				});
+
+				// 5. 监听绘制完毕事件：每次只保留当前绘制结果为唯一围栏
+				this.fenceEditor.on('draw_complete', (geometry) => {
+					const toolId = this.activeFenceTool;
+					const points = this._extractPoints(toolId, geometry);
+
+					if (points && points.length >= 3) {
+						// 业务约束：无论之前画了什么，本次绘制即为“唯一围栏”
+						this.fenceBuffer = [{
+							id: `shape-${Date.now()}`,
+							type: toolId,
+							points: points
+						}];
+						this.refreshFenceDisplay();
+					}
+
+					// 绘制完毕后：不销毁 Editor，只清空对应图层的临时几何
+					const drawLayer = this.fenceDrawLayers[toolId];
+					if (drawLayer && typeof drawLayer.setGeometries === 'function') {
+						drawLayer.setGeometries([]);
+					}
+
+					// 延迟一帧重置绘制状态，避免与内部事件冲突
+					setTimeout(() => {
+						if (this.fenceEditor && window.TMap && window.TMap.tools && window.TMap.tools.constants) {
+							this.fenceEditor.setActiveOverlay(toolId);
+							this.fenceEditor.setActionMode(window.TMap.tools.constants.EDITOR_ACTION.DRAW);
+						}
+					}, 20);
+				});
+
+				this.refreshFenceDisplay();
+			});
+		},
+
+		changeFenceTool(id) {
+			this.activeFenceTool = id;
+			if (this.fenceEditor) {
+				// 清除可能画了一半的所有绘制层（去重后防止同一图层重复清理）
+				const uniqueLayers = Object.values(this.fenceDrawLayers).filter((layer, index, arr) => arr.indexOf(layer) === index);
+				uniqueLayers.forEach(layer => {
+					if (layer && typeof layer.setGeometries === 'function') {
+						layer.setGeometries([]);
+					}
+				});
+
+				this.fenceEditor.setActiveOverlay(id);
+				this.fenceEditor.setActionMode(window.TMap.tools.constants.EDITOR_ACTION.DRAW);
+			}
+		},
+
+		refreshFenceDisplay() {
+			if (!this.fenceDisplayLayer) return;
+			const TMap = window.TMap;
+			const geometries = this.fenceBuffer.map(item => {
+				const path = item.points.map(p => new TMap.LatLng(p.lat, p.lng));
+				// 闭合
+				if (path[0].getLat() !== path[path.length - 1].getLat() || path[0].getLng() !== path[path.length - 1].getLng()) {
+					path.push(path[0]);
+				}
+				return { id: item.id, paths: [path] };
+			});
+			this.fenceDisplayLayer.setGeometries(geometries);
+		},
+
+		removeBufferShape(index) {
+			this.fenceBuffer.splice(index, 1);
+			this.refreshFenceDisplay();
+		},
+
+		confirmFence() {
+			if (this.fenceBuffer.length !== 1) {
+				this.$message.warning('请确保最终只保留一个围栏');
+				return;
+			}
+			this.dataForm.fencePolygons = [this.fenceBuffer[0].points];
+			this.fenceVisible = false;
+		},
+
+		// 将 GeometryEditor 返回的几何统一转换为点数组
+		_extractPoints(toolId, geometry) {
+			if (!geometry) return []
+
+			// 通用：从 geometry 中尝试解析点数组（paths 或 path，一维或二维）
+			let pointsArray = []
+			if (Array.isArray(geometry.paths) && geometry.paths.length) {
+				const first = geometry.paths[0]
+				pointsArray = Array.isArray(first) ? first : geometry.paths
+			} else if (Array.isArray(geometry.path) && geometry.path.length) {
+				const first = geometry.path[0]
+				pointsArray = Array.isArray(first) ? first : geometry.path
+			}
+
+			// 多边形 / 矩形 / 椭圆：统一按点数组处理
+			if (['polygon', 'rectangle', 'ellipse'].includes(toolId)) {
+				if (!Array.isArray(pointsArray) || !pointsArray.length) return []
+				return pointsArray.map(p => ({
+					lng: typeof p.getLng === 'function' ? p.getLng() : p.lng,
+					lat: typeof p.getLat === 'function' ? p.getLat() : p.lat
+				}))
+			}
+
+			// 圆形：用中心 + 半径近似成 36 边多边形
+			if (toolId === 'circle' && geometry.center && geometry.radius) {
+				const center = geometry.center
+				const r = geometry.radius
+				const cLat = typeof center.getLat === 'function' ? center.getLat() : center.lat
+				const cLng = typeof center.getLng === 'function' ? center.getLng() : center.lng
+				const R = 6378137
+				const latRad = (cLat * Math.PI) / 180
+				return Array.from({ length: 36 }, (_, i) => {
+					const angle = (2 * Math.PI * i) / 36
+					return {
+						lat: cLat + (r * Math.cos(angle)) / R * (180 / Math.PI),
+						lng: cLng + (r * Math.sin(angle)) / (R * Math.cos(latRad)) * (180 / Math.PI)
+					}
 				})
-			},
-			dataFormSubmit() {
-				this.$refs['elForm'].validate((valid) => {
-                    if (valid) {
-                        if (!this.dataForm.id) {
-                            request({
-                                url: `/api/Extend/LqMdxx`,
-                                method: 'post',
-                                data: this.dataForm,
-                            }).then((res) => {
-                                this.$message({
-                                    message: res.msg,
-                                    type: 'success',
-                                    duration: 1000,
-                                    onClose: () => {
-                                        this.visible = false,
-                                            this.$emit('refresh', true)
-                                    }
-                                })
-                            })
-                        } else {
-                            request({
-                                url: '/api/Extend/LqMdxx/' + this.dataForm.id,
-                                method: 'PUT',
-                                data: this.dataForm
-                            }).then((res) => {
-                                this.$message({
-                                    message: res.msg,
-                                    type: 'success',
-                                    duration: 1000,
-                                    onClose: () => {
-                                        this.visible = false
-                                        this.$emit('refresh', true)
-                                    }
-                                })
-                            })
-                        }
-                    }
-                })
-			},
+			}
+
+			return []
+		},
+
+		getShapeIcon(type) {
+			const icons = { polygon: 'el-icon-picture', circle: 'el-icon-loading', rectangle: 'el-icon-full-screen', ellipse: 'el-icon-help' };
+			return icons[type] || 'el-icon-info';
+		},
+
+		getShapeName(type) {
+			const names = { polygon: '多边形', circle: '圆形', rectangle: '矩形', ellipse: '椭圆' };
+			return names[type] || '图形';
+		},
+
+		dataFormSubmit() {
+			this.$refs['elForm'].validate((valid) => {
+				if (!valid) return;
+				const isNew = !this.dataForm.id;
+				request({
+					url: isNew ? '/api/Extend/LqMdxx' : `/api/Extend/LqMdxx/${this.dataForm.id}`,
+					method: isNew ? 'POST' : 'PUT',
+					data: this.dataForm
+				}).then((res) => {
+					this.$message({
+						message: res.msg,
+						type: 'success',
+						duration: 1000,
+						onClose: () => {
+							this.visible = false;
+							this.$emit('refresh', true);
+						}
+					})
+				})
+			})
 		}
 	}
+}
 </script>
+
+<style lang="scss" scoped>
+.fence-status-bar {
+	display: flex;
+	align-items: center;
+	padding: 5px 0;
+
+	.hint-text {
+		font-size: 12px;
+		color: #f56c6c;
+		margin-left: 8px;
+	}
+}
+
+.map-dialog {
+	::v-deep .el-dialog__body {
+		padding: 10px 20px;
+	}
+}
+
+.map-container-wrapper {
+	.map-header-bar {
+		display: flex;
+		justify-content: space-between;
+		font-size: 13px;
+		color: #606266;
+		margin-bottom: 8px;
+
+		.coordinate-info {
+			color: #409eff;
+			font-weight: bold;
+		}
+	}
+}
+
+.map-canvas {
+	width: 100%;
+	height: 450px;
+	border-radius: 4px;
+	border: 1px solid #dcdfe6;
+}
+
+.fence-editor-layout {
+	display: flex;
+	height: 500px;
+	gap: 15px;
+
+	.map-side-panel {
+		width: 220px;
+		border: 1px solid #ebeef5;
+		border-radius: 4px;
+		display: flex;
+		flex-direction: column;
+
+		.panel-header {
+			padding: 10px;
+			background: #f5f7fa;
+			border-bottom: 1px solid #ebeef5;
+			font-weight: bold;
+			font-size: 14px;
+		}
+
+		.shape-list {
+			flex: 1;
+			overflow-y: auto;
+			padding: 10px;
+
+			.shape-item {
+				display: flex;
+				align-items: center;
+				padding: 8px;
+				margin-bottom: 8px;
+				background: #fdfdfd;
+				border: 1px solid #f2f2f2;
+				border-radius: 4px;
+
+				i {
+					margin-right: 8px;
+					color: #409eff;
+				}
+
+				.shape-name {
+					flex: 1;
+					font-size: 12px;
+				}
+
+				.delete-btn {
+					color: #f56c6c;
+					padding: 0;
+				}
+			}
+
+			.empty-text {
+				text-align: center;
+				color: #909399;
+				font-size: 12px;
+				margin-top: 50px;
+			}
+		}
+
+		.panel-footer {
+			padding: 10px;
+			border-top: 1px solid #ebeef5;
+
+			.warning-text {
+				font-size: 11px;
+				color: #e6a23c;
+				margin: 0;
+			}
+		}
+	}
+
+	.map-main-area {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+
+		.map-toolbar {
+			display: flex;
+			padding: 0 0 10px 0;
+			gap: 8px;
+
+			.tool-btn {
+				display: flex;
+				align-items: center;
+				padding: 5px 12px;
+				border: 1px solid #dcdfe6;
+				border-radius: 4px;
+				cursor: pointer;
+				background: #fff;
+				transition: all 0.2s;
+
+				&:hover {
+					border-color: #409eff;
+					color: #409eff;
+				}
+
+				&.active {
+					background: #ecf5ff;
+					border-color: #409eff;
+					color: #409eff;
+				}
+
+				.tool-icon {
+					width: 16px;
+					height: 16px;
+					margin-right: 6px;
+					background-size: cover;
+				}
+
+				.tool-label {
+					font-size: 12px;
+				}
+			}
+
+			.tool-icon--polygon {
+				background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
+			}
+
+			.tool-icon--circle {
+				background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
+			}
+
+			.tool-icon--rectangle {
+				background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');
+			}
+
+			.tool-icon--ellipse {
+				background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');
+			}
+		}
+	}
+}
+
+.footer-hint {
+	color: #f56c6c;
+	font-size: 12px;
+	margin-right: 20px;
+	display: inline-block;
+}
+</style>
\ No newline at end of file
--
libgit2 0.21.4