能耗分析下(环路分析，换热站失水分析，绩效考核，能耗排行榜)页面修改，接口对接

src/api/energyAnalysis/index.ts

@@ -8,4 +8,7 @@ export default {
 
   
   getEnergyLoopdata: (params?: object) => get('/energy/loopdata', params), // 环路分析
+  getEnergyWaterLossLineChart: (params?: object) => get('/energy/water/loss/line/chart', params), // 换热站失水分析
+  getEnergyPerformance: (params?: object) => get('/energy/performance', params), // 绩效考核
+  getEnergyTop: (params?: object) => get('/energy/top', params), // 能耗排行榜
 }

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

@@ -3,7 +3,7 @@
     <el-card shadow="hover">
       <div class="panel">
         <div class="left-panel">
-          <el-input v-model="filterText" placeholder="请输入" />
+          <el-input v-model="filterText" clearable placeholder="请输入" />
           <div class="list">
             <el-tree
               ref="treeRef"
@@ -26,22 +26,59 @@
           </div>
         </div>
         <div class="right-panel">
-          <div style="height: 600px" ref="lineChartRef"></div>
+          <el-form :model="state.tableData.param" ref="queryRef" :inline="true" label-width="68px" >
+            <el-form-item label="时间范围" prop="dateRange">
+              <el-date-picker v-model="state.tableData.param.dateRange"
+                size="default"
+                style="width: 240px"
+                value-format="YYYY-MM-DD"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item>
+              <el-button size="default" type="primary" @click="getChartData">
+                <el-icon>
+                  <ele-Search />
+                </el-icon>
+                查询
+              </el-button>
+              <!-- <el-button size="default" @click="resetQuery(queryRef)">
+                <el-icon>
+                  <ele-Refresh />
+                </el-icon>
+                重置
+              </el-button> -->
+            </el-form-item>
+          </el-form>
+          <div 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%">
+            <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" />
+            <el-table-column label="一网供水温度" prop="inTemperature1" :show-overflow-tooltip="true" />
+            <el-table-column label="一网回水温度" prop="outTemperature1" :show-overflow-tooltip="true" />
+            <el-table-column label="二网供水温度" prop="inTemperature2" :show-overflow-tooltip="true" />
+            <el-table-column label="二网回水温度" prop="outTemperature2" :show-overflow-tooltip="true" />
+            <el-table-column label="一网供水压力" prop="inPressure1" :show-overflow-tooltip="true" />
+            <el-table-column label="一网回水压力" prop="outPressure1" :show-overflow-tooltip="true" />
+            <el-table-column label="二网供水压力" prop="inPressure2" :show-overflow-tooltip="true" />
+            <el-table-column label="二网回水压力" prop="outPressure2" :show-overflow-tooltip="true" />
+            <el-table-column label="一网供水流量" prop="supplyWaterFlow" :show-overflow-tooltip="true" />
+            <el-table-column label="一网回水流量" prop="returnWaterFlow" :show-overflow-tooltip="true" />
+            <el-table-column label="二网供水流量" prop="supplyWaterFlow2" :show-overflow-tooltip="true" />
+            <el-table-column label="二网回水流量" prop="returnWaterFlow2" :show-overflow-tooltip="true" />
+            <el-table-column label="阀门开度" prop="supplyValve" :show-overflow-tooltip="true" />
+            <!-- <el-table-column label="室内温度" prop="" :show-overflow-tooltip="true" />
+            <el-table-column label="室外温度" prop="" :show-overflow-tooltip="true" /> -->
+          </el-table>
         </div>
       </div>
-      <!-- <el-checkbox-group v-model="checkList">
-				<el-checkbox label="一网供水温度" />
-				<el-checkbox label="一网回水温度" />
-				<el-checkbox label="一网供水压力" />
-				<el-checkbox label="一网回水压力" />
-				<el-checkbox label="二网供水温度" />
-				<el-checkbox label="二网回水温度" />
-				<el-checkbox label="二网供水压力" />
-				<el-checkbox label="二网回水压力" />
-			</el-checkbox-group> -->
-
-      
-      <!-- <ChartDom :height="400" :option="lineChartOptions"/> -->
     </el-card>
   </div>
 </template>
