1112

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

@@ -56,4 +56,18 @@ export function getForecastlist(query) {
         method: 'get',
         params: query
     })
+}
+export function getStromlist(query) {
+    return request({
+        url: '/storm/tide/stcdList',
+        method: 'get',
+        params: query
+    })
+}
+export function getStromdataList(query) {
+    return request({
+        url: '/storm/tide/dataList',
+        method: 'get',
+        params: query
+    })
 }

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

@@ -1,32 +1,18 @@
 <template>
   <div class="map-index">
+    <!-- 苏州河 -->
     <div ref="scrollContainer" v-if="route.params.id=='28'" 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: 25%;width:50vw;height: 10vh;overflow-x:auto;overflow-y: hidden;">
-      <!-- <el-timeline style="padding-top:1%;padding-left: 0%;" class="horizontal-timeline">
-        <el-timeline-item
-          v-for="(activity, index) in activities"
-          :key="index"
-          class="timeline-item"
-          :icon="activity.icon"
-          :type="activity.type"
-          :color="activity.color"
-          :size="activity.size"
-          :hollow="activity.hollow"
-          :timestamp="activity.timestamp"
-        >
-          {{ activity.content }}
-        </el-timeline-item>
-      </el-timeline> -->
+    align-items: center;display: flex;position: absolute;z-index: 9999;bottom: 1%;left: 1%;width:50vw;height: 10vh;overflow-x:auto;overflow-y: hidden;">
         <svg-icon icon-class="start1" v-if="!isStart" @click="reStart" style="margin-left: 10%;width: 30px;height:30px;cursor: pointer;"/>
         <svg-icon icon-class="pause1" v-if="isStart" @click="pause" 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=='28'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;left: 1%;width: 20vw;height: 40vh;overflow:auto;">
+    <div v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;left: 1%;width: 20vw;height: 45vh;overflow:auto;">
       <div class="biz-data-card-header">方案列表</div>
       <el-table 
           :data="tableDataFangan"
-          style="width: 98%;margin-left: 1%;margin-top: 1%;height: 35vh;"
+          style="width: 98%;margin-left: 1%;margin-top: 1%;height: 40vh;"
           :cell-style="{ padding:'5px' }"
           :header-cell-style="{height: heightAll*0.01+'px',}"
           :row-style="{ fontSize: '16px',textAlign:'center'}"
@@ -45,11 +31,11 @@
           </el-table-column>
         </el-table>
     </div>
-    <div v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;right: 1%;width: 30vw;height: 60vh;overflow:auto;">
+    <div v-if="route.params.id=='28'" style="background-color: white;position: absolute;z-index: 9999;top: 1%;right: 1%;width: 30vw;height: 85vh;overflow:auto;">
       <div class="biz-data-card-header">水位信息</div>
       <el-table 
           :data="tableData"
-          style="width: 98%;margin-left: 1%;margin-top: 1%;height: 55vh;"
+          style="width: 98%;margin-left: 1%;margin-top: 1%;height: 80vh;"
           :cell-style="{ padding:'5px' }"
           :header-cell-style="{height: heightAll*0.01+'px',}"
           :row-style="{ fontSize: '16px',textAlign:'center'}"
@@ -67,11 +53,64 @@
           <el-table-column prop="time" label="时间"  width="210"/>
         </el-table>
     </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;">
