<template>
  <!-- 泵站运行工况图 -->
  <div class="pumpGKT">
    <!-- 信息展示 -->
    <div class="pumpInfo">
      <div class="flex">
        <div class="infoLeft">
          <div class="name">海洋馆泵站(雨水泵站)</div>
          <div class="type">
            <p class="success"><span></span>在线</p>
            <!-- <p class="fail"><span></span>离线</p> -->
            <!-- <p class="fault"><span></span>故障</p> -->
          </div>
        </div>
        <div class="infoRight">
          <div class="name"><img src="@/assets/newImgs/pumpGY/dianya.png" alt="电压" />电压</div>
          <div class="flex flex-justcontent-spacearound">
            <div class="part flex">
              &nbsp;A:
              <p>235.9</p>
              V
            </div>
            <div class="part flex">
              &nbsp;B:
              <p>251.9</p>
              V
            </div>
            <div class="part flex">
              &nbsp;C:
              <p>229.6</p>
              V
            </div>
          </div>
          <div class="flex flex-justcontent-spacearound">
            <div class="part flex">
              AB:
              <p>414.9</p>
              V
            </div>
            <div class="part flex">
              AC:
              <p>419.6</p>
              V
            </div>
            <div class="part flex">
              BC:
              <p>395.6</p>
              V
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 泵站图 -->
    <div class="pumpCont">
      <!-- 排入水体 -->
      <div class="waterGo">惠济河</div>

      <!-- 雨水池、污水池 -->
      <div class="waterType">雨水池</div>

      <!-- 格栅机 -->
      <div class="gsjCont flex">
        <div class="partGsj" v-for="i in 2" :key="i">
          <div class="contTips">{{ i }}#格栅机</div>
          <img src="@/assets/newImgs/pumpGY/gsjDefault.png" alt="格栅机停止状态" />
          <!-- <img src="@/assets/newImgs/pumpGY/gsjMove.png" alt="格栅机运行状态" /> -->
          <div class="status">就地</div>
          <div class="yxstatus statusYX">运行</div>
          <!-- <div class="yxstatus statusTZ">停止</div> -->
        </div>
      </div>

      <!-- 泵机 -->
      <div class="pumpBZ">
        <!-- 水流和液位值 -->
        <div class="waterVal">
          <img class="water" src="@/assets/newImgs/pumpGY/water.png" alt="水位" />
          <div class="value">
            <img src="@/assets/newImgs/pumpGY/gauge.png" alt="水尺" />
            <div class="number" :style="{ bottom: (1.45 / 12) * 384 + 'px' }">
              <div class="val">1.45</div>
            </div>
          </div>
        </div>
        <!-- 泵 -->
        <div class="flex bzCont">
          <div class="partBJ" v-for="i in 6" :key="i">
            <img class="guan" src="@/assets/newImgs/pumpGY/guan.png" alt="水管" />
            <div class="tipsBZ">
              <div class="contTips">{{ i }}雨水泵</div>
              <div class="light">
                <div class="flex"><img src="@/assets/newImgs/pumpGY/dlIcon.png" alt="电流" />77.6A</div>
                <div class="flex"><img src="@/assets/newImgs/pumpGY/timeIcon.png" alt="时长" />01:23:10</div>
              </div>
            </div>
            <img class="pump" src="@/assets/newImgs/pumpGY/pump.png" alt="泵机停止状态" />
            <!-- <img class="pump" src="@/assets/newImgs/pumpGY/pumpOpen.png" alt="泵机开启状态" /> -->
            <div class="status">就地</div>
            <div class="yxstatus statusYX">运行</div>
            <!-- <div class="yxstatus statusTZ">停止</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

onMounted(() => {});
</script>

