refactor: 提取左侧树为公共组件并支持实例节点查询

src/api/classifyManage/index.js

@@ -75,4 +75,12 @@ export async function getTreeByIds(data) {
     return res.data;
   }
   return Promise.reject(new Error(res.data.message));
-}
+}
+// 根据ids查询物品分类
+export async function getTreeAndExampleByPid(parentId) {
+  const res = await request.get(`/main/categoryLevel/getTreeAndExampleByPid/${parentId}`);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/enum/dict.js

@@ -195,14 +195,12 @@ export const energyConsumingUnitList = [
       { value: '2', label: 'kJ' },
       { value: '3', label: 'MJ' },
       { value: '4', label: 'GJ' },
-      // { value: '5', label: 'm³' }
     ],
     priceUnit: [
       { value: '1', label: '元/J' },
       { value: '2', label: '元/kJ' },
       { value: '3', label: '元/MJ' },
       { value: '4', label: '元/GJ' },
-      // { value: '5', label: '元/m³' }
     ]
   }
 ];

src/views/centralizedMeterReading/collectionList.vue

@@ -8,36 +8,13 @@
         :right-style="{ overflow: 'hidden' }"
       >
         <!-- 左侧树形菜单 -->
-        <div class="left-sidebar">
-          <el-tabs
-            v-model="activeTab"
-            type="border-card"
-            @tab-click="activeTabChange"
-          >
-            <el-tab-pane label="设备类型" name="org">
-              <el-tree
-                :data="orgTreeData"
-                :props="treeProps"
-                node-key="id"
-                highlight-current
-                @node-click="handleNodeClick"
-                style="height: calc(100vh - 180px)"
-                ref="treeRef"
-              ></el-tree>
-            </el-tab-pane>
-            <el-tab-pane label="用能分区" name="energy">
-              <el-tree
-                :data="treeData"
-                :props="treeProps"
-                node-key="id"
-                default-expand-all
-                ref="treeRef1"
-                highlight-current
-                @node-click="handleNodeClick"
-              ></el-tree>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
+        <left-sidebar
+          ref="leftSidebarRef"
+          :active-tab.sync="activeTab"
+          @tab-change="activeTabChange"
+          @node-click="handleNodeClick"
+          @first-node="handleFirstNode"
+        ></left-sidebar>
 
         <!-- 右侧内容区 -->
         <template v-slot:content>
@@ -183,8 +160,7 @@
 <script>
   import dictMixins from '@/mixins/dictMixins';
   import tableColumnsMixin from '@/mixins/tableColumnsMixin';
