kd-aiot-frontend-ems/src/views/energyConsumptionStatistics/components/LeftSidebar.vue

<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>