<template>
  <div id="wind-pressure">
    <div class="name">风压</div>
    <div class="list">
      <wind-pressure-item v-for="(item,index) in wpList" :wp="item" :index="index+1"/>
    </div>
  </div>
</template>

<script setup>
import WindPressureItem from "./childComps/WindPressureItem.vue";

const props = defineProps({
  list: Array
});
const wpList = ref([
  {
    max: 120, //最大值
    value: 40, //测量值
    point: 60, //阈值
  },
  {
    max: 120, //最大值
    value: 66, //测量值
    point: 60, //阈值
  },
  {
    max: 120, //最大值
    value: 70, //测量值
    point: 50, //阈值
  },
  {
    max: 120, //最大值
    value: 90, //测量值
    point: 60, //阈值
  },
  {
    max: 120, //最大值
    value: 40, //测量值
    point: 30, //阈值
  },
  {
    max: 120, //最大值
    value: 30, //测量值
    point: 50, //阈值
  },
  {
    max: 120, //最大值
    value: 20, //测量值
    point: 30, //阈值
  },
  {
    max: 120, //最大值
    value: 20, //测量值
    point: 30, //阈值
  },
  {
    max: 120, //最大值
    value: 120, //测量值
    point: 80, //阈值
  },
  {
    max: 120, //最大值
    value: 99, //测量值
    point: 70, //阈值
  },
]);
watch(() => props.list, (now, old) => {
  console.log('风压', now, old)
  wpList.value = now
}, {deep: true});
// setInterval(() => {
//   wpList.forEach((item) => {
//     item.value = parseInt(Math.random() * 10) * 10;
//   });
// }, 2000);
</script>

<style lang="scss" scoped>
#wind-pressure {
  width: 830px;
  height: 779px;
  position: absolute;
  top: 185px;
  right: 68px;
  background-image: url(../../../assets/images/windPressure/bg.png);
  padding: 22px 17px 0 23px;

  .name {
    width: 64px;
    height: 42px;
    font-size: 32px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    color: #38cafb;
    line-height: 42px;
    margin-left: 62px;
    margin-bottom: 38px;
  }
}
</style>
