2025.7.4 动态溯源

riku

2025-07-04 d6e6f8b5b31e132e4597eb531168d3e88f3bda72

 src/views/realtimemode/component/DashBoard.vue

@@ -1,20 +1,46 @@
<template>
  <el-row class="wrap">
    <el-col v-show="show" span="10">
      <BaseCard>
        <template #content>
          <WeatherData :factor-datas="factorDatas"></WeatherData>
          <VehicleData :factor-datas="factorDatas"></VehicleData>
        </template>
      </BaseCard>
    </el-col>
    <el-col span="2">
      <CardButton name="实时监测" @click="() => (show = !show)"></CardButton>
    </el-col>
  </el-row>
  <div>
    <!-- <el-row justify="end">
      <el-text class="tag-time" size="default">
        <el-icon><Timer /></el-icon>
        {{ time }}
      </el-text>
    </el-row> -->
    <el-row class="dash-wrap">
      <el-col :span="8">
        <FactorIconText
          elIcon="Timer"
          label="TIME"
          :value="hms"
          :des="date"
        ></FactorIconText>
        <VehicleData
          :factor-datas="factorDatas"
          :speed="speed"
          class="m-t-4"
        ></VehicleData>
        <!-- <el-text class="tag-time" size="default">
          <el-icon><Timer /></el-icon>
          {{ time }}
        </el-text> -->
      </el-col>
      <el-col :span="16">
        <WeatherData
          :factor-datas="factorDatas"
          :temprature="temprature"
          :humidity="humidity"
          :wind-direction="windDirection"
          :wind-speed="windSpeed"
        ></WeatherData>
      </el-col>
    </el-row>
    <!-- <el-row justify="center"> -->
    <!-- </el-row> -->
  </div>
</template>
<script>
import { FactorDatas } from '@/model/FactorDatas';
import { realTimeMapAnimation } from '@/utils/map/animation';

export default {
  props: {
@@ -25,8 +51,52 @@
  },
  data() {
    return {
      show: true
      show: true,
      temprature: '--',
      humidity: '--',
      windDirection: '--',
      windSpeed: '--',
      speed: '0',
      time: '----/--/--',
      date: '----/--/--',
      hms: '--:--:--'
    };
  },
  methods: {
    getFactorData(factorDatas, index, key, scale = 10) {
      const _factor = factorDatas.factor[key];
      if (_factor != undefined) {
        let d = _factor.datas[index].factorData;
        return Math.round(d * scale) / scale;
      } else {
        return '--';
      }
    },
    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];
      this.date = this.time.split(' ')[0];
      this.hms = this.time.split(' ')[1];
    }
  },
  mounted() {
    realTimeMapAnimation.setOnEachFrameCallback(this.refresh);
  }
};
</script>
<style scoped>
.dash-wrap {
  border-bottom: 1px solid rgba(255, 255, 255, 0.445);
}
.tag-time {
  color: rgba(255, 255, 255, 0.815);
  padding: 2px 4px;
  /* border: 1px solid white;
  border-radius: 2px;
  -moz-border-radius: 25px; */
}
</style>