@@ -53,6 +90,7 @@ 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'
 
 let global: any = {
   lineChart: null,
@@ -77,6 +115,16 @@ const state = reactive({
   outPressure2: [],
   outTemperature1: [],
   outTemperature2: [],
+  tableData: {
+    data: [],
+    loading: false,
+    param: {
+      dateRange: [
+        formatDate(new Date(), 'YYYY-mm-dd'),
+        formatDate(new Date(), 'YYYY-mm-dd')
+      ]
+    }
+  }
 })
 const lineChartRef = ref()
 const checkList = ref([])
@@ -88,50 +136,9 @@ watch(filterText, (val) => {
 })
 const filterNode = (value: string, data: any) => {
   if (!value) return true
-  return data.label.includes(value)
+  return data.name.includes(value)
 }
 
-// 获取供热监测数据
-const getStatisticsChartData = () => {
-  datahubApi.statistics.getStatisticsChartData({ tableNo: 17 }).then((res: any) => {
-    console.log(res)
-    const data = res.Info
-    // "huanLuNo": "D00140-4", //换热站编号
-    // "huanLuName": "8#楼高区", //换热站名称
-    // "inPressure1": 0, //一网供水压力
-    // "inPressure2": 0, //二网供水压力
-    // "inTemperature1": 0, //一网供水温度
-    // "inTemperature2": 0, //二网供水温度
-    // "outPressure1": 0, //一网回水压力
-    // "outPressure2": 0, //二网回水压力
-    // "outTemperature1": 0, //一网回水温度
-    // "outTemperature2": 0 //二网回水温度
-    state.inPressure1 = []
-    state.inPressure2 = []
-    state.inTemperature1 = []
-    state.inTemperature2 = []
-    state.outPressure1 = []
-    state.outPressure2 = []
-    state.outTemperature1 = []
-    state.outTemperature2 = []
-
-    data.forEach((item: any) => {
-      state.lineChartXAxis.push(item.huanLuName);
-      state.inPressure1.push(item.inPressure1);
-      state.inPressure2.push(item.inPressure2);
-      state.inTemperature1.push(item.inTemperature1);
-      state.inTemperature2.push(item.inTemperature2);
-      state.outPressure1.push(item.outPressure1);
-      state.outPressure2.push(item.outPressure2);
-      state.outTemperature1.push(item.outTemperature1);
-      state.outTemperature2.push(item.outTemperature2);
-    });
-
-    nextTick(() => {
-      initLineChart();
-    });
-  });
-};
 const queryTree = () => {
   heatApi.heatStation.getAllStaAndLoop({})
     .then((res: any) => {
@@ -144,10 +151,14 @@ const queryTree = () => {
 };
 // 
 const getChartData = () => {
+  state.tableData.loading = true
   energyApi.getEnergyLoopdata({
-    loopCode: curNode.value
+    loopCode: curNode.value,
+    dateRange: state.tableData.param.dateRange
   }).then((res: any) => {
     const data = res.list || []
+    state.tableData.data = data
+    
     state.inPressure1 = []
     state.inPressure2 = []
     state.inTemperature1 = []
@@ -168,7 +179,7 @@ const getChartData = () => {
       state.outTemperature1.push(item.outTemperature1);
       state.outTemperature2.push(item.outTemperature2);
     });
-
+    state.tableData.loading = false
     nextTick(() => {
       initLineChart();
     });
@@ -179,7 +190,7 @@ const onNodeClick = (data: any) => {
   getChartData()
 }
 
-// 初始化图标
+// 初始化图表
 const initLineChart = () => {
   if (!global.dispose.some((b: any) => b === global.lineChart)) global.lineChart.dispose();
   global.lineChart = <any>echarts.init(lineChartRef.value, state.charts.theme);
@@ -199,12 +210,12 @@ const initLineChart = () => {
       },
     ],
     series: [
-      { name: '一网供水压力', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.inPressure1 },
-      { name: '二网供水压力', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.inPressure2 },
+      // { name: '一网供水压力', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.inPressure1 },
+      // { name: '二网供水压力', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.inPressure2 },
       { name: '一网供水温度', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.inTemperature1 },
       { name: '二网供水温度', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.inTemperature2 },
-      { name: '一网回水压力', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.outPressure1 },
-      { name: '二网回水压力', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.outPressure2 },
+      // { name: '一网回水压力', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.outPressure1 },
+      // { name: '二网回水压力', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.outPressure2 },
       { name: '一网回水温度', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.outTemperature1 },
       { name: '二网回水温度', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, data: state.outTemperature2 }
     ]
@@ -241,9 +252,9 @@ watch(
       state.charts.theme = isIsDark ? 'dark' : '';
       state.charts.bgColor = isIsDark ? 'transparent' : '';
       state.charts.color = isIsDark ? '#dadada' : '#303133';
-      // setTimeout(() => {
-      // 	initLineChart();
-      // }, 500);
+      setTimeout(() => {
+      	initLineChart();
+      }, 500);
     });
   },
   {
@@ -254,15 +265,10 @@ watch(
 </script>
 
 <style scoped lang="scss">
-// .page-container {
-//   height: 100%;
-// }
-// .el-card {
-//   height: 100%;
-// }
-// .el-card__body {
-//   height: 100%;
-// }
+.title {
+	font-size: 16px;
+	font-weight: bold;
+}
 .panel {
   display: grid;
   grid-template-columns: 250px 1fr;
@@ -272,6 +278,9 @@ watch(
       overflow-y: auto;
     }
   }
+  .right-panel {
+    padding: 16px;
+  }
 }
 
 .custom-tree-node {
@@ -284,4 +293,8 @@ watch(
 		// background: var(--el-color-primary-light-9);
 	}
 }
+
+:deep(.el-form-item) {
+  // margin-bottom: 0;
+}
 </style>

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

@@ -0,0 +1,255 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="state.tableData.param" ref="queryRef" :inline="true" label-width="60px">
+					<el-form-item label="类型" prop="type">
+						<el-radio-group v-model="state.tableData.param.type" size="default" @change="queryList">
+							<el-radio-button label="1">热单耗</el-radio-button>
+							<el-radio-button label="2">电单耗</el-radio-button>
+							<el-radio-button label="3">水单耗</el-radio-button>
+						</el-radio-group>
+					</el-form-item>
+          <el-form-item label="top" prop="top">
+            <el-select v-model="state.tableData.param.top" placeholder="top" filterable clearable size="default" @change="queryList">
+							<el-option label="10" :value="10" />
+							<el-option label="30" :value="30" />
+							<el-option label="60" :value="60" />
+						</el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+			<div class="title mt20">能耗红榜</div>
+			<div class="chart-grid">
+				<div style="height: 300px" v-loading="state.tableData.loading" ref="redChartOneRef"></div>
+			</div>
+			<div class="title mt20">能耗黑榜</div>
+			<div class="chart-grid">
+				<div style="height: 300px" v-loading="state.tableData.loading" ref="blackChartOneRef"></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 energyApi from '/@/api/energyAnalysis';
+
+let global: any = {
+	redChartOneRef: null,
+	blackChartOneRef: null,
+	dispose: [null, '', undefined],
+};
+
+const queryRef = ref();
+const redChartOneRef = ref();
+const blackChartOneRef = ref();
+
+const store = useStore();
+const state = reactive({
+	myCharts: [],
+	charts: {
+		theme: '',
+		bgColor: '',
+		color: '#303133',
+	},
+	chartTitle: '',
+  redChartXAxis: [],
+  redChartList: [],
+  blackChartXAxis: [],
+  blackChartList: [],
+	tableData: {
+		data: [],
+		loading: false,
+		total: 0,
+		param: {
+			type: 1,
+			top: 10,
+		}
+	}
+});
+
+const queryList = () => {
+	state.tableData.loading = true
+	energyApi.getEnergyTop(state.tableData.param)
+		.then(res => {
+			console.log(res)
+			let data = res.data
+			let titleMap = {
+				1: '热单耗',
+				2: '水单耗',
+				3: '电单耗'
+			}
+  		state.chartTitle = titleMap[state.tableData.param.type]
+  		state.redChartXAxis = []
+			state.redChartList = []
+			state.blackChartXAxis = []
+			state.blackChartList = []
+			data.head.forEach((item: any) => {
+				state.redChartXAxis.push(item.huanLuName)
+				state.redChartList.push(item.value)
+			})
+			data.tail.forEach((item: any) => {
+				state.blackChartXAxis.push(item.huanLuName)
+				state.blackChartList.push(item.value)
+			})
+			state.tableData.loading = false
+
+			nextTick(() => {
+				initChart()
+			})
+		})
+}
+// 页面加载时
+onMounted(() => {
+	queryList()
+});
+
+const initChart = () => {
+	initBarRedChart()
+	initBarBlackChart()
+}
+
+// 初始化图表
+const initBarRedChart = () => {
+	if (!global.dispose.some((b: any) => b === global.redChartOneRef)) global.redChartOneRef.dispose();
+	global.redChartOneRef = <any>echarts.init(redChartOneRef.value, state.charts.theme);
+	const option = {
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'shadow'
+			}
+		},
+		legend: {},
+		grid: {
+			left: '3%',
+			right: '4%',
+			bottom: '3%',
+			containLabel: true
+		},
+		xAxis: [
+			{
+				type: 'category',
+				data: state.redChartXAxis
+			}
+		],
+		yAxis: [
+			{
+				type: 'value'
+			}
+		],
+		series: [
+			{
+				name: state.chartTitle,
+				type: 'bar',
+				emphasis: {
+					focus: 'series'
+				},
+				data: state.redChartList
+			}
+		]
+	};
+	(<any>global.redChartOneRef).setOption(option);
+	(<any>state.myCharts).push(global.redChartOneRef);
+}
+const initBarBlackChart = () => {
+	if (!global.dispose.some((b: any) => b === global.blackChartOneRef)) global.blackChartOneRef.dispose();
+	global.blackChartOneRef = <any>echarts.init(blackChartOneRef.value, state.charts.theme);
+	const option = {
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'shadow'
+			}
+		},
+		legend: {},
+		grid: {
+			left: '3%',
+			right: '4%',
+			bottom: '3%',
+			containLabel: true
+		},
+		xAxis: [
+			{
+				type: 'category',
+				data: state.blackChartXAxis
+			}
+		],
+		yAxis: [
+			{
+				type: 'value'
+			}
+		],
+		series: [
+			{
+				name: state.chartTitle,
+				type: 'bar',
+				emphasis: {
+					focus: 'series'
+				},
+				data: state.blackChartList
+			}
+		]
+	};
+	(<any>global.blackChartOneRef).setOption(option);
+	(<any>state.myCharts).push(global.blackChartOneRef);
+}
+
+// 批量设置 echarts resize
+const initEchartsResizeFun = () => {
+	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);
+};
+// 页面加载时
+onMounted(() => {
+	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(() => {
+				initChart();
+			}, 500)
+		});
+	},
+	{
+		deep: true,
+		immediate: true,
+	}
+);
+</script>
+
+
+<style lang="scss" scoped>
+.title {
+	font-size: 16px;
+	font-weight: bold;
+}
+.chart-grid {
+	// display: grid;
+	// grid-template-columns: repeat(3, 1fr);
+	// grid-column-gap: 10px;
+}
+.mt20 {
+	margin-top: 20px;
+}
+</style>

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

