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 | 200 ++++++++++++++++++++++++++++++++++----------------
1 files changed, 136 insertions(+), 64 deletions(-)
diff --git a/src/views/screen/temperature/report/index.vue b/src/views/screen/temperature/report/index.vue
index 061c394..2c09f9c 100644
--- a/src/views/screen/temperature/report/index.vue
+++ b/src/views/screen/temperature/report/index.vue
@@ -1,91 +1,151 @@
<script setup>
-import {ref} from "vue";
-import Table from '@/components/Table/index.vue'
+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 selectType = ref(1);
-const typeOption = ref([
- { label: '水电站流量监测点', value: 1 },
- { label: '新扎口流量监测点', value: 2 },
-])
-const time = ref()
+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: 'code', label: '流速 (m/s)' },
- { prop: 'shebei', label: '瞬时流量 (m³/h)', },
- { prop: 'content', label: '累计流量 (m³)' },
- { prop: 'sure', label: '采集点' },
- { prop: 'time', label: '采集时间' },
+ { prop: 'pointName', label: '采集点' },
+ { prop: 'createTimeView', label: '采集时间' },
]
+const tableData = ref([])
-const getTableData = () => {
- return new Promise(resolve => {
- let arr = {
- data:{
- list: [
- { code: '201', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '202', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
- { code: '203', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
- { code: '204', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '205', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '206', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '207', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 1 },
- { code: '208', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 2 },
- { code: '209', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
- { code: '2010', shebei: '雷达水位计', content: '设备离线', time: '2025-02-08', sure: 3 },
- ]
- },
- total: 30,
- }
- resolve(arr)
+// 获取监测点
+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-select
- v-model="selectType"
- class="tool-select"
- size="large"
- placeholder="Select"
- style="width: 20rem"
- >
- <el-option
- v-for="item in typeOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- <el-select
- v-model="selectType"
- class="tool-select"
- size="large"
- placeholder="Select"
- style="width: 20rem"
- >
- <el-option
- v-for="item in typeOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
+ <el-cascader size="large" v-model="searchData.pointId" :options="typeOption" :show-all-levels="false" :props="cascaderOption" clearable />
<el-date-picker
- v-model="time"
+ 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="success" size="large" style="width: 6rem">一键导出</el-button>
+ <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 :getList="getTableData" :headList="tableHead"></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