yaowang
/
vordm-admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zqq:遥感影像数据下载

This commit is contained in:
qqGroup0 2023-04-17 16:31:47 +08:00
parent 7baef94d3c
commit cd9cf8ec3f
4 changed files with 210 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/remoteSensingSourceData/remoteSensingSourceData.js
View File

@ -16,3 +16,15 @@ export const getSelectionCondition = (param) => {
params: param, params: param,
}); });
}; };
export const getPagesRemoteSensingSourceData = (current, size, params) => {
return request({
url: '/api/' + moduleName + '/ui/remoteSensing/PagesData',
method: 'get',
params: {
current,
size,
...params,
},
});
};

292
src/views/dataService/remoteSensingData/components/retrievalCondition.vue
View File

@ -1,93 +1,130 @@
<template> <template>
<div> <div>
<div class="system-user-search mb15"> <el-row :gutter="22">
<!-- 选择灾害类型 --> <el-col :span="10">
<el-select v-model="state.value_disasterType" <div class="system-role-padding layout-padding-auto layout-padding-view">
size="default" <el-table :data="state.disasterData.data"
clearable v-loading="state.disasterData.loading"
placeholder="Select disaster type" style="width: 100%"
@visible-change="searchDisasterType"> highlight-current-row
<el-option v-for="item in state.options_disasterType" @row-click="tableClick">
:key="item.value" <el-table-column type="index"
:label="item.label" label="ID"
:value="item.value" /> width="50" />
</el-select> <el-table-column prop="disasterType"
<!-- 选择灾害时间 --> label="Disaster type"
<el-date-picker v-model="state.value_disasterDate" show-overflow-tooltip></el-table-column>
type="date" <el-table-column prop="disasterCountry"
placeholder="Select disaster time" label="disaster country"
format="YYYY-MM-DD" show-overflow-tooltip></el-table-column>
value-format="YYYY-MM-DD" <el-table-column prop="disasterTime"
class="ml10" label="disaster time"
size="default" show-overflow-tooltip></el-table-column>
@focus="searchDisasterDate" /> </el-table>
<!-- 选择受灾地 --> <el-pagination @size-change="onHandleDisasterSizeChange"
<el-select v-model="state.value_disasterCountry" @current-change="onHandleDisasterCurrentChange"
size="default" class="mt15"
clearable :pager-count="5"
placeholder="Select disaster country" :page-sizes="[10, 20, 30]"
style="margin-left: 0.6%;" v-model:current-page="state.disasterData.param.pageNum"
@visible-change="searchDisasterCountry"> background
<el-option v-for="item in state.options_disasterCountry" v-model:page-size="state.disasterData.param.pageSize"
:key="item.value" layout="total, sizes, prev, pager, next, jumper"
:label="item.label" :total="state.disasterData.total">
:value="item.value" /> </el-pagination>
</el-select> </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" <el-button size="default"
type="primary" type="primary"
class="ml10" class="ml10"
@click="searchRemoteSensingSourceData"> @click="searchRemoteSensingSourceData">
<el-icon> <el-icon>
<ele-Search /> <ele-Search />
</el-icon> </el-icon>
Search Search
</el-button> </el-button>
</div> </div>
<!-- id，卫星类型，生产日期，产品谱段，产品分辨率，云覆盖量，景中心经纬度，元数据下载链接，缩略图 支撑单位 --> <!-- id，卫星类型，生产日期，产品谱段，产品分辨率，云覆盖量，景中心经纬度，元数据下载链接，缩略图 支撑单位 -->
<el-table :data="state.requestData" <el-table :data="state.requestData"
style="width: 100%"> style="width: 100%">
<el-table-column type="index" <el-table-column type="index"
label="Index" label="Index"
align="center" align="center"
width="80"></el-table-column> width="80"></el-table-column>
<el-table-column prop="satelliteCode" <el-table-column prop="satelliteCode"
label="Satellite code" label="Satellite code"
align="center" align="center"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="productTime" <el-table-column prop="productTime"
label="Product time" label="Product time"
align="center" align="center"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="productBandsNum" <el-table-column prop="productBandsNum"
label="Product bands num" label="Product bands num"
align="center" align="center"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="productResolution" <el-table-column prop="productResolution"
label="Product resolution(m)" label="Product resolution(m)"
align="center" align="center"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="cloudCover" <el-table-column prop="cloudCover"
label="Cloud cover(%)" label="Cloud cover(%)"
align="center" align="center"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="sourceOrganization" <el-table-column prop="sourceOrganization"
label="Source organization" label="Source organization"
align="center" align="center"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="downloadUrl" <el-table-column prop="downloadUrl"
label="Download url" label="Download url"
align="center" align="center"
show-overflow-tooltip> </el-table-column> show-overflow-tooltip> </el-table-column>
<!-- <el-table-column prop="Operate" <!-- <el-table-column prop="Operate"
label="Operate" label="Operate"
show-overflow-tooltip></el-table-column> --> show-overflow-tooltip></el-table-column> -->
<!-- <template slot-scope="scope"> <!-- <template slot-scope="scope">
<el-link :href="scope.row.downloadUrl">查看详情</el-link> <el-link :href="scope.row.downloadUrl">查看详情</el-link>
</template> --> </template> -->
<!-- <el-table-column prop="Longitude" <!-- <el-table-column prop="Longitude"
label="Longitude" label="Longitude"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="Latitude" <el-table-column prop="Latitude"
@ -101,9 +138,9 @@
label="Response status" label="Response status"
show-overflow-tooltip></el-table-column> --> 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="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"> <template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag> <el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag> <el-tag type="info" v-else>禁用</el-tag>
@ -119,26 +156,41 @@
> >
</template> </template>
</el-table-column> --> </el-table-column> -->
</el-table> </el-table>
<el-pagination @size-change="onHandleSizeChange" <el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange" @current-change="onHandleCurrentChange"
class="mt15" class="mt15"
:pager-count="5" :pager-count="5"
:page-sizes="[10, 20, 30]" :page-sizes="[10, 20, 30]"
background background
v-model:current-page="state.tableData.param.pageNum" v-model:current-page="state.tableData.param.pageNum"
v-model:page-size="state.tableData.param.pageSize" v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"> :total="state.tableData.total">
</el-pagination> </el-pagination>
</div>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted } from 'vue'; 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({ const state = reactive({
disasterData: {
data: [],
total: 0,
loading: false,
param: {
search: '',
pageNum: 1,
pageSize: 10,
},
},
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
@ -149,6 +201,7 @@ const state = reactive({
pageSize: 10, pageSize: 10,
}, },
}, },
disasterId: null,
//选择灾害类型下拉框 //选择灾害类型下拉框
options_disasterType: [], options_disasterType: [],
value_disasterType: '', value_disasterType: '',
@ -158,6 +211,22 @@ const state = reactive({
requestData: [], 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 searchRemoteSensingSourceData = () => {
const select = { 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 searchDisasterCountry = () => {
const selectCountry = { 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) => { const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val; state.tableData.param.pageSize = val;
state.tableData.param.pageNum = state.tableData.param.pageNum; state.tableData.param.pageNum = state.tableData.param.pageNum;
searchRemoteSensingSourceData() // searchRemoteSensingSourceData()
getTableData()
}; };
//当前页变动 //当前页变动
const onHandleCurrentChange = (val) => { const onHandleCurrentChange = (val) => {
state.tableData.param.pageSize = state.tableData.param.pageSize; state.tableData.param.pageSize = state.tableData.param.pageSize;
state.tableData.param.pageNum = val; state.tableData.param.pageNum = val;
searchRemoteSensingSourceData() // searchRemoteSensingSourceData()
getTableData()
}; };
onMounted(() => { onMounted(() => {
getDisasterData();
}) })
</script> </script>

4
src/views/dataService/remoteSensingData/components/searchCondition.vue
View File

@ -382,6 +382,10 @@ const ClearCondition = () => {
} }
.coordinateBtn { .coordinateBtn {
width: 90%; width: 90%;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.lowerBtn { .lowerBtn {
width: 90%; width: 90%;

2
vite.config.js
View File

@ -30,7 +30,7 @@ const viteConfig = defineConfig((mode) => {
hmr: true, hmr: true,
proxy: { proxy: {
'/api': { '/api': {
target: 'http://192.168.31.250:9090', target: 'http://192.168.31.14:9090',
ws: true, ws: true,
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''), rewrite: (path) => path.replace(/^\/api/, ''),