更新

src/views/Yuyan.vue

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import {onMounted, onUnmounted, ref} from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
 import StripeTable from '@/components/StripeTable.vue'
-import {Operate, Point, View} from '@/utils/tdInstruction'
+import { Operate, Point, View } from '@/utils/tdInstruction'
 import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
-import {useBasinStore} from '@/stores/basin'
-import {getYuyanDataList, getYuyanFanganList} from '@/api/yuyan'
-import {convertDate, removeDuplicates} from '@/utils/date'
-import {useTimeScrollbarStore} from '@/stores/timeScrollbar'
-import {extractList} from '@/utils/list'
-import {formatd} from '@/utils/ruoyi'
-import {stationList} from '@/assets/js/station'
-import {slopeCalculation} from '@/utils/slopeCalculation'
+import { useBasinStore } from '@/stores/basin'
+import { getYuyanDataList, getYuyanFanganList } from '@/api/yuyan'
+import { convertDate, removeDuplicates } from '@/utils/date'
+import { useTimeScrollbarStore } from '@/stores/timeScrollbar'
+import { extractList } from '@/utils/list'
+import { formatd } from '@/utils/ruoyi'
+import { stationList } from '@/assets/js/station'
+import { slopeCalculation } from '@/utils/slopeCalculation'
 
 const timeScrollbarStore = useTimeScrollbarStore()
 const basinStore = useBasinStore()
@@ -24,14 +24,13 @@ const tableColumns = [
   //   showOverflowTooltip: true,
   //   convertFn: (data) => data ? data.trim() : ''
   // },
-  {label: '方案', prop: 'DD_NAME', showOverflowTooltip: true},
+  { label: '方案', prop: 'DD_NAME', showOverflowTooltip: true },
 ]
 const tableData = ref([])
