邓洁 : 风压风速接口

src/components/content/windPressure/WindPressureList.vue

@@ -11,69 +11,35 @@
 import WindPressureItem from "./childComps/WindPressureItem.vue";
 
 const props = defineProps({
-  list: Array
+  list: Array,
+  winData: 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, //阈值
-  },
-]);
+const wpList = ref([]);
 watch(() => props.list, (now, old) => {
-  console.log('风压', now, old)
+  now.map(item=>{
+    item.unit='Pa'
+  })
   wpList.value = now
 }, {deep: true});
-// setInterval(() => {
-//   wpList.forEach((item) => {
-//     item.value = parseInt(Math.random() * 10) * 10;
-//   });
-// }, 2000);
+
+watch(() => props.winData, (now) => {
+  getScreenInfo(now)
+}, {deep: true});
+
+const getScreenInfo =  (now) => {
+  let windPressureObj = {}
+  let windPressureArr = []
+  now.windPressureSensorList.map(item => {
+    windPressureObj = {
+      max: 120,
+      value: item.value,
+      point: item.valueThreshold,
+      unit: item.unit
+    }
+    windPressureArr.push(windPressureObj)
+  })
+  wpList.value = windPressureArr
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -9,7 +9,7 @@
       <div id="point" ref="point"></div>
     </div>
     <div class="value-num" :class="{ warning: isWaring }">
-      {{ params.wp.value }}Pa
+      {{ params.wp.value }}{{ params.wp.unit }}
     </div>
   </div>
 </template>
@@ -38,12 +38,9 @@ function handleOnMounted() {
   setValue();
 }
 
-watch(
-    () => params.wp.value,
-    (value) => {
-      setValue();
-    }
-);
+watch(() => params.wp.value, (value) => {
+  setValue();
+});
 
 function setValue() {
   let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
@@ -63,13 +60,15 @@ let isWaring = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.abnormal:hover{
-  background: #9C5252!important;
+.abnormal:hover {
+  background: #9C5252 !important;
   border-radius: 6px;
+
   #point {
-    background: #fff!important;
+    background: #fff !important;
   }
 }
+
 #wind-pressure-item {
   display: flex;
   align-items: center;