kaifabu/AssetsMap
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成初版

Browse Source
This commit is contained in:
RuicyWu
2026-07-22 17:23:49 +08:00
parent cf40ccbdb0
commit bf390e8f7e
37 changed files with 4387 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
seeyon/apps_res/cap/customeCtrlResources/goMapBtnResources/html/boundConfig.html
View File

@@ -126,22 +126,47 @@
</div>
<div class="panel-footer">
<button class="btn btn-primary" @click="confirmSave">确认保存</button>
<button class="btn btn-primary" @click="confirmSave">页面暂存</button>
<button class="btn btn-reset" @click="cancelClose">取消</button>
</div>
</div>
</div>
<script>
// 从父页面获取已有边界数据
var oldBoundConfig = '';
// Leaflet.draw 中文配置
L.drawLocal = {
draw: {
toolbar: {
actions: { title: '取消绘制', text: '取消' },
finish: { title: '完成绘制', text: '完成' },
undo: { title: '删除最后一个点', text: '删除最后一点' },
buttons: { polygon: '绘制多边形', polyline: '绘制折线', rectangle: '绘制矩形', circle: '绘制圆', marker: '放置标记', circlemarker: '放置圆形标记' }
},
handlers: {
polygon: { tooltip: { start: '点击开始绘制区域', cont: '点击继续绘制', end: '点击起点完成绘制' } },
polyline: { tooltip: { start: '点击开始绘制', cont: '点击继续', end: '点击最后一点完成' } },
rectangle: { tooltip: { start: '点击并拖动绘制矩形' } },
circle: { tooltip: { start: '点击并拖动绘制圆' } },
marker: { tooltip: { start: '点击放置标记' } },
circlemarker: { tooltip: { start: '点击放置圆形标记' } },
simpleshape: { tooltip: { end: '松开鼠标完成绘制' } }
}
},
edit: {
toolbar: {
actions: { save: { title: '保存修改', text: '保存' }, cancel: { title: '取消编辑', text: '取消' }, clearAll: { title: '清除所有', text: '清除全部' } },
buttons: { edit: '编辑边界', editDisabled: '没有可编辑的边界', remove: '删除边界', removeDisabled: '没有可删除的边界' }
},
handlers: { edit: { tooltip: { text: '拖动节点编辑边界', subtext: '点击取消撤销修改' } }, remove: { tooltip: { text: '点击要删除的边界' } } }
}
};
// 从父页面获取资产编号
var assetsId = '';
var _host = '';
try {
try {
var params = window.parentDialogObj['boundConfigDialog'].getTransParams();
console.log(window.parentDialogObj['boundConfigDialog'])
console.log('[boundConfig] 父页面传入的参数:', JSON.stringify(params));
oldBoundConfig = params.oldBoundConfig || '';
assetsId = params.assetsId || params.assetId || params.assetsNo || '';
} catch(e) {
console.warn('获取父页面参数异常:', e);
@@ -151,14 +176,13 @@
_host = window.parent.location.origin || '';
} catch(e) {}
console.log('[boundConfig] oldBoundConfig:', oldBoundConfig ? (oldBoundConfig.substring(0, 100) + '...') : '(空)');
console.log('[boundConfig] assetsId:', assetsId);
new Vue({
el: '#app',
data: {
map: null,
drawnItems: null,
color: '#ff0000',
color: '#27ae60',
regions: [],
assetsId: assetsId,
selectedRegionIndex: -1,
@@ -172,7 +196,7 @@
initMap() {
console.log('[boundConfig] initMap, assetsId:', assetsId);
this.map = L.map('map').setView([30.2856, 109.4783], 13);
L.tileLayer('http://localhost:3080/seeyon/seeyonExtend/assetsMap/map/{z}/{x}/{y}/tile.png', { maxZoom: 18, minZoom: 8 }).addTo(this.map);
L.tileLayer('http://sz.esdci.cn:52100/seeyon/seeyonExtend/assetsMap/map/{z}/{x}/{y}/tile.png', { maxZoom: 18, minZoom: 8 }).addTo(this.map);
this.drawnItems = L.featureGroup().addTo(this.map);
this.markerGroup = L.layerGroup().addTo(this.map);
this.markerIcon = L.divIcon({
@@ -201,7 +225,7 @@
// 绘制完成事件
this.map.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
var latlngs = layer.getLatLngs()[0].map(function(ll) { return [ll.lat, ll.lng]; });
var latlngs = layer.getLatLngs()[0].map(function(ll) { return [parseFloat(ll.lat.toFixed(8)), parseFloat(ll.lng.toFixed(8))]; });
if (self._drawingMode === 'hole' && self.selectedRegionIndex >= 0 && self.selectedRegionIndex < self.regions.length) {
// 挖洞：将绘制的多边形作为孔洞添加到选中的区域
@@ -227,11 +251,11 @@
var latlngs = layer.getLatLngs();
var idx = self.findRegionByLayer(layer);
if (idx >= 0) {
self.regions[idx].outer = latlngs[0].map(function(ll) { return [ll.lat, ll.lng]; });
self.regions[idx].outer = latlngs[0].map(function(ll) { return [parseFloat(ll.lat.toFixed(8)), parseFloat(ll.lng.toFixed(8))]; });
// 保留孔洞
var holes = [];
for (var i = 1; i < latlngs.length; i++) {
holes.push(latlngs[i].map(function(ll) { return [ll.lat, ll.lng]; }));
holes.push(latlngs[i].map(function(ll) { return [parseFloat(ll.lat.toFixed(8)), parseFloat(ll.lng.toFixed(8))]; }));
}
self.regions[idx].holes = holes;
self.regions[idx].holesCount = holes.length;
@@ -260,7 +284,6 @@
setTimeout(function() {
self.map.invalidateSize();
self.loadAssetLocation();
self.loadBoundData();
}, 200);
},
@@ -282,52 +305,31 @@
return -1;
},
loadBoundData() {
console.log('[boundConfig] loadBoundData, oldBoundConfig:', oldBoundConfig);
if (!oldBoundConfig) {
console.log('[boundConfig] oldBoundConfig为空，跳过');
return;
}
try {
var bound = typeof oldBoundConfig === 'string' ? JSON.parse(oldBoundConfig) : oldBoundConfig;
console.log('[boundConfig] 解析后的边界数据:', bound);
this.color = bound.color || '#ff0000';
this.syncDrawColor();
this.regions = this.normalizeBoundary(bound);
console.log('[boundConfig] regions数量:', this.regions.length);
this.refreshMap();
} catch(e) {
console.error('[boundConfig] 解析边界数据失败:', e, '原始数据:', oldBoundConfig);
}
},
// 根据 assetsId（资产编号）调接口获取经纬度，在地图上标点
/**
* 根据资产编号调 getAssetDetail 接口，一次获取经纬度和边界数据
* 在地图上标点 + 加载历史边界
*/
loadAssetLocation() {
if (!assetsId) {
console.log('[boundConfig] assetsId为空，跳过标点');
console.log('[boundConfig] assetsId为空，跳过');
return;
}
var self = this;
var url = _host + '/seeyon/rest/assetsRegion/getByBounds';
console.log('[boundConfig] 请求资产位置, url:', url, 'assetId:', assetsId);
fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ assetId: assetsId })
}).then(function(r) {
console.log('[boundConfig] 响应状态:', r.status);
return r.json();
}).then(function(d) {
console.log('[boundConfig] 资产位置返回:', d);
if (d.code === 0 && d.data && d.data.length > 0) {
var region = d.data[0];
var lat = parseFloat(region.lat);
var lng = parseFloat(region.lng);
console.log('[boundConfig] 经纬度:', lat, lng);
var url = _host + '/seeyon/rest/assetsRegion/getAssetDetail?assetCode=' + encodeURIComponent(assetsId);
console.log('[boundConfig] 请求资产详情, url:', url);
fetch(url)
.then(function(r) { return r.json(); })
.then(function(d) {
console.log('[boundConfig] 资产详情返回:', JSON.stringify(d));
if (d.code === 0 && d.data) {
var data = d.data;
var lat = parseFloat(data.lat);
var lng = parseFloat(data.lng);
// 标点
if (!isNaN(lat) && !isNaN(lng)) {
var m = L.marker([lat, lng], { icon: self.markerIcon });
m.bindPopup(
'<b>' + (region.assets && region.assets[0] ? region.assets[0].assetName : assetsId) + '</b><br>' +
'<b>' + (data.assetName || assetsId) + '</b><br>' +
'坐标：' + lat + ', ' + lng,
{ offset: [0, -24] }
);
@@ -335,11 +337,31 @@
self.map.setView([lat, lng], 16);
setTimeout(function() { m.openPopup(); }, 300);
}
// 加载边界数据
if (data.boundData) {
try {
var bound = typeof data.boundData === 'string' ? JSON.parse(data.boundData) : data.boundData;
console.log('[boundConfig] 解析后的边界数据:', bound);
if (bound && bound.regions && bound.regions.length > 0) {
self.color = bound.color || '#27ae60';
self.syncDrawColor();
self.regions = self.normalizeBoundary(bound);
console.log('[boundConfig] regions数量:', self.regions.length);
self.refreshMap();
} else {
console.log('[boundConfig] 边界数据为空或无regions');
}
} catch(e) {
console.error('[boundConfig] 解析边界数据失败:', e, '原始boundData:', data.boundData);
}
} else {
console.log('[boundConfig] 该资产无边界数据 (boundData为空)');
}
} else {
console.warn('[boundConfig] 未查到资产位置数据, code:', d.code, 'data:', d.data);
console.warn('[boundConfig] 未查到资产数据, code:', d.code);
}
}).catch(function(err) {
console.error('[boundConfig] 请求资产位置失败:', err);
console.error('[boundConfig] 请求资产详情失败:', err);
});
},
@@ -480,7 +502,7 @@
var result = JSON.stringify({ regions: cleanRegions, color: this.color });
// 设置返回值供父页面获取
window._boundConfigResult = result;
alert('数据已生成，请点击"确认保存"按钮完成保存');
alert('区域边界数据生成成功');
},
cancelClose() {