+        <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 class="biz-data-card-header">方案列表</div>
+      <el-table 
+          :data="tableDataFangan"
+          style="width: 98%;margin-left: 1%;margin-top: 1%;height: 40vh;"
+          :cell-style="{ padding:'5px' }"
+          :header-cell-style="{height: heightAll*0.01+'px',}"
+          :row-style="{ fontSize: '16px',textAlign:'center'}"
+          border >
+          <el-table-column type="index" label="序号" width="80">
+            <template #default="{ $index }">
+              <div style="text-align: center;">
+                {{ $index + 1 }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="名称">
+            <template #default="scope">
+              <span style="cursor: pointer;color:#409EFF" @click="getZ(scope.row)">{{ scope.row.name }}</span>
+            </template>
+          </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 class="biz-data-card-header">风暴潮信息</div>
+      <el-table 
+          :data="tableData"
+          style="width: 98%;margin-left: 1%;margin-top: 1%;height: 80vh;"
+          :cell-style="{ padding:'5px' }"
+          :header-cell-style="{height: heightAll*0.01+'px',}"
+          :row-style="{ fontSize: '16px',textAlign:'center'}"
+          border >
+          <el-table-column type="index" label="序号" width="80">
+            <template #default="{ $index }">
+              <div style="text-align: center;">
+                {{ $index + 1 }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="stnm" label="站名"  width="150">
+          </el-table-column>
+          <el-table-column prop="gfsZ" label="水位"  width=""/>
+          <el-table-column prop="gfsAddz" label="增水"  width=""/>
+          <el-table-column prop="gfsAddz" label="风速"  width=""/>
+          <el-table-column prop="gfsWnddir" label="风向"  width=""/>
+        </el-table>
+    </div>
     <div id="mapChart"></div>
   </div>
 </template>
 <script setup>
-import { VideoPlay } from '@element-plus/icons-vue'
 import 'ol/css';
 import {defaults as defaultControls} from 'ol/control';
 import Map from 'ol/Map';
@@ -104,6 +143,7 @@ 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";
 const tableDataFangan = ref([])
 const scrollContainer = ref(null);
 const scrollAmount =0;
@@ -132,8 +172,7 @@ onMounted(async () => {
   if(route.params.id==='28'){
     tableDataFangan.value = fangan.data.records
     const keys = Object.keys(suzhouJson.data.outPutQUZ)
-    dateLength.value = keys.length
-    
+    dateLength.value = keys.length-1
     keys.forEach(item=>{
       var par = {
         content: '',
@@ -180,6 +219,9 @@ onMounted(async () => {
     pointLayer.value = createPointlayer(suzhouPoint)
     mapChart.value.addLayer(pointLayer.value);
   }
+  if(route.params.id==='20'){
+    wendai()
+  }
   if (props.config) {
     // toCenter(props.config.center, props.config.zoom);
     await loadLayers(props.config.layers);
@@ -189,7 +231,7 @@ const count = ref(0)
 const tableData = ref()
 function getZ(row){
   console.log(row.id)
-  
+
 }
 function formatTooltip(val){
   if (activities.value && activities.value[val]) {
@@ -198,6 +240,146 @@ function formatTooltip(val){
   // 数据未就绪时返回默认提示
   return 'Loading...';
 }
+const tableJason = ref([])
+async function wendai(){
+  await getStromlist().then(res=>{
+    var dataJson = res.data
+    const vectorSource = new VectorSource();
+    dataJson.forEach(station => {
+      const feature = new Feature({
+        geometry: new Point([station.lgtd, station.lttd]),
+        stcd: station.stcd,
+        stnm: station.stnm,
+      });
+      
+      // 设置样式（根据水位值动态设置颜色）
+      const style = new Style({
+        image: new RegularShape({
+          points: 3, // 三角形
+          radius: 8, // 大小
+          fill: new Fill({
+            color: '#FF5722' // 红色填充
+          }),
+          stroke: new Stroke({
+            color: '#fff', // 白色边框
+            width: 2
+          }),
+          angle: Math.PI // 旋转180度，使三角形倒置[1,4](@ref)
+        }),
+        text: new Text({
+          text: station.stnm,
+          offsetY: 20,
+          font: '12px Microsoft YaHei, sans-serif',
+          fill: new Fill({
+            color: '#333'
+          }),
+          stroke: new Stroke({
+            color: '#fff',
+            width: 1
+          }),
+          backgroundFill: new Fill({
+            color: 'transparent'
+          }),
+          padding: [2, 4, 2, 4]
+        })
+      });
+      feature.setStyle(style);
+      vectorSource.addFeature(feature);
+    });
+    const vectorLayer = new VectorLayer({
+      source: vectorSource,
+      properties: {
+        name: 'weidaiLayers',
+        type: 'vector'
+      }
+    });
+    mapChart.value.addLayer(vectorLayer)
+    mapChart.value.on('click', (event) => {
+      const feature = mapChart.value.forEachFeatureAtPixel(
+        event.pixel,
+        (feature) => feature
+      );
+      
+      if (feature) {
+        // 获取要素的属性数据
+        const properties = feature.getProperties();
+        console.log('要素属性:', properties);
+        
+        // 获取特定属性
+        const title = feature.get('title');
+        const id = feature.get('id');
+        console.log('标题:', title, 'ID:', id);
+        
+        // 获取几何信息
+        const geometry = feature.getGeometry();
+        const coordinates = geometry.getCoordinates();
+        console.log('几何坐标:', coordinates);
+      } else {
+        console.log('未点击到任何要素');
+      }
+    })
+  })
+  await getStromdataList().then(res=>{
+    tableJason.value = res.data
+    const keys = Object.keys(res.data)
+    dateLength.value = keys.length 
+    console.log(keys,dateLength.value)
+    keys.forEach(item=>{
+      var par = {
+        content: '',
+        timestamp: item,
+        size: 'large',
+        type: 'primary',
+      }
+      activities.value.push(par)
+    })
+    var parTime = uniformSample(activities.value)
+    console.log(activities.value)
+    var a = Math.round((dateLength.value - 1) * 1 / 3)
+    var b = Math.round((dateLength.value - 1) * 2 / 3)
+    var c = dateLength.value - 1
+    marks.value = {
+      0:{
+        style: {
+          color: '#1989FA',
+        },
+        label: parTime[0].timestamp.slice(5),
+      },
+    }
+    marks.value[a] = {
+      style: {
+        color: '#1989FA',
+      },
+      label: parTime[1].timestamp.slice(5),
+    }
+    marks.value[b] = {
+      style: {
+        color: '#1989FA',
+      },
+      label: parTime[2].timestamp.slice(5),
+    }
+    marks.value[c] = {
+      style: {
+        color: '#1989FA',
+      },
+      label: parTime[3].timestamp.slice(5),
+    }
+  })
+  dateLength.value = dateLength.value -1
+  timerId = setInterval(changeWen, 1000)
+}
+function changeWen(){
+  if(tableJason.value){
+    tableData.value = []
+    var valuesArray = Object.values(tableJason.value)
+    tableData.value = valuesArray[count.value]
+    activities1.value = count.value
+    count.value++
+    if(count.value > keys1.length-1){
+      count.value = 0
+    }
+  }
+}
 function pause(){
   clearInterval(timerId);
   timerId = null
@@ -207,6 +389,10 @@ function reStart(){
   timerId = setInterval(changeMap, 1000)
   isStart.value = true
 }
+function reStartWen(){
+  timerId = setInterval(changeWen, 1000)
+  isStart.value = true
+}
 function uniformSample(arr) {
     const n = arr.length;
     if (n === 0) return [];
@@ -231,10 +417,14 @@ function pauseIn(){
   count.value = activities1.value
   changeMap()
 }
+function pauseInWen(){
+  pause()
+  count.value = activities1.value
+  changeWen()
+}
 function changeMap(){
   tableData.value = []
   const keys1 = Object.keys(suzhouJson.data.outPutQUZ)
-  console.log(count.value,keys1.length)
   if(count.value >= keys1.length){
     console.log(count.value,keys1.length)
     count.value = 0
@@ -243,12 +433,6 @@ function changeMap(){
       behavior: 'smooth' // 启用平滑滚动效果
     });
   }
-  // activities.value.forEach(item=>{
-  //   item.content = ''
-  //   item.color = ''
-  // })
-  // activities.value[count.value].content = '当前展示时间'
-  // activities.value[count.value].color = '#0bbd87',
   activities1.value = count.value
   mapChart.value.removeLayer(pointLayer.value)
   const keys = Object.keys(suzhouJson.data.outPutQUZ)
@@ -265,6 +449,7 @@ function changeMap(){
   if(count.value%10===0&&count.value!==0){ 
     scrollContainer.value.scrollLeft += scrollAmount + widthAll.value;
   }
+  
   count.value++
 }
 function createPolygonLayer(jsonData){
@@ -490,7 +675,7 @@ const initMap = () => {
     target: 'mapChart',
     view: new View({
       center: [121.472644, 31.231706],
-      zoom: 9,
+      zoom: 10,
       minZoom: 3,
       maxZoom: 16,
       projection: 'EPSG:4326',