|
|
|
@ -15,6 +15,8 @@ |
|
|
|
:coordinateFormat="coordinateFormat" |
|
|
|
@draw-complete="handleMapDrawComplete" |
|
|
|
@drawing-points-update="missionDrawingPointsCount = $event" |
|
|
|
@platform-route-drawing-started="missionDrawingActive = true" |
|
|
|
@drawing-cancelled="missionDrawingActive = false" |
|
|
|
@open-waypoint-dialog="handleOpenWaypointEdit" |
|
|
|
@open-route-dialog="handleOpenRouteEdit" |
|
|
|
@scale-click="handleScaleClick" |
|
|
|
@ -41,11 +43,17 @@ |
|
|
|
<div class="red-dot"></div> |
|
|
|
<i class="el-icon-s-unfold icon-inside"></i> |
|
|
|
</div> |
|
|
|
<el-dialog title="保存新航线" :visible.sync="showNameDialog" width="30%" :append-to-body="true"> |
|
|
|
<el-dialog title="保存新航线" :visible.sync="showNameDialog" width="30%" :append-to-body="true" @open="onSaveRouteDialogOpen" @close="tempMapPlatform = null; saveDialogScenarioId = null"> |
|
|
|
<el-form label-width="80px"> |
|
|
|
<el-form-item label="航线名称"> |
|
|
|
<el-input v-model="newRouteName" placeholder="例如:航线一"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所属方案"> |
|
|
|
<el-select v-model="saveDialogScenarioId" placeholder="请选择方案" style="width:100%" clearable> |
|
|
|
<el-option v-for="p in plans" :key="p.id" :label="p.name" :value="p.id" /> |
|
|
|
</el-select> |
|
|
|
<div v-if="plans.length === 0" class="el-form-item__error" style="margin-top:4px;">暂无方案,请先点击地图左侧红点展开菜单,选择「方案」并新建方案后再保存。</div> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="showNameDialog = false">取 消</el-button> |
|
|
|
@ -468,6 +476,10 @@ export default { |
|
|
|
showNameDialog: false, |
|
|
|
newRouteName: '', |
|
|
|
tempMapPoints: [], |
|
|
|
/** 从平台右键「在此之前/在此之后插入航线」完成时传入,保存航线时用作 platformId */ |
|
|
|
tempMapPlatform: null, |
|
|
|
/** 保存新航线弹窗内选择的方案 ID(弹窗内可直接选方案,无需先展开侧边) */ |
|
|
|
saveDialogScenarioId: null, |
|
|
|
platformIconSaveTimer: null, |
|
|
|
//导入平台弹窗 |
|
|
|
showImportDialog: false, |
|
|
|
@ -1000,7 +1012,7 @@ export default { |
|
|
|
if (idx > -1) { |
|
|
|
this.activeRouteIds.splice(idx, 1); |
|
|
|
} |
|
|
|
await this.getList(); |
|
|
|
await this.getList({ skipRoomPlatformIcons: true }); |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
if (e !== 'cancel') { |
|
|
|
@ -1009,8 +1021,12 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
/** 从数据库拉取最新的航线列表数据 */ |
|
|
|
async getList() { |
|
|
|
/** |
|
|
|
* 从数据库拉取最新的航线列表数据 |
|
|
|
* @param {Object} opts - 可选:{ skipRoomPlatformIcons: true } 时不再加载房间平台图标(用于删除航线等仅航线变化的场景,避免地图上的平台图标被清空再重画导致闪一下) |
|
|
|
*/ |
|
|
|
async getList(opts = {}) { |
|
|
|
const { skipRoomPlatformIcons = false } = opts; |
|
|
|
try { |
|
|
|
const roomId = this.$route.query.roomId || this.currentRoomId; |
|
|
|
const scenarioRes = await listScenario({ roomId: roomId }); |
|
|
|
@ -1056,12 +1072,14 @@ export default { |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
// 加载该房间下保存的地图平台图标 |
|
|
|
const rId = roomId || this.currentRoomId; |
|
|
|
if (rId && this.$refs.cesiumMap && typeof this.$refs.cesiumMap.loadRoomPlatformIcons === 'function') { |
|
|
|
listRoomPlatformIcons(rId).then(res => { |
|
|
|
if (res.code === 200 && res.data) this.$refs.cesiumMap.loadRoomPlatformIcons(rId, res.data); |
|
|
|
}).catch(() => {}); |
|
|
|
// 加载该房间下保存的地图平台图标(删除航线等操作时跳过,避免清空再重画导致平台图标闪一下) |
|
|
|
if (!skipRoomPlatformIcons) { |
|
|
|
const rId = roomId || this.currentRoomId; |
|
|
|
if (rId && this.$refs.cesiumMap && typeof this.$refs.cesiumMap.loadRoomPlatformIcons === 'function') { |
|
|
|
listRoomPlatformIcons(rId).then(res => { |
|
|
|
if (res.code === 200 && res.data) this.$refs.cesiumMap.loadRoomPlatformIcons(rId, res.data); |
|
|
|
}).catch(() => {}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
@ -1069,15 +1087,20 @@ export default { |
|
|
|
this.$message.error("获取方案列表失败"); |
|
|
|
} |
|
|
|
}, |
|
|
|
handleMapDrawComplete(points) { |
|
|
|
handleMapDrawComplete(points, options) { |
|
|
|
this.missionDrawingActive = false; |
|
|
|
if (!points || points.length < 2) { |
|
|
|
this.$message.error('航点太少,无法生成航线'); |
|
|
|
this.drawDom = false; |
|
|
|
return; |
|
|
|
} |
|
|
|
this.tempMapPoints = points; // 暂存坐标点 |
|
|
|
this.showNameDialog = true; // 弹出对话框起名 |
|
|
|
this.tempMapPoints = points; |
|
|
|
this.tempMapPlatform = (options && (options.platformId != null || options.platform)) ? options : null; |
|
|
|
this.showNameDialog = true; |
|
|
|
}, |
|
|
|
/** 保存新航线弹窗打开时:若当前未选方案则用已选方案或第一个方案填充,便于在弹窗内直接选择 */ |
|
|
|
onSaveRouteDialogOpen() { |
|
|
|
this.saveDialogScenarioId = this.selectedPlanId || (this.plans[0] && this.plans[0].id) || null; |
|
|
|
}, |
|
|
|
|
|
|
|
openAddHoldDuringDrawing() { |
|
|
|
@ -1093,9 +1116,9 @@ export default { |
|
|
|
this.$message.error('新增航线未命名,请输入名称后保存!'); |
|
|
|
return; |
|
|
|
} |
|
|
|
const currentScenarioId = this.selectedPlanId; |
|
|
|
const currentScenarioId = this.saveDialogScenarioId != null ? this.saveDialogScenarioId : this.selectedPlanId; |
|
|
|
if (!currentScenarioId) { |
|
|
|
this.$message.warning('请先在左侧选择一个方案,再保存航线!'); |
|
|
|
this.$message.warning(this.plans.length === 0 ? '暂无方案,请先点击地图左侧红点展开菜单,选择「方案」并新建方案后再保存。' : '请在上方选择所属方案后再保存。'); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
@ -1123,7 +1146,7 @@ export default { |
|
|
|
const routeData = { |
|
|
|
callSign: this.newRouteName, |
|
|
|
scenarioId: currentScenarioId, |
|
|
|
platformId: 1, |
|
|
|
platformId: (this.tempMapPlatform && this.tempMapPlatform.platformId != null) ? this.tempMapPlatform.platformId : 1, |
|
|
|
attributes: this.getDefaultRouteAttributes(), |
|
|
|
waypoints: finalWaypoints |
|
|
|
}; |
|
|
|
@ -1150,25 +1173,37 @@ export default { |
|
|
|
this.activeRouteIds.push(newRouteId); |
|
|
|
} |
|
|
|
|
|
|
|
// 3. UI 重置 |
|
|
|
// 3. 先保存“用于创建航线的平台”引用,再清空(后续删除要用到) |
|
|
|
const platformToRemove = this.tempMapPlatform; |
|
|
|
|
|
|
|
// 4. UI 重置 |
|
|
|
this.drawDom = false; |
|
|
|
this.showNameDialog = false; |
|
|
|
this.newRouteName = ''; |
|
|
|
this.tempMapPoints = []; |
|
|
|
this.tempMapPlatform = null; |
|
|
|
|
|
|
|
// 4. 【修复关键 B】:千万不要调用 clearAllWaypoints()! |
|
|
|
// 改为只删除绘制过程中的临时预览实体,保留地图上已有的正式线 |
|
|
|
// 5. 【修复关键 B】:只清理临时预览实体,不 clearAllWaypoints |
|
|
|
if (this.$refs.cesiumMap) { |
|
|
|
// 只清理临时点(假如你的地图组件有这个更细的方法) |
|
|
|
// 如果没有,就直接删掉 tempPreviewEntity |
|
|
|
if (this.$refs.cesiumMap.tempPreviewEntity) { |
|
|
|
this.viewer.entities.remove(this.$refs.cesiumMap.tempPreviewEntity); |
|
|
|
this.$refs.cesiumMap.tempPreviewEntity = null; |
|
|
|
} |
|
|
|
// 如果 clearAllWaypoints 会清空所有,那这里就不能调用它 |
|
|
|
} |
|
|
|
|
|
|
|
// 5. 刷新右侧列表(拉取最新数据,含新建航线);getList 内部会根据 activeRouteIds 自动渲染新航线 |
|
|
|
// 6. 若本条航线是从“地图上的平台图标”创建的:先删库再刷新列表,最后从地图移除该占位图标(避免 getList 重新拉取到未删记录又画上去) |
|
|
|
if (platformToRemove && this.$refs.cesiumMap) { |
|
|
|
if (platformToRemove.serverId) { |
|
|
|
await delRoomPlatformIcon(platformToRemove.serverId).catch(() => {}); |
|
|
|
if (typeof this.$refs.cesiumMap.removePlatformIconByServerId === 'function') { |
|
|
|
this.$refs.cesiumMap.removePlatformIconByServerId(platformToRemove.serverId); |
|
|
|
} |
|
|
|
} else if (platformToRemove.mapEntityId && typeof this.$refs.cesiumMap.removeEntity === 'function') { |
|
|
|
this.$refs.cesiumMap.removeEntity(platformToRemove.mapEntityId); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 7. 刷新右侧列表(拉取最新数据,含新建航线);getList 会重新加载房间平台图标,因已删记录,不会再画出该图标 |
|
|
|
await this.getList(); |
|
|
|
const routeFromList = this.routes.find(r => r.id === newRouteId); |
|
|
|
if (routeFromList) { |
|
|
|
|