邓洁 : 风压风速接口

src/components/content/airInfo/AirInfo.vue

@@ -39,43 +39,63 @@ import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
 
 const props = defineProps({
-  list: Array
+  list: Array,
+  airData: Array
 });
-const info = reactive({
-  windPId: 0, //编号
-  max: 120, //最大值
-  value: 70, //测量值
-  point: 60, //阈值
-});
-const info1 = reactive({
-  windPId: 0, //编号
-  max: 120, //最大值
-  value: 60, //测量值
-  point: 70, //阈值
-});
-const info2 = reactive({
-  windPId: 0, //编号
-  max: 120, //最大值
-  value: 90, //测量值
-  point: 100, //阈值
-});
-const info3 = reactive({
-  windPId: 0, //编号
-  max: 120, //最大值
-  value: 80, //测量值
-  point: 88, //阈值
+let info = reactive({
+  // windPId: 0, //编号
+  // max: 120, //最大值
+  // value: 70, //测量值
+  // point: 60, //阈值
 });
+let info1 = reactive({});
+let info2 = reactive({});
+let info3 = reactive({});
+watch(() => props.airData, (now) => {
+  getAirInfo(now.sensorList)
+}, {deep: true});
+
 watch(() => props.list, (now, old) => {
   console.log('传感器 ', now, old)
-  // wpList.value=now
+  now.map(item=>{
+    getInfo(item)
+  })
 }, {deep: true});
-// setInterval(() => {
-//   info.value = parseInt(Math.random() * 10) * 10;
-//   info1.value = parseInt(Math.random() * 10) * 10;
-//   info2.value = parseInt(Math.random() * 10) * 10;
-//   info3.value = parseInt(Math.random() * 10) * 10;
-// }, 2000);
-
+const changeData=(item,flag)=>{
+  return{
+    equipmentId: item.equipmentId,
+    max: 120,
+    value: flag?flag.value:item.value,
+    point: item.valueThreshold,
+    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 getAirInfo = (now) => {
+  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)
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -97,7 +117,7 @@ watch(() => props.list, (now, old) => {
     color: #ffffff;
     line-height: 40px;
     align-items: center;
-    padding:5px 0 5px 15px;
+    padding: 5px 0 5px 15px;
     margin-bottom: 25px;
 
     &:hover {

src/components/content/airInfo/childComps/ItemInfo.vue

@@ -34,23 +34,21 @@ const windIcon = reactive(params.icon);
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
-onMounted(handleOnMounted);
+// onMounted(handleOnMounted);
+//
+// function handleOnMounted() {
+//   // const  = length.value.offsetWidth);
+//   setValue();
+// }
 
-function handleOnMounted() {
-  // const  = length.value.offsetWidth);
-  setValue();
-}
-
-watch(
-    () => params.wp.value,
-    (value) => {
-      setValue();
-    }
-);
+watch(() => params.wp.value, (val) => {
+  console.log('xin----', val)
+  setValue(value);
+}, {deep: true});
 const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
 }
-const setValue = () => {
+const setValue = (val) => {
   let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
   value.value.style.width = `${width}px`;
   let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
@@ -76,7 +74,8 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
   align-items: center;
   width: 100%;
   padding: 5px 14px;
-margin-bottom: 30px;
+  margin-bottom: 30px;
+
   &:hover {
     background: #2E5589;
     border-radius: 6px;