<template>
|
<el-row class="wrap">
|
<el-col v-show="show" span="10">
|
<BaseCard>
|
<template #content>
|
<WeatherData
|
:factor-datas="factorDatas"
|
:temprature="temprature"
|
:humidity="humidity"
|
:wind-direction="windDirection"
|
:wind-speed="windSpeed"
|
></WeatherData>
|
<VehicleData :factor-datas="factorDatas" :speed="speed"></VehicleData>
|
<el-row justify="center">
|
<div class="tag-time">时间：{{ time }}</div>
|
</el-row>
|
</template>
|
</BaseCard>
|
</el-col>
|
<el-col span="2">
|
<CardButton name="实时监测" @click="() => (show = !show)"></CardButton>
|
</el-col>
|
</el-row>
|
</template>
|
<script>
|
import { FactorDatas } from '@/model/FactorDatas';
|
import { realTimeMapAnimation } from '@/utils/map/animation';
|
|
export default {
|
props: {
|
deviceType: {
|
type: String
|
},
|
factorDatas: FactorDatas
|
},
|
data() {
|
return {
|
show: true,
|
temprature: '--',
|
humidity: '--',
|
windDirection: '--',
|
windSpeed: '--',
|
speed: '0',
|
time: '----/--/--'
|
};
|
},
|
methods: {
|
getFactorData(factorDatas, index, key, scale = 10) {
|
const _factor = factorDatas.factor[key];
|
if (_factor != undefined) {
|
let d = _factor.datas[index].factorData;
|
return Math.round(d * scale) / scale;
|
} else {
|
return '--';
|
}
|
},
|
refresh(factorDatas, index) {
|
this.temprature = this.getFactorData(factorDatas, index, '8') + '';
|
this.humidity = this.getFactorData(factorDatas, index, '9') + '';
|
this.windDirection = this.getFactorData(factorDatas, index, '17') + '';
|
this.windSpeed = this.getFactorData(factorDatas, index, '16') + '';
|
this.speed = this.getFactorData(factorDatas, index, '14', 1);
|
this.time = factorDatas.times[index];
|
}
|
},
|
mounted() {
|
realTimeMapAnimation.setOnEachFrameCallback(this.refresh);
|
}
|
};
|
</script>
|
<style scoped>
|
.tag-time {
|
padding: 2px 4px;
|
border: 1px solid white;
|
border-radius: 2px;
|
-moz-border-radius: 25px;
|
}
|
</style>
|
