glj-代码提交

src/api/remoteSensingSourceData/remoteSensingSourceData.js

@@ -46,3 +46,12 @@ export const importTemplate = (data) => {
 		data: data
 	});
 };
+
+export const importTemplateImgList = (data) => {
+	return request({
+		url: '/api/' + moduleName + '/ui/remoteSensing/importTemplateImgList',
+		headers:{'Content-Type': 'multipart/form-data'},
+		method: 'post',
+		data: data
+	});
+};

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

@@ -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 = {

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

@@ -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>