邓洁 : 传感器接口对接

src/components/content/airInfo/AirInfo.vue

@@ -39,13 +39,13 @@ watch(() => props.airData, (now) => {
   getAirInfo(now.sensorList)
 }, {deep: true});
 
-const changeData = (item, flag) => {
+const changeData = (item) => {
   return {
     equipmentId: item.equipmentId,
     icon: changeIcon(item.equipmentType),
     name: item.equipmentName.slice(0, 2),
     max: 120,
-    value: flag ? flag.value : item.value,
+    value: item.value,
     point: item.valueThreshold,
     unit: item.unit
   }

src/components/content/badGasInfo/BadGasInfo.vue

@@ -2,70 +2,52 @@
   <div id="bad-gas-info">
     <div class="title">有害气体</div>
     <div class="info-list">
-      <gas-info-item :gasInfo="gasInfo" />
-      <gas-info-item :gasInfo="gasInfo2" />
-      <gas-info-item :gasInfo="gasInfo3" />
-      <gas-info-item :gasInfo="gasInfo4" />
-      <gas-info-item :gasInfo="gasInfo5" />
-      <gas-info-item :gasInfo="gasInfo6" />
+      <gas-info-item v-for="item in badGasList" :gasInfo="item" />
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive } from "vue";
 import GasInfoItem from "./childComps/GasInfoItem.vue";
-const gasInfo = reactive({
-  name: "一氧化硫", //气体名称
-  max: 100, //最大值
-  value: 60, //传感器值
-  point: 50, //阈值
-});
-const gasInfo2 = reactive({
-  name: "一氧化氮", //气体名称
-  max: 100, //最大值
-  value: 40, //传感器值
-  point: 10, //阈值
-});
-const gasInfo3 = reactive({
-  name: "一氧化碳", //气体名称
-  max: 100, //最大值
-  value: 15, //传感器值
-  point: 70, //阈值
-});
-const gasInfo4 = reactive({
-  name: "二氧化碳", //气体名称
-  max: 100, //最大值
-  value: 25, //传感器值
-  point: 40, //阈值
-});
-const gasInfo5 = reactive({
-  name: "硫化氢", //气体名称
-  max: 100, //最大值
-  value: 30, //传感器值
-  point: 20, //阈值
-});
-const gasInfo6 = reactive({
-  name: "二氧化硫", //气体名称
-  max: 100, //最大值
-  value: 20, //传感器值
-  point: 20, //阈值
-});
 const props = defineProps({
-  list: Array
+  list: Array,
+  badGasData:Array
 });
+const badGasList=ref([])
 watch(() => props.list, (now, old) => {
-  console.log('传感器 ', now, old)
-  // wpList.value=now
+  badGasList.value.forEach(item=>{
+    now.forEach(newItem=>{
+      if(item.equipmentId === newItem.equipmentId){
+        item.value = newItem.value
+      }
+    })
+  })
 }, {deep: true});
-// setInterval(() => {
-//   gasInfo.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo2.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo3.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo4.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo6.value = parseInt(Math.random() * 10) * 10;
-//   gasInfo5.value = parseInt(Math.random() * 10) * 10;
-// }, 2000);
+
+watch(() => props.badGasData, (now) => {
+  getBadGasInfo(now.sensorList)
+}, {deep: true});
+const getBadGasInfo = (now) => {
+  let windPressureObj = {}
+  let windPressureArr = []
+  now.map(item => {
+    if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide"|| item.equipmentType === "sulfurMonoxide"|| item.equipmentType === "nitrogenDioxide") {
+      windPressureObj = changeData(item)
+      windPressureArr.push(windPressureObj)
+    }
+  })
+  badGasList.value = windPressureArr
+}
+const changeData = (item) => {
+  return {
+    equipmentId: item.equipmentId,
+    name: item.equipmentName.slice(0, item.equipmentName.length-2),
+    max: 120,
+    value: item.value,
+    point: item.valueThreshold,
+    unit: item.unit
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/components/content/badGasInfo/childComps/GasInfoItem.vue

@@ -3,7 +3,6 @@
     <div class="point" ref="point">
       <div class="info" ref="container"></div>
     </div>
-
     <div class="name">{{ gasInfo.name }}</div>
   </div>
 </template>