glj-代码提交
This commit is contained in:
glj
parent
fdcf70cf38
commit
a8f1a3986f
|
|
@ -45,4 +45,13 @@ export const importTemplate = (data) => {
|
|||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
export const importTemplateImgList = (data) => {
|
||||
return request({
|
||||
url: '/api/' + moduleName + '/ui/remoteSensing/importTemplateImgList',
|
||||
headers:{'Content-Type': 'multipart/form-data'},
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
|
@ -48,9 +48,17 @@
|
|||
<el-upload ref="upFileRef" class="upload-demo" :accept="'.xls,.xlsx'" :auto-upload="false"
|
||||
:on-change="addRemoteSensingData" :show-file-list="false" style="margin-top:15px">
|
||||
<template #trigger>
|
||||
<el-button type="success">Upload</el-button>
|
||||
<el-button type="success">
|
||||
<el-icon>
|
||||
<ele-Upload />
|
||||
</el-icon>Upload</el-button>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-button class="ml10" type="success" style="margin-top:15px" @click="OpenuploadDataRef()">
|
||||
Upload Img</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
|
@ -58,6 +66,18 @@
|
|||
<!-- id，卫星类型，生产日期，产品谱段，产品分辨率，云覆盖量，景中心经纬度，元数据下载链接，缩略图 支撑单位 -->
|
||||
<el-table :data="state.requestData" style="width: 1000Px;">
|
||||
<el-table-column type="index" label="Index" align="center" width="80"></el-table-column>
|
||||
<el-table-column prop="thumbnailLink" label="thumbnail" width="180" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-popover trigger="hover" placement="right" popper-class="max-h-300px overflow-auto" :width="330">
|
||||
<!-- table中原本显示的图片 -->
|
||||
<template #reference>
|
||||
<img :src="scope.row.thumbnailLink" :alt="scope.row.thumbnailLink" style="max-height: 130px;max-width: 130px">
|
||||
</template>
|
||||
<!-- 鼠标移入时弹出的图片 -->
|
||||
<img :src="scope.row.thumbnailLink" alt="" style="height: 150px;width: 300px">
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="satelliteCode" label="Satellite code" width="170" align="center" show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="productTime" label="Product time" width="170" align="center" show-overflow-tooltip
|
||||
|
|
@ -91,6 +111,7 @@
|
|||
</el-row>
|
||||
<approvalData ref="approvalDataRef" @callback="getData()" />
|
||||
<addAddress ref="addAddressRef" @callback="getData()" />
|
||||
<uploadData ref="uploadDataRef" @callback="getData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -102,12 +123,13 @@ import disasterTable from "/@/components/table/DisasterTable.vue";
|
|||
import approvalData from "./approvalData.vue";
|
||||
import addAddress from "./addAddress.vue";
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
import uploadData from "./uploadData.vue";
|
||||
|
||||
// import { getList as getDisasterPage } from '/@/api/disasterInfo/index';
|
||||
const approvalDataRef = ref();
|
||||
const addAddressRef = ref();
|
||||
const upFileRef = ref();
|
||||
const uploadDataRef = ref();
|
||||
const state = reactive({
|
||||
disasterData: {
|
||||
data: [],
|
||||
|
|
@ -192,6 +214,9 @@ const state = reactive({
|
|||
}, {
|
||||
label: 'Night light satellite',
|
||||
value: 'Night light satellite'
|
||||
}, {
|
||||
label: 'Video satellite',
|
||||
value: 'Video satellite'
|
||||
}],
|
||||
value_satelliteType: '',
|
||||
value_resolution: [],
|
||||
|
|
@ -229,6 +254,15 @@ const addAddressOpen = (row) => {
|
|||
addAddressRef.value.openDialog(row);
|
||||
};
|
||||
|
||||
// 打开上传弹窗
|
||||
const OpenuploadDataRef = () => {
|
||||
if (state.disasterId == null) {
|
||||
ElMessage.warning('Please select the disaster first');
|
||||
return false;
|
||||
}
|
||||
uploadDataRef.value.openDialog(state.disasterId);
|
||||
};
|
||||
|
||||
// 获取遥感影像元数据
|
||||
const getData = () => {
|
||||
let data = {
|
||||
|
|
@ -255,7 +289,7 @@ const addRemoteSensingData = (data, fileList) => {
|
|||
ElMessage.success("success");
|
||||
emit('callback');
|
||||
searchRemoteSensingSourceData();
|
||||
upFileRef.value.clearFiles();
|
||||
upFileRef.value.clearFiles();
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -268,7 +302,7 @@ const searchRemoteSensingSourceData = () => {
|
|||
}
|
||||
else if (state.value_satelliteType[i] == state.options_satelliteType[1].value) {
|
||||
let arrData = ['Sentinel -2_Sentinel - 2A', 'Sentinel -2_Sentinel - 2B', 'GF1', 'GF1B', 'GF1C', 'GF1D', 'GF2', 'GF4', 'GF6'];
|
||||
arrData.forEach(item => {
|
||||
arrData.forEach(item => {
|
||||
state.satelliteCodeList.push(item);
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<el-dialog title="upload" v-model="state.isShowDialog" width="550px">
|
||||
<el-form :model="state.ruleForm" size="default" label-width="110px" ref="adminAddFormRef">
|
||||
<el-form-item label="file:" style="margin-top: 30px;">
|
||||
<el-upload ref="upFileRef" class="upload-demo" :file-list="state.fileList" style="width: 460px;"
|
||||
:auto-upload="false" :on-change="handleChange" multiple = "true">
|
||||
<template #trigger>
|
||||
<el-button type="primary">select file</el-button>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="default">cancel</el-button>
|
||||
<el-button type="primary" @click="uploadHandler()" size="default"
|
||||
:loading="state.isLoading">upload</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { importTemplateImgList } from "/@/api/remoteSensingSourceData/remoteSensingSourceData.js";
|
||||
const upFileRef = ref();
|
||||
const emit = defineEmits(['callback']);
|
||||
const adminAddFormRef = ref();
|
||||
const state = reactive({
|
||||
fileList: [],
|
||||
dataList: [],
|
||||
isShowDialog: false,
|
||||
isLoading: false,
|
||||
ruleForm: {
|
||||
},
|
||||
})
|
||||
//通过onchanne触发方法获得文件列表
|
||||
const handleChange = (file, fileList) => {
|
||||
state.fileList = fileList;
|
||||
};
|
||||
|
||||
//上传处理
|
||||
const uploadHandler = () => {
|
||||
const form = new FormData();
|
||||
state.fileList.forEach(item=>{
|
||||
state.dataList.push(item.raw);
|
||||
form.append("fileList", item.raw);
|
||||
})
|
||||
form.append("disasterId", state.ruleForm.disasterId);
|
||||
state.isLoading = true;
|
||||
importTemplateImgList(form).then(da => {
|
||||
ElMessage.success("success");
|
||||
emit('callback');
|
||||
}).finally(() => {
|
||||
state.isLoading = false;
|
||||
})
|
||||
closeDialog();
|
||||
};
|
||||
|
||||
const handleRemove = (uploadFile, uploadFiles) => {
|
||||
console.log(uploadFile, uploadFiles)
|
||||
}
|
||||
|
||||
const handlePreview = (file) => {
|
||||
console.log(file)
|
||||
}
|
||||
|
||||
//重置表单
|
||||
const resetField = () => {
|
||||
adminAddFormRef.value.resetFields();
|
||||
state.fileArray = [];
|
||||
upFileRef.value.clearFiles();
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (row) => {
|
||||
state.isShowDialog = true;
|
||||
state.ruleForm.disasterId = row;
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.isShowDialog = false;
|
||||
resetField();
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Reference in New Issue