<template>
|
<div>
|
<!-- <el-row justify="end">
|
<el-text class="tag-time" size="default">
|
<el-icon><Timer /></el-icon>
|
{{ time }}
|
</el-text>
|
</el-row> -->
|
<el-row class="dash-wrap">
|
<el-col :span="8">
|
<FactorIconText
|
elIcon="Timer"
|
label="TIME"
|
:value="hms"
|
:des="date"
|
></FactorIconText>
|
<VehicleData
|
:factor-datas="factorDatas"
|
:speed="speed"
|
class="m-t-4"
|
></VehicleData>
|
<!-- <el-text class="tag-time" size="default">
|
<el-icon><Timer /></el-icon>
|
{{ time }}
|
</el-text> -->
|
</el-col>
|
<el-col :span="16">
|
<WeatherData
|
:factor-datas="factorDatas"
|
:temprature="temprature"
|
:humidity="humidity"
|
:wind-direction="windDirection"
|
:wind-speed="windSpeed"
|
></WeatherData>
|
</el-col>
|
</el-row>
|
<!-- <el-row justify="center"> -->
|
<!-- </el-row> -->
|
</div>
|
</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: '----/--/--',
|
date: '----/--/--',
|
hms: '--:--:--'
|
};
|
},
|
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];
|
this.date = this.time.split(' ')[0];
|
this.hms = this.time.split(' ')[1];
|
}
|
},
|
mounted() {
|
realTimeMapAnimation.setOnEachFrameCallback(this.refresh);
|
}
|
};
|
</script>
|
<style scoped>
|
.dash-wrap {
|
border-bottom: 1px solid rgba(255, 255, 255, 0.445);
|
}
|
.tag-time {
|
color: rgba(255, 255, 255, 0.815);
|
padding: 2px 4px;
|
/* border: 1px solid white;
|
border-radius: 2px;
|
-moz-border-radius: 25px; */
|
}
|
</style>
|
