tunnel-cloud-web/src/components/content/transducerList/TransducerList.vue

<template>
  <div id="transducer-list">
    <div v-for="item in transducerData" :key="item.equipmentId">
      <div class="transducer-item">
        <img src="@/assets/images/transducer/sp_icon_dl.png" alt=""/>
        <div class="info">
          <div class="name-state">
            <div class="name">{{ item.equipmentName }}</div>
            <div class="state" v-if="stateA||stateB||stateC">
              <img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
              <span style="color: red">异常</span>
            </div>
            <div class="state" v-else>
              <img src="@/assets/images/transducer/greenLight.png" alt=""/>
              <span>正常</span>
            </div>
          </div>
          <div class="one-item">
            <div :style="{'color':stateA?'red':''}">A相电流:{{ item.phaseCurrentA }}A</div>
            <div :style="{'color':stateB?'red':''}">B相电流:{{ item.phaseCurrentB }}A</div>
            <div :style="{'color':stateC?'red':''}">C相电流:{{ item.phaseCurrentC }}A</div>
          </div>
        </div>
      </div>
      <div class="transducer-item">
        <img src="@/assets/images/transducer/sp_icon_pbq.png"/>
        <div class="info">
          <div class="name-state">
            <div class="name">{{ item.equipmentName }}</div>
            <div class="state">
              <img src="@/assets/images/transducer/greenLight.png"/>
              <span>正常</span>
            </div>
          </div>
          <div class="other-item frequency">
            <div>
              <img
                  src="@/assets/images/transducer/icon1.png"
                  alt=""
              /><span>给定频率:{{ item.frequencySetting }}HZ</span>
            </div>
            <div>
              <img
                  src="@/assets/images/transducer/icon2.png"
                  alt=""
              /><span>反馈频率:{{ item.frequencyFeedback }}HZ</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  list: Array,
  transducerData: Array
});
const transducerData = ref([])

watch(() => props.transducerData, (now) => {
  getBasicData(now.frequencyChangerList)
}, {deep: true});

watch(() => props.list, (now) => {
  transducerData.value.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
        if (newItem.frequencyFeedback) {
          item.frequencySetting = newItem.frequencySetting
          item.frequencyFeedback = newItem.frequencyFeedback
        } else if (newItem.phaseCurrentA) {
          item.phaseCurrentA = newItem.phaseCurrentA
          item.phaseCurrentB = newItem.phaseCurrentB
          item.phaseCurrentC = newItem.phaseCurrentC
        }
      }
    })
  })
}, {deep: true});
const stateA = ref(false)
const stateB = ref(false)
const stateC = ref(false)
const getBasicData = (data) => {
  let tranObj = {}
  let tranArr = []
  data?.map(item => {
    tranObj = {
      equipmentId: item.equipmentId,
      equipmentName: item.equipmentName,
      phaseCurrentA: item.phaseCurrentA,
      phaseCurrentAThreshold: item.phaseCurrentAThreshold,
      phaseCurrentB: item.phaseCurrentB,
      phaseCurrentBThreshold: item.phaseCurrentBThreshold,
      phaseCurrentC: item.phaseCurrentC,
      phaseCurrentCThreshold: item.phaseCurrentCThreshold,
      frequencySetting: item.frequencySetting,
      frequencyFeedback: item.frequencyFeedback,
    }
    stateA.value = item.phaseCurrentA > item.phaseCurrentAThreshold
    stateB.value = item.phaseCurrentB > item.phaseCurrentBThreshold
    stateC.value = item.phaseCurrentC > item.phaseCurrentCThreshold
    tranArr.push(tranObj)
  })
  //mock数据
  // let newObj = {
  //    equipmentId: 0,
  //    equipmentName:'3号变频器',
  //    phaseCurrentA: 210,
  //    phaseCurrentAThreshold: 200,
  //    phaseCurrentB: 231,
  //    phaseCurrentBThreshold: 300,
  //    phaseCurrentC: 154,
  //    phaseCurrentCThreshold:200,
  //    frequencySetting: 23,
  //    frequencyFeedback: 34,
  //  }
  //  tranArr.push(newObj)
  transducerData.value = tranArr
}
</script>

<style lang="scss" scoped>
#transducer-list {
  color: rgb(226, 26, 26);
  position: absolute;
  //top: 1015px;
  top: 760px;
  left: 70px;
  width: 830px;
  //height: 928px;
  height: 620px;
  background-image: url(@/assets/images/transducer/bg.png);
  padding: 0 30px;
  box-sizing: border-box;

  .transducer-item {
    border-bottom: rgba(107, 163, 237, 0.4) solid 2px;
    //height: 148px;
    display: flex;
    align-items: center;
    padding: 30px 0 30px 8px;

    & > img {
      height: 70px;
      width: 70px;
    }

    .info {
      // border: white solid 1px;
      //padding: 2px 5px;
      flex: 1;
      //height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .name-state {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 0 18px;

        margin-bottom: 16px;

        .name {
          width: 155px;
          height: 40px;
          font-size: 30px;
          font-weight: bold;
          color: #38cafb;
          line-height: 40px;
        }

        .state {
          width: 80px;
          height: 31px;
          font-size: 24px;
          font-weight: bold;
          color: #19d172;
          line-height: 31px;

          img {
            height: 20px;
            margin-right: 5px;
          }
        }
      }

      .one-item,
      .other-item {
        //height: 47px;
        display: flex;
        justify-content: space-between;
        color: white;
        align-items: center;
        font-size: 26px;
        line-height: 37px;
        padding: 0 0 0 18px;

        img {
          margin-right: 14px;
        }
      }

      .frequency {
        justify-content: flex-start;

        > div:first-child {
          margin-right: 40px;
        }
      }
    }
  }

  .isFirst {
    border: none;
    height: calc(155px - 30px);
  }
}
</style>