更新

src/components/StationRightButtonGroup.vue

@@ -1,29 +1,29 @@
 <script lang="ts" setup>
-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 {useAppStore} from '@/stores/app'
-import {useBasinStore} from '@/stores/basin'
-import {useChatStore} from '@/stores/chat'
-import handle from "@/assets/svg/handle.svg";
-import typhoon from "@/assets/svg/typhoon.svg";
-import underwater from "@/assets/svg/underwater.svg";
-import radar from "@/assets/svg/radar.svg";
-import waves from "@/assets/svg/waves.svg";
-import horizontalContract from "@/assets/svg/horizontal-contract.svg";
-import chat from "@/assets/svg/chat.svg";
-import horizontalExpand from "@/assets/svg/horizontal-expand.svg";
-import bus from "@/utils/bus";
-import {changeWeatherByRainfall} from "@/utils/rainfall";
-import {useStationStore} from "@/stores/station";
-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";
+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 { useAppStore } from '@/stores/app'
+import { useBasinStore } from '@/stores/basin'
+import { useChatStore } from '@/stores/chat'
+import handle from '@/assets/svg/handle.svg'
+import typhoon from '@/assets/svg/typhoon.svg'
+import underwater from '@/assets/svg/underwater.svg'
+import radar from '@/assets/svg/radar.svg'
+import waves from '@/assets/svg/waves.svg'
+import horizontalContract from '@/assets/svg/horizontal-contract.svg'
+import chat from '@/assets/svg/chat.svg'
+import horizontalExpand from '@/assets/svg/horizontal-expand.svg'
+import bus from '@/utils/bus'
+import { changeWeatherByRainfall } from '@/utils/rainfall'
+import { useStationStore } from '@/stores/station'
+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 route = useRoute()
 const appStore = useAppStore()
@@ -31,53 +31,67 @@ const legendStore = useLegendStore()
 const basinStore = useBasinStore()
 const chatStore = useChatStore()
 const stationStore = useStationStore()
-const showBtnList = ref(['home', 'view', 'label', 'typhoon', 'waves', 'underwater'])
+const showBtnList = ref([
+  'home',
+  'view',
+  'label',
+  'typhoon',
+  'waves',
+  'underwater',
+])
 const homeSrc = ref(new URL('@/assets/images/home.png', import.meta.url).href)
-const weatherSrc = ref(new URL('@/assets/images/weather.png', import.meta.url).href)
+const weatherSrc = ref(
+  new URL('@/assets/images/weather.png', import.meta.url).href,
+)
 const flagSrc = ref(new URL('@/assets/images/flag.png', import.meta.url).href)
 const walkSrc = ref(new URL('@/assets/images/walk.png', import.meta.url).href)
-const backgroundSrc = ref(new URL('@/assets/images/btn-background.png', import.meta.url).href)
-const waterSliderBackground = (new URL('@/assets/images/card/card01.png', import.meta.url).href)
+const backgroundSrc = ref(
+  new URL('@/assets/images/btn-background.png', import.meta.url).href,
+)
+const waterSliderBackground = new URL(
+  '@/assets/images/card/card01.png',
+  import.meta.url,
+).href
 
 // 测站信息
-const station = computed(() => getStation(route.params.stcd));
+const station = computed(() => getStation(route.params.stcd))
 // 是否显示关卡按钮
-const hasLevel = computed(() => !!stationStore.stnm);
+const hasLevel = computed(() => !!stationStore.stnm)
 // 雷达
-const radarState = ref('无');
+const radarState = ref('无')
 const radarList = ref([
-  {label: '降雨预报', value: '降雨预报雷达图'},
-  {label: '降雨实况', value: '降雨实况雷达图'},
-  {label: '云图', value: '卫星云图3D'},
-  {label: '降水量', value: '未来累计降水量图'},
-  {label: '无', value: '无'}
+  { label: '降雨预报', value: '降雨预报雷达图' },
+  { label: '降雨实况', value: '降雨实况雷达图' },
+  { label: '云图', value: '卫星云图3D' },
+  { label: '降水量', value: '未来累计降水量图' },
+  { label: '无', value: '无' },
 ])
 // 水下地形
