更新

src/api/typhoon.ts

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+/**
+ * 获取雷达图片
+ * @param date 时间
+ * @returns {*}
+ */
+export const getRainfallForecastRadarMap = (date: string) => {
+  return request({
+    url: '/base_api/get_rainfall_forecast_radar_map',
+    method: 'get',
+    params: {date},
+    timeout: 1000 * 60 * 5,
+  })
+}

src/layout/components/Navbar.vue

@@ -19,7 +19,7 @@ const navbarBackgroundStyle = computed(() => {
 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: {}}
   ]
 })

src/layout/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {onMounted, reactive, ref} from 'vue'
+import {computed, onMounted, reactive, ref} from 'vue'
 
 import {AppMain, Navbar} from '@/layout/components/index.js'
 import AntvMap from '@/components/AntvMap/index.vue'
@@ -13,9 +13,12 @@ import Chat from "@/components/chat.vue";
 import {Operate} from "@/utils/tdInstruction";
 import TimeScrollbar from "@/components/TimeScrollbar.vue";
 import {useStationStore} from "@/stores/station"
+import {useTyphoonStore} from "@/stores/typhoon";
+
 
 const appStore = useAppStore()
 const stationStore = useStationStore()
+const typhoonStore = useTyphoonStore()
 const timeScrollbarStore = useTimeScrollbarStore()
 
 // 告警信息
@@ -25,6 +28,10 @@ const dialog = reactive({visible: false, title: '视频'})
 const videoList: any[] = []
 const videoCodeOptions = ref([])
 const videoCode = ref(undefined)
