From b33e28bc2843555355ecad59a80c83e3c26445a3 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 01 九月 2025 17:29:36 +0800
Subject: [PATCH] 走航季度报告模块（待完成）
---
src/components/monitor/WeatherData.vue | 127 ++++++++++++++++++++++++++---------------
1 files changed, 80 insertions(+), 47 deletions(-)
diff --git a/src/components/monitor/WeatherData.vue b/src/components/monitor/WeatherData.vue
index 7d6ab88..d40328e 100644
--- a/src/components/monitor/WeatherData.vue
+++ b/src/components/monitor/WeatherData.vue
@@ -1,70 +1,82 @@
<template>
- <el-row class="wrap">
- <el-form :inline="true">
- <el-form-item label="娓╁害锛�" class="tag-2">
- {{ temprature }}
- </el-form-item>
- <el-form-item label="婀垮害锛�" class="tag-2">
- {{ humidity }}
- </el-form-item>
- </el-form>
- <!-- <div class="tag-2">{{ temprature }}</div>
- <div class="tag-2">{{ humidity }}</div> -->
- </el-row>
- <el-row class="wrap">
- <el-form :inline="true">
- <el-form-item label="椋庡悜锛�" class="tag-2">
- {{ windDirection }}
- </el-form-item>
- <el-form-item label="椋庨�燂細" class="tag-2">
- {{ windSpeed }}
- </el-form-item>
- </el-form>
- <!-- <div class="tag-2">{{ windDirection }}</div>
- <div class="tag-2">{{ 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: {
- // 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 +90,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