更新

src/api/video.ts

@@ -55,7 +55,8 @@ export function stopVideo(code: string, token: string) {
     url: `/video_api/thvideo/video/api/play/stop/31010900002000010100/${code}`,
     method: 'get',
     headers: {
-      Authorization: token
+      Authorization: token,
+      isToken: false
     },
   })
 }

src/assets/svg/circle.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1701756750701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="12702" width="24" height="24">
+    <path d="M512 512m-455.111111 0a455.111111 455.111111 0 1 0 910.222222 0 455.111111 455.111111 0 1 0-910.222222 0Z"
+          fill="" p-id="12704" data-spm-anchor-id="a313x.search_index.0.i3.48b53a81zfUXZR"></path>
+</svg>

src/assets/svg/square.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1752804952421" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9328"
+     width="200" height="200">
+    <path d="M918.19440666 1016.27109224H107.90151212c-58.36870485 0-105.67659361-48.99871424-105.6765936-109.48095097V104.07073627C2.22491852 43.62372474 49.53280726-5.37498951 107.90151212-5.37498951H918.19440666c58.36870485 0 105.67659361 48.99871424 105.6765936 109.48095097v802.71940499c0 60.44701154-47.30788874 109.44572579-105.6765936 109.44572579z"
+          fill="" p-id="9329"></path>
+</svg>

src/components/Legend.vue

@@ -0,0 +1,59 @@
+<template>
+  <div v-if="legendStore.legendShow" class="legend-wrapper">
+    <div v-for="(item, index) in legendStore.legendData" :key="index" class="legend-item">
+      <span class="legend-icon">
+        <img v-if="item.icon.image" :src="item.icon.image" alt=""/>
+        <icon v-else :data="getShape(item.icon.shape)"
+              :style="{ 'fill': item.icon.style.fill, 'fontSize': '1.25rem' }"/>
+      </span>
+      <span class="legend-label">
+        {{ item.label }}
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {useLegendStore} from "@/stores/legend";
+import circle from "@/assets/svg/circle.svg";
+import square from "@/assets/svg/square.svg";
+
+const legendStore = useLegendStore();
+
+function getShape(shape: string) {
+  switch (shape) {
+    case 'circle':
+      return circle
+    case 'square':
+      return square
+    default:
+      return circle
+  }
+
+  return circle
+}
+</script>
+<style lang="scss" scoped>
+.legend-wrapper {
+  pointer-events: auto;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  border: #2399f8 1px solid;
+  border-radius: 10px;
+  width: 120px;
+  background-color: rgba(18, 72, 124, 0.5);
+  color: #fff;
+
+  .legend-item {
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+
+    .legend-label {
+      margin-left: 10px;
+    }
+
+  }
+
+}
+</style>

src/components/StationRightButtonGroup.vue

@@ -23,9 +23,11 @@ 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()
+const legendStore = useLegendStore()
 const basinStore = useBasinStore()
 const chatStore = useChatStore()
 const stationStore = useStationStore()
@@ -296,13 +298,24 @@ 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('雷达')
+    } else {
+      legendStore.closeLegend()
+    }
   }
 })
 
