tunnel-cloud-web/src/components/content/usedEle/UsedEle.vue

<template>
  <div id="used-ele">
    <div class="title">用电量</div>
    <div class="content">
      <div class="item" v-for="item in eleData" :key="item.equipmentId">
        <div class="name">{{ item.equipmentName }}</div>
        <ul>
          <li>
            <div></div>
            <span>总用电量：{{ item.electricityConsumptionTotal }}v</span>
          </li>
          <li>
            <div></div>
            <span>月用电量：{{ item.electricityConsumptionMonthly }}v</span>
          </li>
          <li>
            <div></div>
            <span>日用电量：{{ item.electricityConsumptionDay }}v</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  list: Array,
  eleData: Array
});
const eleData = ref([])
watch(() => props.eleData, (now) => {
  getBasicData(now.frequencyChangerList)
}, {deep: true});
watch(() => props.list, (now) => {
  eleData.value.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
        if (newItem.electricityConsumptionDay) {
          item.electricityConsumptionDay = newItem.electricityConsumptionDay
          item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
          item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
        }
      }
    })
  })
}, {deep: true});
const getBasicData = (data) => {
  let tranObj = {}
  let tranArr = []
  data.map(item => {
    tranObj = {
      equipmentId: item.equipmentId,
      equipmentName: item.equipmentName,
      electricityConsumptionDay: item.electricityConsumptionDay,
      electricityConsumptionMonthly: item.electricityConsumptionMonthly,
      electricityConsumptionTotal: item.electricityConsumptionTotal,
    }
    tranArr.push(tranObj)
  })
  eleData.value = tranArr
}
</script>

<style lang="scss" scoped>
#used-ele {
  width: 830px;
  height: 351px;
  color: aliceblue;
  position: absolute;
  top: 1711px;
  left: 68px;
  background-image: url(../../../assets/images/usedEle/bg.png);
  padding: 21px 62px 35px 62px;

  .title {
    width: 96px;
    height: 42px;
    font-size: 32px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    color: #38cafb;
    line-height: 42px;
  }

  .content {
    //border: white solid 1px;
    height: calc(100% - 30px);
    margin-top: 4px;
    display: flex;

    .item {
      flex: 1;
      font-size: 12px;

      .name {
        width: 150px;
        height: 40px;
        font-size: 30px;
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;
        line-height: 40px;
        margin: 24px 0px 28px 0px;
      }

      ul {
        font-size: 14px;

        li {
          display: flex;
          align-items: center;
          //width: 270px;
          height: 37px;
          font-size: 28px;
          font-family: MicrosoftYaHei;
          color: #cb7c4b;
          line-height: 37px;
          margin-bottom: 25px;
          padding-left: 5px;

          &:hover {
            cursor: pointer;
            width: 280px;
            //height: 46px;
            background: #2E5589;
            border-radius: 7px;
            color: #FBF7F4;

            > div {
              background-image: url(../../../assets/images/usedEle/white-ele.png);
            }
          }

          > div {
            width: 29px;
            height: 33px;
            background-image: url(../../../assets/images/usedEle/icon-all.png);
            margin-right: 14px;
          }

          &:nth-child(2) {
            > div {
              background-image: url(../../../assets/images/usedEle/icon-month.png);
            }

            &:hover {
              > div {
                background-image: url(../../../assets/images/usedEle/white-ele.png);
              }
            }
          }

          &:nth-child(3) {
            > div {
              background-image: url(../../../assets/images/usedEle/icon-day.png);
            }

            &:hover {
              > div {
                background-image: url(../../../assets/images/usedEle/white-ele.png);
              }
            }
          }
        }

        & > :nth-child(2) {
          color: #4bcb6b;
        }

        & > :nth-child(3) {
          color: #4bcbbc;
        }
      }
    }

    & > :nth-child(2) {
      transform: translateX(25px);
    }
  }
}
</style>