FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(体系搜索): 监听窗口改变重新渲染

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