@@ -1,82 +1,47 @@
 <template>
   <div class="system-dic-container">
     <el-card shadow="hover">
-      <div class="system-user-search mb15">
-        <el-form :model="state.param" ref="queryRef" :inline="true" label-width="120px">
-          <!-- <el-form-item label="环路名称" prop="plotId">
-            <el-select v-model="searchParams.plotId" placeholder="选择环路名称" filterable clearable size="default">
-							<el-option
-								v-for="item in []"
-								:key="item.id"
-								:label="item.name"
-								:value="item.id">
-							</el-option>
-						</el-select>
-          </el-form-item> -->
-					<el-form-item label="所属换热站" prop="stationId">
-						<el-tree-select
-							v-model="state.param.stationId"
-							:data="state.heatList"
-							:props="{
-								label: 'name',
-								children: 'children'
-							}"
-							node-key="id"
-							:clearable="true"
-							check-strictly
-							size="default"
-							style="width: 100%;"
-							placeholder="请选择"
-							:render-after-expand="true"
-						/>
-					</el-form-item>
-          <el-form-item label="负责人" prop="principal">
-            <el-select v-model="state.param.principal" placeholder="选择负责人" filterable clearable size="default">
-							<el-option
-								v-for="item in []"
-								:key="item.id"
-								:label="item.name"
-								:value="item.id">
-							</el-option>
-						</el-select>
-          </el-form-item>
-          <el-form-item label="时间间隔(秒)" prop="interval">
-            <el-input-number size="default" v-model="state.param.interval"></el-input-number>
-          </el-form-item>
-          <el-form-item label="流量限值" prop="flow">
-            <el-input-number size="default" v-model="state.param.flow"></el-input-number>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="initPage">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <!-- <el-button size="default" @click="resetQuery(queryRef)">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button> -->
-          </el-form-item>
-        </el-form>
-      </div>
-			
-			<div class="title">供回水对比图</div>
-			<div style="height: 300px" ref="barChartRef"></div>
-			<div class="title mt-2">失水量曲线</div>
-			<div style="height: 300px" 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="key" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="环路名称" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="供水流量" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="回水流量" prop="value" min-width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="失水量" prop="value" min-width="120" :show-overflow-tooltip="true" />
-      </el-table>
+      <div class="panel">
+        <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="{
+                label: 'name',
+                children: 'loopInfo'
+              }"
+              default-expand-all
+              :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>
+                </span>
+              </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>
     </el-card>
   </div>
 </template>