+const radarState = computed({
+  get: () => typhoonStore.isRadar,
+  set: (value) => typhoonStore.setRadar(value)
+})
 
 /**
  * 根据id获取视频监控
@@ -121,7 +128,6 @@ window.addEventListener("message", (event) => {
       <!-- 展示页 -->
       <app-main/>
 
-
       <div v-if="timeScrollbarStore.timeScrollbarShow" class="custom-time-scrollbar">
         <time-scrollbar :formatTooltip="timeScrollbarStore.sliderlTooltip" :marks="timeScrollbarStore.marks"
                         :max="timeScrollbarStore.max" :step="timeScrollbarStore.step"></time-scrollbar>
@@ -138,6 +144,14 @@ window.addEventListener("message", (event) => {
       </el-dialog>
 
       <chat></chat>
+
+      <div v-if="typhoonStore.isTyphoon" class="typhoon-legend">
+        <div class="typhoon-item">
+          <div class="typhoon-item-title">
+            <el-checkbox v-model="radarState" :value="true" label="雷达"/>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -183,7 +197,6 @@ $base-background-color2: rgba(10, 117, 195, 1);
 
     }
 
-
     .header-container {
       width: 100%;
       background-image: linear-gradient(132deg, #4791f8 0%, #2d3bdb 100%);
@@ -196,6 +209,25 @@ $base-background-color2: rgba(10, 117, 195, 1);
       width: 100%;
       height: 92vh;
     }
+
+    .typhoon-legend {
+      pointer-events: auto;
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      border: #2399f8 1px solid;
+      border-radius: 10px;
+      width: 120px;
+      max-height: 300px;
+      background-color: rgba(18, 72, 124, 0.5);
+      color: #fff;
+
+      .typhoon-item {
+        padding: 5px 10px;
+      }
+
+    }
+
   }
 
   .floor-container {

src/permission.ts

@@ -18,8 +18,8 @@ router.beforeEach((to, from, next) => {
       next();
     } else {
       // 否则全部重定向到登录页
-      window.location.href = 'http://10.8.11.123:8089/cas/login?service=http://10.8.11.98:9888/check'
-      // window.location.href = 'http://10.8.11.123:8089/cas/login?service=http://localhost/check'
+      // window.location.href = 'http://10.8.11.123:8089/cas/login?service=http://10.8.11.98:9888/check'
+      window.location.href = 'http://10.8.11.123:8089/cas/login?service=http://localhost/check'
     }
   }
 });

src/stores/typhoon.ts

@@ -0,0 +1,31 @@
+import {ref, watch} from 'vue'
+import {useRoute} from 'vue-router'
+import {defineStore} from 'pinia'
+
+export const useTyphoonStore = defineStore('typhoon', () => {
+  const route = useRoute()
+
+  // 是否台风
+  const isTyphoon = ref(false)
+  const isRadar = ref(false)
+
+  function setTyphoon(value: boolean) {
+    isTyphoon.value = value
+  }
+
+  function setRadar(value: boolean) {
+    isRadar.value = value
+  }
+
+  // 路由监听
+  watch(() => route.path, path => {
+
+  }, {deep: true, immediate: true})
+
+  return {
+    isTyphoon,
+    setTyphoon,
+    isRadar,
+    setRadar
+  }
+})

src/utils/request.ts

@@ -16,6 +16,7 @@ const service = axios.create({
 service.interceptors.request.use(
   (config: any) => {
     if (
+      !config.url.startsWith("/base_api") &&
       !config.url.startsWith("/dify_api") &&
       !config.url.startsWith("/yuyan_api") &&
       !config.url.startsWith("/zhxx_api") &&

src/utils/tdInstruction/layer.ts

@@ -158,3 +158,20 @@ export function closeTaihuForecast() {
   windy('', false)
   windyIndex = 0
 }
+
+
+export function radarMap(url: any, show = true) {
+  let descriptor = {
+    "command": "RadarMap",
+    "data": {
+      "Url": url,
+      "Type": "RadarMap",
+      "Display": show ? "true" : "false"
+    }
+  }
+
+  Bus.emit('emitUIInteraction', descriptor);
+  console.log("-- radarMap 图层：", JSON.stringify(descriptor));
+}
+
+

src/utils/tdInstruction/operate.ts

@@ -8,6 +8,9 @@ import {stationList} from "@/assets/js/station";
 import {slopeCalculation} from "@/utils/slopeCalculation";
 import {getYuyanDataList} from "@/api/yuyan";
 import {convertDate} from "@/utils/date";
+import {useTyphoonStore} from "@/stores/typhoon";
+import {getRainfallForecastRadarMap} from "@/api/typhoon";
+import {Layer} from "@/utils/tdInstruction/index";
 
 let waterLevel = "";
 let waterSpeed = "";
@@ -141,6 +144,7 @@ export function setPointState(stcd: any, name: string, type: string) {
 }
 
 export async function addTyphoonTrack(tfid: string) {
+  const typhoonStore = useTyphoonStore()
   let yuyanData: any[] = await getYuyanDataList("2025041714054696095")
     .then(res => {
       return res.data.map(item => {
@@ -177,6 +181,12 @@ export async function addTyphoonTrack(tfid: string) {
 
   let time = ''
   timeScrollbarStore.sliderlTooltip = (value: number) => {
+    if (typhoonStore.isRadar) {
+      getRainfallForecastRadarMap(timeList[value]).then(res => {
+        Layer.radarMap(res)
+      })
+    }
+
     const date = new Date(timeList[value])
     const list = yuyanData.filter(y => y.YMDHM.getTime() === date.getTime())
     const data = list.map(d => {
@@ -192,6 +202,7 @@ export async function addTyphoonTrack(tfid: string) {
         y: station.lttd
       }
     })
+
     if (data && data.length > 0) {
       const res: any = slopeCalculation(data);
       taihuUI(res.direction, res.slope, res.max, res.min);
@@ -217,6 +228,7 @@ export async function addTyphoonTrack(tfid: string) {
 
   timeScrollbarStore.play()
 
+  typhoonStore.setTyphoon(true)
 }
 
 
@@ -251,6 +263,8 @@ export function deleteTyphoonTrack(tfid: string) {
   console.log("-- 删除台风路径:", JSON.stringify(descriptor));
 
   taihuUI('', '', '', '', false);
+  const store = useTyphoonStore()
+  store.setTyphoon(false)
 }
 
 /**

vite.config.ts

@@ -20,6 +20,11 @@ export default defineConfig({
     port: 80,
     // 设置反向代理，跨域
     proxy: {
+      '/base_api': {
+        target: 'http://localhost:18093',
+        changeOrigin: true,
+        rewrite: path => path.replace(/^\/base_api/, '')
+      },
       '/dify_api': {
         target: 'http://10.8.11.96/v1',
         changeOrigin: true,