增加标段筛选和接口字段，调整样式，增加全局放大

gjj

2025-03-17 239933482fd30e099ab9d038bc1a2e0164a65cb4

 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>
@@ -236,14 +248,14 @@
         },
        },
        data: [{
          value: 20,
          value: 81.5,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 80,
          value: 18.5,
          name: '',
          itemStyle: {
           color: 'transparent'
@@ -259,7 +271,7 @@
     id: 'lixianChartBox',
     name: '总离线',
     value: 5,
     percentage: 81.5,
     percentage: 33,
     options: {
      tooltip: {
       trigger: 'item',
@@ -320,14 +332,14 @@
         },
        },
        data: [{
          value: 20,
          value: 33,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 80,
          value: 77,
          name: '',
          itemStyle: {
           color: 'transparent'
@@ -343,7 +355,7 @@
     id: 'baojingChartBox',
     name: '总报警',
     value: 0,
     percentage: 81.5,
     percentage: 20,
     options: {
      tooltip: {
       trigger: 'item',
@@ -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;
}