gengxin

package-lock.json

@@ -21,12 +21,14 @@
         "echarts-gl": "^2.0.9",
         "element-plus": "^2.8.6",
         "mitt": "^3.0.1",
+        "moment": "^2.30.1",
         "pinia": "^2.2.4",
         "qs": "^6.13.1",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5",
         "vue3-cookies": "^1.0.6",
-        "vue3-marquee": "^4.2.2"
+        "vue3-marquee": "^4.2.2",
+        "x2js": "^3.4.4"
       },
       "devDependencies": {
         "@tsconfig/node20": "^20.1.4",
@@ -3175,6 +3177,15 @@
       "integrity": "sha512-NMmS8/DofhH/IFeW+876XrHVWel+J/vdcFCHLDqeJgkH9x0DeiwjVd8LcBdaxdG/T7Rf8VUAYsA8X1efMzLjRQ==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@yzfe/svgicon": {
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/@yzfe/svgicon/-/svgicon-1.2.2.tgz",
@@ -7165,6 +7176,15 @@
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
       "license": "MIT"
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.0.tgz",
@@ -10011,6 +10031,15 @@
         }
       }
     },
+    "node_modules/x2js": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmmirror.com/x2js/-/x2js-3.4.4.tgz",
+      "integrity": "sha512-yG/ThaBCgnsa3aoMPAe7QwDpcyU4D70hjXC4Y1lZSfD/Tgd0MpE19FnZZRAjekryw0c8cffpOt9zsPEiqktO6Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.3"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -12252,6 +12281,11 @@
       "resolved": "https://registry.npmmirror.com/@webgpu/types/-/types-0.1.49.tgz",
       "integrity": "sha512-NMmS8/DofhH/IFeW+876XrHVWel+J/vdcFCHLDqeJgkH9x0DeiwjVd8LcBdaxdG/T7Rf8VUAYsA8X1efMzLjRQ=="
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
+    },
     "@yzfe/svgicon": {
       "version": "1.2.2",
       "resolved": "https://registry.npmmirror.com/@yzfe/svgicon/-/svgicon-1.2.2.tgz",
@@ -15132,6 +15166,11 @@
       "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
+    "moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
+    },
     "mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.0.tgz",
@@ -17040,6 +17079,14 @@
       "dev": true,
       "requires": {}
     },
+    "x2js": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmmirror.com/x2js/-/x2js-3.4.4.tgz",
+      "integrity": "sha512-yG/ThaBCgnsa3aoMPAe7QwDpcyU4D70hjXC4Y1lZSfD/Tgd0MpE19FnZZRAjekryw0c8cffpOt9zsPEiqktO6Q==",
+      "requires": {
+        "@xmldom/xmldom": "^0.8.3"
+      }
+    },
     "xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",

src/components/OpeningAnimation.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import {onMounted, ref, watch} from "vue";
+
+const openingAnimationSrc = ref(new URL('@/assets/video/openingAnimation.mp4', import.meta.url).href)
+const openingAnimationRef = ref(null)
+const isPlaying = ref(false);
+
+const emit = defineEmits(['close']);
+
+const onPlay = () => {
+  isPlaying.value = true;
+};
+
+const onPause = () => {
+  isPlaying.value = false;
+};
+
+const onEnded = () => {
+  isPlaying.value = false;
+  emit('close')
+};
+
+// 监听 isPlaying 的变化
+watch(isPlaying, (newVal) => {
+  console.log(`Video is ${newVal ? 'playing' : 'paused'}`);
+});
+
+onMounted(() => {
+  if (openingAnimationRef.value) {
+    // 初始状态设置
+    isPlaying.value = !openingAnimationRef.value.paused;
+  }
+});
+</script>
+<template>
+  <video ref="openingAnimationRef" autoplay class="opening-animation-video" muted @ended="onEnded" @pause="onPause"
+         @play="onPlay">
+    <source :src="openingAnimationSrc" type="video/mp4">
+  </video>
+</template>
+<style lang="scss" scoped>
+.opening-animation-video {
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  position: fixed;
+  object-fit: cover;
+}
+</style>

src/layout/index.vue

@@ -1,25 +1,30 @@
 <script lang="ts" setup>
