From fb876cbc3b21035125668f2db6ee84e47efb544f Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期日, 12 五月 2024 22:42:22 +0800
Subject: [PATCH] 实时走航模式完成

---
 src/components/monitor/WeatherData.vue |  102 +++++++++++++++++++++++++++++++-------------------
 1 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/src/components/monitor/WeatherData.vue b/src/components/monitor/WeatherData.vue
index 7d6ab88..6609315 100644
--- a/src/components/monitor/WeatherData.vue
+++ b/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>

--
Gitblit v1.9.3