输运模拟滑块图例，天气预报运算预测任务第一帧不请求接口

src/components/Drawer/index.vue

@@ -41,6 +41,10 @@ function closeGis() {
     key: 'showLengend',
     value: false,
   });
+
+  playback_EventBusCallback.publish('newSymnLegendShow', {
+    flag:false,
+  });
   // 清空要素
   clearGridFeatures();
   sendPlaybackPostMassage({ code: 'abortSYMN', data: false }, {});

src/gis/worker/playbackWorkerMa.ts

@@ -106,15 +106,15 @@ export function initPlaybackWorkerMa(): void {
         setShouldAnimate(true);
 
         // 显示图例
-        playback_EventBusCallback.publish('legendUiData', {
+        // playback_EventBusCallback.publish('legendUiData', {
-          key: 'showLengend',
+        //   key: 'showLengend',
-          value: true,
+        //   value: true,
-        });
+        // });
         // 更改图例最大值
-        playback_EventBusCallback.publish('symnLegendUpdateMax', {
+        // playback_EventBusCallback.publish('symnLegendUpdateMax', {
-          maxValue,
+        //   maxValue,
-          minValue,
+        //   minValue,
-        });
+        // });
       }
         break;
       case 'drawSYMN':{ // 绘制输运模拟自定义热力图
@@ -142,10 +142,10 @@ export function initPlaybackWorkerMa(): void {
         // 加载自定义热力图
         addCustomGridLayer(gridData, maxValue, minValue);
         // 更改最大值
-        playback_EventBusCallback.publish('symnLegendUpdateMax', {
+        // playback_EventBusCallback.publish('symnLegendUpdateMax', {
-          maxValue,
+        //   maxValue,
-          minValue,
+        //   minValue,
-        });
+        // });
       }
         break;
       case 'querySYMNOneFail': // 输运模拟接口请求失败

src/layout/Container/index.vue

@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import type { mapPalyUiEvet } from '@/gis/ol/interface/common';
+import type { mapPalyUiEvet } from "@/gis/ol/interface/common";
-import { initMap } from '@/gis/ol/index';
+import { initMap } from "@/gis/ol/index";
-import { initOlListenHanlde } from '@/gis/ol/mapEventListen';
+import { initOlListenHanlde } from "@/gis/ol/mapEventListen";
-import { setShouldAnimate } from '@/gis/ol/olClock';
+import { setShouldAnimate } from "@/gis/ol/olClock";
 
-import { initPlaybackWorkerMa, playback_EventBusCallback } from '@/gis/worker/playbackWorkerMa';
+import {
-import { getResultGlobalAttr, getTaskSimulationSpecies } from '@/utils/axios/symn/index';
+  initPlaybackWorkerMa,
-import MapRightMenuEvent from './mapRightMenu.vue';
+  playback_EventBusCallback,
+} from "@/gis/worker/playbackWorkerMa";
+import {
+  getResultGlobalAttr,
+  getTaskSimulationSpecies,
+} from "@/utils/axios/symn/index";
+import MapRightMenuEvent from "./mapRightMenu.vue";
 
-import MapTimeSlider from './mapTimeSlider.vue';
+import MapTimeSlider from "./mapTimeSlider.vue";
-import MeteorologyMenu from './meteorologyMenu.vue';
+import MeteorologyMenu from "./meteorologyMenu.vue";
-import PollutionLegend from './pollutionLegend.vue';
+import PollutionLegend from "./pollutionLegend.vue";
-import SymnLegend from './symnLegend.vue';
+import SymnLegend from "./symnLegend.vue";
+import newSymnLegend from "./newSymnLegend.vue";
 
-import weathLength from './weathLength.vue';
+import weathLength from "./weathLength.vue";
 
 interface playUIEventOpt {
   activeMenu?: string;
@@ -41,6 +48,9 @@ const legengUIFalg = ref<boolean>(false);
 const legengUIObj = ref<any>(null);
 // 输运模拟图例UI标识
 const symnUIFalg = ref<boolean>(false);
+
+// 新绘制的输运模拟图例组件
+const newSymnUIFalg = ref<boolean>(false);
 // 气象图例标识
 const weathLengthUIFalg = ref<any>(false);
 const weathLengthUIObj = ref<any>(null);
@@ -48,21 +58,23 @@ const weathLengthUIObj = ref<any>(null);
 // 气象菜单UI标识
 const meteorologyUIFalg = ref<boolean>(false);
 
+const startExp = ref(0);
+
 // gis动画UI事件
 const playUIEvents: any = {
   start(menuInf: playUIEventOpt) {
     animationUIFalg.value = true;
     activeMenu.value = menuInf.activeMenu;
     // 天气预报运算模块下显示气象菜单
-    if (menuInf.activeMenu === '天气预报运算') {
+    if (menuInf.activeMenu === "天气预报运算") {
       meteorologyUIFalg.value = true;
       // 隐藏tabs页
       isShowTabs.value = false;
     }
-    if (menuInf.activeMenu === '数据分析') {
+    if (menuInf.activeMenu === "数据分析") {
       setShouldAnimate(true);
     }
-    if (menuInf.activeMenu === '输运模拟') {
+    if (menuInf.activeMenu === "输运模拟") {
       // 隐藏tabs页
       isShowTabs.value = false;
       // 显示下拉菜单
@@ -77,29 +89,32 @@ const playUIEvents: any = {
       if (menuInf.eventOpt.task.taskMode === 1) {
         // 获取回放前置条件参数
         getTaskSimulationSpecies({ taskId: taskId.value }, (res: any) => {
-          speciesList.value = Object.entries(res).map(([key, item]: [string | number, any]) => {
+          speciesList.value = Object.entries(res).map(
+            ([key, item]: [string | number, any]) => {
               return {
                 label: item, // 原 value 作为显示文本
                 value: key, // 原 key 作为绑定值
               };
-          });
-        });
             }
-      else {
+          );
+        });
+      } else {
         speciesList.value = [];
       }
     }
-    if (menuInf.activeMenu === '核事件模拟') {
+    if (menuInf.activeMenu === "核事件模拟") {
       taskId.value = menuInf.eventOpt.task.id;
       // 隐藏tabs页
       isShowTabs.value = false;
       // 显示下拉菜单
       isShowSelect.value = true;
       // 图层选项
-      layerList.value = [{
+      layerList.value = [
+        {
           label: `0`,
-        value: '0',
+          value: "0",
-      }];
+        },
+      ];
     }
   },
   stop() {
@@ -110,6 +125,9 @@ const playUIEvents: any = {
     symnUIFalg.value = false;
     isShowTabs.value = true;
     isShowSelect.value = false;
+
+
+    newSymnUIFalg.value = false;
   },
   showLegeng(opt?: any) {
     legengUIFalg.value = true;
@@ -147,12 +165,12 @@ const playUIEvents: any = {
 
 onMounted(() => {
   // 初始化二维地图实例
-  initMap('olContainer');
+  initMap("olContainer");
   initOlListenHanlde();
 
   // 主题其它模块与gis交互全局事件
   const eventBus: any = EventBusTool.getEventBus();
-  eventBus.subscribe('playUI', (opt: mapPalyUiEvet) => {
+  eventBus.subscribe("playUI", (opt: mapPalyUiEvet) => {
     playUIEvents[opt.key] && playUIEvents[opt.key](opt);
   });
 
@@ -160,15 +178,25 @@ onMounted(() => {
     // 初始化worker
     initPlaybackWorkerMa();
   });
-  playback_EventBusCallback.subscribe('legendUiData', (opt: any) => {
+  playback_EventBusCallback.subscribe("legendUiData", (opt: any) => {
     switch (opt.key) {
-      case 'showLengend': // 动画轴是否禁用
+      case "showLengend": // 动画轴是否禁用
         symnUIFalg.value = opt.value;
         break;
       default:
         break;
     }
   });
+
+  playback_EventBusCallback.subscribe("newSymnLegendShow", (opt: any) => {
+    newSymnUIFalg.value = opt.flag;
+
+    if(opt.flag){
+      startExp.value = opt.startExp;
+    }else{
+      startExp.value = 0;
+    }
+  });
 });
 </script>
 
@@ -177,8 +205,17 @@ onMounted(() => {
     <MapRightMenuEvent />
     <PollutionLegend v-show="legengUIFalg" ref="legengUIObj" />
     <SymnLegend v-show="symnUIFalg" />
-    <MapTimeSlider v-show="animationUIFalg" :is-show-tabs="isShowTabs" :is-show-select="isShowSelect" :task-id="taskId"
+    <newSymnLegend v-show="newSymnUIFalg" :startExp="startExp"></newSymnLegend>
-      :species-list="speciesList" :active-menu="activeMenu" :global-attr="globalAttr" :layer-list="layerList" />
+    <MapTimeSlider
+      v-show="animationUIFalg"
+      :is-show-tabs="isShowTabs"
+      :is-show-select="isShowSelect"
+      :task-id="taskId"
+      :species-list="speciesList"
+      :active-menu="activeMenu"
+      :global-attr="globalAttr"
+      :layer-list="layerList"
+    />
     <MeteorologyMenu v-show="meteorologyUIFalg" />
     <weathLength v-show="weathLengthUIFalg" ref="weathLengthUIObj" />
   </div>

src/layout/Container/mapTimeSlider.vue

@@ -242,6 +242,10 @@ function stopAnimation() {
     key: "showLengend",
     value: false,
   });
+
+  playback_EventBusCallback.publish("newSymnLegendShow", {
+    flag: false,
+  });
   // 清空要素
   clearGridFeatures();
   clearHeatmapLayer();
@@ -272,13 +276,20 @@ function updateTimeLabel(ctime: any) {
 
   // 仅当currentHourDiff是marks中的刻度值时，才更新滑块
   if (
-    (currentHourDiff >= 0 &&
+    (currentHourDiff > 0 &&
       currentHourDiff <= totalHours.value &&
       // && markKeys.includes(currentHourDiff) // 关键判断：是否为刻度值
       isDifferentValue && // 只有值不同时才更新
-    is6HourInterval)||!_isPlayFirstFrame.value
+      is6HourInterval) ||
+    !_isPlayFirstFrame.value ||
+    (currentHourDiff == 0 &&
+      tqybysTabValue.value != "预测任务" &&
+      currentHourDiff <= totalHours.value &&
+      // && markKeys.includes(currentHourDiff) // 关键判断：是否为刻度值
+      isDifferentValue && // 只有值不同时才更新
+      is6HourInterval)
   ) {
-    _isPlayFirstFrame.value = true
+    _isPlayFirstFrame.value = true;
     value.value = currentHourDiff;
     if (markKeys.includes(currentHourDiff)) {
       // 获取当前currentHourDiff在markKeys中的索引（第几个刻度）
@@ -308,20 +319,20 @@ function updateTimeLabel(ctime: any) {
           EventBusTool.getEventBus().publish("playData", {
             key: "addyctqjsGis",
             data: res,
-            weatherType:params.weatherType
+            weatherType: params.weatherType,
           });
         });
         // // 判定风场数据
-        if (weathFlag[3] === true&&gisImgOpt.weatherType!=3) {
+        if (weathFlag[3] === true && gisImgOpt.weatherType != 3) {
           const params1 = { ...params, weatherType: 3 };
           delete params1.key;
           delete params1.endTime;
           playbackSearchData(params1, true, (res) => {
             // 往态势传递数据
-            EventBusTool.getEventBus().publish('playData', {
+            EventBusTool.getEventBus().publish("playData", {
-              key: 'addyctqjsGis',
+              key: "addyctqjsGis",
               data: res,
-              weatherType:3
+              weatherType: 3,
             });
           });
         }
@@ -350,6 +361,8 @@ const speciesValueChange = () => {
 
 const ssmnOption = ref({});
 
+const tqybysTabValue = ref("预测任务");
+
 // 监听 speciesList 变化（比如父组件异步获取数据后更新）
 watch(
   () => props.speciesList,
@@ -448,7 +461,12 @@ onMounted(() => {
 
   EventBusTool.getEventBus().subscribe("updateHfKsFlag", (opt: any) => {
     _isPlayFirstFrame.value = opt;
-    labelText.value = ""
+    labelText.value = "";
+  });
+
+  EventBusTool.getEventBus().subscribe("updateTqybysTabValue", (opt: any) => {
+    tqybysTabValue.value = opt.value;
+    console.log(tqybysTabValue.value, "21321");
   });
 });
 </script>

src/layout/Container/newSymnLegend.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { watch } from "vue";
+// 10组：颜色 + 对应刻度，从上到下顺序
+const colorList = ref([]);
+
+// [
+//   { color: "#991a20", label: "10⁴" },
+//   { color: "#e63920", label: "10²" },
+//   { color: "#ffc125", label: "10⁰" },
+//   { color: "#ffdd55", label: "10⁻¹" },
+//   { color: "#207830", label: "10⁻²" },
+//   { color: "#42b883", label: "10⁻³" },
+//   { color: "#72c8dd", label: "10⁻⁴" },
+//   { color: "#b4d8e8", label: "10⁻⁵" },
+//   { color: "#e2ccb0", label: "10⁻⁶" },
+//   { color: "#f0e8dd", label: "10⁻⁷" },
+// ];
+
+const colorArr = [
+  "bisque",
+  "tan",
+  "lightblue",
+  "dodgerblue",
+  "lightgreen",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "darkred",
+];
+
+const props = defineProps({
+  startExp: {
+    type: Number,
+    required: true,
+  },
+});
+
+watch(
+  () => props.startExp, // 函数写法，监听props属性（推荐）
+  (newVal, oldVal) => {
+    console.log("父组件传过来的值变化了", newVal, oldVal);
+    // 在这里写你的业务：生成10个对数刻度、重新渲染图表等
+    handleGenTicks(newVal);
+  },
+  { immediate: true } // immediate:true 组件初始化时立刻执行一次，非常常用！
+);
+
+function handleGenTicks(maxVal) {
+  console.log("执行生成刻度", maxVal);
+  colorList.value = [];
+  colorArr.forEach((item, index) => {
+    let item1 = {
+      color: item,
+      label: maxVal - index,
+    };
+
+    colorList.value.push(item1);
+  });
+}
+</script>
+
+<template>
+  <div class="legend-wrap">
+    <!-- 颜色条：10个色块 -->
+    <div class="color-bar">
+      <div
+        v-for="(item, index) in colorList"
+        :key="index"
+        class="color-item"
+        :style="{ backgroundColor: item.color }"
+      ></div>
+    </div>
+    <!-- 刻度：10个，一一对应每个色块 -->
+    <div class="ticks">
+      <span v-for="(item, index) in colorList" :key="index"
+        >10<sup>{{ item.label }}</sup></span
+      >
+      <span
+        >10<sup>{{ startExp - 10 }}</sup></span
+      >
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.legend-wrap {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  position: absolute;
+  right: 70px;
+  bottom: 40px;
+  z-index: 10;
+  color: #fff;
+}
+
+.color-bar {
+  width: 24px;
+  height: 320px;
+  display: flex;
+  flex-direction: column;
+  margin-right: 5px;
+}
+
+.color-item {
+  flex: 1;
+}
+
+.ticks {
+  height: 330px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-size: 14px;
+  font-family: sans‑serif;
+  position: absolute;
+  right: -30px;
+  bottom: -3px;
+}
+</style>

src/pages/symn/index.vue

@@ -32,13 +32,17 @@ import {
   importFile,
   pinToTop,
   unpin,
+  getTaskSimulationNuclide,
 } from "@/utils/axios/symn";
 import fhdfx from "./compliance/index.vue";
 import gxfx from "./contribution/index.vue";
 import log from "./log/index.vue";
 import sxfx from "./timingAnalysis/index.vue";
+import { playback_EventBusCallback } from "@/gis/worker/playbackWorkerMa";
 import { activeMoudleInf } from "@/gis/ol";
 
+import { getRwNcMaxValue } from "@/utils/axios/fskjk";
+
 const { t, locale } = useI18n();
 const formEl = ref<FormInstance>();
 const dialogVisible = ref(true);
@@ -290,6 +294,41 @@ const pinToTopTask = (row: any, isPin: boolean) => {
 function viewTask(task: any) {
   console.log("查看任务：", task);
 
+  if (task.taskMode == 1) {
+    getTaskSimulationNuclide({ taskId: task.id }, (res: any) => {
+      const keys = Object.keys(res);
+      const values = Object.values(res);
+      let arr = [];
+      console.log("res", res);
+      keys.map((item, index) => {
+        arr.push({
+          name: values[index],
+          id: keys[index],
+        });
+      });
+      if (arr.length) {
+        getRwNcMaxValue({ taskId: task.id, speciesId: arr[0].id }, (res) => {
+          console.log(res, "21234");
+          const startExp = Math.ceil(Math.log10(res.result));
+
+          playback_EventBusCallback.publish("newSymnLegendShow", {
+            flag: true,
+            startExp,
+          });
+        });
+      }
+    });
+  } else {
+    getRwNcMaxValue({ taskId: task.id }, (res) => {
+      const startExp = Math.ceil(Math.log10(res.result));
+
+      playback_EventBusCallback.publish("newSymnLegendShow", {
+        flag: true,
+        startExp,
+      });
+    });
+  }
+
   if (task.taskMode == -1 && sessionStorage.getItem("symnZxHsId")) {
     sessionStorage.removeItem("symnZxHsId");
   }
@@ -299,6 +338,7 @@ function viewTask(task: any) {
   form.value = {
     ...task,
   };
+
   drawerVisible.value = true;
   // if (task.taskStatus === 2) {
   // 测试代码
@@ -1952,21 +1992,16 @@ getStations();
         <!-- 样品ID -->
         <ElTableColumn :label="t('sampleId')" width="95">
           <template #default="scope">
-            <el-input
+            <el-input v-model="scope.row.sampleId" type="number" />
-              v-model="scope.row.sampleId"
-              type="number"
-            />
           </template>
         </ElTableColumn>
 
         <!-- 样品类型 -->
         <ElTableColumn :label="t('sampleType')" width="80">
           <template #default="scope">
-            <el-select
+            <el-select v-model="scope.row.sampleType">
-              v-model="scope.row.sampleType"
-            >
               <el-option
-                v-for="item in ['B','P']"
+                v-for="item in ['B', 'P']"
                 :key="item"
                 :label="item"
                 :value="item"
@@ -1978,11 +2013,9 @@ getStations();
         <!-- 样品级别 -->
         <ElTableColumn :label="t('sampleLevel')" width="80">
           <template #default="scope">
-            <el-select
+            <el-select v-model="scope.row.sampleCategory">
-              v-model="scope.row.sampleCategory"
-            >
               <el-option
-                v-for="item in [1,2,3,4,5]"
+                v-for="item in [1, 2, 3, 4, 5]"
                 :key="item"
                 :label="item"
                 :value="item"

src/pages/tqybjs/index.vue

@@ -28,6 +28,19 @@ watch(drawerVisible, (newValue) => {
   }
 });
 
+
+watch(
+  () => tabActive.value, // 函数写法，监听props属性（推荐）
+  (newVal, oldVal) => {
+    console.log('父组件传过来的值变化了', newVal, oldVal)
+    // 更新天气预报运算teb的值
+    EventBusTool.getEventBus().publish('updateTqybysTabValue', {
+      value:newVal,
+    });
+  },
+  { immediate: true } // immediate:true 组件初始化时立刻执行一次，非常常用！
+)
+
 // function handleSendData(data: any) {
 //   console.log('选中的回放数据,需要传至gis --->', data);
 //   // 往态势传递数据
@@ -152,6 +165,9 @@ function initCharts(data: any) {
     Chart.setOption(option);
   }
 }
+
+
+
 onMounted(() => {
   EventBusTool.getEventBus().subscribe('tqybjsUiEvent', (opt: any) => {
     console.log('timeBatch', opt);

src/utils/axios/fskjk/index.ts

@@ -98,3 +98,19 @@ export async function getHcQxData(
     callback?.(response);
   }
 } 
+
+//  获取任务NC文件最大值
+export async function getRwNcMaxValue(
+  params: any,
+  callback?: (data: any) => void,
+): Promise<any> {
+  const response = await request({
+    url: `${serverIp}${baseURL}/transportResult/getNCResultGlobalMaximum`,
+    method: "GET",
+    params,
+  });
+
+  if (response.success && response.code === 200) {
+    callback?.(response);
+  }
+}