diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index 47a57ae..031f9f2 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -60,6 +60,9 @@ import ContextMenu from './ContextMenu.vue' import axios from 'axios' import request from '@/utils/request' import { getToken } from '@/utils/auth' +import { listScenario } from '@/api/system/scenario' +import { listRoutes } from '@/api/system/routes' +import { listWaypoints } from '@/api/system/waypoints' export default { name: 'CesiumMap', props: { @@ -138,7 +141,14 @@ export default { coordinatesText: '经度: --, 纬度: --', // 比例尺(高德风格) scaleBarText: '--', - scaleBarWidthPx: 80 + scaleBarWidthPx: 80, + // 定位相关 + scenarioList: [], + routeList: [], + waypointList: [], + selectedScenario: null, + selectedRoute: null, + selectedWaypoint: null } }, components: { @@ -2706,12 +2716,187 @@ export default { }) } }, - handleLocate() { + async handleLocate() { const h = this.$createElement + + // 每次打开弹窗时重置所有状态 + this.scenarioList = [] + this.routeList = [] + this.waypointList = [] + this.selectedScenario = null + this.selectedRoute = null + this.selectedWaypoint = null + + try { + const scenarioRes = await listScenario({}) + this.scenarioList = scenarioRes.rows || [] + } catch (error) { + console.error('加载方案列表失败:', error) + } + + const getSelectByClass = (className) => { + return document.querySelector(`.${className}`) + } + + const resetSelects = () => { + const scenarioSelect = getSelectByClass('scenario-select') + const routeSelect = getSelectByClass('route-select') + const waypointSelect = getSelectByClass('waypoint-select') + + if (scenarioSelect) scenarioSelect.value = '' + if (routeSelect) { + routeSelect.disabled = true + routeSelect.innerHTML = '' + } + if (waypointSelect) { + waypointSelect.disabled = true + waypointSelect.innerHTML = '' + } + } + + const handleScenarioChange = async (e) => { + const value = parseInt(e.target.value) + console.log('方案变化:', value) + this.selectedScenario = value + this.selectedRoute = null + this.selectedWaypoint = null + this.routeList = [] + this.waypointList = [] + + const routeSelect = getSelectByClass('route-select') + const waypointSelect = getSelectByClass('waypoint-select') + + if (routeSelect) { + routeSelect.disabled = true + routeSelect.innerHTML = '' + } + + if (waypointSelect) { + waypointSelect.disabled = true + waypointSelect.innerHTML = '' + } + + if (value) { + try { + const routeRes = await listRoutes({ scenarioId: value }) + this.routeList = routeRes.rows || [] + console.log('航线列表:', this.routeList) + + if (routeSelect) { + routeSelect.disabled = false + routeSelect.innerHTML = '' + this.routeList.forEach(item => { + const option = document.createElement('option') + option.value = item.id + option.textContent = item.callSign + routeSelect.appendChild(option) + }) + } + } catch (error) { + console.error('加载航线列表失败:', error) + } + } + } + + const handleRouteChange = async (e) => { + const value = parseInt(e.target.value) + console.log('航线变化:', value) + this.selectedRoute = value + this.selectedWaypoint = null + this.waypointList = [] + + const waypointSelect = getSelectByClass('waypoint-select') + + if (waypointSelect) { + waypointSelect.disabled = true + waypointSelect.innerHTML = '' + } + + if (value) { + try { + const waypointRes = await listWaypoints({ routeId: value }) + this.waypointList = waypointRes.rows || [] + console.log('航点列表:', this.waypointList) + + if (waypointSelect) { + waypointSelect.disabled = false + waypointSelect.innerHTML = '' + this.waypointList.forEach(item => { + const option = document.createElement('option') + option.value = item.id + option.textContent = `${item.name} (${item.lng}, ${item.lat})` + waypointSelect.appendChild(option) + }) + } + } catch (error) { + console.error('加载航点列表失败:', error) + } + } + } + + const handleWaypointChange = (e) => { + const value = parseInt(e.target.value) + console.log('航点变化:', value) + this.selectedWaypoint = value + const waypoint = this.waypointList.find(w => w.id === value) + if (waypoint) { + const lngInput = document.querySelector('input[placeholder="例如 116.40"]') + const latInput = document.querySelector('input[placeholder="例如 39.90"]') + if (lngInput) lngInput.value = waypoint.lng + if (latInput) latInput.value = waypoint.lat + console.log('填充经纬度:', waypoint.lng, waypoint.lat) + } + } + this.$msgbox({ title: '定位', message: h('div', {style: 'padding: 10px 0;'}, [ h('div', {style: 'margin-bottom: 15px;'}, [ + h('label', {style: 'display: block; margin-bottom: 5px; color: #606266;'}, '方案:'), + h('select', { + attrs: { + class: 'scenario-select', + style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;' + }, + on: { + change: handleScenarioChange + } + }, [ + h('option', { attrs: { value: '' } }, '请选择方案'), + ...this.scenarioList.map(item => h('option', { attrs: { value: item.id } }, item.name)) + ]) + ]), + h('div', {style: 'margin-bottom: 15px;'}, [ + h('label', {style: 'display: block; margin-bottom: 5px; color: #606266;'}, '航线:'), + h('select', { + attrs: { + class: 'route-select', + disabled: true, + style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;' + }, + on: { + change: handleRouteChange + } + }, [ + h('option', { attrs: { value: '' } }, '请选择航线') + ]) + ]), + h('div', {style: 'margin-bottom: 15px;'}, [ + h('label', {style: 'display: block; margin-bottom: 5px; color: #606266;'}, '航点:'), + h('select', { + attrs: { + class: 'waypoint-select', + disabled: true, + style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;' + }, + on: { + change: handleWaypointChange + } + }, [ + h('option', { attrs: { value: '' } }, '请选择航点') + ]) + ]), + h('div', {style: 'margin-bottom: 15px;'}, [ h('label', {style: 'display: block; margin-bottom: 5px; color: #606266;'}, '经度:'), h('input', { attrs: { @@ -2757,7 +2942,7 @@ export default { } if (this.viewer) { this.viewer.camera.flyTo({ - destination: Cesium.Cartesian3.fromDegrees(lng, lat, 5000), + destination: Cesium.Cartesian3.fromDegrees(lng, lat, 100000), orientation: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-90.0), @@ -2773,9 +2958,35 @@ export default { done() } } + }).then(() => { + // 弹窗关闭后重置所有选择状态 + resetSelects() }).catch(() => { this.$message.info('已取消定位') + // 弹窗关闭后重置所有选择状态 + resetSelects() + }) + }, + updateSelectOptions(refName, dataList, labelField) { + const select = document.querySelector(`select[ref="${refName}"]`) + if (!select) return + + const currentValue = select.value + select.innerHTML = '' + + const defaultOption = document.createElement('option') + defaultOption.value = '' + defaultOption.textContent = refName === 'routeSelect' ? '请选择航线' : '请选择航点' + select.appendChild(defaultOption) + + dataList.forEach(item => { + const option = document.createElement('option') + option.value = item.id + option.textContent = typeof labelField === 'function' ? labelField(item) : item[labelField] + select.appendChild(option) }) + + select.value = currentValue }, initScaleBar() { const that = this