feat: 添加风速，修改建议飞行颜色

张含笑

2025-04-10 3124dced3b901426803137204ddbd58016b60760

feat: 添加风速，修改建议飞行颜色

 src/components/CommonWeather.vue

@@ -1,78 +1,94 @@
<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">{{ weather }}</span>
      <span class="qk">{{ isFly }}</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="flylevel >6" :class="[isFly ==='建议飞行' ? 'qk' :isFly ==='禁止飞行' ? 'redqk' :'yellowqk']">{{ isFly }}</span>
        </div>
    </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { getDroneSuggest } from '@/api/home/common';
import dayjs from 'dayjs'
import { getDroneSuggest } from '@/api/home/common'


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 weather = ref('')
// 是否适合飞行
const isFly = ref('');
const isFly = ref('')
// 风速
const windVelocity = ref('')
// 区县级
const flylevel = ref('')
// 获取天气建议
const getWeatherSuggest = () => {
  getDroneSuggest().then(res => {
    if (res.data.code !== 0) return;
    weather.value = res.data.data.weather;
    isFly.value = res.data.data.flightAdvice;
  });
};
    getDroneSuggest().then(res => {
        if (res.data.code !== 0) return
        weather.value = res.data.data.weather
        isFly.value = res.data.data.flightAdvice
        windVelocity.value = res.data.data.windPower
    flylevel.value = res.data.data.adcode.length
        console.log('天气res', res.data.data, flylevel.value)
    })
}

onMounted(() => {
    getWeatherSuggest();
    updateTime(); // 立即执行一次
    time.value = setInterval(updateTime, 1000);
});
    getWeatherSuggest()
    updateTime() // 立即执行一次
    time.value = setInterval(updateTime, 1000)
})
onUnmounted(() => {
    if (time.value) {
        clearInterval(time.value);
        time.value = null;
    }
});
    if (time.value) {
        clearInterval(time.value)
        time.value = 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;
    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;
        }
        .yellowqk {
            margin-left: 5px;
            color: yellow;
        }
        .redqk {
            margin-left: 5px;
            color: red;
        }
    }
}
</style>