-  import { getTreeByPid } from '@/api/classifyManage';
-  import { basicAreaPageAPI } from '@/api/factoryModel';
+  import LeftSidebar from '@/views/energyConsumptionStatistics/components/LeftSidebar.vue';
   import {
     statByDay,
     statByMonth,
@@ -197,7 +173,9 @@
 
   export default {
     mixins: [dictMixins, tableColumnsMixin],
-    components: {},
+    components: {
+      LeftSidebar
+    },
     props: {
       pageName: ''
     },
@@ -206,16 +184,10 @@
         activeTab: 'org',
         // 更新时间
         updateTime: dayjs().format('YYYY-M-D HH:mm:ss'),
-        // 树形数据
-        treeData: [],
-        orgTreeData: [],
-        treeProps: {
-          children: 'children',
-          label: 'name'
-        },
 
         areaId: '',
         categoryLevelId: '',
+        substanceId: '',
         // 表格列配置
         cacheKeyUrl: ` ems-collectionList-${this.pageName}-list`,
         energyConsumingUnitList,
@@ -234,26 +206,6 @@
     created() {
       // 设置默认日期
       this.initDefaultDate();
-      getTreeByPid('29').then((res) => {
-        this.orgTreeData = res.data;
-        if (this.orgTreeData.length) {
-          this.handleNodeClick(this.orgTreeData[0]);
-          this.$nextTick(() => {
-            this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
-          });
-        }
-      });
-      /* 获取区域集合 */
-      basicAreaPageAPI({
-        pageNum: 1,
-        size: 9999
-      }).then((res) => {
-        this.treeData = this.$util.toTreeData({
-          data: res,
-          idField: 'id',
-          parentIdField: 'parentId'
-        });
-      });
     },
     computed: {
       columns() {
@@ -422,21 +374,13 @@
       activeTabChange() {
         this.categoryLevelId = '';
         this.areaId = '';
-        if (this.activeTab == 'org') {
-          this.categoryLevelId = this.orgTreeData[0].id;
-          this.$nextTick(() => {
-            this.$refs.treeRef &&
-              this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
-          });
-        } else {
-          this.areaId = this.treeData[0] ? this.treeData[0].id : '';
-          this.$nextTick(() => {
-            this.$refs.treeRef1 &&
-              this.$refs.treeRef1.setCurrentKey(this.treeData[0].id);
-          });
-        }
+        this.substanceId = '';
         this.$refs.table.reload({ page: 1 });
       },
+      // 处理第一个节点（由 LeftSidebar 组件加载完成后触发）
+      handleFirstNode(data) {
+        this.handleNodeClick(data);
+      },
       // 搜索
       handleSearch() {
         // 校验日期不能为空
@@ -474,11 +418,16 @@
         this.$refs.table.reload({ page: 1 });
       },
       // 树节点点击
-      handleNodeClick(data) {
+      handleNodeClick(data, tab) {
         this.categoryLevelId = '';
+        this.substanceId = '';
         this.areaId = '';
-        if (this.activeTab == 'org') {
-          this.categoryLevelId = data.id;
+        if (tab === 'org') {
+          if (data.nodeType === 'instance') {
+            this.substanceId = data.id;
+          } else {
+            this.categoryLevelId = data.id;
+          }
         } else {
           this.areaId = data.id;
         }
@@ -504,7 +453,8 @@
           size: limit,
           ...this.where,
           areaId: this.areaId,
-          categoryLevelId: this.categoryLevelId
+          categoryLevelId: this.categoryLevelId,
+          substanceId: this.substanceId
         });
         if (this.pageName == 'fullYearCollection') {
           if (res.list.length) {
@@ -512,7 +462,7 @@
               let data = {
                 substanceName: item.substanceName,
                 energyClassificationName: item.energyClassificationName,
-                unit: item.unit,
+                unit: item.unit
               };
               for (let key in item.yearDataMap) {
                 data[key] = item.yearDataMap[key] || '';

src/views/centralizedMeterReading/list.vue

@@ -8,36 +8,13 @@
         :right-style="{ overflow: 'hidden' }"
       >
         <!-- 左侧树形菜单 -->
-        <div class="left-sidebar">
-          <el-tabs
-            v-model="activeTab"
-            type="border-card"
-            @tab-click="activeTabChange"
-          >
-            <el-tab-pane label="设备类型" name="org">
-              <el-tree
-                :data="orgTreeData"
-                :props="treeProps"
-                node-key="id"
-                highlight-current
-                @node-click="handleNodeClick"
-                style="height: calc(100vh - 180px)"
-                ref="treeRef"
-              ></el-tree>
-            </el-tab-pane>
-            <el-tab-pane label="用能分区" name="energy">
-              <el-tree
-                :data="treeData"
-                :props="treeProps"
-                node-key="id"
-                default-expand-all
-                ref="treeRef1"
-                highlight-current
-                @node-click="handleNodeClick"
-              ></el-tree>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
+        <left-sidebar
+          ref="leftSidebarRef"
+          :active-tab.sync="activeTab"
+          @tab-change="activeTabChange"
+          @node-click="handleNodeClick"
+          @first-node="handleFirstNode"
+        ></left-sidebar>
 
         <!-- 右侧内容区 -->
         <template v-slot:content>
@@ -108,6 +85,7 @@
                   >
                   <el-link
                     v-if="
+                      row.publishStatus != 1 &&
                       row.meterReadingMethod == 1 &&
                       approval == 1 &&
                       [0, 3].includes(row.approvalStatus)
@@ -170,8 +148,7 @@
 <script>
   import dictMixins from '@/mixins/dictMixins';
   import tableColumnsMixin from '@/mixins/tableColumnsMixin';
-  import { getTreeByPid } from '@/api/classifyManage';
-  import { basicAreaPageAPI } from '@/api/factoryModel';
+  import LeftSidebar from '@/views/energyConsumptionStatistics/components/LeftSidebar.vue';
   import { reviewStatus } from '@/enum/dict.js';
   import {
     getPage,
@@ -188,6 +165,7 @@
   export default {
     mixins: [dictMixins, tableColumnsMixin],
     components: {
+      LeftSidebar,
       MeterReadingDialog,
       processSubmitDialog
     },
@@ -202,15 +180,9 @@
         activeTab: 'org',
         // 更新时间
         updateTime: dayjs().format('YYYY-M-D HH:mm:ss'),
-        // 树形数据
-        treeData: [],
-        orgTreeData: [],
-        treeProps: {
-          children: 'children',
-          label: 'name'
-        },
         areaId: '',
         categoryLevelId: '',
+        substanceId: '',
         // 表格列配置
         columns: [
           {
@@ -376,26 +348,6 @@
         }
       });
       this.requestDict('表计类型');
-      getTreeByPid('29').then((res) => {
-        this.orgTreeData = res.data;
-        if (this.orgTreeData.length) {
-          this.handleNodeClick(this.orgTreeData[0]);
-          this.$nextTick(() => {
-            this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
-          });
-        }
-      });
-      /* 获取区域集合 */
-      basicAreaPageAPI({
-        pageNum: 1,
-        size: 9999
-      }).then((res) => {
-        this.treeData = this.$util.toTreeData({
-          data: res,
-          idField: 'id',
-          parentIdField: 'parentId'
-        });
-      });
     },
     computed: {
       seekList() {
@@ -441,21 +393,14 @@
       activeTabChange() {
         this.categoryLevelId = '';
         this.areaId = '';
-        if (this.activeTab == 'org') {
-          this.categoryLevelId = this.orgTreeData[0].id;
-          this.$nextTick(() => {
-            this.$refs.treeRef &&
-              this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
-          });
-        } else {
-          this.areaId = this.treeData[0] ? this.treeData[0].id : '';
-          this.$nextTick(() => {
-            this.$refs.treeRef1 &&
-              this.$refs.treeRef1.setCurrentKey(this.treeData[0].id);
-          });
-        }
+        this.substanceId = '';
         this.$refs.table.reload({ page: 1 });
       },
+
+      // 处理第一个节点（由 LeftSidebar 组件加载完成后触发）
+      handleFirstNode(data) {
+        this.handleNodeClick(data);
+      },
       // 搜索
       handleSearch(where) {
         this.$refs.table.reload({ page: 1, where });
@@ -465,11 +410,16 @@
         this.$refs.table.reload({ page: 1 });
       },
       // 树节点点击
-      handleNodeClick(data) {
+      handleNodeClick(data, tab) {
         this.categoryLevelId = '';
+        this.substanceId = '';
         this.areaId = '';
-        if (this.activeTab == 'org') {
-          this.categoryLevelId = data.id;
+        if (tab === 'org') {
+          if (data.nodeType === 'instance') {
+            this.substanceId = data.id;
+          } else {
+            this.categoryLevelId = data.id;
+          }
         } else {
           this.areaId = data.id;
         }
@@ -483,6 +433,7 @@
           ...where,
           areaId: this.areaId,
           categoryLevelId: this.categoryLevelId,
+          substanceId: this.substanceId,
           meterReadingMethod:
             this.pageName == 'manualcentralizedMeterReading'
               ? 1

src/views/energyConsumptionStatistics/components/LeftSidebar.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="left-sidebar">
+    <el-tabs v-model="localActiveTab" type="border-card" @tab-click="handleTabClick">
+      <!-- 设备类型 -->
+      <el-tab-pane label="设备类型" name="org">
+        <el-tree
+          :data="orgTreeData"
+          :props="treeProps"
+          node-key="id"
+          highlight-current
+          @node-click="handleNodeClick"
+          style="height: calc(100vh - 180px)"
+          default-expand-all
+          ref="treeRef"
+        >
+          <template #default="{ node, data }">
+            <span class="custom-tree-node">
+              <i
+                :class="[
+                  'el-icon',
+                  data.nodeType === 'category' ? 'el-icon-folder' : 'el-icon-s-platform'
+                ]"
+                :style="{
+                  color: data.nodeType === 'category' ? '#E6A23C' : '#409EFF',
+                  marginRight: '5px'
+                }"
+              ></i>
+              <span>{{ node.label }}</span>
+              <span v-if="data.nodeType!='category'">{{ node.codeNumber?' '+node.codeNumber:'' }}</span>
+            </span>
+          </template>
+        </el-tree>
+      </el-tab-pane>
+
+      <!-- 用能分区 -->
+      <el-tab-pane label="用能分区" name="energy">
+        <el-tree
+          :data="treeData"
+          :props="treeProps"
+          node-key="id"
+          default-expand-all
+          ref="treeRef1"
+          highlight-current
+          @node-click="handleNodeClick"
+          style="height: calc(100vh - 180px)"
+        ></el-tree>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+  import { getTreeAndExampleByPid } from '@/api/classifyManage';
+  import { basicAreaPageAPI } from '@/api/factoryModel';
+
+  export default {
+    name: 'LeftSidebar',
+    props: {
+      // 当前激活的标签页
+      activeTab: {
+        type: String,
+        default: 'org'
+      }
+    },
+    data() {
+      return {
+        treeProps: {
+          children: 'children',
+          label: 'name'
+        },
+        localActiveTab: this.activeTab,
+        // 设备类型树数据
+        orgTreeData: [],
+        // 用能分区树数据
+        treeData: []
+      };
+    },
+    watch: {
+      activeTab(val) {
+        this.localActiveTab = val;
+      },
+      localActiveTab(val) {
+        this.$emit('update:activeTab', val);
+      }
+    },
+    created() {
+      this.fetchData();
+    },
+    methods: {
+      // 获取数据
+      fetchData() {
+        // 获取设备类型数据
+        getTreeAndExampleByPid('29').then((res) => {
+          this.orgTreeData = res.data || [];
+          if (this.orgTreeData.length) {
+            this.$nextTick(() => {
+              this.$refs.treeRef && this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
+            });
+            // 通知父组件第一个节点数据
+            this.$emit('first-node', this.orgTreeData[0], 'org');
+          }
+        });
+
+        // 获取用能分区数据
+        basicAreaPageAPI({
+          pageNum: 1,
+          size: 9999
+        }).then((res) => {
+          this.treeData = this.$util.toTreeData({
+            data: res,
+            idField: 'id',
+            parentIdField: 'parentId'
+          });
+        });
+      },
+      handleTabClick() {
+        this.$emit('tab-change', this.localActiveTab);
+        // 切换标签页时默认选中第一个节点
+        this.$nextTick(() => {
+          if (this.localActiveTab === 'org' && this.orgTreeData.length) {
+            this.$refs.treeRef && this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
+            this.$emit('node-click', this.orgTreeData[0], 'org');
+          } else if (this.localActiveTab === 'energy' && this.treeData.length) {
+            this.$refs.treeRef1 && this.$refs.treeRef1.setCurrentKey(this.treeData[0].id);
+            this.$emit('node-click', this.treeData[0], 'energy');
+          }
+        });
+      },
+      handleNodeClick(data) {
+        this.$emit('node-click', data, this.localActiveTab);
+      },
+      // 对外暴露方法，用于设置当前选中节点
+      setCurrentKey(key, tab) {
+        if (tab === 'org') {
+          this.$refs.treeRef && this.$refs.treeRef.setCurrentKey(key);
+        } else {
+          this.$refs.treeRef1 && this.$refs.treeRef1.setCurrentKey(key);
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .left-sidebar {
+    height: 100%;
+
+    ::v-deep .el-tabs {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .el-tabs__content {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+
+    .custom-tree-node {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+    }
+  }
+</style>

src/views/energyConsumptionStatistics/index.vue

@@ -8,36 +8,13 @@
         :right-style="{ overflow: 'hidden' }"
       >
         <!-- 左侧树形菜单 -->
-        <div class="left-sidebar">
-          <el-tabs
-            v-model="activeTab"
-            type="border-card"
-            @tab-click="activeTabChange"
-          >
-            <el-tab-pane label="设备类型" name="org">
-              <el-tree
-                :data="orgTreeData"
-                :props="treeProps"
-                node-key="id"
-                highlight-current
-                @node-click="handleNodeClick"
-                style="height: calc(100vh - 180px)"
-                ref="treeRef"
-              ></el-tree>
-            </el-tab-pane>
-            <el-tab-pane label="用能分区" name="energy">
-              <el-tree
-                :data="treeData"
-                :props="treeProps"
-                node-key="id"
-                default-expand-all
-                ref="treeRef1"
-                highlight-current
-                @node-click="handleNodeClick"
-              ></el-tree>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
+        <left-sidebar
+          ref="leftSidebarRef"
+          :active-tab.sync="activeTab"
+          @tab-change="activeTabChange"
+          @node-click="handleNodeClick"
+          @first-node="handleFirstNode"
+        />
 
         <!-- 右侧内容区 -->
         <template v-slot:content>
@@ -95,13 +72,16 @@
 <script>
   import dictMixins from '@/mixins/dictMixins';
   import tableColumnsMixin from '@/mixins/tableColumnsMixin';
-  import { getTreeByPid } from '@/api/classifyManage';
-  import { basicAreaPageAPI } from '@/api/factoryModel';
+
   import { getPage } from '@/api/energyConsumptionStatistics/index.js';
   import { energyConsumingUnitList } from '@/enum/dict.js';
+  import LeftSidebar from './components/LeftSidebar.vue';
 
   export default {
     mixins: [dictMixins, tableColumnsMixin],
+    components: {
+      LeftSidebar
+    },
     data() {
       return {
         // 搜索表单
@@ -113,15 +93,9 @@
         },
         // 当前激活的标签页
         activeTab: 'org',
-        // 树形数据
-        treeData: [],
-        orgTreeData: [],
-        treeProps: {
-          children: 'children',
-          label: 'name'
-        },
         areaId: '',
         categoryLevelId: '',
+        substanceId: '',
         // 表格列配置
         columns: [
           {
@@ -300,49 +274,22 @@
       }
     },
     created() {
-      getTreeByPid('29').then((res) => {
-        this.orgTreeData = res.data;
-        if (this.orgTreeData.length) {
-          this.handleNodeClick(this.orgTreeData[0]);
-          this.$nextTick(() => {
-            this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
-          });
-        }
-      });
-      /* 获取区域集合 */
-
-      basicAreaPageAPI({
-        pageNum: 1,
-        size: 9999
-      }).then((res) => {
-        this.treeData = this.$util.toTreeData({
-          data: res,
-          idField: 'id',
-          parentIdField: 'parentId'
-        });
-      });
+      // 数据在 LeftSidebar 组件内部获取
     },
     methods: {
       activeTabChange() {
         this.categoryLevelId = '';
         this.areaId = '';
-        if (this.activeTab == 'org') {
-          this.categoryLevelId = this.orgTreeData[0].id;
-          // data = this.orgTreeData[0];
-          this.$nextTick(() => {
-            this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
-          });
-        } else {
-          // data = this.treeData[0] || {};
-          this.areaId = this.treeData[0].id;
-
-          this.$nextTick(() => {
-            this.$refs.treeRef1.setCurrentKey(this.treeData[0].id);
-          });
-        }
+        this.substanceId = '';
+        // Tab切换时重置条件，由用户手动选择节点或使用默认
         this.$refs.table.reload({ page: 1 });
       },
 
+      // 处理第一个节点（由 LeftSidebar 组件加载完成后触发）
+      handleFirstNode(data) {
+        this.handleNodeClick(data);
+      },
+
       // 搜索
       handleSearch(where) {
         this.searchForm = { ...where };
@@ -361,9 +308,14 @@
       // 树节点点击
       handleNodeClick(data) {
         this.categoryLevelId = '';
+        this.substanceId = '';
         this.areaId = '';
         if (this.activeTab == 'org') {
-          this.categoryLevelId = data.id;
+          if (data.nodeType == 'instance') {
+            this.substanceId = data.id;
+          } else {
+            this.categoryLevelId = data.id;
+          }
         } else {
           this.areaId = data.id;
         }
@@ -377,7 +329,8 @@
           ...where,
           ...this.searchForm,
           areaId: this.areaId,
-          categoryLevelId: this.categoryLevelId
+          categoryLevelId: this.categoryLevelId,
+          substanceId:this.substanceId
         });
       }
     }

src/views/energySavingTrend/index.vue

@@ -8,35 +8,13 @@
         :right-style="{ overflow: 'hidden' }"
       >
         <!-- 左侧树形菜单 -->
-        <div class="left-sidebar">
-          <el-tabs
-            v-model="activeTab"
-            type="border-card"
-            @tab-click="activeTabChange"
-          >
-            <el-tab-pane label="设备类型" name="org">
-              <el-tree
-                :data="orgTreeData"
-                :props="treeProps"
-                node-key="id"
-                highlight-current
-                @node-click="handleNodeClick"
-                ref="treeRef"
-              ></el-tree>
-            </el-tab-pane>
-            <el-tab-pane label="用能分区" name="energy">
-              <el-tree
-                :data="treeData"
-                :props="treeProps"
-                node-key="id"
-                default-expand-all
-                ref="treeRef1"
-                highlight-current
-                @node-click="handleNodeClick"
-              ></el-tree>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
+        <left-sidebar
+          ref="leftSidebarRef"
+          :active-tab.sync="activeTab"
+          @tab-change="activeTabChange"
+          @node-click="handleNodeClick"
+          @first-node="handleFirstNode"
+        ></left-sidebar>
 
         <!-- 右侧内容区 -->
         <template v-slot:content>
@@ -180,8 +158,7 @@
 <script>
   import dictMixins from '@/mixins/dictMixins';
   import tableColumnsMixin from '@/mixins/tableColumnsMixin';
-  import { getTreeByPid } from '@/api/classifyManage';
-  import { basicAreaPageAPI } from '@/api/factoryModel';
+  import LeftSidebar from '@/views/energyConsumptionStatistics/components/LeftSidebar.vue';
   import { listBYEnergyTrend } from '@/api/energyConsumptionStatistics/index.js';
   import { getPage } from '@/api/energyClassification/index.js';
 
@@ -198,6 +175,9 @@
   };
   export default {
     mixins: [dictMixins, tableColumnsMixin],
+    components: {
+      LeftSidebar
+    },
     data() {
       return {
         // 搜索表单
@@ -206,17 +186,11 @@
         },
         // 当前激活的标签页
         activeTab: 'org',
-        // 树形数据
-        treeData: [],
         dateType2: [],
         dateType3: [],
-        orgTreeData: [],
-        treeProps: {
-          children: 'children',
-          label: 'name'
-        },
         areaId: '',
         categoryLevelId: '',
+        substanceId: '',
         // 图表实例
         chart1: null,
         chart2: null,
@@ -253,28 +227,6 @@
       }
     },
     created() {
-      // 获取设备类型树
-      getTreeByPid('29').then((res) => {
-        this.orgTreeData = res.data;
-        if (this.orgTreeData.length) {
-          this.handleNodeClick(this.orgTreeData[0]);
-          this.$nextTick(() => {
-            this.$refs.treeRef &&
-              this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
-          });
-        }
-      });
-      // 获取用能分区树
-      basicAreaPageAPI({
-        pageNum: 1,
-        size: 9999
-      }).then((res) => {
-        this.treeData = this.$util.toTreeData({
-          data: res,
-          idField: 'id',
-          parentIdField: 'parentId'
-        });
-      });
       // 默认获取能源名称列表
       this.loadEnergyTypeList();
     },
@@ -452,25 +404,13 @@
       activeTabChange() {
         this.categoryLevelId = '';
         this.areaId = '';
-        if (this.activeTab == 'org') {
-          if (this.orgTreeData.length) {
-            this.categoryLevelId = this.orgTreeData[0].id;
-            this.$nextTick(() => {
-              this.$refs.treeRef &&
-                this.$refs.treeRef.setCurrentKey(this.orgTreeData[0].id);
-            });
-          }
-        } else {
-          if (this.treeData.length) {
-            this.areaId = this.treeData[0].id;
-            this.$nextTick(() => {
-              this.$refs.treeRef1 &&
-                this.$refs.treeRef1.setCurrentKey(this.treeData[0].id);
-            });
-          }
-        }
+        this.substanceId = '';
         this.loadChartData();
       },
+      // 处理第一个节点（由 LeftSidebar 组件加载完成后触发）
+      handleFirstNode(data) {
+        this.handleNodeClick(data);
+      },
       // 搜索
       handleSearch() {
         this.loadChartData();
@@ -496,7 +436,8 @@
         const params = {
           ...this.searchForm,
           areaId: this.areaId,
-          categoryLevelId: this.categoryLevelId
+          categoryLevelId: this.categoryLevelId,
+          substanceId: this.substanceId
         };
 
         listBYEnergyTrend(params)
@@ -547,17 +488,24 @@
           ]
         });
       },
-      // 树节点点击
+
+            // 树节点点击
       handleNodeClick(data) {
-        if (this.activeTab === 'org') {
-          this.categoryLevelId = data.id;
-          this.areaId = '';
+        this.categoryLevelId = '';
+        this.substanceId = '';
+        this.areaId = '';
+        if (this.activeTab == 'org') {
+          if (data.nodeType == 'instance') {
+            this.substanceId = data.id;
+          } else {
+            this.categoryLevelId = data.id;
+          }
         } else {
           this.areaId = data.id;
-          this.categoryLevelId = '';
         }
         this.loadChartData();
-      }
+      },
+
     }
   };
 </script>