From 4b24e87192ce412424d80b9aece9ee823e310e78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=86=AF=E5=B0=91=E5=BA=B7?= <2496371772@qq.com> Date: Thu, 6 Aug 2026 10:53:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E6=94=BE=EF=BC=8C=E9=A2=84=E8=A7=88bu?= =?UTF-8?q?g?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/gis/ol/index.ts | 19 +- src/gis/ol/olClock.ts | 47 +- src/layout/Container/mapRightMenu.vue | 2 +- src/layout/Container/mapTimeSlider.vue | 130 +++-- src/layout/Container/meteorologyMenu.vue | 211 ++++---- src/layout/Container/weathLength.vue | 2 +- src/locales/language/zh.json | 1 + src/pages/symn/index.vue | 6 +- src/pages/tqybjs/index.vue | 25 +- src/pages/tqybjs/tab-1/index.vue | 582 +++++++++++++++-------- src/pages/tqybjs/tab-2/index.vue | 91 ++-- src/utils/axios/fskjk/index.ts | 18 + src/utils/axios/tqyb/data/index.ts | 2 +- 13 files changed, 719 insertions(+), 417 deletions(-) diff --git a/src/gis/ol/index.ts b/src/gis/ol/index.ts index 91c71dbe..46e38abe 100644 --- a/src/gis/ol/index.ts +++ b/src/gis/ol/index.ts @@ -44,7 +44,7 @@ const defaultGeosion: any = { defau2: false, }; // 风场是否开启 -const weathFlag: any = { 0: false, 1: false, 2: false, 3: false }; +const weathFlag: any = { 0: false, 1: false, 2: false, 3: true }; let weathRequesTime = ''; export function setWeathRequesTime(value: any) { weathRequesTime = value; @@ -215,6 +215,17 @@ const palyDateEvent: any = { addWeathLayer(map, weathOpt.imageUrl); // 清理UI const eventbus = EventBusTool.getEventBus(); + + console.log(weathOpt,gisImgOpt,"222222222222222222") + + if(gisImgOpt.weatherType==0){ + weathOpt.legengOpt.unit = "℃"; + }else if(gisImgOpt.weatherType==1){ + weathOpt.legengOpt.unit = "kPa"; + }else if(gisImgOpt.weatherType==2){ + weathOpt.legengOpt.unit = "%"; + } + eventbus.publish('playUI', { key: 'showWeathLength', legengOpt: weathOpt.legengOpt, @@ -234,6 +245,8 @@ const palyDateEvent: any = { // 设置态势图层参数 setTaishiParam(map: any, eventOpt?: any) { gisImgOpt = { ...eventOpt }; + + console.log(gisImgOpt,"1") weathRequesTime = eventOpt.startTime; // 设置时间 @@ -258,6 +271,10 @@ const palyDateEvent: any = { setWeathLayerVisity(eventOpt.isActive); } }, + updateTimeCurrentIndex(map: any, eventOpt?: any){ + gisImgOpt.hour = eventOpt.hour; + console.log(gisImgOpt,"2") + } }; // 初始化地图 diff --git a/src/gis/ol/olClock.ts b/src/gis/ol/olClock.ts index 8e82817b..a00291f1 100644 --- a/src/gis/ol/olClock.ts +++ b/src/gis/ol/olClock.ts @@ -1,7 +1,7 @@ -import dayjs from 'dayjs'; +import dayjs from "dayjs"; // 时钟类 -import Clock from '@/gis/common/clock/clock/Clock'; // 根据实际路径调整 -import JulianDate from '../common/clock/JulianData/JulianDate'; +import Clock from "@/gis/common/clock/clock/Clock"; // 根据实际路径调整 +import JulianDate from "../common/clock/JulianData/JulianDate"; let timeLoop = false; let olClock: any; @@ -22,39 +22,49 @@ export function initClock(params?: any) { olClock = new Clock({ shouldAnimate: false, clockRange: 1 }); timeLoop = true; if (olClock && params) { + console.log(params, "2222"); olClock.startTime = JulianDate.fromDate(new Date(params.startTime)); olClock.currentTime = JulianDate.fromDate(new Date(params.startTime)); olClock.stopTime = JulianDate.fromDate(new Date(params.endTime)); // olClock.multiplier = 60 * 60; olClock.multiplier = 60 * 60; - EventBusTool.getEventBus().publish('timeSliderUi', { key: 'setTime', ...params }); + EventBusTool.getEventBus().publish("timeSliderUi", { + key: "setTime", + ...params, + }); } // 触发帧回调 _timeLoop(); // 添加动画控件UI帧回调事件 olClock.onTick.addEventListener((time: any) => { if (olClock.shouldAnimate) { - EventBusTool.getEventBus().publish('timeSliderUi', { key: 'updateUi', time: JulianDate.toDate(time.currentTime).getTime() }); + EventBusTool.getEventBus().publish("timeSliderUi", { + key: "updateUi", + time: JulianDate.toDate(time.currentTime).getTime(), + }); } }); } // 设置是否播放 export function setShouldAnimate(falg: boolean) { + console.log(olClock,"dsudhu"); if (falg && olClock.currentTime >= olClock.stopTime) { - // 重置当前时间为开始时间 + // 重置当前时间为开始时间 olClock.currentTime = JulianDate.clone(olClock.startTime); } olClock.shouldAnimate = falg; - EventBusTool.getEventBus().publish('timeSliderUi', { key: 'playFalg', playFalg: falg }); + EventBusTool.getEventBus().publish("timeSliderUi", { + key: "playFalg", + playFalg: falg, + }); } export function stopPlay() { - if (!olClock) - return; - // 暂停动画 + if (!olClock) return; + // 暂停动画 olClock.shouldAnimate = false; // 重置当前时间为开始时间 olClock.currentTime = JulianDate.clone(olClock.startTime); @@ -67,11 +77,16 @@ export function setMultiplier(num: number) { // 设置动画时间 export function setAnimationTime(opt: any) { if (olClock && opt) { - if (!opt.startTime || !opt.endTime) { return } + if (!opt.startTime || !opt.endTime) { + return; + } olClock.startTime = JulianDate.fromDate(new Date(opt.startTime)); olClock.currentTime = JulianDate.fromDate(new Date(opt.startTime)); olClock.stopTime = JulianDate.fromDate(new Date(opt.endTime)); - EventBusTool.getEventBus().publish('timeSliderUi', { key: 'setTime', ...opt }); + EventBusTool.getEventBus().publish("timeSliderUi", { + key: "setTime", + ...opt, + }); } } // 设置当前时间 @@ -115,7 +130,7 @@ export function removeClockOnTickEvent(key: any) { const originalCallback = callBackEvnets.get(key); olClock.onTick.removeEventListener(originalCallback); // 关键：用原始回调移除 callBackEvnets.delete(key); - console.log('移除后事件列表：', callBackEvnets); // 确认已删除（Map(0)） + console.log("移除后事件列表：", callBackEvnets); // 确认已删除（Map(0)） } } @@ -127,8 +142,10 @@ export function getClockTimeRange() { const startTime = JulianDate.toDate(olClock.startTime); const endTime = JulianDate.toDate(olClock.stopTime); - const formatStartTime = dayjs(startTime.getTime()).format('YYYY-MM-DD HH:mm:ss'); - const formatEndTime = dayjs(endTime.getTime()).format('YYYY-MM-DD HH:mm:ss'); + const formatStartTime = dayjs(startTime.getTime()).format( + "YYYY-MM-DD HH:mm:ss", + ); + const formatEndTime = dayjs(endTime.getTime()).format("YYYY-MM-DD HH:mm:ss"); return { formatStartTime, diff --git a/src/layout/Container/mapRightMenu.vue b/src/layout/Container/mapRightMenu.vue index 45a45cae..4b5b4d29 100644 --- a/src/layout/Container/mapRightMenu.vue +++ b/src/layout/Container/mapRightMenu.vue @@ -556,7 +556,7 @@ onMounted(() => { " >
([ { label: "天", value: "day", isActive: false }, ]); -const labelLeft = ref(0) -const labelText = ref('') +const labelLeft = ref(0); +const labelText = ref(""); // 下拉菜单台站选中项(输运模拟业务使用) const stationValue = ref(null); @@ -103,6 +103,8 @@ const slodtooltip: any = (toolNum: number) => { const active = ref("浓度分布"); +const _isPlayFirstFrame = ref(false); + function switchActive(tab: string) { if (playFalg.value) return; active.value = tab; @@ -153,17 +155,17 @@ function handleChange(val: number) { // 滑块值代表距离开始时间的小时数 const currentTime = start.value.add(val, marskType.value); labelText.value = currentTime.format("YYYY-MM-DD HH:mm:ss"); - + setcurrentTime(currentTime.valueOf()); nextTick(() => { - const sliderDom = document.querySelector('.slider .el-slider__runway') - if (!sliderDom) return + const sliderDom = document.querySelector(".slider .el-slider__runway"); + if (!sliderDom) return; const width = sliderDom.offsetWidth; // 百分比位置 - const percent = val / totalHours.value + const percent = val / totalHours.value; // 基础位置，居中偏移，微调数值控制对齐 - labelLeft.value = percent * width - 60 - }) + labelLeft.value = percent * width - 60; + }); } // 切换显示标签 function switchTab(tab: TabItem) { @@ -267,15 +269,16 @@ function updateTimeLabel(ctime: any) { props.activeMenu === "输运模拟" ? currentHourDiff % 3 === 0 : currentHourDiff % 1 === 0; - + // 仅当currentHourDiff是marks中的刻度值时，才更新滑块 if ( - currentHourDiff >= 0 && + (currentHourDiff >= 0 && currentHourDiff <= totalHours.value && // && markKeys.includes(currentHourDiff) // 关键判断：是否为刻度值 isDifferentValue && // 只有值不同时才更新 - is6HourInterval + is6HourInterval)||!_isPlayFirstFrame.value ) { + _isPlayFirstFrame.value = true value.value = currentHourDiff; if (markKeys.includes(currentHourDiff)) { // 获取当前currentHourDiff在markKeys中的索引（第几个刻度） @@ -286,6 +289,12 @@ function updateTimeLabel(ctime: any) { `获取第${currentIndex + 1}组数据,当前时间为`, dataRequestOpt.value[currentHourDiff] ); + + EventBusTool.getEventBus().publish("playData", { + key: "updateTimeCurrentIndex", + hour: currentHourDiff, + }); + setWeathRequesTime(dataRequestOpt.value[currentHourDiff]); // 其他气象进行请求数据 const params = { ...gisImgOpt }; @@ -302,18 +311,18 @@ function updateTimeLabel(ctime: any) { }); }); // 判定风场数据 - // if (weathFlag[3] === true) { - // const params = { ...gisImgOpt, weatherType: 3, startTime: dataRequestOpt.value[currentHourDiff] }; - // delete params.key; - // delete params.endTime; - // playbackSearchData(params, true, (res) => { - // // 往态势传递数据 - // EventBusTool.getEventBus().publish('playData', { - // key: 'addyctqjsGis', - // data: res.result, - // }); - // }); - // } + if (weathFlag[3] === true&&gisImgOpt.weatherType!=3) { + const params = { ...gisImgOpt, weatherType: 3, startTime: dataRequestOpt.value[currentHourDiff],hour:currentHourDiff }; + delete params.key; + delete params.endTime; + playbackSearchData(params, true, (res) => { + // 往态势传递数据 + EventBusTool.getEventBus().publish('playData', { + key: 'addyctqjsGis', + data: res.result, + }); + }); + } } } } @@ -373,26 +382,30 @@ watch( { deep: true } ); -watch(value, (newVal, oldVal) => { - let currentTime = null; - if(ssmnOption.value.taskMode==-1){ - currentTime = end.value.clone().subtract(newVal, marskType.value); - }else{ - currentTime = start.value.clone().add(newVal, marskType.value); +watch( + value, + (newVal, oldVal) => { + let currentTime = null; + if (ssmnOption.value?.taskMode == -1 && props.activeMenu === "输运模拟") { + currentTime = end.value.clone().subtract(newVal, marskType.value); + } else { + currentTime = start.value.clone().add(newVal, marskType.value); + } + labelText.value = currentTime.format("YYYY-MM-DD HH:mm:ss"); + nextTick(() => { + const sliderDom = document.querySelector(".slider .el-slider__runway"); + if (!sliderDom) return; + const width = sliderDom.offsetWidth; + // 百分比位置 + const percent = newVal / totalHours.value; + // 基础位置，居中偏移，微调数值控制对齐 + labelLeft.value = percent * width - 60; + }); + }, + { + // immediate: true // 【可选】页面初次加载立即执行一次 } - labelText.value = currentTime.format("YYYY-MM-DD HH:mm:ss"); - nextTick(() => { - const sliderDom = document.querySelector('.slider .el-slider__runway') - if (!sliderDom) return - const width = sliderDom.offsetWidth; - // 百分比位置 - const percent = newVal / totalHours.value - // 基础位置，居中偏移，微调数值控制对齐 - labelLeft.value = percent * width - 60 - }) -}, { - // immediate: true // 【可选】页面初次加载立即执行一次 -}) +); onMounted(() => { EventBusTool.getEventBus().subscribe("timeSliderUi", (opt: any) => { @@ -430,6 +443,11 @@ onMounted(() => { break; } }); + + EventBusTool.getEventBus().subscribe("updateHfKsFlag", (opt: any) => { + _isPlayFirstFrame.value = opt; + labelText.value = "" + }); }); @@ -505,9 +523,15 @@ onMounted(() => { >
-
+
-
{{ ssmnOption.taskMode==-1?ssmnOption.endTime:ssmnOption.startTime }}
+
+ {{ + ssmnOption?.taskMode == -1 && props.activeMenu === "输运模拟" + ? end.format("YYYY-MM-DD HH:mm:ss") + : start.format("YYYY-MM-DD HH:mm:ss") + }} +
{ :marks="marks" @input="handleChange" /> -
{{ ssmnOption.taskMode==-1?ssmnOption.startTime:ssmnOption.endTime }}
-
+
+ {{ + ssmnOption?.taskMode == -1 && props.activeMenu === "输运模拟" + ? start.format("YYYY-MM-DD HH:mm:ss") + : end.format("YYYY-MM-DD HH:mm:ss") + }} +
+
{{ labelText }}
@@ -542,14 +576,14 @@ onMounted(() => { transition: left 0.08s linear; } -.startTimes{ +.startTimes { position: absolute; left: 0; bottom: -10px; color: #fff; } -.endTimes{ +.endTimes { position: absolute; right: 0; bottom: -10px; diff --git a/src/layout/Container/meteorologyMenu.vue b/src/layout/Container/meteorologyMenu.vue index 6c950e1e..ca8d4617 100644 --- a/src/layout/Container/meteorologyMenu.vue +++ b/src/layout/Container/meteorologyMenu.vue @@ -1,90 +1,66 @@