邓洁 : 绑定首页实时数据

src/components/content/windPressure/WindPressureList.vue

@@ -2,81 +2,77 @@
   <div id="wind-pressure">
     <div class="name">风压</div>
     <div class="list">
-      <wind-pressure-item v-for="item in wpList" :wp="item" />
+      <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";
-import { reactive } from "vue";
-const wpList = reactive([
+const props = defineProps({
+  list: Array
+});
+const wpList = ref([
   {
-    windPId: 1, //编号
     max: 120, //最大值
     value: 40, //测量值
     point: 60, //阈值
   },
   {
-    windPId: 1, //编号
     max: 120, //最大值
     value: 66, //测量值
     point: 60, //阈值
   },
   {
-    windPId: 2, //编号
     max: 120, //最大值
     value: 70, //测量值
     point: 50, //阈值
   },
   {
-    windPId: 3, //编号
     max: 120, //最大值
     value: 90, //测量值
     point: 60, //阈值
   },
   {
-    windPId: 4, //编号
     max: 120, //最大值
     value: 40, //测量值
     point: 30, //阈值
   },
   {
-    windPId: 5, //编号
     max: 120, //最大值
     value: 30, //测量值
     point: 50, //阈值
   },
   {
-    windPId: 6, //编号
     max: 120, //最大值
     value: 20, //测量值
     point: 30, //阈值
   },
   {
-    windPId: 7, //编号
     max: 120, //最大值
     value: 20, //测量值
     point: 30, //阈值
   },
   {
-    windPId: 8, //编号
     max: 120, //最大值
     value: 120, //测量值
     point: 80, //阈值
   },
   {
-    windPId: 9, //编号
     max: 120, //最大值
     value: 99, //测量值
     point: 70, //阈值
   },
 ]);
-setInterval(() => {
-  wpList.forEach((item) => {
-    item.value = parseInt(Math.random() * 10) * 10;
-  });
-}, 2000);
+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>
@@ -87,9 +83,6 @@ setInterval(() => {
   top: 185px;
   right: 68px;
   background-image: url(../../../assets/images/windPressure/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
   padding-top: 22px;
   .name {
     width: 64px;

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;