2025.3.14

riku

2025-03-14 8372d022614a1897120802cf1bac90d61651177f

 src/views/satellitetelemetry/component/AODImport.vue

@@ -1,49 +1,105 @@
<template>
  <!-- <CardDialog title="AOD数据导入" :model-value="modelValue" :width="420" @changed="handleChange"> -->
    <div class="download">
      <el-button @click="downloadTemplate" type="primary" class="el-button-custom" size="small"
        v-loading="downloadLoading">下载模板</el-button>
    </div>
    <el-form :model="formObj" :rules="rules" ref="formRef" label-position="right" label-width="60px">
      <el-form-item label="区域">
        <OptionLocation2 :level="3" :initValue="true" :checkStrictly="false" :allOption="true" v-model="location"
          width="200">
        </OptionLocation2>
      </el-form-item>
      <OptionGridGroup ref="gridGroupRef" v-model="gridGroup"></OptionGridGroup>
      <el-form-item label="时间" prop="dateTime">
        <el-date-picker v-model="formObj.dateTime" type="date" placeholder="选择时间" size="small" :clearable="false" />
      </el-form-item>
      <el-form-item label="">
        <el-row>
          <el-col>
            <label><el-checkbox v-model="formObj.update" label="" size="small"
                :disabled="hasGridAod == undefined || hasGridAod == false" />同意</label>
          </el-col>
          <el-col>
            <el-text class="mx-1" type="danger" v-if="hasGridAod == true">当日AOD数据已存在，请勾选同意后进行数据更新覆盖</el-text>
            <el-text class="mx-1" type="success" v-else-if="hasGridAod == false">当日AOD无数据，可新增导入</el-text>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-upload v-model:file-list="formObj.file" accept=".xlsx" :limit="1" :auto-upload="false" ref="uploadRef"
          :on-exceed="handleUploadExceed" :on-change="handleUploadChange">
          <template #trigger>
            <el-button :disabled="formObj.update == undefined || (hasGridAod == true && formObj.update == false)"
              type="primary" class="el-button-custom select-file-button" size="small" accept=".xlsx">选择文件</el-button>
          </template>
          <el-button @click="onSubmit" type="primary" class="el-button-custom import-button" size="small"
            :disabled="!formObj.file || formObj.file.length == 0" v-loading="loading">
            导入
          </el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-text class="mx-1" type="danger">{{ errorTipMsg }}</el-text>
        <el-text class="mx-1" type="success">{{ successTipMsg }}</el-text>
      </el-form-item>
    </el-form>
  <div class="download">
    <el-button
      @click="downloadTemplate"
      type="primary"
      class="el-button-custom"
      size="small"
      v-loading="downloadLoading"
      >下载模板</el-button
    >
  </div>
  <el-form
    :model="formObj"
    :rules="rules"
    ref="formRef"
    label-position="right"
    label-width="60px"
  >
    <el-form-item label="区域">
      <OptionLocation2
        :level="3"
        :initValue="true"
        :checkStrictly="false"
        :allOption="true"
        v-model="location"
        width="200"
      >
      </OptionLocation2>
    </el-form-item>
    <OptionGridGroup ref="gridGroupRef" v-model="gridGroup"></OptionGridGroup>
    <el-form-item label="时间" prop="dateTime">
      <el-date-picker
        v-model="formObj.dateTime"
        type="date"
        placeholder="选择时间"
        size="small"
        :clearable="false"
      />
    </el-form-item>
    <el-form-item label="">
      <el-row>
        <el-col>
          <label
            ><el-checkbox
              v-model="formObj.update"
              label=""
              size="small"
              :disabled="hasGridAod == undefined || hasGridAod == false"
            />同意</label
          >
        </el-col>
        <el-col>
          <el-text class="mx-1" type="danger" v-if="hasGridAod == true"
            >当日AOD数据已存在，请勾选同意后进行数据更新覆盖</el-text
          >
          <el-text class="mx-1" type="success" v-else-if="hasGridAod == false"
            >当日AOD无数据，可新增导入</el-text
          >
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-upload
        v-model:file-list="formObj.file"
        accept=".xlsx"
        :limit="1"
        :auto-upload="false"
        ref="uploadRef"
        :on-exceed="handleUploadExceed"
        :on-change="handleUploadChange"
      >
        <template #trigger>
          <el-button
            :disabled="
              formObj.update == undefined ||
              (hasGridAod == true && formObj.update == false)
            "
            type="primary"
            class="el-button-custom select-file-button"
            size="small"
            accept=".xlsx"
            >选择文件</el-button
          >
        </template>
        <el-button
          @click="onSubmit"
          type="primary"
          class="el-button-custom import-button"
          size="small"
          :disabled="!formObj.file || formObj.file.length == 0"
          v-loading="loading"
        >
          导入
        </el-button>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-text class="mx-1" type="danger">{{ errorTipMsg }}</el-text>
      <el-text class="mx-1" type="success">{{ successTipMsg }}</el-text>
    </el-form-item>
  </el-form>
  <!-- </CardDialog> -->
</template>
<script setup>
@@ -55,7 +111,7 @@

