saturn-ui/lib/IceWeather/index.js

🪐 一款轻量级、模块化的Web可视化UI组件库（含大屏、GIS、图表、视频、后台等模块） 👍

import { defineComponent, ref, computed, onMounted, openBlock, createElementBlock, unref, toDisplayString, createCommentVNode, createElementVNode, normalizeClass } from 'vue';

const withInstall = (main, extra) => {
    main.install = (app) => {
        for (const comp of [main, ...Object.values(extra ?? {})]) {
            app.component(comp.name, comp);
        }
    };
    if (extra) {
        for (const [key, comp] of Object.entries(extra)) {
            main[key] = comp;
        }
    }
    return main;
};

const _hoisted_1 = ["title"];
const _hoisted_2 = { key: 0 };
var script = defineComponent({
    props: {
        city: { type: String, required: false, default: undefined },
        apiKey: { type: String, required: false, default: 'c382f210cef36955b06c5f472af64a52' },
        showCity: { type: Boolean, required: false, default: false }
    },
    setup(__props) {
        const props = __props;
        const weatherIcon = ref();
        const todayWeather = ref();
        const showWeather = ref(false);
        const weatherTitle = computed(() => {
            return `${todayWeather.value.city}, ${todayWeather.value.weather}, ${todayWeather.value.temperature}℃`;
        });
        const legendClass = value => {
            switch (value) {
                case '晴':
                    weatherIcon.value = 'weather-1';
                    break;
                case '多云':
                    weatherIcon.value = `weather-2`;
                    break;
                case '阴':
                    weatherIcon.value = `weather-3`;
                    break;
                case '小雨':
                    weatherIcon.value = `weather-4`;
                    break;
                case '中雨' :
                    weatherIcon.value = `weather-5`;
                    break;
                case '大雨' :
                    weatherIcon.value = `weather-6`;
                    break;
                case '暴雨' :
                    weatherIcon.value = `weather-7`;
                    break;
                case '小雪':
                    weatherIcon.value = `weather-8`;
                    break;
                case '中雪' :
                    weatherIcon.value = `weather-9`;
                    break;
                case '大雪' :
                    weatherIcon.value = `weather-10`;
                    break;
                case '暴雪' :
                    weatherIcon.value = `weather-11`;
                    break;
                case '雾':
                    weatherIcon.value = `weather-12`;
                    break;
                case '霾':
                    weatherIcon.value = `weather-13`;
                    break;
                default:
                    weatherIcon.value = 'weather-1';
            }
        };
        const weatherInfo = city => {
            return fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=${props.apiKey}&city=${city}&extensions=base`)
                .then(response => response.json())
                .then(data => {
                return data.lives;
            });
        };
        const coords2city = coords => {
            return fetch(`https://restapi.amap.com/v3/geocode/regeo?location=${coords.longitude},${coords.latitude}&key=${props.apiKey}`)
                .then(response => response.json())
                .then(data => {
                const { city } = data.regeocode.addressComponent;
                return city;
            });
        };
        const handleWeather = weather => {
            todayWeather.value = weather;
            legendClass(todayWeather.value.weather);
            showWeather.value = true;
        };
        onMounted(() => {
            if (props.city) {
                weatherInfo(props.city).then(lives => handleWeather({ ...lives[0] }));
            }
            else if ('geolocation' in navigator) {
                navigator.geolocation.getCurrentPosition(position => {
                    coords2city(position.coords).then(city => {
                        weatherInfo(city).then(lives => handleWeather({ ...lives[0] }));
                    });
                });
            }
        });
        return (_ctx, _cache) => {
            return (showWeather.value)
                ? (openBlock(), createElementBlock("div", {
                    key: 0,
                    class: "ice-weather",
                    title: unref(weatherTitle)
                }, [
                    (props.showCity)
                        ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(todayWeather.value?.city), 1))
                        : createCommentVNode("v-if", true),
                    createElementVNode("span", {
                        class: normalizeClass(["weather-icon", weatherIcon.value])
                    }, null, 2),
                    createElementVNode("span", null, toDisplayString(todayWeather.value?.temperature + '℃'), 1)
                ], 8, _hoisted_1))
                : createCommentVNode("v-if", true);
        };
    }
});

script.__file = "packages/IceWeather/index.vue";

const IceWeather = withInstall(script, { name: 'IceWeather' });

export { IceWeather, IceWeather as default };