CPCenterData/src/views/screen/components/outsideTitle.vue

<template>
    <!--   主标题 开始     -->
    <div class="Main-title">
        <div class="left">
            <img :src="require('@/assets/pbImage/cp.png')" />
            <span class="title">村级广播电视公共服务</span>
            <span class="subTitle">{{ title }}</span>
        </div>
        <div class="right-box">
            <div class="top">
                <div class="dateBox">
                    <span class="date">{{ nowDateStr }}</span>
                    <span class="week">{{ nowWeekStr }}</span>
                </div>
                <div class="line"></div>
                <div class="weather">
                    <img :src="weatherData.icon" />
                    <div class="right">
                        <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
                            <span>{{ weatherData.weather }}</span>
                            <span>{{ weatherData.temperature }}℃</span>
                        </div>
                        <div class="bottom">
                            <span>{{ weatherData.city }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <span class="hour-minute">{{ time }}</span> -->
        </div>
    </div>
    <!--   主标题 结束     -->
</template>

<script>
import weatherIcon from "@/common/weatherIcon";

export default {
    name: "MainTitle",
    props: {
        title: {
            type: String,
            default: "这是一个标题",
        },
    },
    data() {
        let self = this;
        return {
            weatherData: {},
            nowWeekStr: "",
            nowDateStr: "",
            time: "",
            timer: null,
            interVal: null,
            interValWeather: null,
        };
    },
    beforeDestroy() {
        clearTimeout(this.timer);
        clearTimeout(this.interVal);
        clearTimeout(this.interValWeather);
    },
    watch: {
        /** 监听获取到天气接口的返回值后去weatherIcon.js处理返回什么图标 */
        weatherData(n, o) {
            if (n) {
                weatherIcon(this.weatherData);
            }
        },
    },
    created() {},
    mounted() {
        let date = new Date();
        this.nowDateStr = date.format("yyyy-MM-dd");
        this.getTimer();
        this.getWeekCurrDate();
        this.getWeather();
        this.updateWeather();
    },
    methods: {
        getTimer() {
            this.timer = setInterval(() => {
                let time = new Date();
                this.time = time.format("hh:mm:ss");
            }, 1000);
        },
        getWeekCurrDate() {
            const weeks = new Array(
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六"
            );
            let date = new Date();
            let currWeek = date.getDay();
            this.nowWeekStr = weeks[currWeek];
            let currtime = date.getTime();
            this.addTimeCurr(currtime);
        },
        addTimeCurr(currtime) {
            // 定时器延时一秒（在上面先格式化日期，显示后再开启定时器）
            this.interVal = setInterval(() => {
                currtime += 1000;
                let updateDate = new Date(currtime);
                const weeks = new Array(
                    "星期日",
                    "星期一",
                    "星期二",
                    "星期三",
                    "星期四",
                    "星期五",
                    "星期六"
                );
                let currWeek = updateDate.getDay();
                this.nowWeekStr = weeks[currWeek];
            }, 1000);
        },
        updateWeather() {
            this.interValWeather = setInterval(() => {
                let time = new Date().toLocaleTimeString();
                console.log("5分钟更新一次天气,当前更新时间为：", time);
                this.getWeather();
            }, 300000);
        },
        getWeather() {
            let params = {
                body: "511502",
            };
            this.$http
                .post("public/getWeather", params)
                .then((response) => {
                    console.log(response);
                    if (response.data.code == "200") {
                        try {
                            this.weatherData = response.data.data.lives[0];
                        } catch (err) {
                            console.log(err);
                            this.$Notice.error({
                                desc: "天气解析失败",
                            });
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../../styles/fonts/font.less";

.Main-title {
    height: 120px;
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .left {
        height: 100%;
        display: flex;
        align-items: center;
        img {
            width: 76px;
            height: 100px;
        }
        span {
            font-family: "ShiShangZhongHeiJianTi";
            background: linear-gradient(180deg, #FFFFFF 27.08%, #BCDDFF 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

        }
        .title{
            font-size: 64px;
            margin-left: 20px;
        }
        .subTitle {
            font-size: 32px;
        }
    }
    .title {
        font-family: "ShiShangZhongHeiJianTi";
        font-size: 64px;
        background: linear-gradient(180deg, #ffffff 27.08%, #bcddff 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .right-box {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 400px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;

        .top {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .dateBox {
                width: 150px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: end;
                font-family: "PingFang SC";
                font-size: 26px;
                font-weight: 400;
                color: #ffffff;
            }

            .line {
                width: 1px;
                height: 80%;
                background-color: #fff;
            }

            .weather {
                width: 180px;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                img {
                    width: 38px;
                    height: 38px;
                }

                .right {
                    width: 120px;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    font-family: "PingFang SC";
                    font-size: 26px;
                    color: #ffffff;

                    .bottom {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
        }

        .hour-minute {
            font-family: "PingFang SC";
            font-size: 42px;
            color: #ffffff;
        }
    }
}
</style>