<template>
|
<BaseCard size="middle-s" direction="up">
|
<template #content>
|
<el-row align="middle" style="gap: 6px">
|
<el-form-item label="遥测动画" v-loading="loading">
|
<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 { unref } from 'vue';
|
import { GridAnimation } from '@/utils/map/grid-animation';
|
import SatelliteProxy from '@/views/satellitetelemetry/SatelliteProxy';
|
|
const gridAnimation = new GridAnimation();
|
|
export default {
|
props: {
|
gridData: Array,
|
loading: Boolean,
|
mapViews: Object
|
},
|
emits: ['change', 'stop'],
|
data() {
|
return {
|
speed: 1,
|
// 动画状态，0：停止；1：播放；2：暂停
|
status: 0
|
};
|
},
|
watch: {
|
speed(nV, oV) {
|
if (nV != oV) {
|
this.changeSpeed(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: {
|
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() {
|
const that = this;
|
gridAnimation.setDynamicSpeed(false); //关闭动态绘制速度调整
|
gridAnimation.startAnimation(
|
this.gridData,
|
function (data, index, count) {
|
const d = data[index];
|
// SatelliteProxy.clearText(mapViews);
|
// eslint-disable-next-line vue/no-mutating-props
|
const { textViews, labelsLayer } = SatelliteProxy.drawDataText(
|
that.mapViews.points,
|
d,
|
that.mapViews.textViews
|
);
|
// eslint-disable-next-line vue/no-mutating-props
|
that.mapViews.textViews = textViews;
|
// eslint-disable-next-line vue/no-mutating-props
|
that.mapViews.labelsLayer = labelsLayer;
|
SatelliteProxy.drawColor(that.mapViews.gridViews, d);
|
}
|
);
|
},
|
startAnimation() {
|
this.changeSpeed(this.speed);
|
if (!gridAnimation.runStatus()) {
|
this.newTimeTask();
|
} else {
|
gridAnimation.start();
|
}
|
// this.start();
|
},
|
changeSpeed(speed) {
|
gridAnimation.changeSpeed(speed);
|
},
|
pauseAnimation() {
|
gridAnimation.pause();
|
// this.pause();
|
},
|
stopAnimation() {
|
gridAnimation.stop();
|
// this.stop();
|
}
|
},
|
mounted() {
|
gridAnimation.setOnStopCallback(() => {
|
this.$emit('stop');
|
});
|
},
|
unmounted() {
|
gridAnimation.stop();
|
}
|
};
|
</script>
|
