邓洁 : 传感器接口对接

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

@@ -2,7 +2,6 @@
   <div id="item-info">
     <div class="label">
       <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
-      <!--      <img :src="params.icon" alt="" />-->
       <span>{{ params.name }}</span>
     </div>
     <div class="container" ref="length">
@@ -16,8 +15,6 @@
 </template>
 
 <script setup>
-import {onMounted, watch, defineProps, computed} from "vue";
-
 const params = defineProps({
   wp: Object,
   icon: String,
@@ -34,21 +31,19 @@ const windIcon = reactive(params.icon);
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
-// onMounted(handleOnMounted);
-//
-// function handleOnMounted() {
-//   // const  = length.value.offsetWidth);
-//   setValue();
-// }
+onMounted(handleOnMounted);
 
-watch(() => params.wp.value, (val) => {
-  console.log('xin----', val)
-  setValue(value);
-}, {deep: true});
+function handleOnMounted() {
+  setValue();
+}
+
+watch(() => params.wp.value, () => {
+  setValue();
+});
 const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
 }
-const setValue = (val) => {
+const setValue = () => {
   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;
@@ -65,7 +60,7 @@ let isWaring = computed(() => {
   return params.wp.value >= params.wp.point;
 });
 
-const valueAndUnit = computed(() => params.wp.value + params.unit + "");
+const valueAndUnit = computed(() => params.wp.value + " "+ params.unit );
 </script>
 
 <style lang="scss" scoped>