zqq:遥感影像数据下载
This commit is contained in:
qqGroup0
parent
7baef94d3c
commit
cd9cf8ec3f
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -382,6 +382,10 @@ const ClearCondition = () => {
|
|||
}
|
||||
.coordinateBtn {
|
||||
width: 90%;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.lowerBtn {
|
||||
width: 90%;
|
||||
|
|
|
|||
|
|
@ -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/, ''),
|
||||
|
|
|
|||
Loading…
Reference in New Issue