调整样式，接口对接

gjj

2025-02-25 fe2b697a063ab9898af5ec0b49c30ad20274d56e

 src/views/EquipmentView.vue

@@ -1,618 +1,670 @@
<template>
  <div class="equipment-container">
    <div class="top-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
<div class="equipment-container">
 <div class="top-nav w-full mb-[1vh]" :style="{
          backgroundImage: `url(${titleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
      </div>
      <div class="stats-grid"  :style="sectionStyle">
        <div class="stat-item mb-[10px]">
          <div class="stat-info">
            <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/shishirenshu.png" alt="">
            <span class="satalabel ml-[8px]">实时人数</span>
          </div>
          <div class="value text-[#00FFFF] text-[28px] font-bold">62</div>
        </div>
        <div class="stat-item mb-[10px]">
          <div class="stat-info">
            <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/people.png" alt="">
            <span class="satalabel ml-[8px]">今日累计/人次</span>
          </div>
          <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
        </div>
        <div class="stat-item">
          <div class="stat-info">
            <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/zaigang.png" alt="">
            <span class="satalabel ml-[8px]">在岗总数</span>
          </div>
          <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
        </div>
      </div>
    </div>
        }">
 </div>
 <div class="bottom-nav">
  <div class="top-section mb-[20px]">

    <div class="middle-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
   <div class="stats-grid" :style="sectionStyle">
    <div class="stat-item mb-[10px]">
     <div class="stat-info">
      <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/shishirenshu.png" alt="">
      <span class="satalabel ml-[8px]">实时人数</span>
     </div>
     <div class="value text-[#00FFFF] text-[28px] font-bold">62</div>
    </div>
    <div class="stat-item mb-[10px]">
     <div class="stat-info">
      <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/people.png" alt="">
      <span class="satalabel ml-[8px]">今日累计/人次</span>
     </div>
     <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
    </div>
    <div class="stat-item">
     <div class="stat-info">
      <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/zaigang.png" alt="">
      <span class="satalabel ml-[8px]">在岗总数</span>
     </div>
     <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
    </div>
   </div>
  </div>

  <div class="middle-section mb-[20px]">
   <div class="w-full h-[4vh] mb-[1vh]" :style="{
          backgroundImage: `url(${middleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
      </div>
      <div class="equipment-status"  :style="sectionStyle">
        <div 
          class="w-full h-[30px] mb-[10px]" 
          :style="{
        }">
   </div>
   <div class="equipment-status" :style="sectionStyle">
    <div class="w-full h-[30px] mb-[10px]" :style="{
            backgroundImage: `url(${bgImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: '100% 100%'
          }"
        >
          <div class="text-white text-[14px] ml-[40px] leading-[35px]">升降机监控</div>
        </div>
        <div class="status-circles">
          <template v-for="item in circleItems">
            <div class="circle-item flex flex-col items-center justify-center" :key="item.id">
              <div class="progress-circle">
                <V2Echarts :idName="item.id" :options="item.options" />
                <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-[24px] text-[#FFD500]">{{item.value}}</div>
            </div>
            </div>
          </template>
        </div>
        <div class="control-buttons mt-[30px]">
          <button class="control-btn" :class="{ 'active': currentTab === '塔吊监控' }" @click="handleControlBtnClick('塔吊监控')">塔吊监控</button>
          <button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
        </div>
        <div class="divider"></div>
        <div class="progress-bar">
          <div class="label">运行设备总数</div>
          <div class="bar flex items-center">
            <div class="progress relative w-[80%] 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>
              </div>
            </div>
            <div class="count-container ml-[25px]">
              <span class="text-[#FFBF00] text-[24px]">{{deviceOnline}}</span>
              <span class="text-white text-[24px]">/</span>
              <span class="text-white text-[24px]">{{deviceTotal}}</span>
            </div>
          </div>
        </div>
      </div>
          }">
     <div class="text-white text-[14px] ml-[40px] leading-[35px]">升降机监控</div>
    </div>
    <div class="status-circles">
     <template v-for="item in circleItems">
      <div class="circle-item flex flex-col items-center justify-center" :key="item.id">
       <div class="progress-circle">
        <V2Echarts :idName="item.id" :options="item.options" />
        <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-[24px] text-[#FFD500]">{{item.value}}</div>
       </div>
      </div>
     </template>
    </div>
    <div class="control-buttons">
     <button class="control-btn" :class="{ 'active': currentTab === '塔吊监控' }" @click="handleControlBtnClick('塔吊监控')">塔吊监控</button>
     <button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
    </div>
    <div class="divider"></div>
    <div class="progress-bar">
     <div class="label">运行设备总数</div>
     <div class="bar flex items-center">
      <div class="progress relative w-[80%] 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>
       </div>
      </div>
      <div class="count-container ml-[25px]">
       <span class="text-[#FFBF00] text-[24px]">{{deviceOnline}}</span>
       <span class="text-white text-[24px]">/</span>
       <span class="text-white text-[24px]">{{deviceTotal}}</span>
      </div>
     </div>
    </div>
   </div>
  </div>

    <div class="bottom-section">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
  <div class="bottom-section">
   <div class="w-full h-[4vh] mb-[1vh]" :style="{
          backgroundImage: `url(${bottomImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
      </div>
      <div class="environment-grid"  :style="sectionStyle">
        <div class="env-item">
          <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>
        </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>
        </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>
        </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>
        </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>
        </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>
        </div>
      </div>
        }">
   </div>
   <div class="environment-grid" :style="sectionStyle">
    <div class="env-item">
     <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>
    </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>
    </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>
    </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>
    </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>
    </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>
    </div>
   </div>
  </div>
 </div>
</div>
</template>

<script>
import V2Echarts from '@/components/V2Echarts.vue'
export default {
  name: 'EquipmentView',
  components: {
    V2Echarts
  },
  data() {
    return {
      backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png', import.meta.url).href,
      titleImage: new URL('@/assets/images/titles/renyuan.png', import.meta.url).href,
      middleImage: new URL('@/assets/images/titles/shebei.png', import.meta.url).href,
      bottomImage: new URL('@/assets/images/titles/huanjing.png', import.meta.url).href,
      bgImage: new URL('@/assets/images/titles/title_second.png', import.meta.url).href,
      enviorImage: new URL('@/assets/images/titles/wendu_bg.png', import.meta.url).href,
      deviceOnline: 1,
      deviceTotal: 27,
      currentTab: '塔吊监控',
      circleItems: [
        {
          id: 'zaixianChartBox',
          name: '总在线',
          value: 22,
          percentage: 81.5,
          options: {
            tooltip: {
              trigger: 'item',
            },
            legend: {
              itemWidth: 8,
              itemHeight: 8,
              top: '5%',
              left: 'center',
              show: false,
            },
            series: [
              {
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
              },
              {
                type: 'pie',
                radius: ['70%', '100%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 10,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
                ],
              },
              
            ],
          }
 name: 'EquipmentView',
 components: {
  V2Echarts
 },
 data() {
  return {
   backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
    import.meta.url).href,
   titleImage: new URL('@/assets/images/titles/renyuan.png',
    import.meta.url).href,
   middleImage: new URL('@/assets/images/titles/shebei.png',
    import.meta.url).href,
   bottomImage: new URL('@/assets/images/titles/huanjing.png',
    import.meta.url).href,
   bgImage: new URL('@/assets/images/titles/title_second.png',
    import.meta.url).href,
   enviorImage: new URL('@/assets/images/titles/wendu_bg.png',
    import.meta.url).href,
   deviceOnline: 1,
   deviceTotal: 27,
   currentTab: '塔吊监控',
   circleItems: [{
     id: 'zaixianChartBox',
     name: '总在线',
     value: 22,
     percentage: 81.5,
     options: {
      tooltip: {
       trigger: 'item',
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
       show: false,
      },
      series: [{
        type: 'pie',
        radius: ['70%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 5,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        {
          id: 'lixianChartBox',
          name: '总离线',
          value: 5,
          percentage: 81.5,
          options: {
            tooltip: {
              trigger: 'item',
            },
            legend: {
              itemWidth: 8,
              itemHeight: 8,
              top: '5%',
              left: 'center',
              show: false,
            },
            series: [
              {
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
              },
              {
                type: 'pie',
                radius: ['70%', '100%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 10,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
                ],
              },
              
            ],
          }
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
       },
       {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        {
          id: 'baojingChartBox',
          name: '总报警',
          value: 0,
          percentage: 81.5,
          options: {
            tooltip: {
              trigger: 'item',
            },
            legend: {
              itemWidth: 8,
              itemHeight: 8,
              top: '5%',
              left: 'center',
              show: false,
            },
            series: [
              {
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
              },
              {
                type: 'pie',
                radius: ['70%', '100%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 10,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
                ],
              },
            ],
        data: [{
          value: 20,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
        }
      ]
         },
         {
          value: 80,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
        ],
       },

      ],
     }
    },
    {
     id: 'lixianChartBox',
     name: '总离线',
     value: 5,
     percentage: 81.5,
     options: {
      tooltip: {
       trigger: 'item',
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
       show: false,
      },
      series: [{
        type: 'pie',
        radius: ['70%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 5,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
       },
       {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        data: [{
          value: 20,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 80,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
        ],
       },

      ],
     }
    },
    {
     id: 'baojingChartBox',
     name: '总报警',
     value: 0,
     percentage: 81.5,
     options: {
      tooltip: {
       trigger: 'item',
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
       show: false,
      },
      series: [{
        type: 'pie',
        radius: ['70%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 5,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
       },
       {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        data: [{
          value: 20,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 80,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
        ],
       },
      ],
     }
    }
  },
  computed: {
    sectionStyle() {
      return {
        backgroundImage: `url(${this.backgroundImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%'
      }
    },
    enviorStyle() {
      return {
        backgroundImage: `url(${this.enviorImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%'
      }
    }
  },
  methods: {
    handleControlBtnClick(tab) {
      this.currentTab = tab;
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
   ]
  }
 },
 computed: {
  sectionStyle() {
   return {
    backgroundImage: `url(${this.backgroundImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  },
  enviorStyle() {
   return {
    backgroundImage: `url(${this.enviorImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  }
 },
 methods: {
  handleControlBtnClick(tab) {
   this.currentTab = tab;
  },
  handleResize() {
   if (this.myChart) {
    this.myChart.resize()
   }
  },
 }
}
</script>

<style scoped>
.equipment-container {
  width: 100%;
  height: calc(100vh - 100px);
  color: white;
 width: 100%;
 display: flex;
 flex-direction: column;
 height: calc(100vh - 100px);
 overflow: hidden;
}

.top-nav{
  height: 4vh;
}
.bottom-nav{
  flex: 1;
}
.section-title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #fff;
 font-size: 18px;
 margin-bottom: 20px;
 color: #fff;
}

.top-section {
  width: 100%;
 width: 100%;
 height: calc(100% - 80%);
}

.middle-section {
  width: 100%;
 width: 100%;
 height: 40%;
}

.bottom-section {
  width: 100%;
 width: 100%;
 height: calc(100% - 20% - 43%);
}

.stats-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 20px 10px;
}

.stat-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 14px;
  height: 52px;
  background: linear-gradient( 270deg, rgba(48,104,165,0.1) 2%, #3068A5 100%);
  border-radius: 2px;
} 
.stat-item {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 14px;
 height: 52px;
 background: linear-gradient(270deg, rgba(48, 104, 165, 0.1) 2%, #3068A5 100%);
 border-radius: 2px;
}

.env-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 10px 14px;
}

.stat-info {
  display: flex;
  flex-direction: row;
  align-items: left;
 display: flex;
 flex-direction: row;
 align-items: left;
}

.env-info {
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 70%;
 height: 95%;
}
.satalabel{
  font-size: 16px;
  color: #fff;

.satalabel {
 font-size: 16px;
 color: #fff;
}

.label {
  font-size: 12px;
  color: #fff;
 font-size: 12px;
 color: #fff;
}

.envlabel {
  font-size: 14px;
  color: #C8C8C8;
  margin-left: 20px;
 font-size: 14px;
 color: #C8C8C8;
}

.envvalue {
  font-size: 16px;
  color: #fff;
  margin-top: 4px;
  width: 100%;
  height: 100%;
  padding-left: 20px;
  text-align: center;
 font-size: 16px;
 color: #fff;
 margin-top: 4px;
 width: 100%;
 height: 100%;
}

.equipment-status {
  padding: 20px 10px;
 padding: 20px 10px;
 height: calc(100% - 5vh);
}

.status-title {
  font-size: 16px;
  margin-bottom: 20px;
 font-size: 16px;
 margin-bottom: 20px;
}

.status-circles {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
 display: flex;
 justify-content: space-around;
 margin: 20px 0;
}

.progress-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #3068A5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 border: 4px solid #3068A5;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 position: relative;
}

.percentage {
  font-size: 12px;
  color: #00ffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 font-size: 12px;
 color: #00ffff;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.environment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 height: calc(100% - 5vh);
}

.control-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
 display: flex;
 gap: 10px;
 justify-content: center;
}

.control-btn {
  padding: 8px 16px;
  background: rgba(112,119,140,0.3);
  border-radius: 2px;
  border: 1px solid rgba(112,124,140,0.6);
  color: #C8C8C8;
  cursor: pointer;
 padding: 8px 16px;
 background: rgba(112, 119, 140, 0.3);
 border-radius: 2px;
 border: 1px solid rgba(112, 124, 140, 0.6);
 color: #C8C8C8;
 cursor: pointer;
}

.control-btn.active {
  background: rgba(255,191,0,0.2);
  border-radius: 2px;
  border: 1px solid #FFBF00;
  color: #fff;
 background: rgba(255, 191, 0, 0.2);
 border-radius: 2px;
 border: 1px solid #FFBF00;
 color: #fff;
}

.divider {
  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;
 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;
}

.progress-bar {
  margin-top: 20px;
}


.bar {
  width: 100%;
 width: 100%;
}

.progress {
  background: rgba(216,216,216,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
 background: rgba(216, 216, 216, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.2);
 overflow: hidden;
}

.progress-blocks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 4px;
  padding: 2px 4px;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 gap: 4px;
 padding: 2px 4px;
}

.block {
  flex: 1;
  height: 100%;
  background: rgba(216,216,216,0.1);
 flex: 1;
 height: 100%;
 background: rgba(216, 216, 216, 0.1);
}

.block.active {
  background: linear-gradient(180deg, #FFD500 0%, #FF9B00 100%);
 background: linear-gradient(180deg, #FFD500 0%, #FF9B00 100%);
}

.progress-inner {
  display: none;
 display: none;
}
</style>