cesium-map-object/ruoyi-ui/src/views/cesiumMap/LocateDialog.vue

<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="500px"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :destroy-on-close="true"
      :before-close="handleCancel"
      custom-class="locate-dialog"
      :style="{ marginTop: '15vh' }"
    >
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="方案：">
          <el-select
            v-model="formData.scenarioId"
            placeholder="请选择方案"
            clearable
            style="width: 100%"
            @change="handleScenarioChange"
          >
            <el-option
              v-for="item in scenarioList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="航线：">
          <el-select
            v-model="formData.routeId"
            placeholder="请选择航线"
            clearable
            style="width: 100%"
            :disabled="!formData.scenarioId"
            @change="handleRouteChange"
          >
            <el-option
              v-for="item in routeList"
              :key="item.id"
              :label="item.callSign"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="航点：">
          <el-select
            v-model="formData.waypointId"
            placeholder="请选择航点"
            clearable
            style="width: 100%"
            :disabled="!formData.routeId"
            @change="handleWaypointChange"
          >
            <el-option
              v-for="item in waypointList"
              :key="item.id"
              :label="`${item.name} (${item.lng}, ${item.lat})`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="经度：">
          <el-input
            v-model="formData.lng"
            type="number"
            placeholder="例如 116.40"
            step="0.000001"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="纬度：">
          <el-input
            v-model="formData.lat"
            type="number"
            placeholder="例如 39.90"
            step="0.000001"
            clearable
          />
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listScenario } from '@/api/system/scenario'
import { listRoutes } from '@/api/system/routes'
import { listWaypoints } from '@/api/system/waypoints'

export default {
  name: 'LocateDialog',
  props: {
    title: {
      type: String,
      default: '定位'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      formData: {
        scenarioId: null,
        routeId: null,
        waypointId: null,
        lng: '116.3974',
        lat: '39.9093'
      },
      scenarioList: [],
      routeList: [],
      waypointList: []
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        this.dialogVisible = newVal
      },
      immediate: true
    },
    dialogVisible(newVal) {
      if (newVal) {
        this.resetForm()
        this.loadScenarios()
      }
      this.$emit('update:visible', newVal)
    }
  },
  methods: {
    resetForm() {
      this.formData = {
        scenarioId: null,
        routeId: null,
        waypointId: null,
        lng: '116.3974',
        lat: '39.9093'
      }
      this.routeList = []
      this.waypointList = []
    },
    
    async loadScenarios() {
      try {
        const res = await listScenario({})
        this.scenarioList = res.rows || []
      } catch (error) {
        console.error('加载方案列表失败:', error)
        this.$message.error('加载方案列表失败')
      }
    },
    
    async handleScenarioChange(value) {
      this.formData.routeId = null
      this.formData.waypointId = null
      this.routeList = []
      this.waypointList = []
      
      if (value) {
        try {
          const res = await listRoutes({ scenarioId: value })
          this.routeList = res.rows || []
        } catch (error) {
          console.error('加载航线列表失败:', error)
          this.$message.error('加载航线列表失败')
        }
      }
    },
    
    async handleRouteChange(value) {
      this.formData.waypointId = null
      this.waypointList = []
      
      if (value) {
        try {
          const res = await listWaypoints({ routeId: value })
          this.waypointList = res.rows || []
        } catch (error) {
          console.error('加载航点列表失败:', error)
          this.$message.error('加载航点列表失败')
        }
      }
    },
    
    handleWaypointChange(value) {
      if (value) {
        const waypoint = this.waypointList.find(w => w.id === value)
        if (waypoint) {
          this.formData.lng = waypoint.lng
          this.formData.lat = waypoint.lat
        }
      }
    },
    
    handleCancel() {
      this.$emit('update:visible', false)
      this.$emit('cancel')
    },
    
    handleConfirm() {
      const { lng, lat } = this.formData
      
      if (!lng || !lat || isNaN(parseFloat(lng)) || isNaN(parseFloat(lat))) {
        this.$message.error('请输入有效的经度和纬度！')
        return
      }
      
      if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
        this.$message.error('经纬度超出有效范围！')
        return
      }
      
      this.$emit('confirm', {
        lng: parseFloat(lng),
        lat: parseFloat(lat)
      })
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

.locate-dialog {
  z-index: 99999 !important;
}

.locate-dialog >>> .el-dialog {
  margin-top: 15vh !important;
  position: fixed !important;
  top: 15vh !important;
}

.locate-dialog >>> .el-dialog__body {
  padding: 20px;
}
</style>