实时走航

riku

2024-05-11 e94ea7f723e616a0566ac5c7f9d77435333d9e92

 src/components/monitor/WeatherData.vue

@@ -1,27 +1,27 @@
<template>
  <el-row class="wrap">
    <el-form :inline="true">
      <el-form-item label="温度：" class="tag-2">
    <el-form :inline="true" class="form">
      <el-form-item label="温度：" class="w-tag">
        {{ temprature }}
      </el-form-item>
      <el-form-item label="湿度：" class="tag-2">
      <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">
    <el-form :inline="true" class="form">
      <el-form-item label="风向：" class="w-tag">
        {{ windDirection }}
      </el-form-item>
      <el-form-item label="风速：" class="tag-2">
      <el-form-item label="风速：" class="w-tag">
        {{ windSpeed }}
      </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>
@@ -51,20 +51,6 @@
      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`;
  //   }
  // },
  methods: {
    lastOne(factorDatas, key) {
      const f = factorDatas.factor[key];
@@ -78,3 +64,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>