1113

ruoyi-ui/.env.development

@@ -12,7 +12,7 @@ VITE_APP_BASE_API = '/sh-api'
 
 VITE_DEV_PATH = 'http://localhost:8082'
 # VITE_DEV_PATH = 'http://192.168.2.104:8082'
-
+VITE_WS_BASE_URL = '/websocket'
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip
 

ruoyi-ui/.env.production

@@ -12,5 +12,7 @@ VITE_APP_BASE_API = '/sh-api'
 
 VITE_DEV_PATH = 'http://localhost:8082'
 # 是否在打包时开启压缩，支持 gzip 和 brotli
+VITE_WS_BASE_URL = '/websocket'
+
 VITE_BUILD_COMPRESS = gzip
 

ruoyi-ui/src/api/standardization/bizDataShowConfig.js

@@ -70,4 +70,11 @@ export function getStromdataList(query) {
         method: 'get',
         params: query
     })
+}
+export function getStromdatade(query) {
+    return request({
+        url: '/storm/tide/list',
+        method: 'get',
+        params: query
+    })
 }

ruoyi-ui/src/utils/websocket.js

@@ -0,0 +1,13 @@
+
+
+export function createWebSocket(path = '/message') {
+  const baseUrl = import.meta.env.VITE_WS_BASE_URL
+  
+  // 开发环境使用相对路径（走代理）
+  // 生产环境使用完整 WSS 地址
+  const url = import.meta.env.DEV 
+    ? `${baseUrl}${path}`
+    : `${baseUrl}${path}`
+  
+  return new WebSocket(url)
+}

ruoyi-ui/src/views/map/components/map.vue

@@ -55,12 +55,12 @@
     </div>
     <!-- 温带风暴潮 -->
     <div ref="scrollContainer" v-if="route.params.id=='20'" style="border: 2px solid #409EFF;background-color: rgba(127, 161, 215, 0.5);border-radius: 50px 50px 50px 50px;
-    align-items: center;display: flex;position: absolute;z-index: 9999;bottom: 1%;left: 1%;width:50vw;height: 10vh;overflow-x:auto;overflow-y: hidden;">
+    align-items: center;display: flex;position: absolute;z-index: 100;bottom: 1%;left: 1%;width:50vw;height: 10vh;overflow-x:auto;overflow-y: hidden;">
         <svg-icon icon-class="start1" v-if="!isStart" @click="reStartWen" style="margin-left: 10%;width: 30px;height:30px;cursor: pointer;"/>
         <svg-icon icon-class="pause1" v-if="isStart" @click="pauseInWen" style="margin-left: 10%;width: 30px;height:30px;cursor: pointer;"/>
         <el-slider @change="pauseIn" :format-tooltip="formatTooltip"  v-model="activities1" :max="dateLength"  :marks="marks" style="width: 80%;margin-left: 1%;"/>
     </div>
-    <div v-if="route.params.id=='20'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;left: 1%;width: 20vw;height: 45vh;overflow:auto;">
+    <div v-if="route.params.id=='20'" style="background-color: white;position: absolute;z-index: 100;top: 1%;left: 1%;width: 20vw;height: 45vh;overflow:auto;">
       <div class="biz-data-card-header">方案列表</div>
       <el-table 
           :data="tableDataFangan"
@@ -83,7 +83,7 @@
           </el-table-column>
         </el-table>
     </div>
-    <div v-if="route.params.id=='20'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;right: 1%;width: 30vw;height: 85vh;overflow:auto;">
+    <div v-if="route.params.id=='20'" style="background-color: white;position: absolute;z-index: 100;top: 1%;right: 1%;width: 30vw;height: 85vh;overflow:auto;">
       <div class="biz-data-card-header">风暴潮信息</div>
       <el-table 
           :data="tableData"
@@ -107,6 +107,31 @@
           <el-table-column prop="gfsWnddir" label="风向"  width=""/>
         </el-table>
     </div>
