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-06-18 16:26:31 +08:00
parent 6ca67ec941
commit 8e3dd5e1cd
27 changed files with 5024 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
seeyon/WEB-INF/assetsmap/spring/spring.xml
View File

@@ -4,4 +4,7 @@
<bean id="assetsMapPlugin" class="com.seeyon.apps.assetsmap.AssetsMapPlugin"/>
<bean id="assetsMapConfigProvider" class="com.seeyon.apps.assetsmap.config.AssetsMapConfigProvider"/>
<bean id="assetsQueryService" class="com.seeyon.apps.assetsmap.service.AssetsQueryService"/>
<bean id="goMapFieldCtrl" class="com.seeyon.apps.assetsmap.fieldCtrl.GoMapFieldCtrl"/>
<bean id="boundConfigFieldCtrl" class="com.seeyon.apps.assetsmap.fieldCtrl.BoundConfigFieldCtrl"/>
<bean id="locationFieldCtrl" class="com.seeyon.apps.assetsmap.fieldCtrl.LocationFieldCtrl"/>
</beans>

36
seeyon/apps_res/cap/customeCtrlResources/goMapBtnResources/css/goMapBtn.css Normal file
View File

@@ -0,0 +1,36 @@
.customButton_class_box {
width: 35%;
line-height: 24px;
height:24px;
color: #1f85ec;
cursor: pointer;
font-family: "Microsoft YaHei"!important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break:keep-all;
box-sizing: border-box;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
text-align: center;
outline: none;
border: 1px solid #1f85ec;
background-color: #fff;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
.customInputArea{
width: 65%;
height:auto;
color: #1f85ec;
font-family: "Microsoft YaHei"!important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break:keep-all;
}
.customButton_box_content{
width: 100%;
height: auto;
}

BIN
seeyon/apps_res/cap/customeCtrlResources/goMapBtnResources/css/img/icon16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

498
seeyon/apps_res/cap/customeCtrlResources/goMapBtnResources/html/boundConfig.html Normal file
View File

@@ -0,0 +1,498 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>配置资产边界</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; font-family:"Microsoft YaHei",Arial,sans-serif; }
#app { display:flex; height:100%; }
/* 左侧地图 */
#mapWrap { flex:1; position:relative; min-width:0; }
#map { height:100%; width:100%; }
/* 右侧配置面板 */
#configPanel {
width:360px; height:100%; background:#fff;
border-left:1px solid #e0e0e0; display:flex; flex-direction:column;
flex-shrink:0; z-index:10000;
}
.panel-header {
padding:12px 16px; background:#f7f8fa; border-bottom:1px solid #eee;
font-size:14px; font-weight:bold; color:#333; flex-shrink:0;
}
.panel-body {
flex:1; overflow-y:auto; padding:12px 16px;
}
.panel-footer {
padding:10px 16px; border-top:1px solid #eee; display:flex; gap:8px; flex-shrink:0;
}
/* 基本设置 */
.setting-row {
display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.setting-row label { font-size:12px; color:#888; white-space:nowrap; }
.setting-row input[type="color"] { width:36px; height:30px; border:1px solid #ddd; border-radius:4px; cursor:pointer; }
.setting-row span { font-size:12px; color:#888; }
/* 区域卡片 */
.region-card {
border:1px solid #e0e0e0; border-radius:6px; padding:10px 12px;
margin-bottom:8px; background:#fafafa; cursor:pointer;
}
.region-card:hover { border-color:#27ae60; }
.region-card.selected { border-color:#27ae60; background:#e8f5e9; }
.region-header {
display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
}
.region-header span { font-size:13px; font-weight:bold; color:#333; }
.region-header .del-btn { color:#e74c3c; cursor:pointer; font-size:16px; padding:0 4px; }
.region-info { font-size:12px; color:#888; }
.hole-info { font-size:11px; color:#e74c3c; margin-top:4px; padding-left:10px; border-left:2px solid #e74c3c; }
/* 按钮 */
.btn {
flex:1; padding:9px 0; border:none; border-radius:6px;
cursor:pointer; font-size:13px; font-weight:bold; transition:all 0.2s;
}
.btn-primary { background:#27ae60; color:#fff; }
.btn-primary:hover { background:#219653; }
.btn-success { background:#3498db; color:#fff; }
.btn-reset { background:#f0f0f0; color:#666; border:1px solid #ddd; }
.btn-danger { background:#e74c3c; color:#fff; }
.tip { font-size:11px; color:#999; margin-top:4px; }
/* 移动端 */
@media (max-width:768px) {
#app { flex-direction:column; }
#mapWrap { height:50%; flex:none; }
#configPanel { width:100%; height:50%; flex:none; border-left:none; border-top:1px solid #e0e0e0; }
}
</style>
</head>
<body>
<div id="app">
<div id="mapWrap"><div id="map"></div></div>
<div id="configPanel">
<div class="panel-header">配置资产区域边界</div>
<div class="panel-body">
<!-- 颜色 -->
<div class="setting-row">
<label>边界颜色：</label>
<input type="color" v-model="color" @change="onColorChange">
<span>{{color}}</span>
</div>
<!-- 区域列表 -->
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
<span style="font-size:13px;font-weight:bold;">区域列表 ({{regions.length}})</span>
<button class="btn btn-primary" style="flex:none;padding:5px 12px;" @click="addRegion">+ 新增区域</button>
</div>
<div v-if="regions.length === 0" style="text-align:center;padding:20px;color:#ccc;">
暂无区域，点击"新增区域"开始
</div>
<div v-for="(r, ri) in regions" :key="r.id"
class="region-card" :class="{selected: selectedRegionIndex === ri}"
@click="selectRegionCard(ri)">
<div class="region-header">
<span>区域 {{ri + 1}} <span style="font-size:11px;color:#aaa;">ID:{{r.id}}</span></span>
<span class="del-btn" @click.stop="removeRegion(ri)">&times;</span>
</div>
<div class="region-info">
外圈：{{r.outer ? r.outer.length : 0}} 个点
<span v-if="r.holes && r.holesCount > 0"> ｜ 孔洞：{{r.holesCount}} 个</span>
</div>
<div v-if="r.holes && r.holesCount > 0" class="hole-info">
孔洞共 {{r.holesCount}} 个
</div>
<div style="display:flex;gap:4px;margin-top:6px;">
<button class="btn" style="flex:none;padding:3px 8px;font-size:11px;background:#9b59b6;color:#fff;border:none;border-radius:4px;cursor:pointer;" @click.stop="startDrawHole(ri)">挖洞</button>
<button v-if="r.holes && r.holesCount > 0" class="btn" style="flex:none;padding:3px 8px;font-size:11px;background:#e67e22;color:#fff;border:none;border-radius:4px;cursor:pointer;" @click.stop="clearHoles(ri)">清除孔洞</button>
</div>
</div>
<div class="tip">提示：点击区域卡片选中后，可在地图上看到高亮显示</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" @click="confirmSave">确认保存</button>
<button class="btn btn-reset" @click="cancelClose">取消</button>
</div>
</div>
</div>
<script>
// 从父页面获取已有边界数据
var oldBoundConfig = '';
var assetsId = '';
var _host = '';
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);
}
// 尝试从父页面URL推断host
try {
_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',
regions: [],
assetsId: assetsId,
selectedRegionIndex: -1,
_drawingMode: null // 'new' | 'hole'
},
mounted() {
this.initMap();
},
methods: {
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);
this.drawnItems = L.featureGroup().addTo(this.map);
this.markerGroup = L.layerGroup().addTo(this.map);
this.markerIcon = L.divIcon({
html: '<img src="./markicon.png" style="width:48px;height:48px;" onerror="this.style.display=\'none\';this.parentNode.innerHTML=\'<div style=width:24px;height:24px;background:#e74c3c;border-radius:50%;border:3px solid #fff;box-shadow:0 0 4px rgba(0,0,0,0.4);></div>\';">',
className: 'custom-marker-icon',
iconSize: [48, 48],
iconAnchor: [24, 24]
});
// 绘制控件
var self = this;
this.drawControl = new L.Control.Draw({
draw: {
polygon: {
allowIntersection: false,
shapeOptions: { color: self.color, weight: 2, fillOpacity: 0.3 }
},
polyline: false, rectangle: false, circle: false, circlemarker: false, marker: false
},
edit: { featureGroup: self.drawnItems, remove: true }
});
this.map.addControl(this.drawControl);
// 同步颜色到绘制控件
this.syncDrawColor();
// 绘制完成事件
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]; });
if (self._drawingMode === 'hole' && self.selectedRegionIndex >= 0 && self.selectedRegionIndex < self.regions.length) {
// 挖洞：将绘制的多边形作为孔洞添加到选中的区域
var region = self.regions[self.selectedRegionIndex];
if (!region.holes) region.holes = [];
region.holes.push(latlngs);
region.holesCount = region.holes.length;
} else if (self._pendingRegionIndex >= 0 && self._pendingRegionIndex < self.regions.length) {
self.regions[self._pendingRegionIndex].outer = latlngs;
} else {
self.regions.push({ id: self.generateId(), outer: latlngs, holes: [], holesCount: 0 });
self.selectedRegionIndex = self.regions.length - 1;
}
self._drawingMode = null;
self._pendingRegionIndex = -1;
self.refreshMap();
});
// 编辑完成事件
this.map.on(L.Draw.Event.EDITED, function(e) {
var layers = e.layers;
layers.eachLayer(function(layer) {
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]; });
// 保留孔洞
var holes = [];
for (var i = 1; i < latlngs.length; i++) {
holes.push(latlngs[i].map(function(ll) { return [ll.lat, ll.lng]; }));
}
self.regions[idx].holes = holes;
self.regions[idx].holesCount = holes.length;
}
});
self.refreshMap();
});
// 删除事件
this.map.on(L.Draw.Event.DELETED, function(e) {
// 删除对应 region
e.layers.eachLayer(function(layer) {
var idx = self.findRegionByLayer(layer);
if (idx >= 0) {
self.regions.splice(idx, 1);
}
});
if (self.selectedRegionIndex >= self.regions.length) {
self.selectedRegionIndex = self.regions.length - 1;
}
self.refreshMap();
});
this._pendingRegionIndex = -1;
setTimeout(function() {
self.map.invalidateSize();
self.loadAssetLocation();
self.loadBoundData();
}, 200);
},
findRegionByLayer(layer) {
if (layer._regionIndex !== undefined && layer._regionIndex >= 0) {
return layer._regionIndex;
}
var latlngs = layer.getLatLngs()[0];
if (!latlngs || latlngs.length === 0) return -1;
var firstPt = [latlngs[0].lat, latlngs[0].lng];
for (var i = 0; i < this.regions.length; i++) {
var r = this.regions[i];
if (r.outer && r.outer.length > 0 &&
Math.abs(r.outer[0][0] - firstPt[0]) < 0.0001 &&
Math.abs(r.outer[0][1] - firstPt[1]) < 0.0001) {
return i;
}
}
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（资产编号）调接口获取经纬度，在地图上标点
loadAssetLocation() {
if (!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);
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>' +
'坐标：' + lat + ', ' + lng,
{ offset: [0, -24] }
);
m.addTo(self.markerGroup);
self.map.setView([lat, lng], 16);
setTimeout(function() { m.openPopup(); }, 300);
}
} else {
console.warn('[boundConfig] 未查到资产位置数据, code:', d.code, 'data:', d.data);
}
}).catch(function(err) {
console.error('[boundConfig] 请求资产位置失败:', err);
});
},
normalizeBoundary(bound) {
if (!bound) return [];
var self = this;
if (bound.regions && Array.isArray(bound.regions)) {
return bound.regions.map(function(r) {
var holes = r.holes || [];
return {
id: r.id || self.generateId(),
outer: r.outer || [],
holes: holes,
holesCount: holes.length
};
});
}
if (!bound.polygon || bound.polygon.length === 0) return [];
var polygon = bound.polygon;
if (typeof polygon[0][0] === 'number') {
return [{ id: self.generateId(), outer: polygon, holes: [], holesCount: 0 }];
}
if (typeof polygon[0][0][0] === 'number') {
return [{ id: self.generateId(), outer: polygon[0], holes: polygon.slice(1), holesCount: polygon.length - 1 }];
}
return polygon.map(function(r) {
if (typeof r[0][0] === 'number') {
return { id: self.generateId(), outer: r, holes: [], holesCount: 0 };
}
var h = r.slice(1);
return { id: self.generateId(), outer: r[0], holes: h, holesCount: h.length };
});
},
generateId() {
return Date.now() * 1000 + Math.floor(Math.random() * 1000);
},
onColorChange() {
this.syncDrawColor();
this.refreshMap();
},
syncDrawColor() {
// 重建绘制控件以同步颜色
if (this.drawControl) {
this.map.removeControl(this.drawControl);
}
var self = this;
this.drawControl = new L.Control.Draw({
draw: {
polygon: {
allowIntersection: false,
shapeOptions: { color: self.color, fillColor: self.color, weight: 2, fillOpacity: 0.3 }
},
polyline: false, rectangle: false, circle: false, circlemarker: false, marker: false
},
edit: { featureGroup: self.drawnItems, remove: true }
});
this.map.addControl(this.drawControl);
},
refreshMap() {
this.drawnItems.clearLayers();
var self = this;
this.regions.forEach(function(region, idx) {
if (!region.outer || region.outer.length < 3) return;
var rings = [region.outer].concat(region.holes || []);
var isSelected = (idx === self.selectedRegionIndex);
var polygon = L.polygon(rings, {
color: isSelected ? '#27ae60' : self.color,
fillColor: isSelected ? '#27ae60' : self.color,
weight: isSelected ? 4 : 2,
fillOpacity: isSelected ? 0.5 : 0.3
});
polygon._regionIndex = idx;
self.drawnItems.addLayer(polygon);
});
if (this.drawnItems.getLayers().length > 0) {
this.map.fitBounds(this.drawnItems.getBounds(), { padding: [30, 30] });
}
},
selectRegionCard(index) {
this.selectedRegionIndex = index;
this.refreshMap();
},
addRegion() {
// 直接触发多边形绘制，绘制完成后再添加到 regions
this._pendingRegionIndex = -1;
this._drawingMode = 'new';
new L.Draw.Polygon(this.map, {
shapeOptions: { color: this.color, weight: 2, fillOpacity: 0.3 },
allowIntersection: false
}).enable();
},
startDrawHole(index) {
if (!this.regions[index] || !this.regions[index].outer || this.regions[index].outer.length < 3) {
alert('请先绘制外圈边界！');
return;
}
this.selectedRegionIndex = index;
this._drawingMode = 'hole';
new L.Draw.Polygon(this.map, {
shapeOptions: { color: '#9b59b6', weight: 2, fillOpacity: 0.3 },
allowIntersection: false
}).enable();
},
clearHoles(index) {
if (this.regions[index]) {
this.regions[index].holes = [];
this.regions[index].holesCount = 0;
this.refreshMap();
}
},
removeRegion(index) {
this.regions.splice(index, 1);
if (this.selectedRegionIndex >= this.regions.length) {
this.selectedRegionIndex = this.regions.length - 1;
}
this.refreshMap();
},
confirmSave() {
var cleanRegions = this.regions
.filter(function(r) { return r.outer && r.outer.length >= 3; })
.map(function(r) {
return {
id: r.id,
outer: r.outer,
holes: (r.holes || []).filter(function(h) { return h && h.length >= 3; })
};
});
var result = JSON.stringify({ regions: cleanRegions, color: this.color });
// 设置返回值供父页面获取
window._boundConfigResult = result;
alert('数据已生成，请点击"确认保存"按钮完成保存');
},
cancelClose() {
window._boundConfigResult = '';
}
}
});
function OK() {
// 弹框框架调用此函数获取返回值
return window._boundConfigResult || '';
}
</script>
</body>
</html>

