From 3daf8eebf8c0d5b4561f38e21c50818c8f6768b7 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 23 七月 2025 17:23:08 +0800
Subject: [PATCH] 2025.7.23 动态溯源模块封版,发布

---
 src/components/monitor/WeatherData.vue |   92 +++++++++++++++++++++++++++++----------------
 1 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/src/components/monitor/WeatherData.vue b/src/components/monitor/WeatherData.vue
index 85d436a..d40328e 100644
--- a/src/components/monitor/WeatherData.vue
+++ b/src/components/monitor/WeatherData.vue
@@ -1,56 +1,82 @@
 <template>
-  <el-row class="wrap">
-    <el-form :inline="true" class="form">
-      <el-form-item label="娓╁害锛�" class="w-tag">
-        {{ temprature }}
-      </el-form-item>
-      <el-form-item label="婀垮害锛�" class="w-tag">
-        {{ humidity }}
-      </el-form-item>
-    </el-form>
-    <!-- <div class="w-tag">{{ temprature }}</div>
-    <div class="w-tag">{{ humidity }}</div> -->
-  </el-row>
-  <el-row class="wrap">
-    <el-form :inline="true" class="form">
-      <el-form-item label="椋庡悜锛�" class="w-tag">
-        {{ windDirection }}
-      </el-form-item>
-      <el-form-item label="椋庨�燂細" class="w-tag">
-        {{ windSpeed }}
-      </el-form-item>
-    </el-form>
-    <!-- <div class="w-tag">{{ windDirection }}</div>
-    <div class="w-tag">{{ windSpeed }}</div> -->
-  </el-row>
+  <div>
+    <el-row justify="space-between">
+      <FactorIconText
+        faIcon="fa-solid fa-temperature-half"
+        label="TEMP"
+        :value="temprature"
+        unit="鈩�"
+      ></FactorIconText>
+      <FactorIconText
+        faIcon="fa-droplet"
+        label="HUM"
+        :value="humidity"
+        unit="%"
+      ></FactorIconText>
+    </el-row>
+    <el-row justify="space-between" class="m-t-4">
+      <FactorIconText
+        :img="wdrSvg"
+        label="WDR"
+        :value="_windDir"
+      ></FactorIconText>
+      <FactorIconText
+        faIcon="fa-wind"
+        label="WS"
+        :value="windSpeed"
+        unit="m/s"
+      ></FactorIconText>
+    </el-row>
+  </div>
 </template>
 <script>
 import { FactorDatas } from '@/model/FactorDatas';
+import { windDir } from '@/constant/wind-dir';
+import FactorIconText from './FactorIconText.vue';
+import wdrSvg from '@/assets/wdr.svg';
 
 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'
+      wdrSvg: wdrSvg
     };
   },
   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: {
+    _windDir() {
+      return windDir(this.windDirection);
+    }
+  },
   methods: {
     lastOne(factorDatas, key) {
       const f = factorDatas.factor[key];

--
Gitblit v1.9.3