优化

src/api/globalMap/rainMonitor.ts

@@ -1,10 +1,10 @@
-import request from '@/utils/request';
+import request from "@/utils/request";
 
 // 水利站点降水分析统计
-export const getRainfallStatisticsCount = (timeOption) => {
+export const getRainfallStatisticsCount = timeOption => {
   return request({
-    url: '/api/gateway/v2/get_rainfall_statistics_count',
-    method: 'post',
+    url: "/api/gateway/v2/get_rainfall_statistics_count",
+    method: "post",
     data: {
       query: {
         timeOption
@@ -14,41 +14,50 @@ export const getRainfallStatisticsCount = (timeOption) => {
 };
 
 // 降雨量排行
-export const getRainfallRange1 = (params) => {
+export const getRainfallRange1 = params => {
   return request({
-    url: '/api/gateway/v1/get_rainfall_range',
-    method: 'post',
+    url: "/api/gateway/v1/get_rainfall_range",
+    method: "post",
     data: params
   });
 };
 
-export const getRainfallRange2 = (params) => {
+export const getRainfallRange2 = params => {
   return request({
-    url: '/api/gateway/v2/get_rainfall_range',
-    method: 'post',
+    url: "/api/gateway/v2/get_rainfall_range",
+    method: "post",
     data: params
   });
 };
 // 降雨量统计
 export const getRainfallInfo = (code: string) => {
   return request({
-    url: '/api/rainfall/info/' + code,
-    method: 'get'
+    url: "/api/rainfall/info/" + code,
+    method: "get"
   });
 };
 // 影响分析
-export const getRainfallTownNumCount = (params) => {
+export const getRainfallTownNumCount = params => {
   return request({
-    url: '/api/gateway/v2/get_rainfall_town_num_count',
-    method: 'post',
+    url: "/api/gateway/v2/get_rainfall_town_num_count",
+    method: "post",
     data: params
   });
 };
 
-export const getRainfallTownDataExport = (params) => {
+export const getRainfallTownDataExport = params => {
   return request({
-    url: '/api/gateway/v1/get_rainfall_town_data_export',
-    method: 'post',
+    url: "/api/gateway/v1/get_rainfall_town_data_export",
+    method: "post",
     data: params
   });
 };
+
+//降雨量排行
+export const getRainfallRank = data => {
+  return request({
+    url: "/api/rainfall/get_rainfall_range",
+    method: "get",
+    params: data
+  });
+};

src/views/disasterRiskMonitor/rainfall.vue

@@ -5,14 +5,15 @@
       <div class="box-item">
         <div class="box-label">实况：</div>
         <div
-            v-for="(item, index) in option1"
-            :key="index"
-            :class="
-            queryParams.query.value1 === '1' && queryParams.query.timeOption === item.value
+          v-for="(item, index) in option1"
+          :key="index"
+          :class="
+            queryParams.query.value1 === '1' &&
+            queryParams.query.timeOption === item.value
               ? 'box-tag tag-active'
               : 'box-tag'
           "
-            @click="handleClickMenu('1', item.value)"
+          @click="handleClickMenu('1', item.value)"
         >
           {{ item.text }}
         </div>
@@ -20,14 +21,14 @@
       <div class="box-item">
         <div class="box-label">预报：</div>
         <div
-            v-for="(item, index) in option1"
-            :key="index"
-            :class="
+          v-for="(item, index) in option1"
+          :key="index"
+          :class="
             queryParams.value1 === '2' && queryParams.timeOption === item.value
               ? 'box-tag tag-active'
               : 'box-tag'
           "
-            @click="handleClickMenu('2', item.value)"
+          @click="handleClickMenu2('2', item.value)"
         >
           {{ item.text }}
         </div>
@@ -38,20 +39,20 @@
       <div class="text-box">
         <i class="icon-chart" />
         <van-text-ellipsis
-            class="text"
-            :content="detailsData.text"
-            rows="3"
-            expand-text="展开"
-            collapse-text="收起"
+          class="text"
+          :content="detailsData.text"
+          rows="3"
+          expand-text="展开"
+          collapse-text="收起"
         />
       </div>
     </div>
     <div class="box3">
       <el-table
-          :data="detailsData.dataList"
-          header-cell-class-name="common-table-header"
-          :row-class-name="getTableRowClass"
-          table-layout="auto"
+        :data="detailsData.dataList"
+        header-cell-class-name="common-table-header"
+        :row-class-name="getTableRowClass"
+        table-layout="auto"
       >
         <el-table-column prop="area" align="center">
           <template #header>
@@ -62,24 +63,24 @@
           </template>
         </el-table-column>
         <el-table-column
-            label="站址"
-            prop="address"
-            align="center"
-            width="160px"
+          label="站址"
+          prop="address"
+          align="center"
+          width="160px"
         />
         <el-table-column
-            label="雨量(mm)"
-            prop="rainfall"
-            align="center"
-            sortable
+          label="雨量(mm)"
+          prop="rainfall"
+          align="center"
+          sortable
         />
       </el-table>
     </div>
     <van-popup v-model:show="showLevelPicker" round position="bottom">
       <van-picker
-          :columns="levelColumns"
-          @cancel="showLevelPicker = false"
-          @confirm="onSelectLevelConfirm"
+        :columns="levelColumns"
+        @cancel="showLevelPicker = false"
+        @confirm="onSelectLevelConfirm"
       />
     </van-popup>
   </div>
@@ -87,8 +88,8 @@
 
 <script lang="ts" setup>
 import { ElTable, ElTableColumn } from "element-plus";
-import icon1 from '@/assets/images/disasterRiskMonitor/rainfall/icon1.png'
-import {getRainfallRange2} from "@/api/globalMap/rainMonitor";
+import icon1 from "@/assets/images/disasterRiskMonitor/rainfall/icon1.png";
+import {getRainfallRange2, getRainfallRank} from "@/api/globalMap/rainMonitor";
 
 const option1 = reactive([
   { text: "1h", value: "1" },
@@ -111,14 +112,24 @@ const queryParams = reactive({
     sort: "desc"
   }
 });
+const data = reactive({
+  sort: "desc",
+  history_time: "1",
+  future_time: "",
+  area: "",
+  township: ""
+});
 const detailsData = ref({
   img: "",
   text: "",
   dataList: []
 });
 const initData = () => {
-  getRainfallRange2(queryParams).then((res) => {
-    detailsData.value.dataList = res.rows;
+  // getRainfallRange2(queryParams).then(res => {
+  //   detailsData.value.dataList = res.rows;
+  // });
+  getRainfallRank(data).then(res => {
+    detailsData.value.dataList = res.data;
   });
   detailsData.value.img = icon1;
   detailsData.value.text = "据气象水文监测，24日至25日16时，茂名无降水。";
@@ -135,13 +146,24 @@ let showLevelPicker = ref(false);
 const onSelectLevelConfirm = ({ selectedOptions }) => {
   showLevelPicker.value = false;
   labelData.area =
-      selectedOptions[0].text === "全部" ? "县区" : selectedOptions[0].text;
-  queryParams.area = selectedOptions[0].value;
+    selectedOptions[0].text === "全部" ? "县区" : selectedOptions[0].text;
+  // queryParams.area = selectedOptions[0].value;
+  data.area = selectedOptions[0].value;
   initData();
 };
+// const handleClickMenu = (value1, timeOption) => {
+//   // queryParams.value1 = value1;
+//   // queryParams.timeOption = timeOption;
+//   data.value1 = value1;
+//   data.timeOption = timeOption;
+//   initData();
+// };
 const handleClickMenu = (value1, timeOption) => {
-  queryParams.value1 = value1;
-  queryParams.timeOption = timeOption;
+  data.history_time = timeOption;
+  initData();
+};
+const handleClickMenu2 = (value1, timeOption) => {
+  data.future_time = timeOption;
   initData();
 };
 // table样式
@@ -171,12 +193,12 @@ onMounted(() => {
     box-shadow: 0 0 4px 0 #4554661a;
     border-radius: 4px;
     background-image: linear-gradient(
-            to bottom,
-            #f3f7fd 0%,
-            #f7fafe 20px,
-            #fcfdff 50px,
-            #ffffff 50px,
-            #ffffff 100%
+      to bottom,
+      #f3f7fd 0%,
+      #f7fafe 20px,
+      #fcfdff 50px,
+      #ffffff 50px,
+      #ffffff 100%
     );
     padding: 10px 16px;
     margin-bottom: 10px;
@@ -214,7 +236,8 @@ onMounted(() => {
       display: inline-block;
       width: 16px;
       height: 17px;
-      background: url("@/assets/images/disasterRiskMonitor/galeDisaster/chart.png") no-repeat;
+      background: url("@/assets/images/disasterRiskMonitor/galeDisaster/chart.png")
+        no-repeat;
       background-size: 100% 100%;
       margin-right: 7px;
       flex-shrink: 0;