河道监测

src/api/globalMap/riverMonitor.ts

@@ -24,3 +24,11 @@ export const getRiverWaterStatus = () => {
     method: 'get'
   });
 };
+
+// 降雨量明细
+export const getRainfallInfoByCode = (code) => {
+  return request({
+    url: '/api/rainfall/info/' + code,
+    method: 'get'
+  });
+};

src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -54,7 +54,7 @@
                 </div>
                 <div class="info-item">
                   <div>水系站址：</div>
-                  <div>{{ selectRow.data3 }}</div>
+                  <div>{{ selectRow.address }}</div>
                 </div>
                 <div class="info-item">
                   <div>超警戒水位：</div>
@@ -62,7 +62,7 @@
                 </div>
                 <div class="info-item">
                   <div>时间：</div>
-                  <div>{{ selectRow.data5 }}</div>
+                  <div>{{ selectRow.time }}</div>
                 </div>
               </div>
             </div>
@@ -96,7 +96,7 @@
 
 <script lang="ts" setup name="RiverMonitor">
 import { option1, option2 } from './echartOptions';
-import { getRiverCourseLevel, getRiverList, getRiverWaterStatus } from '@/api/globalMap/riverMonitor';
+import { getRainfallInfoByCode, getRiverCourseLevel, getRiverList, getRiverWaterStatus } from '@/api/globalMap/riverMonitor';
 import { parseTime, validateNum } from '@/utils/ruoyi';
 import { getVideoInfo } from '@/api/globalMap';
 
@@ -125,14 +125,6 @@ const initData = async () => {
 initData();
 
 // 弹窗数据
-const detailData = reactive({
-  name: '茂名',
-  data1: '粤西沿海',
-  data2: '粤西沿海诸河',
-  data3: '广东省茂名市茂南区站',
-  data4: '-1.32m',
-  data5: '2024-08-23 10:00:00'
-});
 let chartOption1 = ref(option1);
 let chartOption2 = ref(option2);
 let showDialog = ref(false);
@@ -152,25 +144,33 @@ const queryParams2 = reactive({
 });
 let selectRow = ref({
   name: '',
-  waterDiff: ''
+  waterDiff: '',
+  address: '',
+  time: ''
 });
 const handleShowDialog = (row) => {
   showDialog.value = false;
-  selectRow.value = {
-    name: '',
-    waterDiff: ''
-  };
+  selectRow.value = row;
   videoMonitorData.value = [];
   nextTick(() => {
-    chartOption1.value.xAxis.data = ['12时', '15时', '18时', '21时', '0时', '3时', '6时', '9时'];
-    chartOption1.value.series[0].data = [123, 232, '', '', '', '', '', ''];
-    chartOption1.value.series[1].data = [123, 232, '', '', '', '', '', ''];
-    chartOption1.value.series[2].data = [123, 232, '', '', '', '', '', ''];
+    getRainfallInfoByCode(row.code).then((res) => {
+      const data = res.data.rainfallHistory;
+      let arr1 = [];
+      let arr2 = [];
+      data.forEach((item) => {
+        arr1.push(item.hour);
+        arr2.push(item.value);
+      });
+      chartOption1.value.xAxis.data = arr1;
+      chartOption1.value.series[0].data = arr2;
+      chartOption1.value.series[1].data = arr2;
+      chartOption1.value.series[2].data = arr2;
+    });
     getRiverCourseLevel({ code: row.code }).then((res) => {
       const data = res.data.list;
       const time = [];
       const resultData = [];
-      selectRow.value = data;
+
       data.forEach((item) => {
         time.push(parseTime(item.time, '{h}'));
         resultData.push(item.water_level);
@@ -222,11 +222,13 @@ const handleShowDialog = (row) => {
     height: 459px;
     background: url('@/assets/images/map/rightMenu/box2.png') no-repeat;
     padding: 11px;
+    overflow: auto;
     .info-header {
-      width: 311px;
+      width: 100%;
       height: 56px;
       padding-left: 50px;
       background: url(@/assets/images/map/rightMenu/titleBox1.png) no-repeat;
+      background-size: 311px 56px;
       .info-title {
         font-size: 44px;
       }
@@ -238,11 +240,12 @@ const handleShowDialog = (row) => {
     }
     .info-item {
       display: flex;
-      align-items: center;
-      height: 72px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      min-height: 72px;
+      div {
+        &:nth-child(1) {
+          flex-shrink: 0;
+        }
+      }
     }
   }
   .box1 {