调整样式，接口对接

gjj

2025-02-25 fe2b697a063ab9898af5ec0b49c30ad20274d56e

 src/views/EquipmentView.vue

@@ -1,16 +1,15 @@
<template>
  <div class="equipment-container">
    <div class="top-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
 <div class="top-nav w-full mb-[1vh]" :style="{
          backgroundImage: `url(${titleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
        }">
      </div>
 <div class="bottom-nav">
  <div class="top-section mb-[20px]">

      <div class="stats-grid"  :style="sectionStyle">
        <div class="stat-item mb-[10px]">
          <div class="stat-info">
@@ -37,26 +36,20 @@
    </div>

    <div class="middle-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
   <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 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">
@@ -73,7 +66,7 @@
            </div>
          </template>
        </div>
        <div class="control-buttons mt-[30px]">
    <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>
@@ -84,10 +77,7 @@
            <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 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]">
@@ -101,15 +91,12 @@
    </div>

    <div class="bottom-section">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
   <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">
@@ -157,6 +144,7 @@
      </div>
    </div>
  </div>
</div>
</template>

<script>
@@ -168,17 +156,22 @@
  },
  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,
   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: [
        {
   circleItems: [{
          id: 'zaixianChartBox',
          name: '总在线',
          value: 22,
@@ -194,8 +187,7 @@
              left: 'center',
              show: false,
            },
            series: [
              {
      series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
@@ -215,9 +207,13 @@
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
              },
              {
                type: 'pie',
@@ -239,9 +235,20 @@
                    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'
          }
         },
                ],
              },
              
@@ -264,8 +271,7 @@
              left: 'center',
              show: false,
            },
            series: [
              {
      series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
@@ -285,9 +291,13 @@
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
              },
              {
                type: 'pie',
@@ -309,9 +319,20 @@
                    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'
          }
         },
                ],
              },
              
@@ -334,8 +355,7 @@
              left: 'center',
              show: false,
            },
            series: [
              {
      series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
@@ -355,9 +375,13 @@
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
              },
              {
                type: 'pie',
@@ -379,9 +403,20 @@
                    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'
          }
         },
                ],
              },
            ],
@@ -424,10 +459,17 @@
<style scoped>
.equipment-container {
  width: 100%;
 display: flex;
 flex-direction: column;
  height: calc(100vh - 100px);
  color: white;
 overflow: hidden;
}

.top-nav{
  height: 4vh;
}
.bottom-nav{
  flex: 1;
}
.section-title {
  font-size: 18px;
  margin-bottom: 20px;
@@ -436,18 +478,22 @@

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

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

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

.stats-grid {
  width: 100%;
 height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -465,6 +511,7 @@
  background: linear-gradient( 270deg, rgba(48,104,165,0.1) 2%, #3068A5 100%);
  border-radius: 2px;
} 

.env-item {
  width: 100%;
  display: flex;
@@ -478,37 +525,43 @@
  flex-direction: row;
  align-items: left;
}

.env-info {
  display: flex;
  flex-direction: column;
 align-items: center;
 justify-content: center;
  width: 70%;
  height: 100%;
 height: 95%;
}

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

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

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

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

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

.status-title {
@@ -546,6 +599,7 @@
.environment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 height: calc(100% - 5vh);
}

.control-buttons {
@@ -577,9 +631,7 @@
  margin: 20px 0;
}

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


.bar {
  width: 100%;