From cd9cf8ec3f11b07c87f415b2a8c6a274dabd2dde Mon Sep 17 00:00:00 2001
From: qqGroup0 <253114712@qq.com>
Date: Mon, 17 Apr 2023 16:31:47 +0800
Subject: [PATCH] =?UTF-8?q?zqq:=E9=81=A5=E6=84=9F=E5=BD=B1=E5=83=8F?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=B8=8B=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../remoteSensingSourceData.js                |  12 +
 .../components/retrievalCondition.vue         | 292 ++++++++++++------
 .../components/searchCondition.vue            |   4 +
 vite.config.js                                |   2 +-
 4 files changed, 210 insertions(+), 100 deletions(-)

diff --git a/src/api/remoteSensingSourceData/remoteSensingSourceData.js b/src/api/remoteSensingSourceData/remoteSensingSourceData.js
index 1c905ea..0316a81 100644
--- a/src/api/remoteSensingSourceData/remoteSensingSourceData.js
+++ b/src/api/remoteSensingSourceData/remoteSensingSourceData.js
@@ -16,3 +16,15 @@ export const getSelectionCondition = (param) => {
 		params: param,
 	});
 };
+
+export const getPagesRemoteSensingSourceData = (current, size, params) => {
+	return request({
+		url: '/api/' + moduleName + '/ui/remoteSensing/PagesData',
+		method: 'get',
+		params: {
+			current,
+			size,
+			...params,
+		},
+	});
+};
diff --git a/src/views/dataService/remoteSensingData/components/retrievalCondition.vue b/src/views/dataService/remoteSensingData/components/retrievalCondition.vue
index d221d06..6f7a636 100644
--- a/src/views/dataService/remoteSensingData/components/retrievalCondition.vue
+++ b/src/views/dataService/remoteSensingData/components/retrievalCondition.vue
@@ -1,93 +1,130 @@
 <template>
   <div>
-    <div class="system-user-search mb15">
-      <!-- 选择灾害类型 -->
-      <el-select v-model="state.value_disasterType"
-                 size="default"
-                 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_disasterDate"
-                      type="date"
-                      placeholder="Select disaster time"
-                      format="YYYY-MM-DD"
-                      value-format="YYYY-MM-DD"
-                      class="ml10"
-                      size="default"
-                      @focus="searchDisasterDate" />
-      <!-- 选择受灾地 -->
-      <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-row :gutter="22">
+      <el-col :span="10">
+        <div class="system-role-padding layout-padding-auto layout-padding-view">
+          <el-table :data="state.disasterData.data"
+                    v-loading="state.disasterData.loading"
+                    style="width: 100%"
+                    highlight-current-row
+                    @row-click="tableClick">
+            <el-table-column type="index"
+                             label="ID"
+                             width="50" />
+            <el-table-column prop="disasterType"
+                             label="Disaster type"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterCountry"
+                             label="disaster country"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterTime"
+                             label="disaster time"
+                             show-overflow-tooltip></el-table-column>
+          </el-table>
+          <el-pagination @size-change="onHandleDisasterSizeChange"
+                         @current-change="onHandleDisasterCurrentChange"
+                         class="mt15"
+                         :pager-count="5"
+                         :page-sizes="[10, 20, 30]"
+                         v-model:current-page="state.disasterData.param.pageNum"
+                         background
+                         v-model:page-size="state.disasterData.param.pageSize"
+                         layout="total, sizes, prev, pager, next, jumper"
+                         :total="state.disasterData.total">
+          </el-pagination>
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <div class="system-role-padding layout-padding-auto layout-padding-view">
+          <div class="system-user-search mb15"
+               style="display: flex;margin-left: 10px;margin-top: 10px;">
+            <!-- 选择灾害类型 -->
+            <el-select v-model="state.value_disasterType"
+                       size="default"
+                       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_disasterDate"
+                            type="date"
+                            placeholder="Select disaster time"
+                            format="YYYY-MM-DD"
+                            value-format="YYYY-MM-DD"
+                            class="ml10"
+                            size="default"
+                            @focus="searchDisasterDate" />
+            <!-- 选择受灾地 -->
+            <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-button size="default"
-                 type="primary"
-                 class="ml10"
-                 @click="searchRemoteSensingSourceData">
-        <el-icon>
-          <ele-Search />
-        </el-icon>
-        Search
-      </el-button>
+            <el-button size="default"
+                       type="primary"
+                       class="ml10"
+                       @click="searchRemoteSensingSourceData">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              Search
+            </el-button>
 
