From aaab4fc9846315eb41b0cc3f67a38f0827864bde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=86=AF=E5=B0=91=E5=BA=B7?= <2496371772@qq.com>
Date: Tue, 4 Aug 2026 09:28:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90=EF=BC=8C?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=9C=80=E5=90=8E=E4=B8=80=E5=88=BB=E7=9A=84?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/sjfx/one/index.vue | 372 +++++++++++++++++++++--------------
 1 file changed, 220 insertions(+), 152 deletions(-)

diff --git a/src/pages/sjfx/one/index.vue b/src/pages/sjfx/one/index.vue
index 65fda1e0..db5473f8 100644
--- a/src/pages/sjfx/one/index.vue
+++ b/src/pages/sjfx/one/index.vue
@@ -1,27 +1,34 @@
 <script setup lang='ts'>
-import type { FormInstance, FormRules } from 'element-plus';
-import { Search } from '@element-plus/icons-vue';
-import dayjs from 'dayjs';
-import { ElMessage } from 'element-plus';
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import JulianDate from '@/gis/common/clock/JulianData/JulianDate';
-import { initMap2D } from '@/gis/ol/map';
-import { removeClockOnTickEvent, setAnimationTime, setClockOnTickEvent, setcurrentTime, setMultiplier, setShouldAnimate } from '@/gis/ol/olClock';
-import { SjfxPointHandle } from '@/gis/ol/olSJFX';
-import MapRightMenuEvent from '@/layout/Container/mapRightMenu.vue';
-import { getSampleMonitor } from '@/utils/axios/sjfx';
+import type { FormInstance, FormRules } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import dayjs from "dayjs";
+import { ElMessage } from "element-plus";
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import JulianDate from "@/gis/common/clock/JulianData/JulianDate";
+import { initMap2D } from "@/gis/ol/map";
+import {
+  removeClockOnTickEvent,
+  setAnimationTime,
+  setClockOnTickEvent,
+  setcurrentTime,
+  setMultiplier,
+  setShouldAnimate,
+} from "@/gis/ol/olClock";
+import { SjfxPointHandle } from "@/gis/ol/olSJFX";
+import MapRightMenuEvent from "@/layout/Container/mapRightMenu.vue";
+import { getSampleMonitor } from "@/utils/axios/sjfx";
 
 const { t } = useI18n();
 // gis地图功能实例存储
 const sjfxPointHandle = ref<SjfxPointHandle | null>(null);
 const sampleTypeList = ref<any>([
-  { label: '颗粒物', value: 'P' },
-  { label: '惰性气体', value: 'B' },
+  { label: "颗粒物", value: "P" },
+  { label: "惰性气体", value: "B" },
 ]);
 const dataSourceList = ref<any>([
-  { label: '自动处理', value: '1' },
-  { label: '交互分析', value: '2' },
+  { label: "自动处理", value: "1" },
+  { label: "交互分析", value: "2" },
 ]);
 const form = ref<any>({
   // sampleType: 'P',
@@ -32,16 +39,26 @@ const form = ref<any>({
 });
 const formRef = ref<FormInstance>();
 const rules = reactive<FormRules<any>>({
-  sampleType: [{ required: true, message: '请选择样品类型', trigger: 'change' }],
-  dataSource: [{ required: true, message: '请选择数据来源', trigger: 'change' }],
-  createTime: [{ required: true, message: '请选择创建时间范围', trigger: 'change', validator: (rule, value, callback) => {
-    if (!value || value.length === 0) {
-      callback(new Error('请选择创建时间范围'));
-    }
-    else {
-      callback();
-    }
-  } }],
+  sampleType: [
+    { required: true, message: "请选择样品类型", trigger: "change" },
+  ],
+  dataSource: [
+    { required: true, message: "请选择数据来源", trigger: "change" },
+  ],
+  createTime: [
+    {
+      required: true,
+      message: "请选择创建时间范围",
+      trigger: "change",
+      validator: (rule, value, callback) => {
+        if (!value || value.length === 0) {
+          callback(new Error("请选择创建时间范围"));
+        } else {
+          callback();
+        }
+      },
+    },
+  ],
 });
 
 interface TimeListData {
@@ -55,7 +72,7 @@ interface StationBaseData {
   lon: string;
   lat: string;
 }
-const searchResultBaseData = ref<StationBaseData[]>([]);  
+const searchResultBaseData = ref<StationBaseData[]>([]);
 
 // 滑块数据
 const sliderValue = ref(0);
@@ -63,39 +80,35 @@ const sliderStart = ref<dayjs.Dayjs | null>(null);
 const sliderEnd = ref<dayjs.Dayjs | null>(null);
 const sliderMarks = computed(() => {
   const obj: Record<number, string> = {};
-  if (!sliderStart.value || !sliderEnd.value)
-    return obj;
+  if (!sliderStart.value || !sliderEnd.value) return obj;
 
-  const totalDays = Math.max(sliderEnd.value.diff(sliderStart.value, 'day'), 0);
+  const totalDays = Math.max(sliderEnd.value.diff(sliderStart.value, "day"), 0);
   // 计算刻度间隔：总天数越多，间隔越大（确保最多显示10个刻度，避免重叠）
   const interval = Math.max(Math.ceil(totalDays / 10), 1); // 最小间隔为1
 
   for (let i = 0; i <= totalDays; i++) {
     // 只显示间隔倍数的刻度（如i=0,3,6...）
     if (i % interval === 0) {
-      const date = sliderStart.value.add(i, 'day');
-      obj[i] = date.format('MM-DD'); // 简化日期格式（只显示月-日，节省空间）
+      const date = sliderStart.value.add(i, "day");
+      obj[i] = date.format("MM-DD"); // 简化日期格式（只显示月-日，节省空间）
     }
   }
   return obj;
 });
 const sliderMax = computed(() => {
-  if (!sliderStart.value || !sliderEnd.value)
-    return 0;
-  return Math.max(sliderEnd.value.diff(sliderStart.value, 'day'), 0);
+  if (!sliderStart.value || !sliderEnd.value) return 0;
+  return Math.max(sliderEnd.value.diff(sliderStart.value, "day"), 0);
 });
 
 // 6. 滑块变化回调
 function handleChange(value: number) {
-  const currentTime = sliderStart.value?.add(value, 'day');
+  const currentTime = sliderStart.value?.add(value, "day");
   setcurrentTime(currentTime?.valueOf());
-  console.log('当前选中：', sliderMarks.value[value]);
 }
 
 function setTime(val: any[]) {
   form.value.startDate = val[0];
   form.value.endDate = val[1];
-  console.log(val);
 }
 
 // 其他代码保持不变...
@@ -103,37 +116,43 @@ const currentPickervalue = ref<Date | null>(null); // 明确类型为Date或null
 const showCalendar = ref(false); // 控制日历显示隐藏
 const showSilder = ref(false); // 控制时间轴显示隐藏
 const playFalg = ref<boolean>(false);
-const flagMaxRunHandle = ref<boolean>(false);//判断是否已经到了最大值
+const flagMaxRunHandle = ref<boolean>(false); //判断是否已经到了最大值
 
-const checkBoxList = ref([{
-  isCheck: true,
-  label: '级别1',
-  color: '#1569c7',
-  isMargin: true,
-  key: 'level1',
-}, {
-  isCheck: true,
-  label: '级别2',
-  color: '#008000',
-  isMargin: true,
-  key: 'level2',
-}, {
-  isCheck: true,
-  label: '级别3',
-  color: '#ffff00',
-  key: 'level3',
-}, {
-  isCheck: true,
-  label: '级别4',
-  color: '#ff9933',
-  isMargin: true,
-  key: 'level4',
-}, {
-  isCheck: true,
-  label: '级别5',
-  color: '#ff0000',
-  key: 'level5',
-}]);
+const checkBoxList = ref([
+  {
+    isCheck: true,
+    label: "级别1",
+    color: "#1569c7",
+    isMargin: true,
+    key: "level1",
+  },
+  {
+    isCheck: true,
+    label: "级别2",
+    color: "#008000",
+    isMargin: true,
+    key: "level2",
+  },
+  {
+    isCheck: true,
+    label: "级别3",
+    color: "#ffff00",
+    key: "level3",
+  },
+  {
+    isCheck: true,
+    label: "级别4",
+    color: "#ff9933",
+    isMargin: true,
+    key: "level4",
+  },
+  {
+    isCheck: true,
+    label: "级别5",
+    color: "#ff0000",
+    key: "level5",
+  },
+]);
 
 // 禁用逻辑
 function disableDateRange(date: Date) {
@@ -163,12 +182,10 @@ function disableDateRange(date: Date) {
 // 获取搜索数据
 function getData() {
   const formEl = formRef.value;
-  if (!formEl)
-    return;
+  if (!formEl) return;
   formEl.validate((valid, fields) => {
     if (valid) {
       getSampleMonitor(form.value, (res) => {
-        console.log(res, '样品监测结果数据');
         // 显示日历
         if (res.result.stationInfo.length) {
           showCalendar.value = true;
@@ -181,12 +198,11 @@ function getData() {
           // 基础数据赋值（原有逻辑保留）
           searchResultBaseData.value = res.result.stationInfo;
           searchResultTimeListData.value = res.result.sampleMonitorResultList;
-          initStationLevelCount.value = res.result.stationLevelCount
-          initPointSt()
-        }
-        else {
+          initStationLevelCount.value = res.result.stationLevelCount;
+          initPointSt();
+        } else {
           ElMessage({
-            type: 'error',
+            type: "error",
             message: `未查询到数据，请重试！`,
           });
         }
@@ -196,8 +212,8 @@ function getData() {
 }
 
 // 初始化赋值上图
-function initPointSt(){
-  const currentList = initStationLevelCount.value||[];
+function initPointSt() {
+  const currentList = initStationLevelCount.value || [];
   const data: any = [];
   currentList.forEach((item: any) => {
     const find = searchResultBaseData.value.find((v) => {
@@ -209,11 +225,15 @@ function initPointSt(){
         longitude: find.lon,
         latitude: find.lat,
         label: find.stationCode,
-        level: item.categoryCount ? JSON.parse(JSON.stringify(item.categoryCount)) : {},
+        level: item.categoryCount
+          ? JSON.parse(JSON.stringify(item.categoryCount))
+          : {},
       });
     }
   });
-  const noCheckData = checkBoxList.value.filter((item: any) => !item.isCheck).map((item: any) => item.key);
+  const noCheckData = checkBoxList.value
+    .filter((item: any) => !item.isCheck)
+    .map((item: any) => item.key);
   data.forEach((item: any) => {
     Object.keys(item.level).forEach((levelKey) => {
       // 如果该键在未勾选列表中，则删除
@@ -223,8 +243,6 @@ function initPointSt(){
     });
   });
 
-  console.log(data);
-
   sjfxPointHandle.value?.addPoints(data);
 }
 
@@ -260,12 +278,17 @@ function resetHandle() {
 
   playFalg.value = false;
   showSilder.value = false;
+  flagMaxRunHandle.value = false;
   setShouldAnimate(false);
 }
 
 // 根据选中值获取当前的数据
 function getTimeDataFromDate(date: string) {
-  console.log(date,"222222")
+  const ymd = sliderEnd.value.format("YYYY-MM-DD");
+
+  if (date == ymd && !flagMaxRunHandle.value) {
+    flagMaxRunHandle.value = true;
+  }
   const currentList = searchResultTimeListData.value[date];
   const data: any = [];
   currentList.forEach((item: any) => {
@@ -278,11 +301,15 @@ function getTimeDataFromDate(date: string) {
         longitude: find.lon,
         latitude: find.lat,
         label: find.stationCode,
-        level: item.categoryCount ? JSON.parse(JSON.stringify(item.categoryCount)) : {},
+        level: item.categoryCount
+          ? JSON.parse(JSON.stringify(item.categoryCount))
+          : {},
       });
     }
   });
-  const noCheckData = checkBoxList.value.filter((item: any) => !item.isCheck).map((item: any) => item.key);
+  const noCheckData = checkBoxList.value
+    .filter((item: any) => !item.isCheck)
+    .map((item: any) => item.key);
   data.forEach((item: any) => {
     Object.keys(item.level).forEach((levelKey) => {
       // 如果该键在未勾选列表中，则删除
@@ -292,16 +319,20 @@ function getTimeDataFromDate(date: string) {
     });
   });
 
-  console.log(data);
-
   sjfxPointHandle.value?.addPoints(data);
+
+  if (flagMaxRunHandle.value) {
+    playFalg.value = false;
+    // showSilder.value = false;
+    setShouldAnimate(false);
+  }
 }
 
 // 关闭日历
 function closeCalendar() {
   showCalendar.value = false;
-  EventBusTool.getEventBus().publish('mapRightMenuUIEvent', {
-    key: 'calendar',
+  EventBusTool.getEventBus().publish("mapRightMenuUIEvent", {
+    key: "calendar",
     falg: false,
   });
   // sjfxPointHandle.value?.clearPoints();
@@ -309,43 +340,28 @@ function closeCalendar() {
 
 // 监听选中值变化
 watch(currentPickervalue, (newDate) => {
-  console.log(newDate);
-
   if (newDate) {
     const date = dayjs(newDate);
-    const ymd = date.format('YYYY-MM-DD');
+    const ymd = date.format("YYYY-MM-DD");
     // 计算当前日期对应滑块的位置（距离 start 的天数差）
-    const sliderVal = Math.max(date.diff(sliderStart.value, 'day'), 0);
+    const sliderVal = Math.max(date.diff(sliderStart.value, "day"), 0);
     // 同步滑块值（避免超出 max）
     sliderValue.value = Math.min(sliderVal, sliderMax.value);
-
-    console.log(sliderVal,sliderValue.value,sliderMax.value,"12121")
-
-    if((sliderVal==sliderMax.value&&!flagMaxRunHandle)){
-      flagMaxRunHandle.value = true;
-      getTimeDataFromDate(ymd);
-    }else if(sliderVal!=sliderMax.value){
-      getTimeDataFromDate(ymd);
-    }else{
-      playFalg.value = false;
-      // showSilder.value = false;
-      setShouldAnimate(false);
-    }
-  }
-  else {
-    console.log('取消了日期选中');
+    getTimeDataFromDate(ymd);
+  } else {
+    console.log("取消了日期选中");
   }
 });
 
 onMounted(() => {
   // 初始化二维地图实例
-  initMap2D('sjfxOlContainer');
+  initMap2D("sjfxOlContainer");
   sjfxPointHandle.value = new SjfxPointHandle();
 
   nextTick(() => {
     // 注册业务帧回调函数
     setClockOnTickEvent({
-      key: '数据分析',
+      key: "数据分析",
       callback(timeClock: any) {
         if (timeClock.shouldAnimate) {
           const timestamp = JulianDate.toDate(timeClock.currentTime);
@@ -354,9 +370,7 @@ onMounted(() => {
       },
     });
 
-    
-
-    EventBusTool.getEventBus().subscribe('sjfxCalendarEvent', (res: any) => {
+    EventBusTool.getEventBus().subscribe("sjfxCalendarEvent", (res: any) => {
       showCalendar.value = res.falg;
     });
   });
@@ -364,24 +378,39 @@ onMounted(() => {
 
 // 组件即将销毁时执行清理
 onUnmounted(() => {
-  removeClockOnTickEvent('数据分析');
+  removeClockOnTickEvent("数据分析");
 });
 </script>
 
 <template>
   <div class="sjfx-one-content">
     <div class="head">
-      <el-form ref="formRef" :model="form" label-width="100px" class="queryForm" :rules="rules">
+      <el-form
+        ref="formRef"
+        :model="form"
+        label-width="100px"
+        class="queryForm"
+        :rules="rules"
+      >
         <el-row :gutter="10">
           <el-col :span="6">
             <el-form-item :label="t('sampleType')" prop="sampleType">
               <el-select
-                v-model="form.sampleType" :placeholder="t('pleaseSelect')" style="width: 160px;"
+                v-model="form.sampleType"
+                :placeholder="t('pleaseSelect')"
+                style="width: 160px"
                 popper-style="background-color: transparent;border: solid 1px #0da397;width:100px;overflow: hidden;border-radius: 0;"
               >
                 <el-option
-                  v-for="item in sampleTypeList" :key="item.value"
-                  style="background-color: transparent; height: 30px;color: #fff;" :label="item.label" :value="item.value"
+                  v-for="item in sampleTypeList"
+                  :key="item.value"
+                  style="
+                    background-color: transparent;
+                    height: 30px;
+                    color: #fff;
+                  "
+                  :label="item.label"
+                  :value="item.value"
                 />
               </el-select>
             </el-form-item>
@@ -399,12 +428,21 @@ onUnmounted(() => {
           <el-col :span="6">
             <el-form-item :label="t('dataSource')" prop="dataSource">
               <el-select
-                v-model="form.dataSource" :placeholder="t('pleaseSelect')" style="width: 160px;"
+                v-model="form.dataSource"
+                :placeholder="t('pleaseSelect')"
+                style="width: 160px"
                 popper-style="background-color: transparent;border: solid 1px #0da397;width:100px;overflow: hidden;border-radius: 0;"
               >
                 <el-option
-                  v-for="item in dataSourceList" :key="item.value"
-                  style="background-color: transparent; height: 30px;color: #fff;" :label="item.label" :value="item.value"
+                  v-for="item in dataSourceList"
+                  :key="item.value"
+                  style="
+                    background-color: transparent;
+                    height: 30px;
+                    color: #fff;
+                  "
+                  :label="item.label"
+                  :value="item.value"
                 />
               </el-select>
             </el-form-item>
@@ -413,16 +451,23 @@ onUnmounted(() => {
           <el-col :span="8">
             <el-form-item :label="t('createTime')" prop="createTime">
               <el-date-picker
-                v-model="form.createTime" unlink-panels type="daterange" :default-time="new Date()"
-                range-separator="--" :start-placeholder="t('startDate')" :end-placeholder="t('endDate')"
-                value-format="YYYY-MM-DD" style="width: 100%;" @change="setTime"
+                v-model="form.createTime"
+                unlink-panels
+                type="daterange"
+                :default-time="new Date()"
+                range-separator="--"
+                :start-placeholder="t('startDate')"
+                :end-placeholder="t('endDate')"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+                @change="setTime"
               />
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item>
               <el-button :icon="Search" @click="getData">
-                {{ t('refresh') }}
+                {{ t("refresh") }}
               </el-button>
             </el-form-item>
           </el-col>
@@ -435,49 +480,46 @@ onUnmounted(() => {
     <!-- 日历卡片，通过showCalendar控制显示 -->
     <div v-if="showCalendar" class="card-calendar">
       <div class="calendarHeader">
-        <div class="text">
-          日历
-        </div>
+        <div class="text">日历</div>
         <div class="icon" @click="closeCalendar">
           <SvgIcon name="drawer_header" width="20" height="20" />
         </div>
       </div>
       <div class="calendarContent">
         <el-date-picker-panel
-          v-model="currentPickervalue" :border="false" class="pickerTime"
+          v-model="currentPickervalue"
+          :border="false"
+          class="pickerTime"
           :disabled-date="disableDateRange"
         />
         <div class="checkBoxGroup">
           <el-checkbox
-            v-for="(v, i) in checkBoxList" :key="i" v-model="v.isCheck" :label="v.label" size="large"
-            :style="{ marginRight: v.isMargin ? '55px' : '0' }" :data-color="v.color"
+            v-for="(v, i) in checkBoxList"
+            :key="i"
+            v-model="v.isCheck"
+            :label="v.label"
+            size="large"
+            :style="{ marginRight: v.isMargin ? '55px' : '0' }"
+            :data-color="v.color"
           />
         </div>
         <div class="btnGruop">
-          <div class="runBtn" @click="runHandle" v-if="!showSilder">
-            运行
-          </div>
+          <div class="runBtn" @click="runHandle" v-if="!showSilder">运行</div>
           <div class="runBtn" @click="playAnimation()" v-else-if="!playFalg">
             播放
           </div>
           <div class="runBtn" @click="playAnimation()" v-else-if="playFalg">
             暂停
           </div>
-          <div class="resetBtn" @click="resetHandle">
-            重置
-          </div>
+          <div class="resetBtn" @click="resetHandle">重置</div>
         </div>
       </div>
     </div>
     <div v-if="showCalendar" class="levelLegend">
-      <div class="text">
-        级别
-      </div>
+      <div class="text">级别</div>
       <div class="legendItem">
         <div class="color" :style="{ backgroundColor: '#fff' }" />
-        <div class="label">
-          无
-        </div>
+        <div class="label">无</div>
       </div>
       <div v-for="(v, i) in checkBoxList" :key="i" class="legendItem">
         <div class="color" :style="{ backgroundColor: v.color }" />
@@ -489,14 +531,20 @@ onUnmounted(() => {
     <div v-if="showSilder" class="sliderDom">
       <div class="icon" @click="playAnimation()">
         <SvgIcon
-          :name="!playFalg ? 'playAnimation' : 'zanting'" :title="!playFalg ? '播放' : '暂停'" width="34"
+          :name="!playFalg ? 'playAnimation' : 'zanting'"
+          :title="!playFalg ? '播放' : '暂停'"
+          width="34"
           height="34"
         />
       </div>
       <div class="slider">
         <el-slider
-          v-model="sliderValue" :style="{ width: '52vw' }" :show-tooltip="false" :max="sliderMax"
-          :marks="sliderMarks" @input="handleChange"
+          v-model="sliderValue"
+          :style="{ width: '52vw' }"
+          :show-tooltip="false"
+          :max="sliderMax"
+          :marks="sliderMarks"
+          @input="handleChange"
         />
       </div>
     </div>
@@ -686,27 +734,47 @@ onUnmounted(() => {
           color: #fff !important;
         }
 
-        :deep(.el-checkbox[data-color='#1569c7'] .el-checkbox__input.is-checked .el-checkbox__inner) {
+        :deep(
+            .el-checkbox[data-color="#1569c7"]
+              .el-checkbox__input.is-checked
+              .el-checkbox__inner
+          ) {
           background-color: #1569c7;
           border-color: #1569c7;
         }
 
-        :deep(.el-checkbox[data-color='#008000'] .el-checkbox__input.is-checked .el-checkbox__inner) {
+        :deep(
+            .el-checkbox[data-color="#008000"]
+              .el-checkbox__input.is-checked
+              .el-checkbox__inner
+          ) {
           background-color: #008000;
           border-color: #008000;
         }
 
-        :deep(.el-checkbox[data-color='#ffff00'] .el-checkbox__input.is-checked .el-checkbox__inner) {
+        :deep(
+            .el-checkbox[data-color="#ffff00"]
+              .el-checkbox__input.is-checked
+              .el-checkbox__inner
+          ) {
           background-color: #ffff00;
           border-color: #ffff00;
         }
 
-        :deep(.el-checkbox[data-color='#ff9933'] .el-checkbox__input.is-checked .el-checkbox__inner) {
+        :deep(
+            .el-checkbox[data-color="#ff9933"]
+              .el-checkbox__input.is-checked
+              .el-checkbox__inner
+          ) {
           background-color: #ff9933;
           border-color: #ff9933;
         }
 
-        :deep(.el-checkbox[data-color='#ff0000'] .el-checkbox__input.is-checked .el-checkbox__inner) {
+        :deep(
+            .el-checkbox[data-color="#ff0000"]
+              .el-checkbox__input.is-checked
+              .el-checkbox__inner
+          ) {
           background-color: #ff0000;
           border-color: #ff0000;
         }