@@ -352,7 +365,7 @@ watch(() => route.path, (path) => {
       <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>
       </el-button-group>
     </el-popover>
@@ -376,9 +389,8 @@ watch(() => route.path, (path) => {
         </div>
       </template>
       <el-button-group>
-        <el-button v-for="item in ['晴', '小雨', '中雨', '大雨']" :key="item" @click="Setting.setWeather(item)">{{
-            item
-          }}
+        <el-button v-for="item in ['晴', '小雨', '中雨', '大雨']" :key="item" @click="Setting.setWeather(item)">
+          {{ item }}
         </el-button>
       </el-button-group>
     </el-popover>
@@ -386,7 +398,7 @@ 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="" style="position: absolute;"/>
+          <img :src="backgroundSrc" alt=""/>
           <icon :data="typhoon"/>
         </div>
       </template>
@@ -398,7 +410,7 @@ watch(() => route.path, (path) => {
     <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="" style="position: absolute;"/>
+          <img :src="backgroundSrc" alt=""/>
           <icon :data="radar"/>
         </div>
       </template>
@@ -410,7 +422,7 @@ watch(() => route.path, (path) => {
     <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="" style="position: absolute;"/>
+          <img :src="backgroundSrc" alt=""/>
           <icon :data="underwater"/>
         </div>
       </template>
@@ -420,7 +432,7 @@ watch(() => route.path, (path) => {
     <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="" style="position: absolute;"/>
+          <img :src="backgroundSrc" alt=""/>
           <icon :data="waves"/>
         </div>
       </template>
@@ -432,7 +444,7 @@ watch(() => route.path, (path) => {
     <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="" style="position: absolute;"/>
+          <img :src="backgroundSrc" alt=""/>
           <icon :data="handle"/>
         </div>
       </template>
@@ -442,12 +454,12 @@ watch(() => route.path, (path) => {
     </el-popover>
 
     <div v-show="showBtnList.includes('chat')" class="right-btn-item" @click="chatStore.changeShow()">
-      <img :src="backgroundSrc" alt="" style="position: absolute;"/>
+      <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="" style="position: absolute;"/>
+      <img :src="backgroundSrc" alt=""/>
       <icon :data="appStore.isExpand ? horizontalExpand : horizontalContract"/>
     </div>
 
@@ -484,6 +496,7 @@ watch(() => route.path, (path) => {
     img {
       width: 100%;
       height: 100%;
+      position: absolute;
     }
 
     svg {

src/components/Video/video.ts

@@ -63,10 +63,6 @@ export function getVideoCodeByMark(stcd: string, mark: string) {
   const videos = videoCode.find(v => v.stcd === stcd)
   const video = videos?.children.find(v => v.mark === mark)
   return video?.code || null
-  // 随机视频（演示用的）
-  // const index = Math.floor(Math.random() * 4)
-  // console.log(index)
-  // return ['33042106531322001000', '33041106531322000100', '32050906531322002500', '33041106531322000300'][index]
 }
 
 function encryptPwd() {
@@ -120,7 +116,7 @@ export function closeVideo(videoNm = curIndexCode, authorization = token) {
   if (!videoNm) {
     return;
   }
-
+  debugger
   stopVideo(videoNm, authorization).then(res => {
     console.log(res);
   })

src/layout/index.vue

@@ -14,6 +14,7 @@ import {Operate} from "@/utils/tdInstruction";
 import TimeScrollbar from "@/components/TimeScrollbar.vue";
 import {useStationStore} from "@/stores/station"
 import {useTyphoonStore} from "@/stores/typhoon";
+import DynamicLegend from "@/components/Legend.vue";
 
 
 const appStore = useAppStore()
@@ -152,6 +153,8 @@ window.addEventListener("message", (event) => {
           </div>
         </div>
       </div>
+
+      <dynamic-legend></dynamic-legend>
     </div>
   </div>
 </template>

src/stores/legend.ts

@@ -0,0 +1,185 @@
+import {ref, watch} from 'vue'
+import {useRoute} from 'vue-router'
+import {defineStore} from 'pinia'
+
+export const useLegendStore = defineStore('legend', () => {
+  const route = useRoute()
+
+  const legendShow = ref(false)
+  const legendData = ref(null)
+
+  const legendMap = {
+    '水下地形': [
+      {
+        label: '<=-3', icon: {
+          shape: 'square',
+          style: {
+            fill: '#0033fe',
+          },
+        }
+      },
+      {
+        label: '-3~0', icon: {
+          shape: 'square',
+          style: {
+            fill: '#1947fe',
+          },
+        }
+      },
+      {
+        label: '0~3', icon: {
+          shape: 'square',
+          style: {
+            fill: '#8ca3fe',
+          },
+        }
+      },
+      {
+        label: '3~20', icon: {
+          shape: 'square',
+          style: {
+            fill: '#f1faef',
+          },
+        }
+      },
+      {
+        label: '20~35', icon: {
+          shape: 'square',
+          style: {
+            fill: '#e9f7e5',
+          },
+        }
+      },
+    ],
+    '雷达': [
+      {
+        label: '5', icon: {
+          shape: 'square',
+          style: {
+            fill: '#e9ebeb',
+          },
+        }
+      },
+      {
+        label: '10', icon: {
+          shape: 'square',
+          style: {
+            fill: '#04a2f4',
+          },
+        }
+      },
+      {
+        label: '15', icon: {
+          shape: 'square',
+          style: {
+            fill: '#0000ff',
+          },
+        }
+      },
+      {
+        label: '20', icon: {
+          shape: 'square',
+          style: {
+            fill: '#a6fca8',
+          },
+        }
+      },
+      {
+        label: '25', icon: {
+          shape: 'square',
+          style: {
+            fill: '#04c604',
+          },
+        }
+      },
+      {
+        label: '30', icon: {
+          shape: 'square',
+          style: {
+            fill: '#048e04',
+          },
+        }
+      },
+      {
+        label: '35', icon: {
+          shape: 'square',
+          style: {
+            fill: '#fcfe04',
+          },
+        }
+      },
+      {
+        label: '40', icon: {
+          shape: 'square',
+          style: {
+            fill: '#e4c204',
+          },
+        }
+      },
+      {
+        label: '45', icon: {
+          shape: 'square',
+          style: {
+            fill: '#fc9204',
+          },
+        }
+      },
+      {
+        label: '50', icon: {
+          shape: 'square',
+          style: {
+            fill: '#fe645c',
+          },
+        }
+      },
+      {
+        label: '55', icon: {
+          shape: 'square',
+          style: {
+            fill: '#d40204',
+          },
+        }
+      },
+      {
+        label: '60', icon: {
+          shape: 'square',
+          style: {
+            fill: '#ab0204',
+          },
+        }
+      },
+      {
+        label: '65', icon: {
+          shape: 'square',
+          style: {
+            fill: '#fc02f4',
+          },
+        }
+      }
+    ],
+  }
+
+  function showLegend(type: string) {
+    legendShow.value = true
+    // @ts-ignore
+    legendData.value = legendMap[type]
+  }
+
+  function closeLegend() {
+    legendShow.value = false
+    legendData.value = null
+  }
+
+  // 路由监听
+  watch(() => route.path, path => {
+
+  }, {deep: true, immediate: true})
+
+
+  return {
+    showLegend,
+    closeLegend,
+    legendShow,
+    legendData,
+  }
+})

vite.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
     // 设置反向代理，跨域
     proxy: {
       '/base_api': {
-        target: 'http://localhost:18093',
+        target: 'http://10.8.11.98:18093',
         changeOrigin: true,
         rewrite: path => path.replace(/^\/base_api/, '')
       },