-    </div>
-    <!-- id，卫星类型，生产日期，产品谱段，产品分辨率，云覆盖量，景中心经纬度，元数据下载链接，缩略图   支撑单位 -->
-    <el-table :data="state.requestData"
-              style="width: 100%">
-      <el-table-column type="index"
-                       label="Index"
-                       align="center"
-                       width="80"></el-table-column>
-      <el-table-column prop="satelliteCode"
-                       label="Satellite code"
-                       align="center"
-                       show-overflow-tooltip></el-table-column>
-      <el-table-column prop="productTime"
-                       label="Product time"
-                       align="center"
-                       show-overflow-tooltip></el-table-column>
-      <el-table-column prop="productBandsNum"
-                       label="Product bands num"
-                       align="center"
-                       show-overflow-tooltip></el-table-column>
-      <el-table-column prop="productResolution"
-                       label="Product resolution(m)"
-                       align="center"
-                       show-overflow-tooltip></el-table-column>
-      <el-table-column prop="cloudCover"
-                       label="Cloud cover(%)"
-                       align="center"
-                       show-overflow-tooltip></el-table-column>
-      <el-table-column prop="sourceOrganization"
-                       label="Source organization"
-                       align="center"
-                       show-overflow-tooltip></el-table-column>
-      <el-table-column prop="downloadUrl"
-                       label="Download url"
-                       align="center"
-                       show-overflow-tooltip> </el-table-column>
-      <!-- <el-table-column prop="Operate"
+          </div>
+          <!-- id，卫星类型，生产日期，产品谱段，产品分辨率，云覆盖量，景中心经纬度，元数据下载链接，缩略图   支撑单位 -->
+          <el-table :data="state.requestData"
+                    style="width: 100%">
+            <el-table-column type="index"
+                             label="Index"
+                             align="center"
+                             width="80"></el-table-column>
+            <el-table-column prop="satelliteCode"
+                             label="Satellite code"
+                             align="center"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="productTime"
+                             label="Product time"
+                             align="center"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="productBandsNum"
+                             label="Product bands num"
+                             align="center"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="productResolution"
+                             label="Product resolution(m)"
+                             align="center"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="cloudCover"
+                             label="Cloud cover(%)"
+                             align="center"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="sourceOrganization"
+                             label="Source organization"
+                             align="center"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="downloadUrl"
+                             label="Download url"
+                             align="center"
+                             show-overflow-tooltip> </el-table-column>
+            <!-- <el-table-column prop="Operate"
                        label="Operate"
                        show-overflow-tooltip></el-table-column> -->
 
-      <!-- <template slot-scope="scope">
+            <!-- <template slot-scope="scope">
           <el-link :href="scope.row.downloadUrl">查看详情</el-link>
         </template> -->
-      <!-- <el-table-column prop="Longitude"
+            <!-- <el-table-column prop="Longitude"
                            label="Longitude"
                            show-overflow-tooltip></el-table-column>
           <el-table-column prop="Latitude"
@@ -101,9 +138,9 @@
                            label="Response status"
                            show-overflow-tooltip></el-table-column> -->
 
-      <!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
+            <!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
 						<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
-      <!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
+            <!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
 							<template #default="scope">
 								<el-tag type="success" v-if="scope.row.status">启用</el-tag>
 								<el-tag type="info" v-else>禁用</el-tag>
@@ -119,26 +156,41 @@
 								>
 							</template>
 						</el-table-column> -->