191
seeyon/apps_res/cap/customeCtrlResources/goMapBtnResources/html/location.html Normal file
View File

@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>坐标定位</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei",Arial,sans-serif; height:100vh; display:flex; overflow:hidden; }
#app { display:flex; width:100%; height:100vh; }
#mapWrap { flex:1; position:relative; min-width:0; height:100%; }
#map { height:100%; width:100%; }
#sidePanel {
width:320px; height:100vh; background:#fff;
border-left:1px solid #e0e0e0;
display:flex; flex-direction:column; flex-shrink:0;
position:relative; z-index:10000;
box-shadow:-2px 0 12px rgba(0,0,0,0.08);
}
.panel-section {
padding:16px; border-bottom:2px solid #eee; flex-shrink:0;
}
.panel-section .title {
font-size:14px; font-weight:bold; color:#333; margin-bottom:12px;
}
.input-group {
margin-bottom:10px;
}
.input-group label {
display:block; font-size:12px; color:#888; margin-bottom:4px;
}
.input-group input {
width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px;
font-size:14px; background:#fff;
}
.input-group input:focus {
outline:none; border-color:#27ae60; box-shadow:0 0 0 2px rgba(39,174,96,0.1);
}
.btn {
width:100%; padding:10px 0; border:none; border-radius:6px;
cursor:pointer; font-size:14px; font-weight:bold; transition:all 0.2s;
}
.btn-primary { background:#27ae60; color:#fff; }
.btn-primary:hover { background:#219653; }
.tip-box {
padding:10px 12px; background:#f0fff0; border:1px solid #d4edda;
border-radius:6px; font-size:12px; color:#27ae60; margin-top:12px;
}
.tip-box b { color:#333; }
.custom-marker-icon { background:none !important; border:none !important; }
@media (max-width:768px) {
#app { display:block; position:relative; }
#mapWrap { width:100%; height:55%; }
#sidePanel {
position:absolute; bottom:0; left:0;
width:100%; height:45%;
border-left:none; border-top:1px solid #e0e0e0;
border-radius:12px 12px 0 0;
box-shadow:0 -2px 12px rgba(0,0,0,0.08);
}
.input-group input { min-height:44px; font-size:15px; }
.btn { min-height:44px; }
}
</style>
</head>
<body>
<div id="app">
<div id="mapWrap"><div id="map"></div></div>
<div id="sidePanel">
<div class="panel-section">
<div class="title">坐标定位</div>
<div class="input-group">
<label>纬度 (纬度在前)</label>
<input type="text" v-model="lat" placeholder="如：30.2856" @keyup.enter="locateByCoord" class="lat-tag">
</div>
<div class="input-group">
<label>经度 (经度在后)</label>
<input type="text" v-model="lng" placeholder="如：109.4783" @keyup.enter="locateByCoord" class="lng-tag">
</div>
<button class="btn btn-primary" @click="locateByCoord">定位到此坐标</button>
</div>
<div class="panel-section" v-if="lat && lng">
<div class="title">当前坐标</div>
<div class="tip-box">
纬度：<b>{{lat}}</b><br>
经度：<b>{{lng}}</b>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
map: null,
markerGroup: null,
markerIcon: null,
activeMarker: null,
lat: '',
lng: ''
},
mounted() {
this.initMap();
// 从URL参数读取初始坐标
var params = new URLSearchParams(window.location.search);
var initLat = parseFloat(params.get('lat'));
var initLng = parseFloat(params.get('lng'));
if (!isNaN(initLat) && !isNaN(initLng)) {
this.lat = initLat + '';
this.lng = initLng + '';
this.locateByCoord();
}
},
methods: {
initMap() {
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);
var self = this;
setTimeout(function() { self.map.invalidateSize(); }, 100);
this.markerIcon = L.divIcon({
html: '<img src="./markicon.png" style="width:48px;height:48px;">',
className: 'custom-marker-icon',
iconSize: [48, 48],
iconAnchor: [24, 24]
});
this.markerGroup = L.layerGroup().addTo(this.map);
// 点击地图：放大到18级，回写经纬度
this.map.on('click', function(e) {
var clickLat = parseFloat(e.latlng.lat.toFixed(6));
var clickLng = parseFloat(e.latlng.lng.toFixed(6));
self.lat = clickLat + '';
self.lng = clickLng + '';
self.placeMarker(clickLat, clickLng);
self.map.setView([clickLat, clickLng], 18);
});
},
// 输入坐标定位
locateByCoord() {
var lat = parseFloat(this.lat);
var lng = parseFloat(this.lng);
if (isNaN(lat) || isNaN(lng)) {
alert('请输入有效的经纬度');
return;
}
this.placeMarker(lat, lng);
this.map.setView([lat, lng], 18);
},
// 在地图上放置标记
placeMarker(lat, lng) {
this.markerGroup.clearLayers();
var self = this;
var m = L.marker([lat, lng], { icon: this.markerIcon });
m.bindPopup(
'纬度：<b>' + lat + '</b><br>经度：<b>' + lng + '</b>',
{ offset: [0, -24] }
);
m.addTo(this.markerGroup);
self.activeMarker = m;
setTimeout(function() { m.openPopup(); }, 200);
}
}
});
function OK() {
var latlng = '';
const latText = $('.lat-tag').val();
const lngText = $('.lng-tag').val();
latlng = latText + "," +lngText
return latlng;
}
</script>
</body>
</html>