@@ -120,77 +85,72 @@ const state = reactive({
 	lineChartXAixs: [],
 	lineChartSeries: [],
 	tableData: {
-		data: [{ value: '-' }, { value: '-' }],
+		data: [],
 		loading: false
 	}
 });
 
+const treeRef = ref()
+const filterText = ref('')
+const curNode = ref('')
+watch(filterText, (val) => {
+  treeRef.value!.filter(val)
+})
+const filterNode = (value: string, data: any) => {
+  if (!value) return true
+  return data.name.includes(value)
+}
+
+const onNodeClick = (data: any) => {
+  curNode.value = data.code
+  queryLineChart()
+}
+
 const queryTree = () => {
-	heatApi.heatStation.getList({
-		name: '',
-		code: '',
-		status: -1
-	})
-	.then((res: any) => {
-		state.heatList = res || [];
-	});
+  heatApi.heatStation.getAllStaAndLoop({})
+    .then((res: any) => {
+      state.heatList = res || [];
+      if (state.heatList.length) {
+        curNode.value = state.heatList[0].code
+      }
+      queryLineChart()
+    });
 };
 
 const queryLineChart = () => {
-	api.getEnergyHuanluWaterLossLineChart({ TableNo: 24, Interval: '' }).then((res: any) => {
-		console.log(res);
-		let data = res.list || []
-		
-		state.lineChartXAixs = []
-		state.lineChartSeries = []
-		
-		data.forEach((item: any) => {
-			state.lineChartXAixs.push(formatDate(new Date(item.time), 'HH:MM'));
-			state.lineChartSeries.push(item.waterLoss);
-		});
-	});
-};
-const queryChart = () => {
-	api.getEnergyHuanluWaterFlowList({ tableNo: 24 }).then((res: any) => {
-		console.log(res);
-		let data = res.Info || []
-		
-		state.barChartXAxis = []
-		state.barChartSeries1 = []
-		state.barChartSeries2 = []
-		
-		data.forEach((item: any) => {
-			state.barChartXAxis.push(item.huanLuName);
-			state.barChartSeries1.push(item.supplyWaterFlow1);
-			state.barChartSeries2.push(item.returnWaterFlow1);
-		});
-
-		nextTick(() => {
-			initBarChart();
+	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();
+			});
 		});
-	});
 };
 // 页面加载时
 onMounted(() => {
 	queryTree()
-	queryChart()
-	queryLineChart()
 });
