2 changed files with 313 additions and 70 deletions
@ -0,0 +1,257 @@ |
|||
<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> |
|||
Loading…
Reference in new issue