修改
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