From b70e4dc2594da74ef5088e008f577179badf16ee Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期一, 23 十二月 2024 11:44:52 +0800
Subject: [PATCH] 1. 新增网格数据模板下载和excel数据上传 api 2. 新增网格数据导入页面
---
src/views/satellitetelemetry/component/SatelliteImport.vue | 157 +++++++++++++++++++++++++++++++++++++++
src/api/gridApi.js | 31 +++++++
src/components.d.ts | 5 -
src/views/satellitetelemetry/component/SatelliteSearchBar.vue | 33 ++++++++
4 files changed, 219 insertions(+), 7 deletions(-)
diff --git a/src/api/gridApi.js b/src/api/gridApi.js
index 6eb09f2..595c170 100644
--- a/src/api/gridApi.js
+++ b/src/api/gridApi.js
@@ -1,5 +1,7 @@
import { $http } from './index';
-
+import {
+ Base64
+} from 'js-base64';
/**
* 鍗槦閬ユ祴缃戞牸鐩稿叧鎺ュ彛API
*/
@@ -54,5 +56,30 @@
}
})
.then((res) => res.data);
+ },
+ downloadTemplate() {
+ return $http
+ .get(`air/satellite/import/grid/data/download/template`, {
+ responseType: 'blob'
+ })
+ .then((res) => {
+ const name = Base64.decode(res.headers.get('fileName'));
+ const blob = new Blob([res.data], {
+ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+ });
+ const url = window.URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = name;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ window.URL.revokeObjectURL(url);
+ });
+ },
+ importData(dataForm) {
+ return $http
+ .post(`air/satellite/import/grid/data`, dataForm)
+ .then((res) => res.data);
}
-};
+};
\ No newline at end of file
diff --git a/src/components.d.ts b/src/components.d.ts
index 6d7e434..5346b76 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -33,19 +33,16 @@
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
- ElInputNumber: (typeof import('element-plus/es'))['ElInputNumber']
ElOption: typeof import('element-plus/es')['ElOption']
- ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
- ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
- ElSlider: typeof import('element-plus/es')['ElSlider']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElText: typeof import('element-plus/es')['ElText']
+ ElUpload: typeof import('element-plus/es')['ElUpload']
FactorCheckbox: typeof import('./components/monitor/FactorCheckbox.vue')['default']
FactorLegend: typeof import('./components/monitor/FactorLegend.vue')['default']
FactorRadio: typeof import('./components/monitor/FactorRadio.vue')['default']
diff --git a/src/views/satellitetelemetry/component/SatelliteImport.vue b/src/views/satellitetelemetry/component/SatelliteImport.vue
new file mode 100644
index 0000000..82dfbc9
--- /dev/null
+++ b/src/views/satellitetelemetry/component/SatelliteImport.vue
@@ -0,0 +1,157 @@
+<template>
+ <BaseCard
+ size="small"
+ direction="top-left"
+ borderless="t"
+ v-loading="loading"
+ >
+ <template #content>
+ <div class="download">
+ <el-button
+ @click="downloadTemplate"
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ >涓嬭浇妯℃澘</el-button
+ >
+ </div>
+ <el-form :model="formInfo" :rules="rules" ref="formRef">
+ <el-form-item label="鏃堕棿" prop="dateTime">
+ <el-date-picker
+ v-model="formInfo.dateTime"
+ type="date"
+ placeholder="閫夋嫨鏃堕棿"
+ size="small"
+ />
+ </el-form-item>
+ <el-form-item label="">
+ <label
+ ><el-checkbox
+ v-model="formInfo.update"
+ label=""
+ size="small"
+ />瑕嗙洊鏃ф暟鎹�</label
+ >
+ </el-form-item>
+ <el-form-item>
+ <el-upload
+ v-model:file-list="formInfo.file"
+ accept=".xlsx"
+ :limit="1"
+ :auto-upload="false"
+ >
+ <el-button
+ :disabled="!formInfo.dateTime && !formInfo.groupId"
+ type="primary"
+ class="el-button-custom select-file-button"
+ size="small"
+ >閫夋嫨鏂囦欢</el-button
+ >
+ </el-upload>
+ </el-form-item>
+
+ <el-form-item>
+ <el-button
+ @click="handleImportClick"
+ type="primary"
+ class="el-button-custom import-button"
+ size="small"
+ >
+ 瀵煎叆
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </template>
+ </BaseCard>
+</template>
+<script>
+import gridApi from '@/api/gridApi';
+import { dayjs, ElMessage } from 'element-plus';
+export default {
+ props: {
+ gridGroup: {
+ type: Object,
+ default: () => {}
+ }
+ },
+ emits: ['submit'],
+ methods: {
+ downloadTemplate() {
+ gridApi.downloadTemplate();
+ },
+ handleImportClick() {
+ this.$refs.formRef.validate((valid) => {
+ if (valid) {
+ this.loading = true;
+ const isUpdate = this.formInfo.update ? 1 : 0;
+ const type = 0;
+
+ const formData = new FormData();
+ // 鏂囦欢杞崲涓轰簩杩涘埗
+ const reader = new FileReader();
+ reader.readAsArrayBuffer(this.formInfo.file[0].raw);
+ reader.onload = async (theFile) => {
+ const binary = new Blob([theFile.target.result], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
+ formData.append('excel', binary);
+ formData.append('groupId', this.gridGroup.id);
+ formData.append('type', type);
+ formData.append(
+ 'dateTime',
+ dayjs(this.formInfo.dateTime).format('YYYY-MM-DD HH:mm:ss')
+ );
+ formData.append('update', isUpdate);
+ gridApi
+ .importData(formData)
+ .then((res) => {
+ this.loading = false;
+ if (res && res.data.success) {
+ // 瀵煎叆鎴愬姛锛岃Е鍙戠埗缁勪欢鍒锋柊浜嬩欢
+ this.$emit('submit');
+ ElMessage({
+ message: res.data.result,
+ type: 'success'
+ });
+ } else {
+ ElMessage({
+ message: res.data.result,
+ type: 'warning'
+ });
+ }
+ })
+ };
+ }
+ });
+ }
+ },
+ data() {
+ return {
+ loading: false,
+ formInfo: {
+ dateTime: undefined,
+ groupId: undefined,
+ update: false,
+ file: []
+ },
+ rules: {
+ dateTime: [{ required: true, message: '鏃堕棿涓嶈兘涓虹┖', trigger: 'blur' }]
+ }
+ };
+ }
+};
+</script>
+<style scoped>
+.download {
+ display: flex;
+ justify-content: flex-end;
+}
+.select-file-button {
+ margin-left: 5px;
+}
+.import-button {
+ margin-left: 5px;
+ margin-top: -7px;
+}
+::v-deep .el-upload-list__item-file-name {
+ max-width: 50% !important;
+}
+</style>
diff --git a/src/views/satellitetelemetry/component/SatelliteSearchBar.vue b/src/views/satellitetelemetry/component/SatelliteSearchBar.vue
index 84a8516..7f575e6 100644
--- a/src/views/satellitetelemetry/component/SatelliteSearchBar.vue
+++ b/src/views/satellitetelemetry/component/SatelliteSearchBar.vue
@@ -1,6 +1,6 @@
<template>
<el-row>
- <el-col :span="20">
+ <el-col :span="17">
<el-form label-position="right" label-width="60px" :inline="false">
<el-form-item label="鍖哄煙">
<OptionLocation2
@@ -31,9 +31,30 @@
</el-button>
</el-form-item>
</el-col>
+ <el-col :span="3">
+ <el-form-item>
+ <el-button
+ :loading="loading"
+ type="primary"
+ class="el-button-custom"
+ size="small"
+ @click="handleImportClick"
+ >
+ 瀵煎叆
+ </el-button>
+ </el-form-item>
+ </el-col>
</el-row>
+ <el-dialog title="瀵煎叆" v-model="importVisible" destroy-on-close>
+ <SatelliteImport
+ @submit="handleImportSubmit"
+ :disabled="!gridGroup"
+ :grid-group="gridGroup"
+ ></SatelliteImport>
+ </el-dialog>
</template>
<script setup>
+import SatelliteImport from './SatelliteImport.vue';
import { ref, watch } from 'vue';
defineProps({
@@ -43,6 +64,7 @@
const location = ref(undefined);
const gridGroup = ref(undefined);
const gridGroupRef = ref(null);
+const importVisible = ref(false);
const emits = defineEmits(['search']);
@@ -72,4 +94,13 @@
function handleClick() {
emits('search', gridGroup.value);
}
+
+function handleImportSubmit() {
+ importVisible.value = false;
+ emits('search', gridGroup.value);
+}
+
+function handleImportClick() {
+ importVisible.value = true;
+}
</script>
--
Gitblit v1.9.3