<template>
|
<BaseCard size="middle-s" direction="up">
|
<template #content>
|
<el-row align="middle" style="gap: 6px">
|
<el-form-item label="历史轨迹">
|
<div class="map-btn-group">
|
<font-awesome-icon
|
:icon="btnStop.icon"
|
:class="'btn-search m-r-2 ' + btnStop.clz"
|
@click="handleStop"
|
/>
|
<font-awesome-icon
|
:icon="btnPlay.icon"
|
class="btn-search"
|
@click="handlePlayOrPause"
|
/>
|
</div>
|
</el-form-item>
|
<el-form-item label="倍速">
|
<el-select v-model="speed" size="small" class="w-60">
|
<el-option label="1.0X" :value="1" />
|
<el-option label="4.0X" :value="4" />
|
<el-option label="8.0X" :value="8" />
|
<el-option label="16X" :value="16" />
|
</el-select>
|
</el-form-item>
|
</el-row>
|
</template>
|
</BaseCard>
|
</template>
|
<script>
|
import { mapActions } from 'pinia';
|
import { MapAnimation } from '@/utils/map/animation';
|
import { FactorDatas } from '@/model/FactorDatas';
|
import { useMapAnimationStore } from '@/stores/map-animation';
|
|
const mapAnimation = new MapAnimation();
|
|
export default {
|
props: {
|
factorDatas: FactorDatas,
|
factorType: String
|
},
|
emits: ['change', 'stop'],
|
data() {
|
return {
|
speed: 1,
|
// 动画状态，0：停止；1：播放；2：暂停
|
status: 0
|
};
|
},
|
watch: {
|
speed(nV, oV) {
|
if (nV != oV) {
|
this.changeSpeed(nV);
|
}
|
},
|
factorType(nV, oV) {
|
if (nV != oV) {
|
mapAnimation.setFactorType(nV);
|
}
|
}
|
},
|
computed: {
|
btnStop() {
|
return {
|
icon: 'fa fa-stop',
|
clz: this.status == 0 ? 'btn-disable' : 'btn-able'
|
};
|
},
|
btnPlay() {
|
return {
|
icon: this.status == 1 ? 'fa fa-pause' : 'fa fa-play'
|
};
|
}
|
},
|
methods: {
|
...mapActions(useMapAnimationStore, ['start', 'pause', 'stop']),
|
handleStop() {
|
if (this.status != 0) {
|
this.status = 0;
|
this.stopAnimation();
|
this.handleChange();
|
}
|
},
|
handlePlayOrPause() {
|
if (this.status == 1) {
|
this.status = 2;
|
this.pauseAnimation();
|
} else {
|
this.status = 1;
|
this.startAnimation();
|
}
|
this.handleChange();
|
},
|
handleChange() {
|
this.$emit('change', this.status);
|
},
|
|
newTimeTask() {
|
mapAnimation.setDynamicSpeed(false); //关闭动态绘制速度调整
|
mapAnimation.moveAnimation(this.factorDatas, this.factorType);
|
},
|
startAnimation() {
|
this.changeSpeed(this.speed);
|
if (!mapAnimation.runStatus()) {
|
this.newTimeTask();
|
} else {
|
mapAnimation.start();
|
}
|
this.start();
|
},
|
changeSpeed(speed) {
|
mapAnimation.changeSpeed(speed);
|
},
|
pauseAnimation() {
|
mapAnimation.pause();
|
this.pause();
|
},
|
stopAnimation() {
|
mapAnimation.stop();
|
this.stop();
|
}
|
},
|
mounted() {
|
mapAnimation.setOnStopCallback(() => {
|
this.$emit('stop');
|
});
|
},
|
unmounted() {
|
mapAnimation.stop();
|
}
|
};
|
</script>
|
<style scoped>
|
.btn-able {
|
color: red;
|
}
|
|
.btn-disable {
|
color: gray;
|
}
|
|
.el-form-item {
|
margin-bottom: 0px;
|
}
|
</style>
|
