bigfixed：报表

ui/dasadmin/src/views/backend/report/SingleReport.vue

@@ -26,12 +26,17 @@
                     />
                     <div style="width: 20px"></div>
                     <div style="min-width: 30px">{{ t('statAnalysis.interval') }}</div>
-                    <el-select v-model="interval" :placeholder="'请选择' + t('statAnalysis.interval')" class="commonSelect">
+                    <el-select v-model="interval" :placeholder="'请选择' + t('statAnalysis.interval')" class="commonSelect" @change="intervalChange">
                         <el-option v-for="v in intervals" :key="v.value" :label="v.label" :value="v.value"></el-option>
                     </el-select>
                     <div style="width: 20px"></div>
                     <div style="min-width: 30px">{{ t('statAnalysis.calFunction') }}</div>
-                    <el-select v-model="calFunction" :placeholder="'请选择' + t('statAnalysis.calFunction')" class="commonSelect">
+                    <el-select
+                        v-model="calFunction"
+                        :placeholder="'请选择' + t('statAnalysis.calFunction')"
+                        class="commonSelect"
+                        :disabled="interval == 'NONE'"
+                    >
                         <el-option v-for="v in calFunctions" :key="v.value" :label="v.label" :value="v.value"></el-option>
                     </el-select>
                 </el-space>
@@ -70,7 +75,7 @@
         <el-table
             class="mainReport"
             :columns="reportTableColumn"
-            :data="reportTableData"
+            :data="pagedData"
             :row-key="(row: any) => row.id"
             :row-style="tableRowClassName"
             v-loading="reportLoading"
@@ -103,6 +108,20 @@
                 </template>
             </el-table-column>
         </el-table>
+        <div class="mainFooter">
+            <el-pagination
+                v-model:current-page="currentPage"
+                v-model:page-size="pageSize"
+                :page-sizes="pageSizes"
+                :total="totalRecords"
+                @current-change="handlePageChange"
+                @size-change="handlePageSizeChange"
+                layout="prev, pager, next, jumper,sizes,total"
+                background
+                class="pagination"
+            ></el-pagination>
+        </div>
+
         <el-dialog v-model="showMeasure" title="测点名称" :width="900" :destroy-on-close="true">
             <template #header>
                 <div class="measureSlotHeader">
@@ -129,7 +148,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, nextTick, onMounted } from 'vue'
+import { reactive, ref, nextTick, onMounted, computed } from 'vue'
 import { ElMessage, TableInstance, TreeInstance, ElMessageBox } from 'element-plus'
 import { Search, Upload, Notebook, Plus, Delete } from '@element-plus/icons-vue'
 import { WindBlowerList, RequestData, Devices } from './type'
@@ -225,6 +244,12 @@ const calFunctions = [
     { label: '最大值', value: 'max' },
     { label: '最小值', value: 'min' },
 ]
+
+const intervalChange = (val: any) => {
+    if (val == 'NONE') {
+        calFunction.value = 'interpolation'
+    }
+}
 // 模板
 const template = ref('')
 const reportTemplateList = ref<{ label: string; value: string; columns: any[]; interval: string; calFunction: string }[]>([])
@@ -437,6 +462,35 @@ const originReportColumn = [
 ]
 const reportTableColumn = ref(JSON.parse(JSON.stringify(originReportColumn)))
 
+// 当前页
+const currentPage = ref(1)
+// 每页显示的记录数
+const pageSize = ref(20)
+const pageSizes = ref([20, 50, 100])
+
+// 总记录数
+const totalRecords = ref(0)
+const pageDataCache = ref(new Map())
+const pagedData = computed(() => {
+    if (pageDataCache.value.has(currentPage.value)) {
+        return pageDataCache.value.get(currentPage.value)
+    } else {
+        return []
+    }
+})
+const totalPages = computed(() => {
+    return Math.ceil(totalRecords.value / pageSize.value)
+})
+// 页码变化时触发
+const handlePageChange = (page: number) => {
+    currentPage.value = page
+    loadDataForPage(page) // 加载当前页数据
+}
+const handlePageSizeChange = (size: number) => {
+    pageSize.value = size
+    currentPage.value = 1 // 每次改变 page-size 都重置为第一页
+    loadDataForPage(1) // 加载第一页数据
+}
 const reportTableData = ref([]) as any
 const idCounter = ref(0)
 const queryHistoryData = () => {
@@ -478,7 +532,7 @@ const queryHistoryData = () => {
 }
 
 const handleRes = (res: any, attributeCodes: any) => {
-    if (res.code == 200) {
+    if (res.code === 200) {
         const result = res.data
         if (Object.keys(result)?.length) {
             const realResult = result[windBlowerValue.value]
@@ -493,28 +547,29 @@ const handleRes = (res: any, attributeCodes: any) => {
                 }
             })
             const processedData = new Map()
-            idCounter.value = 0
+            let idCounter = 0
             if (tableData.length) {
                 tableData.forEach(({ name, times, value }: any) => {
                     times.forEach((time: number, index: number) => {
                         if (!processedData.has(time)) {
-                            processedData.set(time, { id: idCounter.value++, time: timestampToTime(time) })
+                            processedData.set(time, { id: idCounter++, time: timestampToTime(time) })
                         }
                         const values = value[index]
                         processedData.get(time)[name] = enumStore.keys.includes(name) ? enumStore.data?.[name]?.[values] : values
                     })
                 })
             }
+
+            totalRecords.value = processedData.size
             reportTableData.value = Array.from(processedData.values())
-            if (!reportTableData.value.length) {
+
-                ElMessage.warning('查询数据为空!')
+            currentPage.value = 1
-                reportTableData.value = []
-            }
             reportLoading.value = false
+            loadDataForPage(currentPage.value)
         } else {
-            ElMessage.warning('查询数据为空!')
-            reportTableData.value = []
             reportLoading.value = false
+            reportTableData.value = []
+            totalRecords.value = 0
         }
     } else {
         reportLoading.value = false
@@ -522,6 +577,16 @@ const handleRes = (res: any, attributeCodes: any) => {
     }
 }
 
+// 按需加载当前页的数据
+const loadDataForPage = (page: number) => {
+    const startIndex = (page - 1) * pageSize.value
+    const endIndex = page * pageSize.value
+    const pageData = reportTableData.value.slice(startIndex, endIndex)
+
+    // 将当前页数据缓存到 pageDataCache 中
+    pageDataCache.value.set(page, pageData)
+}
+
 // 时间转换
 const getFormattedDate = (offset: number) => {
     const date = new Date()
@@ -588,7 +653,11 @@ onMounted(() => {
     width: 100%;
     height: calc(100% - 155px);
 }
-
+.mainFooter {
+    display: flex;
+    justify-content: right;
+    background-color: #fff;
+}
 .commonSelect {
     min-width: 150px;
     :deep(.el-select__wrapper) {