sl-sfy-safety/src/views/disaster/overview/components/WeatherCard.vue

<template>
  <div class="weather-card">
    <div class="time-info">
      <span class="line"></span>
      <span class="title">今日天气</span>
      <span class="location">上海市</span>
      <span class="date">{{ currentDate }}</span>
      <span class="week">{{ currentWeek }}</span>
      <span class="time">{{ currentTime }}</span>
    </div>
    <div class="main-content">
      <WeatherInfo
        :type="weatherInfo.type"
        :temperature="weatherInfo.temperature"
        :humidity="weatherInfo.humidity"
        :windSpeed="weatherInfo.windSpeed"
        :warning="weatherInfo.warning"
      />
      <div class="info-box">
        <WeatherTips :title="measureTitle" :measure="measureInfo" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, ref } from 'vue';
  import dayjs from 'dayjs';
  import WeatherInfo from './weather-info/WeatherInfo.vue';
  import WeatherTips from './weather-info/WeatherTips.vue';
  import { DisasterTimeSpan } from '@/views/disaster/overview/components/disaster-warning-records/constant';
  import { SysDictDataDetail, queryDictTypeDetail } from '@/api/dict';
  import { getDisasterWarningRecords } from '@/api/disaster-overview';

  const currentDate = ref('');
  const currentWeek = ref('');
  const currentTime = ref('');
  let timer: NodeJS.Timeout;
  const weatherDisasterDic = ref<SysDictDataDetail[]>([]); // 气象灾害预警字典
  const disasterMeasureDic = ref<SysDictDataDetail[]>([]); // 灾害应急措施字典
  const measureTitle = ref<string | undefined>('');
  const measureInfo = ref<string | undefined>('');

  const weatherInfo = ref({
    type: 'sunny',
    temperature: 30,
    humidity: 56,
    windSpeed: '西南风2级',
    warning: '',
  });

  // 更新时间函数
  const updateDateTime = () => {
    const now = dayjs();
    currentDate.value = now.format('MM月DD日');
    currentWeek.value = `星期${now.format('dd').slice(-1)}`;
    currentTime.value = now.format('HH:mm:ss');
  };

  // 获取今日灾害预警信息
  const getTodayWarningInfo = async () => {
    const weekDisasterInfo = await getDisasterWarningRecords(DisasterTimeSpan.ONE_WEEK);
    const weekDisasterInfoList = weekDisasterInfo[0].warnRecord;
    const normalMeasure = disasterMeasureDic.value.find((item) => item.itemCode === 'normal_measure');

    if (weekDisasterInfoList.length === 0) {
      weatherInfo.value.warning = '';
      measureInfo.value = normalMeasure?.itemValue;
      measureTitle.value = '安全提示';
    } else {
      const today = dayjs().format('YYYY-MM-DD');
      const todayWarning = weekDisasterInfoList.find((item) => item.warnTime.includes(today));
      if (todayWarning) {
        weatherInfo.value.warning =
          weatherDisasterDic.value.find((item) => item.itemCode === todayWarning.disasterType)?.itemValue || '';
        const weatherWarningType = getWeatherWarningType(todayWarning.disasterType);
        if (weatherWarningType) {
          const targetMeasure = disasterMeasureDic.value.find((item) => item.itemCode.includes(weatherWarningType));
          measureInfo.value = targetMeasure ? targetMeasure?.itemValue : normalMeasure?.itemValue;
          measureTitle.value = targetMeasure ? '应急提示' : '安全提示';
        }
      } else {
        weatherInfo.value.warning = '';
        measureInfo.value = normalMeasure?.itemValue;
        measureTitle.value = '安全提示';
      }
    }
  };

  function getWeatherWarningType(val: string) {
    const match = val.match(/^[a-zA-Z0-9]+/);
    if (!match) return;
    return match[0];
  }

  onMounted(async () => {
    await queryDictTypeDetail('weather_warning').then((res) => {
      weatherDisasterDic.value = res.sysDictDataList;
    });
    await queryDictTypeDetail('disaster_emergency_measure').then((res) => {
      disasterMeasureDic.value = res.sysDictDataList;
    });
    updateDateTime();
    timer = setInterval(updateDateTime, 1000);
    getTodayWarningInfo();
  });

  onUnmounted(() => {
    clearInterval(timer);
  });
</script>

<style scoped>
  .weather-card {
    width: 100%;
    height: 267px;
    background: linear-gradient(90deg, #7ea7fe 0%, #a4cdc9 100%);
    border-radius: 4px;
    position: relative;

    .time-info {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #000;
      padding-top: 12px;

      .line {
        width: 3px;
        height: 16px;
        background: #1777ff;
        margin-right: 12px;
      }

      .title {
        font-weight: 500;
        font-size: 16px;
        color: #000000;
      }

      .location {
        margin-left: 48px;
      }

      .date {
        margin-left: 20px;
      }

      .week,
      .time {
        margin-left: 10px;
      }
    }

    .main-content {
      height: 227px;
      display: flex;
    }
  }

  .info-box {
    flex: 1;
    margin: 20px 20px 10px 0;
  }
</style>