优化

src/views/disasterRiskMonitor/rainfall.vue

@@ -8,7 +8,7 @@
           v-for="(item, index) in option1"
           :key="index"
           :class="
-            queryParams.query.value1 === '1' &&
+            queryParams.value1 === 1 &&
             queryParams.query.timeOption === item.value
               ? 'box-tag tag-active'
               : 'box-tag'
@@ -24,7 +24,8 @@
           v-for="(item, index) in option1"
           :key="index"
           :class="
-            queryParams.value1 === '2' && queryParams.timeOption === item.value
+            queryParams.value1 === 2 &&
+            queryParams.query.timeOption === item.value
               ? 'box-tag tag-active'
               : 'box-tag'
           "
@@ -78,7 +79,8 @@
     </div>
     <van-popup v-model:show="showLevelPicker" round position="bottom">
       <van-picker
-        :columns="levelColumns"
+        :columns="district_type"
+        :columns-field-names="customFieldName"
         @cancel="showLevelPicker = false"
         @confirm="onSelectLevelConfirm"
       />
@@ -89,8 +91,13 @@
 <script lang="ts" setup>
 import { ElTable, ElTableColumn } from "element-plus";
 import icon1 from "@/assets/images/disasterRiskMonitor/rainfall/icon1.png";
-import {getRainfallRange2, getRainfallRank} from "@/api/globalMap/rainMonitor";
+import {
+  getRainfallRange2,
+  getRainfallRank
+} from "@/api/globalMap/rainMonitor";
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { district_type } = toRefs<any>(proxy?.useDict("district_type"));
 const option1 = reactive([
   { text: "1h", value: "1" },
   { text: "3h", value: "3" },
@@ -102,6 +109,10 @@ const labelData = reactive({
   type: "",
   area: ""
 });
+const customFieldName = reactive({
+  text: "label",
+  value: "value"
+});
 const queryParams = reactive({
   current: 1,
   size: 10,
@@ -110,11 +121,12 @@ const queryParams = reactive({
     timeOption: "24",
     area: "",
     sort: "desc"
-  }
+  },
+  value1: 1
 });
-const data = reactive({
+const queryParamsData = reactive({
   sort: "desc",
-  history_time: "1",
+  history_time: "24",
   future_time: "",
   area: "",
   township: ""
@@ -128,7 +140,7 @@ const initData = () => {
   // getRainfallRange2(queryParams).then(res => {
   //   detailsData.value.dataList = res.rows;
   // });
-  getRainfallRank(data).then(res => {
+  getRainfallRank(queryParamsData).then(res => {
     detailsData.value.dataList = res.data;
   });
   detailsData.value.img = icon1;
@@ -142,13 +154,20 @@ const levelColumns = ref([
   { text: "电白", value: "2" },
   { text: "高州", value: "3" }
 ]);
+// const levelColumns = ref([
+//   { text: "全部", value: "" },
+//   ...(district_type.value?.map(item => ({
+//     text: item.dictLabel,
+//     value: item.dictValue
+//   })) || [])
+// ]);
 let showLevelPicker = ref(false);
 const onSelectLevelConfirm = ({ selectedOptions }) => {
   showLevelPicker.value = false;
   labelData.area =
-    selectedOptions[0].text === "全部" ? "县区" : selectedOptions[0].text;
+    selectedOptions[0].text === "全部" ? "县区" : selectedOptions[0].label;
   // queryParams.area = selectedOptions[0].value;
-  data.area = selectedOptions[0].value;
+  queryParamsData.area = selectedOptions[0].label;
   initData();
 };
 // const handleClickMenu = (value1, timeOption) => {
@@ -159,13 +178,20 @@ const onSelectLevelConfirm = ({ selectedOptions }) => {
 //   initData();
 // };
 const handleClickMenu = (value1, timeOption) => {
-  data.history_time = timeOption;
+  queryParams.value1 = value1;
+  queryParams.query.timeOption = timeOption;
+  queryParamsData.history_time = timeOption;
+  queryParamsData.future_time = ""; //选择历史时间时将未来时间参数清空
   initData();
 };
 const handleClickMenu2 = (value1, timeOption) => {
-  data.future_time = timeOption;
+  queryParams.value1 = value1;
+  queryParams.query.timeOption = timeOption;
+  queryParamsData.future_time = timeOption;
+  queryParamsData.history_time = "";
   initData();
 };
+
 // table样式
 const getTableRowClass = ({ rowIndex }) => {
   return rowIndex % 2 === 0 ? "" : "common-table-tr";