1. 新增网格数据模板下载和excel数据上传 api 2. 新增网格数据导入页面

hcong

2024-12-23 b70e4dc2594da74ef5088e008f577179badf16ee

1. 新增网格数据模板下载和excel数据上传 api 2. 新增网格数据导入页面

 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);
  }
};

 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']

 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>

 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>