环路分析和换热站失水分析中数据列表加导出，做分页

src/api/energyAnalysis/index.ts

@@ -6,9 +6,11 @@ export default {
   getEnergyHuanluWaterLossLineChart: (params?: object) => get('/energy/huanlu/water/loss/line/chart', params), // 换热站失水分析折现图列表
   getEnergyWaterWarnList: (params?: object) => get('/energy/early/warn/list', params), // 换热站温度压力报警
 
-  
+
   getEnergyLoopdata: (params?: object) => get('/energy/loopdata', params), // 环路分析
+  getEnergyLoopdataPage: (params?: object) => get('/energy/loopdata/page_list', params), // 环路分析
   getEnergyWaterLossLineChart: (params?: object) => get('/energy/water/loss/line/chart', params), // 换热站失水分析
+  getEnergyHuanluWaterLossLineChartPage: (params?: object) => get('/energy/water/loss/page_list', params), // 换热站失水分析折现图列表
   getEnergyPerformance: (params?: object) => get('/energy/performance', params), // 绩效考核
   getEnergyTop: (params?: object) => get('/energy/top', params), // 能耗排行榜
 }

src/views/heating/energyAnalysis/analysisReport/index.vue

@@ -39,8 +39,8 @@
             </el-form-item>
           </el-form>
           <div class="chart" style="height: 400px" v-loading="state.tableData.loading" ref="lineChartRef"></div>
-          <div class="title">数据列表</div>
-          <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+          <div class="title" style="margin-top:20px">数据列表</div>
+          <el-table :data="tableData" v-loading="loading" style="width: 100%">
             <el-table-column label="ID" align="center" prop="id" width="60" />
             <el-table-column label="环路编号" prop="huanLuNo" :show-overflow-tooltip="true" />
             <el-table-column label="环路名称" prop="huanLuName" :show-overflow-tooltip="true" />
@@ -60,6 +60,7 @@
             <!-- <el-table-column label="室内温度" prop="" :show-overflow-tooltip="true" />
             <el-table-column label="室外温度" prop="" :show-overflow-tooltip="true" /> -->
           </el-table>
+          <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
         </div>
       </div>
     </el-card>
@@ -71,9 +72,19 @@ import { ref, reactive, watch, nextTick, onMounted } from 'vue';
 import * as echarts from 'echarts';
 import { useStore } from '/@/store/index';
 import heatApi from '/@/api/heatStation';
-import datahubApi from '/@/api/datahub';
 import energyApi from '/@/api/energyAnalysis';
 import { formatDate } from '/@/utils/formatTime'
+import { useSearch } from '/@/hooks/useCommon';
+import { stat } from 'fs';
+
+
+const { params, tableData, getList, loading } = useSearch<any[]>(energyApi.getEnergyLoopdataPage, 'list', {
+  loopCode: '',
+  dateRange: [
+    formatDate(new Date(), 'YYYY-mm-dd'),
+    formatDate(new Date(), 'YYYY-mm-dd')
+  ]
+})
 
 let global: any = {
   lineChart: null,
@@ -109,6 +120,9 @@ const state = reactive({
     }
   }
 })
+
+
+
 const lineChartRef = ref()
 const checkList = ref([])
 const treeRef = ref()
@@ -117,6 +131,9 @@ const curNode = ref('')
 watch(filterText, (val) => {
   treeRef.value!.filter(val)
 })
