过去24小时瞬时风分布

src/types/components.d.ts

@@ -20,26 +20,17 @@ declare module 'vue' {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElDrawer: typeof import('element-plus/es')['ElDrawer']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
@@ -75,7 +66,6 @@ declare module 'vue' {
     VideoDialog: typeof import('./../components/HKVideo/video-dialog.vue')['default']
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
-    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/globalMap/RightMenu/WindMonitor/windSpeedChart.vue

@@ -10,13 +10,13 @@
         <div class="text2" style="margin-left: 10px">{{ parseTime(updateTime, '{h}:{i}') }}</div>
       </div>
     </div>
-    <Chart :option="chartOption" style="height: 1200px" />
+    <Chart :option="chartOption" style="height: 1100px" />
   </Dialog>
 </template>
 
 <script lang="ts" setup>
 import { getRainfallInfo } from '@/api/globalMap/rainMonitor';
-import { option7 } from '@/views/globalMap/RightMenu/echartOptions';
+import { option10 } from '@/views/globalMap/RightMenu/echartOptions';
 import { graphic } from 'echarts';
 import { parseTime } from '@/utils/ruoyi';
 
@@ -27,7 +27,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {});
 const emits = defineEmits(['update:show']);
 const updateTime = ref('');
-const chartOption = ref(option7);
+const chartOption = ref(option10);
 const initData = () => {
   getRainfallInfo(props.rainData.code).then((res) => {
     updateTime.value = res.data.updateTime;

src/views/globalMap/RightMenu/echartOptions.ts

@@ -802,3 +802,150 @@ export const option9 = {
     }
   ]
 };
+
+//当前未来风速
+export const option10 = {
+  grid: {
+    left: 150,
+    right: 150,
+    top: 155,
+    bottom: 100,
+    containLabel: true
+  },
+  title: {
+    textStyle: {
+      color: '#A8CCDE',
+      fontSize: 45,
+      fontFamily: '微软雅黑'
+    },
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'axis',
+    formatter: function (params) {
+      const date = new Date(params[0].value[0]);
+      return `${date.toLocaleString()}<br>` + params.map((item) => `${item.marker} ${item.seriesName}: ${item.value[1]} m/s`).join('<br>');
+    }
+  },
+  legend: {
+    show: true,
+    textStyle: {
+      fontSize: 35,
+      color: '#A8CCDE'
+    },
+    data: ['风速', '未来风速'],
+    top: 30
+  },
+  xAxis: {
+    type: 'time',
+    axisTick: false,
+    axisLine: {
+      lineStyle: {
+        color: '#36404f',
+        width: 4
+      }
+    },
+    axisLabel: {
+      formatter: (value) => {
+        const splitTime = new Date('2024-06-01 10:00').getTime(); // 分割时间点
+        return value === splitTime ? '现在' : `${new Date(value).getHours().toString().padStart(2, '0')}:00`;
+      },
+      textStyle: {
+        color: '#a7ccdf',
+        fontFamily: '微软雅黑',
+        fontSize: 35
+      }
+    }
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      textStyle: {
+        color: '#a7ccdf',
+        fontFamily: '微软雅黑',
+        fontSize: 35
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#0c2c5a'
+      }
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#36404f',
+        width: 6
+      }
+    }
+  },
+  series: [
+    {
+      name: '风速',
+      type: 'line',
+      symbol: 'circle',
+      symbolSize: 21,
+      itemStyle: {
+        color: '#2c80ff',
+        borderColor: '#fff',
+        borderWidth: 3
+      },
+      lineStyle: {
+        width: 6,
+        color: '#2c80ff'
+      },
+      data: [
+        [new Date('2024-06-01 08:00').getTime(), 14],
+        [new Date('2024-06-01 09:00').getTime(), 50],
+        {
+          // 隐藏最后一个点的图形标记
+          value: [new Date('2024-06-01 10:00').getTime(), 30],
+          symbol: 'none',
+          label: { show: false } // 确保数值标签不显示
+        }
+      ],
+      markLine: {
+        silent: true,
+        symbol: 'none',
+        lineStyle: {
+          type: 'dashed',
+          color: '#ff3030',
+          width: 4.5
+        },
+        data: [
+          {
+            xAxis: new Date('2024-06-01 10:00').getTime(),
+            label: { show: false } // 隐藏分割线标签
+          }
+        ]
+      }
+    },
+    {
+      name: '未来风速',
+      type: 'line',
+      symbol: 'rect',
+      symbolSize: [7, 4],
+      itemStyle: {
+        color: '#38c95a',
+        borderColor: '#fff',
+        borderWidth: 3
+      },
+      lineStyle: {
+        width: 6,
+        type: 'dashed',
+        color: '#38c95a'
+      },
+      data: [
+        {
+          // 隐藏第一个点的图形标记
+          value: [new Date('2024-06-01 10:00').getTime(), 30],
+          symbol: 'none',
+          label: { show: false }
+        },
+        [new Date('2024-06-01 11:00').getTime(), 50],
+        [new Date('2024-06-01 12:00').getTime(), 20],
+        [new Date('2024-06-01 13:00').getTime(), 80]
+      ]
+    }
+  ]
+};