<template>
|
<el-row align="top">
|
<el-upload
|
ref="upload"
|
class="upload-file"
|
:limit="1"
|
:on-change="handleChange"
|
:on-exceed="handleExceed"
|
:auto-upload="false"
|
>
|
<template #trigger>
|
<el-button type="primary">上传监测数据统计结果</el-button>
|
</template>
|
</el-upload>
|
<el-text>{{ loadTxt }}</el-text>
|
</el-row>
|
<el-table
|
ref="tableRef"
|
:data="data"
|
v-loading="loading"
|
table-layout="fixed"
|
:stripe="true"
|
size="small"
|
height="60vh"
|
border
|
>
|
<el-table-column
|
:show-overflow-tooltip="true"
|
prop="drSceneName"
|
label="名称"
|
width="300"
|
/>
|
<el-table-column prop="drDeviceCode" label="设备号" width="130" />
|
<el-table-column prop="drTime" label="时间" width="100">
|
<template #default="{ row }">
|
<span>{{ $fm.formatYMD(row.drTime) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="drExceedTimes" label="超标次数" />
|
<el-table-column prop="drAvg" label="平均值" />
|
<el-table-column prop="drMax" label="最大值" />
|
<el-table-column prop="drMin" label="最小值" />
|
<el-table-column prop="drOverAvgPer" label="超区均值百分比" />
|
<el-table-column prop="drDataNum" label="数据量" />
|
<el-table-column prop="drEffectiveRate" label="有效率" />
|
</el-table>
|
</template>
|
<script setup>
|
import { ref, watch, onMounted } from 'vue';
|
import { genFileId } from 'element-plus';
|
import monitordataApi from '@/api/fysp/monitordataApi';
|
import * as XLSX from 'xlsx';
|
|
const props = defineProps({
|
areaInfo: { type: Object }
|
});
|
|
let workbook;
|
const data = ref([]);
|
const upload = ref();
|
const loadTxt = ref('');
|
|
// 获取历史统计结果
|
function fetchDustDataResult() {
|
monitordataApi.fetchDustDataResult(props.areaInfo).then((res) => {
|
data.value = res.data;
|
});
|
}
|
|
function handleExceed(files, uploadFiles) {
|
upload.value.clearFiles();
|
const file = files[0];
|
file.uid = genFileId();
|
upload.value.handleStart(file);
|
}
|
|
function handleChange(uploadFile, uploadFiles) {
|
// console.log(uploadFile, uploadFiles);
|
const fileReader = new FileReader();
|
fileReader.onload = (file) => {
|
const data = file.target.result;
|
workbook = XLSX.read(data, { type: 'array' });
|
console.log(workbook.SheetNames);
|
};
|
fileReader.readAsArrayBuffer(uploadFile.raw);
|
}
|
|
// 上传统计结果文档
|
function uploadFile() {}
|
|
onMounted(() => {
|
fetchDustDataResult();
|
});
|
</script>
|
<style scoped>
|
.upload-file {
|
/* background-color: aliceblue; */
|
width: 300px;
|
min-height: 60px;
|
}
|
|
:deep(.el-text) {
|
align-self: auto;
|
}
|
</style>
|
