<script setup>
|
import {ref, onMounted} from "vue";
|
import {getTemperaturePointList} from "@/api/screen/index.js";
|
import {getTemptureReportList, exportTemptureReportList} from "@/api/screen/report/index.js";
|
import { exportBlobFile } from '@/utils/index.js'
|
import { deepTableConfig } from '@/config/index.js'
|
|
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
|
const typeOption = ref([])
|
const timeVal = ref([])
|
const searchData = reactive({
|
pointId: '',
|
createTimeRange: ''
|
})
|
const state = {
|
total: 0,
|
page: 1,
|
pageSize: 10,
|
}
|
let tableHead = [
|
{ prop: 'pointName', label: '采集点' },
|
{ prop: 'createTimeView', label: '采集时间' },
|
]
|
const tableData = ref([])
|
|
// 获取监测点
|
const getPoint = () => {
|
getTemperaturePointList().then(res => {
|
typeOption.value = res.data
|
})
|
}
|
|
const getTableData = () => {
|
let data = {
|
limit: state.pageSize,
|
page: state.page,
|
...searchData
|
}
|
getTemptureReportList(data).then(res => {
|
tableData.value = res.data.list.map(item => {
|
let obj = {}
|
item.dataList.forEach(dl => {
|
obj[dl.code] = dl.value
|
})
|
return {
|
...item,
|
...obj
|
}
|
})
|
console.log(tableData.value)
|
state.total = res.data.total
|
})
|
}
|
|
// 分页按钮
|
const paginationFun = (data) => {
|
state.page = data.page
|
getTableData()
|
}
|
|
// 导出报表
|
const exportData = () => {
|
let data = {
|
limit: state.pageSize,
|
page: state.page,
|
...searchData
|
}
|
if(timeVal.value && timeVal.value.length > 0) {
|
data.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
|
} else {
|
data.createTimeRange = ''
|
}
|
exportTemptureReportList(data).then(res => {
|
exportBlobFile(res, `水温统计报表${new Date().getTime()}`)
|
})
|
}
|
|
// 搜索数据
|
const searchTable = () => {
|
if(timeVal.value && timeVal.value.length > 0) {
|
searchData.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
|
} else {
|
searchData.createTimeRange = ''
|
}
|
getTableData()
|
}
|
|
onMounted(() => {
|
const newArr = deepTableConfig.map(item => {
|
return {
|
prop: `${item}`,
|
label: `${item}m`
|
}
|
})
|
tableHead.splice(1, 0, ...newArr)
|
getPoint()
|
getTableData()
|
})
|
</script>
|
|
<template>
|
<div class="report">
|
<div class="report-tool">
|
<el-cascader size="large" v-model="searchData.pointId" :options="typeOption" :show-all-levels="false" :props="cascaderOption" clearable />
|
<el-date-picker
|
v-model="timeVal"
|
type="datetimerange"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
size="large"
|
style="width: 30rem"
|
clearable
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
/>
|
<el-button type="primary" size="large" style="width: 6rem" @click="searchTable">搜索</el-button>
|
<el-button type="success" size="large" style="width: 6rem" @click="exportData">一键导出</el-button>
|
</div>
|
<div class="report-table">
|
<el-table
|
:data="tableData"
|
style="width: 100%; height: 85%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
align="center"
|
width="80px"
|
></el-table-column>
|
<el-table-column
|
v-for="(item, index) in tableHead"
|
:key="index"
|
:prop="item.prop"
|
:label="item.label"
|
>
|
</el-table-column>
|
</el-table>
|
<div class="pagination" v-show="state.total > 0">
|
<div class="pagination-total">共{{state.total}}条</div>
|
<pagination
|
layout="prev, pager, next, jumper"
|
:total="state.total"
|
:page="state.page"
|
:limit="state.pageSize"
|
@pagination="paginationFun"
|
/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.report{
|
height: 100%;
|
background: linear-gradient( 180deg, #91BDDB 0%, rgba(102, 102, 102, 0.5) 100%);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
&-tool{
|
padding: 10px 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 30px;
|
:deep(.el-date-editor){
|
flex-grow: 0;
|
}
|
}
|
&-table{
|
width: 96%;
|
height: 90%;
|
background: rgba(23,108,229,0.3);
|
border: 1px solid #176CE5;
|
border-radius: 8px;
|
padding: 20px;
|
}
|
.pagination{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
.pagination-total{
|
color: #fff;
|
}
|
.pagination-container{
|
background: transparent;
|
}
|
}
|
}
|
</style>
|
