@ued_fpi/data-visual/dist/es/aims/src/WeatherCondition/index.vue.mjs

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, toDisplayString, unref } from 'vue';
import dayjs from 'dayjs';
import { useThemeHook } from '../../../utils.mjs';
import { getAirQuality } from './api/index.mjs';
import wind_direction from './images/wind_direction.svg.mjs';
import wind_speed from './images/wind_speed.svg.mjs';
import temperature from './images/temperature.svg.mjs';
import pressure from './images/pressure.svg.mjs';
import humidity from './images/humidity.svg.mjs';
import precipitation from './images/precipitation.svg.mjs';
import white_wind_direction from './images/white_wind_direction.svg.mjs';
import white_humidity from './images/white_humidity.svg.mjs';
import white_precipitation from './images/white_precipitation.svg.mjs';
import white_pressure from './images/white_pressure.svg.mjs';
import white_temperature from './images/white_temperature.svg.mjs';
import white_wind_speed from './images/white_wind_speed.svg.mjs';

const _hoisted_1 = { class: "condition" };
const _hoisted_2 = ["src"];
const _hoisted_3 = { class: "condition-value" };
const _hoisted_4 = { class: "unit" };
const className = "dv-aims-weather-condition";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().subtract(1, "h").valueOf(),
      gridCode: "0101000000",
      timeType: "hour"
    }) }
  },
  setup(__props) {
    const props = __props;
    const { isDark } = useThemeHook();
    const list = ref([
      {
        name: "风向",
        value: "--",
        unit: "",
        key: "windDirection",
        backgroundUrl: wind_direction,
        whiteBackgroundUrl: white_wind_direction
      },
      {
        name: "风级",
        value: "--",
        unit: "--",
        key: "windScale",
        backgroundUrl: wind_speed,
        whiteBackgroundUrl: white_wind_speed
      },
      {
        name: "温度",
        value: "--",
        unit: "°C",
        key: "temperature",
        backgroundUrl: temperature,
        whiteBackgroundUrl: white_temperature
      },
      {
        name: "气压",
        value: "--",
        unit: "hPa",
        key: "pres",
        backgroundUrl: pressure,
        whiteBackgroundUrl: white_pressure
      },
      {
        name: "湿度",
        value: "--",
        unit: "%",
        key: "humidity",
        backgroundUrl: humidity,
        whiteBackgroundUrl: white_humidity
      },
      {
        name: "降水量",
        value: "--",
        unit: "mm",
        key: "rain",
        backgroundUrl: precipitation,
        whiteBackgroundUrl: white_precipitation
      }
    ]);
    const fetchData = () => {
      getAirQuality(props.apiParams).then((res) => {
        if (res.data) {
          const data = res.data;
          list.value = list.value.map((item) => {
            const obj = data.weatherFactors.find((c) => c.key === item.key);
            return {
              ...item,
              unit: obj?.unit ? obj.unit : "--",
              value: obj?.value ? obj.value : "--"
            };
          });
        }
      });
    };
    onMounted(() => {
      fetchData();
    });
    watch(() => props.apiParams, () => {
      fetchData();
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`${className}-container`)
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
          return openBlock(), createElementBlock("div", {
            key: item.name,
            class: normalizeClass(`${className}-list`)
          }, [
            createElementVNode("span", _hoisted_1, toDisplayString(item.name), 1),
            createElementVNode("img", {
              src: unref(isDark) ? item.backgroundUrl : item.whiteBackgroundUrl,
              class: normalizeClass({ white: !unref(isDark) })
            }, null, 10, _hoisted_2),
            createElementVNode("span", _hoisted_3, toDisplayString(item.value), 1),
            createElementVNode("span", _hoisted_4, toDisplayString(item.unit), 1)
          ], 2);
        }), 128))
      ], 2);
    };
  }
});

export { _sfc_main as default };