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 | 184 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 181 insertions(+), 3 deletions(-)
diff --git a/src/views/screen/temperature/report/index.vue b/src/views/screen/temperature/report/index.vue
index 678bffa..2c09f9c 100644
--- a/src/views/screen/temperature/report/index.vue
+++ b/src/views/screen/temperature/report/index.vue
@@ -1,13 +1,191 @@
<script setup>
+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 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: 'pointName', 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()}`)
+ })
+}
+
+// 搜索数据
+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>
- 报表管理
+ <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-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">
+ <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>
<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;
+ }
+ .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