邓洁 : 绑定首页实时数据

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;