-/** 重置按钮操作 */
-const resetQuery = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.resetFields();
-	// queryList();
-};
-const initPage = () => {
-	if (!state.param.stationId) {
-		ElMessage.warning('请选择换热站')
-		return
-	}
-	// queryChart()
-	// queryLineChart()
-}
-
 
 // 初始化图表
 const initBarChart = () => {
@@ -311,7 +271,7 @@ watch(
 			state.charts.bgColor = isIsDark ? 'transparent' : '';
 			state.charts.color = isIsDark ? '#dadada' : '#303133';
 			setTimeout(() => {
-				initBarChart();
+				// initBarChart();
 				initLineChart();
 			}, 500)
 		});
@@ -329,4 +289,29 @@ watch(
 	font-size: 16px;
 	font-weight: bold;
 }
+
+.panel {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  .left-panel {
+    .list {
+      max-height: 625px;
+      overflow-y: auto;
+    }
+  }
+  .right-panel {
+    padding: 16px;
+  }
+}
+
+.custom-tree-node {
+	.name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	&.active {
+		color: var(--el-color-primary);
+		// background: var(--el-color-primary-light-9);
+	}
+}
 </style>

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

@@ -2,26 +2,35 @@
   <div class="system-dic-container">
     <el-card shadow="hover">
       <div class="system-user-search mb15">