BIN
seeyon/apps_res/cap/customeCtrlResources/goMapBtnResources/html/markicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

177
seeyon/apps_res/cap/customeCtrlResources/goMapBtnResources/js/boundConfig.js Normal file
View File

@@ -0,0 +1,177 @@
(function (factory) {
var nameSpace = 'field_17179214358792461983';
if (!window[nameSpace]) {
console.log("开始实例化边界区域配置按钮")
var Builder = factory();
window[nameSpace] = { instance: {} };
window[nameSpace].init = function (options) {
window[nameSpace].instance[options.privateId] = new Builder(options);
};
}
})(function () {
function App(options) {
var self = this;
self.initParams(options);
self.initDom();
self.events();
}
App.prototype = {
initParams: function (options) {
var self = this;
self.adaptation = options.adaptation;
self.privateId = options.privateId;
self.preUrl = options.url_prefix;
self.adaptation.formMessage = options.formMessage;
self.messageObj = options.getData;
},
initDom: function () {
var self = this;
// 修复：避免重复加载CSS
if (!document.querySelector('link[href="' + self.preUrl + '/css/goMapBtn.css' + '"]')) {
dynamicLoading.css(self.preUrl + '/css/goMapBtn.css');
}
self.appendChildDom();
},
events: function () {
var self = this;
self.adaptation.ObserverEvent.listen('Event' + self.privateId, function () {
self.messageObj = self.adaptation.childrenGetData(self.privateId);
self.appendChildDom();
});
},
openBoundConfig: function (privateId,messageObj,adaptation) {
var self = this;
messageObj = adaptation.childrenGetData(privateId);
var targetObj = messageObj.formdata.formmains[messageObj.formdata.alldata.tableInfo.formmain.tableName];
var boundData = '';
var assetsId = '';
if (targetObj) {
for (var key in targetObj) {
if (targetObj.hasOwnProperty(key) && !/^auxiliary/.test(key)) {
var display = targetObj[key].display;
// 修复：去掉未定义的 fieldMap
if (display === "资产边界数据") {
boundData = targetObj[key].showValue;
}
if (display === "资产编号") {
assetsId = targetObj[key].showValue;
}
}
}
}
var dialog = $.dialog({
id: 'boundConfigDialog',
url: self.preUrl + '/html/boundConfig.html',
width: 1100,
height: 750,
title: '配置资产区域边界',
transParams: { oldBoundConfig: boundData, assetsId: assetsId },
type: 'panel',
checkMax: true,
closeParam: {
'show': false,
autoClose: false,
handler: function () { }
},
buttons: [{
text: "确认保存",
handler: function () {
var result = dialog.getReturnValue();
console.log("资产边界数据: " + result)
// 修复：参数顺序与回填对应
backFill(result, messageObj.id, "资产边界数据", privateId, messageObj, adaptation);
dialog.close()
}
}, {
text: "取消",
handler: function () {
dialog.close();
}
}]
});
},
appendChildDom: function () {
var self = this;
var doJump = function () {
self.openBoundConfig(self.privateId, self.messageObj, self.adaptation);
};
var domStructure = '<section class="customButton_box_content">' +
'<div class="customButton_class_box ' + self.privateId + '" title="' + self.messageObj.display.escapeHTML() + '">' + self.messageObj.display.escapeHTML() + '</div>' +
'</section>';
var $container = document.querySelector('#' + self.privateId);
if (!$container) return;
$container.innerHTML = domStructure;
var $btn = document.querySelector('.' + self.privateId);
if ($btn) {
$btn.removeEventListener('click', doJump);
$btn.addEventListener('click', doJump);
}
if (self.messageObj.auth === 'hide') {
$container.innerHTML = '<div class="cap4-text__browse" style="line-height: 1.8; color: rgb(0, 0, 0) !important;">***</div>';
}
}
};
function backFill(boundConfig, fieldName, fieldDisplay, privateId, messageObj, adaptation) {
var param = {};
param.masterId = messageObj.formdata.content.contentDataId;
param.value = boundConfig;
param.formId = messageObj.formdata.content.contentTemplateId;
param.fieldName = fieldName;
param.fieldDisplay = fieldDisplay;
$.ajax({
type: "POST",
url: '/seeyon/rest/assetsRegion/formBackFill',
data: JSON.stringify(param),
dataType: "json",
contentType: 'application/json;charset=UTF-8',
success: function (res) {
if (res.code == 0) {
var backfillData = {};
backfillData.tableName = adaptation.formMessage.tableName;
backfillData.tableCategory = 'formmain';
backfillData.updateData = res.data;
adaptation.backfillFormControlData(backfillData, privateId);
} else {
$.alert(res.message);
}
},
error: function (e) {
top.$.error(e.responseText || '保存失败');
}
});
}
var dynamicLoading = {
css: function (path) {
if (!path) return;
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
},
js: function (path) {
if (!path) return;
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
}
}
return App;
});

