From 540e60ef3440978305e03dcc26a52ff5169084af Mon Sep 17 00:00:00 2001 From: gjj <Ganjj@probim.com.cn> Date: Tue, 25 Mar 2025 15:31:50 +0800 Subject: [PATCH] 去掉tooltip --- src/views/EquipmentView.vue | 68 ++++++++++++++++++++++----------- 1 files changed, 45 insertions(+), 23 deletions(-) diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue index c4dcaae..2860604 100644 --- a/src/views/EquipmentView.vue +++ b/src/views/EquipmentView.vue @@ -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> @@ -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> @@ -179,6 +191,7 @@ options: { tooltip: { trigger: 'item', + show: false }, legend: { itemWidth: 8, @@ -237,7 +250,7 @@ }, data: [{ value: 81.5, - name: '主隧洞掘进', + name: '', itemStyle: { color: '#00FFFF' } @@ -263,6 +276,7 @@ options: { tooltip: { trigger: 'item', + show: false }, legend: { itemWidth: 8, @@ -321,7 +335,7 @@ }, data: [{ value: 33, - name: '主隧洞掘进', + name: '', itemStyle: { color: '#00FFFF' } @@ -347,6 +361,7 @@ options: { tooltip: { trigger: 'item', + show: false }, legend: { itemWidth: 8, @@ -405,7 +420,7 @@ }, data: [{ value: 20, - name: '主隧洞掘进', + name: '', itemStyle: { color: '#00FFFF' } @@ -456,7 +471,7 @@ } </script> -<style scoped> +<style scoped lang="scss"> .equipment-container { width: 100%; display: flex; @@ -527,12 +542,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,17 +558,27 @@ } .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 { -- Gitblit v1.9.3