-        <el-form :model="searchParams" ref="queryRef" :inline="true" label-width="120px">
-          <el-form-item label="环路名称" prop="plotId">
-            <el-select v-model="searchParams.plotId" placeholder="选择环路名称" filterable clearable size="default">
-							<el-option
-								v-for="item in []"
-								:key="item.id"
-								:label="item.name"
-								:value="item.id">
-							</el-option>
+        <el-form :model="state.tableData.param" ref="queryRef" :inline="true" label-width="90px">
+					<el-form-item label="时间范围" prop="dateRange">
+						<el-date-picker v-model="state.tableData.param.dateRange"
+							size="default"
+							style="width: 240px"
+							value-format="YYYY-MM-DD"
+							type="daterange"
+							range-separator="-"
+							start-placeholder="开始日期"
+							end-placeholder="结束日期">
+						</el-date-picker>
+					</el-form-item>
+          <el-form-item label="排名" prop="sort">
+            <el-select v-model="state.tableData.param.sort" placeholder="按照选择进行排名" filterable clearable size="default">
+							<el-option label="总耗热" :value="1" />
+							<el-option label="热单耗" :value="2" />
+							<el-option label="总耗电" :value="3" />
+							<el-option label="电单耗" :value="4" />
+							<el-option label="总耗水" :value="5" />
+							<el-option label="水单耗" :value="6" />
 						</el-select>
           </el-form-item>
-          <el-form-item label="负责人" prop="plotId">
-            <el-select v-model="searchParams.plotId" placeholder="选择负责人" filterable clearable size="default">
-							<el-option
-								v-for="item in []"
-								:key="item.id"
-								:label="item.name"
-								:value="item.id">
-							</el-option>
-						</el-select>
+          <el-form-item label="换热站名称" prop="stationName">
+            <el-input v-model="state.tableData.param.stationName" placeholder="输入" clearable size="default">
+						</el-input>
+          </el-form-item>
+          <el-form-item label="环路名称" prop="loopName">
+            <el-input v-model="state.tableData.param.loopName" placeholder="输入" clearable size="default">
+						</el-input>
           </el-form-item>
           <el-form-item>
             <el-button size="default" type="primary" v-auth="'query'" class="ml10" @click="queryList">
@@ -46,18 +55,25 @@
         </el-form>
       </div>
 			<div class="title">环路数据统计</div>
