1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| <template>
| <div class="jtopo-wrap" id="topo"></div>
| </template>
|
| <script>
| import {Stage, Layer, Node, Link, jtopo,TreeLayout} from '../../../../static/js/jtopo-1.4.4_trial-esm-min.js';
| export default {
| name: "index",
| data() {
| return {
| stage:null,
| layer:null,
| nodes:[]
| }
| },
| mounted() {
| this.initToPo()
| },
| methods: {
| initToPo: function () {
| this.stage = new jtopo.Stage('topo')
| console.log(this.stage, '我是舞台====')
| this.layer = new jtopo.Layer('default')
| this.stage.addChild(this.layer)
|
| let nodeImg = require('../../../assets/img/luyouqi.png')
| let sectorImg = require('../../../assets/img/markerIcon2.png')
| let cellImg = require('../../../assets/img/markerIcon3.png')
|
| // 创建节点,线条
| var nodeB = this.createNode("基站", "0,0,0", [], 40, 40, nodeImg);
| var sector01 = this.createNode("扇区01", "0,0,0", [], 40, 40, sectorImg);
| var link = this.createFoldLink(nodeB, sector01, "", true, "horizontal", "0,0,0");
|
| var sector02 = this.createNode("扇区02", "0,0,0", [], 40, 40, sectorImg);
| var link2 = this.createFoldLink(nodeB, sector02, "", true, "horizontal", '0,0,0');
|
| var sector03 = this.createNode("扇区03", "0,0,0", [], 40, 40, sectorImg);
| var link3 = this.createFoldLink(nodeB, sector03, "", true, "horizontal", '0,0,0');
|
| var cell01 = this.createNode("小区01", "0,0,0", [], 40, 40, cellImg);
| var link4 = this.createFoldLink(sector01, cell01, "", true, "horizontal", '0,0,0');
| var cell02 = this.createNode("小区02", "0,0,0", [], 40, 40, cellImg);
| var link5 = this.createFoldLink(sector02, cell02, "", true, "horizontal", '0,0,0');
| var cell03 = this.createNode("小区03", "0,0,0", [], 40, 40, cellImg);
| var link6 = this.createFoldLink(sector03, cell03, "", true, "horizontal", '0,0,0');
|
| console.log(this.nodes, 'nodes============nodes========')
| //树形布局
| let treeLayout = new jtopo.TreeLayout('down', 200, 180);
| treeLayout.doLayout(this.nodes);
|
|
| // 按画布居中
| this.stage.translateToCenter();
|
| this.stage.show();
|
| },
| //创建节点
| // textValue 节点文本内容
| // fontColor 字体颜色
| // nodePosition 节点坐标位置 [x,y] 树形布局下坐标位置无用
| // width 节点宽度
| // height 节点高度
| // imageSrc 设置的图片路径
| createNode(textValue, fontColor, nodePos, width, height, imageSrc) {
| var newNode = new jtopo.Node(textValue,nodePos[0], nodePos[1],width, height);
| newNode.fontColor = '255,255,255';
| if (imageSrc != null || imageSrc != undefined) {
| newNode.setImage(imageSrc);
| } else {
| newNode.fillColor = "0,0,0";
| }
| newNode.textOffsetY = 3;//文本向下偏移些
| newNode.draggable = false;//是否支持拖拽
| newNode.showSelected = false;//节点点击是否显示选中状态
| this.layer.addChild(newNode);
| this.nodes.push(newNode)
| return newNode;
| },
| // 创建折线
| // nodeStart nodeEnd 节点
| // textValue 折线上文本
| // isArrow 是否有箭头
| // direction 方向，有垂直、水平两种 取值为：'horizontal' 或者 'vertical' ，默认为 'horizontal'
| // strokeColor 线条颜色
| // dashedPattern 虚线 不传代表实线, 传数字-越大虚线间隔越大
| createFoldLink(nodeStart, nodeEnd, textValue, isArrow, direction,strokeColor,dashedPattern) {
| var link = new jtopo.FoldLink(textValue,nodeStart, nodeEnd);
| link.direction = direction || "horizontal";
| link.fontColor = "255,255,255";
| link.lineWidth = 2; // 线宽
| link.textOffsetY = 23; // 文本偏移量（向下23个像素）
| link.strokeColor = strokeColor;
| link.dashedPattern = dashedPattern; // 虚线
| this.layer.addChild(link);
| this.nodes.push(link)
| return link;
| },
| }
| }
| </script>
|
| <style lang="scss" scoped>
| .jtopo-wrap{
| width: 100%;
| height: 100%;
| background: #0e0e25;
| }
| </style>
|
|