-import { AppMain, Navbar } from '@/layout/components/index.js'
+import {AppMain, Navbar} from '@/layout/components/index.js'
 import AntvMap from '@/components/AntvMap/index.vue'
 import UePlayer from '@/components/UePlayer.vue'
-import { useAppStore } from '@/stores/app'
-import { onMounted, reactive, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useStationStore } from '@/stores/station'
+import {useAppStore} from '@/stores/app'
+import {computed, onMounted, reactive, ref, watch} from 'vue'
+import {useRoute} from 'vue-router'
+import {useStationStore} from '@/stores/station'
 import bus from '@/utils/bus'
-import { getStation } from '@/utils/station'
-import { getAlarmData } from '@/api/rolldata'
-import { jumpPage } from '@/utils'
+import {getStation} from '@/utils/station'
+import {getAlarmData} from '@/api/rolldata'
+import {jumpPage} from '@/utils'
 import CrossSection from '@/components/CrossSection.vue'
-import { Vue3Marquee } from 'vue3-marquee'
+import {Vue3Marquee} from 'vue3-marquee'
 import X2js from 'x2js';
+import OpeningAnimation from "@/components/OpeningAnimation.vue";
+
 const appStore = useAppStore()
 const stationStore = useStationStore()
 const route = useRoute()
 
+// 是否展示动画
+const showOpeningAnimation = computed(() => route.path.indexOf('/index') > -1)
+const showOpeningAnimation2 = ref(true)
 let navbarHeight = '12vh'
 let theme = ''