+    <el-dialog @close="clearFromLev" :title="titleFengbao" v-model="dialogVisibleFengbao" width="50%" destroy-on-close>
+      <div>
+        <div style="font-size: 20px;margin-left: 2%;">水位</div>
+        <div id="shuiwei" style="width: 100%;height: 18vh;margin-top: 0%;"></div>
+      </div>
+      <div>
+        <div style="font-size: 20px;margin-left: 2%;margin-top:1% ;">增水</div>
+        <div id="zengshui" style="width: 100%;height: 18vh;margin-top: 1%;"></div>
+      </div>
+      <div>
+        <div style="font-size: 20px;margin-left: 2%;margin-top:1%">风速</div>
+        <div id="fengsu" style="width: 100%;height: 18vh;margin-top: 1%;"></div>
+      </div>
+      <div>
+        <div style="font-size: 20px;margin-left: 2%;margin-top:1%">风向</div>
+        <div id="fengxiang" style="width: 100%;height:18vh;margin-top: 1%;"></div>
+      </div>
+      <!-- <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="dialogVisibleFengbao = false" size="mini">
+            确定
+          </el-button>
+          </span>
+      </template> -->
+    </el-dialog>
     <div id="mapChart"></div>
   </div>
 </template>
@@ -120,6 +145,7 @@ import VectorLayer from "ol/layer/Vector";
 import Overlay from 'ol/Overlay';
 import {XYZ} from 'ol/source';
 import Point from 'ol/geom/Point';
+import * as echarts from 'echarts';
 import {createDynamicStyle} from "@/views/map/utils/styleParser.js";
 import {loadSource} from "../hooks/dataSourceManager.js";
 import bus from "@/utils/bus.js";
@@ -143,7 +169,9 @@ import {useRoute} from "vue-router";
 import suzhouPoint from "./suzhouPoints.json";
 import { ref } from 'vue';
 import fangan from "./fangan.json";
-import {getStromlist,getStromdataList} from "@/api/standardization/bizDataShowConfig.js";
+import {getStromlist,getStromdataList,getStromdatade} from "@/api/standardization/bizDataShowConfig.js";
+const dialogVisibleFengbao = ref(false)
+const titleFengbao = ref('')
 const tableDataFangan = ref([])
 const scrollContainer = ref(null);
 const scrollAmount =0;
