邓洁 : 绑定首页实时数据

src/components/content/windPressure/childComps/WindPressureItem.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="wind-pressure-item">
     <div class="label">
-      <img src="../../../../assets/images/windPressure/icon.png" alt="" /><span
-        >{{ params.wp.windPId }}号风压</span
-      >
+      <img src="../../../../assets/images/windPressure/icon.png" alt=""/><span
+    >{{ index }}号风压</span
+    >
     </div>
     <div class="container" ref="length">
       <div class="value" ref="value"></div>
@@ -16,9 +16,11 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, watch, defineProps, computed } from "vue";
+import {reactive, onMounted, watch, defineProps, computed} from "vue";
+
 const params = defineProps({
   wp: Object,
+  index: Number,
 });
 // const info = {
 //   windPId: 0, //编号
@@ -31,16 +33,19 @@ const length = ref(null);
 const value = ref(null);
 const point = ref(null);
 onMounted(handleOnMounted);
+
 function handleOnMounted() {
   // const  = length.value.offsetWidth);
   setValue();
 }
+
 watch(
-  () => params.wp.value,
-  (value) => {
-    setValue();
-  }
+    () => params.wp.value,
+    (value) => {
+      setValue();
+    }
 );
+
 function setValue() {
   let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
   value.value.style.width = `${width}px`;
@@ -52,6 +57,7 @@ function setValue() {
     value.value.style.background = "#60DDDE";
   }
 }
+
 let isWaring = computed(() => {
   return params.wp.value >= params.wp.point;
 });
@@ -63,6 +69,15 @@ let isWaring = computed(() => {
   align-items: center;
   width: 100%;
   padding: 20px 0px 14px 33px;
+
+  &:last-child {
+    .label {
+      span {
+        margin: 0 5px 0 14px;
+      }
+    }
+  }
+
   .label {
     display: flex;
     align-items: center;
@@ -71,22 +86,27 @@ let isWaring = computed(() => {
       height: 26px;
       width: 26px;
     }
+
     span {
-      width: 101px;
+      //width: 101px;
+      white-space: nowrap;
       height: 37px;
       font-size: 28px;
       font-family: MicrosoftYaHei;
       color: #d6f1fa;
       line-height: 37px;
-      margin: 0px 20px 0px 14px;
+      margin: 0 20px 0 14px;
+
     }
   }
+
   .container {
     width: 500px;
     height: 24px;
     border-radius: 12px;
     border: 1px solid #0f82af;
     position: relative;
+
     .value {
       height: inherit;
       width: 0px;
@@ -94,6 +114,7 @@ let isWaring = computed(() => {
       border-radius: 10px;
       transition: width 0.5s linear 0s;
     }
+
     #point {
       position: absolute;
       height: inherit;
@@ -103,6 +124,7 @@ let isWaring = computed(() => {
       left: 1px;
     }
   }
+
   .value-num {
     height: 37px;
     font-size: 28px;
@@ -111,6 +133,7 @@ let isWaring = computed(() => {
     line-height: 37px;
     margin-left: 20px;
   }
+
   .warning {
     color: #f53839;
     font-size: 28px;