Energy-flow-chart NPM

简介

能源流向图。

平台兼容性

兼容主流浏览器。

快速开始

npm i energy-flow-chart -S

快速应用

全局注入

import EnergyFlowChart from 'energy-flow-chart';
import 'energy-flow-chart/lib/energy-flow-chart.css';
Vue.use(EnergyFlowChart);

局部注入

import EnergyFlowChart from 'energy-flow-chart/packages/energy-flow-chart';
export default {
  name: 'App',
  components: {
    EnergyFlowChart
  }
}

主参数

参数	类型	必填项	默认值	说明
data	Array	√		能源流向图数据，树形结构。
bg-color	String	×	#07364B	背景颜色。
line-color	Array	×		流向箭头不同层级不同颜色，n层数据需传n个颜色数据集，缺省将使用默认颜色。例如：'#014EB5', '#A800FF'。
develop	Boolean	×	false	是否展开，默认false。

tree数据解析：

参数	类型	解释
id	String	节点ID。
label	String	节点名称。
level	Number	节点层级。
open	Boolean	是否展开。
dataVal1	String	数据1，单位与数据一体，暂支持最多两个数据（固定参数，接受的参数为：空字符串、null、undefined、键值对缺省）。
dataVal2	String	数据2，单位与数据一体，暂支持最多两个数据（固定参数，接受的参数为：空字符串、null、undefined、键值对缺省）。
icoUrl	String	图标图片，如果不存在则使用默认图片(surfaceType配置的默认类型图片)。
surfaceType	String	能源表类型，接口返回。1.电表；2.水表；3.气表；4.热表；。
children	Array	子节点集合。

方法

参数	类型	解释
energyClick	回调函数	Function(node) 返回节点数据对象

示例

<template>
  <div id="app">
    <EnergyFlowChart
      v-if="energyFlowData.length > 0"
      :data="energyFlowData"
      :develop="true"
      @energyClick="energyClick">
    </EnergyFlowChart>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      energyFlowData: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      const energyFlowData = [
        {
          label: '514进线',
          id: 1,
          level: 1,
          dataVal1: '4.00KW',
          dataVal2: '60.00kWh',
          children: [
            {
              label: '1#厂用变',
              id: 3,
              level: 2,
              dataVal1: '4.00KW',
              dataVal2: '60.00kWh',
              children: []
            },
            {
              label: '1#站用变',
              id: 3,
              level: 2,
              dataVal1: '4.00KW',
              dataVal2: '60.00kWh',
              children: []
            },
            {
              label: '绿化泵站电源',
              id: 3,
              level: 2,
              dataVal1: '4.00KW',
              dataVal2: '60.00kWh',
              children: [
                {
                  label: '站用变压器',
                  id: 3,
                  level: 3,
                  dataVal1: '4.00KW',
                  dataVal2: '60.00kWh',
                  children: []
                },
                {
                  label: '1#机组整流变压器',
                  id: 3,
                  level: 3,
                  dataVal1: '4.00KW',
                  dataVal2: '60.00kWh',
                  children: [
                    {
                      label: '站用变压器',
                      id: 3,
                      level: 4,
                      dataVal1: '4.00KW',
                      dataVal2: '60.00kWh',
                      children: [
                        {
                          label: '站用变压器',
                          id: 3,
                          level: 5,
                          dataVal1: '4.00KW',
                          dataVal2: '60.00kWh',
                          children: []
                        },
                        {
                          label: '1#机组整流变压器',
                          id: 3,
                          level: 5,
                          dataVal1: '4.00KW',
                          dataVal2: '60.00kWh',
                          children: []
                        }
                      ]
                    },
                    {
                      label: '1#机组整流变压器',
                      id: 3,
                      level: 4,
                      dataVal1: '4.00KW',
                      dataVal2: '60.00kWh',
                      children: []
                    }
                  ]
                },
                {
                  label: '2#机组整流变压器',
                  id: 3,
                  level: 3,
                  dataVal1: '4.00KW',
                  dataVal2: '60.00kWh',
                  children: []
                }
              ]
            }
          ]
        },
        {
          label: '570进线',
          id: 2,
          level: 1,
          dataVal1: '4.00KW',
          dataVal2: '60.00kWh',
          children: [
            {
              label: '1#机组整流变压器',
              id: 3,
              level: 2,
              children: []
            }
          ]
        }
      ];
      this.changeEnergyFlowData(energyFlowData, 1);
      this.energyFlowData = energyFlowData;
      this.win_h = document.documentElement.clientHeight - 170; // 一屏的情况下，通过公共方法获取子组件的最大高度
    },
    // 重构数据
    changeEnergyFlowData(data, index) {
      data.forEach((item) => {
        item.id = index;
        index++;
        item.open = false;
        // item.icoUrl = 'https://www.lsjlt.com/file/imgs/upload/202210/19/k2ewrd3hd0g.png';
        item.surfaceType = Math.ceil(Math.random()*4);
        if (item.children.length > 0) {
          index = this.changeEnergyFlowData(item.children, index);
        }
      });
      return index;
    },
    // 回调，点击节点的回调，node为节点对象
    energyClick(node) {
      console.log(node)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow: auto;
}
</style>