From c40500d288339cd9b2200f8f909e3cd5471c0c22 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 30 八月 2024 17:38:29 +0800
Subject: [PATCH] 1. 优化3D动画中风向的变化逻辑； 2. 修复折线图切换因子时，数据直接跳转至起始处的问题； 3. 折线图和表格加回风向因子； 4. 优化风向的均值计算为矢量计算，同时最大最小值不显示； 5. 新增表格数据导出功能；
---
src/components/animation/HistoricalTrajectory.vue | 103 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 82 insertions(+), 21 deletions(-)
diff --git a/src/components/animation/HistoricalTrajectory.vue b/src/components/animation/HistoricalTrajectory.vue
index e2e50bf..37d23be 100644
--- a/src/components/animation/HistoricalTrajectory.vue
+++ b/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>
--
Gitblit v1.9.3