zqq:更改请求接口

src/api/remoteSensingSourceData/index.js

@@ -1,8 +1,18 @@
 import request from '/@/utils/request';
 
+const moduleName = 'zqq-biz-vordm';
+
 export const getRemoteSensingSourceData = (param) => {
 	return request({
-		url: '/api/biz-vordm/remoteSensingSourceData',
+		url: '/api/' + moduleName + '/ui/remoteSensingSourceData',
+		method: 'get',
+		params: param,
+	});
+};
+
+export const getSelectionCondition = (param) => {
+	return request({
+		url: '/api/' + moduleName + '/ui/selectCondition',
 		method: 'get',
 		params: param,
 	});

src/utils/request.js

@@ -62,8 +62,8 @@ service.interceptors.response.use(
 			if (error.response.data.error_description) ElMessage.error(error.response.data.error_description);
 			else {
 				//if (error.response.data) ElMessage.error(error.response.statusText);
-				Session.clear(); // 清除浏览器全部临时缓存
-				window.location.href = '/'; // 去登录页
+				//Session.clear(); // 清除浏览器全部临时缓存
+				//window.location.href = '/'; // 去登录页
 				ElMessage.error('接口路径找不到');
 			}
 		}

src/views/dataService/remoteSensingData/components/retrievalCondition.vue

@@ -4,35 +4,39 @@
       <!-- 选择灾害类型下拉框 -->
       <el-select v-model="state.value_disasterType"
                  size="default"
-                 placeholder="Select disaster type">
+                 clearable
+                 placeholder="Select disaster type"
+                 @visible-change="searchDisasterType">
         <el-option v-for="item in state.options_disasterType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" />
       </el-select>
       <!-- 选择灾害时间下拉框 -->
-      <el-date-picker v-model="state.value_disasterTime"
+      <el-date-picker v-model="state.value_disasterDate"
                       type="date"
                       placeholder="Select disaster time"
                       format="YYYY-MM-DD"
                       value-format="YYYY-MM-DD"
                       class="ml10"
-                      size="default" />
-      <!-- 选择受灾地 -->
-      <el-input v-model="state.value_disasterCountry"
-                style="width: 20%;margin-left: 1%;"
-                placeholder="请输入受灾地" />
-
-      <!-- 选择灾害事件下拉框 -->
-      <!-- <el-select v-model="state.value_disasterEvent"
                       size="default"
-                     placeholder="Select disaster event"
-                     class="ml10">
-            <el-option v-for="item in options_disasterEvent"
+                      @focus="searchDisasterDate" />
+      <!-- 选择受灾地 -->
+      <!-- <el-input v-model="state.value_disasterCountry"
+                style="width: 20%;margin-left: 1%;"
+                placeholder="请输入受灾地" /> -->
+
+      <el-select v-model="state.value_disasterCountry"
+                 size="default"
+                 clearable
+                 placeholder="Select disaster country"
+                 style="margin-left: 0.6%;"
+                 @visible-change="searchDisasterCountry">
+        <el-option v-for="item in state.options_disasterCountry"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" />
-          </el-select> -->
+      </el-select>
 
       <el-button size="default"
                  type="primary"
@@ -134,8 +138,8 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
-import { getRemoteSensingSourceData } from "/@/api/remoteSensingSourceData/index.js";
+import { ref, reactive, onMounted } from 'vue';
+import { getRemoteSensingSourceData, getSelectionCondition } from "/@/api/remoteSensingSourceData/index.js";
 
 const state = reactive({
   tableData: {
@@ -149,33 +153,11 @@ const state = reactive({
     },
   },
   //选择灾害类型下拉框
-  options_disasterType: [{
-    value: 'Earthquake',
-    label: 'Earthquake',
-  },
-  {
-    value: 'Hurricane',
-    label: 'Hurricane',
-  },
-  {
-    value: 'Flood',
-    label: 'Flood',
-  },
-  {
-    value: 'Volcano',
-    label: 'Volcano',
-  },
-  {
-    value: 'Drought',
-    label: 'Drought',
-  },
-  {
-    value: 'Landslide',
-    label: 'Landslide',
-  }],
+  options_disasterType: [],
   value_disasterType: '',
-  value_disasterTime: '',
-  value_disasterCountry: '',
+  value_disasterDate: '',
+  options_disasterCountry: [],
+  value_disasterCountry: [],
   requestData: [],
 })
 
@@ -183,24 +165,89 @@ const state = reactive({
 const searchRemoteSensingSourceData = () => {
   const select = {
     "disasterType": state.value_disasterType,
-    "disasterTime": state.value_disasterTime,
+    "disasterDate": state.value_disasterDate,
     "disasterCountry": state.value_disasterCountry,
-    // "size": state.tableData.param.pageSize,
-    // "current": state.tableData.param.pageNum
+    "size": state.tableData.param.pageSize,
+    "current": state.tableData.param.pageNum
   }
 
-
   // 请求接口
   getRemoteSensingSourceData(select).then(
     (res) => {
-      state.requestData = res;
-      state.tableData.total = res.length;
-      console.log(res)
-      //   state.tableData.param.pageNum = res.current;
-      //   state.tableData.param.pageSize = res.size;
+      state.requestData = res.records;
+      state.tableData.total = res.total;
+      state.tableData.param.pageNum = res.current;
+      state.tableData.param.pageSize = res.size;
     })
 }
 
+// 查询受灾国家
+const searchDisasterCountry = () => {
+  const selectCountry = {
+    "disasterType": state.value_disasterType,
+    "disasterDate": state.value_disasterDate,
+    "name": "disaster_country"
+  }
+  if (state.options_disasterCountry) {
+    getSelectionCondition(selectCountry).then(
+      (res) => {
+        state.options_disasterCountry = []
+        for (let index = 0; index < res.length; index++) {
+          let obj = {}
+          obj.value = res[index].name
+          obj.label = res[index].name
+          state.options_disasterCountry.push(obj)
+        }
+      }
+    )
+  }
+}
+
+// 查询灾害类型
+const searchDisasterType = () => {
+  const selectType = {
+    "disasterCountry": state.value_disasterCountry,
+    "disasterDate": state.value_disasterDate,
+    "name": "disaster_type"
+  }
+  if (state.options_disasterType) {
+    getSelectionCondition(selectType).then(
+      (res) => {
+        state.options_disasterType = []
+        for (let index = 0; index < res.length; index++) {
+          let obj = {}
+          obj.value = res[index].name
+          obj.label = res[index].name
+          state.options_disasterType.push(obj)
+        }
+      }
+    )
+  }
+}
+
+// 查询灾害时间
+const searchDisasterDate = () => {
+  const selectDate = {
+    "disasterType": state.value_disasterType,
+    "disasterCountry": state.value_disasterCountry,
+    "name": "disaster_time"
+  }
+  if (state.value_disasterDate == '') {
+    getSelectionCondition(selectDate).then(
+      (res) => {
+        state.value_disasterDate = res[0].name
+      }
+    )
+  }
+  else {
+    state.value_disasterDate = ''
+    getSelectionCondition(selectDate).then(
+      (res) => {
+        state.value_disasterDate = res[0].name
+      })
+  }
+}
+
 //每页显示条数改变
 const onHandleSizeChange = (val) => {
   // searchContent.value = "";
@@ -215,6 +262,9 @@ const onHandleCurrentChange = (val) => {
   //   studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
 };
 
+onMounted(() => {
+
+})
 </script>
 
 <style scoped lang="scss">