From a8f1a3986f268e0652b79f2f5fc3d968895f022a Mon Sep 17 00:00:00 2001
From: glj <glj>
Date: Wed, 24 May 2023 18:19:11 +0800
Subject: [PATCH] =?UTF-8?q?glj-=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../remoteSensingSourceData.js                |  9 ++
 .../components/retrievalCondition.vue         | 42 +++++++-
 .../components/uploadData.vue                 | 98 +++++++++++++++++++
 3 files changed, 145 insertions(+), 4 deletions(-)
 create mode 100644 src/views/dataService/remoteSensingData/components/uploadData.vue

diff --git a/src/api/remoteSensingSourceData/remoteSensingSourceData.js b/src/api/remoteSensingSourceData/remoteSensingSourceData.js
index da88526..ccf5a1c 100644
--- a/src/api/remoteSensingSourceData/remoteSensingSourceData.js
+++ b/src/api/remoteSensingSourceData/remoteSensingSourceData.js
@@ -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
+	});
 };
\ No newline at end of file
diff --git a/src/views/dataService/remoteSensingData/components/retrievalCondition.vue b/src/views/dataService/remoteSensingData/components/retrievalCondition.vue
index 6ecba5e..b9c0982 100644
--- a/src/views/dataService/remoteSensingData/components/retrievalCondition.vue
+++ b/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 = {
@@ -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);
       })
     }
diff --git a/src/views/dataService/remoteSensingData/components/uploadData.vue b/src/views/dataService/remoteSensingData/components/uploadData.vue
new file mode 100644
index 0000000..647e919
--- /dev/null
+++ b/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>
\ No newline at end of file