<template>
|
<div class="track-bar">
|
<el-popover v-model:visible="open" placement="bottom-start" :width="340" trigger="click">
|
<template #reference>
|
<el-button :icon="Setting" circle size="small" />
|
</template>
|
<div class="track-bar__form">
|
<div class="track-bar__label">查询时段</div>
|
<el-date-picker
|
v-model="range"
|
type="datetimerange"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
format="YYYY-MM-DD HH:mm"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
size="small"
|
/>
|
<div class="track-bar__actions">
|
<el-button size="small" @click="open = false">取消</el-button>
|
<el-button type="primary" size="small" @click="confirm">查询轨迹</el-button>
|
</div>
|
</div>
|
</el-popover>
|
<el-button size="small" :disabled="!hasTrack" @click="$emit(playing ? 'pause' : 'play')">
|
{{ playing ? '暂停' : '播放' }}
|
</el-button>
|
<el-button size="small" :disabled="!hasTrack" @click="$emit('stop')">停止</el-button>
|
<span class="track-bar__speed">{{ speed }}x</span>
|
<el-slider v-model="speedModel" :min="1" :max="30" :step="1" class="track-bar__slider" />
|
<el-progress :percentage="progress" :stroke-width="6" class="track-bar__progress" />
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { computed, ref, watch } from 'vue';
|
import { Setting } from '@element-plus/icons-vue';
|
|
const props = defineProps<{
|
playing?: boolean;
|
speed?: number;
|
progress?: number;
|
hasTrack?: boolean;
|
startTime?: string;
|
endTime?: string;
|
}>();
|
|
const emit = defineEmits(['update:speed', 'play', 'pause', 'stop', 'query']);
|
|
const open = ref(false);
|
const range = ref<[string, string] | null>(null);
|
const speedModel = computed({
|
get: () => props.speed || 5,
|
set: v => emit('update:speed', v)
|
});
|
|
watch(
|
() => [props.startTime, props.endTime],
|
() => {
|
if (props.startTime && props.endTime) range.value = [props.startTime, props.endTime];
|
},
|
{ immediate: true }
|
);
|
|
function confirm() {
|
if (!range.value) return;
|
emit('query', range.value);
|
open.value = false;
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.track-bar {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
padding: 8px 0 4px;
|
|
&__slider {
|
width: 96px;
|
}
|
|
&__speed {
|
font-size: 12px;
|
color: var(--el-text-color-secondary);
|
min-width: 28px;
|
}
|
|
&__progress {
|
flex: 1;
|
min-width: 80px;
|
}
|
|
&__form {
|
display: flex;
|
flex-direction: column;
|
gap: 8px;
|
}
|
|
&__label {
|
font-size: 12px;
|
color: var(--el-text-color-secondary);
|
}
|
|
&__actions {
|
display: flex;
|
justify-content: flex-end;
|
gap: 8px;
|
}
|
}
|
</style>
|