-    </el-table>
-    <el-pagination @size-change="onHandleSizeChange"
-                   @current-change="onHandleCurrentChange"
-                   class="mt15"
-                   :pager-count="5"
-                   :page-sizes="[10, 20, 30]"
-                   background
-                   v-model:current-page="state.tableData.param.pageNum"
-                   v-model:page-size="state.tableData.param.pageSize"
-                   layout="total, sizes, prev, pager, next, jumper"
-                   :total="state.tableData.total">
-    </el-pagination>
+          </el-table>
+          <el-pagination @size-change="onHandleSizeChange"
+                         @current-change="onHandleCurrentChange"
+                         class="mt15"
+                         :pager-count="5"
+                         :page-sizes="[10, 20, 30]"
+                         background
+                         v-model:current-page="state.tableData.param.pageNum"
+                         v-model:page-size="state.tableData.param.pageSize"
+                         layout="total, sizes, prev, pager, next, jumper"
+                         :total="state.tableData.total">
+          </el-pagination>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
-import { getRemoteSensingSourceData, getSelectionCondition } from "/@/api/remoteSensingSourceData/remoteSensingSourceData.js";
+import { getRemoteSensingSourceData, getSelectionCondition, getPagesRemoteSensingSourceData } from "/@/api/remoteSensingSourceData/remoteSensingSourceData.js";
+import { getDisasterPage } from '/@/api/data/otherData.js'
+
 
 const state = reactive({
+  disasterData: {
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      search: '',
+      pageNum: 1,
+      pageSize: 10,
+    },
+  },
   tableData: {
     data: [],
     total: 0,
@@ -149,6 +201,7 @@ const state = reactive({
       pageSize: 10,
     },
   },
+  disasterId: null,
   //选择灾害类型下拉框
   options_disasterType: [],
   value_disasterType: '',
@@ -158,6 +211,22 @@ const state = reactive({
   requestData: [],
 })
 
+// 初始化灾害表格数据
+const getDisasterData = () => {
+  state.disasterData.loading = true;
+  getDisasterPage(state.disasterData.param.pageNum, state.disasterData.param.pageSize, {}).then(res => {
+    state.disasterData.data = res.records;
+    state.disasterData.total = res.total;
+    state.disasterData.loading = false;
+  })
+}
+
+// 灾害表格点击事件
+const tableClick = (row, column, event) => {
+  state.disasterId = row.disasterId;
+  getTableData()
+}
+
 // 查询遥感元数据
 const searchRemoteSensingSourceData = () => {
   const select = {
@@ -179,6 +248,18 @@ const searchRemoteSensingSourceData = () => {
     })
 }
 
+// 获取分页遥感元数据
+const getTableData = () => {
+  state.tableData.loading = true;
+  getPagesRemoteSensingSourceData(state.tableData.param.pageNum, state.tableData.param.pageSize, { "disasterId": state.disasterId }).then(
+    (res) => {
+      state.requestData = res.records;
+    })
+  setTimeout(() => {
+    state.tableData.loading = false;
+  }, 500);
+}
+
 // 查询受灾国家
 const searchDisasterCountry = () => {
   const selectCountry = {
@@ -247,22 +328,35 @@ const searchDisasterDate = () => {
   }
 }
 
+// 分页改变
+const onHandleDisasterSizeChange = (val) => {
+  state.disasterData.param.pageSize = val;
+  getDisasterData();
+};
+// 分页改变
+const onHandleDisasterCurrentChange = (val) => {
+  state.disasterData.param.pageNum = val;
+  getDisasterData();
+};
+
 //每页显示条数改变
 const onHandleSizeChange = (val) => {
   state.tableData.param.pageSize = val;
   state.tableData.param.pageNum = state.tableData.param.pageNum;
-  searchRemoteSensingSourceData()
+  //   searchRemoteSensingSourceData()
+  getTableData()
 };
 
 //当前页变动
 const onHandleCurrentChange = (val) => {
   state.tableData.param.pageSize = state.tableData.param.pageSize;
   state.tableData.param.pageNum = val;
-  searchRemoteSensingSourceData()
+  //   searchRemoteSensingSourceData()
+  getTableData()
 };
 
 onMounted(() => {
-
+  getDisasterData();
 })
 </script>
 
diff --git a/src/views/dataService/remoteSensingData/components/searchCondition.vue b/src/views/dataService/remoteSensingData/components/searchCondition.vue
index 4c7c55d..5d1c869 100644
--- a/src/views/dataService/remoteSensingData/components/searchCondition.vue
+++ b/src/views/dataService/remoteSensingData/components/searchCondition.vue
@@ -382,6 +382,10 @@ const ClearCondition = () => {
 	}
 	.coordinateBtn {
 		width: 90%;
+		word-break: keep-all;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 	.lowerBtn {
 		width: 90%;
diff --git a/vite.config.js b/vite.config.js
index a395073..f7632fb 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -30,7 +30,7 @@ const viteConfig = defineConfig((mode) => {
 			hmr: true,
 			proxy: {
 				'/api': {
-					target: 'http://192.168.31.250:9090',
+					target: 'http://192.168.31.14:9090',
 					ws: true,
 					changeOrigin: true,
 					rewrite: (path) => path.replace(/^\/api/, ''),