实时走航模式完成

riku

2024-05-12 fb876cbc3b21035125668f2db6ee84e47efb544f

 src/views/realtimemode/component/DashBoard.vue

@@ -3,8 +3,17 @@
    <el-col v-show="show" span="10">
      <BaseCard>
        <template #content>
          <WeatherData :factor-datas="factorDatas"></WeatherData>
          <VehicleData :factor-datas="factorDatas"></VehicleData>
          <WeatherData
            :factor-datas="factorDatas"
            :temprature="temprature"
            :humidity="humidity"
            :wind-direction="windDirection"
            :wind-speed="windSpeed"
          ></WeatherData>
          <VehicleData :factor-datas="factorDatas" :speed="speed"></VehicleData>
          <el-row justify="center">
            <div class="tag-time">时间：{{ time }}</div>
          </el-row>
        </template>
      </BaseCard>
    </el-col>
@@ -15,6 +24,7 @@
</template>
<script>
import { FactorDatas } from '@/model/FactorDatas';
import { realTimeMapAnimation } from '@/utils/map/animation';

export default {
  props: {
@@ -25,8 +35,39 @@
  },
  data() {
    return {
      show: true
      show: true,
      temprature: '--',
      humidity: '--',
      windDirection: '--',
      windSpeed: '--',
      speed: '0',
      time: '----/--/--'
    };
  },
  methods: {
    getFactorData(factorDatas, index, key, scale = 10) {
      let d = factorDatas.factor[key].datas[index].factorData;
      return Math.round(d * scale) / scale;
    },
    refresh(factorDatas, index) {
      this.temprature = this.getFactorData(factorDatas, index, '8') + '';
      this.humidity = this.getFactorData(factorDatas, index, '9') + '';
      this.windDirection = this.getFactorData(factorDatas, index, '17') + '';
      this.windSpeed = this.getFactorData(factorDatas, index, '16') + '';
      this.speed = this.getFactorData(factorDatas, index, '14', 1);
      this.time = factorDatas.times[index];
    }
  },
  mounted() {
    realTimeMapAnimation.setOnEachFrameCallback(this.refresh);
  }
};
</script>
<style scoped>
.tag-time {
  padding: 2px 4px;
  border: 1px solid white;
  border-radius: 2px;
  -moz-border-radius: 25px;
}
</style>