+watch(() => state.tableData.param.dateRange, (val) => {
+  params.dateRange = val
+})
 const filterNode = (value: string, data: any) => {
   if (!value) return true
   return data.name.includes(value)
@@ -128,12 +145,14 @@ const queryTree = () => {
       state.heatList = res || [];
       if (state.heatList.length) {
         curNode.value = state.heatList[0].code
+        params.loopCode = state.heatList[0].code
       }
       getChartData()
     });
 };
 // 
 const getChartData = () => {
+  getList();
   state.tableData.loading = true
   energyApi.getEnergyLoopdata({
     loopCode: curNode.value,
@@ -142,6 +161,7 @@ const getChartData = () => {
     const data = res.list || []
     state.tableData.data = data
 
+    state.lineChartXAxis = []
     state.inPressure1 = []
     state.inPressure2 = []
     state.inTemperature1 = []
@@ -170,6 +190,7 @@ const getChartData = () => {
 }
 const onNodeClick = (data: any) => {
   curNode.value = data.code
+  params.loopCode = data.code
   getChartData()
 }
 

src/views/heating/energyAnalysis/heatStationWaterAnalysis/index.vue

@@ -5,19 +5,10 @@
         <div class="left-panel">
           <el-input v-model="filterText" clearable placeholder="请输入" />
           <div class="list">
-            <el-tree
-              ref="treeRef"
-              class="filter-tree"
-              :data="state.heatList"
-              :props="{
+            <el-tree ref="treeRef" class="filter-tree" :data="state.heatList" :props="{
                 label: 'name',
                 children: 'loopInfo'
-              }"
-              default-expand-all
-							:expand-on-click-node="false"
-              :filter-node-method="filterNode"
-              @node-click="onNodeClick"
-            >
+              }" default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode" @node-click="onNodeClick">
               <template #default="{ data }">
                 <span class="custom-tree-node" :class="{ active: data.code === curNode }">
                   <span class="name" :title="data.name">{{ data.name }}</span>
@@ -25,41 +16,44 @@
               </template>
             </el-tree>
           </div>
-				</div>
-				<div class="right-panel">
-					<div class="title">供回水对比图</div>
-					<div style="height: 300px" v-loading="state.tableData.loading" ref="barChartRef"></div>
-					<div class="title mt-2">失水量曲线</div>
-					<div style="height: 300px" v-loading="state.tableData.loading" ref="lineChartRef"></div>
-					<div class="title mt-2">数据列表</div>
-					
-					<el-table :data="state.tableData.data" style="width: 100%" v-loading="state.tableData.loading">
-						<el-table-column type="index" width="55" label="序号" align="center" />
-						<el-table-column label="日期" v-col="'key'" prop="datetime" min-width="120" :show-overflow-tooltip="true" />
-						<el-table-column label="环路名称" prop="huanLuName" min-width="120" :show-overflow-tooltip="true" />
-						<el-table-column label="供水流量" prop="supplyWater" min-width="120" :show-overflow-tooltip="true" />
-						<el-table-column label="回水流量" prop="returnWater" min-width="120" :show-overflow-tooltip="true" />
-						<el-table-column label="失水量" prop="waterLoss" min-width="120" :show-overflow-tooltip="true" />
-					</el-table>
-				</div>
-			</div>
+        </div>
+        <div class="right-panel">
+          <div class="title">供回水对比图</div>
+          <div style="height: 300px" v-loading="state.tableData.loading" ref="barChartRef"></div>
+          <div class="title mt-2">失水量曲线</div>
+          <div style="height: 300px" v-loading="state.tableData.loading" ref="lineChartRef"></div>
+          <div class="title mt-2">数据列表</div>
+
+          <el-table :data="tableData" style="width: 100%" v-loading="loading">
+            <el-table-column type="index" width="55" label="序号" align="center" />
+            <el-table-column label="日期" v-col="'key'" prop="datetime" min-width="120" :show-overflow-tooltip="true" />
+            <el-table-column label="环路名称" prop="huanLuName" min-width="120" :show-overflow-tooltip="true" />
+            <el-table-column label="供水流量" prop="supplyWater" min-width="120" :show-overflow-tooltip="true" />
+            <el-table-column label="回水流量" prop="returnWater" min-width="120" :show-overflow-tooltip="true" />
+            <el-table-column label="失水量" prop="waterLoss" min-width="120" :show-overflow-tooltip="true" />
+          </el-table>
+          <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+        </div>
+      </div>
     </el-card>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { toRefs, reactive, onMounted, ref, watch, nextTick } from 'vue';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import * as echarts from 'echarts';
 import { useStore } from '/@/store/index';
 import api from '/@/api/energyAnalysis';
 import heatApi from '/@/api/heatStation';
 import { formatDate } from '/@/utils/formatTime';
+import { useSearch } from '/@/hooks/useCommon';
+
+const { params, tableData, getList, loading } = useSearch<any[]>(api.getEnergyHuanluWaterLossLineChartPage, 'list', { loopCode: '' });
 
 let global: any = {
-	barChart: null,
-	lineChart: null,
-	dispose: [null, '', undefined],
+  barChart: null,
+  lineChart: null,
+  dispose: [null, '', undefined],
 };
 
 const queryRef = ref();
@@ -67,28 +61,28 @@ const barChartRef = ref();
 const lineChartRef = ref();
 const store = useStore();
 const state = reactive({
-	myCharts: [],
-	charts: {
-		theme: '',
-		bgColor: '',
-		color: '#303133',
-	},
-	param: {
-		stationId: '',
-		principal: '',
-		interval: '',
-		flow: ''
-	},
-	heatList: [],
-	barChartXAxis: [],
-	barChartSeries1: [],
-	barChartSeries2: [],
-	lineChartXAixs: [],
-	lineChartSeries: [],
-	tableData: {
-		data: [],
-		loading: false
-	}
+  myCharts: [],
+  charts: {
+    theme: '',
+    bgColor: '',
+    color: '#303133',
+  },
+  param: {
+    stationId: '',
+    principal: '',
+    interval: '',
+    flow: ''
+  },
+  heatList: [],
+  barChartXAxis: [],
+  barChartSeries1: [],
+  barChartSeries2: [],
+  lineChartXAixs: [],
+  lineChartSeries: [],
+  tableData: {
+    data: [],
+    loading: false
+  }
 });
 
 const treeRef = ref()
@@ -104,6 +98,7 @@ const filterNode = (value: string, data: any) => {
 
 const onNodeClick = (data: any) => {
   curNode.value = data.code
+  params.loopCode = data.code
   queryLineChart()
 }
 
@@ -113,168 +108,170 @@ const queryTree = () => {
       state.heatList = res || [];
       if (state.heatList.length) {
         curNode.value = state.heatList[0].code
+        params.loopCode = state.heatList[0].code
       }
       queryLineChart()
     });
 };
 
 const queryLineChart = () => {
-	state.tableData.loading = true
-	api.getEnergyWaterLossLineChart({ loopCode: curNode.value })
-	// api.getEnergyWaterLossLineChart({ loopCode: 'D00107-1' })
-		.then((res: any) => {
-			console.log(res);
-			let data = res.list || []
-			
-			state.lineChartXAixs = []
-			state.lineChartSeries = []
-			state.barChartXAxis = []
-			state.barChartSeries1 = []
-			state.barChartSeries2 = []
-			
-			data.forEach((item: any) => {
-				state.lineChartXAixs.push(formatDate(new Date(item.datetime), 'HH:MM'));
-				state.lineChartSeries.push(item.waterLoss);
-				state.barChartXAxis.push(item.huanLuName);
-				state.barChartSeries1.push(item.supplyWater);
-				state.barChartSeries2.push(item.returnWater);
-			});
-			state.tableData.data = data
-			state.tableData.loading = false
-			
-			nextTick(() => {
-				initLineChart();
-				initBarChart();
-			});
-		});
+  getList()
+  state.tableData.loading = true
+  api.getEnergyWaterLossLineChart({ loopCode: curNode.value })
+    // api.getEnergyWaterLossLineChart({ loopCode: 'D00107-1' })
+    .then((res: any) => {
+      console.log(res);
+      let data = res.list || []
+
+      state.lineChartXAixs = []
+      state.lineChartSeries = []
+      state.barChartXAxis = []
+      state.barChartSeries1 = []
+      state.barChartSeries2 = []
+
+      data.forEach((item: any) => {
+        state.lineChartXAixs.push(formatDate(new Date(item.datetime), 'HH:MM'));
+        state.barChartXAxis.push(formatDate(new Date(item.datetime), 'HH:MM'));
+        state.lineChartSeries.push(item.waterLoss);
+        state.barChartSeries1.push(item.supplyWater);
+        state.barChartSeries2.push(item.returnWater);
+      });
+      state.tableData.data = data
+      state.tableData.loading = false
+
+      nextTick(() => {
+        initLineChart();
+        initBarChart();
+      });
+    });
 };
 // 页面加载时
 onMounted(() => {
-	queryTree()
+  queryTree()
 });
 
 // 初始化图表
 const initBarChart = () => {
-	if (!global.dispose.some((b: any) => b === global.barChart)) global.barChart.dispose();
-	global.barChart = <any>echarts.init(barChartRef.value, state.charts.theme);
-	const option =  {
-		tooltip: { trigger: 'axis' },
-		legend: {},
-		grid: {
-			left: '3%',
-			right: '4%',
-			bottom: '3%',
-			containLabel: true
-		},
-		xAxis: [
-			{
-				type: 'category',
-				data: state.barChartXAxis
-			}
-		],
-		yAxis: [
-			{
-				type: 'value'
-			}
-		],
-		series: [
-			{
-				name: '供水流量',
-				type: 'line',
-				symbolSize: 6,
-				symbol: 'circle',
-				smooth: true,
-				data: state.barChartSeries1
-			},
-			{
-				name: '回水流量',
-				type: 'line',
-				symbolSize: 6,
-				symbol: 'circle',
-				smooth: true,
-				data: state.barChartSeries2
-			}
-		]
-	};
-	(<any>global.barChart).setOption(option);
-	(<any>state.myCharts).push(global.barChart);
+  if (!global.dispose.some((b: any) => b === global.barChart)) global.barChart.dispose();
+  global.barChart = <any>echarts.init(barChartRef.value, state.charts.theme);
+  const option = {
+    tooltip: { trigger: 'axis' },
+    legend: {},
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: state.barChartXAxis
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '供水流量',
+        type: 'line',
+        symbolSize: 6,
+        symbol: 'circle',
+        smooth: true,
+        data: state.barChartSeries1
+      },
+      {
+        name: '回水流量',
+        type: 'line',
+        symbolSize: 6,
+        symbol: 'circle',
+        smooth: true,
+        data: state.barChartSeries2
+      }
+    ]
+  };
+  (<any>global.barChart).setOption(option);
+  (<any>state.myCharts).push(global.barChart);
 }
 // 初始化图标
 const initLineChart = () => {
-	if (!global.dispose.some((b: any) => b === global.lineChart)) global.lineChart.dispose();
-	global.lineChart = <any>echarts.init(lineChartRef.value, state.charts.theme);
-	const option = {
-		backgroundColor: state.charts.bgColor,
-		grid: {
-			left: '3%',
-			right: '4%',
-			bottom: '3%',
-			containLabel: true
-		},
-		tooltip: { trigger: 'axis' },
-		legend: { data: ['失水量'] },
-		xAxis: {
-			data: state.lineChartXAixs,
-		},
-		yAxis: [
-			{
-				type: 'value',
-				name: '',
-				splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
-			},
-		],
-		series: [
-			{
-				name: '失水量',
-				type: 'line',
-				symbolSize: 6,
-				symbol: 'circle',
-				smooth: true,
-				data: state.lineChartSeries
-			}
-		]
-	};
-	(<any>global.lineChart).setOption(option);
-	(<any>state.myCharts).push(global.lineChart);
+  if (!global.dispose.some((b: any) => b === global.lineChart)) global.lineChart.dispose();
+  global.lineChart = <any>echarts.init(lineChartRef.value, state.charts.theme);
+  const option = {
+    backgroundColor: state.charts.bgColor,
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    tooltip: { trigger: 'axis' },
+    legend: { data: ['失水量'] },
+    xAxis: {
+      data: state.lineChartXAixs,
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '',
+        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+      },
+    ],
+    series: [
+      {
+        name: '失水量',
+        type: 'line',
+        symbolSize: 6,
+        symbol: 'circle',
+        smooth: true,
+        data: state.lineChartSeries
+      }
+    ]
+  };
+  (<any>global.lineChart).setOption(option);
+  (<any>state.myCharts).push(global.lineChart);
 }
 
 // 批量设置 echarts resize
 const initEchartsResizeFun = () => {
-	nextTick(() => {
-		for (let i = 0; i < state.myCharts.length; i++) {
-			setTimeout(() => {
-				(<any>state.myCharts[i]).resize();
-			}, i * 1000);
-		}
-	});
+  nextTick(() => {
+    for (let i = 0; i < state.myCharts.length; i++) {
+      setTimeout(() => {
+        (<any>state.myCharts[i]).resize();
+      }, i * 1000);
+    }
+  });
 };
 // 批量设置 echarts resize
 const initEchartsResize = () => {
-	window.addEventListener('resize', initEchartsResizeFun);
+  window.addEventListener('resize', initEchartsResizeFun);
 };
 // 页面加载时
 onMounted(() => {
-	initEchartsResize();
+  initEchartsResize();
 });
 
 // 监听 vuex 中是否开启深色主题
 watch(
-	() => store.state.themeConfig.themeConfig.isIsDark,
-	(isIsDark) => {
-		nextTick(() => {
-			state.charts.theme = isIsDark ? 'transparent' : '';
-			state.charts.bgColor = isIsDark ? 'transparent' : '';
-			state.charts.color = isIsDark ? '#dadada' : '#303133';
-			setTimeout(() => {
-				// initBarChart();
-				initLineChart();
-			}, 500)
-		});
-	},
-	{
-		deep: true,
-		immediate: true,
-	}
+  () => store.state.themeConfig.themeConfig.isIsDark,
+  (isIsDark) => {
+    nextTick(() => {
+      state.charts.theme = isIsDark ? 'transparent' : '';
+      state.charts.bgColor = isIsDark ? 'transparent' : '';
+      state.charts.color = isIsDark ? '#dadada' : '#303133';
+      setTimeout(() => {
+        // initBarChart();
+        initLineChart();
+      }, 500)
+    });
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
 );
 </script>
 
@@ -286,17 +283,17 @@ watch(
 }
 
 .panel {
-  display: grid;
-  grid-template-columns: 250px 1fr;
-  .left-panel {
-    .list {
-      max-height: 625px;
-      overflow-y: auto;
-    }
-  }
-  .right-panel {
-    padding: 16px;
-  }
+	display: grid;
+	grid-template-columns: 250px 1fr;
+	.left-panel {
+		.list {
+			max-height: 625px;
+			overflow-y: auto;
+		}
+	}
+	.right-panel {
+		padding: 16px;
+	}
 }
 
 .custom-tree-node {