This commit is contained in:
2025-11-18 16:11:00 +08:00
parent 877d3fd772
commit 7243a2682f

View File

@ -1,171 +0,0 @@
<template>
<Dialog
ref="baseDialog"
class="RoutePlanning"
title="路径规划"
left="180px"
top="100px"
width="527px"
:closeCallback="closeCallBack"
>
<template #content>
<div class="row" style="align-items: flex-start">
<div class="col start-col">
<button
class="crossPoint"
@mouseenter="svgHover[0] = true"
@mouseleave="svgHover[0] = false"
>
<svg-icon
name="add"
:size="12"
:color="svgHover[0] ? 'rgba(0, 255, 255, 1)' : 'rgba(255, 255, 255, 1)'"
></svg-icon>
途径点
</button>
<button
class="crossPoint"
@mouseenter="svgHover[1] = true"
@mouseleave="svgHover[1] = false"
style="margin-left: 10px"
>
<svg-icon
name="add"
:size="12"
:color="svgHover[1] ? 'rgba(0, 255, 255, 1)' : 'rgba(255, 255, 255, 1)'"
></svg-icon
>避让点
</button>
</div>
</div>
<div class="row">
<p class="lable-left-line">路径规划</p>
</div>
<div class="row">
<div class="col" style="flex: 0 0 50px">
<span class="label">起点</span>
</div>
<div class="col">
<span class="label">经度</span>
<input class="input" type="number" title="" min="-180" max="180" @model="endLng" />
</div>
<div class="col">
<span class="label">纬度</span>
<input class="input" type="number" title="" min="-180" max="180" @model="endLng" />
</div>
<div class="col" style="flex: 0 0 80px">
<button class="end-pick-btn" @click="pickEndPos" style="margin-left: 10px">拾取</button>
</div>
</div>
<!-- 途径点 -->
<div class="row" v-for="(item, index) in positionList.waypoints" :key="index">
<div class="col" style="flex: 0 0 50px">
<span class="label">途径点</span>
</div>
<div class="col">
<span class="label">经度</span>
<input
class="input"
type="number"
title=""
min="-180"
max="180"
@model="endLng"
v-model="item.lng"
/>
</div>
<div class="col">
<span class="label">纬度</span>
<input
class="input"
type="number"
title=""
min="-180"
max="180"
@model="endLng"
v-model="item.lat"
/>
</div>
<div class="col" style="flex: 0 0 80px">
<button class="end-pick-btn" @click="pickEndPos" style="margin-left: 10px">拾取</button>
</div>
</div>
<div class="row">
<div class="col" style="flex: 0 0 50px">
<span class="label">终点</span>
</div>
<div class="col">
<span class="label">经度</span>
<input class="input" type="number" title="" min="-180" max="180" @model="endLng" />
</div>
<div class="col">
<span class="label">纬度</span>
<input class="input" type="number" title="" min="-180" max="180" @model="endLng" />
</div>
<div class="col" style="flex: 0 0 80px">
<button class="end-pick-btn" @click="pickEndPos" style="margin-left: 10px">拾取</button>
</div>
</div>
</template>
<template #footer>
<button @click="draw">绘制</button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { inject } from 'vue'
import Dialog from '@/components/dialog/baseDialog.vue'
const baseDialog: any = ref(null)
const eventBus: any = inject('bus')
var positionList: any = reactive([
{
startlng: 0,
startlat: 0,
endlng: 0,
endlat: 0,
waypoints: [
{
lat: 0,
lng: 0
}
]
}
])
//属性
var startLng: any = ref(null)
var startLat: any = ref(null)
var endLng: any = ref(null)
var endLat: any = ref(null)
var svgHover: any = reactive([false, false])
eventBus.on('routePlanningDialog', () => {
baseDialog.value?.open()
})
const closeCallBack = (e) => {}
function pickStartPos() {}
function pickEndPos() {}
const draw = (e) => {}
</script>
<style scoped lang="scss">
// ::v-deep .RoutePlanning > .content > div > .row .col {
// margin: 0 10px;
// }
// ::v-deep .RoutePlanning > .content .row .label {
// flex: auto;
// }
.YJ-custom-base-dialog > .content .row > .col {
margin: 0 5px !important;
}
.crossPoint:hover {
color: rgba(var(--color-base1), 1);
}
</style>