修改热力图播放

src/layout/Container/mapRightMenu.vue

@@ -7,7 +7,7 @@ import { mapRightMenuEvent } from "@/gis/ol/olRightMenu";
 import { getGif } from "@/utils/axios/symn";
 import { useI18n } from "vue-i18n";
 import { ElMessage } from "element-plus";
-import log from '@/pages/symn/log/index.vue';
+import log from "@/pages/symn/log/index.vue";
 
 import {
   getrwssGifFileData,
@@ -259,7 +259,7 @@ function handleIconClick(item: MapControlItem) {
         isShowGif.value = true;
       }
     );
-  }else if(item.name=='calendar'){
+  } else if (item.name == "calendar") {
     let falg: any = !item.isActive;
     switchIconActive(item.name, falg);
     EventBusTool.getEventBus().publish("sjfxCalendarEvent", {
@@ -328,6 +328,23 @@ const generateGif = () => {
   );
 };
 
+// 提取文件名工具
+const getFileNameFromDisposition = (
+  disposition?: string,
+  defaultName = "download.gif"
+) => {
+  if (!disposition) return defaultName;
+  const match = disposition.match(/filename=([^;]+)/);
+  if (match?.[1]) {
+    try {
+      return decodeURIComponent(match[1]);
+    } catch {
+      return match[1];
+    }
+  }
+  return defaultName;
+};
+
 // 下载任务所属GIF文件
 const downGifFile = () => {
   let taskId = JSON.parse(sessionStorage.getItem("ssmnDataItem")).id;
@@ -338,11 +355,16 @@ const downGifFile = () => {
       speciesId,
       genGifType: downTypeValue.value,
     },
-    (res: Blob) => {
+    (response) => {
-      console.log(res, "2222222222222");
+      console.log(response, "2222222222222");
-      // res 直接是Blob，没有headers，直接写死文件名
+      const blob = response.data;
-      const fileName = "JPX38_region.gif";
+      const disposition = response.headers["content-disposition"];
-      const url = URL.createObjectURL(res);
+      const fileName = getFileNameFromDisposition(
+        disposition,
+        "JPX38_global.gif"
+      );
+
+      const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
       a.download = fileName;
@@ -495,45 +517,47 @@ onMounted(() => {
     style="min-height: 120px"
     @close="isShowGif = false"
   >
-    <el-form :model="form" label-width="auto" style="max-width: 100%">
+    <el-form
-      <el-row :gutter="12">
+      :model="form"
-        <el-col :span="5">
+      label-width="auto"
+      style="max-width: 100%; justify-content: space-between;display: flex;"
+    >
       <el-form-item :label="t('lonmin')">
         <el-input v-model="gifFormData.minLon" />
       </el-form-item>
-        </el-col>
 
-        <el-col :span="5">
       <el-form-item :label="t('lonmax')">
         <el-input v-model="gifFormData.maxLon" />
       </el-form-item>
-        </el-col>
-        <el-col :span="5">
       <el-form-item :label="t('latmin')">
         <el-input v-model="gifFormData.minLat" />
       </el-form-item>
-        </el-col>
-        <el-col :span="5">
       <el-form-item :label="t('latmax')">
         <el-input v-model="gifFormData.maxLat" />
       </el-form-item>
-        </el-col>
+
-        <el-col :span="2">
       <el-button @click="generateGif" type="primary" class="custom-btn"
         >生成GIF</el-button
-          ></el-col
       >
-        <el-col :span="2"
+
-          ><el-button @click="viewLogs" type="primary" class="custom-btn"
+      <el-button @click="viewLogs" type="primary" class="custom-btn"
         >查看日志</el-button
-          ></el-col
       >
-      </el-row>
     </el-form>
 
     <img v-if="isShowGif" :src="gifSrc" alt="GIF" style="width: 100%" />
-    <div style="width: 100%; display: flex; justify-content: flex-end;margin-top: 15px;">
+    <div
-      <div style="width: 25%;display: flex;padding-right: 10px;">
+      style="
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        border-top: 1px solid #0c6a66;
+        margin-top: 10px;
+      "
+    >
+      <div
+        style="width: 25%; display: flex; margin-top: 15px"
+      >
         <el-select
           v-model="downTypeValue"
           :options="downTypeOptions"
@@ -545,7 +569,7 @@ onMounted(() => {
           @click="downGifFile"
           type="primary"
           class="custom-btn"
-          style="margin-left: 10px;"
+          style="margin-left: 10px"
           >下载</el-button
         >
       </div>

src/layout/Container/mapTimeSlider.vue

@@ -1,20 +1,33 @@
 <script lang="ts" setup>
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
-import { activeMoudleInf, gisImgOpt, setWeathRequesTime, weathFlag } from '@/gis/ol/index';
+import {
-import { getClockTimeRange, setcurrentTime, setShouldAnimate, stopPlay } from '@/gis/ol/olClock';
+  activeMoudleInf,
-import { clearGridFeatures } from '@/gis/ol/olGirdHeatmap';
+  gisImgOpt,
-import { clearHeatmapLayer } from '@/gis/ol/olHeatmap';
+  setWeathRequesTime,
-import { playback_EventBusCallback, sendPlaybackPostMassage } from '@/gis/worker/playbackWorkerMa';
+  weathFlag,
-import { playbackSearchData } from '@/utils/axios/tqyb/data/index';
+} from "@/gis/ol/index";
+import {
+  getClockTimeRange,
+  setcurrentTime,
+  setShouldAnimate,
+  stopPlay,
+} from "@/gis/ol/olClock";
+import { clearGridFeatures } from "@/gis/ol/olGirdHeatmap";
+import { clearHeatmapLayer } from "@/gis/ol/olHeatmap";
+import {
+  playback_EventBusCallback,
+  sendPlaybackPostMassage,
+} from "@/gis/worker/playbackWorkerMa";
+import { playbackSearchData } from "@/utils/axios/tqyb/data/index";
 
 const props = defineProps({
   activeMenu: {
     type: String,
-    default: '',
+    default: "",
   },
   taskId: {
     type: String,
-    default: '',
+    default: "",
   },
   globalAttr: {
     type: Object,
@@ -55,10 +68,13 @@ interface TabItem {
   isActive: boolean;
 }
 const tabsList = ref<TabItem[]>([
-  { label: '小时', value: 'hour', isActive: true },
+  { label: "小时", value: "hour", isActive: true },
-  { label: '天', value: 'day', isActive: false },
+  { label: "天", value: "day", isActive: false },
 ]);
 
+const labelLeft = ref(0)
+const labelText = ref('')
+
 // 下拉菜单台站选中项(输运模拟业务使用)
 const stationValue = ref<any>(null);
 
@@ -73,30 +89,34 @@ const isDisabledSlider = ref<boolean>(false);
 // 是否可以查询数据
 const isQueryData = ref<boolean>(true);
 // 传入的开始和结束时间
-const marskType = ref<string>('hour');
+const marskType = ref<string>("hour");
-const start = ref<any>(dayjs('2025-09-15 00:00:00'));
+const start = ref<any>(dayjs("2025-09-15 00:00:00"));
-const end = ref<any>(dayjs('2025-09-16 00:00:00'));
+const end = ref<any>(dayjs("2025-09-16 00:00:00"));
 const totalHours = ref<number>(end.value.diff(start.value, marskType.value));
 const value = ref<number>(0);
 const playFalg = ref<boolean>(false);
 const slodtooltip: any = (toolNum: number) => {
-  return start.value.add(toolNum, marskType.value).format('YYYY-MM-DD HH:mm:ss');
+  return start.value
+    .add(toolNum, marskType.value)
+    .format("YYYY-MM-DD HH:mm:ss");
 };
 
-const active = ref('浓度分布');
+const active = ref("浓度分布");
 
 function switchActive(tab: string) {
-  if (playFalg.value)
+  if (playFalg.value) return;
-    return;
   active.value = tab;
-  sendPlaybackPostMassage({ code: 'queryHSJMNType', data: JSON.parse(JSON.stringify(active.value)) }, {});
+  sendPlaybackPostMassage(
+    { code: "queryHSJMNType", data: JSON.parse(JSON.stringify(active.value)) },
+    {}
+  );
   stopAnimation();
 }
 
 // 生成 marks，每隔6小时一个
 const dataRequestOpt = computed(() => {
   const obj: Record<number, string> = {};
-  const baseSpeed = marskType.value === 'hour' ? 6 : 1;
+  const baseSpeed = marskType.value === "hour" ? 6 : 1;
   const totalPoints = Math.floor(totalHours.value / baseSpeed) + 1; // 原始总标签数
   // const maxShow = 6; // 最多显示10个标签
 
@@ -107,9 +127,13 @@ const dataRequestOpt = computed(() => {
 
   // 按实际步长生成标签（确保不超过10个）
   let count = 0;
-  for (let i = 0; i <= totalHours.value && count < totalPoints; i += baseSpeed) {
+  for (
+    let i = 0;
+    i <= totalHours.value && count < totalPoints;
+    i += baseSpeed
+  ) {
     const t = start.value.add(i, marskType.value);
-    obj[i] = t.format('YYYY-MM-DD HH:mm:ss');
+    obj[i] = t.format("YYYY-MM-DD HH:mm:ss");
     count++;
   }
 
@@ -128,8 +152,18 @@ const dataRequestOpt = computed(() => {
 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());
-  console.log(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 = val / totalHours.value
+    // 基础位置，居中偏移，微调数值控制对齐
+    labelLeft.value = percent * width - 60
+  })
 }
 // 切换显示标签
 function switchTab(tab: TabItem) {
@@ -143,7 +177,7 @@ function switchTab(tab: TabItem) {
 
 // 进行起止动画
 function playAnimation() {
-  if (props.activeMenu === '输运模拟' && !playFalg.value && isQueryData.value) {
+  if (props.activeMenu === "输运模拟" && !playFalg.value && isQueryData.value) {
     const param = {
       taskId: props.taskId,
       speciesId: JSON.parse(JSON.stringify(speciesValue.value)),
@@ -153,10 +187,17 @@ function playAnimation() {
     };
     isDisabledSlider.value = true;
     isQueryData.value = false;
-    sendPlaybackPostMassage({ code: 'querySYMN', data: JSON.parse(JSON.stringify(param)) }, {});
+    sendPlaybackPostMassage(
+      { code: "querySYMN", data: JSON.parse(JSON.stringify(param)) },
+      {}
+    );
     return;
   }
-  if (props.activeMenu === '核事件模拟' && !playFalg.value && isQueryData.value) {
+  if (
+    props.activeMenu === "核事件模拟" &&
+    !playFalg.value &&
+    isQueryData.value
+  ) {
     const param = {
       taskId: props.taskId,
       hour: 1,
@@ -165,12 +206,23 @@ function playAnimation() {
     };
     isDisabledSlider.value = true;
     isQueryData.value = false;
-    sendPlaybackPostMassage({ code: 'queryHSJMNType', data: JSON.parse(JSON.stringify(active.value)) }, {});
+    sendPlaybackPostMassage(
-    if (active.value === '浓度分布') {
+      {
-      sendPlaybackPostMassage({ code: 'queryHSJMNndfb', data: JSON.parse(JSON.stringify(param)) }, {});
+        code: "queryHSJMNType",
-    }
+        data: JSON.parse(JSON.stringify(active.value)),
-    else {
+      },
-      sendPlaybackPostMassage({ code: 'queryHSJMNjlfb', data: JSON.parse(JSON.stringify(param)) }, {});
+      {}
+    );
+    if (active.value === "浓度分布") {
+      sendPlaybackPostMassage(
+        { code: "queryHSJMNndfb", data: JSON.parse(JSON.stringify(param)) },
+        {}
+      );
+    } else {
+      sendPlaybackPostMassage(
+        { code: "queryHSJMNjlfb", data: JSON.parse(JSON.stringify(param)) },
+        {}
+      );
     }
     return;
   }
@@ -184,8 +236,8 @@ function stopAnimation() {
   // 停止播放
   stopPlay();
   // 关掉图例
-  playback_EventBusCallback.publish('legendUiData', {
+  playback_EventBusCallback.publish("legendUiData", {
-    key: 'showLengend',
+    key: "showLengend",
     value: false,
   });
   // 清空要素
@@ -199,7 +251,7 @@ function stopAnimation() {
   isQueryData.value = true;
   // 进度条设为0
   value.value = 0;
-  sendPlaybackPostMassage({ code: 'abortSYMN', data: false }, {});
+  sendPlaybackPostMassage({ code: "abortSYMN", data: false }, {});
 }
 
 // 更新时间线标签
@@ -207,27 +259,33 @@ function updateTimeLabel(ctime: any) {
   // 获取开始时间
   const startTimestamp = start.value.valueOf();
   // 获取时间差
-  const currentHourDiff = Math.floor((ctime - startTimestamp) / (3600000));
+  const currentHourDiff = Math.floor((ctime - startTimestamp) / 3600000);
   // 获取当前的marks键集合（即所有6小时整数倍的刻度值）
   const markKeys = Object.keys(dataRequestOpt.value).map(Number);
   const isDifferentValue = value.value !== currentHourDiff;
-  const is6HourInterval = props.activeMenu === '输运模拟' ? currentHourDiff % 3 === 0 : currentHourDiff % 1 === 0;
+  const is6HourInterval =
+    props.activeMenu === "输运模拟"
+      ? currentHourDiff % 3 === 0
+      : currentHourDiff % 1 === 0;
 
   // 仅当currentHourDiff是marks中的刻度值时，才更新滑块
   if (
-    currentHourDiff >= 0
+    currentHourDiff >= 0 &&
-    && currentHourDiff <= totalHours.value
+    currentHourDiff <= totalHours.value &&
     // && markKeys.includes(currentHourDiff) // 关键判断：是否为刻度值
-    && isDifferentValue // 只有值不同时才更新
+    isDifferentValue && // 只有值不同时才更新
-    && is6HourInterval
+    is6HourInterval
   ) {
     value.value = currentHourDiff;
     if (markKeys.includes(currentHourDiff)) {
       // 获取当前currentHourDiff在markKeys中的索引（第几个刻度）
       const currentIndex = markKeys.indexOf(currentHourDiff);
 
-      if (activeMoudleInf.activeMenu === '天气预报运算') {
+      if (activeMoudleInf.activeMenu === "天气预报运算") {
-        console.log(`获取第${currentIndex + 1}组数据,当前时间为`, dataRequestOpt.value[currentHourDiff]);
+        console.log(
+          `获取第${currentIndex + 1}组数据,当前时间为`,
+          dataRequestOpt.value[currentHourDiff]
+        );
         setWeathRequesTime(dataRequestOpt.value[currentHourDiff]);
         // 其他气象进行请求数据
         const params = { ...gisImgOpt };
@@ -238,8 +296,8 @@ function updateTimeLabel(ctime: any) {
 
         playbackSearchData(params, true, (res) => {
           // 往态势传递数据
-          EventBusTool.getEventBus().publish('playData', {
+          EventBusTool.getEventBus().publish("playData", {
-            key: 'addyctqjsGis',
+            key: "addyctqjsGis",
             data: res.result,
           });
         });
@@ -275,10 +333,12 @@ const speciesValueChange = () => {
   //   key: 'speciesId',
   //   data: { taskId: props.taskId, speciesId: speciesValue.value },
   // });
-  console.log(speciesValue.value,"2222")
+  console.log(speciesValue.value, "2222");
   sessionStorage.setItem("symnZxHsId", speciesValue.value);
 };
 
+const ssmnOption = ref({});
+
 // 监听 speciesList 变化（比如父组件异步获取数据后更新）
 watch(
   () => props.speciesList,
@@ -289,16 +349,15 @@ watch(
       speciesValue.value = newVal[0].value;
       sessionStorage.setItem("symnZxHsId", newVal[0].value);
 
-      EventBusTool.getEventBus().publish('speciesChange', {
+      EventBusTool.getEventBus().publish("speciesChange", {
-        key: 'speciesId',
+        key: "speciesId",
         data: { taskId: props.taskId, speciesId: newVal[0].value },
       });
-    }
+    } else {
-    else {
       speciesValue.value = null;
     }
   },
-  { deep: true }, // 深度监听数组变化（比如数组元素新增/替换）
+  { deep: true } // 深度监听数组变化（比如数组元素新增/替换）
 );
 
 // 监听 layer 变化
@@ -307,43 +366,64 @@ watch(
   (newVal: any) => {
     if (newVal.length > 0) {
       layerValue.value = newVal[0].value;
-    }
+    } else {
-    else {
       layerValue.value = null;
     }
   },
-  { deep: true },
+  { 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);
+  }
+  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) => {
+  EventBusTool.getEventBus().subscribe("timeSliderUi", (opt: any) => {
+    ssmnOption.value = JSON.parse(sessionStorage.getItem("ssmnDataItem"));
     switch (opt.key) {
-      case 'updateUi':// 更新时间
+      case "updateUi": // 更新时间
         updateTimeLabel(opt.time);
         break;
-      case 'setTime':// 更新起止时间
+      case "setTime": // 更新起止时间
         setStartAndEndTime(opt);
         isQueryData.value = true;
         break;
-      case 'playFalg':// 更行播放ui
+      case "playFalg": // 更行播放ui
         playFalg.value = opt.playFalg;
         if (!playFalg.value) {
           isQueryData.value = true;
         }
         break;
-      case 'isQueryData':// 更行播放ui
+      case "isQueryData": // 更行播放ui
         isQueryData.value = opt.value;
         break;
       default:
         break;
     }
   });
-  playback_EventBusCallback.subscribe('timeSliderUiData', (opt: any) => {
+  playback_EventBusCallback.subscribe("timeSliderUiData", (opt: any) => {
     switch (opt.key) {
-      case 'isDisabledSlider': // 动画轴是否禁用
+      case "isDisabledSlider": // 动画轴是否禁用
         isDisabledSlider.value = opt.value;
         break;
-      case 'playFalg':// 更行播放ui
+      case "playFalg": // 更行播放ui
         playFalg.value = opt.value;
         break;
       default:
@@ -354,47 +434,131 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="sliderDom"
+  <div
-    :style="{ width: props.widthPx ?? props.activeMenu === '天气预报运算' ? '65vw' : '68vw', left: props.leftPx ?? '320px' }">
+    class="sliderDom"
+    :style="{
+      width:
+        props.widthPx ?? props.activeMenu === '天气预报运算' ? '65vw' : '68vw',
+      left: props.leftPx ?? '320px',
+    }"
+  >
     <div v-if="props.activeMenu === '核事件模拟'" class="switchTabs">
-      <div class="left" :class="{ active: active === '浓度分布', disable: playFalg }" @click="switchActive('浓度分布')">
+      <div
+        class="left"
+        :class="{ active: active === '浓度分布', disable: playFalg }"
+        @click="switchActive('浓度分布')"
+      >
         浓度分布
       </div>
-      <div class="right" :class="{ active: active === '剂量分布', disable: playFalg }" @click="switchActive('剂量分布')">
+      <div
+        class="right"
+        :class="{ active: active === '剂量分布', disable: playFalg }"
+        @click="switchActive('剂量分布')"
+      >
         剂量分布
       </div>
     </div>
     <div v-if="isShowSelect" class="selectDom">
-      <el-select-v2 v-if="props.activeMenu === '核事件模拟'" v-model="layerValue" :disabled="!isQueryData"
+      <el-select-v2
-        :options="props.layerList" placeholder="请选择图层" style="width: 230px" />
+        v-if="props.activeMenu === '核事件模拟'"
-      <el-select-v2 v-if="props.activeMenu === '输运模拟' && speciesValue" v-model="speciesValue" :disabled="!isQueryData"
+        v-model="layerValue"
-        :options="props.speciesList" placeholder="请选择物种" style="width: 230px" @change="speciesValueChange" />
+        :disabled="!isQueryData"
+        :options="props.layerList"
+        placeholder="请选择图层"
+        style="width: 230px"
+      />
+      <el-select-v2
+        v-if="props.activeMenu === '输运模拟' && speciesValue"
+        v-model="speciesValue"
+        :disabled="!isQueryData"
+        :options="props.speciesList"
+        placeholder="请选择物种"
+        style="width: 230px"
+        @change="speciesValueChange"
+      />
     </div>
     <div v-if="isShowTabs" class="tabs">
-      <div v-for="(v, i) in tabsList" :key="i" class="tabItem" :class="{ active: v.isActive }" @click="switchTab(v)">
+      <div
+        v-for="(v, i) in tabsList"
+        :key="i"
+        class="tabItem"
+        :class="{ active: v.isActive }"
+        @click="switchTab(v)"
+      >
         {{ v.label }}
       </div>
     </div>
     <div class="icon" @click="playAnimation()">
-      <SvgIcon :name="!playFalg ? 'playAnimation' : 'zanting'" :title="!playFalg ? '播放' : '暂停'" width="34" height="34" />
+      <SvgIcon
+        :name="!playFalg ? 'playAnimation' : 'zanting'"
+        :title="!playFalg ? '播放' : '暂停'"
+        width="34"
+        height="34"
+      />
     </div>
-    <div v-if="props.activeMenu === '输运模拟' || props.activeMenu === '核事件模拟'" class="icon" @click="stopAnimation()">
+    <div
+      v-if="
+        props.activeMenu === '输运模拟' || props.activeMenu === '核事件模拟'
+      "
+      class="icon"
+      @click="stopAnimation()"
+    >
       <SvgIcon name="stop" title="停止" width="34" height="34" />
     </div>
-    <div class="slider">
+    <div class="slider" style="position: relative;">
-      <!-- <div style="color: white">value:{{ value }} ----- totalHours:{{ totalHours }}</div> -->
+      <!-- <div style="color: white">value:{{ start.format("YYYY-MM-DD HH:mm:ss") }} ----- totalHours:{{ end.format("YYYY-MM-DD HH:mm:ss") }}</div> -->
-      <el-slider v-model="value" :disabled="isDisabledSlider"
+      <div class="startTimes">{{ ssmnOption.taskMode==-1?ssmnOption.endTime:ssmnOption.startTime }}</div>
-        :style="{ width: isShowTabs ? (props.sliderWidth ?? '58vw') : '62vw' }" :max="totalHours"
+      <el-slider
-        :format-tooltip="slodtooltip" :marks="marks" @input="handleChange" />
+        v-model="value"
+        :disabled="isDisabledSlider"
+        :style="{ width: isShowTabs ? props.sliderWidth ?? '58vw' : '62vw' }"
+        :max="totalHours"
+        :format-tooltip="slodtooltip"
+        :show-tooltip="false"
+        :marks="marks"
+        @input="handleChange"
+      />
+      <div class="endTimes">{{ ssmnOption.taskMode==-1?ssmnOption.startTime:ssmnOption.endTime }}</div>
+      <div class="slider-label" :style="{ left: labelLeft + 'px' }" v-if="labelText">
+        {{ labelText }}
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="less" scoped>
+.slider-wrap {
+  margin-top: 30px; /* 留出标签空间，防止重叠 */
+}
+.slider-label {
+  position: absolute;
+  top: -28px;
+  background: #409eff;
+  color: #fff;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  transition: left 0.08s linear;
+}
+
+.startTimes{
+  position: absolute;
+  left: 0;
+  bottom: -10px;
+  color: #fff;
+}
+
+.endTimes{
+  position: absolute;
+  right: 0;
+  bottom: -10px;
+  color: #fff;
+}
 .switchTabs {
   width: 500px;
   height: 52px;
-  background: url('@/assets/img/tabsBg.png') no-repeat center center;
+  background: url("@/assets/img/tabsBg.png") no-repeat center center;
   background-size: 100% 100%;
   position: fixed;
   left: 50%;
@@ -409,7 +573,7 @@ onMounted(() => {
   .right {
     width: 141px;
     height: 30px;
-    background: url('@/assets/img/tabsBtn_default.png') no-repeat center center;
+    background: url("@/assets/img/tabsBtn_default.png") no-repeat center center;
     background-size: 100% 100%;
     text-align: center;
     line-height: 30px;
@@ -424,7 +588,7 @@ onMounted(() => {
   }
 
   .active {
-    background: url('@/assets/img/tabsBtn_active.png') no-repeat center center;
+    background: url("@/assets/img/tabsBtn_active.png") no-repeat center center;
     background-size: 100% 100%;
     color: rgb(42, 255, 223);
   }

src/pages/symn/index.vue

@@ -1892,49 +1892,7 @@ getStations();
         max-height="40vh"
         class="custom-table"
       >
-        <!-- 样品ID -->
+        <ElTableColumn prop="index" :label="t('deviceCode')" width="100">
-        <ElTableColumn :label="t('sampleId')">
-          <template #default="scope">
-            <el-input
-              v-model="scope.row.sampleId"
-              type="number"
-            />
-          </template>
-        </ElTableColumn>
-
-        <!-- 样品类型 -->
-        <ElTableColumn :label="t('sampleType')">
-          <template #default="scope">
-            <el-select
-              v-model="scope.row.sampleType"
-            >
-              <el-option
-                v-for="item in ['B','P']"
-                :key="item"
-                :label="item"
-                :value="item"
-              />
-            </el-select>
-          </template>
-        </ElTableColumn>
-
-        <!-- 样品级别 -->
-        <ElTableColumn :label="t('sampleLevel')">
-          <template #default="scope">
-            <el-select
-              v-model="scope.row.sampleCategory"
-            >
-              <el-option
-                v-for="item in [1,2,3,4,5]"
-                :key="item"
-                :label="item"
-                :value="item"
-              />
-            </el-select>
-          </template>
-        </ElTableColumn>
-
-        <ElTableColumn prop="index" :label="t('deviceCode')" width="130">
           <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;"-->
@@ -1959,8 +1917,8 @@ getStations();
           </template>
         </ElTableColumn>
 
-        <ElTableColumn prop="lon" :label="t('longitude')" />
+        <ElTableColumn prop="lon" :label="t('longitude')" width="90" />
-        <ElTableColumn prop="lat" :label="t('latitude')" />
+        <ElTableColumn prop="lat" :label="t('latitude')" width="90" />
         <ElTableColumn
           v-if="configForm.taskMode === -1"
           prop="index"
@@ -1991,13 +1949,54 @@ getStations();
             />
           </template>
         </ElTableColumn>
+        <!-- 样品ID -->
+        <ElTableColumn :label="t('sampleId')" width="80">
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.sampleId"
+              type="number"
+            />
+          </template>
+        </ElTableColumn>
+
+        <!-- 样品类型 -->
+        <ElTableColumn :label="t('sampleType')" width="80">
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.sampleType"
+            >
+              <el-option
+                v-for="item in ['B','P']"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </template>
+        </ElTableColumn>
+
+        <!-- 样品级别 -->
+        <ElTableColumn :label="t('sampleLevel')" width="80">
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.sampleCategory"
+            >
+              <el-option
+                v-for="item in [1,2,3,4,5]"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </template>
+        </ElTableColumn>
         <!-- <ElTableColumn :label="t('releaseAmount')">
             <template #default="scope">
               <el-input v-model="scope.row.releaseAmount" :placeholder="t('enterContent')" />
             </template>
           </ElTableColumn> -->
 
-        <ElTableColumn :label="t('operation')">
+        <ElTableColumn :label="t('operation')" width="90">
           <template #default="scope">
             <!--              <ElButton type="text" class="custom-text-btn" @click="editTask(scope.row, scope.$index)"> -->
             <!--                {{ t('edit') }} -->

src/utils/axios/fskjk/index.ts

@@ -1,7 +1,7 @@
 import { baseURL, serverIp } from "@/gis/common/config";
-import { ElMessage } from "element-plus";
+import { ElLoading, ElMessage } from "element-plus";
 import request from "@/utils/request"; // 复用已有的Axios请求实例
-
+import axios from "axios";
 /**
  * 生成任务所属GIF文件
  */
@@ -31,16 +31,36 @@ export async function downGifSsFile(
   params: any,
   callback?: (data: any) => void,
 ): Promise<any> {
-  const response = await request({
+  // 开启Loading，和你项目样式保持一致
+  const loadingInstance = ElLoading.service({
+    lock: true,
+    text: "Loading...",
+    background: "rgba(0, 0, 0, 0.7)",
+    target: document.querySelector(".base-layout"),
+  });
+  try {
+    const token = localStorage.getItem("token");
+    const fullResponse = await axios({
+      baseURL: serverIp,
       url: `${serverIp}${baseURL}/transportResult/downloadGif`,
       method: "GET",
       params,
       responseType: "blob",
+      timeout: 300000,
+      headers: {
+        "Content-Type": "application/json;charset=utf-8",
+        ...(token ? { "X-Access-Token": token } : {}),
+      },
     });
-  console.log(response, "22222222222222");
+    console.log(fullResponse, "完整响应");
-
+    callback?.(fullResponse);
-  // HTTP 200 = 文件流正常返回，直接执行下载回调
+  } catch (err) {
-  callback?.(response);
+    ElMessage.error("gif下载请求失败");
+    throw err;
+  } finally {
+    // 无论成功失败，一定关闭loading
+    loadingInstance.close();
+  }
 }
 
 /**