邓洁 : 传感器接口对接

src/components/content/airInfo/AirInfo.vue

@@ -3,98 +3,78 @@
     <div class="fan-speed">
       <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
       <div class="fan-info">
-        <div class="input-fan"><span>风速</span><span>进风：13m/s</span></div>
-        <div class="output-fan"><span>出风：13m/s</span></div>
+        <div class="input-fan"><span>风速</span><span>进风：{{ windSpeed }}m/s</span></div>
+        <div class="output-fan"><span>出风：{{windSpeed}}m/s</span></div>
       </div>
     </div>
     <item-info
-        :wp="info"
-        icon="o2-icon.png"
-        name="氧气"
-        unit="%"
-    />
-    <item-info
-        :wp="info1"
-        icon="tempture-icon.png"
-        name="温度"
-        unit=".c"
-    />
-    <item-info
-        :wp="info2"
-        icon="water-icon.png"
-        name="湿度"
-        unit="%"
-    />
-    <item-info
-        :wp="info3"
-        icon="dust-icon.png"
-        name="粉尘"
-        unit="mg/m3"
+        v-for="item in airList"
+        :wp="item"
+        :icon="item.icon"
+        :name="item.name"
+        :unit="item.unit"
     />
   </div>
 </template>
 
 <script setup>
-import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
 
 const props = defineProps({
   list: Array,
   airData: Array
 });
-let info = reactive({
-  // windPId: 0, //编号
-  // max: 120, //最大值
-  // value: 70, //测量值
-  // point: 60, //阈值
-});
-let info1 = reactive({});
-let info2 = reactive({});
-let info3 = reactive({});
+const windSpeed=ref('')
+const airList = ref([])
+watch(() => props.list, (now) => {
+  airList.value.forEach(item=>{
+    now.forEach(newItem=>{
+      if(item.equipmentId === newItem.equipmentId){
+        item.value = newItem.value
+      }
+    })
+  })
+}, {deep: true});
 watch(() => props.airData, (now) => {
   getAirInfo(now.sensorList)
 }, {deep: true});
 
-watch(() => props.list, (now, old) => {
-  console.log('传感器 ', now, old)
-  now.map(item=>{
-    getInfo(item)
-  })
-}, {deep: true});
-const changeData=(item,flag)=>{
-  return{
+const changeData = (item, flag) => {
+  return {
     equipmentId: item.equipmentId,
+    icon: changeIcon(item.equipmentType),
+    name: item.equipmentName.slice(0, 2),
     max: 120,
-    value: flag?flag.value:item.value,
+    value: flag ? flag.value : item.value,
     point: item.valueThreshold,
-    unit:item.unit
+    unit: item.unit
   }
 }
-const getInfo=(item)=>{
-  if(item.equipmentId==info.equipmentId){
-    // info.value=item.value
-    changeData(item,info1)
-    console.log('info',info)
-  }else if(item.equipmentId==info1.equipmentId){
-    changeData(item,info1)
-  }else if(item.equipmentId==info2.equipmentId){
-    changeData(item,info2)
-  }else if(item.equipmentId==info3.equipmentId){
-    changeData(item,info3)
+const changeIcon = (type) => {
+  switch (type) {
+    case "dust":
+      return 'dust-icon.png';
+    case "oxygen":
+      return 'o2-icon.png';
+    case "temperature":
+      return 'tempture-icon.png';
+    case "humidness":
+      return 'water-icon.png';
   }
 }
 const getAirInfo = (now) => {
+  let windPressureObj = {}
+  let windPressureArr = []
   now.map(item => {
-    if (item.equipmentType === "dust") {//粉尘
-      info3 = changeData(item)
-    } else if (item.equipmentType === "oxygen") {//氧气
-      info = changeData(item)
-    } else if (item.equipmentType === "temperature") {//温度
-      info1 = changeData(item)
-    } else if (item.equipmentType === "humidness") {//湿度
-      info2 = changeData(item)
+    if (item.equipmentType === "dust" || item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
+      windPressureObj = changeData(item)
+      windPressureArr.push(windPressureObj)
+    }else if(item.equipmentType === "windDirection"){
+      windSpeed.value = item.value
     }
   })
+  windPressureArr.push(windPressureArr.shift())
+  airList.value = windPressureArr
 }
 </script>