1. 新增默认加载时先判断各选项是否获取完成逻辑

riku

2025-02-21 c35074e0e33054bb6c5ada22f8104422ae953b17

 src/components/animation/HistoricalTrajectory.vue

@@ -2,42 +2,64 @@
  <BaseCard size="middle-s" direction="up">
    <template #content>
      <el-row align="middle" style="gap: 6px">
        <div>历史轨迹</div>
        <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>
        <div class="label-date margin-left-2">
          <span class="label-date-title">倍速</span>
          <el-select v-model="speed" size="small" class="w-80">
        <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>
        </div>
        </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: {},
  emits: ['change'],
  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() {
@@ -53,26 +75,61 @@
    }
  },
  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() {
      console.log(this.status);
      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() {}
  mounted() {
    mapAnimation.setOnStopCallback(() => {
      this.$emit('stop');
    });
  },
  unmounted() {
    mapAnimation.stop();
  }
};
</script>
<style scoped>
@@ -83,4 +140,8 @@
.btn-disable {
  color: gray;
}

.el-form-item {
  margin-bottom: 0px;
}
</style>