邓洁 : 绑定首页实时数据

src/components/content/airInfo/AirInfo.vue

@@ -1,42 +1,43 @@
 <template>
   <div id="air-info">
     <div class="fan-speed">
-      <img src="/images/airInfo/fan-v-icon.png" alt="" />
+      <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>风速</span><span>出风：13m/s</span></div>
+        <div class="output-fan"><span>出风：13m/s</span></div>
       </div>
     </div>
     <item-info
-      :wp="info"
-      icon="/images/airInfo/o2-icon.png"
-      name="氧气"
-      unit="%"
+        :wp="info"
+        icon="o2-icon.png"
+        name="氧气"
+        unit="%"
     />
     <item-info
-      :wp="info1"
-      icon="/images/airInfo/tempture-icon.png"
-      name="温度"
-      unit=".c"
+        :wp="info1"
+        icon="tempture-icon.png"
+        name="温度"
+        unit=".c"
     />
     <item-info
-      :wp="info2"
-      icon="/images/airInfo/water-icon.png"
-      name="湿度"
-      unit="%"
+        :wp="info2"
+        icon="water-icon.png"
+        name="湿度"
+        unit="%"
     />
     <item-info
-      :wp="info3"
-      icon="/images/airInfo/dust-icon.png"
-      name="粉尘"
-      unit="mg/m3"
+        :wp="info3"
+        icon="dust-icon.png"
+        name="粉尘"
+        unit="mg/m3"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from "vue";
+import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
+
 const info = reactive({
   windPId: 0, //编号
   max: 120, //最大值
@@ -77,11 +78,9 @@ setInterval(() => {
   height: 400px;
   top: 1003px;
   right: 72px;
-  background-image: url(/images/airInfo/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
+  background-image: url(@/assets/images/airInfo/bg.png);
   padding: 43px 20px 30px 32px;
+
   .fan-speed {
     display: flex;
     height: 40px;
@@ -90,16 +89,23 @@ setInterval(() => {
     color: #ffffff;
     line-height: 40px;
     align-items: center;
+
     img {
       width: 29px;
       height: 34px;
     }
+
     .fan-info {
       flex: 1;
       display: flex;
       justify-content: space-between;
+
       .input-fan {
-        margin: 0px 13px;
+        margin: 0 26px;
+
+        > span:last-child {
+          margin-left: 30px;
+        }
       }
     }
   }

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

@@ -1,7 +1,8 @@
 <template>
   <div id="item-info">
     <div class="label">
-      <img :src="icon" alt="" />
+      <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">
@@ -15,7 +16,8 @@
 </template>
 
 <script setup>
-import { onMounted, watch, defineProps, computed } from "vue";
+import {onMounted, watch, defineProps, computed} from "vue";
+
 const params = defineProps({
   wp: Object,
   icon: String,
@@ -28,32 +30,37 @@ const params = defineProps({
 //   value: 40, //测量值
 //   point: 60, //阈值
 // };
-// const wp = reactive(info);
+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();
 }
+
 watch(
-  () => params.wp.value,
-  (value) => {
-    setValue();
-  }
+    () => params.wp.value,
+    (value) => {
+      setValue();
+    }
 );
-function setValue() {
+const getImageUrl = (name) => {
+  return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
+}
+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;
   point.value.style.left = `${flag}px`;
   if (width >= flag) {
     value.value.style.background =
-      "linear-gradient(270deg, #FB3838 0%, #E98526 100%)";
+        "linear-gradient(270deg, #FB3838 0%, #E98526 100%)";
   } else {
     value.value.style.background =
-      "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
+        "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
   }
 }
 let isWaring = computed(() => {
@@ -69,30 +76,34 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
   align-items: center;
   width: 100%;
   padding: 20px 0px 14px 0px;
+
   .label {
     display: flex;
     align-items: center;
 
-    img {
-      height: 34px;
+    .wind-icon{
+      height: 36px;
       width: 34px;
     }
+
     span {
-      width: 101px;
+      width:70px;
       height: 37px;
       font-size: 28px;
       font-family: MicrosoftYaHei;
       color: #d6f1fa;
       line-height: 37px;
-      margin: 0px 20px 0px 14px;
+      margin: 0 20px 0 22px;
     }
   }
+
   .container {
     width: 422px;
     height: 24px;
     border-radius: 12px;
     border: 1px solid #0f82af;
     position: relative;
+
     .value {
       height: inherit;
       width: 0px;
@@ -100,6 +111,7 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
       border-radius: 10px;
       transition: width 0.5s linear 0s;
     }
+
     #point {
       position: absolute;
       height: inherit;
@@ -109,6 +121,7 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
       left: 1px;
     }
   }
+
   .value-num {
     height: 37px;
     width: 160px;
@@ -119,6 +132,7 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
     margin-left: 20px;
     text-align: right;
   }
+
   .warning {
     color: #f75f34;
     font-size: 28px;