@@ -220,6 +248,7 @@ onMounted(async () => {
     mapChart.value.addLayer(pointLayer.value);
   }
   if(route.params.id==='20'){
+    tableDataFangan.value = fangan.data.records
     wendai()
   }
   if (props.config) {
@@ -231,7 +260,54 @@ const count = ref(0)
 const tableData = ref()
 function getZ(row){
   console.log(row.id)
-
+}
+function initChart(x,y,mdName,id,color,danwei){
+  var chartDom = document.getElementById(id);
+  var myChart = echarts.init(chartDom);
+  var option;
+  option = {
+    tooltip: {
+        trigger: 'axis'
+    },
+    grid: {
+      left: '5%', 
+      right: '5%',  
+      bottom: '15%', 
+      top: '18%',     
+      containLabel: true
+    },
+    xAxis: {
+      splitLine: { show: false },
+      // type: 'category',
+      data: x
+    },
+    yAxis: {
+      type: 'value',
+      show: true,
+      splitLine: { show: false },
+      name: danwei,
+      axisTick: {
+        show: true // 确保显示刻度线
+      },
+       axisLine: {
+        show: true, // 确保显示轴线
+        lineStyle: {
+          color: '#333', // 可以设置轴线的颜色，例如与文字颜色一致
+          // width: 1 // 可以设置轴线宽度，可选
+        }
+      },
+    },
+    series: [
+      {
+      name: mdName,
+      type: 'line',
+      color:color,
+      data: y,
+      smooth: true
+    },
+    ]
+  };
+  option && myChart.setOption(option);
 }
 function formatTooltip(val){
   if (activities.value && activities.value[val]) {
@@ -301,8 +377,28 @@ async function wendai(){
       );
       
       if (feature) {
-        // 获取要素的属性数据
         const properties = feature.getProperties();
+        dialogVisibleFengbao.value = true
+        titleFengbao.value = properties.stnm + '(站码:' + properties.stcd + ')'
+        getStromdatade({stcd:properties.stcd}).then(res=>{
+          var x = []
+          var ygfsZ = []
+          var ygfsAddz = []
+          var ygfsWndv = []
+          var ygfsWnddir = []
+          res.data.forEach(item=>{
+            var parTm = item.tm.slice(5)
+            x.push(parTm.slice(0, 5) + '\n' + parTm.slice(-8,-3))
+            ygfsZ.push(item.gfsZ)
+            ygfsAddz.push(item.gfsAddz)
+            ygfsWndv.push(item.gfsWndv)
+            ygfsWnddir.push(item.gfsWnddir)
+          })
+          initChart(x,ygfsZ,properties.stnm,'shuiwei','#409EFF','单位：m')
+          initChart(x,ygfsAddz,properties.stnm,'zengshui','#67C23A','单位：m')
+          initChart(x,ygfsWndv,properties.stnm,'fengsu','#E6A23C','单位：m/s')
+          initChart(x,ygfsWnddir,properties.stnm,'fengxiang','#F56C6C','单位：°')
+        })
         console.log('要素属性:', properties);
         
         // 获取特定属性
@@ -375,7 +471,7 @@ function changeWen(){
     tableData.value = valuesArray[count.value]
     activities1.value = count.value
     count.value++
-    if(count.value > keys1.length-1){
+    if(count.value > dateLength.value){
       count.value = 0
     }
   }
@@ -446,9 +542,9 @@ function changeMap(){
   }
   pointLayer.value = createPointlayer(suzhouPoint)
   mapChart.value.addLayer(pointLayer.value);
-  if(count.value%10===0&&count.value!==0){ 
-    scrollContainer.value.scrollLeft += scrollAmount + widthAll.value;
-  }
+  // if(count.value%10===0&&count.value!==0){ 
+  //   scrollContainer.value.scrollLeft += scrollAmount + widthAll.value;
+  // }
   
   count.value++
 }

ruoyi-ui/src/views/register/modelData/dataJiDe.vue

@@ -234,6 +234,7 @@
           >
               <el-icon class="el-icon--upload"><upload-filled /></el-icon>
               <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div>上传.xlsx, .xls格式文件</div>
           </el-upload>
           <template #footer>
               <span class="dialog-footer">

ruoyi-ui/src/views/standardization/modeling/index.vue

@@ -703,6 +703,7 @@ import {useVueFlow, VueFlow ,MarkerType } from '@vue-flow/core'
 import SpecialNode from './components/SpecialNode.vue'
 import SpecialEdge from './components/SpecialEdge.vue'
 import {getPtServiceList,getSerDe} from "@/api/service/info.js";
+import { createWebSocket } from '@/utils/websocket'
 import { getToken } from '@/utils/auth'
 import {getModelList2} from "@/api/register/regCom.js";
 import {copyObject} from "@/utils/index.js";
@@ -1190,7 +1191,7 @@ async function startTest(){
   messages.value = []
   const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
   const host = window.location.host;
-  ws.value = new WebSocket('ws://' + '192.168.2.119:8082/websocket/message');
+  ws.value = createWebSocket('/message')
   ws.value.onopen = () => {
     connected.value = true;
   };

ruoyi-ui/vite.config.js

@@ -41,6 +41,12 @@ export default defineConfig(({mode, command}) => {
                 //     rewrite: (p) => p.replace(/^\/profile\/upload/, '/profile/upload')
                 // },
                 // https://cn.vitejs.dev/config/#server-proxy
+                 '/websocket': {
+                    target: env.VITE_DEV_PATH, // 你的后端 WebSocket 服务器地址
+                    changeOrigin: true, // 修改请求头中的 Origin
+                    ws: true,           // 启用 WebSocket 代理支持 [1,2,9,10,11](@ref)
+                    // rewrite: (path) => path.replace(/^\/websocket/, '') // 可选：重写路径 [1,2,9](@ref)
+                },
                 '/sh-api': {
                     target: env.VITE_DEV_PATH,
                     changeOrigin: true,