From b33e28bc2843555355ecad59a80c83e3c26445a3 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期一, 01 九月 2025 17:29:36 +0800 Subject: [PATCH] 走航季度报告模块(待完成) --- src/views/realtimemode/component/DashBoard.vue | 98 ++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 84 insertions(+), 14 deletions(-) diff --git a/src/views/realtimemode/component/DashBoard.vue b/src/views/realtimemode/component/DashBoard.vue index 13df5ad..00e6ccc 100644 --- a/src/views/realtimemode/component/DashBoard.vue +++ b/src/views/realtimemode/component/DashBoard.vue @@ -1,20 +1,46 @@ <template> - <el-row class="wrap"> - <el-col v-show="show" span="10"> - <BaseCard> - <template #content> - <WeatherData :factor-datas="factorDatas"></WeatherData> - <VehicleData :factor-datas="factorDatas"></VehicleData> - </template> - </BaseCard> - </el-col> - <el-col span="2"> - <CardButton name="瀹炴椂鐩戞祴" @click="() => (show = !show)"></CardButton> - </el-col> - </el-row> + <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: { @@ -25,8 +51,52 @@ }, data() { return { - show: true + 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> -- Gitblit v1.9.3