fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 src/components/CommonWeather.vue

@@ -1,63 +1,103 @@
<template>
  <div class="time-weather">
    <div class="time">{{ time }}</div>
    <div class="line"></div>
    <div class="weather">
      <img src="@/assets/images/home/homeLeft/tq.png" alt="" />
      <span class="tq">阴天</span>
      <span class="qk">适合飞行</span>
    </div>
  </div>
   <div class="time-weather">
      <div class="time">{{ time }}</div>
      <div class="line"></div>
      <div class="weather">
         <img src="@/assets/images/home/homeLeft/tq.png" alt="" />
         <span class="tq">{{ weather }}</span>
         <span class="tq">风速：{{ windVelocity }} </span>
         <span v-if="flightAdvice" :class="[flightAdvice === '适合飞行' ? 'qk' : flightAdvice === '禁止飞行' ? 'redqk' : 'yellowqk']">{{
               flightAdvice
         }}</span>
      </div>
   </div>
</template>

<script setup>
import dayjs from 'dayjs';
import dayjs from 'dayjs'
import { getDroneSuggest } from '@/api/home/common'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const store = useStore()
const flySuggest = computed(() => store.state.home.flySuggest)
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
const useAreaCode = computed(() => store.state.user.userInfo.detail.areaCode)

const time = ref('');
const time = ref('')
const updateTime = () => {
    time.value = dayjs().format('YYYY.MM.DD HH:mm:ss');
};
   time.value = dayjs().format('YYYY.MM.DD HH:mm:ss')
}

// 天气
const weather = ref('')

// 风速
const windVelocity = ref('')
// 区县级
const flightAdvice = computed(() => flySuggest.value?.flightAdvice)

// 获取天气建议
const getWeatherSuggest = () => {
   getDroneSuggest({ areaCode: selectedAreaCode.value || useAreaCode.value }).then(res => {
      if (res.data.code !== 0) return
      weather.value = res.data.data.weather
      windVelocity.value = res.data.data.windPower
   })
}

let intervalTime
onMounted(() => {
    updateTime(); // 立即执行一次
    time.value = setInterval(updateTime, 1000);
});
   getWeatherSuggest()
   updateTime() // 立即执行一次
   intervalTime = setInterval(updateTime, 1000)
})
onUnmounted(() => {
    if (time.value) {
        clearInterval(time.value);
        time.value = null;
    }
});
   if (intervalTime) {
      clearInterval(intervalTime)
      intervalTime = null
   }
})
</script>

<style scoped lang="scss">
.time-weather {
  margin-left: 45px;
  width: 310px;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .line {
    border: 1px solid #ffffff;
    height: 10px;
    opacity: 0.5;
  }
  .weather {
    img {
      width: 20px;
      height: 20px;
    }
    .tq {
      margin: 0 5px;
      color: #e7f5ff;
    }
    .qk {
      margin-left: 5px;
      color: #04f043;
    }
  }
   margin-left: 45px;
   // width: 350px;
   font-size: 14px;
   height: 36px;
   line-height: 36px;
   display: flex;
   align-items: center;
   color: #e7f5ff;
   .line {
      border: 1px solid #ffffff;
      height: 10px;
      opacity: 0.5;
      margin: 0 18px;
   }
   .weather {
      display: flex;
      align-items: center;
      img {
         width: 20px;
         height: 20px;
      }
      .tq {
         margin: 0 5px;
      }
      .qk {
         margin-left: 5px;
         color: #04f043;
      }
      .yellowqk {
         margin-left: 5px;
         color: yellow;
      }
      .redqk {
         margin-left: 5px;
         color: red;
      }
   }
}
</style>
</style>