-      <el-table :data="[]" style="width: 100%" >
+      <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" >
         <el-table-column type="index" label="序号" align="center" width="60" />
-	    	<el-table-column label="环路名称" prop="name" />
-	    	<el-table-column label="区域负责人" prop="number" />
-	    	<el-table-column label="总热耗" prop="number" />
-	    	<el-table-column label="热单耗" prop="number" />
-	    	<el-table-column label="总耗电" prop="number" />
-	    	<el-table-column label="电单耗" prop="number" />
-	    	<el-table-column label="总耗水" prop="number" />
-	    	<el-table-column label="水单耗" prop="number" />
+	    	<el-table-column label="环路名称" prop="huanLuName" />
+	    	<el-table-column label="所属换热站" prop="stationName" />
+	    	<el-table-column label="总热耗" prop="unitConsumptionTotal" />
+	    	<el-table-column label="热单耗" prop="unitConsumption" />
+	    	<el-table-column label="总耗电" prop="elctricConsumptionTotal" />
+	    	<el-table-column label="电单耗" prop="elctricConsumption" />
+	    	<el-table-column label="总耗水" prop="flowLossTotal" />
+	    	<el-table-column label="水单耗" prop="flowLoss" />
       </el-table>
-			<div class="title mt20">能耗红榜</div>
+			
+      <pagination
+				v-show="state.tableData.total>0"
+				:total="state.tableData.total"
+				v-model:page="state.tableData.param.pageNum"
+				v-model:limit="state.tableData.param.pageSize"
+				@pagination="queryList" />
+			<!-- <div class="title mt20">能耗红榜</div>
 			<div class="chart-grid">
 				<div style="height: 250px" ref="redChartOneRef"></div>
 				<div style="height: 250px" ref="redChartTwoRef"></div>
@@ -68,7 +84,7 @@
 				<div style="height: 250px" ref="blackChartOneRef"></div>
 				<div style="height: 250px" ref="blackChartTwoRef"></div>
 				<div style="height: 250px" ref="blackChartThreeRef"></div>
-			</div>
+			</div> -->
     </el-card>
   </div>
 </template>
@@ -78,7 +94,7 @@ 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/heatingDistrict';
+import energyApi from '/@/api/energyAnalysis';
 import heatApi from '/@/api/heatStation';
 
 let global: any = {
@@ -98,9 +114,7 @@ const redChartThreeRef = ref();
 const blackChartOneRef = ref();
 const blackChartTwoRef = ref();
 const blackChartThreeRef = ref();
-const searchParams = ref({
 
-})
 const store = useStore();
 const state = reactive({
 	myCharts: [],
@@ -109,8 +123,21 @@ const state = reactive({
 		bgColor: '',
 		color: '#303133',
 	},
-	
-	heatList: []
+	heatList: [],
+	tableData: {
+		data: [],
+		loading: false,
+		total: 0,
+		param: {
+			sort: 1,
+			isdesc: 2,
+			stationName: '',
+			loopName: '',
+			dateRange: [],
+			pageNum: 1,
+			pageSize: 10
+		}
+	}
 });
 
 const queryTree = () => {
@@ -123,15 +150,25 @@ const queryTree = () => {
 			state.heatList = res || [];
 		});
 };
+const queryList = () => {
+	state.tableData.loading = true
+	energyApi.getEnergyPerformance(state.tableData.param)
+		.then(res => {
+			state.tableData.data = res.list || []
+			state.tableData.total = res.Total
+			state.tableData.loading = false
+		})
+}
 // 页面加载时
 onMounted(() => {
 	// queryTree()
+	queryList()
 });
 /** 重置按钮操作 */
 const resetQuery = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
-	// queryList();
+	queryList();
 };
 
 let chartArr = [
@@ -221,7 +258,7 @@ watch(
 			state.charts.bgColor = isIsDark ? 'transparent' : '';
 			state.charts.color = isIsDark ? '#dadada' : '#303133';
 			setTimeout(() => {
-				initChart();
+				// initChart();
 			}, 500)
 		});
 	},