iot-ui-plus/src/views/monitoring/components/header.vue

<template>
    <div class="title">
        <h3>{{ titleData }}</h3>
    </div>
    <div class="weather">
        <div class="time">
            {{ currentTime }} {{ lunarDay.ncWeek }}
        </div>
        <div class="line"></div>
        <div class="forecast">
            <span>{{ weatherData.city }}：{{ weatherData.weather }} {{ weatherData.temperature }}℃</span>
            <svg-icon class="weatherSvg" :icon-class="weatherData.weatherImg" />
            <!-- <img src="../../../assets/images/weather/duoyun.png" /> -->
        </div>
    </div>
    <div class="seeting">
        <n-tooltip trigger="hover" v-if="settingShow">
            <template #trigger>
                <n-button class="tooltips" circle quaternary @click="showClick">
                    <template #icon>
                        <n-icon>
                            <Settings />
                        </n-icon>
                    </template>
                </n-button>
            </template>
            显示项
        </n-tooltip>
        <n-tooltip trigger="hover">
            <template #trigger>
                <n-button class="tooltips" circle quaternary @click="returnBack">
                    <template #icon>
                        <n-icon>
                            <Power />
                        </n-icon>
                    </template>
                </n-button>
            </template>
            返回首页
        </n-tooltip>
        <n-tooltip trigger="hover" v-if="warningShow">
            <template #trigger>
                <n-badge class="warningbadge" :value="warningData.length" :max="15">
                    <n-button class="tooltips" circle quaternary @click="waringClick">
                        <template #icon>
                            <n-icon>
                                <Bell />
                            </n-icon>
                        </template>
                    </n-button>
                </n-badge>
            </template>
            报警
        </n-tooltip>
    </div>
    <n-drawer class="waringDrawer" v-model:show="waringDrawer" :default-width="420" resizable placement="right">
        <n-drawer-content closable>
            <template #header>
                消息
            </template>
            啊呀呀呀呀
        </n-drawer-content>
    </n-drawer>
</template>
<script lang="ts" setup>
import router from '@/router';
import { getWeather } from '@/api/user/index';
import { Filter, Maximize, Settings, Power, Bell } from '@vicons/tabler';
import { useDateFormat, useNow } from '@vueuse/core';
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
import calendar from '@/utils/lunar';
const emit = defineEmits(['showModalClick', 'returnClick']);
const timer = ref()
const isCurrentRoute = ref(true)
const waringDrawer = ref(false)

const weatherData = ref(
    { city: "", weather: "", temperature: "", weatherImg: "" }
);

const lunarDay: any = calendar.solarToLunar(
    useNow().value.getUTCFullYear(),
    useNow().value.getUTCMonth() + 1,
    useNow().value.getUTCDate()
);
const props = defineProps({
    titleData: {
        type: String,
        default: '数据大屏',
    },
    settingShow: {
        type: Boolean,
        default: false
    },
    warningShow: {
        type: Boolean,
        default: false
    },
    warningData: {
        type: Array,
        default: [1, 2, 3],
    }
});

onMounted(() => {
    getWeatherData()
});

function showClick() {
    //显示/隐藏表格配置栏
    emit('showModalClick', true);
    //   showModal.value = true;
}
function returnBack() {
    //返回首页
    // emit('returnClick', '');
    router.replace("/dashboard")
}
function waringClick() {
    //点击报警按钮
    waringDrawer.value = true
}

// function getWeatherData() {
//     //获取天气
//     getWeather().then((res: any) => {
//         if (res.code === 200) {
//             weatherData.value = res.data;
//         }
//     });
// }

function getWeatherData() {
    //获取天气
    getWeather().then((res: any) => {
        if (res.code === 200) {
            if (isCurrentRoute) {
                timer.value = setTimeout(async () => {
                    await (timer.value && clearTimeout(timer.value));
                    await getWeatherData();
                }, 600000)
            }
            weatherData.value = res.data;
        } else {
            clearTimeout(timer.value);
        }
    });
}
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // height: 5.7rem;

    .title {
        width: 80%;
        background: url(@/assets/images/title-bg.png);
        background-size: 100%;
        text-align: center;
        padding-bottom: 38px;
        margin: 0 auto;

        h3 {
            font-size: 38px;
            font-family: 'YouSheBiaoTiHei';
            font-weight: 400;
            letter-spacing: 4px;
            background: linear-gradient(180deg, #FEFDFF 0%, #95DAFF 97%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0;
        }
    }
}

.weather {
    display: flex;
    align-items: center;
    position: absolute;
    top: 2.5rem;
    left: 7rem;
    color: #B2D4FF;
    font-size: 1.8rem;
    line-height: 2.2rem;
    font-family: 'AlibabaPuHuiTiRegular';

    .line {
        width: 2px;
        height: 2rem;
        background: linear-gradient(to top, #000E38, #1EA8DD, #000E38);
        margin: 0 1rem;
    }

    .forecast {
        display: flex;
        align-items: center;

        .weatherSvg {
            width: 1.5em !important;
            height: 1.5em !important;
            margin-left: 10px;
        }

        // img {
        //     width: 25px;
        //     margin-left: 10px;
        // }
    }
}

.seeting {
    position: absolute;
    top: 2.5rem;
    right: 7rem;

    .warningbadge {
        margin-top: -10px;
    }

    .tooltips {
        width: 36px;
        height: 36px;
        background: linear-gradient(180deg, #003269 1%, rgba(3, 79, 163, 0.2314) 56%, #003269 100%);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;

        :deep(span) {
            color: #5beff9;
        }

        margin-left: 10px;
    }
}

.n-drawer-container {
    color: red;
    .waringDrawer {
        background: #0f2856;
        backdrop-filter: blur(10px);
        overflow: hidden;
    }
}
</style>