-
 const yuyanId = ref(null)
 
 const dataTableColumns = [
-  {label: '测站', prop: 'label'},
+  { label: '测站', prop: 'label' },
   {
     label: '预报水位',
     prop: 'value',
@@ -86,93 +85,87 @@ const shortcuts = [
 ]
 
 function reorderList(items) {
-  if (items.length === 0) return items;
+  if (items.length === 0) return items
 
   // 获取最大值和最小值
-  const maxVal = items[0].value;
-  const minVal = items[items.length - 1].value;
+  const maxVal = items[0].value
+  const minVal = items[items.length - 1].value
 
   // 如果所有值相等则直接返回
-  if (maxVal === minVal) return items;
+  if (maxVal === minVal) return items
 
   // 计算最大值段结束位置（最后一位最大值的索引）
-  let maxEnd = 0;
+  let maxEnd = 0
   while (maxEnd + 1 < items.length && items[maxEnd + 1].value === maxVal) {
-    maxEnd++;
+    maxEnd++
   }
 
   // 计算最小值段起始位置（第一位最小值的索引）
-  let minStart = items.length - 1;
+  let minStart = items.length - 1
   while (minStart - 1 >= 0 && items[minStart - 1].value === minVal) {
-    minStart--;
+    minStart--
   }
 
   // 提取最小值段
-  const minSection = items.splice(minStart, items.length - minStart);
+  const minSection = items.splice(minStart, items.length - minStart)
 
   // 将最小值段插入到最大值段之后
-  items.splice(maxEnd + 1, 0, ...minSection);
+  items.splice(maxEnd + 1, 0, ...minSection)
 
-  return items;
+  return items
 }
 
-function findDayWithMaxDifference(data) {
-  // 创建按天分组的Map
-  const dailyData = new Map();
-
-  // 遍历所有数据点
-  for (const item of data) {
-    // 提取日期部分（格式：YYYY-MM-DD）
-    const date = item.YMDHM;
-
-    if (!dailyData.has(date)) {
-      // 初始化存储：{ min: Infinity, max: -Infinity, count: 0 }
-      dailyData.set(date, {
-        min: Infinity,
-        max: -Infinity,
-        count: 0
-      });
-    }
+function getMinMax(array: any) {
+  if (!array.length) return { max: null, min: null }
 
-    // 获取当天数据
-    const dayData = dailyData.get(date);
+  let max = -Infinity
+  let min = Infinity
 
-    // 更新最小值
-    if (item.DATA < dayData.min) {
-      dayData.min = item.DATA;
-    }
+  for (const item of array) {
+    const value = item.DATA
+    if (value > max) max = value
+    if (value < min) min = value
+  }
 
-    // 更新最大值
-    if (item.DATA > dayData.max) {
-      dayData.max = item.DATA;
-    }
+  return { max, min }
+}
 
-    // 增加数据点计数
-    dayData.count++;
-  }
+function findMaxDifferenceDay(data) {
+  let timeList = removeDuplicates(yuyanData.value.map(y => y.YMDHM))
 
-  // 计算每天差值并找出最大差值日
-  let maxDifference = -Infinity;
-  let maxDifferenceDate = null;
+  let array = []
 
-  for (const [date, dayData] of dailyData) {
-    // 忽略数据量不足的日期
-    if (dayData.count < 2) continue;
+  for (const time of timeList) {
+    const list = yuyanData.value.filter(
+      y => y.YMDHM.getTime() === time.getTime(),
+    )
 
-    // 计算当天差值
-    const difference = dayData.max - dayData.min;
+    const { max, min } = getMinMax(list)
 
-    // 更新最大差值日
-    if (difference > maxDifference) {
-      maxDifference = difference;
-      maxDifferenceDate = date;
+    array.push({ time, max, min })
+  }
+
+  // 计算每日差值并找出最大值
+  let maxDiff = -Infinity
+  let maxDiffDay = null
+
+  for (const item of array) {
+    // 计算该日的差值
+    const diff = item.max - item.min
+
+    // 更新最大差值记录
+    if (diff > maxDiff) {
+      maxDiff = diff
+      maxDiffDay = {
+        date: item.time,
+        minValue: item.min,
+        maxValue: item.max,
+        difference: diff.toFixed(2),
+      }
     }
   }
 
-  return {
-    date: maxDifferenceDate,
-    difference: maxDifference
-  };
+  return maxDiffDay
 }
 
 /**
@@ -181,7 +174,7 @@ function findDayWithMaxDifference(data) {
 async function getMonitoringPoint() {
   getYuyanFanganList(
     formatd(value2.value[0], 'yyyy-MM-dd hh:mm:ss'),
-    formatd(value2.value[1], 'yyyy-MM-dd hh:mm:ss')
+    formatd(value2.value[1], 'yyyy-MM-dd hh:mm:ss'),
   ).then(res => {
     tableData.value = res.data.filter(item => item.DD_DISTRIBY === '55')
   })
@@ -200,9 +193,14 @@ function handleCurrentChange(row) {
       }
     })
 
-    const result = findDayWithMaxDifference(yuyanData.value);
+    const result = findMaxDifferenceDay(yuyanData.value)
     debugger
     let timeList = removeDuplicates(yuyanData.value.map(y => y.YMDHM))
+
+    const maxIndex = timeList.findIndex(
+      item => item.getTime() === result.date.getTime(),
+    )
+
     timeScrollbarStore.setTimeScrollbarShow(true)
     timeScrollbarStore.setMax(timeList.length)
     const timeObj = extractList(timeList, 4)
@@ -216,6 +214,17 @@ function handleCurrentChange(row) {
         label: formatd(timeObj[key], 'yyyy年MM月dd日hh时'),
       }
     }
+
+    timeObj[maxIndex] = {
+      style: {
+        color: '#F56C6C',
+        'text-shadow': '0 0 4px #32003C',
+        'text-align': 'center',
+        top: '-60px',
+      },
+      label: `${result?.difference}m\n${formatd(result?.date, 'yyyy年MM月dd日hh时')}`,
+    }
+
     timeScrollbarStore.setMarks(timeObj)
     timeScrollbarStore.sliderlTooltip = (value: number) => {
       const date = timeList[value]
@@ -346,14 +355,22 @@ onUnmounted(() => {
           </div>
         </template>
         <div class="yuan_list">
-          <div v-for="(item, index) in tableData" :key="index" :class="{'active': yuyanId === item.ID}"
-               class="yuan_item" @click="handleCurrentChange(item)">
+          <div
+            v-for="(item, index) in tableData"
+            :key="index"
+            :class="{ active: yuyanId === item.ID }"
+            class="yuan_item"
+            @click="handleCurrentChange(item)"
+          >
             {{ item.DD_NAME }}
           </div>
         </div>
       </card01>
-      <card01 style="height: 65%;" title="预报数据">
-        <stripe-table :columns="dataTableColumns" :data="dataTableData"></stripe-table>
+      <card01 style="height: 65%" title="预报数据">
+        <stripe-table
+          :columns="dataTableColumns"
+          :data="dataTableData"
+        ></stripe-table>
       </card01>
     </template>
     <template #btnGroup>
@@ -376,14 +393,11 @@ onUnmounted(() => {
       background-color: rgba(0, 249, 255, 0.3);
     }
 
-    &:hover, &.active {
+    &:hover,
+    &.active {
       background-color: rgba(0, 0, 0, 0.8);
       color: #fff;
     }
-
   }
-
 }
-
-
 </style>