const gridGroupRef = ref(null);
const uploadRef = ref(null);
// 是否有数据布尔类型 默认为空 
// 是否有数据布尔类型 默认为空
const hasGridAod = ref(null);
const location = ref({});
const gridGroup = ref({});
@@ -81,24 +137,32 @@
};

const downloadTemplate = () => {
  downloadLoading.value = true
  gridApi.downloadAODTemplate().then(res => {
    downloadLoading.value = false
  }).catch(e => {
    downloadLoading.value = false
  });
  downloadLoading.value = true;
  gridApi
    .downloadAODTemplate()
    .then((res) => {
      downloadLoading.value = false;
    })
    .catch((e) => {
      downloadLoading.value = false;
    });
};

// 通过网格组和时间 查询 在这两个参数条件下是否有网格数据，并提示在界面中有或者没有
const checkEmpty = () => {
  aodApi.fetchAOD(gridGroup.value.id, dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')).then(res => {
    if (res.data && res.data.length > 0) {
      hasGridAod.value = true;
    } else {
      formObj.value.update = false
      hasGridAod.value = false;
    }
  })
  aodApi
    .fetchAOD(
      gridGroup.value.id,
      dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')
    )
    .then((res) => {
      if (res.data && res.data.length > 0) {
        hasGridAod.value = true;
      } else {
        formObj.value.update = false;
        hasGridAod.value = false;
      }
    });
};
const handleImportClick = () => {
  loading.value = true;
@@ -109,7 +173,9 @@
  const reader = new FileReader();
  reader.readAsArrayBuffer(formObj.value.file[0].raw);
  reader.onload = async (theFile) => {
    const binary = new Blob([theFile.target.result], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    const binary = new Blob([theFile.target.result], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    });
    formData.append('excel', binary);
    formData.append('groupId', gridGroup.value.id);
    formData.append(
@@ -120,60 +186,60 @@
    gridApi
      .importAOD(formData)
      .then((res) => {
        resetApiTipMsg()
        resetApiTipMsg();
        loading.value = false;
        if (res && res.success == true) {
          // 导入成功，1.导入或者覆盖成功，是否为空状态改变了，重新检查
          checkEmpty()
          successTipMsg.value = res.data.result
          checkEmpty();
          successTipMsg.value = res.data.result;
        } else {
          errorTipMsg.value = res.message
          errorTipMsg.value = res.message;
        }
      }).catch(e => {
        loading.value = false;
        errorTipMsg.value = e
      })
  }
      .catch((e) => {
        loading.value = false;
        errorTipMsg.value = e;
      });
  };
};
const resetApiTipMsg = () => {
  successTipMsg.value = ''
  errorTipMsg.value = ''
  successTipMsg.value = '';
  errorTipMsg.value = '';
};
// 当选择文件后： 1. 重置提示信息，防止误导 2.对文件类型的检查
const handleUploadChange = (file, files) => {
  resetApiTipMsg()
  resetApiTipMsg();
  const fileType = file.raw.type;
  // 检查文件类型是否为 'xlsx'
  if (fileType !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
  if (
    fileType !==
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  ) {
    ElMessage({
      message: '文件类型错误，请重新上传xlsx类型文件',
      type: 'error'
    })
    });
    files.splice(0, 1); // 阻止上传
  }
};
// 新选择文件替换旧文件
const handleUploadExceed = (files) => {
  const file = files[0]
  uploadRef.value.clearFiles()
  uploadRef.value.handleStart(file)
  const file = files[0];
  uploadRef.value.clearFiles();
  uploadRef.value.handleStart(file);
};
const { formObj, formRef, edit, onSubmit, onCancel } = useFormConfirm({
  submit: {
    do: handleImportClick
  },
  cancel: {
    do: () => {

    }
    do: () => {}
  }
});



watch(location, (nv, ov) => {
  if (nv != ov) {
    resetApiTipMsg()
    resetApiTipMsg();
    const area = {
      provinceCode: nv.pCode,
      provinceName: nv.pName,
@@ -184,21 +250,34 @@
      townCode: nv.tCode,
      townName: nv.tName
    };
    gridGroupRef.value.fetchGridGroup(area);
    gridGroupRef.value.fetchGridGroup(area, 'origin');
  }
});

watch(gridGroup, (nv) => {
  if (nv && Object.keys(nv).length === 0 && formObj.value.dateTime && Object.keys(formObj.value.dateTime).length === 0) {
    checkEmpty()
  }
}, { deep: true });
watch(
  gridGroup,
  (nv) => {
    if (
      nv &&
      Object.keys(nv).length === 0 &&
      formObj.value.dateTime &&
      Object.keys(formObj.value.dateTime).length === 0
    ) {
      checkEmpty();
    }
  },
  { deep: true }
);

watch(formObj.value, (nv) => {
  if (nv.dateTime && gridGroup.value) {
    checkEmpty()
  }
}, { deep: true });
watch(
  formObj.value,
  (nv) => {
    if (nv.dateTime && gridGroup.value) {
      checkEmpty();
    }
  },
  { deep: true }
);
</script>
<style scoped>
.download {
@@ -225,4 +304,4 @@
::v-deep .el-select {
  width: 200px !important;
}
</style>
</style>