更新

src/components/StationRightButtonGroup.vue

@@ -3,7 +3,7 @@ import { computed, ref, watch } from 'vue'
 import { Layer, Operate, Setting } from '@/utils/tdInstruction'
 import { Hide, View as Elview } from '@element-plus/icons-vue'
 import { getStation } from '@/utils/station'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useAppStore } from '@/stores/app'
 import { useBasinStore } from '@/stores/basin'
 import { useChatStore } from '@/stores/chat'
@@ -22,15 +22,19 @@ import { generateTimeList, parseTime } from '@/utils/date'
 import { useTimeScrollbarStore } from '@/stores/timeScrollbar'
 import { extractList } from '@/utils/list'
 import { formatd } from '@/utils/ruoyi'
-import router from '@/router'
 import { useLegendStore } from '@/stores/legend'
 
+const emit = defineEmits(['wavesLevelChange'])
+
 const route = useRoute()
+const router = useRouter()
 const appStore = useAppStore()
 const legendStore = useLegendStore()
 const basinStore = useBasinStore()
 const chatStore = useChatStore()
 const stationStore = useStationStore()
+const timeScrollbarStore = useTimeScrollbarStore()
+
 const showBtnList = ref([
   'home',
   'view',
@@ -83,7 +87,6 @@ const dikeState = computed({
   get: () => basinStore.labelState['堤防'],
   set: () => basinStore.setLabelState('堤防'),
 })
-
 // 模拟模式
 const simulationMode = ref('无')
 const typhoonList = ref([
@@ -117,8 +120,13 @@ const waterLevelMarks = ref({
   },
   4.39: '4.39m',
 })
-
-function formatWaterLevelTooltip(val: number) {
+const wavesValue = ref('无')
+const wavesList = ref([
+  { label: '风速', value: 'Windy' },
+  { label: '温湿度', value: 'Humiture' },
+  { label: '无', value: '无' },
+])
+const formatWaterLevelTooltip = (val: number) => {
   switch (simulationMode.value) {
     case '水位':
       return (val.toFixed(2) + ' m') as string
@@ -129,6 +137,7 @@ function formatWaterLevelTooltip(val: number) {
   }
 }
 
+/** 回到主页 */
 function handleHome() {
   appStore.changeCurrentLevel('TaiHuMain')
   // 切换太湖流域视角
@@ -231,58 +240,41 @@ async function handleSimulationModeChange(mode) {
   handleWaterLevelChange()
 }
 
-function handleWaterLevelChange() {
-  switch (simulationMode.value) {
-    case '水位':
-      Operate.setWaterLevel(route.params.stcd, waterLevel.value)
-      break
-    case '雨量':
-      changeWeatherByRainfall(waterLevel.value)
-      break
-    case '波高':
-      Operate.setWaterLevel(route.params.stcd, null, waterLevel.value)
-      break
-  }
-}
-
-/**
- * 台风切换
- * @param type
- */
+/** 台风切换 */
 function handleTyphoonChange(type: any) {
-  Setting.clearAll()
-  if (type === '实时台风') {
-    currentTyphoonValue.value = type
-    Operate.realTimeTyphoon()
-  } else if (type === '无') {
+  if (type === '无') {
     Operate.deleteTyphoonTrack(currentTyphoonValue.value)
     Operate.realTimeTyphoon(false)
     currentTyphoonValue.value = ''
+  } else if (type === '实时台风') {
+    Setting.clearAll('typhoon')
+    currentTyphoonValue.value = type
+    // 切换台风视角
+    appStore.changeCurrentView('Globe')
+    Operate.realTimeTyphoon()
   } else {
+    Setting.clearAll('typhoon')
     currentTyphoonValue.value = type
+    // 切换台风视角
+    appStore.changeCurrentView('Globe')
     Operate.addTyphoonTrack(type)
   }
 }
 
-const wavesValue = ref('无')
-const wavesList = ref([
-  { label: '风速', value: 'Windy' },
-  { label: '温湿度', value: 'Humiture' },
-  { label: '无', value: '无' },
-])
-
+/** 风速/温湿度 展示 */
 function handleWavesChange(type: string) {
+  console.log('waves_type', type)
   if (type === '无') {
-    const timeScrollbarStore = useTimeScrollbarStore()
-    timeScrollbarStore.close()
     Layer.closeTaihuForecast()
     wavesValue.value = '无'
   } else {
+    Setting.clearAll('waves')
+    // 切换太湖流域视角
+    appStore.changeCurrentView()
     wavesValue.value = type
     const dateString = formatd(new Date(), 'yyyyMMdd') // TODO "20250519"
 
     const timeList = generateTimeList(dateString + '01', 3, 1)
-    const timeScrollbarStore = useTimeScrollbarStore()
     timeScrollbarStore.setTimeScrollbarShow(true)
     timeScrollbarStore.setMax(timeList.length)
     const timeObj = extractList(timeList, 4)
@@ -312,17 +304,34 @@ function handleWavesChange(type: string) {
   }
 }
 
-bus.on('set-water-level', value => (waterLevel.value = value))
+/** 雷达展示 */
 watch(
-  () => waterLevel,
-  () => handleWaterLevelChange(),
-  { deep: true },
+  () => radarState.value,
+  value => {
+    if (value === '无') {
+      Operate.deleteRadar()
+      legendStore.closeLegend()
+    } else {
+      Setting.clearAll('radar')
+      Operate.addRadar(value)
+      if (['降雨预报雷达图', '降雨实况雷达图'].includes(value)) {
+        legendStore.showLegend('雷达')
+      } else {
+        legendStore.closeLegend()
+      }
+    }
+  },
 )
 
+/** 水下地形展示 */
 watch(
   () => underwaterState.value,
   value => {
-    Setting.clearAll()
+    Setting.clearAll('underwater')
+    if (value) {
+      // 切换太湖流域视角
+      appStore.changeCurrentView()
+    }
     Layer.underWater(value)
     if (value) {
       legendStore.showLegend('水下地形')
@@ -332,30 +341,62 @@ watch(
   },
 )
 
+/** 清空所有时，重置状态 */
+bus.on('clearAll', type => {
+  // 清空图层
+  if (type !== 'radar') {
+    radarState.value = '无'
+  }
+  if (type !== 'simulationMode') {
+    simulationMode.value = '无'
+  }
+  if (type !== 'waves') {
+    wavesValue.value = '无'
+  }
+  if (type !== 'underwater') {
+    underwaterState.value = false
+  }
+  if (type !== 'typhoon') {
+    typhoonValue.value = '无'
+    currentTyphoonValue.value = ''
+  }
+})
+
+/** 设置水位 */
+bus.on('set-water-level', value => (waterLevel.value = value))
 watch(
-  () => radarState.value,
-  value => {
-    Setting.clearAll()
-    if (value === '无') {
-      Operate.deleteRadar()
-      legendStore.closeLegend()
-    } else {
-      Operate.addRadar(value)
-      if (['降雨预报雷达图', '降雨实况雷达图'].includes(value)) {
-        legendStore.showLegend('雷达')
-      } else {
-        legendStore.closeLegend()
-      }
-    }
-  },
+  () => waterLevel,
+  () => handleWaterLevelChange(),
+  { deep: true },
 )
 
-function handleWaves() {
+function handleWaterLevelChange() {
+  switch (simulationMode.value) {
+    case '水位':
+      Operate.setWaterLevel(route.params.stcd, waterLevel.value)
+      break
+    case '雨量':
+      changeWeatherByRainfall(waterLevel.value)
+      break
+    case '波高':
+      Operate.setWaterLevel(route.params.stcd, null, waterLevel.value)
+      break
+  }
+}
+
+/**
+ * 切换风浪关卡
+ */
+function handleWavesLevelChange() {
   if (appStore.currentLevel === 'TaiHuMain') {
     appStore.changeCurrentLevel('Demo')
-    router.push('/waves')
+    if (['/index', '/'].includes(route.path)) {
+      router.push('/waves')
+    } else {
+      emit('wavesLevelChange')
+    }
   } else {
-    stationStore.setStnm('')
+    stationStore.setStnm(null)
     appStore.changeCurrentLevel('TaiHuMain')
     router.push('/')
   }
@@ -391,7 +432,11 @@ watch(
 </script>
 <template>
   <div class="right-btn-container">
-    <div v-show="hasLevel" class="right-big-btn" @click="handleWaves()">
+    <div
+      v-show="hasLevel"
+      class="right-big-btn"
+      @click="handleWavesLevelChange()"
+    >
       <img
         :src="backgroundSrc"
         alt=""
@@ -411,6 +456,7 @@ watch(
           <img :src="walkSrc" alt="视角" />
         </div>
       </template>
+      <h4>视角切换</h4>
       <el-button-group>
         <el-button @click="appStore.changeCurrentView('太湖流域')"
           >太湖流域
@@ -426,6 +472,7 @@ watch(
           <img :src="flagSrc" alt="标签" />
         </div>
       </template>
+      <h4>标签展示</h4>
       水文站&nbsp;<el-switch
         v-model="hydrologicStationState"
         :active-action-icon="Elview"
@@ -446,6 +493,7 @@ watch(
           <img :src="weatherSrc" alt="天气" />
         </div>
       </template>
+      <h4>天气</h4>
       <el-button-group>
         <el-button
           v-for="item in ['晴', '小雨', '中雨', '大雨']"
@@ -459,18 +507,15 @@ watch(
 
     <el-popover placement="left-start" trigger="hover" width="auto">
       <template #reference>
-        <div v-show="showBtnList.includes('typhoon')" class="right-btn-item">
+        <div v-show="showBtnList.includes('radar')" class="right-btn-item">
           <img :src="backgroundSrc" alt="" />
-          <icon :data="typhoon" />
+          <icon :data="radar" />
         </div>
       </template>
-      <el-radio-group
-        v-model="typhoonValue"
-        size="large"
-        @change="handleTyphoonChange"
-      >
+      <h4>雷达</h4>
+      <el-radio-group v-model="radarState" size="large">
         <el-radio-button
-          v-for="item in typhoonList"
+          v-for="item in radarList"
           :key="item.value"
           :label="item.label"
           :value="item.value"
@@ -480,18 +525,19 @@ watch(
 
     <el-popover placement="left-start" trigger="hover" width="auto">
       <template #reference>
-        <div v-show="showBtnList.includes('radar')" class="right-btn-item">
+        <div v-show="showBtnList.includes('waves')" class="right-btn-item">
           <img :src="backgroundSrc" alt="" />
-          <icon :data="radar" />
+          <icon :data="waves" />
         </div>
       </template>
+      <h4>风速/温湿度</h4>
       <el-radio-group
-        v-model="radarState"
+        v-model="wavesValue"
         size="large"
         @change="handleWavesChange"
       >
         <el-radio-button
-          v-for="item in radarList"
+          v-for="item in wavesList"
           :key="item.value"
           :label="item.label"
           :value="item.value"
@@ -501,32 +547,19 @@ watch(
 
     <el-popover placement="left-start" trigger="hover" width="auto">
       <template #reference>
-        <div v-show="showBtnList.includes('underwater')" class="right-btn-item">
-          <img :src="backgroundSrc" alt="" />
-          <icon :data="underwater" />
-        </div>
-      </template>
-      水下地形&nbsp;<el-switch
-        v-model="underwaterState"
-        :active-action-icon="Elview"
-        :inactive-action-icon="Hide"
-      />
-    </el-popover>
-
-    <el-popover placement="left-start" trigger="hover" width="auto">
-      <template #reference>
-        <div v-show="showBtnList.includes('waves')" class="right-btn-item">
+        <div v-show="showBtnList.includes('typhoon')" class="right-btn-item">
           <img :src="backgroundSrc" alt="" />
-          <icon :data="waves" />
+          <icon :data="typhoon" />
         </div>
       </template>
+      <h4>台风</h4>
       <el-radio-group
-        v-model="wavesValue"
+        v-model="typhoonValue"
         size="large"
-        @change="handleWavesChange"
+        @change="handleTyphoonChange"
       >
         <el-radio-button
-          v-for="item in wavesList"
+          v-for="item in typhoonList"
           :key="item.value"
           :label="item.label"
           :value="item.value"
@@ -534,6 +567,20 @@ watch(
       </el-radio-group>
     </el-popover>
 
+    <el-popover placement="left-start" trigger="hover" width="auto">
+      <template #reference>
+        <div v-show="showBtnList.includes('underwater')" class="right-btn-item">
+          <img :src="backgroundSrc" alt="" />
+          <icon :data="underwater" />
+        </div>
+      </template>
+      水下地形&nbsp;<el-switch
+        v-model="underwaterState"
+        :active-action-icon="Elview"
+        :inactive-action-icon="Hide"
+      />
+    </el-popover>
+
     <el-popover placement="left-start" trigger="hover" width="auto">
       <template #reference>
         <div v-show="showBtnList.includes('simulation')" class="right-btn-item">

src/components/TimeScrollbar.vue

@@ -1,31 +1,36 @@
 <script lang="ts" setup>
-import {onUnmounted, ref} from "vue";
-import bus from "@/utils/bus";
-import {RefreshLeft, VideoPause, VideoPlay} from '@element-plus/icons-vue'
+import { computed, onUnmounted, ref } from 'vue'
+import bus from '@/utils/bus'
+import { RefreshLeft, VideoPause, VideoPlay } from '@element-plus/icons-vue'
+import { useTimeScrollbarStore } from '@/stores/timeScrollbar.js'
 
 const props = defineProps({
   max: {
     type: Number,
-    default: 100
+    default: 100,
   },
   marks: {
     type: Object,
-    default: {}
+    default: {},
   },
   formatTooltip: {
     type: Function,
-    default: (value: number) => value
+    default: (value: number) => value,
   },
   step: {
     type: Number,
-    default: 1
+    default: 1,
   },
 })
 const sliderRef = ref(null)
-const emit = defineEmits(['change', "input"]);
+const emit = defineEmits(['change', 'input'])
+const timeScrollbar = useTimeScrollbarStore()
 
 const state = ref(0)
-const value = ref(0)
+const value = computed({
+  get: () => timeScrollbar.getValue() || 0,
+  set: value => timeScrollbar.setValue(value),
+})
 let timer: any = null
 
 function play() {
@@ -37,7 +42,7 @@ function play() {
       closeTimer()
     }
     value.value = value.value + props.step
-  }, 1000);
+  }, 1000)
 }
 
 function pause() {
@@ -53,8 +58,8 @@ function refresh() {
 
 function closeTimer() {
   if (timer != null) {
-    clearInterval(timer);
-    timer = null;
+    clearInterval(timer)
+    timer = null
   }
 }
 
@@ -62,7 +67,6 @@ onUnmounted(() => {
   closeTimer()
 })
 
-
 bus.on('timeScrollbar_operate', (operate: string) => {
   if (operate === 'play') {
     play()
@@ -81,8 +85,16 @@ bus.on('timeScrollbar_operate', (operate: string) => {
       <RefreshLeft v-if="value > 0" @click="refresh"></RefreshLeft>
     </div>
     <div class="time-slider-container">
-      <el-slider ref="sliderRef" v-model="value" :format-tooltip="props.formatTooltip" :marks="props.marks"
-                 :max="props.max" :step="props.step" style="width: 100%;" tooltip-class="show-tooltip"></el-slider>
+      <el-slider
+        ref="sliderRef"
+        v-model="value"
+        :format-tooltip="props.formatTooltip"
+        :marks="props.marks"
+        :max="props.max"
+        :step="props.step"
+        style="width: 100%"
+        tooltip-class="show-tooltip"
+      ></el-slider>
     </div>
   </div>
 </template>
@@ -112,8 +124,6 @@ bus.on('timeScrollbar_operate', (operate: string) => {
         color: #00ccff;
       }
     }
-
-
   }
 
   .time-slider-container {
@@ -122,7 +132,6 @@ bus.on('timeScrollbar_operate', (operate: string) => {
     align-items: center;
     padding: 0 10px 0 20px;
   }
-
 }
 </style>
 <style>

src/layout/components/Navbar.vue

@@ -1,33 +1,41 @@
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, ref} from 'vue'
-import {jumpPage} from '@/utils'
-import {useRoute, useRouter} from 'vue-router'
-import {formatd} from '@/utils/ruoyi'
-import {Setting} from '@/utils/tdInstruction'
-import {getWeather} from '@/api/weather'
-import {getLunar} from 'chinese-lunar-calendar'
-import {useAppStore} from "@/stores/app";
-import {useBasinStore} from "@/stores/basin";
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { jumpPage } from '@/utils'
+import { useRoute, useRouter } from 'vue-router'
+import { formatd } from '@/utils/ruoyi'
+import { Setting } from '@/utils/tdInstruction'
+import { getWeather } from '@/api/weather'
+import { getLunar } from 'chinese-lunar-calendar'
+import { useAppStore } from '@/stores/app'
+import { useBasinStore } from '@/stores/basin'
+import { useStationStore } from '@/stores/station.js'
 
 const route = useRoute()
 const router = useRouter()
 
-let navbarBackgroundImage = new URL('@/assets/images/layout/header-background.png', import.meta.url).href
-let menuLeftImage = ref(new URL('@/assets/images/layout/menu-left.png', import.meta.url).href)
-let menuRightImage = ref(new URL('@/assets/images/layout/menu-right.png', import.meta.url).href)
+let navbarBackgroundImage = new URL(
+  '@/assets/images/layout/header-background.png',
+  import.meta.url,
+).href
+let menuLeftImage = ref(
+  new URL('@/assets/images/layout/menu-left.png', import.meta.url).href,
+)
+let menuRightImage = ref(
+  new URL('@/assets/images/layout/menu-right.png', import.meta.url).href,
+)
 const navbarBackgroundStyle = computed(() => {
-  return {'background-image': `url(${navbarBackgroundImage})`}
+  return { 'background-image': `url(${navbarBackgroundImage})` }
 })
 const showMenu = ref(true)
 const leftMenu = computed(() => {
   return [
-    {name: '首页', path: '/index', type: 'left', style: {}},
+    { name: '首页', path: '/index', type: 'left', style: {} },
     // {name: '态势感知', path: '/situational/' + route.params.stcd, type: 'left', style: {}}
   ]
 })
 const rightMenu = computed(() => {
   return [
-    {name: '预演', path: '/yuyan', type: 'right', style: {}},
+    { name: '预演', path: '/yuyan', type: 'right', style: {} },
     // {name: '预案', path: '/index', type: 'right', style: {}}
   ]
 })
@@ -42,6 +50,7 @@ let weatherIndex = 0
 let weatherInterval = null
 const appStore = useAppStore()
 const basinStore = useBasinStore()
+const stationStore = useStationStore()
 
 function getDateTime() {
   const curdate = new Date()
@@ -63,7 +72,6 @@ function getDateTime() {
     // Setting.setTime(tm)
     Setting.setTime('10:00')
   }
-
 }
 
 function getWeathers() {
@@ -85,15 +93,23 @@ function getWeathers() {
 const timeInterval = setInterval(getDateTime, 1000 * 60 * 60)
 
 function changePage(path) {
+  jumpPage(path)
+}
+
+// 路由监听
+watch(() => route.path, path => {
   if (path === '/index') {
+    stationStore.setStnm(null)
     appStore.changeCurrentLevel('TaiHuMain')
     // 切换太湖流域视角
     appStore.changeCurrentView()
     // 显示水文站标签
     basinStore.setLabelState2('水文站', true)
+  } else if (path === '/yuyan') {
+    stationStore.setStnm(null)
+    appStore.changeCurrentLevel('TaiHuMain')
   }
-  jumpPage(path)
-}
+}, {deep: true, immediate: true})
 
 onMounted(() => {
   getWeathers()
@@ -102,7 +118,6 @@ onUnmounted(() => {
   clearInterval(timeInterval)
   clearInterval(weatherInterval)
 })
-
 </script>
 
 <template>
@@ -110,16 +125,28 @@ onUnmounted(() => {
     <span @click="jumpPage('/')">太湖风浪</span>
     <div v-if="showMenu" class="menu-list">
       <div class="left-menu-list">
-        <div v-for="item in  leftMenu" :key="item.name"
-             :style="{ 'background-image': `url(${item.type === 'left' ? menuLeftImage: menuRightImage})` }"
-             class="menu-item"
-             @click="changePage(item.path)" v-html="item.name"></div>
+        <div
+          v-for="item in leftMenu"
+          :key="item.name"
+          :style="{
+            'background-image': `url(${item.type === 'left' ? menuLeftImage : menuRightImage})`,
+          }"
+          class="menu-item"
+          @click="changePage(item.path)"
+          v-html="item.name"
+        ></div>
       </div>
       <div class="right-menu-list">
-        <div v-for="item in rightMenu" :key="item.name"
-             :style="{ 'background-image': `url(${item.type === 'left' ? menuLeftImage: menuRightImage})` }"
-             class="menu-item" @click="changePage(item.path)" v-html="item.name">
-        </div>
+        <div
+          v-for="item in rightMenu"
+          :key="item.name"
+          :style="{
+            'background-image': `url(${item.type === 'left' ? menuLeftImage : menuRightImage})`,
+          }"
+          class="menu-item"
+          @click="changePage(item.path)"
+          v-html="item.name"
+        ></div>
       </div>
     </div>
     <div class="weather-and-loc">
@@ -198,9 +225,7 @@ onUnmounted(() => {
       &:hover {
         color: #4791f8;
       }
-
     }
-
   }
 
   .weather-and-loc {
@@ -219,7 +244,6 @@ onUnmounted(() => {
       text-align: right;
       font-size: 0.8rem;
     }
-
   }
 
   .date-and-time {
@@ -235,7 +259,6 @@ onUnmounted(() => {
     .time {
       padding: 0 10px;
       border-right: 2px solid #fff;
-
     }
 
     .date {
@@ -243,12 +266,8 @@ onUnmounted(() => {
       padding: 0 10px;
       font-size: 0.8rem;
     }
-
   }
-
 }
-
-
 </style>
 <style lang="scss">
 //.el-popper .dropdownMenu {

src/layout/index.vue

@@ -55,7 +55,7 @@ function getStcdByName(name: string) {
     name = name.split('\n')[1]
   }
   if (name === '太湖水位') {
-    stationStore.setStnm('')
+    stationStore.setStnm(null)
     return
   }
   stationStore.setStnm(name)

src/router/index.ts

@@ -1,4 +1,4 @@
-import {createRouter, createWebHistory} from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import layout from '@/layout/index.vue'
 
 const router = createRouter({
@@ -29,6 +29,11 @@ const router = createRouter({
           name: 'waves',
           component: () => import('@/views/Waves.vue'),
         },
+        {
+          path: 'waves/:yuyanId/:timeIndex',
+          name: 'yuyanWaves',
+          component: () => import('@/views/Waves.vue'),
+        },
         // {
         //   path: 'station/:stcd',
         //   name: 'Station',

src/stores/station.ts

@@ -8,8 +8,7 @@ import {useRoute} from 'vue-router'
 
 export const useStationStore = defineStore('station', () => {
   const route = useRoute()
-  // let stcd: any = ref(route.params.stcd)
-  let stcd: any = ref('63201900')
+  let stcd: any = ref(null)
   let stnm: any = ref('')
   // 标签状态
   const labelState: any = reactive({'水文站': false, '视频点': false, '堤防': false})

src/stores/timeScrollbar.ts

@@ -1,15 +1,15 @@
-import {ref} from 'vue'
-import {defineStore} from 'pinia'
-import bus from "@/utils/bus";
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import bus from '@/utils/bus'
 
 export const useTimeScrollbarStore = defineStore('timeScrollbar', () => {
+  const value = ref(0)
   // 是否展示时间条
   const timeScrollbarShow = ref(false)
   // 标题展示
   const marks = ref({})
   // 最大值
   const max = ref(100)
-
   // 步距
   const step = ref(1)
 
@@ -44,20 +44,29 @@ export const useTimeScrollbarStore = defineStore('timeScrollbar', () => {
     bus.emit('timeScrollbar_operate', 'play')
   }
 
+  function setValue(data: number) {
+    value.value = data
+  }
+
+  function getValue() {
+    return value.value
+  }
 
   return {
+    value,
     timeScrollbarShow,
     marks,
     max,
     step,
     sliderlTooltip,
 
+    setValue,
+    getValue,
     setTimeScrollbarShow,
     setMarks,
     setMax,
     setStep,
     close,
-    play
-
+    play,
   }
 })

src/utils/tdInstruction/layer.ts

@@ -1,4 +1,5 @@
 import Bus from '@/utils/bus'
+import { useTimeScrollbarStore } from '@/stores/timeScrollbar.js'
 
 const blueColor = '0,0.958507,1,1'
 const redColor = '0.583333,0.037082,0,1'
@@ -41,7 +42,7 @@ export function underWater(show = true) {
 }
 
 export function taihuForecast(type = 'Windy', time: string, show = true) {
-  if (type === 'Windy') {
+  if (type === 'Windy' && show === true) {
     windyIndex++
     if (windyIndex % 5 !== 0) {
       return
@@ -63,6 +64,8 @@ export function taihuForecast(type = 'Windy', time: string, show = true) {
 let windyIndex = -1
 
 export function closeTaihuForecast() {
+  const timeScrollbarStore = useTimeScrollbarStore()
+  timeScrollbarStore.close()
   taihuForecast('Windy', '', false)
   taihuForecast('Humiture', '', false)
   windyIndex = -1

src/utils/tdInstruction/operate.ts

@@ -27,6 +27,7 @@ export async function setWaterLevel(stcd: any, value: any = waterLevel, speed: a
   } else {
     if (!waterLevel) {
       const store = useStationStore()
+      store.setStcd(stcd)
       waterLevel = await store.getZ() + ''
     }
   }
@@ -379,8 +380,6 @@ export async function addRadar(type: any) {
 export function deleteRadar() {
   const timeScrollbarStore = useTimeScrollbarStore()
   timeScrollbarStore.close()
-  const appStore = useAppStore()
-  appStore.changeCurrentView()
   Layer.radarMap("", false)
 }
 

src/utils/tdInstruction/setting.ts

@@ -1,4 +1,5 @@
 import Bus from '@/utils/bus'
+import { useTimeScrollbarStore } from '@/stores/timeScrollbar.js'
 
 /**
  * 设置分辨率
@@ -72,10 +73,21 @@ export function setWeather(weather = '晴') {
   console.log('-- 设置天气', JSON.stringify(descriptor))
 }
 
-export function clearAll() {
+/**
+ * 清空所有图层
+ */
+export function clearAll(type: any) {
   let descriptor = {
     command: 'Clear',
+    data: {
+      id: '夹浦',
+      当前水位: '4.3',
+    },
   }
   Bus.emit('emitUIInteraction', descriptor)
   console.log('-- 清空所有', JSON.stringify(descriptor))
+
+  const timeScrollbarStore = useTimeScrollbarStore()
+  timeScrollbarStore.close()
+  Bus.emit('clearAll', type)
 }

src/views/Waves.vue

@@ -1,21 +1,23 @@
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, ref} from 'vue'
+import { computed, 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} from "@/utils/tdInstruction";
-import StationRightButtonGroup from "@/components/StationRightButtonGroup.vue";
-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 {getStationByName} from "@/assets/js/station"
-import {useAppStore} from "@/stores/app";
-import {useStationStore} from "@/stores/station";
-import bus from "@/utils/bus";
-import {useRouter} from "vue-router";
+import { Operate } from '@/utils/tdInstruction'
+import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
+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 { getStationByName } from '@/assets/js/station'
+import { useAppStore } from '@/stores/app'
+import { useStationStore } from '@/stores/station'
+import bus from '@/utils/bus'
+import { useRoute, useRouter } from 'vue-router'
+import { getHydrologicStation } from '@/api/station.js'
 
+const route = useRoute()
 const router = useRouter()
 const appStore = useAppStore()
 const stationStore = useStationStore()
@@ -29,7 +31,7 @@ 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 yuyanData = ref([])
@@ -65,6 +67,9 @@ const shortcuts = [
     },
   },
 ]
+const isYuyan = computed(() => {
+  return route.params.yuyanId && route.params.timeIndex
+})
 
 /**
  * 监测点列表
@@ -72,9 +77,13 @@ const shortcuts = [
 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')
+
+    if (isYuyan) {
+      handleCurrentChange({ ID: route.params.yuyanId })
+    }
   })
 }
 
@@ -86,7 +95,7 @@ function handleCurrentChange(row) {
     yuyanData.value = res.data.map(item => {
       return {
         ...item,
-        YMDHM: convertDate(item.YMDHM)
+        YMDHM: convertDate(item.YMDHM),
       }
     })
 
@@ -99,55 +108,88 @@ function handleCurrentChange(row) {
       timeObj[key] = {
         style: {
           color: '#00c7e3',
-          'text-shadow': '0 0 4px #32003C'
+          'text-shadow': '0 0 4px #32003C',
         },
-        label: formatd(timeObj[key], 'yyyy年MM月dd日hh时')
+        label: formatd(timeObj[key], 'yyyy年MM月dd日hh时'),
       }
     }
 
     if (station.value.name === '庙港') {
       timeObj[30] = {
         style: {
-          'color': 'red',
+          color: 'red',
           'text-shadow': '0 0 4px #32003C',
-          'top': '-45px'
+          top: '-45px',
         },
-        label: '2024年09月16日15时'
+        label: '2024年09月16日15时',
       }
     }
 
     timeScrollbarStore.setMarks(timeObj)
+    timeScrollbarStore.setValue(route.params.timeIndex)
     timeScrollbarStore.sliderlTooltip = (value: number) => {
       const date = timeList[value]
-      const data = yuyanData.value.find(y => y.YMDHM.getTime() === date.getTime() && y.STCD === station.value.id)
-      let waves: any = 0
-      if (data.DATA >= 4) {
-        waves = 1
-      } else if (data.DATA >= 3) {
-        waves = ((data.DATA - 3) / 2).toFixed(1)
-      } else if (data.DATA >= 1) {
-        waves = 0
-      }
-      Operate.setWaterLevel(station.value.name, data.DATA, waves)
+      const data = yuyanData.value.find(
+        y =>
+          y.YMDHM.getTime() === date.getTime() && y.STCD === station.value.id,
+      )
+
+      Operate.setWaterLevel(
+        station.value.name,
+        data.DATA,
+        getWavesByWaterLevel(data.DATA),
+      )
       return formatd(date, 'yyyy年MM月dd日hh时')
     }
-
   })
 }
 
-onMounted(() => {
+function getWavesByWaterLevel(value: number) {
+  let waves: any = 0
+  if (value >= 4) {
+    waves = 1
+  } else if (value >= 3) {
+    waves = ((value - 3) / 2).toFixed(1)
+  } else if (value >= 1) {
+    waves = 0
+  }
+  return waves
+}
+
+onMounted(async () => {
   if (!station.value) {
     router.push('/')
   }
   // 监测点列表
   getMonitoringPoint()
+
+  if (!isYuyan.value) {
+    await getHydrologicStation().then(res => {
+      const data = res.data.filter((d: any) => station.value.stcd === d.stcd)
+      debugger
+      if (data[0]) {
+        Operate.setWaterLevel(
+          station.value.stcd,
+          data[0].z,
+          getWavesByWaterLevel(data[0].z),
+        )
+      }
+    })
+  } else {
+  }
 })
 
 /**
  * 底板回调监听
  */
 bus.on('handle_ue_response', (data: any) => {
-  if (data.Category && data.Category === '三维堤防' && data.Data && data.Data.Type === '打开成功') {
+  if (
+    data.Category &&
+    data.Category === '三维堤防' &&
+    data.Data &&
+    data.Data.Type === '打开成功' &&
+    station.value
+  ) {
     if (station.value.name === '庙港') {
       station.value['qingkang'] = '5.00'
     }
@@ -162,26 +204,37 @@ onUnmounted(() => {
 <template>
   <right-frame>
     <template #leftModule>
-      <card01 style="height: 40%;" title="预报方案">
+      <card01 v-if="isYuyan" style="height: 40%" title="预报方案">
         <template #sec_header>
-          <div style="float: right;margin-right: 60px;">
+          <div style="float: right; margin-right: 60px">
             <el-date-picker
               v-model="value2"
               :shortcuts="shortcuts"
               end-placeholder="结束时间"
               range-separator="至"
               start-placeholder="开始时间"
-              style="width: 220px;"
+              style="width: 220px"
               type="datetimerange"
               @change="getMonitoringPoint"
             />
           </div>
         </template>
-        <stripe-table :columns="tableColumns" :data="tableData" :show-header="false"
-                      @row-click="handleCurrentChange"></stripe-table>
+        <stripe-table
+          :columns="tableColumns"
+          :data="tableData"
+          :show-header="false"
+          @row-click="handleCurrentChange"
+        ></stripe-table>
       </card01>
-      <card01 v-if="station && station.name && station.name === '庙港' && timeScrollbarStore.timeScrollbarShow"
-              title="预报说明">
+      <card01
+        v-if="
+          station &&
+          station.name &&
+          station.name === '庙港' &&
+          timeScrollbarStore.timeScrollbarShow
+        "
+        title="预报说明"
+      >
         太湖五站实测水位3.46m，庙港，时间点09月16日15时，计算出有风浪越过青坎（超过5m）。波浪爬高值为1.78m，庙港处计算瞬时水位为5.24m（3.46+1.78）。
       </card01>
     </template>

src/views/Yuyan.vue

@@ -13,6 +13,8 @@ import { extractList } from '@/utils/list'
 import { formatd } from '@/utils/ruoyi'
 import { stationList } from '@/assets/js/station'
 import { slopeCalculation } from '@/utils/slopeCalculation'
+import bus from '@/utils/bus.js'
+import router from '@/router/index.js'
 
 const timeScrollbarStore = useTimeScrollbarStore()
 const basinStore = useBasinStore()
@@ -177,15 +179,16 @@ async function getMonitoringPoint() {
     formatd(value2.value[1], 'yyyy-MM-dd hh:mm:ss'),
   ).then(res => {
     tableData.value = res.data.filter(item => item.DD_DISTRIBY === '55')
+    handleCurrentChange(tableData.value[0].ID)
   })
 }
 
 /**
  * @param row
  */
-function handleCurrentChange(row) {
-  yuyanId.value = row.ID
-  getYuyanDataList(row.ID).then(res => {
+function handleCurrentChange(id) {
+  yuyanId.value = id
+  getYuyanDataList(id).then(res => {
     yuyanData.value = res.data.map(item => {
       return {
         ...item,
@@ -194,7 +197,6 @@ function handleCurrentChange(row) {
     })
 
     const result = findMaxDifferenceDay(yuyanData.value)
-    debugger
     let timeList = removeDuplicates(yuyanData.value.map(y => y.YMDHM))
 
     const maxIndex = timeList.findIndex(
@@ -210,6 +212,7 @@ function handleCurrentChange(row) {
         style: {
           color: '#00c7e3',
           'text-shadow': '0 0 4px #32003C',
+          top: '12px',
         },
         label: formatd(timeObj[key], 'yyyy年MM月dd日hh时'),
       }
@@ -218,11 +221,11 @@ function handleCurrentChange(row) {
     timeObj[maxIndex] = {
       style: {
         color: '#F56C6C',
-        'text-shadow': '0 0 4px #32003C',
+        'text-shadow': '1px 1px 0 black',
         'text-align': 'center',
-        top: '-60px',
+        top: '-8px',
       },
-      label: `${result?.difference}m\n${formatd(result?.date, 'yyyy年MM月dd日hh时')}`,
+      label: `${formatd(result?.date, 'yyyy年MM月dd日hh时')} ${result?.difference}m`,
     }
 
     timeScrollbarStore.setMarks(timeObj)
@@ -318,11 +321,53 @@ function handleCurrentChange(row) {
         }),
         '水文站',
       )
+
+      if (value === 0) {
+        Point.addPoint(
+          data.map(a => {
+            if (maxName && a.name === maxName) {
+              return {
+                id: a.id,
+                name: `${a.value}\n${a.name}`,
+                type: a.type,
+                x: a.x,
+                y: a.y,
+                status: 'max',
+              }
+            }
+
+            if (minName && a.name === minName) {
+              return {
+                id: a.id,
+                name: `${a.value}\n${a.name}`,
+                type: a.type,
+                x: a.x,
+                y: a.y,
+                status: 'min',
+              }
+            }
+
+            return {
+              id: a.id,
+              name: `${a.value}\n${a.name}`,
+              type: a.type,
+              x: a.x,
+              y: a.y,
+            }
+          }),
+          '水文站',
+        )
+      }
+
       return formatd(date, 'yyyy年MM月dd日hh时')
     }
   })
 }
 
+function handleWavesLevelChange() {
+  router.push(`/waves/${yuyanId.value}/${timeScrollbarStore.getValue()}`)
+}
+
 onMounted(() => {
   // 监测点列表
   getMonitoringPoint()
@@ -330,6 +375,25 @@ onMounted(() => {
   View.changeView()
 })
 
+bus.on('handle_ue_response', data => {
+  // 底板初始化
+  if (data.Category === 'APIAlready') {
+    // 展示默认站点
+    Point.addPoint(
+      stationList.map(a => {
+        return {
+          id: a.id,
+          name: `${a.name}`,
+          type: '水文站',
+          x: a.lgtd,
+          y: a.lttd,
+        }
+      }),
+      '水文站',
+    )
+  }
+})
+
 onUnmounted(() => {
   Operate.strategyMap('', '', false)
   timeScrollbarStore.close()
@@ -360,7 +424,7 @@ onUnmounted(() => {
             :key="index"
             :class="{ active: yuyanId === item.ID }"
             class="yuan_item"
-            @click="handleCurrentChange(item)"
+            @click="handleCurrentChange(item.ID)"
           >
             {{ item.DD_NAME }}
           </div>
@@ -374,7 +438,9 @@ onUnmounted(() => {
       </card01>
     </template>
     <template #btnGroup>
-      <station-right-button-group></station-right-button-group>
+      <station-right-button-group
+        @wavesLevelChange="handleWavesLevelChange"
+      ></station-right-button-group>
     </template>
   </right-frame>
 </template>