<style lang="scss" scoped>
// prettier-ignore
.pumpGKT {
  width:1450PX;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 16PX;
  color: #FFFFFF;
  
  .pumpCont{
    position:relative;
    margin:30PX 0PX 100PX 0PX;
    width:1395PX;
    height: 460PX;
    background: url('@/assets/newImgs/pumpGY/pumpBg.png') no-repeat;
    background-size:100% 100%;
    .pumpBZ{
      position:absolute;
      bottom:0PX;
      left:345PX;
      width:935PX;
      height: 100%;
      .bzCont{
        position:absolute;
        bottom:0PX;
        left:50PX;
        z-index: 20;
        width:820PX;
        height: 100%;
        justify-content: space-around;
        .partBJ{
          position:relative;
          width:50PX;
          .tipsBZ{
            position:absolute;
            left:30PX;
            top:90PX;
            .light{
              width:100PX;
              .flex{
                align-items: center;
                margin-top:5PX;
                img{
                  width:17PX;
                  height: 17PX;
                  margin-right:5PX;
                }
              }
              
            }
          }
          .guan{
            margin:25PX 0px 0px 0PX;
          }
          .pump{
            margin:-3PX 0px 0px -20PX;
          }
          .status{
            margin:0PX 0px 0px -8PX;
          }
          .yxstatus{
            margin:40PX 0px 0px -20PX;
          }
        }
      }
      .waterVal{
        position:absolute;
        bottom:10PX;
        left:0PX;
        z-index: 10;
        width:100%;
        height: 100%;
        .water{
          position:absolute;
          bottom:0PX;
          left:0PX;
        }
        .value{
          position:absolute;
          bottom:0PX;
          right:0PX;
          height: 384PX;
          .number{
            position:absolute;
            bottom:0PX;
            left:0PX;
            z-index: 99;
            width:65PX;
            border-bottom:3px solid #2ABB3E;
            .val{
              text-align: center;
              padding:3PX 0;
              width:40PX;
              margin-left:25PX;
              background: #2ABB3E;
              font-weight: bold;
              font-size: 18PX;
            }
          }
        }
      }
    }
    .gsjCont{
      position:absolute;
      bottom:0PX;
      left:10PX;
      width:260PX;
      height: 100%;
      justify-content: space-around;
      .partGsj{
        text-align: center;
        .contTips{
          margin:90PX 0PX 10PX 15PX;
        }
        img{
          width:107PX;
          height: 252PX;
        }
        .status{
          margin:40PX 0PX 0PX -5PX;
        }
        .yxstatus{
          margin:40PX 0PX 0PX 15PX;
        }
      }
    }

    .contTips{
      width: 78PX;
      height: 26PX;
      line-height: 26PX;
      text-align: center;
      background: #004DE0;
      border-radius: 13PX;
      font-size:14PX;
    }
    .waterGo{
      position:absolute;
      right:-30PX;
      bottom:45PX;
      width:10PX;
      font-size:20PX;
      font-weight: bold;
    }
    .waterType{
      position:absolute;
      left:360PX;
      bottom:165PX;
      width:10PX;
      font-size:26PX;
      font-weight: bold;
      z-index: 90;
    }
  }
  .statusYX{
    width: 68PX;
    height: 28PX;
    line-height: 28PX;
    text-align: center;
    background: #2ABB3E;
    border-radius: 14PX;
  }
  .statusTZ{
    width: 68PX;
    height: 28PX;
    line-height: 28PX;
    text-align: center;
    background: #959595;
    border-radius: 14PX;
  }
  .pumpInfo{
    width:740PX;
    height: 140PX;
    background: rgba(7,45,67,0.6);
    border: 2PX solid #2C81C7;
    box-shadow: 0PX 0PX 8PX #67BDFA inset;
    padding:15PX;
    .infoLeft{
      width:40%;
      .name{
        font-size: 18PX;
        font-weight: 800;
      }
      .type{
        p{
          span{
            width:10PX;
            height: 10PX;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8PX;
          }
        }
        .success span{
          background: #39FE54;
        }
        .fail span{
          background: #959595;
        }
        .fault span{
          background: #FF2E2E;
        }
      }
    }
    .infoRight{
      flex:1;
      .name{
        display: flex;
        align-items: center;
        img{
          margin-right: 5PX;
        }
      }
      .part{
        width:30%;
        align-items: center;
        justify-content: space-around;
        p{
          width: 67PX;
          height: 24PX;
          line-height: 24PX;
          text-align: center;
          background: #00233D;
          border: 1PX solid #007FE0;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14PX;
          color: #39FE54;
          margin:10PX 5PX;
        }
      }
    }
  }
  
}
</style>