修改
This commit is contained in:
@ -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>
|
||||
Reference in New Issue
Block a user