newcpms/ui/src/views/front/productTank.vue

<template>
  <div id="app-container-product">
    <div class="bg-color-black" style=";">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-area"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">芳烃/产品罐</span>
          <div class="decoration2">
            <dv-decoration-2 :reverse="true" style="width:5px;height:2.4rem;" />
          </div>
        </div>
      </div>
      <div style="float: left; margin-left: 0.1rem;position: relative">
        <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="0<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<20">
        <img src="@/assets/image/warehouse2.png" style="height: 124px;margin-top: 0.3rem" v-if="20<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<40">
        <img src="@/assets/image/warehouse3.png" style="height: 124px;margin-top: 0.3rem" v-if="40<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<60">
        <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="60<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<80">
        <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="80<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<100">
        <div class="ModelFont" style="margin-left: 55px;margin-top: 7px">{{ dashboarddata.proTwo }}%</div>
        <span class="modelTop pos1">STT1520</span>
      </div>
      <div style="float: left; margin-left: 0.1rem;position: relative">
        <div style="text-align: center">
          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="0<=(dashboarddata.proOne) && (dashboarddata.proOne)<20">
          <img src="@/assets/image/warehouse2.png" style="height:80px" v-if="20<=(dashboarddata.proOne) && (dashboarddata.proOne)<40">
          <img src="@/assets/image/warehouse3.png" style="height:80px" v-if="40<=(dashboarddata.proOne) && (dashboarddata.proOne)<60">
          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="60<=(dashboarddata.proOne) && (dashboarddata.proOne)<80">
          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="80<=(dashboarddata.proOne) && (dashboarddata.proOne)<100">
          <div class="ModelFont ModelFont2" style="top: 80px;left: 80px;">{{ dashboarddata.proOne }}%</div>
          <span class="modelTop pos2">STT1510</span>
        </div>
        <div style="text-align: center;; margin-top: 0.2rem">
          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="0<=(dashboarddata.proThree) && (dashboarddata.proThree)<20">
          <img src="@/assets/image/warehouse2.png" style="height:80px" v-if="20<=(dashboarddata.proThree) && (dashboarddata.proThree)<40">
          <img src="@/assets/image/warehouse3.png" style="height:80px" v-if="40<=(dashboarddata.proThree) && (dashboarddata.proThree)<60">
          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="60<=(dashboarddata.proThree) && (dashboarddata.proThree)<80">
          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="80<=(dashboarddata.proThree) && (dashboarddata.proThree)<100">
          <div class="ModelFont ModelFont2"  style="top: 185px;left: 25px;">{{ dashboarddata.proThree }}%</div>
          <span class="modelTop pos3">STT1360</span>
          <img src="@/assets/image/warehouse1.png" style="height:80px; margin-left: 0.2rem" v-if="0<=(dashboarddata.proFour) && (dashboarddata.proFour)<20">
          <img src="@/assets/image/warehouse2.png" style="height:80px; margin-left: 0.2rem" v-if="20<=(dashboarddata.proFour) && (dashboarddata.proFour)<40">
          <img src="@/assets/image/warehouse3.png" style="height:80px; margin-left: 0.2rem" v-if="40<=(dashboarddata.proFour) && (dashboarddata.proFour)<60">
          <img src="@/assets/image/warehouse1.png" style="height:80px; margin-left: 0.2rem" v-if="60<=(dashboarddata.proFour) && (dashboarddata.proFour)<80">
          <img src="@/assets/image/warehouse1.png" style="height:80px; margin-left: 0.2rem" v-if="80<=(dashboarddata.proFour) && (dashboarddata.proFour)<100">
          <div class="ModelFont ModelFont2"  style="top: 185px;left: 140px;">{{ dashboarddata.proFour }}%</div>
          <span class="modelTop pos4">STT1410</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['dashboarddata'],
  components: {
  },
}
</script>

<style lang="scss">
  #app-container-product {
    padding: 0.2rem 0.2rem 0;
    height: 2.9rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
      height: 2.7rem;
      border-radius: 0.125rem;
    }
    .text {
      color: #c3cbde;
    }
    //下滑线动态
    .decoration2 {
      position: absolute;
      right: 0.125rem;
    }
    .ModelFont2{
      position: absolute;
    }
    .modelTop{
      position: absolute;
      &.pos1{
        left: 44px;
        top: 0px;
      }
      &.pos2{
        left: 75px;
        top: -15px;
      }
      &.pos3{
        left: 22px;
        top: 80px;
      }
      &.pos4{
        left: 130px;
        top: 80px;
      }
    }
  }
</style>