<script setup>
|
import {ref, onMounted} from "vue";
|
import {getFlowPointList} from "@/api/screen/index.js";
|
import {getFlowReportList, exportFlowReportList} from "@/api/screen/report/index.js";
|
import Table from '@/components/Table/index.vue'
|
import { exportBlobFile } from '@/utils/index.js'
|
|
const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
|
const typeOption = ref([])
|
const timeOption = ref([
|
{ label: '小时', value: 1 },
|
{ label: '日', value: 2 },
|
{ label: '月', value: 4 },
|
{ label: '季度', value: 5 },
|
{ label: '年', value: 6 },
|
])
|
const timeVal = ref([])
|
const searchData = reactive({
|
pointId: '',
|
dateType: 2,
|
createTimeRange: ''
|
})
|
const tableRef = ref(null); //表格实例
|
let tableHead = [
|
{ prop: 'flowVelocity', label: '流速 (m/s)' },
|
{ prop: 'newFlow', label: '瞬时流量 (m³/h)', },
|
{ prop: 'totalFlow', label: '累计流量 (m³)' },
|
{ prop: 'pointName', label: '采集点' },
|
{ prop: 'uploadTimeView', label: '采集时间' },
|
]
|
|
// 获取监测点
|
const getPoint = () => {
|
getFlowPointList().then(res => {
|
typeOption.value = res.data
|
})
|
}
|
|
// 导出报表
|
const exportData = () => {
|
let data = {
|
limit: tableRef.value.state.limit,
|
page: tableRef.value.state.page,
|
...searchData
|
}
|
if(timeVal.value && timeVal.value.length > 0) {
|
data.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
|
} else {
|
data.createTimeRange = ''
|
}
|
exportFlowReportList(data).then(res => {
|
exportBlobFile(res, '统计报表')
|
})
|
}
|
|
// 搜索数据
|
const searchTable = () => {
|
if(timeVal.value && timeVal.value.length > 0) {
|
searchData.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
|
} else {
|
searchData.createTimeRange = ''
|
}
|
tableRef.value.getData()
|
}
|
|
onMounted(() => {
|
getPoint()
|
})
|
</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-select
|
v-model="searchData.dateType"
|
class="tool-select"
|
size="large"
|
placeholder="请选择"
|
clearable
|
style="width: 15rem"
|
>
|
<el-option
|
v-for="item in timeOption"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<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">
|
<Table ref="tableRef" :getList="getFlowReportList" :headList="tableHead" :searchData="searchData"></Table>
|
</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;
|
}
|
}
|
</style>
|
