<template>
  <!-- 典型项目设施分析 -->
  <div class="projectDXPage">
    <!-- 分析结果建议 -->
    <div class="suggest">
      <el-icon class="iconSug" title="查看过程线" @mouseover="showProgress = true" @mouseout="showProgress = false">
        <InfoFilled />
      </el-icon>
      <div class="center">2024-08-26 降雨起止时间1:15-3:45，24小时累计降雨量20.4mm，降雨等级 <span class="green">中雨</span></div>
      <!-- <p>1,项目设计最大控制容积 <span class="green">3796.52m³</span></p> -->
      <div class="cont">
        <span class="numBg">1</span>
        项目设计最大控制容积 <span class="green">96.52m³</span>
      </div>
      <div class="cont">
        <span class="numBg">2</span>
        项目设计标准达标情况（降雨量≤54.62mm时，径流总量控制率≥90%）：本场降雨径流总量控制率 <span class="green">92%</span>，
        <span class="green">达标</span>
      </div>
      <div class="cont">
        <span class="numBg">3</span>
        雨水管网产流开始时间1:45，结束时间4:45，累计流量 <span class="green">843.5m³</span>， 最大水深<span class="green"> 0.5m</span>
      </div>
    </div>

    <!-- 过程图片 -->
    <img src="@/assets/newImgs/pumpGY/suggestP.png" alt="过程图片" class="progressP" v-if="showProgress" />

    <!-- 降雨效果 -->
    <CanvasRain :width="1382" :height="800"></CanvasRain>

    <!-- 水位 水流 -->
    <img src="@/assets/newImgs/pumpGY/water.png" alt="" class="waterFlow" :style="{ height: 30 + 'px' }" />

    <!-- 实时数据 -->
    <div class="realData">
      <p style="left: 500px; bottom: 95px">管径：1.4 x 1.0米</p>
      <p style="left: 700px; bottom: 95px">实时水深：0.3米</p>
      <p style="right: 230px; bottom: 65px">进口流量：0.1m/s</p>
      <p style="right: 230px; bottom: 25px">进口SS：85mg/L</p>
      <p style="left: 60px; bottom: 65px">出口流量：0.23m/s</p>
      <p style="left: 60px; bottom: 25px">出口SS：66mg/L</p>
    </div>

    <!-- 监测设备 -->
    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备左1" style="left: 250px; bottom: 35px" class="equipM" />
    <img src="@/assets/newImgs/pumpGY/equip.png" alt="设备右1" style="right: 420px; bottom: 35px" class="equipM" />

    <!-- 水流方向 -->
    <div class="waterFX">
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="左1" style="left: 220px; bottom: 425px; transform: rotate(50deg)" />

      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间1" style="left: 320px; bottom: 625px; transform: rotate(80deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间2" style="left: 360px; bottom: 425px; transform: rotate(80deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="中间3" style="left: 385px; bottom: 195px; transform: rotate(90deg)" />

      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右1" style="right: 110px; bottom: 425px; transform: rotate(180deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右2" style="right: 350px; bottom: 355px; transform: rotate(120deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="右3" style="left: 500px; bottom: 425px; transform: rotate(130deg)" />

      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下1" style="left: 350px; bottom: 5px; transform: rotate(180deg)" />
      <img src="@/assets/newImgs/pumpGY/waterFlow.png" alt="下2" style="right: 480px; bottom: 5px; transform: rotate(180deg)" />
    </div>
  </div>
</template>

<script setup>
import CanvasRain from '@/views/sponeScreen/projectHM/canvasRain.vue';
const { proxy } = getCurrentInstance();
const showProgress = ref(false);

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

<style lang="scss">
// prettier-ignore
.projectDXPage {
  width: 1382PX;
  height: 800PX;
  margin-bottom:20PX;
  background: url('@/assets/newImgs/pumpGY/dxxmBg.jpg') no-repeat;
  background-size: 100% 100%;
  position:relative;
  .equipM{
    position: absolute; 
    z-index: 30;
    width:10PX;
    height:73PX;
  }
  .progressP{
    width:50%;
    left: 433PX; 
    top: 15PX; 
    position: absolute; 
    z-index: 20
  }
  .suggest{
    position:absolute;
    z-index: 20;
    left:15PX;
    top:15PX;
    width:421PX;
    height:251PX;
    background: url('@/assets/newImgs/pumpGY/tipsBg.png') no-repeat;
    background-size: 100% 100%;
    font-size:14PX;
    padding:20PX;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #C1E8FF;
    line-height: 24PX;
    .iconSug{
      cursor: pointer;
      position:absolute;
      top:20PX;
      right:20PX;
      width: 25PX;
      height: 25PX;
      svg{
        width: 25PX;
        height: 25PX;
      }
    }
    .center{
      margin:10PX 30px 10PX 0px;
      text-align: center;
      font-size:15PX;
      color:#fff;
    }
    .cont{
      padding-bottom:5PX;
      margin-bottom:5PX;
      border-bottom: 1px dashed #6A8CAE;
      .numBg{
        width:24PX;
        height: 18PX;
        line-height: 18PX;
        display: inline-block;
        background: url('@/assets/newImgs/pumpGY/numBg.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        color: #FFD200;
      }
    }
    span{
      font-weight: bold;
    }
  }
  .waterFlow{
    width:725PX;
    position:absolute;
    z-index: 10;
    left:243PX;
    bottom:28PX;
  }
  .realData{
    color:#fff;
    p{
      position:absolute;
      z-index: 10;
      width:160PX;
      height: 26PX;
      line-height: 26PX;
      text-align: center;
      background: #004DE0;
      border-radius: 13PX;
      font-size:16PX;
    }
  }
  .waterFX{
    img{
      position:absolute;
      z-index: 10;
    }
  }
}
</style>