gjj
2025-03-25 540e60ef3440978305e03dcc26a52ff5169084af
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 {