-const underwaterState = ref(false);
+const underwaterState = ref(false)
 // 水文站标签
 const hydrologicStationState = computed({
   get: () => basinStore.labelState['水文站'],
-  set: () => basinStore.setLabelState('水文站')
-});
+  set: () => basinStore.setLabelState('水文站'),
+})
 // 视频点标签
 const videoPointsState = computed({
   get: () => basinStore.labelState['视频点'],
-  set: () => basinStore.setLabelState('视频点')
-});
+  set: () => basinStore.setLabelState('视频点'),
+})
 // 堤防标签
 const dikeState = computed({
   get: () => basinStore.labelState['堤防'],
-  set: () => basinStore.setLabelState('堤防')
-});
+  set: () => basinStore.setLabelState('堤防'),
+})
 
 // 模拟模式
 const simulationMode = ref('无')
 const typhoonList = ref([
   // {label: '烟花', value: '202106'},
   // {label: '达维', value: '200001'},
-  {label: '实时台风', value: '实时台风'},
-  {label: '贝碧嘉', value: '202413'},
-  {label: '无', value: '无'},
+  { label: '实时台风', value: '实时台风' },
+  { label: '贝碧嘉', value: '202413' },
+  { label: '无', value: '无' },
 ])
 const typhoonValue = ref('无')
 const currentTyphoonValue = ref('')
@@ -87,31 +101,31 @@ const waterLevelMin = ref(1)
 const waterLevelMax = ref(5)
 const waterLevelMarks = ref({
   2.72: {
-    label: '2.72m'
+    label: '2.72m',
   },
   4.19: {
     style: {
-      color: '#E6A23C'
+      color: '#E6A23C',
     },
-    label: '4.19m'
+    label: '4.19m',
   },
   4.29: {
     style: {
-      color: '#F56C6C'
+      color: '#F56C6C',
     },
-    label: '4.29m'
+    label: '4.29m',
   },
-  4.39: '4.39m'
+  4.39: '4.39m',
 })
 
 function formatWaterLevelTooltip(val: number) {
   switch (simulationMode.value) {
-    case "水位":
-      return (val).toFixed(2) + ' m' as string
-    case "雨量":
-      return val + ' mm' as string
-    case "波高":
-      return (val).toFixed(2) as string
+    case '水位':
+      return (val.toFixed(2) + ' m') as string
+    case '雨量':
+      return (val + ' mm') as string
+    case '波高':
+      return val.toFixed(2) as string
   }
 }
 
