tunnel-cloud-web/src/components/content/fanInfo/FanInfoItem.vue

<template>
  <div class="wind-pressure-item" :class="{ abnormal:isWaringA }">
    <div class="label">
      A相电流:{{params.wp.valueA}}A
    </div>
    <div class="container" ref="length">
      <div class="value" ref="valueA"></div>
      <div class="point" ref="pointA"></div>
    </div>
  </div>
  <div class="wind-pressure-item" :class="{ abnormal:isWaringB }">
    <div class="label">
      B相电流:{{params.wp.valueB}}A
    </div>
    <div class="container" ref="length">
      <div class="value" ref="valueB"></div>
      <div class="point" ref="pointB"></div>
    </div>
  </div>
  <div class="wind-pressure-item" :class="{ abnormal:isWaringC }">
    <div class="label">
      C相电流:{{params.wp.valueC}}A
    </div>
    <div class="container" ref="length">
      <div class="value" ref="valueC"></div>
      <div class="point" ref="pointC"></div>
    </div>
  </div>
</template>

<script setup>
const params = defineProps({
  wp: Object
});
const length = ref(null);
const valueA = ref(null);
const valueB = ref(null);
const valueC= ref(null);
const pointA = ref(null);
const pointB = ref(null);
const pointC = ref(null);
onMounted(()=>{
  setValueA();
  setValueB();
  setValueC();
})

watch(() => params.wp.value, () => {
  setValueA();
  setValueB();
  setValueC();
});

const setValueA=()=> {
  let width = (params.wp.valueA* length.value.offsetWidth) / params.wp.max;
  valueA.value.style.width = `${width}px`;
  let flag = (params.wp.pointA * length.value.offsetWidth) / params.wp.max;
  pointA.value.style.left = `${flag}px`;
  if (width >= flag) {
    valueA.value.style.background = "#F53839";
  } else {
    valueA.value.style.background = "#60DDDE";
  }
}
const setValueB=()=> {
  let width = (params.wp.valueB* length.value.offsetWidth) / params.wp.max;
  valueB.value.style.width = `${width}px`;
  let flag = (params.wp.pointB * length.value.offsetWidth) / params.wp.max;
  pointB.value.style.left = `${flag}px`;
  if (width >= flag) {
    valueB.value.style.background = "#F53839";
  } else {
    valueB.value.style.background = "#60DDDE";
  }
}
const setValueC=()=> {
  let width = (params.wp.valueC* length.value.offsetWidth) / params.wp.max;
  valueC.value.style.width = `${width}px`;
  let flag = (params.wp.pointC * length.value.offsetWidth) / params.wp.max;
  pointC.value.style.left = `${flag}px`;
  if (width >= flag) {
    valueC.value.style.background = "#F53839";
  } else {
    valueC.value.style.background = "#60DDDE";
  }
}

let isWaringA = computed(() => {
  return params.wp.valueA >= params.wp.pointA;
});
let isWaringB = computed(() => {
  return params.wp.valueB >= params.wp.pointB;
});
let isWaringC = computed(() => {
  return params.wp.valueC >= params.wp.pointC;
});
</script>

<style lang="scss" scoped>
//.abnormal:hover {
//  background: #9C5252 !important;
//  border-radius: 6px;
//
//  .point {
//    background: #fff !important;
//  }
//}

.wind-pressure-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 0 7px 10px;
  margin-bottom: 17px;

  &:hover {
    //background: #2E5589;
    //border-radius: 6px;
  }

  &:last-child {
    margin-bottom: 0;
    .label {
      span {
        margin: 0 5px 0 14px;
      }
    }
  }

  .label {
    display: flex;
    white-space: nowrap;
    align-items: center;
    margin-right: 20px;

    img {
      height: 26px;
      width: 26px;
    }

    span {
      //width: 101px;
      white-space: nowrap;
      height: 37px;
      font-size: 28px;
      color: #d6f1fa;
      line-height: 37px;
      margin: 0 20px 0 14px;

    }
  }

  .container {
    width: 500px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid #0f82af;
    position: relative;

    .value {
      height: inherit;
      width: 0px;
      background: #60ddde;
      border-radius: 10px;
      transition: width 0.5s linear 0s;
    }

    .point {
      position: absolute;
      height: 20px;
      background: #fff;
      width: 3px;
      border-radius: 4px;
      box-shadow: 0 0 10px #fff;
      top: 1px;
      left: 1px;
    }
  }

  .value-num {
    height: 37px;
    font-size: 28px;
    font-family: MicrosoftYaHei;
    color: #d6f1fa;
    line-height: 37px;
    margin-left: 20px;
  }
}
</style>