环路分析页面原型修改，页面调整，对接

src/api/energyAnalysis/index.ts

@@ -5,4 +5,7 @@ export default {
   getEnergyHuanluWaterFlowList: (params?: object) => get('/energy/huanlu/water/flow/list', params), // 换热站失水分析条形图列表
   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), // 环路分析
 }

src/api/heatStation/index.ts

@@ -15,5 +15,6 @@ export default {
     edit: (data: object) => put('/region/heatStation/edit', data),
     del: (id: number) => del('/region/heatStation/del', { id }),
     detail: (id: number) => get('/region/heatStation/getInfoById', { id }),
+    getAllStaAndLoop: (params?: object) => get('/region/heatStation/getAllStaAndLoop', params)
   }
 }

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

@@ -1,6 +1,34 @@
 <template>
   <div class="page-container">
     <el-card shadow="hover">
+      <div class="panel">
+        <div class="left-panel">
+          <el-input v-model="filterText" 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 style="height: 600px" ref="lineChartRef"></div>
+        </div>
+      </div>
       <!-- <el-checkbox-group v-model="checkList">
 				<el-checkbox label="一网供水温度" />
 				<el-checkbox label="一网回水温度" />
@@ -12,7 +40,7 @@
 				<el-checkbox label="二网回水压力" />
 			</el-checkbox-group> -->
 
-      <div style="height: 600px" ref="lineChartRef"></div>
+      
       <!-- <ChartDom :height="400" :option="lineChartOptions"/> -->
     </el-card>
   </div>
@@ -24,6 +52,7 @@ 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';
 
 let global: any = {
   lineChart: null,
@@ -51,7 +80,16 @@ const state = reactive({
 })
 const lineChartRef = ref()
 const checkList = ref([])
-
+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.label.includes(value)
+}
 
 // 获取供热监测数据
 const getStatisticsChartData = () => {
@@ -95,15 +133,51 @@ const getStatisticsChartData = () => {
   });
 };
 const queryTree = () => {
-  heatApi.heatStation.getList({
-    name: '',
-    code: '',
-    status: -1
-  })
+  heatApi.heatStation.getAllStaAndLoop({})
     .then((res: any) => {
       state.heatList = res || [];
+      if (state.heatList.length) {
+        curNode.value = state.heatList[0].code
+      }
+      getChartData()
     });
 };
+// 
+const getChartData = () => {
+  energyApi.getEnergyLoopdata({
+    loopCode: curNode.value
+  }).then((res: any) => {
+    const data = res.list || []
+    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 onNodeClick = (data: any) => {
+  curNode.value = data.code
+  getChartData()
+}
 
 // 初始化图标
 const initLineChart = () => {
@@ -155,8 +229,7 @@ const initEchartsResize = () => {
 };
 // 页面加载时
 onMounted(() => {
-  // queryTree()
-  getStatisticsChartData()
+  queryTree()
   initEchartsResize();
 });
 
@@ -181,4 +254,34 @@ watch(
 </script>
 
 <style scoped lang="scss">
+// .page-container {
+//   height: 100%;
+// }
+// .el-card {
+//   height: 100%;
+// }
+// .el-card__body {
+//   height: 100%;
+// }
+.panel {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  .left-panel {
+    .list {
+      max-height: 625px;
+      overflow-y: auto;
+    }
+  }
+}
+
+.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/heatStation/loop/index.vue

@@ -53,7 +53,12 @@
         <el-table-column label="ID" align="center" prop="id" width="60" />
         <el-table-column label="编号" prop="code" v-col="'code'" :show-overflow-tooltip="true" />
         <el-table-column label="名称" prop="name" v-col="'name'" :show-overflow-tooltip="true" />
-	    	<el-table-column label="换热站" prop="stationId" v-col="'stationId'" :show-overflow-tooltip="true" />
+	    	<el-table-column label="换热站" prop="stationInfo.name" v-col="'stationId'" :show-overflow-tooltip="true">
+          <!-- <template #default="scope">
+            {{ scope.row.stationInfo.name }}
+          </template> -->
+        </el-table-column>
+				<!-- stationInfo -->
 	    	<el-table-column label="类型" prop="loopTypes" v-col="'loopTypes'">
           <template #default="scope">
             <el-tag type="success" size="small" v-if="scope.row.loopTypes === 1">一网</el-tag>