YNMap/src/page/index/components/pageTop/pageTop.vue

<script setup lang="ts">
import './pageTop.less'
import pageTitle from '../../../../assets/image/pageTitle.png'
import cyyLogo from '../../../../assets/image/cyyLogo.png'
import noticeIcon from '../../../../assets/image/noticeIcon.png'
import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
import { handleGetGDNearServiceList, handleGetServiceInfo } from '../../service';
import moment from 'moment';


// 消息播报列表
let noticeList = reactive<any>([]);
// 当前滚动到的消息索引
let currentIndex = ref<number>(0)
// 滚动的计时器
let scrollInterval = ref<any>(null)
// 当前时间
let nowTime = ref<string>('')
// 更新时间的计时器
let nowTimeInterval = ref<any>(null)
// 周几
let weekDay = ref<string>('')
// 周几的枚举
let daysEnum: any = {
    "Sunday": "星期天",
    "Monday": "星期一",
    "Tuesday": "星期二",
    "Wednesday": "星期三",
    "Thursday": "星期四",
    "Friday": "星期五",
    "Saturday": "星期六"
}
// 天气内容
let weatherInfo = ref<any>()

// 拿到传入的数据
const props = defineProps<{
    pageType?: any;
    selectPageTab?: number;
}>();

onMounted(async () => {
    // 获取播报数据
    handleGetNoticeList()
    // 开始准备时间的一些内容
    handleGetTodayMessage()
    // 拿到天气
    handleGetNowWeather()
})

// 获取播报数据
const handleGetNoticeList = async () => {
    const req = {
        SearchParameter: {
            PROVINCE_CODE: "530000",
            NOTICEINFO_STATE: 1
        },
        PageIndex: 1,
        PageSize: 10,
        appId: "wxee018fb96955552a"
    }
    const data = await handleGetGDNearServiceList(req)
    let list: any = data

    noticeList.length = 0;
    list && list.forEach((item: any) => noticeList.push(item));
    if (list && list.length > 0) {
        startScrolling()
    }
}

// 开始滚动的方法
const startScrolling = () => {
    stopScrolling();
    if (noticeList.length <= 1) return;
    const duration = 3000;
    scrollInterval.value = setInterval(() => {
        currentIndex.value++;
        if (currentIndex.value >= noticeList.length) {
            setTimeout(() => {
                const container = document.querySelector('.noticeContainer') as HTMLElement;
                if (container) container.style.transition = 'none';
                currentIndex.value = 0;
                setTimeout(() => {
                    if (container) container.style.transition = '';
                }, 50);
            }, 500);
        }
    }, duration);
}

// 停止滚动的方法
const stopScrolling = () => {
    if (scrollInterval.value) {
        clearInterval(scrollInterval.value)
        scrollInterval.value = null
    }
}

// 获取今日的一些时间信息
const handleGetTodayMessage = () => {
    nowTime.value = moment().format('YYYY-MM-DD HH:mm:ss')
    handleUpdateTime()
    weekDay.value = moment().format('dddd')
}

// 开始计时 每秒加1
const handleUpdateTime = () => {
    nowTimeInterval.value = setInterval(() => {
        nowTime.value = moment().format('YYYY-MM-DD HH:mm:ss')
    }, 1000)
}

// 拿到当前的天气
const handleGetNowWeather = async () => {
    const req: any = {
        ServerpartId: "1230",
    }
    const data = await handleGetServiceInfo(req)

    let weatherObj = data.weatherModel

    weatherInfo.value = weatherObj
}

// 改变页面显示状态
const emit = defineEmits<{
    (e: "handleChangePageType"): void; // 切换页面样式
    (e: "handleChangePageTab", value: number): void; // 切换页面分区

}>();

const handleChangePageType = () => {
    emit("handleChangePageType");
}

// 改变页面的整体分区的tab
const handleChangePageTab = (tab: number) => {
    emit("handleChangePageTab", tab);
}


// 卸载时关闭
onBeforeUnmount(() => {
    stopScrolling()
})
</script>

<template>
    <!-- <div class="pageTop"> -->
    <div class="pageTop169">

        <!-- 新版的顶部分区的方法 -->
        <div class="leftTabBox">
            <div :class="selectPageTab === 1 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
                @click="handleChangePageTab(1)">分区一</div>
            <div :class="selectPageTab === 2 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
                @click="handleChangePageTab(2)">分区二</div>
        </div>

        <!-- 最初版的内容 -->
        <!-- <div :class="props.pageType === 'left' ? 'leftBox leftCenter' : 'leftBox'">
            <img class="noticeIcon" :src="noticeIcon" />
            <div class="noticeListBox"
                :style="{ width: props.pageType === 'left' ? '' : `calc(50% - ${393}px - 28px - 50px)` }">
                <div :class="noticeList.length > 1 ? 'noticeList scrolling' : 'noticeList'">
                    <template v-if="noticeList.length > 1">
                        <div class="noticeItem" v-for="(item, index) in noticeList.concat(noticeList)" :key="index">
                            <div class="icon"></div>
                            <div class="contentMessage">
                                {{ item.NOTICEINFO_TITLE || '-' }}
                            </div>
                        </div>
                    </template>
<template v-else>
                        <div class="noticeItem" v-for="(item, index) in noticeList" :key="index">
                            <div class="icon"></div>
                            <div class="contentMessage">
                                {{ item.NOTICEINFO_TITLE || '-' }}
                            </div>
                        </div>
                    </template>
</div>
</div>
</div> -->
        <div :class="props.pageType === 'left' ? 'centerBox leftBgBox' : 'centerBox'"
            :style="{ left: props.pageType === 'left' ? '0' : '50%', transform: props.pageType === 'left' ? 'translateX(-50px)' : 'translateX(-50%)' }">
            <!-- @click="handleChangePageType" -->
            <!-- <img class="pageLogo" :src="cyyLogo" /> -->
            <!-- <span class="pageTitle">云南高速服务区智慧数智大屏</span> -->
        </div>

        <!-- 最初版的内容 -->
        <!-- <div class="rightBox" :style="{ width: `calc(50% - ${393}px - 28px - 50px)` }">
            <span class="nowTime">{{ nowTime || "" }}</span>
            <div class="weatherBox">
                <img class="weatherIcon" :src="weatherInfo?.CUR_WEATHER_PIC" />
                <span class="weatherText">{{ weatherInfo?.CUR_WEATHER || "-" }}</span>
            </div>
            <span class="nowDay">{{ weekDay ? daysEnum[weekDay] : "" }}</span>

        </div> -->


        <div class="leftTabBox">
            <div :class="selectPageTab === 3 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
                @click="handleChangePageTab(3)">分区三</div>
            <div :class="selectPageTab === 4 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
                @click="handleChangePageTab(4)">分区四</div>
        </div>

    </div>
</template>