@@ -125,84 +139,84 @@ function handleHome() {
 
 async function handleSimulationModeChange(mode) {
   switch (mode) {
-    case "水位":
+    case '水位':
       waterLevelMin.value = 0
       waterLevelMax.value = 4.39
       waterLevelStep.value = 0.01
       waterLevelMarks.value = {
         0: {
-          label: '0m'
+          label: '0m',
         },
         1: {
           style: {
-            color: '#409EFF'
+            color: '#409EFF',
           },
-          label: '1.00m'
+          label: '1.00m',
         },
         2: {
           style: {
-            color: '#409EFF'
+            color: '#409EFF',
           },
-          label: '2.00m'
+          label: '2.00m',
         },
         3: {
           style: {
-            color: '#409EFF'
+            color: '#409EFF',
           },
-          label: '3.00m'
+          label: '3.00m',
         },
         4.19: {
           style: {
-            color: '#E6A23C'
+            color: '#E6A23C',
           },
-          label: '4.19m'
+          label: '4.19m',
         },
         4.29: {
           style: {
-            color: '#F56C6C'
+            color: '#F56C6C',
           },
-          label: '4.29m'
+          label: '4.29m',
         },
-        4.39: '4.39m'
+        4.39: '4.39m',
       }
       waterLevel.value = await stationStore.getZ()
       break
-    case "雨量":
+    case '雨量':
       waterLevelMin.value = 0
       waterLevelMax.value = 300
       waterLevelStep.value = 1
       waterLevelMarks.value = {
         10: {
-          label: '10mm'
+          label: '10mm',
         },
         25: {
           style: {
-            color: '#67C23A'
+            color: '#67C23A',
           },
-          label: '25mm'
+          label: '25mm',
         },
         50: {
           style: {
-            color: '#409EFF'
+            color: '#409EFF',
           },
-          label: '50mm'
+          label: '50mm',
         },
         100: {
           style: {
-            color: '#E6A23C'
+            color: '#E6A23C',
           },
-          label: '100mm'
+          label: '100mm',
         },
         250: {
           style: {
-            color: '#F56C6C'
+            color: '#F56C6C',
           },
-          label: '250mm'
-        }
+          label: '250mm',
+        },
       }
       waterLevel.value = 0
       break
-    case "波高":
+    case '波高':
       waterLevelMin.value = 0
       waterLevelMax.value = 1
       waterLevelStep.value = 0.1
@@ -219,13 +233,13 @@ async function handleSimulationModeChange(mode) {
 
 function handleWaterLevelChange() {
   switch (simulationMode.value) {
-    case "水位":
+    case '水位':
       Operate.setWaterLevel(route.params.stcd, waterLevel.value)
       break
-    case "雨量":
+    case '雨量':
       changeWeatherByRainfall(waterLevel.value)
       break
-    case "波高":
+    case '波高':
       Operate.setWaterLevel(route.params.stcd, null, waterLevel.value)
       break
   }
@@ -249,16 +263,14 @@ function handleTyphoonChange(type) {
   }
 }
 
-const wavesValue = ref('无');
+const wavesValue = ref('无')
 const wavesList = ref([
-  {label: '风速', value: 'ws10M'},
-  {label: '温度', value: 't2M'},
-  {label: '湿度', value: 'rh2M'},
-  {label: '降雨量', value: 'rain0M'},
-  {label: '无', value: '无'}
+  { label: '风速', value: 'Windy' },
+  { label: '温湿度', value: 'Humiture' },
+  { label: '无', value: '无' },
 ])
 
-function handleWavesChange(type) {
+function handleWavesChange(type: string) {
   if (type === '无') {
     const timeScrollbarStore = useTimeScrollbarStore()
     timeScrollbarStore.close()
@@ -266,9 +278,9 @@ function handleWavesChange(type) {
     wavesValue.value = '无'
   } else {
     wavesValue.value = type
-    const dateString = formatd(new Date(), "yyyyMMdd")  // TODO "20250519"
+    const dateString = formatd(new Date(), 'yyyyMMdd') // TODO "20250519"
 
-    const timeList = generateTimeList(dateString + '01', 3, 1);
+    const timeList = generateTimeList(dateString + '01', 3, 1)
     const timeScrollbarStore = useTimeScrollbarStore()
     timeScrollbarStore.setTimeScrollbarShow(true)
     timeScrollbarStore.setMax(timeList.length)
@@ -278,46 +290,62 @@ function handleWavesChange(type) {
       timeObj[key] = {
         style: {
           color: '#00c7e3',
-          'text-shadow': '0 0 4px #32003C'
+          'text-shadow': '0 0 4px #32003C',
         },
-        label: formatd(parseTime(timeObj[key]), 'yyyy年MM月dd日hh时')
+        label: formatd(parseTime(timeObj[key]), 'yyyy年MM月dd日hh时'),
       }
     }
     timeScrollbarStore.setMarks(timeObj)
     timeScrollbarStore.sliderlTooltip = (value: number) => {
-      Layer.taihuForecast(type, formatd(parseTime(timeList[value]), 'yyyy-MM-dd_hh_mm_ss'))
+      Layer.taihuForecast(
+        type,
+        formatd(parseTime(timeList[value]), 'yyyy-MM-dd_hh_mm_ss'),
+      )
       return formatd(parseTime(timeList[value]), 'yyyy年MM月dd日hh时')
     }
 
-    Layer.taihuForecast(type, formatd(parseTime(dateString + '01'), 'yyyy-MM-dd_hh_mm_ss'))
+    Layer.taihuForecast(
+      type,
+      formatd(parseTime(dateString + '01'), 'yyyy-MM-dd_hh_mm_ss'),
+    )
   }
 }
 
-bus.on('set-water-level', value => waterLevel.value = value)
-watch(() => waterLevel, value => handleWaterLevelChange(), {deep: true})
-
-watch(() => underwaterState.value, (value) => {
-  Layer.underWater(value)
-  if (value) {
-    legendStore.showLegend('水下地形')
-  } else {
-    legendStore.closeLegend()
-  }
-})
-
-watch(() => radarState.value, (value) => {
-  if (value === '无') {
-    Operate.deleteRadar()
-    legendStore.closeLegend()
-  } else {
-    Operate.addRadar(value)
-    if (['降雨预报雷达图', '降雨实况雷达图'].includes(value)) {
-      legendStore.showLegend('雷达')
+bus.on('set-water-level', value => (waterLevel.value = value))
+watch(
+  () => waterLevel,
+  () => handleWaterLevelChange(),
+  { deep: true },
+)
+
+watch(
+  () => underwaterState.value,
+  value => {
+    Layer.underWater(value)
+    if (value) {
+      legendStore.showLegend('水下地形')
     } else {
       legendStore.closeLegend()
     }
-  }
-})
+  },
+)
+
+watch(
+  () => radarState.value,
+  value => {
+    if (value === '无') {
+      Operate.deleteRadar()
+      legendStore.closeLegend()
+    } else {
+      Operate.addRadar(value)
+      if (['降雨预报雷达图', '降雨实况雷达图'].includes(value)) {
+        legendStore.showLegend('雷达')
+      } else {
+        legendStore.closeLegend()
+      }
+    }
+  },
+)
 
 function handleWaves() {
   if (appStore.currentLevel === 'TaiHuMain') {
@@ -326,32 +354,50 @@ function handleWaves() {
   } else {
     stationStore.setStnm('')
     appStore.changeCurrentLevel('TaiHuMain')
-    router.push('/');
+    router.push('/')
   }
 }
 
-watch(() => route.path, (path) => {
-  if (path.indexOf('/index') >= 0) {
-    // 显示水文站标签
-    basinStore.setLabelState2('水文站', true)
-    showBtnList.value = ['home', 'view', 'label', 'waves', 'typhoon', 'underwater', 'radar']
-  } else if (path.indexOf('/waves') >= 0) {
-    // 关闭水文站标签
-    basinStore.setLabelState2('水文站', false)
-    showBtnList.value = ['weather', 'simulation']
-  } else if (path.indexOf('/yuyan') >= 0) {
-    // 关闭水文站标签
-    basinStore.setLabelState2('水文站', false)
-    showBtnList.value = ['home', 'view', 'waves']
-  }
-}, {immediate: true, deep: true})
+watch(
+  () => route.path,
+  path => {
+    if (path.indexOf('/index') >= 0) {
+      // 显示水文站标签
+      basinStore.setLabelState2('水文站', true)
+      showBtnList.value = [
+        'home',
+        'view',
+        'label',
+        'waves',
+        'typhoon',
+        'underwater',
+        'radar',
+      ]
+    } else if (path.indexOf('/waves') >= 0) {
+      // 关闭水文站标签
+      basinStore.setLabelState2('水文站', false)
+      showBtnList.value = ['weather', 'simulation']
+    } else if (path.indexOf('/yuyan') >= 0) {
+      // 关闭水文站标签
+      basinStore.setLabelState2('水文站', false)
+      showBtnList.value = ['home', 'view', 'waves']
+    }
+  },
+  { immediate: true, deep: true },
+)
 </script>
 <template>
   <div class="right-btn-container">
     <div v-show="hasLevel" class="right-big-btn" @click="handleWaves()">
-      <img :src="backgroundSrc" alt="" style="position: absolute;z-index:-1;"/>
-      <span v-if="appStore.currentLevel === 'TaiHuMain'" style="color: #fff;">风浪展示</span>
-      <span v-else style="color: #fff;">返回</span>
+      <img
+        :src="backgroundSrc"
+        alt=""
+        style="position: absolute; z-index: -1"
+      />
+      <span v-if="appStore.currentLevel === 'TaiHuMain'" style="color: #fff"
+        >风浪展示</span
+      >
+      <span v-else style="color: #fff">返回</span>
     </div>
     <!--    <div v-show="showBtnList.includes('home')" class="right-btn-item" @click="handleHome">-->
     <!--      <img :src="homeSrc" alt="主页"/>-->
@@ -359,11 +405,13 @@ watch(() => route.path, (path) => {
     <el-popover placement="left-start" trigger="hover" width="auto">
       <template #reference>
         <div v-show="showBtnList.includes('view')" class="right-btn-item">
-          <img :src="walkSrc" alt="视角"/>
+          <img :src="walkSrc" alt="视角" />
         </div>
       </template>
       <el-button-group>
-        <el-button @click="appStore.changeCurrentView('太湖流域')">太湖流域</el-button>
+        <el-button @click="appStore.changeCurrentView('太湖流域')"
+          >太湖流域</el-button
+        >
         <el-button @click="appStore.changeCurrentView()">太湖</el-button>
         <!--        <el-button @click="appStore.changeCurrentView('夹浦')">夹浦</el-button>-->
         <el-button @click="appStore.changeCurrentView('Globe')">台风</el-button>
@@ -372,24 +420,35 @@ watch(() => route.path, (path) => {
     <el-popover placement="left-start" trigger="hover" width="auto">
       <template #reference>
         <div v-show="showBtnList.includes('label')" class="right-btn-item">
-          <img :src="flagSrc" alt="标签"/>
+          <img :src="flagSrc" alt="标签" />
         </div>
       </template>
-      水文站&nbsp;<el-switch v-model="hydrologicStationState" :active-action-icon="Elview"
-                             :inactive-action-icon="Hide"/>
-      <el-divider direction="vertical"/>
-      视频点&nbsp;<el-switch v-model="videoPointsState" :active-action-icon="Elview" :inactive-action-icon="Hide"/>
-      <el-divider direction="vertical"/>
+      水文站&nbsp;<el-switch
+        v-model="hydrologicStationState"
+        :active-action-icon="Elview"
+        :inactive-action-icon="Hide"
+      />
+      <el-divider direction="vertical" />
+      视频点&nbsp;<el-switch
+        v-model="videoPointsState"
+        :active-action-icon="Elview"
+        :inactive-action-icon="Hide"
+      />
+      <el-divider direction="vertical" />
       <!--      堤防&nbsp;<el-switch v-model="dikeState" :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('weather')" class="right-btn-item">
-          <img :src="weatherSrc" alt="天气"/>
+          <img :src="weatherSrc" alt="天气" />
         </div>
       </template>
       <el-button-group>
-        <el-button v-for="item in ['晴', '小雨', '中雨', '大雨']" :key="item" @click="Setting.setWeather(item)">
+        <el-button
+          v-for="item in ['晴', '小雨', '中雨', '大雨']"
+          :key="item"
+          @click="Setting.setWeather(item)"
+        >
           {{ item }}
         </el-button>
       </el-button-group>
@@ -398,87 +457,149 @@ watch(() => route.path, (path) => {
     <el-popover placement="left-start" trigger="hover" width="auto">
       <template #reference>
         <div v-show="showBtnList.includes('typhoon')" class="right-btn-item">
-          <img :src="backgroundSrc" alt=""/>
-          <icon :data="typhoon"/>
+          <img :src="backgroundSrc" alt="" />
+          <icon :data="typhoon" />
         </div>
       </template>
-      <el-radio-group v-model="typhoonValue" size="large" @change="handleTyphoonChange">
-        <el-radio-button v-for="item in typhoonList" :key="item.value" :label="item.label" :value="item.value"/>
+      <el-radio-group
+        v-model="typhoonValue"
+        size="large"
+        @change="handleTyphoonChange"
+      >
+        <el-radio-button
+          v-for="item in typhoonList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
       </el-radio-group>
     </el-popover>
 
     <el-popover placement="left-start" trigger="hover" width="auto">
       <template #reference>
         <div v-show="showBtnList.includes('radar')" class="right-btn-item">
-          <img :src="backgroundSrc" alt=""/>
-          <icon :data="radar"/>
+          <img :src="backgroundSrc" alt="" />
+          <icon :data="radar" />
         </div>
       </template>
-      <el-radio-group v-model="radarState" size="large" @change="handleWavesChange">
-        <el-radio-button v-for="item in radarList" :key="item.value" :label="item.label" :value="item.value"/>
+      <el-radio-group
+        v-model="radarState"
+        size="large"
+        @change="handleWavesChange"
+      >
+        <el-radio-button
+          v-for="item in radarList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
       </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"/>
+          <img :src="backgroundSrc" alt="" />
+          <icon :data="underwater" />
         </div>
       </template>
-      水下地形&nbsp;<el-switch v-model="underwaterState" :active-action-icon="Elview" :inactive-action-icon="Hide"/>
+      水下地形&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">
-          <img :src="backgroundSrc" alt=""/>
-          <icon :data="waves"/>
+          <img :src="backgroundSrc" alt="" />
+          <icon :data="waves" />
         </div>
       </template>
-      <el-radio-group v-model="wavesValue" size="large" @change="handleWavesChange">
-        <el-radio-button v-for="item in wavesList" :key="item.value" :label="item.label" :value="item.value"/>
+      <el-radio-group
+        v-model="wavesValue"
+        size="large"
+        @change="handleWavesChange"
+      >
+        <el-radio-button
+          v-for="item in wavesList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
       </el-radio-group>
     </el-popover>
 
     <el-popover placement="left-start" trigger="hover" width="auto">
       <template #reference>
         <div v-show="showBtnList.includes('simulation')" class="right-btn-item">
-          <img :src="backgroundSrc" alt=""/>
-          <icon :data="handle"/>
+          <img :src="backgroundSrc" alt="" />
+          <icon :data="handle" />
         </div>
       </template>
-      <el-radio-group v-model="simulationMode" size="large" @change="handleSimulationModeChange">
-        <el-radio-button v-for="item in ['水位', '雨量', '波高', '无']" :key="item" :label="item" :value="item"/>
+      <el-radio-group
+        v-model="simulationMode"
+        size="large"
+        @change="handleSimulationModeChange"
+      >
+        <el-radio-button
+          v-for="item in ['水位', '雨量', '波高', '无']"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
       </el-radio-group>
     </el-popover>
 
-    <div v-show="showBtnList.includes('chat')" class="right-btn-item" @click="chatStore.changeShow()">
-      <img :src="backgroundSrc" alt=""/>
-      <icon :data="chat"/>
+    <div
+      v-show="showBtnList.includes('chat')"
+      class="right-btn-item"
+      @click="chatStore.changeShow()"
+    >
+      <img :src="backgroundSrc" alt="" />
+      <icon :data="chat" />
     </div>
 
-    <div v-show="false" class="right-btn-item" @click="appStore.setExpand(!appStore.isExpand)">
-      <img :src="backgroundSrc" alt=""/>
-      <icon :data="appStore.isExpand ? horizontalExpand : horizontalContract"/>
+    <div
+      v-show="false"
+      class="right-btn-item"
+      @click="appStore.setExpand(!appStore.isExpand)"
+    >
+      <img :src="backgroundSrc" alt="" />
+      <icon :data="appStore.isExpand ? horizontalExpand : horizontalContract" />
     </div>
 
     <div v-if="simulationMode !== '无'" class="slider-wrapper">
-      <div :style="{ 'background-image': `url(${waterSliderBackground})` }" class="water-level-slider-container">
+      <div
+        :style="{ 'background-image': `url(${waterSliderBackground})` }"
+        class="water-level-slider-container"
+      >
         <div class="water-level-slider-main">
-          <el-slider v-model="waterLevel" :format-tooltip="formatWaterLevelTooltip" :marks="waterLevelMarks"
-                     :max="waterLevelMax" :min="waterLevelMin" :step="waterLevelStep" height="90%" placement="right"
-                     tooltip-class="slider-tooltip" vertical @input="value => bus.emit('set-water-level', value)"/>
-          <span class="water-level-slider-title">{{ simulationMode }}动态模拟</span>
+          <el-slider
+            v-model="waterLevel"
+            :format-tooltip="formatWaterLevelTooltip"
+            :marks="waterLevelMarks"
+            :max="waterLevelMax"
+            :min="waterLevelMin"
+            :step="waterLevelStep"
+            height="90%"
+            placement="right"
+            tooltip-class="slider-tooltip"
+            vertical
+            @input="value => bus.emit('set-water-level', value)"
+          />
+          <span class="water-level-slider-title"
+            >{{ simulationMode }}动态模拟</span
+          >
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <style lang="scss" scoped>
-@use "@/assets/styles/video.scss";
+@use '@/assets/styles/video.scss';
 
 .right-btn-container {
   display: flex;
@@ -520,7 +641,6 @@ watch(() => route.path, (path) => {
       > .right-btn-option-list {
         display: block;
       }
-
     }
 
     .right-btn-option-list {
@@ -548,11 +668,9 @@ watch(() => route.path, (path) => {
       svg {
         width: 1rem;
         height: 1rem;
-        margin-left: .5rem;
+        margin-left: 0.5rem;
       }
-
     }
-
   }
 
   .right-big-btn {
@@ -566,7 +684,6 @@ watch(() => route.path, (path) => {
     align-items: center;
     color: #fff !important;
 
-
     img {
       width: 100%;
       height: 100%;
@@ -593,14 +710,10 @@ watch(() => route.path, (path) => {
       > .right-btn-option-list {
         display: block;
       }
-
     }
-
   }
-
 }
 
-
 .slider-wrapper {
   position: fixed;
   left: -150px;
@@ -630,9 +743,7 @@ watch(() => route.path, (path) => {
         font-size: 1rem;
         letter-spacing: 0.2em;
       }
-
     }
-
   }
 }
 

src/utils/tdInstruction/layer.ts

@@ -1,9 +1,8 @@
-import Bus from "@/utils/bus";
-
-const blueColor = "0,0.958507,1,1";
-const redColor = "0.583333,0.037082,0,1";
-const yellowColor = "0,0.583333,0.021181,1";
+import Bus from '@/utils/bus'
 
+const blueColor = '0,0.958507,1,1'
+const redColor = '0.583333,0.037082,0,1'
+const yellowColor = '0,0.583333,0.021181,1'
 
 /**
  * 降雨颜色
@@ -12,166 +11,74 @@ const yellowColor = "0,0.583333,0.021181,1";
  */
 export function getColorByWaterQuality(val: number) {
   if (!val) {
-    return "1,1,1";
+    return '1,1,1'
   }
   switch (val) {
     case 1:
-      return "0,0.894330,1,1";
+      return '0,0.894330,1,1'
     case 2:
-      return "0.362375,1,0.276435,1";
+      return '0.362375,1,0.276435,1'
     case 3:
-      return "0,0.583333,0.021181,1";
+      return '0,0.583333,0.021181,1'
     case 4:
-      return "0.583333,0.037082,0,1";
+      return '0.583333,0.037082,0,1'
     case 5:
-      return "0,0.583333,0.021181,1";
+      return '0,0.583333,0.021181,1'
     default:
-      return "";
+      return ''
   }
 }
 
-
 export function underWater(show = true) {
   let descriptor = {
-    "command": "Underwater",
-    "data": {
-      "Type": show ? "True" : "False"
-    }
-  };
-  Bus.emit('emitUIInteraction', descriptor)
-  console.log("-- 水下地形：", JSON.stringify(descriptor));
-}
-
-export function taihuForecast(type = 'ws10M', time: string) {
-  if (windFieldState) {
-    updateWindField(type, time)
-  } else {
-    addWindField(type, time)
+    command: 'Underwater',
+    data: {
+      Type: show ? 'True' : 'False',
+    },
   }
+  Bus.emit('emitUIInteraction', descriptor)
+  console.log('-- 水下地形：', JSON.stringify(descriptor))
 }
 
-// 风场
-let windFieldState = false
-
-function addWindField(type: string, time: string) {
-  let descriptor: any = {
-    "command": "AddWindField",
-    "data": {
-      "id": "WindField",
-      "coord_type": "0",
-      "coord_z": "15",
-      "coord_z_type": "0",
-      "heatmap_type": "1",
-      "leftupper_coord": "119.7,30.8",
-      "leftlower_coord": "119.7,30.8",
-      "rightlower_coord": "120.7,31.5",
-      "rightupper_coord": "120.7,31.5",
-      "brush_diameter": "4000",
-      "TIME": time,
-      "TYPE": type,
-      "ColorType": "1"
-      // "gradient_setting": {
-      //   "color1": "00ff00",
-      //   "color2": "7dff00",
-      //   "color3": "ffff00",
-      //   "color4": "ff7d00",
-      //   "color5": "ff0000"
-      // }
+export function taihuForecast(type = 'Windy', time: string, show = true) {
+  debugger
+  if (type === 'Windy') {
+    windyIndex++
+    if (windyIndex % 5 !== 0) {
+      return
     }
   }
-  getMaxMinValve(descriptor, type)
-  Bus.emit('emitUIInteraction', descriptor);
-  console.log("-- 添加 WindField 图层:", JSON.stringify(descriptor));
-  windFieldState = true
-
-  windy(time)
-  windyIndex++
-}
-
-let windyIndex = 0
 
-function windy(time: string, show = true) {
   let descriptor: any = {
-    "command": "Windy",
-    "data": {
-      "Time": time,
-      "Display": show ? "true" : "false"
-    }
-  }
-
-  Bus.emit('emitUIInteraction', descriptor);
-  console.log("-- 添加 windy 图层:", JSON.stringify(descriptor));
-}
-
-function updateWindField(type: string, time: string) {
-  let descriptor = {
-    "command": "UpdataWindField",
-    "data": {
-      "id": "WindField",
-      "TYPE": type,
-      "TIME": time
-    }
+    command: type,
+    data: {
+      Time: time,
+      Display: show ? 'true' : 'false',
+    },
   }
-  getMaxMinValve(descriptor, type)
-  Bus.emit('emitUIInteraction', descriptor);
-  console.log("-- 更新 WindField 图层:", JSON.stringify(descriptor));
 
-  if (windyIndex % 5 === 0) {
-    windy(time)
-  }
-  windyIndex++
+  Bus.emit('emitUIInteraction', descriptor)
+  console.log('-- ' + type + ' 图层:', JSON.stringify(descriptor))
 }
 
-function getMaxMinValve(descriptor: any, type: string) {
-  switch (type) {
-    case 'ws10M':
-      descriptor.data["heatpoint_minvalue"] = "0"
-      descriptor.data["heatpoint_maxvalue"] = "100"
-      break
-    case 't2M':
-      descriptor.data["heatpoint_minvalue"] = "0"
-      descriptor.data["heatpoint_maxvalue"] = "100"
-      break
-    case 'rh2M':
-      descriptor.data["heatpoint_minvalue"] = "0"
-      descriptor.data["heatpoint_maxvalue"] = "100"
-      break
-    case 'rain0M':
-      descriptor.data["heatpoint_minvalue"] = "0"
-      descriptor.data["heatpoint_maxvalue"] = "100"
-      break
-  }
-}
+let windyIndex = -1
 
 export function closeTaihuForecast() {
-  let descriptor = {
-    "command": "DelLevel",
-    "data": {
-      "id": "WindField",
-      "type": "3"
-    }
-  }
-  Bus.emit('emitUIInteraction', descriptor);
-  console.log("-- 删除 WindField 图层：", JSON.stringify(descriptor));
-  windFieldState = false;
-
-  windy('', false)
-  windyIndex = 0
+  taihuForecast('Windy', '', false)
+  taihuForecast('Humiture', '', false)
+  windyIndex = -1
 }
 
-
 export function radarMap(url: any, show = true) {
   let descriptor = {
-    "command": "RadarMap",
-    "data": {
-      "Url": url,
-      "Type": "RadarMap",
-      "Display": show ? "true" : "false"
-    }
+    command: 'RadarMap',
+    data: {
+      Url: url,
+      Type: 'RadarMap',
+      Display: show ? 'true' : 'false',
+    },
   }
 
-  Bus.emit('emitUIInteraction', descriptor);
-  console.log("-- radarMap 图层：", JSON.stringify(descriptor));
+  Bus.emit('emitUIInteraction', descriptor)
+  console.log('-- radarMap 图层：', JSON.stringify(descriptor))
 }
-
-