ops-components

AppOpsComponent

介绍

运维组件

安装教程

1. npm i --save ops-components

使用说明

1. 全局注册

import Vue from "vue";
import OpsComponents from "ops-components";

Vue.use(OpsComponents);

2. 引入组件

<template>
    <div class="topo-wrapper" style="width: 1440px;height: 768px;">
        <topo-chart 
            ref="topo"
            id="topo-component"
            :layout="false"
            :data="data"
            @onNodeClick="handleNodeClick"
            @onEdgeClick="handleEdgeClick"
            @onNodeEnter="handleNodeEnter"
            @onNodeLeave="handleNodeLeave"
            @onEdgeEnter="handleEdgeEnter"
            @onEdgeLeave="handleEdgeLeave"
            @onNodeDragStart="handleNodeDragStart"
            @onNodeDrag="handleNodeDrag"
            @onNodeDragEnd="handleNodeDragEnd"
        />
    </div>
</template>
<script>
import OpsComponents from "ops-components";

const { TopoChart } = OpsComponents;

export default {
    components: {
        TopoChart
    }
}
</script>
<style>
#topo-component {
    width: 100%;
    height: 100%;
}
</style>

3. 组件属性

属性名	类型	是否必填	默认值	描述
id	string	true	无	容器id
layout	boolean	true	true	自动布局，默认为true，如果需要让组件根据node的position坐标布局，则要设为false
data	object	false	null	拓扑图数据，内部结构为{ nodes, edges }
onNodeClick	function	false	无	节点点击事件，返回{ event, data }
onEdgeClick	function	false	无	线点击事件，返回{ event, data }
onNodeEnter	function	false	无	节点划入事件，返回{ event, data }
onNodeLeave	function	false	无	节点划出事件，返回{ event, data }
onEdgeEnter	function	false	无	线划入事件，返回{ event, data }
onEdgeLeave	function	false	无	线划出事件，返回{ event, data }
onNodeDragStart	function	false	无	节点开始拖动事件，返回{ event, data }
onNodeDrag	function	false	无	节点拖动事件，返回{ event, data }
onNodeDragEnd	function	false	无	节点拖动结束时间，返回{ event, data }

4. 节点属性

节点配置

icon图片对应: https://gitee.com/jason_5149/AppOpsComponent/blob/master/packages/topo-chart/src/assets/img/{icon}.png

属性名	类型	是否必填	默认值	描述
id	string	true	无	节点id，不可重复
name	string	true	无	节点名称
desc	string	true	无	节点描述
label	string	true	无	提示框描述，需要换行是用换行符标记
icon	string	false	CUBE	icon名称，参考可选名称列表
style	object	false	参考style配置	参考style描述
labelStyle	object	false	参考labelStyle配置	参考labelStyle描述
iconStyle	object	false	参考iconStyle配置	参考iconStyle描述
position	object	false	参考position配置	参考lposition描述

style配置

属性名	类型	默认值	描述
color	string	#666666	节点字体颜色
bgColor	string	#ffffff	节点背景颜色
borderWidth	number	2	节点边框大小
borderColor	string	#9ed4fb	节点边框颜色

labelStyle配置

属性名	类型	默认值	描述
position	string	right	节点描述显示位置，可选值有top，right，bottom，left
offset	number	10	节点描述距离节点距离
color	string	#666666	节点描述字体颜色
fontSize	number	14	节点描述字体大小

iconStyle属性

属性名	类型	默认值	描述
width	number	20	图标宽度
height	number	20	图标高度

position属性

属性名	类型	默认值	描述
x	number	null	节点x轴坐标
y	number	null	节点y轴坐标

5. 线属性

线属性

属性名	类型	是否必填	默认值	描述
source	string	true	无	连接线的起点
target	string	true	无	连接线的终点
label	string	false	''	连接线的描述
style	object	false	参考style配置	参考style描述

style属性

属性名	类型	默认值	描述
color	string	#666666	连接线颜色
width	string	#ffffff	连接线宽度

6. 数据事例

{
  "nodes": [
    {
      "id": "1",
      "name": "AppSY",
      "desc": "100/2000 tps",
      "style": {
        "bgColor": "#FFFFFF",
        "borderWidth": 2,
        "borderColor": "red"
      },
      "label": "AppSY\n100/2000 tps",
      "labelStyle": {
        "position": "top",
        "offset": 10,
        "color": "green",
        "fontSize": 14
      },
      "icon": "",
      "iconStyle": {
        "width": 10,
        "height": 10
      },
      "position": {
        "x": 90,
        "y": 90
      }
    },
    {
      "id": "2",
      "name": "AppSelf",
      "desc": "200/2000 tps",
      "style": {
        "bgColor": "#FFFFFF",
        "borderWidth": 2,
        "borderColor": "yellow"
      },
      "label": "AppSelf\n200/2000 tps",
      "labelStyle": {
        "position": "right",
        "offset": 20,
        "color": "red",
        "fontSize": 12
      },
      "icon": "LOCAL2",
      "iconStyle": {
        "width": 20,
        "height": 20
      },
      "position": {
        "x": -138.39090909090905,
        "y": 342.0636363636363
      }
    },
    {
      "id": "3",
      "name": "PG",
      "desc": "200/300/2000 tps",
      "style": {
        "bgColor": "#FFFFFF",
        "borderWidth": 2,
        "borderColor": "green"
      },
      "label": "PG\n200/300/2000 tps",
      "labelStyle": {
        "position": "bottom",
        "offset": 10,
        "color": "#333333"
      },
      "icon": "USER",
      "iconStyle": {
        "width": 30,
        "height": 30
      },
      "position": {
        "x": 90,
        "y": 610
      }
    },
    {
      "id": "4",
      "name": "AppXY",
      "desc": "100/2000 tps",
      "style": {
        "bgColor": "#FFFFFF",
        "borderWidth": 2,
        "borderColor": "blue"
      },
      "label": "AppXY\n100/2000 tps",
      "labelStyle": {
        "position": "left",
        "offset": 10,
        "color": "#999999",
        "fontSize": 12
      },
      "icon": "POSTGRESQL",
      "iconStyle": {
        "width": 40,
        "height": 40
      },
      "position": {
        "x": 350,
        "y": 610
      }
    }
  ],
  "edges": [
    {
      "source": "1",
      "target": "2",
      "label": "0.5G/5G",
      "style": {
        "color": "blue",
        "width": 2
      }
    },
    {
      "source": "2",
      "target": "3",
      "label": "3G/5G",
      "style": {
        "color": "yellow",
        "width": 2
      }
    },
    {
      "source": "2",
      "target": "4",
      "label": "2G/5G",
      "style": {
        "color": "red",
        "width": 2
      }
    }
  ]
}

7. 调用方法

this.$ref[refName].save()
this.$ref[refName].update(data)
this.$ref[refName].clear()
this.$ref[refName].destroy()

方法名称	参数	返回值	描述
save	无	拓扑组件数据	返回拓扑图组件数据及位置
update	data	void	更新拓扑图数据
clear	无	无	清空拓扑图组件
destroy	无	无	销毁拓扑图组件