167 lines
3.8 KiB
Vue
167 lines
3.8 KiB
Vue
<template>
|
|
<div class="description">
|
|
<el-scrollbar height="20">
|
|
<div class="roads">
|
|
<div class="road-item" v-for="(road, index) in roadsList" :key="road">
|
|
{{ road }}
|
|
<ElIcon v-if="index != roadsList.length - 1">
|
|
<ArrowRight />
|
|
</ElIcon>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
<div class="time-distance">
|
|
<span class="time"
|
|
>{{ (routeData.routes[0].time / 60).toFixed(1) }}分钟</span
|
|
>
|
|
(<span class="distance">{{ routeData.routes[0].distance }}米</span>)
|
|
<span class="seg">|</span>
|
|
<span class="policy">
|
|
{{ routeData.routes[0].policy }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
@click="emit('start-click')"
|
|
class="steps-item start"
|
|
v-if="routeData.routes[0].steps.length"
|
|
>
|
|
<div
|
|
class="icon"
|
|
:style="{
|
|
backgroundPosition: stepIconMap.get('起点'),
|
|
}"
|
|
></div>
|
|
<div class="content">起点</div>
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in routeData.routes[0].steps"
|
|
:key="item.start_location.lng"
|
|
class="steps-item"
|
|
@click="handleRouteClick(item, index)"
|
|
>
|
|
<div
|
|
class="icon"
|
|
:style="{
|
|
backgroundPosition: stepIconMap.get(item.action) ?? '-46px -23px',
|
|
}"
|
|
></div>
|
|
<div class="content">
|
|
{{ item.instruction }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
@click="emit('end-click')"
|
|
class="steps-item start"
|
|
v-if="routeData.routes[0].steps.length"
|
|
>
|
|
<div
|
|
class="icon"
|
|
:style="{
|
|
backgroundPosition: stepIconMap.get('终点'),
|
|
}"
|
|
></div>
|
|
<div class="content">终点</div>
|
|
</div>
|
|
</template>
|
|
<script setup name="StepsList">
|
|
import { ArrowRight } from "@element-plus/icons-vue";
|
|
import { computed, toRefs } from "vue";
|
|
|
|
const emit = defineEmits(["step-click", "start-click", "end-click"]);
|
|
const props = defineProps({
|
|
routeData: { type: Object, required: true },
|
|
// routeExtData: {
|
|
// type: Object,
|
|
// required: true,
|
|
// },
|
|
});
|
|
const { routeData } = toRefs(props);
|
|
const roadsList = computed(() =>
|
|
routeData.value.routes[0].steps
|
|
? [
|
|
...new Set(
|
|
routeData.value.routes[0].steps
|
|
.map((el) => el.road)
|
|
.filter((el) => !!el)
|
|
),
|
|
]
|
|
: []
|
|
);
|
|
const stepIconMap = new Map([
|
|
["靠左", "-406px -23px"],
|
|
["靠右", "-445px -23px"],
|
|
["左转", "-87px -23px"],
|
|
["右转", "-124px -23px"],
|
|
["左转调头", "-327px -23px"],
|
|
["向左前方行驶", "-165px -23px"],
|
|
["向右前方行驶", "-206px -23px"],
|
|
["向左后方行驶", "-246px -23px"],
|
|
["减速行驶", "-524px -23px"],
|
|
["终点", "-126px -104px"],
|
|
["起点", "-47px -104px"],
|
|
]);
|
|
|
|
const handleRouteClick = (data, index) => {
|
|
emit("step-click", data, index);
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.description {
|
|
border-bottom: 1px solid #e6e6e6;
|
|
padding: 8px 8px;
|
|
.roads {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
.road-item {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.time-distance {
|
|
display: flex;
|
|
margin-top: 5px;
|
|
font-size: 13px;
|
|
.seg {
|
|
margin: 0px 3px;
|
|
}
|
|
}
|
|
}
|
|
.steps-item {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
padding-bottom: 5px;
|
|
padding-top: 5px;
|
|
&:not(:last-child) {
|
|
// margin-bottom: 10px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
.icon {
|
|
margin-right: 8px;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: #fff;
|
|
line-height: 20px;
|
|
border-radius: 50%;
|
|
border: 1px solid #ddd;
|
|
background-color: #fff;
|
|
// background-position: -47px -104px;
|
|
background-image: url(https://webapi.amap.com/theme/v1.3/images/newpc/diricon.png);
|
|
}
|
|
.content {
|
|
font-size: 12px;
|
|
}
|
|
&.start .content {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
</style>
|