<template>
|
<FYSearchBar ref="searchRef" @search="handleSearch">
|
<template #options>
|
<!-- 区县 -->
|
<FYOptionLocation
|
:allOption="false"
|
:level="3"
|
:checkStrictly="false"
|
v-model:value="formSearch.locations"
|
></FYOptionLocation>
|
<!-- 场景类型 -->
|
<FYOptionScene
|
:allOption="false"
|
:type="2"
|
v-model:value="formSearch.scenetype"
|
></FYOptionScene>
|
<!-- 时间 -->
|
<FYOptionTime
|
:initValue="false"
|
type="month"
|
v-model:value="formSearch.time"
|
></FYOptionTime>
|
</template>
|
<template #buttons>
|
<CompReportDownloadDialog
|
name="问题与整改汇总分析与动态跟踪清单"
|
:locations="formSearch.locations"
|
:scenetype="formSearch.scenetype"
|
:time="formSearch.time"
|
@submit="handleSearch"
|
></CompReportDownloadDialog>
|
</template>
|
</FYSearchBar>
|
<el-form ref="expandRef" :inline="true">
|
<CompQuickSet @quick-set="setOptions"></CompQuickSet>
|
</el-form>
|
<el-space>
|
<el-segmented
|
:model-value="activeSheet"
|
:options="sheetNames"
|
@change="tabChange"
|
/>
|
</el-space>
|
<el-table
|
ref="tableRef"
|
:data="excelData"
|
v-loading="loading"
|
table-layout="fixed"
|
size="small"
|
:height="tableHeight"
|
border
|
>
|
<template v-if="excelData">
|
<el-table-column
|
v-for="(value, key, index) in excelData[0]"
|
:key="index"
|
:prop="key"
|
:label="key"
|
>
|
</el-table-column>
|
</template>
|
</el-table>
|
<div v-if="excelHtml" v-html="excelHtml"></div>
|
</template>
|
<script setup>
|
/**
|
* 问题动态跟踪
|
*/
|
import { ref, onMounted } from 'vue';
|
import dayjs from 'dayjs';
|
import * as XLSX from 'xlsx';
|
import dataproductApi from '@/api/fysp/dataproductApi';
|
import CompReportDownloadDialog from './CompReportDownloadDialog.vue';
|
|
const emit = defineEmits(['search']);
|
|
const props = defineProps({
|
// 数据产品类型，1：问题动态跟踪；2：规范性评估；3：问题整改分析
|
productType: Number,
|
// 在数据展示之前，做预处理（主要是处理合并表头）
|
beforeDataShow: {
|
type: Function,
|
default: (data) => {
|
return data;
|
}
|
},
|
// 数据表格的表头行数
|
headNum: {
|
type: Number,
|
default: 1
|
}
|
});
|
|
const formSearch = ref({
|
locations: {},
|
scenetype: {},
|
time: dayjs().add(-1, 'M').date(1).toDate()
|
});
|
const loading = ref(false);
|
const tableHeight = ref('500');
|
let workbook;
|
const sheetNames = ref();
|
const activeSheet = ref();
|
const excelData = ref();
|
const excelHtml = ref();
|
|
const searchRef = ref(null);
|
const expandRef = ref(null);
|
|
function setOptions(param) {
|
formSearch.value.locations = param.locations;
|
formSearch.value.scenetype = param.scenetype;
|
formSearch.value.sourceType = param.sourceType;
|
handleSearch(false);
|
}
|
|
function tabChange(tabName) {
|
activeSheet.value = tabName;
|
getTable(activeSheet.value);
|
}
|
|
function handleSearch(forceUpdate) {
|
const locations = formSearch.value.locations;
|
const time = formSearch.value.time;
|
const scenetype = formSearch.value.scenetype;
|
const area = {
|
provincecode: locations.pCode,
|
provincename: locations.pName,
|
citycode: locations.cCode,
|
cityname: locations.cName,
|
districtcode: locations.dCode,
|
districtname: locations.dName,
|
starttime: dayjs(time).format('YYYY-MM-DD HH:mm:ss'),
|
scensetypeid: scenetype.value
|
};
|
|
loading.value = true;
|
dataproductApi
|
.downloadProduct(area, props.productType, forceUpdate ? forceUpdate : false)
|
.then((res) => {
|
const data = new Uint8Array(res);
|
workbook = XLSX.read(data, { type: 'array' });
|
sheetNames.value = workbook.SheetNames;
|
activeSheet.value = sheetNames.value[0];
|
getTable(activeSheet.value);
|
})
|
.finally(() => (loading.value = false));
|
}
|
|
function getTable(sheetName) {
|
const worksheet = workbook.Sheets[sheetName];
|
const tableData = XLSX.utils.sheet_to_json(worksheet, { header: 3 });
|
// const tableData = XLSX.utils.sheet_to_csv(worksheet);
|
console.log(tableData);
|
console.log(tableData[0]);
|
combineTableHead(tableData);
|
|
excelData.value = props.beforeDataShow(tableData);
|
}
|
|
// 根据表头的行数，合并表头
|
function combineTableHead(excelData) {
|
if (excelData.length < props.headNum) return;
|
|
// const newHead = {};
|
// excelData.splice(0, props.headNum).forEach((row) => {
|
// for (const key in row) {
|
// console.log(key);
|
// }
|
// });
|
}
|
|
function calcTableHeight() {
|
const h1 = searchRef.value.$el.offsetHeight;
|
const h2 = expandRef.value.$el.offsetHeight;
|
|
const h = h1 + h2;
|
return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
|
}
|
|
onMounted(() => {
|
tableHeight.value = calcTableHeight();
|
// handleSearch()
|
});
|
</script>
|
