<template>
|
<el-button
|
type="primary"
|
class="el-button-custom p-events-auto satellite-right-top"
|
@click="modelValue = !modelValue"
|
>
|
监测数据导入
|
</el-button>
|
<CardDialog
|
title="监测数据导入"
|
v-model="modelValue"
|
:width="420"
|
@changed="handleChange"
|
destroy-on-close
|
:before-close="init"
|
>
|
<div class="download">
|
<el-button
|
@click="downloadTemplate"
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
: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
|
v-loading="tipTextLoading"
|
v-if="!formObj.file || (formObj.file && formObj.file.length == 0)"
|
>
|
<el-text class="mx-1" type="danger" v-if="hasGridData == true"
|
>当日遥测数据已存在，请勾选
|
<el-checkbox
|
v-model="formObj.update"
|
label="同意"
|
size="small"
|
:disabled="hasGridData == undefined || hasGridData == false"
|
/>后进行数据更新覆盖</el-text
|
>
|
<el-text
|
class="mx-1"
|
type="success"
|
v-else-if="hasGridData == false"
|
>当日遥测无数据，可新增导入</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 ||
|
(hasGridData == 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"
|
:loading="loading"
|
>
|
导入
|
</el-button>
|
</el-upload>
|
</el-form-item>
|
<el-form-item>
|
<el-text class="mx-1" type="danger" truncated>{{
|
errorTipMsg
|
}}</el-text>
|
<el-text class="mx-1" type="success" truncated>{{
|
successTipMsg
|
}}</el-text>
|
</el-form-item>
|
</el-form>
|
</CardDialog>
|
</template>
|
<script setup>
|
import { ref, watch, defineProps, defineEmits } from 'vue';
|
import gridApi from '@/api/gridApi';
|
import { dayjs, ElMessage } from 'element-plus';
|
import { useFormConfirm } from '@/composables/formConfirm';
|
|
const gridGroupRef = ref(null);
|
const uploadRef = ref(null);
|
// 是否有数据布尔类型 默认为空
|
const hasGridData = ref(null);
|
const location = ref({});
|
const gridGroup = ref({});
|
// 导入时展示在导入按钮上的加载
|
const loading = ref(false);
|
// 下载模板时展示在下载按钮上的加载
|
const downloadLoading = ref(false);
|
// 提示当日网格组是否有数据的loading
|
const tipTextLoading = ref(false);
|
// 在导入按钮下方（界面的下面）错误和正确信息
|
const errorTipMsg = ref('');
|
const successTipMsg = ref('');
|
const rules = {
|
dateTime: [{ required: true, message: '时间不能为空', trigger: 'blur' }]
|
};
|
const modelValue = ref(false);
|
|
|
const init = (done) => {
|
loading.value = false
|
downloadLoading.value = false
|
tipTextLoading.value = false
|
hasGridData.value = undefined
|
formObj.value.dateTime = undefined
|
resetApiTipMsg()
|
done()
|
}
|
|
const resetApiTipMsg = () => {
|
successTipMsg.value = '';
|
errorTipMsg.value = '';
|
};
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const handleChange = (value) => {
|
emit('update:modelValue', value);
|
};
|
|
const downloadTemplate = () => {
|
downloadLoading.value = true;
|
gridApi
|
.downloadTemplate()
|
.then((res) => {
|
downloadLoading.value = false;
|
})
|
.catch((e) => {
|
downloadLoading.value = false;
|
});
|
};
|
// 通过网格组和时间 查询 在这两个参数条件下是否有网格数据，并提示在界面中有或者没有
|
const checkEmpty = () => {
|
tipTextLoading.value = true;
|
gridApi
|
.fetchGridData(
|
gridGroup.value.id,
|
dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')
|
)
|
.then((res) => {
|
// 延迟100ms结束loading状态
|
setTimeout(() => {
|
tipTextLoading.value = false;
|
}, 100);
|
if (res.data && res.data.length > 0) {
|
hasGridData.value = true;
|
} else {
|
formObj.value.update = false;
|
hasGridData.value = false;
|
}
|
})
|
.catch((e) => {
|
// 延迟100ms结束loading状态
|
setTimeout(() => {
|
tipTextLoading.value = false;
|
}, 100);
|
});
|
};
|
const handleImportClick = () => {
|
loading.value = true;
|
const isUpdate = formObj.value.update ? formObj.value.update : false;
|
const type = 0;
|
|
const formData = new FormData();
|
// 文件转换为二进制
|
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'
|
});
|
formData.append('excel', binary);
|
formData.append('groupId', gridGroup.value.id);
|
formData.append('type', type);
|
formData.append(
|
'dateTime',
|
dayjs(formObj.value.dateTime).format('YYYY-MM-DD HH:mm:ss')
|
);
|
formData.append('update', isUpdate);
|
gridApi
|
.importData(formData)
|
.then((res) => {
|
resetApiTipMsg();
|
loading.value = false;
|
if (res && res.success == true) {
|
// 导入成功，1.导入或者覆盖成功，是否为空状态改变了，重新检查
|
checkEmpty();
|
// 根据当前操作是插入还是更新展示成功消息
|
if (isUpdate) {
|
successTipMsg.value = '覆盖成功';
|
}else {
|
successTipMsg.value = '导入成功';
|
}
|
} else {
|
errorTipMsg.value = res.message;
|
}
|
})
|
.catch((e) => {
|
loading.value = false;
|
errorTipMsg.value = e;
|
});
|
};
|
};
|
// 当选择文件后： 1. 重置提示信息，防止误导 2.对文件类型的检查
|
const handleUploadChange = (file, files) => {
|
resetApiTipMsg();
|
const fileType = file.raw.type;
|
// 检查文件类型是否为 'xlsx'
|
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 { formObj, formRef, edit, onSubmit, onCancel } = useFormConfirm({
|
submit: {
|
do: handleImportClick
|
},
|
cancel: {
|
do: () => {}
|
}
|
});
|
watch(location, (nv, ov) => {
|
if (nv != ov) {
|
resetApiTipMsg();
|
const area = {
|
provinceCode: nv.pCode,
|
provinceName: nv.pName,
|
cityCode: nv.cCode,
|
cityName: nv.cName,
|
districtCode: nv.dCode,
|
districtName: nv.dName,
|
townCode: nv.tCode,
|
townName: nv.tName
|
};
|
gridGroupRef.value.fetchGridGroup(area);
|
}
|
});
|
// 当网格组和时间都不为空 并且 有一个条件改变后重新检查是否有网格数据
|
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,
|
(nv) => {
|
if (nv.dateTime && gridGroup.value) {
|
checkEmpty();
|
}
|
},
|
{ deep: true }
|
);
|
</script>
|
<style scoped>
|
.download {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.select-file-button {
|
/* margin-left: 5px; */
|
}
|
|
.import-button {
|
margin-left: 20px;
|
}
|
|
.click_to_show-btn {
|
z-index: 1000;
|
}
|
|
::v-deep .el-date-editor {
|
width: 200px !important;
|
}
|
|
::v-deep .el-select {
|
width: 200px !important;
|
}
|
|
::v-deep .el-checkbox.el-checkbox--small .el-checkbox__label {
|
font-size: 15px !important;
|
}
|
|
::v-deep .el-upload-list__item-file-name {
|
color: white;
|
overflow: visible;
|
}
|
|
.satellite-right-top {
|
width: 120px;
|
position: absolute;
|
right: 0px;
|
}
|
</style>
|
