From 010ce04ba6e27f2bd603cec692d2695d7a8a3c1f Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期三, 07 五月 2025 08:38:18 +0800
Subject: [PATCH] fix:修改水温深度监测
---
src/views/screen/temperature/report/index.vue | 94 +++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 86 insertions(+), 8 deletions(-)
diff --git a/src/views/screen/temperature/report/index.vue b/src/views/screen/temperature/report/index.vue
index b99a73d..2c09f9c 100644
--- a/src/views/screen/temperature/report/index.vue
+++ b/src/views/screen/temperature/report/index.vue
@@ -2,8 +2,8 @@
import {ref, onMounted} from "vue";
import {getTemperaturePointList} from "@/api/screen/index.js";
import {getTemptureReportList, exportTemptureReportList} from "@/api/screen/report/index.js";
-import Table from '@/components/Table/index.vue'
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([])
@@ -12,13 +12,16 @@
pointId: '',
createTimeRange: ''
})
-const tableRef = ref(null); //表格实例
+const state = {
+ total: 0,
+ page: 1,
+ pageSize: 10,
+}
let tableHead = [
- { prop: 'waterTemperature', label: '水温(℃)' },
- { prop: 'waterLevel', label: '水位(m)', },
{ prop: 'pointName', label: '采集点' },
{ prop: 'createTimeView', label: '采集时间' },
]
+const tableData = ref([])
// 获取监测点
const getPoint = () => {
@@ -27,11 +30,39 @@
})
}
+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: tableRef.value.state.limit,
- page: tableRef.value.state.page,
+ limit: state.pageSize,
+ page: state.page,
...searchData
}
if(timeVal.value && timeVal.value.length > 0) {
@@ -51,11 +82,19 @@
} else {
searchData.createTimeRange = ''
}
- tableRef.value.getData()
+ getTableData()
}
onMounted(() => {
+ const newArr = deepTableConfig.map(item => {
+ return {
+ prop: `${item}`,
+ label: `${item}m`
+ }
+ })
+ tableHead.splice(1, 0, ...newArr)
getPoint()
+ getTableData()
})
</script>
@@ -79,7 +118,34 @@
<el-button type="success" size="large" style="width: 6rem" @click="exportData">一键导出</el-button>
</div>
<div class="report-table">
- <Table ref="tableRef" :getList="getTemptureReportList" :headList="tableHead" :searchData="searchData"></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>
@@ -109,5 +175,17 @@
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>
\ No newline at end of file
--
Gitblit v1.9.3