<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">
|
{{ _windDir }}
|
</el-form-item>
|
<el-form-item label="风速：" class="w-tag">
|
{{ windSpeed }}m/s
|
</el-form-item>
|
</el-form>
|
<!-- <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,
|
temprature: {
|
type: String,
|
default: '--'
|
},
|
humidity: {
|
type: String,
|
default: '--'
|
},
|
windDirection: {
|
type: String,
|
default: '--'
|
},
|
windSpeed: {
|
type: String,
|
default: '--'
|
}
|
},
|
data() {
|
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';
|
},
|
deep: true
|
}
|
},
|
computed: {
|
_windDir() {
|
return windDir(this.windDirection);
|
}
|
},
|
methods: {
|
lastOne(factorDatas, key) {
|
const f = factorDatas.factor[key];
|
if (f) {
|
const lastIndex = f.datas.length - 1;
|
return factorDatas.factor[key].datas[lastIndex].factorData;
|
} else {
|
return '--';
|
}
|
}
|
}
|
};
|
</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>
|