114
seeyon/apps_res/cap/customeCtrlResources/goMapBtnResources/js/goMapInit.js Normal file
View File

@@ -0,0 +1,114 @@
(function (factory) {
var nameSpace = 'field_17179215134928371056';
if (!window[nameSpace]) {
console.log("开始实例化跳转地图按钮")
var Builder = factory();
window[nameSpace] = {
instance: {}
};
window[nameSpace].init = function (options) {
window[nameSpace].instance[options.privateId] = new Builder(options);
};
}
})(function () {
function App(options) {
var self = this;
self.initParams(options);
//初始化dom
self.initDom();
//事件
self.events();
}
App.prototype = {
initParams: function (options) {
console.log("开始初始化参数")
var self = this;
self.adaptation = options.adaptation;
self.privateId = options.privateId;
self.preUrl = options.url_prefix;
self.adaptation.formMessage = options.formMessage;
self.messageObj = options.getData;
console.log(self.messageObj)
},
initDom: function () {
var self = this;
console.log("开始渲染dom")
dynamicLoading.css(self.preUrl + '/css/goMapBtn.css');
self.appendChildDom();
},
events: function () {
var self = this;
// 监听是否数据刷新
console.log("设置事件监听")
self.adaptation.ObserverEvent.listen('Event' + self.privateId, function () {
self.messageObj = self.adaptation.childrenGetData(self.privateId);
self.appendChildDom();
});
},
goMap: function (privateId, messageObj, adaptation) {
// 获取表单中的资产编号，跳转到资产地图
console.log("privateId:" + privateId)
console.log("messageObj:" + messageObj)
console.log(adaptation)
messageObj = adaptation.childrenGetData(privateId);
var targetObj = messageObj.formdata.formmains[adaptation.formMessage.tableName];
if (!targetObj) return;
var assetNo;
for (var key in targetObj) {
if (targetObj.hasOwnProperty(key) && !/^auxiliary/.test(key)) {
if (targetObj[key].display === "资产编号") {
assetNo = targetObj[key].showValue;
break;
}
}
}
if (assetNo) {
var baseUrl = window.location.origin + '/seeyon/seeyonExtend/assetsMap/map.html';
window.open(baseUrl + '?assetId=' + encodeURIComponent(assetNo), '_blank');
} else {
$.alert('未找到资产编号字段');
}
},
appendChildDom: function () {
var self = this;
var doJump = function () {
self.goMap(self.privateId, self.messageObj, self.adaptation)
}
var domStructure = '<section class="customButton_box_content">' +
'<div class="customButton_class_box ' + self.privateId + '" title="' + self.messageObj.display.escapeHTML() + '">' + self.messageObj.display.escapeHTML() + '</div>' +
'</section>';
document.querySelector('#' + self.privateId).innerHTML = domStructure;
var content = self.messageObj.formdata.content
document.querySelector('.' + self.privateId).removeEventListener('click', doJump);
document.querySelector('.' + self.privateId).addEventListener('click', doJump);
}
};
var dynamicLoading = {
css: function (path) {
if (!path || path.length === 0) {
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
},
js: function (path) {
if (!path || path.length === 0) {
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
}
}
return App;
});

166
seeyon/apps_res/cap/customeCtrlResources/goMapBtnResources/js/location.js Normal file
View File

@@ -0,0 +1,166 @@
(function(factory) {
var nameSpace = 'field_17179214358792461984';
if (!window[nameSpace]) {
console.log("开始实例化资产定位按钮")
var Builder = factory();
window[nameSpace] = {
instance: {}
};
window[nameSpace].init = function(options) {
window[nameSpace].instance[options.privateId] = new Builder(options);
};
}
})(function() {
function App(options) {
var self = this;
self.initParams(options);
//初始化dom
self.initDom();
//事件
self.events();
}
App.prototype = {
initParams: function(options) {
console.log("开始初始化参数")
var self = this;
self.adaptation = options.adaptation;
self.privateId = options.privateId;
self.preUrl = options.url_prefix;
self.adaptation.formMessage = options.formMessage;
self.messageObj = options.getData;
console.log(self.messageObj)
},
initDom: function() {
var self = this;
console.log("开始渲染dom")
dynamicLoading.css(self.preUrl + '/css/goMapBtn.css');
self.appendChildDom();
},
events: function() {
var self = this;
// 监听是否数据刷新
console.log("设置事件监听")
self.adaptation.ObserverEvent.listen('Event' + self.privateId, function() {
self.messageObj = self.adaptation.childrenGetData(self.privateId);
self.appendChildDom();
});
},
goLocation: function(privateId,messageObj,adaptation) {
var privateId1;
var privateId2;
messageObj = adaptation.childrenGetData(privateId);
var tableName = messageObj.formdata.alldata.tableInfo.formmain.tableName
var dialog = $.dialog({
id: 'dialog',
url: this.preUrl + '/html/location.html',
width: 1080,
height: 720,
title: '资产位置定位',
type: 'panel',
checkMax: true,
closeParam: {
'show': false,
autoClose: false,
handler: function() {}
},
buttons: [{
text: "确认",
handler: function() {
var latlng = dialog.getReturnValue();
// 回填数据
const [lat, lng] = latlng.split(',');
backFill(lat, messageObj.id, "纬度-", privateId,messageObj, adaptation,tableName);
backFill(lng, messageObj.id, "经度-", privateId,messageObj, adaptation,tableName);
dialog.close()
}
}, {
text: "取消",
handler: function() {
dialog.close()
}
}]
});
},
appendChildDom: function() {
var self = this;
var doBiz = function() {
self.goLocation(self.privateId, self.messageObj, self.adaptation)
}
var domStructure = '<section class="customButton_box_content">' +
'<div class="customButton_class_box ' + self.privateId + '" title="' + self.messageObj.display
.escapeHTML() + '">' + self.messageObj.display.escapeHTML() + '</div>' +
'</section>';
document.querySelector('#' + self.privateId).innerHTML = domStructure;
var content = self.messageObj.formdata.content
document.querySelector('.' + self.privateId).removeEventListener('click', doBiz);
document.querySelector('.' + self.privateId).addEventListener('click', doBiz);
//渲染隐藏权限
if (self.messageObj.auth === 'hide') {
document.querySelector('#' + self.privateId).innerHTML =
'<div class="cap4-text__browse" style="line-height: 1.8; color: rgb(0, 0, 0) !important;">***</div>';
}
}
};
function backFill(latlng, fieldName, fieldDisplay, privateId, messageObj, adaptation,tableName) {
var param = new Object();
param.masterId = messageObj.formdata.content.contentDataId;
param.value = latlng;
param.formId = messageObj.formdata.content.contentTemplateId;
param.fieldDisplay = fieldDisplay;
$.ajax({
type: "POST",
url: '/seeyon/rest/assetsRegion/formBackFill',
data: JSON.stringify(param),
dataType: "json",
contentType: 'application/json;charset=UTF-8',
success: function(res) {
// 后台解析数据后 将数据填写到表单中
if (res.code == 0) {
var backfill = {};
backfill.tableName = tableName;
// 回填主表
backfill.tableCategory = 'formmain';
// 后台组装的data数据
console.log(res.data)
backfill.updateData = res.data;
adaptation.backfillFormControlData(backfill, privateId);
} else {
// 报错
$.alert(res.message);
}
},
complete: function() {},
error: function(e) {
top.$.error(e.responseText);
}
});
}
var dynamicLoading = {
css: function(path) {
if (!path || path.length === 0) {
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
},
js: function(path) {
if (!path || path.length === 0) {
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
}
}
return App;
});