waibao2
3 days ago
2 changed files with 489 additions and 227 deletions
@ -0,0 +1,311 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container app-container-bg"> |
||||||
|
<el-card class="first-card" ref='firstCard' shadow="always"> |
||||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent> |
||||||
|
<el-form-item label="测站属性" prop="prop"> |
||||||
|
<el-select v-model="queryParams.prop" placeholder="请选择测站属性" style="width:100%" @change="propChange"> |
||||||
|
<el-option v-for="dict in propsList" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="测站名称" prop="stnmId"> |
||||||
|
<el-select v-model="queryParams.stnmId" placeholder="请选择测站名称" style="width:100%" @change="handleQuery"> |
||||||
|
<el-option v-for="dict in stationList" :key="dict.stnmId" :label="dict.stnm" :value="dict.stnmId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||||
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<el-row :gutter="10" class="mb8"> |
||||||
|
<el-col :span="1.5"> |
||||||
|
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['data:currdata:export']">导出</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-card> |
||||||
|
<div class="el-card-p card-shadow carder-border mt10 pad10 currdata" v-loading="fullscreenLoading"> |
||||||
|
<div class="table-container" v-if="processedTables.length > 0" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30"> |
||||||
|
<div class="table-grid" :style="{ gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)` }"> |
||||||
|
<div class="table-item" v-for="(table, index) in processedTables" :key="index"> |
||||||
|
<el-table :data="table.data" class="double-header-table" :show-header="true" :header-cell-style="{ backgroundColor: '#3F7DEC !important', }" style="width: 100%;" size="mini"> |
||||||
|
<el-table-column :label="table.stnm" width="120" show-overflow-tooltip> |
||||||
|
<template #header #default="scope"> |
||||||
|
<div class="header-content"> |
||||||
|
<el-tooltip effect="dark" :content="table.stnm" placement="top-end" :open-delay="300"> |
||||||
|
<div class="item-station cursor"> |
||||||
|
<div> |
||||||
|
{{ table.stnm }} |
||||||
|
</div> |
||||||
|
<div>{{ table.stcd }}</div> |
||||||
|
</div> |
||||||
|
</el-tooltip> |
||||||
|
<div class="header-right "> |
||||||
|
<span class="item-time">{{ table.tm }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<el-table-column prop="typeName" label="名称" show-overflow-tooltip /> |
||||||
|
<el-table-column prop="value" label="值" :class-name="value-name" /> |
||||||
|
<el-table-column prop="unit" label="单位" width="80" /> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-empty class="table-container " v-else :image-size="200"></el-empty> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import { ref, reactive, onMounted, } from 'vue' |
||||||
|
import _ from 'lodash' |
||||||
|
const { proxy } = getCurrentInstance() |
||||||
|
const alignment = 'center' |
||||||
|
const queryParams = reactive({ |
||||||
|
page: 1, |
||||||
|
limit: 10, |
||||||
|
stnmId: '', |
||||||
|
prop: "", |
||||||
|
mainType: "A" |
||||||
|
}) |
||||||
|
const fullscreenLoading = ref(false) |
||||||
|
let currdataList = [] |
||||||
|
let total = 0 |
||||||
|
const getList = async () => { |
||||||
|
fullscreenLoading.value = true; |
||||||
|
try { |
||||||
|
const res = await proxy.axiosGet('/data/currdata/queryAll', queryParams) |
||||||
|
if (res.code == 0) { |
||||||
|
currdataList = res.data |
||||||
|
total = currdataList.length |
||||||
|
formatTableData() |
||||||
|
} |
||||||
|
|
||||||
|
} catch (error) { |
||||||
|
} finally { |
||||||
|
fullscreenLoading.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
let tableList = ref([]) |
||||||
|
const formatTableData = () => { |
||||||
|
const result = _.chain(currdataList) |
||||||
|
.groupBy('stnm') |
||||||
|
.map((group, stnm) => ({ |
||||||
|
stnm, |
||||||
|
stcd: group[0].stcd, |
||||||
|
tm: group[0].latestTm, |
||||||
|
data: group.map(item => ({ |
||||||
|
...item, |
||||||
|
value: item.val !== null ? item.val : item.latestValue |
||||||
|
})) |
||||||
|
})) |
||||||
|
.value(); |
||||||
|
tableList.value = result |
||||||
|
} |
||||||
|
// 滚动加载更多 |
||||||
|
const busy = ref(false) |
||||||
|
const loadMore = async () => { |
||||||
|
let all = total <= queryParams.page * queryParams.limit |
||||||
|
if (busy.value && all) return; // 如果已经在加载中，则不执行加载操作 |
||||||
|
busy.value = true; // 设置加载状态为忙碌 |
||||||
|
queryParams.page += 1 |
||||||
|
let response = await proxy.axiosGet('/data/currdata/queryAll', queryParams); |
||||||
|
if (response.code == 0) { |
||||||
|
let rawData = response.data |
||||||
|
let concatData = currdataList.concat(rawData) |
||||||
|
currdataList = concatData |
||||||
|
formatTableData() |
||||||
|
} |
||||||
|
busy.value = false; |
||||||
|
|
||||||
|
} |
||||||
|
const itemsPerRow = ref(5) |
||||||
|
const processedTables = computed(() => { |
||||||
|
let data = tableList.value |
||||||
|
const result = []; |
||||||
|
const rows = Math.ceil(data.length / itemsPerRow.value); |
||||||
|
|
||||||
|
for (let i = 0; i < rows; i++) { |
||||||
|
const startIndex = i * itemsPerRow.value; |
||||||
|
const endIndex = Math.min(startIndex + itemsPerRow.value, data.length); |
||||||
|
const rowTables = data.slice(startIndex, endIndex); |
||||||
|
|
||||||
|
// 找出当前行中数据最多的表格 |
||||||
|
const maxRows = Math.max(...rowTables.map(table => table.data.length)); |
||||||
|
|
||||||
|
// 处理当前行的每个表格 |
||||||
|
rowTables.forEach(table => { |
||||||
|
const newTable = { ...table }; |
||||||
|
|
||||||
|
// 如果数据行数不足，补充空行 |
||||||
|
if (table.data.length < maxRows) { |
||||||
|
const emptyRows = Array(maxRows - table.data.length).fill({}); |
||||||
|
newTable.data = [...table.data, ...emptyRows]; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
result.push(newTable); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
return result; |
||||||
|
}) |
||||||
|
// 根据测站属性获取测站名称 |
||||||
|
const stationList = ref([]) |
||||||
|
const propChange = async () => { |
||||||
|
try { |
||||||
|
let res = await proxy.axiosGet('/basic/station/queryStnmandStnmId', queryParams); |
||||||
|
if (res.code == 200) { |
||||||
|
stationList.value = res.data; |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
/** 搜索按钮操作 */ |
||||||
|
const handleQuery = () => { |
||||||
|
queryParams.pageNum = 1 |
||||||
|
getList() |
||||||
|
} |
||||||
|
const resetQuery = () => { |
||||||
|
proxy.resetForm("queryForm"); |
||||||
|
handleQuery(); |
||||||
|
} |
||||||
|
// 导出按钮 |
||||||
|
const handleExport = async () => { |
||||||
|
let p = { |
||||||
|
page: 1, |
||||||
|
limit: 9999, |
||||||
|
stnm: queryParams.stnm, |
||||||
|
mainType: queryParams.mainType, |
||||||
|
} |
||||||
|
let res = await proxy.axiosGet('/data/currdata/queryAll', p); |
||||||
|
if (res.code === 0) { |
||||||
|
let table = []; |
||||||
|
table.push({ |
||||||
|
A: "站点名称", |
||||||
|
B: "设备ID", |
||||||
|
C: "类型", |
||||||
|
D: "最新数值", |
||||||
|
E: "最新上传时间", |
||||||
|
}); |
||||||
|
res.data.forEach(d => { |
||||||
|
let row = { |
||||||
|
A: d.stnm, |
||||||
|
B: d.stcd, |
||||||
|
C: d.typeName, |
||||||
|
D: d.latestValue, |
||||||
|
E: d.latestTm |
||||||
|
}; |
||||||
|
table.push(row); |
||||||
|
}); |
||||||
|
let header = ["A", "B", "C", "D", "E"]; |
||||||
|
let fileName = "站点实时数据"; |
||||||
|
proxy.exportExcel(header, table, fileName); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
getList() |
||||||
|
propChange() |
||||||
|
}) |
||||||
|
const propsList = ref([ |
||||||
|
{ label: '水文测站', value: 0 }, |
||||||
|
{ label: '气象站', value: 1 } |
||||||
|
]) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.currdata { |
||||||
|
overflow-y: scroll; |
||||||
|
} |
||||||
|
|
||||||
|
.table-container { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.table-grid { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(var(--grid-columns), 1fr); |
||||||
|
gap: 20px; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.table-item { |
||||||
|
min-width: 240px; |
||||||
|
/* 防止表格溢出*/ |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header-content { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: nowrap; |
||||||
|
|
||||||
|
.item-station { |
||||||
|
width: 150px; |
||||||
|
white-space: nowrap !important; |
||||||
|
text-overflow: ellipsis; |
||||||
|
word-break: break-all; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.item-station, |
||||||
|
.item-icon, |
||||||
|
.item-time { |
||||||
|
font-size: 12px; |
||||||
|
color: #fff; |
||||||
|
/* flex-wrap: nowrap; */ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.item-icon { |
||||||
|
cursor: pointer; |
||||||
|
margin-left: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* 表格样式 */ |
||||||
|
:deep(.double-header-table) { |
||||||
|
border-radius: 12px; |
||||||
|
|
||||||
|
&::before { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.el-table__fixed-right::before { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.el-table__body-wrapper::-webkit-scrollbar { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* 统一行高 */ |
||||||
|
.el-table__row { |
||||||
|
height: 39.6667px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 空行样式 */ |
||||||
|
.el-table__row--empty { |
||||||
|
background-color: #f5f7fa; |
||||||
|
} |
||||||
|
|
||||||
|
/* 隐藏子表头 */ |
||||||
|
.el-table__header tr:nth-child(2) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* 调整主表头样式 */ |
||||||
|
.el-table__header tr:first-child th { |
||||||
|
background: #f5f7fa; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** 取消表格滑上的背景色 */ |
||||||
|
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) { |
||||||
|
background: #fff !important; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue