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 | 138 +++++++++++++++++++++++++++++++++++-----------
1 files changed, 105 insertions(+), 33 deletions(-)
diff --git a/src/views/screen/temperature/report/index.vue b/src/views/screen/temperature/report/index.vue
index 47c0271..2c09f9c 100644
--- a/src/views/screen/temperature/report/index.vue
+++ b/src/views/screen/temperature/report/index.vue
@@ -1,37 +1,77 @@
<script setup>
import {ref, onMounted} from "vue";
import {getTemperaturePointList} from "@/api/screen/index.js";
-import {getFlowReportList} from "@/api/screen/report/index.js";
-import Table from '@/components/Table/index.vue'
+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 timeOption = ref([
- { label: '小时', value: 1 },
- { label: '日', value: 2 },
- { label: '月', value: 3 },
- { label: '季度', value: 4 },
- { label: '年', value: 5 },
-])
const timeVal = ref([])
const searchData = reactive({
pointId: '',
- dateType: 2,
createTimeRange: ''
})
-const tableRef = ref(null); //表格实例
+const state = {
+ total: 0,
+ page: 1,
+ pageSize: 10,
+}
let tableHead = [
- { prop: 'flowVelocity', label: '流速 (m/s)' },
- { prop: 'newFlow', label: '瞬时流量 (m³/h)', },
- { prop: 'totalFlow', label: '累计流量 (m³)' },
{ prop: 'pointName', label: '采集点' },
- { prop: 'uploadTimeView', 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()}`)
})
}
@@ -42,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>
@@ -54,21 +102,6 @@
<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"
@@ -82,10 +115,37 @@
end-placeholder="结束时间"
/>
<el-button type="primary" size="large" style="width: 6rem" @click="searchTable">搜索</el-button>
- <el-button type="success" size="large" style="width: 6rem">一键导出</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>
+ <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>
@@ -115,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