-let navbarStyle = { height: navbarHeight }
+let navbarStyle = {height: navbarHeight}
 const dialog = reactive({
   visible: false,
   title: '断面',
@@ -74,9 +79,8 @@ async function getAlarmInfo() {
   alarmInfo.value = await getAlarmData().then(res => {
     // 实例化
     let x2js = new X2js();
-    let xml = res;
 // 将xml解析为我们需要的json对象
-    let json = x2js.xml2js(xml);
+    let json = x2js.xml2js(res);
     return json.DataTable.diffgram.DocumentElement.Table.things
   })
 }
@@ -84,11 +88,20 @@ async function getAlarmInfo() {
 onMounted(() => {
   getAlarmInfo()
 })
+
+// 路由监听
+watch(() => route.path, path => {
+  // 首页展示动画
+  showOpeningAnimation2.value = path.indexOf('/index') > -1;
+}, {deep: true})
 </script>
 
 <template>
   <div :style="{ '--current-color': theme }" class="app-wrapper">
 
+    <opening-animation v-if="showOpeningAnimation" v-show="showOpeningAnimation2"
+                       @close="showOpeningAnimation2 = false"></opening-animation>
+
     <!--    <div v-show="appStore.floorType === 'img'" class="floor-container"><img :src="yztSrc"></div>-->
     <!--    <div v-show="appStore.floorType === 'detail'" class="floor-container"><img :src="detailSrc"-->
     <!--                                                                               style="width: 100%;height: 100%;"></div>-->
@@ -115,9 +128,9 @@ onMounted(() => {
         <div class="alarm-info" v-html="alarmInfo"></div>
       </Vue3Marquee>
       <!-- 顶部 -->
-      <navbar :style="navbarStyle" />
+      <navbar :style="navbarStyle"/>
       <!-- 展示页 -->
-      <app-main />
+      <app-main/>
 
       <el-dialog v-model="dialog.visible" :modal="false" :title="dialog.title" align-center draggable>
         <cross-section v-if="dialog.visible"></cross-section>

src/utils/date.ts

@@ -3,8 +3,8 @@ export function getLatestTimeWithMinuteMultipleOfFive(date = new Date(), minutes
   // 获取当前分钟数
   let minutes = date.getMinutes();
 
-  // 计算最近的5的倍数
-  let remainder = minutes % 5;
+  // 计算最近的10的倍数
+  let remainder = minutes % 10;
   if (remainder !== 0) {
     minutes = minutes - remainder;
   }
@@ -23,3 +23,18 @@ export function subtractHours(date: Date, hours: number) {
   // 创建一个新的Date对象，表示减去特定小时数后的时间
   return new Date(date.getTime() - hours * 60 * 60 * 1000);
 }
+
+export function getNearestHour(date: Date = new Date()): Date {
+  // 克隆 date 对象以避免更改原始对象
+  const clonedDate = new Date(date.getTime());
+
+  // 将分钟、秒和毫秒重置为零
+  clonedDate.setMinutes(0, 0, 0);
+
+  // 如果当前时间超过小时标记，请将日期设置为下一个小时
+  // if (date.getMinutes() > 0) {
+  //   clonedDate.setHours(clonedDate.getHours() + 1);
+  // }
+
+  return clonedDate;
+}

src/utils/index.ts

@@ -23,7 +23,7 @@ export function jumpPage(path: string, query: any = null, isBlank = false) {
 
 
 /**
- * Merges two objects, giving the last one precedence
+ * 合并两个对象，为最后一个对象提供优先权
  * @param {Object} target
  * @param {(Object|Array)} source
  * @returns {Object}
@@ -32,10 +32,21 @@ export function objectMerge(target: any, source: any) {
   if (typeof target !== 'object') {
     target = {}
   }
+
+  if (!source) {
+    return target
+  }
+
   if (Array.isArray(source)) {
     return source.slice()
   }
-  Object.keys(source).forEach(property => {
+
+  const keys = Object.keys(source)
+  if (keys.length === 0) {
+    return target
+  }
+
+  keys.forEach(property => {
     const sourceProperty = source[property]
     if (typeof sourceProperty === 'object' && sourceProperty !== null) {
       target[property] = objectMerge(target[property], sourceProperty)

src/utils/station.ts

@@ -53,63 +53,7 @@ export const stations = [
   }
 ]
 
-export const stationList = [
-  /// 乌镇、太师桥、文桥、桃源、思源
-  {
-    'stcd': '63304800',
-    'stnm': '乌镇',
-    'lgtd': '120.495155',
-    'lttd': '30.755068',
-    'wrz': 3.70,
-    'grz': 4.10
-  },
-  {
-    'stcd': '63304700',
-    'stnm': '太师桥',
-    'lgtd': '120.4941',
-    'lttd': '30.762836',
-    'wrz': 4.19,
-    'grz': 4.29,
-    'shuxing': '基本站',
-    'xzqh': '嘉兴'
-  },
-  {
-    'stcd': '63304730',
-    'stnm': '文桥',
-    'lgtd': '120.465831',
-    'lttd': '30.800258',
-    'shuxing': '预警站',
-    'xzqh': '浙江湖州'
-  },
-  {
-    'stcd': '6331E001',
-    'stnm': '桃源'
-  },
-  {
-    'stcd': '63304650',
-    'stnm': '思源',
-    'lgtd': '120.522088',
-    'lttd': '30.841321',
-    'shuxing': '基本站',
-    'xzqh': '浙江嘉兴'
-  },
-  {
-    'stcd': '63305451',
-    'stnm': '圣塘桥',
-    'lgtd': '120.589144',
-    'lttd': '30.838792',
-    'shuxing': '预警站',
-    'xzqh': '浙江嘉兴'
-  },
-  {
-    'stcd': '63205690',
-    'stnm': '太平桥',
-    'lgtd': '120.702609',
-    'lttd': '30.886256',
-    'shuxing': '预警站',
-    'xzqh': '江苏苏州'
-  }
-]
+// 江南大运河沿线水文站点列表
 export const stationSzList = [
   {
     'stnm': '太浦河口',
@@ -172,18 +116,19 @@ export const stationSzList = [
     'stcd': '63304700'
   }]
 
+// 水质站点列表
 export const stationSqList = [
   {
     'stnm': '谏壁',
-    'stcd': '63202500'
+    'stcd': '63202501'
   },
   {
     'stnm': '丹阳',
-    'stcd': '63202603'
+    'stcd': '63202600'
   },
   {
     'stnm': '九里铺',
-    'stcd': '63222950'
+    'stcd': '63202650'
   },
   {
     'stnm': '三堡街',
@@ -191,11 +136,11 @@ export const stationSqList = [
   },
   {
     'stnm': '洛社',
-    'stcd': '63202803'
+    'stcd': '63202800'
   },
   {
-    'stnm': '无锡（二）',
-    'stcd': '63202850'
+    'stnm': '无锡(二)',
+    'stcd': '63202851'
   },
   {
     'stnm': '望亭',
@@ -206,20 +151,20 @@ export const stationSqList = [
     'stcd': '63203000'
   },
   {
-    'stnm': '苏州（觅渡桥）',
+    'stnm': '苏州(觅渡桥)',
     'stcd': '63203040'
   },
   {
-    'stnm': '苏州（二）',
+    'stnm': '苏州(二)',
     'stcd': '63203050'
   },
   {
     'stnm': '瓜泾口',
-    'stcd': '63205403'
+    'stcd': '63205400'
   },
   {
     'stnm': '平望',
-    'stcd': '63205353'
+    'stcd': '63205350'
   },
   {
     'stnm': '思源',
@@ -231,21 +176,22 @@ export const stationSqList = [
   },
   {
     'stnm': '乌镇',
-    'stcd': '63304803'
+    'stcd': '63304800'
   },
   {
     'stnm': '新市',
-    'stcd': '63303603'
+    'stcd': '63303600'
   },
   {
     'stnm': '崇德',
-    'stcd': '63300803'
+    'stcd': '63300800'
   },
   {
     'stnm': '拱宸桥',
     'stcd': '63300200'
   }]
 
+// 浙闽晥站点列表（备用）
 export const stationMap2 = [
   {
     'stcd': '63304700',
@@ -381,3 +327,210 @@ export const stationMap2 = [
 export function getStation(value: any, field = 'stcd') {
   return stations.find((item: any) => item[field] === value)
 }
+
+// 长三角站点数据
+export const YANGTZE_RIVER_DELTA_STATIONS = [
+  {
+    "stcd": "63205311",
+    "stnm": "太浦闸",
+    "lgtd": "120.504891",
+    "lttd": "31.013355",
+    "wrz": 3.80,
+    "grz": 4.66
+  },
+  {
+    "lttd": "31.026895",
+    "grz": 4.05,
+    "stcd": "63403200",
+    "stnm": "金泽",
+    "lgtd": "120.890017",
+    "wrz": 3.55
+  },
+  {
+    "lttd": "31.010361",
+    "grz": null,
+    "stcd": "63205300",
+    "stnm": "太浦河口",
+    "lgtd": "120.476615",
+    "wrz": null
+  },
+  {
+    "lttd": "30.841321",
+    "stcd": "63304650",
+    "stnm": "思源大桥",
+    "lgtd": "120.522088",
+    "wrz": 4.19,
+    "grz": 4.29
+  },
+  {
+    "lttd": "30.762836",
+    "stcd": "63304700",
+    "hnnm": "杭嘉湖区",
+    "stnm": "太师桥",
+    "lgtd": "120.4941",
+    "wrz": 4.19,
+    "grz": 4.29
+  },
+  {
+    "lttd": "30.891411",
+    "grz": null,
+    "stcd": "63205660",
+    "stnm": "长村桥",
+    "lgtd": "120.364253",
+    "wrz": null
+  },
+  {
+    "lttd": "30.885936",
+    "grz": null,
+    "stcd": "63301700",
+    "stnm": "北虹大桥",
+    "lgtd": "120.709747",
+    "wrz": null
+  },
+  {
+    "lttd": "30.922552",
+    "grz": null,
+    "stcd": "63205680",
+    "stnm": "双林桥",
+    "lgtd": "120.705375",
+    "wrz": null
+  },
+  {
+    "lttd": "30.878388",
+    "grz": null,
+    "stcd": "63310750",
+    "stnm": "枫南大桥",
+    "lgtd": "120.999322",
+    "wrz": null
+  },
+  {
+    "lttd": "31.017386",
+    "grz": null,
+    "stcd": "63312340",
+    "stnm": "大舜枢纽",
+    "lgtd": "120.906514",
+    "wrz": null
+  },
+  {
+    "lttd": "31.018267",
+    "grz": null,
+    "stcd": "63312300",
+    "stnm": "丁栅枢纽",
+    "lgtd": "120.9528",
+    "wrz": null
+  },
+  {
+    "lttd": "30.945692",
+    "grz": null,
+    "stcd": "63311750",
+    "stnm": "朱枫公路和尚泾",
+    "lgtd": "121.028539",
+    "wrz": null
+  },
+  {
+    "lttd": "30.982377",
+    "grz": null,
+    "stcd": "63312250",
+    "stnm": "俞汇北大桥",
+    "lgtd": "120.988517",
+    "wrz": null
+  },
+  {
+    "lttd": "30.886256",
+    "grz": null,
+    "stcd": "63205690",
+    "stnm": "太平桥",
+    "lgtd": "120.702609",
+    "wrz": null
+  },
+  {
+    "lttd": "30.914733",
+    "grz": null,
+    "stcd": "63311010",
+    "stnm": "清凉大桥",
+    "lgtd": "120.992189",
+    "wrz": null
+  },
+  {
+    "lttd": "30.951110",
+    "grz": null,
+    "stcd": "63311500",
+    "stnm": "横港大桥",
+    "lgtd": "120.973610",
+    "wrz": null
+  },
+  {
+    "lttd": "30.978642",
+    "grz": null,
+    "stcd": "63205670",
+    "stnm": "章湾圩公路桥",
+    "lgtd": "120.756256",
+    "wrz": null
+  },
+  {
+    "lttd": "31.001694",
+    "grz": null,
+    "stcd": "63312400",
+    "stnm": "陶庄(外)",
+    "lgtd": "120.830333",
+    "wrz": null
+  },
+  {
+    "lttd": "30.883888",
+    "grz": 4.00,
+    "stcd": "63301600",
+    "stnm": "王江泾",
+    "lgtd": "120.71",
+    "wrz": 3.60
+  },
+  {
+    "lttd": "30.997390",
+    "grz": 4.00,
+    "stcd": "63205350",
+    "stnm": "平望",
+    "lgtd": "120.635474",
+    "wrz": 3.70
+  },
+  {
+    "lttd": "30.755590",
+    "grz": 4.00,
+    "stcd": "63301150",
+    "stnm": "嘉兴",
+    "lgtd": "120.700424",
+    "wrz": 3.60
+  }
+]
+
+// 超警超保统计站点
+export const ALARM_STATISTICS_STATIONS = [
+  {
+    stcd: '63304700',
+    stnm: '太师桥',
+    wrz: 4.19,
+    grz: 4.29,
+  },
+  {
+    stcd: '63304650',
+    stnm: '思源',
+    wrz: 4.19,
+    grz: 4.29,
+  },
+  {
+    "stcd": "63301600",
+    "stnm": "王江泾",
+    "wrz": 3.60,
+    "grz": 4.00
+  },
+  {
+    "stcd": "63205350",
+    "stnm": "平望",
+    "wrz": 3.70,
+    "grz": 4.00
+  },
+  {
+    "stcd": "63301150",
+    "stnm": "嘉兴",
+    "wrz": 3.60,
+    "grz": 4.00
+  }
+]

src/views/Home.vue

@@ -5,12 +5,13 @@ import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
 import Chart from '@/components/chart.vue'
 import StripeTable from '@/components/StripeTable.vue'
-import {getRStLLMaxDate} from '@/api/home'
 import bus from '@/utils/bus'
-import {stations} from '@/utils/station'
+import {ALARM_STATISTICS_STATIONS, stations, YANGTZE_RIVER_DELTA_STATIONS} from '@/utils/station'
 import {jumpPage} from '@/utils'
-import {copyObj} from '@/utils/ruoyi'
+import {copyObj, formatd} from '@/utils/ruoyi'
 import {View} from "@/utils/tdInstruction";
+import {getWaterLevelAndFlowAndRainfallLatest} from "@/api/gx";
+import {getNearestHour} from "@/utils/date";
 
 const zmwjianjie = new URL('@/assets/images/zmw_jieshao.jpg', import.meta.url).href
 const zmwnd = new URL('@/assets/images/zmw_nd.jpg', import.meta.url).href
@@ -48,103 +49,97 @@ const tableColumns = [
 const tableData = reactive([])
 
 function reloadLeft2() {
-  const option = {
-    color: ['#fac858', '#ee6666'],
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      },
-      formatter(params) {
-        let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`
-        let info = params[0].axisValueLabel
-        for (let i = 0; i < params.length; i++) {
-          let param = params[i]
-          // if (param.value > 0) {
-          info += `<br/>${circle}${param.color}"></span> ${param.seriesName}: ${param.value}个`
-          // break
-          // }
-        }
-        return info
+  const statistics = {
+    normal: 0,
+    warning: 0,
+    danger: 0,
+  }
+
+  ALARM_STATISTICS_STATIONS.forEach(alarm => {
+    const data = tableData.find(d => d.stcd === alarm.stcd)
+    if (data) {
+      alarm['z'] = data.z
+      if (alarm.z >= alarm.grz) {
+        statistics.danger++
+      } else if (alarm.z >= alarm.wrz) {
+        statistics.warning++
+      } else {
+        statistics.normal++
       }
-    },
+    }
+  })
+
+  const option = {
+    color: ['#73c0de', '#fac858', '#ee6666'],
+    tooltip: {},
     legend: {
-      type: 'scroll',
-      icon: 'circle',
-      selectedMode: false,
+      orient: 'vertical',
+      left: 'left',
       textStyle: {
         color: '#fff'
-      }
-    },
-    grid: {
-      top: '14%',
-      left: '2%',
-      right: '2%',
-      bottom: '0%',
-      containLabel: true
-    },
-    yAxis: {
-      type: 'value',
-      name: '个',
-      max: value => value.max + 1,
-      nameTextStyle: {
-        color: '#02cacf'
-      },
-      axisLabel: {
-        color: '#02cacf'
-      }
-    },
-    xAxis: {
-      type: 'category',
-      axisLabel: {
-        // interval: 0,
-        // rotate: -45, //旋转的角度从 -90 度到 90 度。
-        color: '#02cacf'
       },
-      data: ['超保证', '超警戒']
     },
     series: [
       {
-        name: '超警戒（汛限）',
-        type: 'bar',
-        // stack: 'total',
-        // barWidth: '20%',
-        label: {
-          show: true,
-          position: 'top',
-          color: '#fff',
-          formatter: params => params.value > 0 ? params.value + '个' : ''
-        },
-        data: [0, 0, 0]
-      },
-      {
-        name: '超保证（设计）',
-        type: 'bar',
+        name: '水位',
+        type: 'pie',
+        data: [
+          {value: statistics.normal, name: '正常'},
+          {value: statistics.warning, name: '超警戒'},
+          {value: statistics.danger, name: '超保证'},
+        ],
         label: {
-          show: true,
-          position: 'top',
           color: '#fff',
-          formatter: params => params.value > 0 ? params.value + '个' : ''
+          formatter: '{b} {c} 个'
         },
-        data: [0, 0, 0]
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
+          }
+        }
       }
     ]
-  }
+  };
   left2Ref.value.loadChart(option)
 }
 
 function getStationList() {
-  getRStLLMaxDate().then(res => {
-    res.forEach(s => {
+  // getRStLLMaxDate().then(res => {
+  //   res.forEach(s => {
+  //     if (s.stcd === '701T0001') {
+  //       s.lgtd = '117.99223749'
+  //       s.lttd = '29.66659453'
+  //     }
+  //   })
+  //   tableData.push(...res)
+  //   initPoints()
+  // }).catch(() => {
+  // })
+  const tm = formatd(getNearestHour(new Date()), 'yyyy-MM-dd hh:mm:ss')
+  getWaterLevelAndFlowAndRainfallLatest({
+    stcds: YANGTZE_RIVER_DELTA_STATIONS.map(d => d.stcd).join(','),
+    tm
+  }).then(res => {
+    YANGTZE_RIVER_DELTA_STATIONS.forEach(s => {
+      const data = res.find(d => d.stcd === s.stcd)
+      if (data) {
+        s['tm'] = data.tm
+        s['z'] = data.z
+        s['q'] = data.q
+        s['drp'] = data.drp
+      }
       if (s.stcd === '701T0001') {
         s.lgtd = '117.99223749'
         s.lttd = '29.66659453'
       }
     })
-    tableData.push(...res)
+    tableData.push(...YANGTZE_RIVER_DELTA_STATIONS)
     initPoints()
-  }).catch(() => {
+    reloadLeft2()
   })
+
 }
 
 /**
@@ -156,7 +151,6 @@ function initPoints() {
     const station = stations.find(item => item.stcd === s.stcd)
     s.jump = !!station
   })
-
   const option = {
     view: {
       center: [104.114129, 37.550339],
@@ -203,7 +197,6 @@ function initPoints() {
 }
 
 onMounted(() => {
-  reloadLeft2()
   getStationList()
 })
 
@@ -232,21 +225,21 @@ bus.on('point_click', (data: any) => {
             <p class="introduce-text">
               位于浙江省嘉兴市经济技术开发区龙舟路753号，土地面积4.98亩，建筑面积1699.87平方米。
             </p>
-            <img :src="zmwjianjie" alt="" style="height: 50%;margin-top:8%;margin-left: 1%;" class="introduce-img"/>
+            <img :src="zmwjianjie" alt="" class="introduce-img" style="height: 50%;margin-top:8%;margin-left: 1%;"/>
           </el-carousel-item>
           <el-carousel-item>
             <h2 class="introduce-title">宁德水文水资源监测分中心</h2>
             <p class="introduce-text">
               位于福建省宁德市蕉城区金涵畲族乡金漳路10号，征地3亩，建筑面积1800平方米。紧邻福建省福建省宁德水文水资源勘测分中心管理的蕉城水文站。
             </p>
-            <img :src="zmwnd" alt="" style="height: 50%;margin-top:8%;margin-left: 1%;" class="introduce-img"/>
+            <img :src="zmwnd" alt="" class="introduce-img" style="height: 50%;margin-top:8%;margin-left: 1%;"/>
           </el-carousel-item>
           <el-carousel-item>
             <h2 class="introduce-title">黄山水文水资源监测分中心</h2>
             <p class="introduce-text">
               位于安徽省黄山市高新区蓬莱路3号，占地4亩，基地建成684平方米实验室及附属办公设施。
             </p>
-            <img :src="zmwhs" alt="" style="height: 50%;margin-top:8%;margin-left: 1%;" class="introduce-img"/>
+            <img :src="zmwhs" alt="" class="introduce-img" style="height: 50%;margin-top:8%;margin-left: 1%;"/>
           </el-carousel-item>
         </el-carousel>
       </card01>

src/views/Situational.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { computed, onMounted, reactive, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import {computed, onMounted, reactive, ref} from 'vue'
+import {useRoute} from 'vue-router'
 import RightFrame from '@/components/RightFrame.vue'
 import Card01 from '@/components/card/Card01.vue'
-import { getStation, stationSqList, stationSzList } from '@/utils/station'
+import {getStation, stationSqList, stationSzList} from '@/utils/station'
 import ColorTag from '@/components/tag/ColorTag.vue'
 import Chart from '@/components/Chart.vue'
 import DataTag from '@/components/tag/DataTag.vue'
@@ -13,12 +13,12 @@ import {
   getWaterLevelAndFlowListOfPageByStcd,
   getWaterQualityLatest
 } from '@/api/gx'
-import { formatd } from '@/utils/ruoyi'
-import { filterWaterQualitys } from '@/utils/unit'
-import { getLatestTimeWithMinuteMultipleOfFive } from '@/utils/date'
+import {formatd} from '@/utils/ruoyi'
+import {filterWaterQualitys} from '@/utils/unit'
+import {getLatestTimeWithMinuteMultipleOfFive, getNearestHour} from '@/utils/date'
 import StationRightButtonGroup from '@/components/StationRightButtonGroup.vue'
-import { useStationStore } from '@/stores/station'
-import { jumpPage } from '@/utils'
+import {useStationStore} from '@/stores/station'
+import {jumpPage} from '@/utils'
 import bus from '@/utils/bus'
 import moment from 'moment'
 
@@ -30,7 +30,7 @@ const left2Ref = ref(null)
 const left3Ref = ref(null)
 const right1Ref = ref(null)
 const right3Ref = ref(null)
-const wqData = ref({ d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20' })
+const wqData = ref({d1: '6', d2: '22.3', d3: '5', d4: '20', d5: '6', d6: '22.3', d7: '5', d8: '20'})
 const station = computed(() => getStation(route.params.stcd))
 const wlData = reactive({
   ss: '0',
@@ -72,12 +72,12 @@ async function reloadLeft2() {
       },
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf',
-        formatter: function(value) {
+        formatter: function (value) {
           // 使用 moment.js 进行时间格式化
           return moment(value).format('HH:mm')
         }
       },
-      axisTick: { show: false },
+      axisTick: {show: false},
       data: flowData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
     }],
     yAxis: [{
@@ -122,8 +122,8 @@ async function reloadLeft2() {
 
 async function reloadLeft3() {
   const stcds = stationSqList.map(s => s.stcd).join(',')
-  const tm = formatd(getLatestTimeWithMinuteMultipleOfFive(new Date(), 20), 'yyyy-MM-dd hh:mm:ss')
-  const waterData = await getWaterLevelAndFlowLatest({ stcds}).then(res => res.data)
+  const tm = formatd(getNearestHour(), 'yyyy-MM-dd hh:mm:ss')
+  const waterData = await getWaterLevelAndFlowLatest({stcds, tm}).then(res => res.data)
 
   const currentStationData = waterData.find(d => d.stcd === route.params.stcd)
   if (currentStationData) {
@@ -162,7 +162,7 @@ async function reloadLeft3() {
         rotate: 45, // 旋转标签，使之不垂直
         interval: 0  // 显示所有标签
       },
-      axisTick: { show: false },
+      axisTick: {show: false},
       data: stationSqList.map(s => s.stnm)
     }],
     yAxis: [{
@@ -237,7 +237,7 @@ async function reloadRight1() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: { show: false },
+      axisTick: {show: false},
       data: rainfallData.map(item => item.tm ? item.tm.substring(11, 16) + '\n' + item.tm.substring(5, 10) : '')
     }],
     yAxis: [{
@@ -278,7 +278,7 @@ async function reloadRight1() {
 async function reloadRight3() {
   const stcds = stationSzList.map(s => s.stcd).join(',')
   const tm = formatd(getLatestTimeWithMinuteMultipleOfFive(new Date(), 20), 'yyyy-MM-dd hh:mm:ss')
-  const waterData = await getWaterQualityLatest({ stcds }).then(res => res.data)
+  const waterData = await getWaterQualityLatest({stcds}).then(res => res.data)
   const list = []
 
   stationSzList.forEach(s => {
@@ -327,7 +327,7 @@ async function reloadRight3() {
       axisLabel: { // 坐标轴刻度标签的相关设置
         color: '#02cacf'
       },
-      axisTick: { show: false },
+      axisTick: {show: false},
       data: list.map(s => s.stnm)
     }],
     yAxis: [{
@@ -370,7 +370,7 @@ async function reloadRight3() {
  * 获取最新水质数据
  */
 function getLatestWaterQuality() {
-  getWaterQualityLatest({ stcds: route.params.stcd }).then(res => {
+  getWaterQualityLatest({stcds: route.params.stcd}).then(res => {
     const data = res.data[0]
     wqData.value = {
       d1: data.ph,
@@ -426,26 +426,26 @@ onMounted(() => {
             <div class="difang-water-level">
               <span class="difang-water-level-value">{{ wlData.ss }}m</span>
             </div>
-            <img :src="dibaImage" alt="" class="difang-image" />
+            <img :src="dibaImage" alt="" class="difang-image"/>
           </el-col>
           <el-col :span="8"
                   style="height: 66%;margin-bottom: 1%;display: flex;flex-direction: column;justify-content: space-between;">
             <color-tag :value="wlData.ss" label="实时水位" style="height: 48%;" unit="m"
-                       @click="handleControlWaterLevel(wlData.ss)" />
+                       @click="handleControlWaterLevel(wlData.ss)"/>
             <color-tag :value="wlData.zg" label="历史最高水位" style="height: 48%;" unit="m"
-                       @click="handleControlWaterLevel(wlData.zg)" />
+                       @click="handleControlWaterLevel(wlData.zg)"/>
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.bz" backgroundColor="#bb232f" label="保证水位" unit="m"
-                       @click="handleControlWaterLevel(wlData.bz)" />
+                       @click="handleControlWaterLevel(wlData.bz)"/>
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.jj" backgroundColor="#b38b30" label="警戒水位" unit="m"
-                       @click="handleControlWaterLevel(wlData.jj)" />
+                       @click="handleControlWaterLevel(wlData.jj)"/>
           </el-col>
           <el-col :span="8" style="height: 33%;">
             <color-tag :value="wlData.zd" backgroundColor="#adcbe0" label="历史最低水位" unit="m"
-                       @click="handleControlWaterLevel(wlData.zd)" />
+                       @click="handleControlWaterLevel(wlData.zd)"/>
           </el-col>
         </el-row>
       </card01>