From 98247bb0b4da9a322c97867262c1a76c53ace520 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期三, 26 三月 2025 17:05:18 +0800
Subject: [PATCH] fix: 生态报表
---
src/views/screen/temperature/report/index.vue | 112 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 109 insertions(+), 3 deletions(-)
diff --git a/src/views/screen/temperature/report/index.vue b/src/views/screen/temperature/report/index.vue
index 678bffa..47c0271 100644
--- a/src/views/screen/temperature/report/index.vue
+++ b/src/views/screen/temperature/report/index.vue
@@ -1,13 +1,119 @@
<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'
+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); //表格实例
+let tableHead = [
+ { prop: 'flowVelocity', label: '流速 (m/s)' },
+ { prop: 'newFlow', label: '瞬时流量 (m³/h)', },
+ { prop: 'totalFlow', label: '累计流量 (m³)' },
+ { prop: 'pointName', label: '采集点' },
+ { prop: 'uploadTimeView', label: '采集时间' },
+]
+
+// 获取监测点
+const getPoint = () => {
+ getTemperaturePointList().then(res => {
+ typeOption.value = res.data
+ })
+}
+
+// 搜索数据
+const searchTable = () => {
+ if(timeVal.value && timeVal.value.length > 0) {
+ searchData.createTimeRange = timeVal.value[0] + '~' + timeVal.value[1]
+ } else {
+ searchData.createTimeRange = ''
+ }
+ tableRef.value.getData()
+}
+
+onMounted(() => {
+ getPoint()
+})
</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-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"
+ 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">一键导出</el-button>
+ </div>
+ <div class="report-table">
+ <Table ref="tableRef" :getList="getFlowReportList" :headList="tableHead" :searchData="searchData"></Table>
+ </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;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3