fix(体系搜索): 监听窗口改变重新渲染
This commit is contained in:
zyn
@@ -1,22 +1,24 @@
|
||||
<template>
|
||||
<div class="root">
|
||||
<div id="mountNode" ref="mountNode"></div>
|
||||
<DialogTable ref="DialogTableRef"></DialogTable>
|
||||
<loading :loading="loading">加载中...</loading>
|
||||
<div id="mountNode" ref="mountNode" />
|
||||
<DialogTable ref="DialogTableRef" />
|
||||
<loading :loading="loading">
|
||||
加载中...
|
||||
</loading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import G6 from '@antv/g6';
|
||||
|
||||
import DialogTable from "./components/DialogTable";
|
||||
import DialogTable from './components/DialogTable';
|
||||
|
||||
export default {
|
||||
name: "systemSearch",
|
||||
name: 'SystemSearch',
|
||||
components: {
|
||||
DialogTable
|
||||
},
|
||||
data(){
|
||||
data () {
|
||||
return {
|
||||
data: {},
|
||||
loading: false,
|
||||
@@ -47,88 +49,88 @@ export default {
|
||||
// }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
async getData () {
|
||||
this.loading = true
|
||||
this.$http._getData('lawss/sarMenuStandardLimit/standardSystemTree').then(res => {
|
||||
if (res.ok) {
|
||||
this.data = res.data[0]
|
||||
this.initGraph()
|
||||
}
|
||||
if (res.ok) {
|
||||
this.data = res.data[0]
|
||||
this.initGraph()
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
initGraph(){
|
||||
initGraph () {
|
||||
const that = this
|
||||
// 实例化 minimap 插件
|
||||
// 实例化 minimap 插件
|
||||
const minimap = new G6.Minimap({
|
||||
size: [100, 100],
|
||||
className: 'minimap',
|
||||
type: 'delegate',
|
||||
size: [ 100, 100 ],
|
||||
className: 'minimap',
|
||||
type: 'delegate',
|
||||
});
|
||||
|
||||
const tooltip = new G6.Tooltip({
|
||||
offsetX: 10,
|
||||
offsetY: 20,
|
||||
getContent(e) {
|
||||
getContent (e) {
|
||||
const cfg = e.item.getModel()
|
||||
const outDiv = document.createElement('div');
|
||||
// outDiv.style.maxWidth = '200px';
|
||||
outDiv.innerHTML = `
|
||||
<div>${cfg.menuName}( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )</div>`
|
||||
<div>${ cfg.menuName }( ${ cfg.gbStandCount }/${ cfg.fbStandCount }/${ cfg.esStandCount } )</div>`
|
||||
return outDiv
|
||||
},
|
||||
itemTypes: ['node']
|
||||
itemTypes: [ 'node' ]
|
||||
});
|
||||
|
||||
const mainColor = '#3170A7'
|
||||
|
||||
G6.registerNode('card-node', {
|
||||
draw: function drawShape(cfg, group) {
|
||||
const r = 2;
|
||||
const color = '#5B8FF9';
|
||||
const w = cfg.size[0];
|
||||
const h = cfg.size[1];
|
||||
const shape = group
|
||||
group.addShape('rect', {
|
||||
// 容器
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: w,
|
||||
height: h,
|
||||
stroke: mainColor,
|
||||
radius: r,
|
||||
fill: '#fff',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
name: 'box',
|
||||
// draggable: true,
|
||||
});
|
||||
draw: function drawShape (cfg, group) {
|
||||
const r = 2;
|
||||
const color = '#5B8FF9';
|
||||
const w = cfg.size[0];
|
||||
const h = cfg.size[1];
|
||||
const shape = group
|
||||
group.addShape('rect', {
|
||||
// 容器
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: w,
|
||||
height: h,
|
||||
stroke: mainColor,
|
||||
radius: r,
|
||||
fill: '#fff',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
name: 'box',
|
||||
// draggable: true,
|
||||
});
|
||||
|
||||
// 文字
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
textBaseline: 'top',
|
||||
x: w / 2,
|
||||
y: (h - 10) / 2,
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
text: cfg.menuName.length > 5
|
||||
? `${cfg.menuName.slice(0,5)}...( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )`
|
||||
: `${cfg.menuName}( ${cfg.gbStandCount}/${cfg.fbStandCount}/${cfg.esStandCount} )`,
|
||||
fill: '#000',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
name: 'text',
|
||||
});
|
||||
// 文字
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
textBaseline: 'top',
|
||||
x: w / 2,
|
||||
y: (h - 10) / 2,
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
text: cfg.menuName.length > 5
|
||||
? `${ cfg.menuName.slice(0, 5) }...( ${ cfg.gbStandCount }/${ cfg.fbStandCount }/${ cfg.esStandCount } )`
|
||||
: `${ cfg.menuName }( ${ cfg.gbStandCount }/${ cfg.fbStandCount }/${ cfg.esStandCount } )`,
|
||||
fill: '#000',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
name: 'text',
|
||||
});
|
||||
|
||||
cfg.children &&
|
||||
cfg.children &&
|
||||
group.addShape('marker', {
|
||||
attrs: {
|
||||
x: w / 2,
|
||||
@@ -142,59 +144,58 @@ export default {
|
||||
},
|
||||
name: 'collapse-icon',
|
||||
});
|
||||
if (cfg.level === 0) {
|
||||
const rect = group.find((ele) => ele.get('name') === 'box') // 获取图形
|
||||
rect.attr('fill', mainColor)
|
||||
rect.attr('stroke', mainColor) // 边框颜色
|
||||
if (cfg.level === 0) {
|
||||
const rect = group.find((ele) => ele.get('name') === 'box') // 获取图形
|
||||
rect.attr('fill', mainColor)
|
||||
rect.attr('stroke', mainColor) // 边框颜色
|
||||
|
||||
const text = group.find((ele) => ele.get('name') === 'text') // 获取图形
|
||||
text.attr('fill','#fff')
|
||||
} else if (cfg.level === 1) {
|
||||
const rect = group.find((ele) => ele.get('name') === 'box') // 获取图形
|
||||
rect.attr('fill', '#eee')
|
||||
rect.attr('stroke', '#eee')
|
||||
const text = group.find((ele) => ele.get('name') === 'text') // 获取图形
|
||||
text.attr('fill', '#fff')
|
||||
} else if (cfg.level === 1) {
|
||||
const rect = group.find((ele) => ele.get('name') === 'box') // 获取图形
|
||||
rect.attr('fill', '#eee')
|
||||
rect.attr('stroke', '#eee')
|
||||
|
||||
const text = group.find((ele) => ele.get('name') === 'text') // 获取图形
|
||||
text.attr('fill','#000')
|
||||
}
|
||||
return shape;
|
||||
},
|
||||
setState(name, value, item) {
|
||||
if (name === 'collapsed') {
|
||||
const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon');
|
||||
const icon = value ? G6.Marker.expand : G6.Marker.collapse;
|
||||
marker.attr('symbol', icon);
|
||||
}
|
||||
},
|
||||
});
|
||||
const text = group.find((ele) => ele.get('name') === 'text') // 获取图形
|
||||
text.attr('fill', '#000')
|
||||
}
|
||||
return shape;
|
||||
},
|
||||
setState (name, value, item) {
|
||||
if (name === 'collapsed') {
|
||||
const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon');
|
||||
const icon = value ? G6.Marker.expand : G6.Marker.collapse;
|
||||
marker.attr('symbol', icon);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
G6.registerEdge(
|
||||
'step-line',
|
||||
{
|
||||
getControlPoints: function getControlPoints(cfg) {
|
||||
const startPoint = cfg.startPoint;
|
||||
const endPoint = cfg.endPoint;
|
||||
return [
|
||||
startPoint,
|
||||
{
|
||||
x: startPoint.x,
|
||||
y: endPoint.y - 80,
|
||||
},
|
||||
{
|
||||
x: endPoint.x,
|
||||
y: endPoint.y - 80,
|
||||
},
|
||||
{
|
||||
...endPoint,
|
||||
y: endPoint.y - 20
|
||||
}
|
||||
];
|
||||
},
|
||||
'step-line',
|
||||
{
|
||||
getControlPoints: function getControlPoints (cfg) {
|
||||
const startPoint = cfg.startPoint;
|
||||
const endPoint = cfg.endPoint;
|
||||
return [
|
||||
startPoint,
|
||||
{
|
||||
x: startPoint.x,
|
||||
y: endPoint.y - 80,
|
||||
},
|
||||
{
|
||||
x: endPoint.x,
|
||||
y: endPoint.y - 80,
|
||||
},
|
||||
{
|
||||
...endPoint,
|
||||
y: endPoint.y - 20
|
||||
}
|
||||
];
|
||||
},
|
||||
'polyline',
|
||||
},
|
||||
'polyline',
|
||||
);
|
||||
|
||||
|
||||
const graph = new G6.TreeGraph({
|
||||
container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
|
||||
width: this.$refs.mountNode.scrollWidth, // Number，必须，图的宽度
|
||||
@@ -203,12 +204,12 @@ export default {
|
||||
// fitViewPadding: [20, 40, 50, 20], // 画布上四周的留白宽度
|
||||
// 节点在默认状态下的样式配置（style）和其他配置
|
||||
defaultNode: {
|
||||
type:'card-node',
|
||||
size: [160,30], // 节点大小
|
||||
type: 'card-node',
|
||||
size: [ 160, 30 ], // 节点大小
|
||||
// 线的连接位置
|
||||
anchorPoints: [
|
||||
[0.5, 0],
|
||||
[0.5, 1],
|
||||
[ 0.5, 0 ],
|
||||
[ 0.5, 1 ],
|
||||
],
|
||||
// width: 100,
|
||||
// height: 40,
|
||||
@@ -304,23 +305,33 @@ export default {
|
||||
},
|
||||
// 交互
|
||||
modes: {
|
||||
default: ['drag-canvas', 'zoom-canvas'], // 允许拖拽画布、放缩画布、拖拽节点
|
||||
default: [ 'drag-canvas', 'zoom-canvas' ], // 允许拖拽画布、放缩画布、拖拽节点
|
||||
},
|
||||
// plugins: [minimap], // 将 minimap 实例配置到图上
|
||||
plugins: [tooltip],
|
||||
plugins: [ tooltip ],
|
||||
});
|
||||
this.setCollapse()
|
||||
graph.data(this.data); // 读取 Step 2 中的数据源到图上
|
||||
graph.render(); // 渲染图
|
||||
// graph.fitView()
|
||||
graph.fitCenter()
|
||||
// graph.fitView()
|
||||
graph.fitCenter()
|
||||
// graph.focusItem(this.data.id)
|
||||
// 添加事件监听
|
||||
this.initGraphEvent(graph)
|
||||
// 监听窗口尺寸变化
|
||||
window.addEventListener('resize', () => {
|
||||
// 获取新的窗口尺寸
|
||||
const newWidth = this.$refs.mountNode.offsetWidth;
|
||||
const newHeight = this.$refs.mountNode.offsetHeight
|
||||
|
||||
// 更新 G6 图表的尺寸
|
||||
graph.changeSize(newWidth, newHeight);
|
||||
});
|
||||
},
|
||||
setCollapse () {
|
||||
G6.Util.traverseTree(this.data, function (item) {
|
||||
G6.Util.traverseTree(this.data, (item) => {
|
||||
if (item.level >= 2) {
|
||||
//collapsed为true时默认收起
|
||||
// collapsed为true时默认收起
|
||||
item.collapsed = true
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user