1. 修改部分bug 2. 新增2D路线轨迹绘制

riku

2025-02-13 660021a28de9b84b4362c171fdbbf89587f0c5af

 src/components/monitor/WeatherData.vue

@@ -1,70 +1,73 @@
<template>
  <el-row class="wrap">
    <el-form :inline="true">
      <el-form-item label="温度：" class="tag-2">
        {{ temprature }}
    <el-form :inline="true" class="form">
      <el-form-item label="温度：" class="w-tag">
        {{ temprature }}℃
      </el-form-item>
      <el-form-item label="湿度：" class="tag-2">
        {{ humidity }}
      <el-form-item label="湿度：" class="w-tag">
        {{ humidity }}%
      </el-form-item>
    </el-form>
    <!-- <div class="tag-2">{{ temprature }}</div>
    <div class="tag-2">{{ humidity }}</div> -->
    <!-- <div class="w-tag">{{ temprature }}</div>
    <div class="w-tag">{{ humidity }}</div> -->
  </el-row>
  <el-row class="wrap">
    <el-form :inline="true">
      <el-form-item label="风向：" class="tag-2">
        {{ windDirection }}
    <el-form :inline="true" class="form">
      <el-form-item label="风向：" class="w-tag">
        {{ _windDir }}
      </el-form-item>
      <el-form-item label="风速：" class="tag-2">
        {{ windSpeed }}
      <el-form-item label="风速：" class="w-tag">
        {{ windSpeed }}m/s
      </el-form-item>
    </el-form>
    <!-- <div class="tag-2">{{ windDirection }}</div>
    <div class="tag-2">{{ windSpeed }}</div> -->
    <!-- <div class="w-tag">{{ windDirection }}</div>
    <div class="w-tag">{{ windSpeed }}</div> -->
  </el-row>
</template>
<script>
import { FactorDatas } from '@/model/FactorDatas';
import { windDir } from '@/constant/wind-dir';

export default {
  props: {
    loading: Boolean,
    factorDatas: FactorDatas
    factorDatas: FactorDatas,
    temprature: {
      type: String,
      default: '--'
    },
    humidity: {
      type: String,
      default: '--'
    },
    windDirection: {
      type: String,
      default: '--'
    },
    windSpeed: {
      type: String,
      default: '--'
    }
  },
  data() {
    return {
      temprature: '--℃',
      humidity: '--%',
      windDirection: '--',
      windSpeed: '--m/s'
    };
    return {};
  },
  watch: {
    factorDatas: {
      handler(nV) {
        this.temprature = this.lastOne(nV, '8') + '℃';
        this.humidity = this.lastOne(nV, '9') + '%';
        this.windDirection = this.lastOne(nV, '17');
        this.windSpeed = this.lastOne(nV, '16') + 'm/s';
        // this.temprature = this.lastOne(nV, '8') + '℃';
        // this.humidity = this.lastOne(nV, '9') + '%';
        // this.windDirection = this.lastOne(nV, '17');
        // this.windSpeed = this.lastOne(nV, '16') + 'm/s';
      },
      deep: true
    }
  },
  // computed: {
  //   temprature() {
  //     return `${this.lastOne('TEMPERATURE')}℃`;
  //   },
  //   humidity() {
  //     return `${this.lastOne('HUMIDITY')}%`;
  //   },
  //   windDirection() {
  //     return `${this.lastOne('WIND_DIRECTION')}`;
  //   },
  //   windSpeed() {
  //     return `${this.lastOne('WIND_SPEED')}m/s`;
  //   }
  // },
  computed: {
    _windDir() {
      return windDir(this.windDirection);
    }
  },
  methods: {
    lastOne(factorDatas, key) {
      const f = factorDatas.factor[key];
@@ -78,3 +81,24 @@
  }
};
</script>
<style scoped>
.w-tag {
  padding: 2px 4px;
  /* background-color: green; */
  border: 1px solid white;
  border-radius: 2px;
  -moz-border-radius: 25px;
  width: 130px;
  /* Old Firefox */
}

.form {
  display: flex;
  gap: 4px;
}

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