zhny_ui/ems-ui-cloud/src/views/mgr/poweruse.vue

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="总览" name="summery">
        <div class="First">
          <div class="time-range-buttons">
            <el-button :class="{ 'is-active': selectedTimeRange === 'day' }"
                       @click="changeTimeRange('day')">今日</el-button>
            <el-button :class="{ 'is-active': selectedTimeRange === 'month' }"
                       @click="changeTimeRange('month')">本月</el-button>
            <el-button :class="{ 'is-active': selectedTimeRange === 'year' }"
                       @click="changeTimeRange('year')">本年</el-button>
          </div>
          <div class="first-content">
            <div>
              <SubTitle title="能耗统计" />
              <!-- 图表容器 -->
              <div ref="sumBySubCategoryChart" style="height: 380px;" />
            </div>
            <div>
              <SubTitle title="能耗总览" />
              <el-table border stripe show-summary :data="tableData" style="width: 100%;margin-top: 20px;">
                <el-table-column prop="name" align="center" label="设施名称">
                </el-table-column>
                <el-table-column prop="value" align="center" label="能耗(kW·h)">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>

      </el-tab-pane>
      <el-tab-pane v-for="item in facsCategoryOptions" :key="item.code" :label="item.name" :name="item.code">
        <el-col :span="4" :xs="24">
          <div class="head-container">
            <el-input
              v-model="areaName"
              placeholder="请输入区域名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container tree-container">
            <el-tree
              :data="areaOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <el-tooltip
                  class="tree-node-tooltip"
                  effect="dark"
                  :content="data.label"
                  placement="right"
                  :disabled="!isTextOverflow(data.label)"
                >
                  <div class="tree-node">
                    <i class="el-icon-office-building node-icon"></i>
                    <span class="node-label">{{ data.label }}</span>
                  </div>
                </el-tooltip>
              </template>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="20" :xs="24">
          <div class="container-block">
            <div class="ctl-container">
              <SubTitle :title="`设施汇总电耗【${selectedLabel}】`" />
              <div>
                <el-select v-model="objCode" placeholder="选择设施" clearable @visible-change="handleObjSelectClick"
                           @change="getList">
                  <el-option v-for="item in objOptions" :label="item.objName" :value="item.objCode"
                             :key="item.objCode" />

                </el-select>
                <el-date-picker v-model="dateRange" type="datetimerange" @change="getList"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" align="right">
                </el-date-picker>
              </div>
            </div>
            <!-- 表格  -->
            <el-table v-loading="loading" :data="sumByFacsList" style="width: 100%; margin-top: 10px">
              <el-table-column label="设施编码" align="center" prop="objCode">
                <template slot-scope="scope">
                  <span>{{ scope.row.objCode }}</span>
                </template>
              </el-table-column>
              <el-table-column label="设施名称" align="center" prop="objName">
                <template slot-scope="scope">
                  <span>{{ scope.row.objName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="用电量(kW·h)" align="center" prop="elecQuantity">
                <template slot-scope="scope">
                  <span>{{ scope.row.quantity }}</span>
                </template>
              </el-table-column>
            </el-table>
            <SubTitle title="设施时段电耗" style="margin-top: 20px;" />
            <!--柱状图-->
            <div class="container-block" style="margin-top: 20px;">
              <BaseChart width="100%" height="300px" :option="barChartOptions" />
            </div>
          </div>
        </el-col>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {listByFacs,listFacsMeter} from '@/api/device/elecMeterH'
import { getPowerData, getPowerMaxLoad} from '@/api/mgr/elecUseH'
import {getFacsCategorygetByCode} from '@/api/basecfg/emsfacs'
import {areaTreeByFacsCategory} from '@/api/basecfg/area'
import dayjs from 'dayjs'
import {DateTool} from '@/utils/DateTool'
import {dateFormat} from '@/utils';
import BaseChart from '@/components/BaseChart/index.vue'
import SubTitle from '@/components/SubTitle'
import Block from '@/components/Block/block.vue'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'PowerUse',
  components: {
    Treeselect,
    BaseChart,
    Block,
    SubTitle
  },
  data () {
    const today = dateFormat(new Date(), 'yyyy-MM-dd')
    return {
      activeName: 'summery',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用能计量-小时表格数据
      hList: [],
      //查能耗
      sumByFacsList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      facsCategory: undefined,
      facsSubCategory: undefined,

      // 区域名称
      areaName: undefined,
      selectedLabel: '全部',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      areaOptions: [],
      facsCategoryOptions: [],
      sumBySubCategoryChartOption: {},
      // 存储图表配置的变量
      selectedTimeRange: 'day',
      chartInstance: null,
      // 用于存储 ECharts 实例
      totalElecQuantity: 0,
      objOptions: [],
      objCode: undefined,
      dateRange: [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        areaCode: '-1',
        objType: 2,
        objCode: null,
        facsCategory: 'Z',
        facsSubCategory: null,
        date: null,
        time: null,
        timeIndex: null,
      },
      queryObjParams: {
        refArea: null,
        facsCategory: null,
        subCategory: null
      },
      // 表单参数
      form: {},
      tableData: [],
      powerDate: [`${today} 00:00:00`, `${today} 23:59:59`],
      powerChartData: [],
      powerMaxLoad: '',
      equipPowerChartData: [],
      equipPowerMaxLoad: ''
    }
  },
  watch: {
    // 根据名称筛选区域树
    areaName (val) {
      this.$refs.tree.filter(val)
    }
  },
  created () {
    this.facsCategory = 'Z'
    this.facsSubCategory = ''
    this.getFacsCategory(this.facsCategory)
    this.getAreaTree(this.facsCategory, this.facsSubCategory)
    this.getList()
    this.getsumByFacsH()
    this.getSumBySubCategoryH();
    this.getPowerChart()
  },
  computed: {
    barChartOptions () {
      const xAxisData = this.hList.map(item => item.time);
      const seriesData = this.hList.map(item => item.elecQuantity);
      return {
        toolbox: {
          itemGap: 10,
          itemSize: 16,
          right: 10,
          top: 0,
          show: true,
          feature: {
            magicType: {
              show: true,
              type: ['bar', 'line']
            },
            saveAsImage: {
              show: true
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal =
                relVal +
                '<br/>' +
                params[i].marker +
                params[i].seriesName +
                '&nbsp;&nbsp;&nbsp;' +
                params[i].value +
                'kW·h'
            }
            return relVal
          }
        },
        legend: {
          data: ['用电量']
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          name: 'kW·h（千瓦时）',
          type: 'value',
        },
        series: [{
          name: '用电量',
          type: 'bar',
          data: seriesData,
          barWidth: 20,
          itemStyle: {
            normal: {
              color: '#6395FA'
            }
          }
        }]
      };
    },
    powerLineOptions () {
      const xAxisData = this.powerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
      const yData1 = this.powerChartData.map(item => parseFloat(item.s).toFixed(2));
      const yData2 = this.powerChartData.map(item => item.p);
      const yData3 = this.powerChartData.map(item => item.q);
      return {
        toolbox: {
          itemGap: 10,
          itemSize: 16,
          right: 10,
          top: 0,
          show: true,
          feature: {
            magicType: {
              show: true,
              type: ['bar', 'line']
            },
            saveAsImage: {
              show: true
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal =
                relVal +
                '<br/>' +
                params[i].marker +
                params[i].seriesName +
                '&nbsp;&nbsp;&nbsp;' +
                params[i].value +
                'kW'
            }
            return relVal
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          name: 'kW（千瓦）',
          type: 'value',
        },
        legend: {},
        dataZoom: [
          {
            type: "slider",
            start: 0,
            end: 100,
            height: 10,
            bottom: '10%',
            showDetail: false,
            showDataShadow: false,
            borderColor: "transparent"
          },
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        series: [{
          name: '视在功率',
          type: 'line',
          data: yData1,
          markLine: {
            symbol: 'none',
            silent: true,
            lineStyle: {normal: {type: 'dashed'}},
            label: {position: 'end'},
            data: [
              {
                yAxis: this.powerMaxLoad,
                lineStyle: {width: 1.656, color: '#ff6367'},
                label: {
                  show: true,
                  textStyle: {
                    color: '#ff6367'
                  }
                }
              },
            ]
          },
          markPoint: {
            silent: true,
            data: [
              {
                yAxis: this.powerMaxLoad,
                x: '100%',
                symbolSize: 0.1,
                symbolOffset: [0, 0],
                label: {
                  textStyle: {color: '#ff6367'},
                  fontSize: 12,
                  position: 'left',
                  formatter: '最高负荷'
                }
              },
            ]
          },
        },
          {
            name: '有功功率',
            type: 'line',
            data: yData2,
          },
          {
            name: '无功功率',
            type: 'line',
            data: yData3,
          },
        ]
      };
    },
    equipPowerLineOptions () {
      const xAxisData = this.equipPowerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
      const yData1 = this.equipPowerChartData.map(item => parseFloat(item.s).toFixed(2));
      const yData2 = this.equipPowerChartData.map(item => item.p);
      const yData3 = this.equipPowerChartData.map(item => item.q);
      return {
        toolbox: {
          itemGap: 10,
          itemSize: 16,
          right: 10,
          top: 0,
          show: true,
          feature: {
            magicType: {
              show: true,
              type: ['bar', 'line']
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal =
                relVal +
                '<br/>' +
                params[i].marker +
                params[i].seriesName +
                '&nbsp;&nbsp;&nbsp;' +
                params[i].value +
                'kW'
            }
            return relVal
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          name: 'kW（千瓦）',
          type: 'value',
        },
        dataZoom: [
          {
            type: "slider",
            start: 0,
            end: 100,
            height: 10,
            bottom: '10%',
            showDetail: false,
            showDataShadow: false,
            borderColor: "transparent"
          },
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        series: [{
          name: '视在功率',
          type: 'line',
          data: yData1,
          markLine: {
            symbol: 'none',
            silent: true,
            lineStyle: {normal: {type: 'dashed'}},
            label: {position: 'end'},
            data: [
              {
                yAxis: this.equipPowerMaxLoad,
                lineStyle: {width: 1.656, color: '#ff6367'},
                label: {
                  show: true,
                  textStyle: {
                    color: '#ff6367'
                  }
                }
              },
            ]
          },
          markPoint: {
            silent: true,
            data: [
              {
                yAxis: this.equipPowerMaxLoad,
                x: '100%',
                symbolSize: 0.1,
                symbolOffset: [0, 0],
                label: {
                  textStyle: {color: '#ff6367'},
                  fontSize: 12,
                  position: 'left',
                  formatter: '最高负荷'
                }
              },
            ]
          },
        },
          {
            name: '有功功率',
            type: 'line',
            data: yData2,
          },
          {
            name: '无功功率',
            type: 'line',
            data: yData3,
          },
        ]
      };
    }
  },
  methods: {
    // 新增方法：判断文本是否溢出
    isTextOverflow(text) {
      // 简单判断：超过一定字符数就显示tooltip
      // 可以根据实际情况调整这个数值
      return text && text.length > 8
    },
    /**平均功率-15分钟*/
    getPowerChart () {
      this.powerMaxLoad = ''
      this.powerChartData = []
      const [startRecTime, endRecTime] = this.powerDate
      const params = {
        startRecTime,
        endRecTime,
        areaCode: '-1',
        objType: '2',
      }
      getPowerData({
        ...params,
        pageNum: 1,
        pageSize: 999
      }).then(({code, rows}) => {
        if (code === 200) {
          this.powerChartData = rows
        }
      })
      getPowerMaxLoad(params).then(({code, data}) => {
        if (code === 200 && data) {
          this.powerMaxLoad = parseFloat(data.s).toFixed(2)
        }
      })
    },
    getEquipPowerChart () {
      this.equipPowerMaxLoad = ''
      this.equipPowerChartData = []
      const [startRecTime, endRecTime] = this.dateRange
      const params = {
        startRecTime,
        endRecTime,
        areaCode: '-1',
        objType: '2',
        facsCategory: 'Z',
        facsSubCategory: this.activeName,
        objCode: this.objCode
      }
      getPowerData({
        ...params,
        pageNum: 1,
        pageSize: 999
      }).then(({code, rows}) => {
        if (code === 200) {
          this.equipPowerChartData = rows
        }
      })
      getPowerMaxLoad(params).then(({code, data}) => {
        if (code === 200) {
          this.equipPowerMaxLoad = parseFloat(data).toFixed(2)
        }
      })
    },
    /** 查询用能计量-小时列表 */
    getList () {
      this.loading = true
      this.queryParams.objCode = this.objCode
      const params = {
        startRecTime: dayjs(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
        endRecTime: dayjs(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
        meterCls:45,
        areaCode: this.queryParams.areaCode,
        facsCategory:this.queryParams.facsCategory,
        facsSubCategory: this.activeName,
      };
      listFacsMeter(params).then(response => {
        this.hList = response.rows
        this.total = response.total
        this.loading = false
      })
      this.getsumByFacsH()
      this.getEquipPowerChart()
    },
    /**根据设施查询能耗统计 */
    getsumByFacsH () {
      const params = {
        startRecTime: dayjs(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
        endRecTime: dayjs(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
        meterCls:45,
        areaCode: this.queryParams.areaCode,
        facsCategory:this.queryParams.facsCategory,
        facsSubCategory: this.activeName,
      };
      listByFacs(params).then(response => {
        this.sumByFacsList = response.data.map(item => ({
          objCode: item.objCode,
          objName: item.objName,
          quantity: item.quantity || 0,
        }));
        console.log(" this.sumByFacsList ", this.sumByFacsList )
      })
    },

    /**时间范围切换按钮点击事件处理器*/
    changeTimeRange (rangeType) {
      this.selectedTimeRange = rangeType;
      let start = dayjs();
      let end = dayjs();

      if (rangeType === 'day') {
        // 日：当前日期的 00:00:00 到 23:59:59
        start = start.startOf('day');
        end = end.endOf('day');
      } else if (rangeType === 'month') {
        // 月：当前月份的第一天 00:00:00 到 最后一天 23:59:59
        start = start.date(1).hour(0).minute(0).second(0);
        end = end.endOf('month').hour(23).minute(59).second(59);
      } else if (rangeType === 'year') {
        // 年：当前年份的第一天 00:00:00 到 最后一天 23:59:59
        start = start.startOf('year');
        end = end.endOf('year').hour(23).minute(59).second(59);
      }
      this.dateRange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
      this.getSumBySubCategoryH(); // 重新获取数据
    },

    /**总览饼图*/
    getSumBySubCategoryH () {
      const params = {
        startRecTime: dayjs(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
        endRecTime: dayjs(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
        areaCode: this.queryParams.areaCode,
        meterCls:45,
        facsCategory:this.queryParams.facsCategory,
      };
      listByFacs(params).then(response => {
        console.log("pie图", response.data)
        this.tableData = response.data.map(item => ({
          name: item.objName,
          value: item.quantity || 0
        }))
        console.log("能耗总览",this.tableData)
        this.processDataForChart(response.data); // 处理数据并生成图表配置
      })

    },
    processDataForChart(data) {
      console.log("data", data);
      this.totalElecQuantity = data.reduce((sum, item) => sum + (item.quantity || 0), 0);
      // 处理数据，生成图表配置
      const seriesData = data.map(item => ({
        name: item.objName,
        value: item.quantity || 0,
        percent: ((item.quantity || 0) / this.totalElecQuantity * 100).toFixed(2),
      }));

      console.log("seriesData", seriesData);

      // 设置图表配置
      this.sumBySubCategoryChartOption = {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            const { name, value, percent } = params;
            return `<div><h4>${name}</h4><p>${value}kW·h (${percent}%)</p></div>`;
          }
        },
        legend: {
          orient: 'vertical',
          top: '5%',
          left: '5%'
        },
        series: [
          {
            name: '能耗',
            type: 'pie',
            radius: ['35%', '55%'],
            data: seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}\n{d}%',
            },
            labelLine: {
              show: true,
              length: 30, // 标签线长度
              lineStyle: {
                width: 1,
                type: 'dashed', // 设置虚线样式
              }
            }
          }
        ]
      };

      // 渲染图表
      this.$nextTick(() => {
        const chart = echarts.init(this.$refs.sumBySubCategoryChart);
        chart.setOption(this.sumBySubCategoryChartOption);
      });
    },
    async getFacsCategory (code) {
      getFacsCategorygetByCode(code).then(response => {
        this.facsCategoryOptions = response.data.subtypeList
      })
    },
    async getAreaTree (category, subCategory) {
      await areaTreeByFacsCategory(category, subCategory, false).then(response => {
        this.areaOptions = [{
          id: '-1',
          label: '全部',
          children: []
        }].concat(response.data)
      })
    },
    async getFacsObj (areaCode, category, subCategory) {
      this.queryObjParams.refArea = areaCode
      this.queryObjParams.facsCategory = category
      this.queryObjParams.subCategory = subCategory

      // listAllFacs(this.queryObjParams).then(response => {
      //   this.objOptions = response.data
      // })
      const params = {
        startRecTime: dayjs(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
        endRecTime: dayjs(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
        meterCls:45,
        areaCode: this.queryParams.areaCode,
        facsCategory:this.queryParams.facsCategory,
        facsSubCategory: this.activeName,
      };
      listByFacs(params).then(response => {
        this.objOptions = response.data
        console.log(" this.objOptions ",this.objOptions )
      })
    },
    tabClick () {
      this.reset()
      if (this.activeName !== 'summery') {
        this.dateRange = [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)]
        this.queryParams.facsCategory = this.facsCategory
        this.queryParams.facsSubCategory = this.activeName
        this.queryParams.pageNum = 1
        this.selectedLabel = '全部'
        this.getList()
      } else {

      }
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
      this.getsumByFacsH()
    },
    handleObjSelectClick () {
      this.getFacsObj(this.queryParams.areaCode, this.facsCategory, this.activeName)
    },
    // 筛选节点
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick (data) {
      this.queryParams.areaCode = data.id
      this.selectedLabel = data.label
      this.objCode = null
      this.handleQuery()
    },
    reset () {
      this.objCode = null
      this.queryParams.areaCode = '-1'
      this.queryParams.facsCategory = 'Z'
      this.queryParams.facsSubCategory = null
      this.queryParams.objCode = null
      this.objOptions = []
    }
  }
}
</script>
<style lang="scss" scoped>
.time-range-buttons {
  .is-active {
    background-color: #409eff;
    color: white;
  }
}

.first-content {
  display: flex;
  margin-top: 20px;

  >div:first-child {
    flex: 3;
  }

  >div:last-child {
    flex: 2;
  }
}

.container-block {
  padding-left: 20px;
}

.ctl-container {
  display: flex;
  justify-content: space-between;
}

/* 树容器样式 - 统一美化设计 */
.tree-container {
  height: calc(100vh - 200px);
  overflow-y: auto;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 10px;
  background-color: #fafafa;
}

/* 树节点样式 */
.tree-node {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 2px 0;
  transition: all 0.3s;
  cursor: pointer;
}

.node-icon {
  margin-right: 8px;
  font-size: 16px;
  transition: all 0.3s;
  color: #409EFF;
}

.node-label {
  flex: 1;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 节点hover效果 */
.tree-node:hover {
  background-color: #f0f7ff;
  border-radius: 4px;
  padding-left: 4px;
}

.tree-node:hover .node-icon {
  color: #2b7bff;
  transform: scale(1.1);
}

/* 高亮当前选中的节点 */
.el-tree-node.is-current > .el-tree-node__content .tree-node {
  background-color: #e6f7ff;
  border-radius: 4px;
  padding-left: 4px;
}

.el-tree-node.is-current > .el-tree-node__content .node-icon {
  color: #1890ff;
}

/* 覆盖默认的el-tree样式，确保自定义样式生效 */
.el-tree-node__content {
  height: auto;
  padding: 0 !important;
}

.el-tree-node__content:hover {
  background-color: transparent;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: transparent;
}

/* 树节点展开图标调整 */
.el-tree-node__expand-icon {
  color: #909399;
  font-size: 14px;
}

.el-tree-node__expand-icon:hover {
  color: #409EFF;
}

/* 滚动条美化 */
.tree-container::-webkit-scrollbar {
  width: 6px;
}

.tree-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>