From c23ac06446a9a1edc41cc13723e5d0b8eabdfd63 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期三, 16 七月 2025 17:30:50 +0800 Subject: [PATCH] 2025.7.16 动态溯源新增合并异常 --- src/components/monitor/WeatherData.vue | 128 ++++++++++++++++++++++++++---------------- 1 files changed, 79 insertions(+), 49 deletions(-) diff --git a/src/components/monitor/WeatherData.vue b/src/components/monitor/WeatherData.vue index 7d6ab88..c6614c1 100644 --- a/src/components/monitor/WeatherData.vue +++ b/src/components/monitor/WeatherData.vue @@ -1,70 +1,79 @@ <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="/src/assets/wdr.svg" + 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'; 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 +87,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