邓洁: 优化界面

src/components/content/airInfo/AirInfo.vue

@@ -1,21 +1,19 @@
 <template>
   <div id="air-info">
-    <div class="fan-speed">
+    <div style="height: 21px" v-if="airList.length!==0"></div>
+    <div class="fan-speed" v-if="windSpeed!==0">
       <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
       <div class="fan-info" @click="handleOpenChart">
         <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
       </div>
     </div>
     <item-info
-        v-for="item in airList"
-        :key="item.equipmentId"
+        v-for="(item,index) in airList"
+        :key="index"
         :wp="item"
-        :icon="item.icon"
-        :name="item.name"
-        :unit="item.unit"
         @click="handleOpenAirChart(item)"
     />
-
+    <div style="height: 1px" v-if="airList.length!==0"></div>
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px"
                  :modal="false">
@@ -72,7 +70,7 @@ const props = defineProps({
   list: Array,
   airData: Array
 });
-const windSpeed = ref('')
+const windSpeed = ref(0)
 const windSpeedId = ref(0)
 const airTitle = ref('')
 const airList = ref([])
@@ -81,6 +79,7 @@ const selectTimeButton = ref(2);
 const isWindSpeedVisited = ref(false);
 const isAirVisited = ref(false);
 watch(() => props.list, (now) => {
+  console.log('props.list', now)
   airList.value?.forEach(item => {
     now.forEach(newItem => {
       if (item.equipmentId === newItem.equipmentId) {
@@ -378,26 +377,27 @@ const initAirChart = (type, values) => {
 
 <style lang="scss" scoped>
 #air-info {
-  position: absolute;
+  //min-height: 350px;
+  margin-top: 40px;
+  //position: absolute;
   z-index: 100;
   width: 824px;
   //height: 400px;
-  top: 1003px;
-  right: 72px;
+  //top: 1003px;
+  //right: 72px;
   background-image: url(@/assets/images/airInfo/bg.png);
-  padding: 25px 20px 0 21px;
+  //padding: 25px 20px 1px 21px;
 
   .fan-speed {
+    box-sizing: border-box;
     display: flex;
     //height: 40px;
     font-size: 30px;
-    font-family: MicrosoftYaHei;
     color: #ffffff;
-    line-height: 40px;
     align-items: center;
     padding: 5px 0 5px 15px;
     margin-bottom: 25px;
-
+    margin-left: 21px;
     &:hover {
       //width: 790px;
       background: #2E5589;

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

@@ -1,45 +1,38 @@
 <template>
-  <div id="item-info">
+  <div id="item-info" v-if="params.wp!==undefined">
     <div class="label">
       <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
-      <span>{{ params.name }}</span>
+      <span>{{ params.wp.name }}</span>
     </div>
     <div class="container" ref="length">
       <div class="value" ref="value"></div>
       <div id="point" ref="point"></div>
     </div>
     <div class="value-num" :class="{ warning: isWaring }">
-      {{ valueAndUnit }}
+      {{ params.wp.value }} {{ params.wp.unit }}
     </div>
   </div>
 </template>
 
 <script setup>
 const params = defineProps({
-  wp: Object,
-  icon: String,
-  name: String,
-  unit: String,
+  wp: Object
 });
-// const info = {
-//   windPId: 0, //编号
-//   max: 120, //最大值
-//   value: 40, //测量值
-//   point: 60, //阈值
-// };
-const windIcon = reactive(params.icon);
+
+const windIcon = ref();
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
-onMounted(handleOnMounted);
-
-function handleOnMounted() {
-  setValue();
-}
-
-watch(() => params.wp.value, () => {
-  setValue();
-});
+const isWaring = ref();
+// watch(() => params.wp.value, () => {
+//   setValue();
+// });
+onMounted(() => {
+  if (params.wp !== undefined) {
+    setValue();
+    windIcon.value = params.wp.icon
+  }
+})
 const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
 }
@@ -55,23 +48,25 @@ const setValue = () => {
     value.value.style.background =
         "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
   }
+  isWaring.value = params.wp.value >= params.wp.point;
 }
-let isWaring = computed(() => {
-  return params.wp.value >= params.wp.point;
-});
+// let isWaring = computed(() => {
+//   return params.wp.value >= params.wp.point;
+// });
 
-const valueAndUnit = computed(() => params.wp.value + " "+ params.unit );
 </script>
 
 <style lang="scss" scoped>
 #item-info {
   display: flex;
   align-items: center;
-  width: 100%;
+  width: 790px;
   padding: 5px 14px;
-  margin-bottom: 30px;
+  margin-bottom: 25px;
+  margin-left: 21px;
 
   &:hover {
+    width: 790px;
     background: #2E5589;
     border-radius: 6px;