回放，预览bug

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")
+  }
 };
 
 // 初始化地图

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 Clock from "@/gis/common/clock/clock/Clock"; // 根据实际路径调整
-import JulianDate from '../common/clock/JulianData/JulianDate';
+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)
+  if (!olClock) return;
-    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 formatStartTime = dayjs(startTime.getTime()).format(
-  const formatEndTime = dayjs(endTime.getTime()).format('YYYY-MM-DD HH:mm:ss');
+    "YYYY-MM-DD HH:mm:ss",
+  );
+  const formatEndTime = dayjs(endTime.getTime()).format("YYYY-MM-DD HH:mm:ss");
 
   return {
     formatStartTime,

src/layout/Container/mapRightMenu.vue

@@ -556,7 +556,7 @@ onMounted(() => {
       "
     >
       <div
-        style="width: 25%; display: flex; margin-top: 15px"
+        style="width: 15%; display: flex; margin-top: 15px"
       >
         <el-select
           v-model="downTypeValue"

src/layout/Container/mapTimeSlider.vue

@@ -72,8 +72,8 @@ const tabsList = ref<TabItem[]>([
   { label: "天", value: "day", isActive: false },
 ]);
 
-const labelLeft = ref(0)
+const labelLeft = ref(0);
-const labelText = ref('')
+const labelText = ref("");
 
 // 下拉菜单台站选中项(输运模拟业务使用)
 const stationValue = ref<any>(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')
+    const sliderDom = document.querySelector(".slider .el-slider__runway");
-    if (!sliderDom) return
+    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) {
+        if (weathFlag[3] === true&&gisImgOpt.weatherType!=3) {
-        //   const params = { ...gisImgOpt, weatherType: 3, startTime: dataRequestOpt.value[currentHourDiff] };
+          const params = { ...gisImgOpt, weatherType: 3, startTime: dataRequestOpt.value[currentHourDiff],hour:currentHourDiff };
-        //   delete params.key;
+          delete params.key;
-        //   delete params.endTime;
+          delete params.endTime;
-        //   playbackSearchData(params, true, (res) => {
+          playbackSearchData(params, true, (res) => {
-        //     // 往态势传递数据
+            // 往态势传递数据
-        //     EventBusTool.getEventBus().publish('playData', {
+            EventBusTool.getEventBus().publish('playData', {
-        //       key: 'addyctqjsGis',
+              key: 'addyctqjsGis',
-        //       data: res.result,
+              data: res.result,
-        //     });
+            });
-        //   });
+          });
-        // }
+        }
       }
     }
   }
@@ -373,26 +382,30 @@ watch(
   { deep: true }
 );
 
-watch(value, (newVal, oldVal) => {
+watch(
-  let currentTime = null;
+  value,
-  if(ssmnOption.value.taskMode==-1){
+  (newVal, oldVal) => {
-    currentTime = end.value.clone().subtract(newVal, marskType.value);
+    let currentTime = null;
-  }else{
+    if (ssmnOption.value?.taskMode == -1 && props.activeMenu === "输运模拟") {
-    currentTime = start.value.clone().add(newVal, marskType.value);
+      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 = ""
+  });
 });
 </script>
 
@@ -505,9 +523,15 @@ onMounted(() => {
     >
       <SvgIcon name="stop" title="停止" width="34" height="34" />
     </div>
-    <div class="slider" style="position: relative;">
+    <div class="slider" style="position: relative">
       <!-- <div style="color: white">value:{{ start.format("YYYY-MM-DD HH:mm:ss") }} ----- totalHours:{{ end.format("YYYY-MM-DD HH:mm:ss") }}</div> -->
-      <div class="startTimes">{{ ssmnOption.taskMode==-1?ssmnOption.endTime:ssmnOption.startTime }}</div>
+      <div class="startTimes">
+        {{
+          ssmnOption?.taskMode == -1 && props.activeMenu === "输运模拟"
+            ? end.format("YYYY-MM-DD HH:mm:ss")
+            : start.format("YYYY-MM-DD HH:mm:ss")
+        }}
+      </div>
       <el-slider
         v-model="value"
         :disabled="isDisabledSlider"
@@ -518,8 +542,18 @@ onMounted(() => {
         :marks="marks"
         @input="handleChange"
       />
-      <div class="endTimes">{{ ssmnOption.taskMode==-1?ssmnOption.startTime:ssmnOption.endTime }}</div>
+      <div class="endTimes">
-      <div class="slider-label" :style="{ left: labelLeft + 'px' }" v-if="labelText">
+        {{
+          ssmnOption?.taskMode == -1 && props.activeMenu === "输运模拟"
+            ? start.format("YYYY-MM-DD HH:mm:ss")
+            : end.format("YYYY-MM-DD HH:mm:ss")
+        }}
+      </div>
+      <div
+        class="slider-label"
+        :style="{ left: labelLeft + 'px' }"
+        v-if="labelText"
+      >
         {{ labelText }}
       </div>
     </div>
@@ -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;

src/layout/Container/meteorologyMenu.vue

@@ -1,90 +1,66 @@
 <!-- gis地图右侧侧边栏icon文件 -->
 <script setup lang="ts">
 // 引入单击Icon对应方法集合
-import type { meteorologyItem } from '@/gis/ol/interface/common';
+import type { meteorologyItem } from "@/gis/ol/interface/common";
-import { domFullscreenStatus } from '@/gis/common/domHandle';
+import { domFullscreenStatus } from "@/gis/common/domHandle";
-import { gisImgOpt } from '@/gis/ol/index';
+import { gisImgOpt, tqycAnimationType } from "@/gis/ol/index";
-import { playbackSearchData, weatherDataLine, weatherPreview } from '@/utils/axios/tqyb/data/index';
+import {
+  playbackSearchData,
+  weatherDataLine,
+  weatherPreview,
+} from "@/utils/axios/tqyb/data/index";
+import { ElMessage } from "element-plus";
 
 // 图标集合
-const svgList :any= ref<meteorologyItem[]>([
+const svgList: any = ref<meteorologyItem[]>([
   {
-    name: 'humidity',
+    name: "humidity",
     isActive: false,
-    activeName: 'humidity_active',
+    activeName: "humidity_active",
-    tooltip: '湿度',
+    tooltip: "湿度",
     weatherType: 2,
   },
   {
-    name: 'temperature',
+    name: "temperature",
     isActive: false,
-    activeName: 'temperature_active',
+    activeName: "temperature_active",
-    tooltip: '温度',
+    tooltip: "温度",
     weatherType: 0,
   },
   {
-    name: 'airPressure',
+    name: "airPressure",
     isActive: false,
-    activeName: 'airPressure_active',
+    activeName: "airPressure_active",
-    tooltip: '气压',
+    tooltip: "气压",
     weatherType: 1,
   },
   {
-    name: 'windField',
+    name: "windField",
     isActive: true,
-    activeName: 'windField_active',
+    activeName: "windField_active",
-    tooltip: '风场',
+    tooltip: "风场",
     weatherType: 3,
   },
 ]);
 
-const  activeName= ref('windField');
+const activeName = ref("windField");
-
+const hgOrYlId = ref({});
 
 // 图标点击事件处理
 function handleIconClick(item: meteorologyItem) {
   // 风场图标特殊处理：默认选中且不可取消
   const eventbus = EventBusTool.getEventBus();
- 
 
-
+  if (item.name === "windField") {
-  if (item.name === 'windField') {
+    ElMessage({
-    item.isActive = !item.isActive;
+      message: "风场不可取消",
-    eventbus.publish('playData', {
+      type: "warning",
-      key: 'setWeathTypeParam',
-      weatherType: item.weatherType,
-      isActive: item.isActive,
     });
- if(item.name ===activeName.value ){
- eventbus.publish('playData', {
-      key: 'setWeatherLayerVisity',
-      weatherType: item.weatherType,
-      isActive: item.isActive,
-    });
-  }
-    // // true 添加
-    // if (item.isActive) {
-    //   playbackSearchData(gisImgOpt, true, (res) => {
-    //     console.log(res);
-    //     // 往态势传递数据
-    //     EventBusTool.getEventBus().publish('playData', {
-    //       key: 'addyctqjsGis',
-    //       data: res.result,
-    //     });
-    //   });
-    // }
-    // else {
-    //   // false 删除
-    //   eventbus.publish('playData', {
-    //     key: 'removeWindLayer',
-    //   });
-    // }
-activeName.value = item.name;
     return; // 点击风场不做任何操作，保持选中状态
   }
 
   // 处理湿度、温度、气压的三选一逻辑  先判定切换逻辑
-  const weatherGroup = ['humidity', 'temperature', 'airPressure'];
+  const weatherGroup = ["humidity", "temperature", "airPressure"];
   const isInWeatherGroup = weatherGroup.includes(item.name);
 
   if (isInWeatherGroup) {
@@ -92,50 +68,65 @@ activeName.value = item.name;
     svgList.value.forEach((icon) => {
       if (weatherGroup.includes(icon.name) && icon.name !== item.name) {
         icon.isActive = false;
-        eventbus.publish('playData', {
+        eventbus.publish("playData", {
-          key: 'setWeathTypeParam',
+          key: "setWeathTypeParam",
           weatherType: item.weatherType,
           isActive: item.isActive,
         });
       }
     });
     // 激活当前点击的图标
-    item.isActive = true;
+    item.isActive = !item.isActive;
-    eventbus.publish('playData', {
+    eventbus.publish("playData", {
-      key: 'setWeathTypeParam',
+      key: "setWeathTypeParam",
       weatherType: item.weatherType,
       isActive: item.isActive,
     });
-
-    // const eventbus = EventBusTool.getEventBus();
-    // 执行对应操作
-    // eventbus.publish('playData', {
-    //   key: 'removeHeatMap',
-    // });
-    // eventbus.publish('playData', {
-    //   key: 'addHeatMap',
-    // });
   }
-// 在判定同一点击逻辑
+  // 在判定同一点击逻辑
   // 更新数据
 
- if (item.isActive) {
+  if (item.isActive) {
-    playbackSearchData(gisImgOpt, true, (res) => {
+    if (tqycAnimationType == 1) {
-      console.log(res);
+      let obj = {
-      // 往态势传递数据
+        weatherId: gisImgOpt.weatherId,
-      EventBusTool.getEventBus().publish('playData', {
+        weatherType: gisImgOpt.weatherType,
-        key: 'addyctqjsGis',
+        timeBatch: gisImgOpt.timeBatch,
-        data: res.result,
+      };
+      weatherPreview(obj, (res) => {
+        // 往态势传递数据
+        EventBusTool.getEventBus().publish("playData", {
+          key: "addyctqjsGis",
+          data: res.result,
+          animationType: 1,
+        });
       });
-    });
+    } else {
-  }
+      playbackSearchData(gisImgOpt, false, (res) => {
-  else {
+        // 往态势传递数据
+        EventBusTool.getEventBus().publish("playData", {
+          key: "addyctqjsGis",
+          data: res.result,
+        });
+      });
+    }
+  } else {
     // false 删除
-    eventbus.publish('playData', {
+    eventbus.publish("playData", {
-      key: 'removeGisWindLayer',
+      key: "setWeathTypeParam",
+      weatherType: 3,
+      isActive: true,
+    });
+
+    eventbus.publish("playData", {
+      key: "removeGisWindLayer",
+    });
+
+    eventbus.publish("playUI", {
+      key: "hideWeathLength",
     });
   }
-  
+
   activeName.value = item.name;
 }
 
@@ -143,44 +134,84 @@ onMounted(() => {
   // 判断当前是否处于全屏状态
   svgList.value[0].isActive = domFullscreenStatus();
   // 注册右边菜单UI回调事件
-  EventBusTool.getEventBus().subscribe('mapRightMenuUIEvent', (res: any) => {
+  EventBusTool.getEventBus().subscribe("mapRightMenuUIEvent", (res: any) => {
     // 如果进入全屏，全屏icon没有高亮的话，需要高亮
-    if (res.key === 'enterFullscreen' && !svgList.value[0].isActive) {
+    if (res.key === "enterFullscreen" && !svgList.value[0].isActive) {
       svgList.value[0].isActive = true;
     }
     // 如果退出全屏，全屏icon是高亮的话，需要取消高亮
-    else if (res.key === 'exitFullscreen' && svgList.value[0].isActive) {
+    else if (res.key === "exitFullscreen" && svgList.value[0].isActive) {
       svgList.value[0].isActive = false;
     }
     // 如果退出全屏，全屏icon是高亮的话，需要取消高亮
-    else if (res.key === 'f11KeyPressed') {
+    else if (res.key === "f11KeyPressed") {
       if (!svgList.value[0].isActive) {
         svgList.value[0].isActive = true;
-      }
+      } else {
-      else {
         svgList.value[0].isActive = false;
       }
     }
     // 如果退出全屏，全屏icon是高亮的话，需要取消高亮
-    else if (res.key === 'switchLocalLayer') {
+    else if (res.key === "switchLocalLayer") {
       svgList.value[1].isActive = false;
       svgList.value[2].isActive = true;
     }
   });
+
+  // 更新温度、湿度、气压的图标显影
+  EventBusTool.getEventBus().subscribe("upRightHfOrylIcon", (res: any) => {
+    svgList.value = [
+      {
+        name: "humidity",
+        isActive: false,
+        activeName: "humidity_active",
+        tooltip: "湿度",
+        weatherType: 2,
+      },
+      {
+        name: "temperature",
+        isActive: false,
+        activeName: "temperature_active",
+        tooltip: "温度",
+        weatherType: 0,
+      },
+      {
+        name: "airPressure",
+        isActive: false,
+        activeName: "airPressure_active",
+        tooltip: "气压",
+        weatherType: 1,
+      },
+      {
+        name: "windField",
+        isActive: true,
+        activeName: "windField_active",
+        tooltip: "风场",
+        weatherType: 3,
+      },
+    ];
+  });
 });
 </script>
 
 <template>
   <div class="icon_container">
     <div
-      v-for="(item, index) in svgList" :key="index" class="iconBox" :class="{ 'has-active': item.isActive }"
+      v-for="(item, index) in svgList"
+      :key="index"
+      class="iconBox"
+      :class="{ 'has-active': item.isActive }"
       @click="handleIconClick(item)"
     >
       <div class="text">
         {{ item.tooltip }}
       </div>
       <div class="icon">
-        <SvgIcon :name="item.isActive ? item.activeName : item.name" width="20" height="20" />
+        <SvgIcon
+          :name="item.isActive ? item.activeName : item.name"
+          width="20"
+          height="20"
+        />
       </div>
     </div>
   </div>

src/layout/Container/weathLength.vue

@@ -56,7 +56,7 @@ defineExpose({ updateLegend });
         class="top-label"
         :style="{ left: `${index === 0 ? (stop.position * 100 + 4) : index === (legendOptions.colorStops.length - 1) ? (stop.position * 100 - 5) : stop.position * 100}%` }"
       >
-        {{ getLabelValue(stop.position) }}
+        {{ getLabelValue(stop.position) }}{{ legendOptions.unit }}
       </span>
     </div>
 

src/locales/language/zh.json

@@ -245,6 +245,7 @@
   "targetUserName": "目标用户名",
   "selectTqybTableDataType": "请选择数据源",
   "selectStartAndEndTime": "请选择起止时间",
+  "selectTimeBatch":"请选择批次",
   "sceneType": "场景类型",
   "runtime": "运行时间",
   "releaseTheLowerHeight": "释放下部高度",

src/pages/symn/index.vue

@@ -1523,7 +1523,7 @@ getStations();
     <Dialog
       v-model="configVisible"
       :title="configType === 'add' ? t('add') : t('edit')"
-      width="60vw"
+      width="61vw"
       class="config-dialog"
     >
       <div class="config-dialog-title">
@@ -1892,7 +1892,7 @@ getStations();
         max-height="40vh"
         class="custom-table"
       >
-        <ElTableColumn prop="index" :label="t('deviceCode')" width="100">
+        <ElTableColumn prop="index" :label="t('deviceCode')" width="110">
           <template #default="scope">
             <!--            <ElSelect v-if="configForm.taskMode === 1" v-model="scope.row.index" filterable-->
             <!--              :placeholder="t('pleaseSelect')" class="config-custom-select" style="color:#fff;"-->
@@ -1950,7 +1950,7 @@ getStations();
           </template>
         </ElTableColumn>
         <!-- 样品ID -->
-        <ElTableColumn :label="t('sampleId')" width="80">
+        <ElTableColumn :label="t('sampleId')" width="95">
           <template #default="scope">
             <el-input
               v-model="scope.row.sampleId"

src/pages/tqybjs/index.vue

@@ -47,30 +47,7 @@ watch(drawerVisible, (newValue) => {
 // }
 // 回放
 function handleSendData(params: any) {
-  console.log('选中的回放数据,需要传至gis --->', params);
+  dialogVisible.value = false;
-  delete params.key
-  delete params.endTime
-  params.hour+=6;
-  playbackSearchData(params, false, (res) => {
-    console.log(res);
-    // 将请求前的传递方法放到这里：只有请求成功后才会传递
-    EventBusTool.getEventBus().publish('playData', {
-      key: 'show',
-    });
-    if (params.timeBatch) {
-      timeBatch.value = params.timeBatch;
-    }
-    else {
-      timeBatch.value = null;
-    }
-    // 往态势传递数据
-    EventBusTool.getEventBus().publish('playData', {
-      key: 'addyctqjsGis',
-      data: res.result,
-      animationType: 0,
-    });
-    dialogVisible.value = false;
-  });
 }
 // 预览
 function weatherPreviewHandle(params: any) {

src/pages/tqybjs/tab-1/index.vue

@@ -1,17 +1,41 @@
 <script setup lang="ts">
-import {ElButton, ElOption, TableInstance, UploadInstance, UploadProps, UploadRawFile} from 'element-plus';
+import {
-import dayjs from 'dayjs';
+  ElButton,
-import { ElLoading, ElMessage, ElMessageBox, ElNotification, genFileId } from 'element-plus';
+  ElOption,
-import SparkMD5 from 'spark-md5';
+  TableInstance,
-import { set } from 'vue'; // 引入 Vue 的 set 方法
+  UploadInstance,
-import { useI18n } from 'vue-i18n';
+  UploadProps,
-import { add, deleteData, edit, getData, getTaskLog, resume, pinToTopOrUnpin } from '@/utils/axios/tqyb/task';
+  UploadRawFile,
-import log from '@/pages/symn/log/index.vue';
+} from "element-plus";
-const emit = defineEmits(['playback']);
+import dayjs from "dayjs";
+import {
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElNotification,
+  genFileId,
+} from "element-plus";
+import SparkMD5 from "spark-md5";
+import { set } from "vue"; // 引入 Vue 的 set 方法
+import { useI18n } from "vue-i18n";
+import {
+  add,
+  deleteData,
+  edit,
+  getData,
+  getTaskLog,
+  resume,
+  pinToTopOrUnpin,
+} from "@/utils/axios/tqyb/task";
+import log from "@/pages/symn/log/index.vue";
+
+import { getHcQxData } from "@/utils/axios/fskjk";
+
+const emit = defineEmits(["playback"]);
 const { t } = useI18n();
 const upload = ref<UploadInstance>();
 const configVisible = ref(false);
-const configType = ref('');
+const configType = ref("");
 /* 新增、编辑表单 */
 const configForm = ref<any>({});
 
@@ -42,16 +66,16 @@ interface OptionItem {
 }
 const taskStatusList = ref<OptionItem[]>([
   // -1执行失败，0未开始，1等待中，2运行中，3已完成，4检查未通过
-  { label: '执行失败', value: -1 },
+  { label: "执行失败", value: -1 },
-  { label: '未开始', value: 0 },
+  { label: "未开始", value: 0 },
-  { label: '等待中', value: 1 },
+  { label: "等待中", value: 1 },
-  { label: '运行中', value: 2 },
+  { label: "运行中", value: 2 },
-  { label: '已完成', value: 3 },
+  { label: "已完成", value: 3 },
-  { label: '检查未通过', value: 4 },
+  { label: "检查未通过", value: 4 },
 ]);
 
 function search() {
-  console.log('搜索条件：', searchForm);
+  console.log("搜索条件：", searchForm);
   getList();
 }
 function getList() {
@@ -60,36 +84,39 @@ function getList() {
     startDate = searchForm.createTime[0];
     endDate = searchForm.createTime[1];
   }
-  getData({
+  getData(
-    ...searchForm,
+    {
-    startDate,
+      ...searchForm,
-    endDate,
+      startDate,
-    pageSize: pageSize.value,
+      endDate,
-    pageNum: currentPage.value,
+      pageSize: pageSize.value,
-  }, (res) => {
+      pageNum: currentPage.value,
-    taskList.value = res.rows;
+    },
-    total.value = res.total;
+    (res) => {
-  });
+      taskList.value = res.rows;
+      total.value = res.total;
+    }
+  );
 }
 
 // 置顶和取消置顶
 const pinToTopTask = (row: any) => {
   pinToTopOrUnpin({ id: row.id }, (res) => {
     if (res.code === 200) {
-      ElMessage.success('操作成功！');
+      ElMessage.success("操作成功！");
       getList();
     }
   });
 };
 
 function start(task: any) {
-  console.log('开始运行', task);
+  console.log("开始运行", task);
 
   resume({ taskId: task.id }, () => {
     ElNotification({
-      title: 'Tips',
+      title: "Tips",
-      message: 'Execution Successful',
+      message: "Execution Successful",
-      type: 'success',
+      type: "success",
       duration: 1800,
     });
     getList();
@@ -97,60 +124,60 @@ function start(task: any) {
 }
 
 function saveConfigForm() {
-  console.log('保存或新增');
+  console.log("保存或新增");
   if (configForm.value.leadTime % 6 !== 0) {
     return ElNotification({
-      title: 'Tips',
+      title: "Tips",
-      message: '预测时长需为6的倍数',
+      message: "预测时长需为6的倍数",
-      type: 'error',
+      type: "error",
       duration: 1800,
     });
   }
   if (!configForm.value.taskName) {
     return ElNotification({
-      title: 'Tips',
+      title: "Tips",
-      message: '请填写任务名称',
+      message: "请填写任务名称",
-      type: 'error',
+      type: "error",
       duration: 1800,
     });
   }
   if (!configForm.value.predictionModel) {
     return ElNotification({
-      title: 'Tips',
+      title: "Tips",
-      message: '请填写预测模型',
+      message: "请填写预测模型",
-      type: 'error',
+      type: "error",
       duration: 1800,
     });
   }
   if (!configForm.value.startDate) {
     return ElNotification({
-      title: 'Tips',
+      title: "Tips",
-      message: '请选择预测日期',
+      message: "请选择预测日期",
-      type: 'error',
+      type: "error",
       duration: 1800,
     });
   }
   if (!configForm.value.startTime && configForm.value.startTime !== 0) {
     return ElNotification({
-      title: 'Tips',
+      title: "Tips",
-      message: '请填写预测时间',
+      message: "请填写预测时间",
-      type: 'error',
+      type: "error",
       duration: 1800,
     });
   }
   if (!configForm.value.leadTime && configForm.value.leadTime !== 0) {
     return ElNotification({
-      title: 'Tips',
+      title: "Tips",
-      message: '请填写预测时长',
+      message: "请填写预测时长",
-      type: 'error',
+      type: "error",
       duration: 1800,
     });
   }
   if (!configForm.value.dataSources) {
     return ElNotification({
-      title: 'Tips',
+      title: "Tips",
-      message: '请选择数据来源',
+      message: "请选择数据来源",
-      type: 'error',
+      type: "error",
       duration: 1800,
     });
   }
@@ -161,31 +188,35 @@ function saveConfigForm() {
   //   target: document.querySelector('.base-layout'),
   // });
 
-  if (configType.value === 'add') {
+  if (configType.value === "add") {
     const addForm = new FormData();
-    console.log('???', configForm.value.dataSources, typeof configForm.value.dataSources);
+    console.log(
+      "???",
+      configForm.value.dataSources,
+      typeof configForm.value.dataSources
+    );
     if (configForm.value.dataSources === 2 && configForm.value.file) {
-      addForm.append('file', configForm.value.file);
+      addForm.append("file", configForm.value.file);
     }
-    addForm.append('taskName', configForm.value.taskName);
+    addForm.append("taskName", configForm.value.taskName);
-    addForm.append('predictionModel', configForm.value.predictionModel);
+    addForm.append("predictionModel", configForm.value.predictionModel);
-    addForm.append('startDate', configForm.value.startDate);
+    addForm.append("startDate", configForm.value.startDate);
-    addForm.append('startTime', configForm.value.startTime);
+    addForm.append("startTime", configForm.value.startTime);
-    addForm.append('leadTime', configForm.value.leadTime);
+    addForm.append("leadTime", configForm.value.leadTime);
-    addForm.append('dataSources', configForm.value.dataSources);
+    addForm.append("dataSources", configForm.value.dataSources);
 
     add(addForm, () => {
       // loading.close();
       ElNotification({
-        title: 'Tips',
+        title: "Tips",
-        message: 'Added successfully',
+        message: "Added successfully",
-        type: 'success',
+        type: "success",
         duration: 1800,
       });
       getList();
     });
   }
-  if (configType.value === 'edit') {
+  if (configType.value === "edit") {
     // const editValue = configForm.value = {
     //   id: configForm.value.id,
     //   taskName: configForm.value.taskName,
@@ -198,22 +229,22 @@ function saveConfigForm() {
     //
     // };
     const editForm = new FormData();
-    editForm.append('id', configForm.value.id);
+    editForm.append("id", configForm.value.id);
     if (configForm.value.dataSources === 2 && configForm.value.file) {
-      editForm.append('file', configForm.value.file);
+      editForm.append("file", configForm.value.file);
     }
-    editForm.append('taskName', configForm.value.taskName);
+    editForm.append("taskName", configForm.value.taskName);
-    editForm.append('predictionModel', configForm.value.predictionModel);
+    editForm.append("predictionModel", configForm.value.predictionModel);
-    editForm.append('startDate', configForm.value.startDate);
+    editForm.append("startDate", configForm.value.startDate);
-    editForm.append('startTime', configForm.value.startTime);
+    editForm.append("startTime", configForm.value.startTime);
-    editForm.append('leadTime', configForm.value.leadTime);
+    editForm.append("leadTime", configForm.value.leadTime);
-    editForm.append('dataSources', configForm.value.dataSources);
+    editForm.append("dataSources", configForm.value.dataSources);
     edit(editForm, () => {
       // loading.close();
       ElNotification({
-        title: 'Tips',
+        title: "Tips",
-        message: 'Saved successfully',
+        message: "Saved successfully",
-        type: 'success',
+        type: "success",
         duration: 1800,
       });
       getList();
@@ -224,38 +255,38 @@ function saveConfigForm() {
 }
 
 function addTask() {
-  console.log('新增任务');
+  console.log("新增任务");
   configForm.value = {};
   configVisible.value = true;
-  configType.value = 'add';
+  configType.value = "add";
 }
 
 function editTask(task: any, $index?: any) {
-  console.log('编辑任务', task, $index);
+  console.log("编辑任务", task, $index);
-  const serveType = task.serveId ? (task.serveId.includes('/') ? '服务名' : 'SID') : '';
+  const serveType = task.serveId
-  console.log('serveType', serveType, task.serveId);
+    ? task.serveId.includes("/")
+      ? "服务名"
+      : "SID"
+    : "";
+  console.log("serveType", serveType, task.serveId);
   configForm.value = {
     ...task,
     $index,
     serveType,
   };
-  console.log('编辑任务', configForm.value);
+  console.log("编辑任务", configForm.value);
 
   configVisible.value = true;
-  configType.value = 'edit';
+  configType.value = "edit";
 }
 
 function deleteTask(task: any) {
-  console.log('删除任务', task);
+  console.log("删除任务", task);
-  ElMessageBox.confirm(
+  ElMessageBox.confirm(t("isSureDelete"), "Warning", {
-    t('isSureDelete'),
+    confirmButtonText: t("sure"),
-    'Warning',
+    cancelButtonText: t("cancel"),
-    {
+    type: "warning",
-      confirmButtonText: t('sure'),
+  })
-      cancelButtonText: t('cancel'),
-      type: 'warning',
-    },
-  )
     .then(() => {
       let arr = [];
       arr.push(task.id);
@@ -272,7 +303,7 @@ function deleteTask(task: any) {
 }
 
 function refresh() {
-  console.log('刷新任务列表');
+  console.log("刷新任务列表");
   getList();
 }
 
@@ -284,29 +315,23 @@ function showLog(task: any) {
 }
 
 function cancle() {
-  console.log('取消运行', form);
+  console.log("取消运行", form);
-  ElMessageBox.confirm(
+  ElMessageBox.confirm(t("isSureCancelTask"), "Warning", {
-    t('isSureCancelTask'),
+    confirmButtonText: t("sure"),
-    'Warning',
+    cancelButtonText: t("cancel"),
-    {
+    type: "warning",
-      confirmButtonText: t('sure'),
+  })
-      cancelButtonText: t('cancel'),
-      type: 'warning',
-    },
-  )
     .then(() => {
       form.value = {
         ...form.value,
-        taskMode: '未开始',
+        taskMode: "未开始",
       };
       ElMessage({
-        type: 'success',
+        type: "success",
         message: `Cancelled successfully`,
       });
     })
-    .catch(() => {
+    .catch(() => {});
-
-    });
 }
 
 function handleSelectionChange(selection: any[]) {
@@ -319,49 +344,63 @@ function handleSelectionChange(selection: any[]) {
     multipleTableRef.value?.clearSelection(); // 清空所有选择
     multipleTableRef.value?.toggleRowSelection(latestSelection, true); // 选中最新项
     currentSelection.value = [latestSelection];
-  }
+  } else {
-  else {
     // 正常选择或取消选择
     currentSelection.value = selection;
   }
 
-  console.log('当前选中项:', currentSelection.value);
+  console.log("当前选中项:", currentSelection.value);
 }
 function playback() {
-  console.log('当前选中项:', currentSelection.value);
+  console.log("当前选中项:", currentSelection.value);
   if (Object.keys(currentSelection.value).length === 0) {
     ElMessage({
-      type: 'warning',
+      type: "warning",
       message: t(`isSelect`),
     });
-  }
+  } else {
-  else {
+    const startTime = dayjs(currentSelection.value[0].startDate)
-    const startTime = dayjs(currentSelection.value[0].startDate).add(0, 'hour').format('YYYY-MM-DD HH:mm:ss');
+      .add(0, "hour")
+      .format("YYYY-MM-DD HH:mm:ss");
     const params = {
       dataType: currentSelection.value[0].predictionModel,
-      weatherType: 3,
       startTime,
-      endTime: dayjs(startTime).add(currentSelection.value[0].leadTime, 'hour').format('YYYY-MM-DD HH:mm:ss'),
+      endTime: dayjs(startTime)
-      // hour: currentSelection.value[0].leadTime,
+        .add(currentSelection.value[0].leadTime, "hour")
-      hour: 0,
+        .format("YYYY-MM-DD HH:mm:ss"),
     };
-    emit('playback', params);
+    EventBusTool.getEventBus().publish("playData", {
-    EventBusTool.getEventBus().publish('playData', {
+      key: "setTaishiParam",
-      key: 'setTaishiParam',
       dataType: currentSelection.value[0].predictionModel,
       weatherType: 3,
       startTime,
-      // hour: currentSelection.value[0].leadTime,
       hour: 0,
-      endTime: dayjs(startTime).add(currentSelection.value[0].leadTime, 'hour').format('YYYY-MM-DD HH:mm:ss'),
+      endTime: dayjs(startTime)
+        .add(currentSelection.value[0].leadTime, "hour")
+        .format("YYYY-MM-DD HH:mm:ss"),
+    });
 
+    // 更新湿度、温度、气压的图标状态
+    EventBusTool.getEventBus().publish("upRightHfOrylIcon");
+
+    // 更新第一帧是否需要调用接口的状态
+    EventBusTool.getEventBus().publish("updateHfKsFlag", false);
+
+    getHcQxData(params, (res: any) => {
+      if (res.code == 200) {
+        EventBusTool.getEventBus().publish("playData", {
+          key: "show",
+        });
+
+        emit("playback");
+      }
     });
   }
 }
 
 function handleClick(): void {
   if (fileInput.value) {
-    fileInput.value.value = '';
+    fileInput.value.value = "";
     fileInput.value.click();
   }
 }
@@ -370,7 +409,7 @@ function handleFileChange(event: Event): void {
   const target = event.target as HTMLInputElement;
   const file = target.files?.[0];
   if (!file) {
-    console.warn('未选择文件');
+    console.warn("未选择文件");
     return;
   }
 
@@ -403,32 +442,68 @@ getList();
 
 <template>
   <div class="ycrw">
-    <Dialog v-model="logVisible" :title="t('operationLog')" width="56vw" class="child-custom" style="top:50%;left:50%;transform: translate(-50%, -50%);">
+    <Dialog
+      v-model="logVisible"
+      :title="t('operationLog')"
+      width="56vw"
+      class="child-custom"
+      style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
+    >
       <log :data="logData" />
     </Dialog>
 
     <!-- 增、改 -->
-    <Dialog v-model="configVisible" :title="configType === 'add' ? t('add') : t('edit')" width="40vw"
+    <Dialog
-      style="top:230px;left:30vw" class="config-dialog">
+      v-model="configVisible"
-      <ElForm label-position="top" label-width="120px" :model="configForm" class="config-custom-form">
+      :title="configType === 'add' ? t('add') : t('edit')"
+      width="40vw"
+      style="top: 230px; left: 30vw"
+      class="config-dialog"
+    >
+      <ElForm
+        label-position="top"
+        label-width="120px"
+        :model="configForm"
+        class="config-custom-form"
+      >
         <ElFormItem :label="t('taskName')">
-          <ElInput v-model="configForm.taskName" :placeholder="t('pleaseEnter')" class="config-custom-input" />
+          <ElInput
+            v-model="configForm.taskName"
+            :placeholder="t('pleaseEnter')"
+            class="config-custom-input"
+          />
         </ElFormItem>
         <ElFormItem :label="t('predictionModel')">
-          <ElSelect v-model="configForm.predictionModel" :placeholder="t('pleaseSelect')"
+          <ElSelect
-            popper-class="custom-select-dropdown" class="config-custom-select">
+            v-model="configForm.predictionModel"
+            :placeholder="t('pleaseSelect')"
+            popper-class="custom-select-dropdown"
+            class="config-custom-select"
+          >
             <ElOption label="盘古" :value="1" />
             <ElOption label="Graphcast" :value="2" />
           </ElSelect>
         </ElFormItem>
-        <ElFormItem :label="t('predictionStartDate')" class="config-custom-date">
+        <ElFormItem
-          <el-date-picker v-model="configForm.startDate" value-format="YYYY-MM-DD" width="100%" type="date"
+          :label="t('predictionStartDate')"
-            :placeholder="t('pleaseSelect')" />
+          class="config-custom-date"
+        >
+          <el-date-picker
+            v-model="configForm.startDate"
+            value-format="YYYY-MM-DD"
+            width="100%"
+            type="date"
+            :placeholder="t('pleaseSelect')"
+          />
         </ElFormItem>
         <ElFormItem :label="t('predictionStartTime')">
           <!--          <ElInput v-model="configForm.startTime" :placeholder="t('pleaseEnter')" class="config-custom-input" /> -->
-          <ElSelect v-model="configForm.startTime" :placeholder="t('pleaseSelect')" popper-class="custom-select-dropdown"
+          <ElSelect
-            class="config-custom-select">
+            v-model="configForm.startTime"
+            :placeholder="t('pleaseSelect')"
+            popper-class="custom-select-dropdown"
+            class="config-custom-select"
+          >
             <ElOption :value="0" />
             <ElOption :value="6" />
             <ElOption :value="12" />
@@ -436,24 +511,44 @@ getList();
           </ElSelect>
         </ElFormItem>
         <ElFormItem :label="t('predictionDuration')">
-          <ElInput v-model="configForm.leadTime" :placeholder="t('pleaseEnter')" class="config-custom-input" />
+          <ElInput
+            v-model="configForm.leadTime"
+            :placeholder="t('pleaseEnter')"
+            class="config-custom-input"
+          />
         </ElFormItem>
         <ElFormItem :label="t('dataSource')">
-          <ElSelect v-model="configForm.dataSources" :placeholder="t('pleaseSelect')"
+          <ElSelect
-            popper-class="custom-select-dropdown" class="config-custom-select">
+            v-model="configForm.dataSources"
+            :placeholder="t('pleaseSelect')"
+            popper-class="custom-select-dropdown"
+            class="config-custom-select"
+          >
             <ElOption label="cds" :value="1" />
             <ElOption label="本地文件" :value="2" />
           </ElSelect>
         </ElFormItem>
-        <ElFormItem v-if="configForm.dataSources === 2" :label="t('uploadFile')">
+        <ElFormItem
+          v-if="configForm.dataSources === 2"
+          :label="t('uploadFile')"
+        >
           <!--          <el-upload -->
           <!--            ref="upload" class="upload-demo" :data="configForm" action="/api/weatherTask/create" -->
           <!--            :before-upload="beforeUpload" :limit="1"  :auto-upload="false" -->
           <!--          > -->
           <!--            <template #trigger> -->
-          <ElInput v-model="configForm.inputFile" :placeholder="t('clickToUploadFile')" class="config-custom-input"
+          <ElInput
-            @click="handleClick" />
+            v-model="configForm.inputFile"
-          <input ref="fileInput" type="file" style="display: none" @change="handleFileChange">
+            :placeholder="t('clickToUploadFile')"
+            class="config-custom-input"
+            @click="handleClick"
+          />
+          <input
+            ref="fileInput"
+            type="file"
+            style="display: none"
+            @change="handleFileChange"
+          />
 
           <!--            </template> -->
           <!--          </el-upload> -->
@@ -463,13 +558,13 @@ getList();
       <template #footer>
         <div class="config-custom-btn">
           <el-button v-if="configType === 'add'" @click="saveConfigForm">
-            {{ t('add') }}
+            {{ t("add") }}
           </el-button>
           <el-button v-if="configType === 'edit'" @click="saveConfigForm">
-            {{ t('save') }}
+            {{ t("save") }}
           </el-button>
           <el-button type="warning" @click="configVisible = false">
-            {{ t('cancel') }}
+            {{ t("cancel") }}
           </el-button>
         </div>
       </template>
@@ -477,45 +572,89 @@ getList();
     <!-- 主表 -->
     <ElForm :inline="true" :model="searchForm" class="custom-form">
       <ElFormItem label="">
-        <ElInput v-model="searchForm.taskName" :placeholder="`${t('keyword')}...`" class="custom-input" />
+        <ElInput
+          v-model="searchForm.taskName"
+          :placeholder="`${t('keyword')}...`"
+          class="custom-input"
+        />
       </ElFormItem>
       <ElFormItem :label="t('taskStatus')">
-        <ElSelect v-model="searchForm.taskStatus" :placeholder="t('pleaseSelect')" clearable class="custom-select">
+        <ElSelect
-          <ElOption v-for="item in taskStatusList" :key="item.value" :label="item.label" :value="item.value" />
+          v-model="searchForm.taskStatus"
+          :placeholder="t('pleaseSelect')"
+          clearable
+          class="custom-select"
+        >
+          <ElOption
+            v-for="item in taskStatusList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </ElSelect>
       </ElFormItem>
       <ElFormItem :label="t('predictionDate')">
-        <ElDatePicker v-model="searchForm.createTime" value-format="YYYY-MM-DD" type="daterange" range-separator="--"
+        <ElDatePicker
-          :start-placeholder="t('startDate')" :end-placeholder="t('endDate')" class="custom-date-picker" />
+          v-model="searchForm.createTime"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          range-separator="--"
+          :start-placeholder="t('startDate')"
+          :end-placeholder="t('endDate')"
+          class="custom-date-picker"
+        />
       </ElFormItem>
       <ElFormItem>
-        <ElButton type="primary" class="custom-btn" icon="Search" @click="search">
+        <ElButton
-          {{ t('search') }}
+          type="primary"
+          class="custom-btn"
+          icon="Search"
+          @click="search"
+        >
+          {{ t("search") }}
         </ElButton>
       </ElFormItem>
     </ElForm>
-    <ElTable ref="multipleTableRef" :data="taskList" width="100%" max-height="60vh" class="custom-table"
+    <ElTable
-      @selection-change="handleSelectionChange">
+      ref="multipleTableRef"
+      :data="taskList"
+      width="100%"
+      max-height="60vh"
+      class="custom-table"
+      @selection-change="handleSelectionChange"
+    >
       <ElTableColumn type="selection" width="55" />
       <ElTableColumn type="index" :label="t('serialNumber')" width="80" />
       <ElTableColumn prop="taskName" :label="t('taskName')" />
       <ElTableColumn :label="t('taskStatus')">
         <template #default="scope">
-          <div v-if="scope.row.taskStatus === -1" style="color:#F5222D;">执行失败</div>
+          <div v-if="scope.row.taskStatus === -1" style="color: #f5222d">
-          <div v-if="scope.row.taskStatus === 0" style="color:#8C8C8C;">未开始</div>
+            执行失败
-          <div v-if="scope.row.taskStatus === 1" style="color:#FAAD14;">等待中</div>
+          </div>
-          <div v-if="scope.row.taskStatus === 2" style="color:#1677FF;">运行中</div>
+          <div v-if="scope.row.taskStatus === 0" style="color: #8c8c8c">
-          <div v-if="scope.row.taskStatus === 3" style="color:#52C41A;">已完成</div>
+            未开始
-          <div v-if="scope.row.taskStatus === 4" style="color:#F5222D;">检查未通过</div>
+          </div>
+          <div v-if="scope.row.taskStatus === 1" style="color: #faad14">
+            等待中
+          </div>
+          <div v-if="scope.row.taskStatus === 2" style="color: #1677ff">
+            运行中
+          </div>
+          <div v-if="scope.row.taskStatus === 3" style="color: #52c41a">
+            已完成
+          </div>
+          <div v-if="scope.row.taskStatus === 4" style="color: #f5222d">
+            检查未通过
+          </div>
         </template>
       </ElTableColumn>
       <ElTableColumn prop="model" :label="t('predictionModel')">
         <template #default="scope">
           <div v-if="scope.row.predictionModel === 1">
-            {{ '盘古' }}
+            {{ "盘古" }}
           </div>
           <div v-if="scope.row.predictionModel === 2">
-            {{ 'Graphcast' }}
+            {{ "Graphcast" }}
           </div>
         </template>
       </ElTableColumn>
@@ -538,17 +677,13 @@ getList();
       <ElTableColumn prop="leadTime" :label="t('predictionDuration')">
         <!--  预测时长 -->
         <template #default="scope">
-          <div>
+          <div>{{ scope.row.leadTime }}小时</div>
-            {{ scope.row.leadTime }}小时
-          </div>
         </template>
       </ElTableColumn>
       <ElTableColumn prop="hours" :label="t('timeConsuming')">
         <!--  耗时 -->
         <template #default="scope">
-          <div>
+          <div>{{ scope.row.timeConsuming }}分钟</div>
-            {{ (scope.row.timeConsuming) }}分钟
-          </div>
         </template>
       </ElTableColumn>
       <!--<ElTableColumn prop="creator" :label="t('creator')">
@@ -559,54 +694,98 @@ getList();
       <ElTableColumn prop="createTime" :label="t('creationTime')" width="220" />
       <ElTableColumn :label="t('operation')" width="280">
         <template #default="scope">
-          <ElButton v-if="scope.row.taskStatus === 1" type="text" class="table-btn" @click="pinToTopTask(scope)">
+          <ElButton
-            {{ true ? t('pinToTop') : t('unpin') }}
+            v-if="scope.row.taskStatus === 1"
+            type="text"
+            class="table-btn"
+            @click="pinToTopTask(scope)"
+          >
+            {{ true ? t("pinToTop") : t("unpin") }}
           </ElButton>
-          <ElButton v-else type="text" style="color:#588589;cursor:no-drop">
+          <ElButton v-else type="text" style="color: #588589; cursor: no-drop">
-            {{ true ? t('pinToTop') : t('unpin') }}
+            {{ true ? t("pinToTop") : t("unpin") }}
           </ElButton>
           <!-- -1执行失败，0未开始，1等待中，2运行中，3已完成，4检查未通过-->
           <!--任务处于等待中，运行中状态时，不能编辑和删除；处于未开始，已完成，检查未通过时可以删除；处于已完成状态时也不能编辑-->
-          <ElButton v-if="scope.row.taskStatus === 0 || scope.row.taskStatus === -1" type="text" class="custom-text-btn"
+          <ElButton
-            @click="start(scope.row, scope.$index)">
+            v-if="scope.row.taskStatus === 0 || scope.row.taskStatus === -1"
-            {{ t('start') }}
+            type="text"
+            class="custom-text-btn"
+            @click="start(scope.row, scope.$index)"
+          >
+            {{ t("start") }}
           </ElButton>
-          <ElButton v-else type="text" style="color:#588589;cursor:no-drop">
+          <ElButton v-else type="text" style="color: #588589; cursor: no-drop">
-            {{ t('start') }}
+            {{ t("start") }}
           </ElButton>
-          <ElButton type="text" class="custom-text-btn" @click="showLog(scope.row)">
+          <ElButton
-            {{ t('operationLog') }}
+            type="text"
+            class="custom-text-btn"
+            @click="showLog(scope.row)"
+          >
+            {{ t("operationLog") }}
           </ElButton>
 
-          <ElButton v-if="scope.row.taskStatus !== 1 && scope.row.taskStatus !== 2 && scope.row.taskStatus !== 3" type="text" class="custom-text-btn" @click="editTask(scope.row, scope.$index)">
+          <ElButton
-            {{ t('edit') }}
+            v-if="
+              scope.row.taskStatus !== 1 &&
+              scope.row.taskStatus !== 2 &&
+              scope.row.taskStatus !== 3
+            "
+            type="text"
+            class="custom-text-btn"
+            @click="editTask(scope.row, scope.$index)"
+          >
+            {{ t("edit") }}
           </ElButton>
-          <ElButton v-else type="text" style="color:#588589;cursor:no-drop">
+          <ElButton v-else type="text" style="color: #588589; cursor: no-drop">
-            {{ t('edit') }}
+            {{ t("edit") }}
           </ElButton>
-          <ElButton v-if="scope.row.taskStatus == 0 || scope.row.taskStatus === 3 || scope.row.taskStatus === 4" type="text" class="custom-text-btn" @click="deleteTask(scope.row)">
+          <ElButton
-            {{ t('delete') }}
+            v-if="
+              scope.row.taskStatus == 0 ||
+              scope.row.taskStatus === 3 ||
+              scope.row.taskStatus === 4
+            "
+            type="text"
+            class="custom-text-btn"
+            @click="deleteTask(scope.row)"
+          >
+            {{ t("delete") }}
           </ElButton>
-          <ElButton v-else type="text" style="color:#588589;cursor:no-drop">
+          <ElButton v-else type="text" style="color: #588589; cursor: no-drop">
-            {{ t('delete') }}
+            {{ t("delete") }}
           </ElButton>
         </template>
       </ElTableColumn>
     </ElTable>
     <div class="pagination">
-      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100, 200]"
+      <el-pagination
-        size="small" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
+        v-model:current-page="currentPage"
-        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100, 200]"
+        size="small"
+        :background="true"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
     </div>
     <div class="dialog-footer">
       <el-button class="custom-btn" icon="VideoPlay" @click="playback">
-        {{ t('playback') }}
+        {{ t("playback") }}
       </el-button>
       <el-button class="custom-btn" icon="Plus" @click="addTask">
-        {{ t('add') }}
+        {{ t("add") }}
       </el-button>
-      <el-button type="primary" class="custom-btn" icon="Refresh" @click="refresh">
+      <el-button
-        {{ t('refresh') }}
+        type="primary"
+        class="custom-btn"
+        icon="Refresh"
+        @click="refresh"
+      >
+        {{ t("refresh") }}
       </el-button>
     </div>
   </div>
@@ -661,7 +840,6 @@ getList();
   }
 
   .config-custom-date {
-
     .el-date-editor.el-input,
     .el-date-editor.el-input__wrapper {
       width: calc(20vw - 80px) !important;

src/pages/tqybjs/tab-2/index.vue

@@ -24,6 +24,8 @@ import {
   getPcValueBySjlx,
 } from "@/utils/axios/tqyb/data";
 
+import { getHcQxData } from "@/utils/axios/fskjk";
+
 const propsWithDefaults = withDefaults(defineProps<Props>(), {
   type: "",
 });
@@ -215,24 +217,52 @@ function playback() {
       type: "warning",
       message: t(`selectTqybTableDataType`),
     });
+    return;
   }
-  if (!pickerValue.value.length) {
+  if (propsWithDefaults.type != "gkqx" && !pickerValue.value.length) {
     ElMessage({
       type: "warning",
       message: t(`selectStartAndEndTime`),
     });
+    return;
   }
-  const startTime = dayjs(pickerValue.value[0]).format("YYYY-MM-DD HH:mm:ss");
-  const endTime = dayjs(pickerValue.value[1]).format("YYYY-MM-DD HH:mm:ss");
 
-  const params = {
+  if (propsWithDefaults.type == "gkqx" && !timeBatch.value) {
-    dataType: selectValue.value,
+    ElMessage({
-    weatherType: 3,
+      type: "warning",
-    startTime,
+      message: t(`selectTimeBatch`),
-    hour: 0,
+    });
-    timeBatch: timeBatch.value,
+    return;
-  };
+  }
+  
+  // 更新第一帧是否需要调用接口的状态
+  EventBusTool.getEventBus().publish("updateHfKsFlag", false);
 
+  let startTime = null;
+  let endTime = null;
+  if (propsWithDefaults.type == "gkqx") {
+    startTime = dayjs(timeBatch.value, "YYYYMMDD").format(
+      "YYYY-MM-DD HH:mm:ss"
+    );
+    endTime = dayjs(startTime).add(384, "hour").format("YYYY-MM-DD HH:mm:ss");
+  } else {
+    startTime = dayjs(pickerValue.value[0]).format("YYYY-MM-DD HH:mm:ss");
+    endTime = dayjs(pickerValue.value[1]).format("YYYY-MM-DD HH:mm:ss");
+  }
+
+  let params = {};
+  if (propsWithDefaults.type == "gkqx") {
+    params = {
+      dataType: selectValue.value,
+      timeBatch: timeBatch.value,
+    };
+  } else {
+    params = {
+      dataType: selectValue.value,
+      startTime,
+      endTime,
+    };
+  }
   EventBusTool.getEventBus().publish("playData", {
     key: "setTaishiParam",
     dataType: selectValue.value,
@@ -242,9 +272,18 @@ function playback() {
     hour: 0,
     timeBatch: timeBatch.value,
   });
-  // 设置请求数据标识
+
-  weathFlag[gisImgOpt.weatherType] = true;
+  // 更新湿度、温度、气压的图标状态  
-  emit("playback", params);
+  EventBusTool.getEventBus().publish("upRightHfOrylIcon");
+  getHcQxData(params, (res: any) => {
+    if (res.code == 200) {
+      EventBusTool.getEventBus().publish("playData", {
+        key: "show",
+      });
+
+      emit("playback");
+    }
+  });
 }
 
 function disabledHour() {
@@ -348,10 +387,13 @@ function previewTask(row: any) {
     key: "setTaishiParam",
     dataType: row.dataSource,
     weatherType: 3,
-    startTime: row.dataStartTime,
+    weatherId: row.id,
-    endTime: row.dataStartTime,
+    timeBatch: row.timeBatch,
-    hour: 0,
   });
+
+  // 更新湿度、温度、气压的图标状态
+  EventBusTool.getEventBus().publish("upRightHfOrylIcon");
+
   emit("preview", params);
 }
 
@@ -537,7 +579,7 @@ getList();
         v-model="selectValue"
         :options="selectOption"
         placeholder="选择数据源"
-        style="width: 240px; margin-right: 10px"
+        style="width: 160px; margin-right: 10px"
       />
       <!-- 时间选择 -->
 
@@ -566,6 +608,7 @@ getList();
           <ElOption v-for="v in timeBatchList" :label="v" :value="v" />
         </ElSelect>
         <el-date-picker
+          v-if="type !== 'gkqx'"
           v-model="pickerValue"
           unlink-panels
           type="datetimerange"
@@ -584,20 +627,6 @@ getList();
       <el-button class="custom-btn" icon="VideoPlay" @click="playback">
         {{ t("playback") }}
       </el-button>
-
-      <!--            <el-upload v-if="type !== 'sjyc'" ref="upload" class="upload-file" -->
-      <!--                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1" :on-exceed="handleExceed" -->
-      <!--                :auto-upload="false"> -->
-      <!--                <template #trigger> -->
-      <!--<el-button v-if="propsWithDefaults.type === 'zfx'" type="primary" class="custom-btn" @click="handleClick">-->
-      <!--  <SvgIcon name="import" width="30" height="20" style="font-weight:bold;margin-right: 1px;" />-->
-      <!--  {{ t('import') }}-->
-      <!--</el-button>-->
-      <!--<el-select-v2 v-if="propsWithDefaults.type === 'zfx'" v-model="fileDatasource" :options="selectOption"-->
-      <!--  placeholder="选择数据源" style="width: 240px;margin-right: 10px;" />-->
-      <!--<input ref="fileInput" type="file" style="display: none" @change="handleFileChange">-->
-      <!--                </template> -->
-      <!--            </el-upload> -->
     </div>
   </div>
 </template>

src/utils/axios/fskjk/index.ts

@@ -80,3 +80,21 @@ export async function getRwscGifFileGcrz(
     callback?.(response);
   }
 }
+
+/**
+ * 缓存数据
+ */
+export async function getHcQxData(
+  params: any,
+  callback?: (data: any) => void,
+): Promise<any> {
+  const response = await request({
+    url: `${serverIp}${baseURL}/weatherData/cacheWeatherData`,
+    method: "GET",
+    params,
+  });
+
+  if (response.success && response.code === 200) {
+    callback?.(response);
+  }
+}

src/utils/axios/tqyb/data/index.ts

@@ -161,7 +161,7 @@ export async function playbackSearchData(
     url: `${serverIp}${baseURL}/weatherData/getWeatherData`,
     method: 'GET',
     params, // 包含角色信息的完整表单数据
-    isLoding,
+    isLoding
   });
 
   if (response.success && response.code === 200) {