energy-flow-chart，能源流线图。
npm i energy-flow-chart -S
import EnergyFlowChart from 'energy-flow-chart'
app.use(EnergyFlowChart);
import { EnergyFlowChart } from 'energy-flow-chart';
export default {
name: 'App',
components: {
EnergyFlowChart
}
}
| 参数 | 类型 | 必填项 | 默认值 | 参考值 | 说明 |
|---|---|---|---|---|---|
| v-model | Boolean | √ | false | 是否默认展开。 | |
| data | Array | √ | 能源流向图数据，树形结构。 | ||
| opts | Object | × | { label: 'label', id: 'id', children: 'children', iconUrl: 'iconUrl', dataVal1: 'dataVal1', dataVal2: 'dataVal2' } | 参数。 | |
| iconUrlTypes | Array | × | ['1', '2', '3', '4', '5', '0'] | 字典值对应关系： 1电 2水 3油 4煤 5气 0其他。用于展示不同的设备图片。暂时只提供以上6种设备图片。 | |
| bgColor | String | × | #07364B | 背景颜色。 | |
| lineColor | Array | × | [ '#FFCC44' ] | 流向箭头不同层级不同颜色，索引0为1级颜色以此类推，未设置则使用默认颜色。例如：['#014EB5', '#A800FF']。 |
参数 | 类型 | 必填项 | 默认值 | 说明 ---- | ----- | ------ | ------ | ------ | :------ label | String | × | label | 设备名称。 id | String | × | id | 设备唯一标识。 children | String | × | children | 下级数据。 imgUrl | String | × | imgUrl | 图片。 iconUrl | String | × | iconUrl | 内置图片，imgUrl不存在时匹配iconUrlTypes使用。 dataVal1 | String | × | dataVal1 | 数据1。 dataVal2 | String | × | dataVal2 | 数据2。
| 参数 | 类型 | 解释 |
|---|---|---|
| @energyClick | 点击回调 | (obj) => {}。 |
<EnergyFlowChart
v-if="energyFlowData.length > 0"
v-model="develop"
:data="energyFlowData"
:opts="{
id: 'deviceId',
iconUrl: 'energyType',
dataVal1: 'eval',
dataVal2: 'power',
}"
:lineColor="['red']"
@energyClick="energyClick">
</EnergyFlowChart>export default {
name: 'App',
data() {
return {
develop: true,
energyFlowData: [],
};
},
mounted() {
this.setRemUnit()
const energyFlowData = [{
"energyType": "2",
"eval": "0.00kWh",
"imgUrl": "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0409%2F2fc95034j00sbnoh00013d000j600j6c.jpg&thumbnail=660x2147483647&quality=80&type=jpg",
"children": [{
"energyType": "2",
"eval": "0.00kWh",
"label": "5#机组电源柜（二级）",
"power": "555.00KW",
"deviceId": 52
}, {
"energyType": "2",
"eval": "0.00kWh",
"children": [{
"energyType": "2",
"eval": "0.00kWh",
"children": [{
"energyType": "2",
"eval": "0.00kWh",
"label": "1#鼓风机电机（三级）",
"power": "/KW",
"deviceId": 55
}, {
"energyType": "2",
"eval": "0.00kWh",
"label": "2#鼓风机电机（三级）",
"power": "/KW",
"deviceId": 56
}],
"label": "翻版滤池电源（三级）",
"power": "/KW",
"deviceId": 54
}],
"label": "2#厂用变（二级）",
"power": "0.00KW",
"deviceId": 53
}],
"label": "570进线（一级）",
"power": "900.00KW",
"deviceId": 47
}];
this.energyFlowData = energyFlowData;
},
methods: {
toggleExpandAll() {
this.develop = !this.develop;
},
// 回调，点击节点的回调，node为节点对象
energyClick(node) {
console.log(node)
},
}
}