From 05f6d4e6609c973f63d51335a4b7d1f01405ebf3 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Wed, 19 Mar 2025 14:56:27 +0800
Subject: [PATCH] 全景图展示修改
---
src/views/EquipmentView.vue | 71 ++++++++++++++++++++++-------------
1 files changed, 45 insertions(+), 26 deletions(-)
diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
index 44315d3..ffd20dd 100644
--- a/src/views/EquipmentView.vue
+++ b/src/views/EquipmentView.vue
@@ -44,7 +44,7 @@
}">
</div>
<div class="equipment-status" :style="sectionStyle">
- <div class="w-full h-[30px] mb-[10px]" :style="{
+ <div class="w-full h-[30px]" :style="{
backgroundImage: `url(${bgImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
@@ -60,7 +60,7 @@
<div class="percentage">{{item.percentage}}%</div>
</div>
<div class="label mt-[5px] flex flex-row items-center justify-center">
- <div class="text-[12px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div>
+ <div class="text-[16px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div>
<div class="text-[24px] text-[#FFD500]">{{item.value}}</div>
</div>
</div>
@@ -71,10 +71,10 @@
<button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
</div>
<div class="divider"></div>
- <div class="progress-bar">
+ <div class="progress-bar px-[10px]">
<div class="label">运行设备总数</div>
<div class="bar flex items-center">
- <div class="progress relative w-[80%] h-[24px]">
+ <div class="progress relative w-[90%] h-[24px]">
<div class="progress-inner" :style="{ width: `${deviceOnline / deviceTotal * 100}%` }"></div>
<div class="progress-blocks">
<div v-for="n in 28" :key="n" class="block" :class="{ 'active': (n-1)/28 * 100 <= (deviceOnline / deviceTotal * 100) }"></div>
@@ -103,42 +103,54 @@
<img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqiwendu.png" alt="">
<div class="env-info">
<span class="envlabel">大气温度</span>
- <span class="envvalue" :style="enviorStyle">5°C</span>
+ <div class="envvalue" :style="enviorStyle">
+ <span class="envvalue-text">5°C</span>
+ </div>
</div>
</div>
<div class="env-item">
<img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqishidu.png" alt="">
<div class="env-info">
<span class="envlabel">大气湿度</span>
- <span class="envvalue" :style="enviorStyle">22.9%</span>
+ <div class="envvalue" :style="enviorStyle">
+ <span class="envvalue-text">22.9%</span>
+ </div>
</div>
</div>
<div class="env-item">
<img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM2.png" alt="">
<div class="env-info">
<span class="envlabel">PM2.5</span>
- <span class="envvalue" :style="enviorStyle">10 μg/m³</span>
+ <div class="envvalue" :style="enviorStyle">
+ <span class="envvalue-text">10 μg/m³</span>
+ </div>
</div>
</div>
<div class="env-item">
<img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM10.png" alt="">
<div class="env-info">
<span class="envlabel">PM10</span>
- <span class="envvalue" :style="enviorStyle">13 μg/m³</span>
+ <div class="envvalue" :style="enviorStyle">
+ <span class="envvalue-text">13 μg/m³</span>
+ </div>
</div>
</div>
<div class="env-item">
<img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengli.png" alt="">
<div class="env-info">
<span class="envlabel">风力</span>
- <span class="envvalue" :style="enviorStyle">3级</span>
+ <div class="envvalue" :style="enviorStyle">
+ <span class="envvalue-text">3级</span>
+ </div>
</div>
</div>
<div class="env-item">
<img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengxiang.png" alt="">
<div class="env-info">
<span class="envlabel">风向</span>
- <span class="envvalue" :style="enviorStyle">北风</span>
+ <div class="envvalue" :style="enviorStyle">
+ <span class="envvalue-text">北风</span>
+ </div>
</div>
</div>
</div>
@@ -456,7 +468,7 @@
}
</script>
-<style scoped>
+<style scoped lang="scss">
.equipment-container {
width: 100%;
display: flex;
@@ -527,12 +539,9 @@
}
.env-info {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 70%;
- height: 95%;
+
+ width: calc( 100% - 88px);
+ height: 100%;
}
.satalabel {
@@ -546,21 +555,31 @@
}
.envlabel {
- font-size: 14px;
+ font-size: 16px;
color: #C8C8C8;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.envvalue {
text-align: center;
- font-size: 16px;
- color: #fff;
- margin-top: 4px;
- width: 100%;
- height: 100%;
+ font-size: 18px;
+ color: #fff;
+ margin-top: 4px;
+ width: 100%;
+ height: calc(100% - 28px);
+ position: relative;
+ .envvalue-text{
+ position: absolute;
+ top: 33%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
}
.equipment-status {
- padding: 20px 10px;
+ padding: 10px 10px;
height: calc(100% - 5vh);
}
@@ -572,7 +591,7 @@
.status-circles {
display: flex;
justify-content: space-around;
- margin: 20px 0;
+ margin: 15px 0;
}
.progress-circle {
@@ -628,7 +647,7 @@
width: 100%;
height: 1px;
background: linear-gradient(270deg, rgba(94, 161, 209, 0.1) 0%, #4886BC 49%, rgba(48, 104, 165, 0.1) 100%);
- margin: 20px 0;
+ margin: 15px 0;
}
--
Gitblit v1.9.3