343 lines
17 KiB
Vue
343 lines
17 KiB
Vue
<script setup lang="ts">
|
||
import './noticeListBox.less'
|
||
import noticeIcon from '../../../../assets/image/noticeIcon.png'
|
||
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
|
||
import { handleGetGDNearServiceList } from '../../service'
|
||
|
||
|
||
// 消息播报列表
|
||
let noticeList = reactive<any>([]);
|
||
// 当前滚动到的消息索引
|
||
let currentIndex = ref<number>(0)
|
||
// 滚动的计时器
|
||
let scrollInterval = ref<any>(null)
|
||
let isScrolling = ref<boolean>(false);
|
||
let scrollDuration = ref('10s'); // 动态动画时长
|
||
// 当前全部服务区的id
|
||
let serverpartId = ref<number[]>([])
|
||
// 播报数据
|
||
let noticeMessageObj = ref<any>()
|
||
|
||
onMounted(async () => {
|
||
// 获取播报数据
|
||
handleGetNoticeList()
|
||
})
|
||
|
||
|
||
// 传入的数据
|
||
const props = defineProps<{
|
||
currentService?: any;
|
||
selectPageTab?: number
|
||
}>();
|
||
|
||
// 改变页面显示状态
|
||
const emit = defineEmits<{
|
||
(e: "handelGetNoticeListAllId", idList: number[], type: string, obj: any): void; // 切换页面分区
|
||
}>();
|
||
|
||
// 监听传入的选中服务区
|
||
watch(
|
||
() => props.currentService,
|
||
(newVal, oldVal) => {
|
||
// 获取播报数据
|
||
handleGetNoticeList()
|
||
},
|
||
{ deep: true }
|
||
);
|
||
// 监听传入的选中服务区
|
||
watch(
|
||
() => props.selectPageTab,
|
||
(newVal, oldVal) => {
|
||
// 获取播报数据
|
||
handleGetNoticeList()
|
||
// 获取播报数据
|
||
startScrolling()
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
|
||
// 获取播报数据
|
||
const handleGetNoticeList = async () => {
|
||
const req = {
|
||
SearchParameter: {
|
||
PROVINCE_CODE: "530000",
|
||
NOTICEINFO_STATE: 1,
|
||
SERVERPART_IDS: props.currentService?.SERVERPART_ID || ""
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 10,
|
||
appId: "wxee018fb96955552a"
|
||
}
|
||
|
||
let noticeListBox = sessionStorage.getItem('noticeListBox')
|
||
let data: any = []
|
||
if (noticeListBox) {
|
||
data = JSON.parse(noticeListBox)
|
||
console.log('11121');
|
||
|
||
} else {
|
||
data = await handleGetGDNearServiceList(req)
|
||
sessionStorage.setItem("noticeListBox", JSON.stringify(data))
|
||
}
|
||
console.log('11121', data);
|
||
// let list: any = data
|
||
|
||
let list: any = [
|
||
{
|
||
NOTICEINFO_TITLE: "云南省蒙新高速蒙自服务区（下行）招商信息公告",
|
||
SERVERPART_ID: 1187,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】地处昆河高速与蒙文砚高速交汇处，是连接昆明、文山、河口的重要交通枢纽，周边拥有碧色寨火车站、西南联大蒙自分校旧址等历史文化资源，以及南湖公园、长桥海国家级湿地公园等自然景观，同时依托蒙自石榴、枇杷等特色农产品，发展潜力巨大
|
||
【招商范围】综合楼（普通餐饮、地方特色小吃、便利店）、汽修
|
||
【面积】实际面积存在差异，具体以现场测量为准
|
||
综合楼285㎡、汽修225㎡`
|
||
},
|
||
{
|
||
NOTICEINFO_TITLE: "云南省景海高速景洪服务区（双侧）招商信息公告",
|
||
SERVERPART_ID: 1176,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】位于西双版纳州景洪市，靠近中国-东盟自由贸易区的重要节点，是中老、中缅贸易的交通枢纽，进出口货物运输频繁，为服务区带来大量人流、物流和商机。周边有热带雨林、傣族村寨等独特风光，可感受东南亚风情。附近的告庄西双景、曼听公园等特色景点，展示了傣族文化和边境地区的发展成果
|
||
【招商范围】综合楼（地方特色餐饮、地方特色小吃、便利店）
|
||
【面积】实际面积存在差异，具体以现场测量为准
|
||
景洪服务区（上行）：综合楼1410㎡
|
||
景洪服务区（下行）：综合楼1410㎡`
|
||
},
|
||
{
|
||
NOTICEINFO_TITLE: "云南省景海高速勐海服务区（双侧）招商信息公告",
|
||
SERVERPART_ID: 1177,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】位于西双版纳州勐海县，靠近打洛口岸，是中国与缅甸边境贸易的重要通道，进出口货物运输频繁，为服务区带来大量人流、物流和商机。周边有独特的边境风光，可感受中缅边境的异域风情。附近的勐景来景区、独树成林等特色景点，展示了傣族文化和边境地区的发展成果，吸引众多游客前来观光体验。
|
||
【招商范围】综合楼（普通餐饮、普通小吃、便利店）
|
||
【面积】实际面积存在差异，具体以现场测量为准
|
||
勐海服务区（上行）：综合楼50㎡
|
||
勐海服务区（下行）：综合楼1391㎡`
|
||
},
|
||
{
|
||
NOTICEINFO_TITLE: "云南省大南高速大仓服务区（双侧）招商信息公告",
|
||
SERVERPART_ID: 971,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】位于大理州巍山县，地处大理至临沧高速沿线，是大理通往滇西南地区的重要交通节点，车流量大，区位优势明显。周边有巍山古城、巍宝山等历史文化景点，可感受南诏文化和彝族风情。附近的特色农产品和民族手工艺品资源丰富，为服务区带来商机，同时展示了当地民族文化和经济发展成果
|
||
【招商范围】综合楼（普通餐饮、普通小吃、便利店）
|
||
【面积】实际面积存在差异，具体以现场测量为准
|
||
大仓服务区（上行）：综合楼254㎡
|
||
大仓服务区（下行）：综合楼254㎡`
|
||
},
|
||
{
|
||
NOTICEINFO_TITLE: "云南省大南高速巍山服务区（双侧）招商信息公告",
|
||
SERVERPART_ID: 973,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】位于大理州巍山县，地处大理至南涧高速沿线，地理位置优越，毗邻大理、丽江等旅游热点，交通便利，辐射滇西经济圈。周边自然资源丰富，民族文化独特，巍山古城为南诏文化发源地，具备深厚的历史底蕴与旅游吸引力。服务区可依托区域特色及高速路网优势，发展文旅、物流等产业，助力区域经济协同发展
|
||
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
|
||
【面积】实际面积存在差异，具体以现场测量为准
|
||
巍山服务区（上行）：综合楼979㎡
|
||
巍山服务区（下行）：综合楼1183㎡，汽修127㎡`
|
||
},
|
||
{
|
||
NOTICEINFO_TITLE: "云南省南景高速拥翠服务区（双侧）招商信息公告",
|
||
SERVERPART_ID: 970,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】位于大理白族自治州南涧县，地处G5611大临高速沿线。周边生态环境优越，毗邻无量山国家级自然保护区，自然资源丰富，适宜发展生态旅游及康养产业。区域民族文化特色鲜明，彝族文化底蕴深厚，具备文旅融合潜力。服务区可依托高速交通优势，结合生态与人文资源，推动特色农产品、文化旅游及物流产业发展，促进区域经济多元化升级
|
||
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
|
||
【面积】实际面积存在差异，具体以现场测量为准
|
||
拥翠服务区（上行）：综合楼951㎡，汽修198㎡
|
||
拥翠服务区（下行）：综合楼951㎡，汽修198㎡`
|
||
},
|
||
{
|
||
NOTICEINFO_TITLE: "云南省南景高速三岔河服务区（双侧）招商信息公告",
|
||
SERVERPART_ID: 1109,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】地处滇西南交通枢纽。周边自然资源丰富，毗邻无量山、哀牢山国家级自然保护区，生态环境优越。景东县为普洱茶核心产区之一，茶文化底蕴深厚，具备特色农业及文旅开发潜力。服务区可依托高速交通优势及区域资源，发展生态旅游、茶产业及物流服务，助力区域经济可持续发展
|
||
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
|
||
【面积】实际面积存在差异，具体以现场测量为准。
|
||
三岔河服务区（上行）：综合楼828㎡，汽修198㎡
|
||
三岔河服务区（下行）：综合楼828㎡，汽修198㎡`
|
||
},
|
||
{
|
||
NOTICEINFO_TITLE: "云南省南景高速景东北停车区（双侧）招商信息公告",
|
||
SERVERPART_ID: 1110,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】位于普洱市景东彝族自治县，地处G5611大临高速沿线。周边自然资源丰富，毗邻无量山、哀牢山国家级自然保护区，生态环境优越，生物多样性显著。景东县为普洱茶主产区之一，茶文化底蕴深厚，具备特色农业开发潜力。停车区可依托高速交通优势及生态资源，发展生态旅游、茶产业及物流服务，助力区域经济可持续发展
|
||
【招商范围】综合楼（普通餐饮、普通小吃、便利店）
|
||
【面积】实际面积存在差异，具体以现场测量为准
|
||
景东北服务区（上行）：综合楼846㎡
|
||
景东北服务区（下行）：综合楼846㎡`
|
||
},
|
||
{
|
||
NOTICEINFO_TITLE: "云南省思澜高速龙潭服务区（双侧）招商信息公告",
|
||
SERVERPART_ID: 1161,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】思澜高速全长约131.5公里，设计时速80公里，双向四车道。茫茫龙潭大山植被丰富，有热带雨林植物花卉。服务区按花园式景区建设，有傣族、拉祜族、佤族建筑样式等。能为过往驾乘人员提供舒适的休憩环境。
|
||
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
|
||
【面积】实际面积存在差异，具体以现场测量为准
|
||
龙潭服务区（上行）：综合楼1499㎡、汽修210㎡
|
||
龙潭服务区（下行）：综合楼1597㎡、汽修210㎡`
|
||
},
|
||
{
|
||
NOTICEINFO_TITLE: "云南省思澜高速糯扎渡服务区（双侧）招商信息公告",
|
||
SERVERPART_ID: 1163,
|
||
NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
|
||
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
|
||
【周边资源及优势】思澜高速全长约131.5公里，设计时速80公里，双向四车道，位于昆磨高速等重要交通干道上，是连接昆明、普洱、西双版纳等城市的关键节点，车流量大，客源稳定
|
||
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
|
||
【面积】实际面积存在差异，具体以现场测量为准
|
||
糯扎渡服务区（上行）：综合楼2735㎡、汽修167㎡
|
||
糯扎渡服务区（下行）：综合楼2010㎡、汽修167㎡`
|
||
}
|
||
]
|
||
|
||
|
||
let allServerpartId: number[] = []
|
||
let obj: any = {}
|
||
|
||
noticeList.length = 0;
|
||
list && list.forEach((item: any) => {
|
||
noticeList.push(item)
|
||
allServerpartId.push(item.SERVERPART_ID)
|
||
obj[Number(item.SERVERPART_ID)] = item.NOTICEINFO_CONTENT
|
||
});
|
||
serverpartId.value = allServerpartId
|
||
console.log('noticeList:', noticeList); // 添加这行
|
||
|
||
|
||
noticeMessageObj.value = obj
|
||
nextTick(() => {
|
||
// 数据加载完成后启动滚动
|
||
startScrolling();
|
||
})
|
||
}
|
||
|
||
// 开始滚动的方法
|
||
const startScrolling = () => {
|
||
isScrolling.value = false;
|
||
nextTick(() => {
|
||
const listEl = document.querySelector(`.noticeList${props.selectPageTab}`) as HTMLElement;
|
||
if (listEl) {
|
||
const originWidth = listEl.scrollWidth / 2;
|
||
const speed = 100; // px/s
|
||
const duration = originWidth / speed;
|
||
scrollDuration.value = duration + 's';
|
||
|
||
// 动态插入 keyframes
|
||
const styleId = 'dynamic-scroll-keyframes';
|
||
let styleEl = document.getElementById(styleId) as HTMLStyleElement;
|
||
if (!styleEl) {
|
||
styleEl = document.createElement('style');
|
||
styleEl.id = styleId;
|
||
document.head.appendChild(styleEl);
|
||
}
|
||
styleEl.innerHTML = `
|
||
@keyframes scrollNotice {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-${originWidth}px); }
|
||
}`;
|
||
isScrolling.value = true;
|
||
}
|
||
});
|
||
|
||
|
||
// 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 = () => {
|
||
isScrolling.value = false;
|
||
if (scrollInterval.value) {
|
||
clearInterval(scrollInterval.value)
|
||
scrollInterval.value = null
|
||
}
|
||
// if (scrollInterval.value) {
|
||
// clearInterval(scrollInterval.value)
|
||
// scrollInterval.value = null
|
||
// }
|
||
}
|
||
|
||
// 点击了这个
|
||
const handleClickBigBox = () => {
|
||
console.log('serverpartId.valueserverpartId.valueserverpartId.value', serverpartId.value);
|
||
emit('handelGetNoticeListAllId', serverpartId.value, 'notice', noticeMessageObj.value)
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
// // 清理定时器等资源
|
||
// if (scrollTimer) {
|
||
// clearInterval(scrollTimer)
|
||
// }
|
||
// 停止滚动
|
||
stopScrolling();
|
||
|
||
// 清除动态添加的样式标签
|
||
const styleEl = document.getElementById('dynamic-scroll-keyframes');
|
||
if (styleEl) {
|
||
styleEl.remove();
|
||
}
|
||
})
|
||
</script>
|
||
|
||
|
||
<template>
|
||
<!-- 横向滚动 -->
|
||
<div class="noticeListBigBox" @click="handleClickBigBox">
|
||
<img class="noticeIcon" :src="noticeIcon" />
|
||
<div class="noticeListBox">
|
||
<div :class="['noticeList', `noticeList${props.selectPageTab}`, { 'scrolling': isScrolling }]"
|
||
:style="{ '--scroll-duration': scrollDuration }">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 纵向滚动 -->
|
||
<!-- <div class="noticeListBigBox">
|
||
<img class="noticeIcon" :src="noticeIcon" />
|
||
<div class="noticeListBox">
|
||
<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> -->
|
||
</template> |