体系搜索
This commit is contained in:
zyn
@@ -121,6 +121,11 @@
|
|||||||
path: '/enterpriseStandardDatabase',
|
path: '/enterpriseStandardDatabase',
|
||||||
menuId: '01ed8f752748227777b3572d56ee9ab5'
|
menuId: '01ed8f752748227777b3572d56ee9ab5'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '体系搜索',
|
||||||
|
path: '/systemSearch',
|
||||||
|
menuId: 'b7092983b5db427402388617d3e64106'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '企标计划',
|
title: '企标计划',
|
||||||
path: '/enterpriseStandardPlan',
|
path: '/enterpriseStandardPlan',
|
||||||
|
|||||||
@@ -0,0 +1,375 @@
|
|||||||
|
<template>
|
||||||
|
<div id="mountNode" ref="mountNode"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import G6 from '@antv/g6';
|
||||||
|
export default {
|
||||||
|
name: "systemSearch",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
data: {}
|
||||||
|
// data: {
|
||||||
|
// // 点集
|
||||||
|
// nodes: [
|
||||||
|
// {
|
||||||
|
// id: 'node1', // String，该节点存在则必须，节点的唯一标识
|
||||||
|
// // x: 100, // Number，可选，节点位置的 x 值
|
||||||
|
// // y: 200, // Number，可选，节点位置的 y 值
|
||||||
|
// label: '起始点', // 节点文本,可选
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: 'node2', // String，该节点存在则必须，节点的唯一标识
|
||||||
|
// // x: 300, // Number，可选，节点位置的 x 值
|
||||||
|
// // y: 200, // Number，可选，节点位置的 y 值
|
||||||
|
// label: '目标点',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// // 边集
|
||||||
|
// edges: [
|
||||||
|
// {
|
||||||
|
// source: 'node1', // String，必须，起始点 id
|
||||||
|
// target: 'node2', // String，必须，目标点 id
|
||||||
|
// label: '我是连线', // 边的文本,可选
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getData () {
|
||||||
|
this.$http.get('wg_work_group/researchData', {
|
||||||
|
type: '0'
|
||||||
|
}, {
|
||||||
|
_this: this
|
||||||
|
}, res => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.data = res.data
|
||||||
|
this.initGraph()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initGraph(){
|
||||||
|
const that = this
|
||||||
|
// 实例化 minimap 插件
|
||||||
|
const minimap = new G6.Minimap({
|
||||||
|
size: [100, 100],
|
||||||
|
className: 'minimap',
|
||||||
|
type: 'delegate',
|
||||||
|
});
|
||||||
|
|
||||||
|
const tooltip = new G6.Tooltip({
|
||||||
|
offsetX: 10,
|
||||||
|
offsetY: 20,
|
||||||
|
getContent(e) {
|
||||||
|
const cfg = e.item.getModel()
|
||||||
|
const outDiv = document.createElement('div');
|
||||||
|
// outDiv.style.maxWidth = '200px';
|
||||||
|
outDiv.innerHTML = `
|
||||||
|
<div>${cfg.name}( 100/100/100 )</div>`
|
||||||
|
return outDiv
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 文字
|
||||||
|
group.addShape('text', {
|
||||||
|
attrs: {
|
||||||
|
textBaseline: 'top',
|
||||||
|
x: w / 2,
|
||||||
|
y: (h - 10) / 2,
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 20,
|
||||||
|
text: cfg.name.length > 5 ? `${cfg.name.slice(0,5)}...( 100/100/100 )` : `${cfg.name}( 100/100/100 )`,
|
||||||
|
fill: '#000',
|
||||||
|
textAlign: 'center',
|
||||||
|
cursor: 'pointer',
|
||||||
|
},
|
||||||
|
name: 'text',
|
||||||
|
});
|
||||||
|
|
||||||
|
cfg.children &&
|
||||||
|
group.addShape('marker', {
|
||||||
|
attrs: {
|
||||||
|
x: w / 2,
|
||||||
|
y: h,
|
||||||
|
r: 6,
|
||||||
|
cursor: 'pointer',
|
||||||
|
symbol: G6.Marker.collapse,
|
||||||
|
stroke: '#666',
|
||||||
|
lineWidth: 1,
|
||||||
|
fill: '#fff',
|
||||||
|
},
|
||||||
|
name: 'collapse-icon',
|
||||||
|
});
|
||||||
|
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','#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
|
||||||
|
}
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'polyline',
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
const graph = new G6.TreeGraph({
|
||||||
|
container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
|
||||||
|
width: this.$refs.mountNode.scrollWidth, // Number，必须，图的宽度
|
||||||
|
height: this.$refs.mountNode.scrollHeight, // Number，必须，图的高度
|
||||||
|
// fitView: true, // 设置是否将图适配到画布中；
|
||||||
|
// fitViewPadding: [20, 40, 50, 20], // 画布上四周的留白宽度
|
||||||
|
// 节点在默认状态下的样式配置（style）和其他配置
|
||||||
|
defaultNode: {
|
||||||
|
type:'card-node',
|
||||||
|
size: [160,30], // 节点大小
|
||||||
|
// 线的连接位置
|
||||||
|
anchorPoints: [
|
||||||
|
[0.5, 0],
|
||||||
|
[0.5, 1],
|
||||||
|
],
|
||||||
|
// width: 100,
|
||||||
|
// height: 40,
|
||||||
|
// 节点的其他配置
|
||||||
|
// 节点样式配置
|
||||||
|
// style: {
|
||||||
|
// fill: '#fff', // 节点填充色
|
||||||
|
// stroke: '#333', // 节点描边色
|
||||||
|
// lineWidth: 1, // 节点描边粗细
|
||||||
|
// radius: 4,
|
||||||
|
// cursor:'pointer'
|
||||||
|
// },
|
||||||
|
// 节点上的标签文本配置
|
||||||
|
labelCfg: {
|
||||||
|
// 节点上的标签文本样式配置
|
||||||
|
// style: {
|
||||||
|
// fill: '#000', // 节点标签文字颜色
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
// 四个圆的样式可以在这里指定
|
||||||
|
linkPoints: {
|
||||||
|
// top: true,
|
||||||
|
// bottom: true,
|
||||||
|
// left: true,
|
||||||
|
// right: true,
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 边在默认状态下的样式配置（style）和其他配置
|
||||||
|
defaultEdge: {
|
||||||
|
type: 'step-line',
|
||||||
|
// type: 'line',
|
||||||
|
// 边样式配置
|
||||||
|
style: {
|
||||||
|
radius: 20,
|
||||||
|
opacity: 0.6, // 边透明度
|
||||||
|
stroke: '#A3B1BF', // 边描边颜色
|
||||||
|
// endArrow: true
|
||||||
|
endArrow: {
|
||||||
|
path: G6.Arrow.vee(5, 10, 5), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
|
||||||
|
d: 5,
|
||||||
|
opacity: 0.6, // 边透明度
|
||||||
|
stroke: '#A3B1BF', // 边描边颜色
|
||||||
|
fill: '#A3B1BF'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 边上的标签文本配置
|
||||||
|
// labelCfg: {
|
||||||
|
// autoRotate: true, // 边上的标签文本根据边的方向旋转
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
// defaultEdge: {
|
||||||
|
// type: 'polyline',
|
||||||
|
// style: {
|
||||||
|
// // radius: 20,
|
||||||
|
// offset: 80,
|
||||||
|
// endArrow: true,
|
||||||
|
// lineWidth: 1,
|
||||||
|
// stroke: '#C2C8D5',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// 节点不同状态下的样式集合
|
||||||
|
nodeStateStyles: {
|
||||||
|
// // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
|
||||||
|
// hover: {
|
||||||
|
// fill: 'lightsteelblue',
|
||||||
|
// },
|
||||||
|
// // 鼠标点击节点，即 click 状态为 true 时的样式
|
||||||
|
// click: {
|
||||||
|
// stroke: '#000',
|
||||||
|
// lineWidth: 3,
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
// 边不同状态下的样式集合
|
||||||
|
edgeStateStyles: {
|
||||||
|
// // 鼠标点击边，即 click 状态为 true 时的样式
|
||||||
|
// click: {
|
||||||
|
// stroke: 'steelblue',
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
// 布局方式
|
||||||
|
layout: {
|
||||||
|
// Object，可选，布局的方法及其配置项，默认为 random 布局。
|
||||||
|
type: 'compactBox', // 布局类型
|
||||||
|
direction: 'TB',
|
||||||
|
getVGap: () => 100,
|
||||||
|
getHGap: () => 75,
|
||||||
|
// nodeSep: 150,
|
||||||
|
// rankSep: 150,
|
||||||
|
// preventOverlap: true, // 防止节点重叠
|
||||||
|
// nodeSize: 30 // 节点大小，用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中设置了每个节点的 size 属性，则不需要在此设置 nodeSize。
|
||||||
|
// linkDistance: 200, // 指定边距离为100
|
||||||
|
},
|
||||||
|
// 交互
|
||||||
|
modes: {
|
||||||
|
default: ['drag-canvas', 'zoom-canvas'], // 允许拖拽画布、放缩画布、拖拽节点
|
||||||
|
},
|
||||||
|
// plugins: [minimap], // 将 minimap 实例配置到图上
|
||||||
|
plugins: [tooltip],
|
||||||
|
});
|
||||||
|
this.setCollapse()
|
||||||
|
graph.data(this.data); // 读取 Step 2 中的数据源到图上
|
||||||
|
graph.render(); // 渲染图
|
||||||
|
// graph.fitView()
|
||||||
|
graph.fitCenter()
|
||||||
|
this.initGraphEvent(graph)
|
||||||
|
},
|
||||||
|
setCollapse () {
|
||||||
|
G6.Util.traverseTree(this.data, function (item) {
|
||||||
|
if (item.level >= 2) {
|
||||||
|
//collapsed为true时默认收起
|
||||||
|
item.collapsed = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// graph.layout();
|
||||||
|
},
|
||||||
|
initGraphEvent (graph) {
|
||||||
|
// 鼠标进入节点
|
||||||
|
// graph.on('node:mouseenter', (e) => {
|
||||||
|
// console.log('node:mouseenter')
|
||||||
|
// const nodeItem = e.item; // 获取鼠标进入的节点元素对象
|
||||||
|
// graph.setItemState(nodeItem, 'hover', true); // 设置当前节点的 hover 状态为 true
|
||||||
|
// });
|
||||||
|
|
||||||
|
// 鼠标离开节点
|
||||||
|
// graph.on('node:mouseleave', (e) => {
|
||||||
|
// console.log('node:mouseleave')
|
||||||
|
// const nodeItem = e.item; // 获取鼠标离开的节点元素对象
|
||||||
|
// graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false
|
||||||
|
// });
|
||||||
|
|
||||||
|
// 点击节点
|
||||||
|
graph.on('node:click', (e) => {
|
||||||
|
const clickNodes = graph.findAllByState('node', 'click');
|
||||||
|
clickNodes.forEach((cn) => {
|
||||||
|
graph.setItemState(cn, 'click', false);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (e.target.get('name') === 'collapse-icon') {
|
||||||
|
const nodeItem = e.item; // 获取被点击的节点元素对象
|
||||||
|
e.item.getModel().collapsed = !e.item.getModel().collapsed;// 设置是否展开
|
||||||
|
graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);// 设置当前节点的 click 状态
|
||||||
|
} else {
|
||||||
|
console.log('打开窗口',e.item.getModel())
|
||||||
|
alert('node:click')
|
||||||
|
}
|
||||||
|
|
||||||
|
graph.layout();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 点击边
|
||||||
|
// graph.on('edge:click', (e) => {
|
||||||
|
// console.log('edge:click')
|
||||||
|
// // 先将所有当前是 click 状态的边置为非 click 状态
|
||||||
|
// const clickEdges = graph.findAllByState('edge', 'click');
|
||||||
|
// clickEdges.forEach((ce) => {
|
||||||
|
// graph.setItemState(ce, 'click', false);
|
||||||
|
// });
|
||||||
|
// const edgeItem = e.item; // 获取被点击的边元素对象
|
||||||
|
// graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#mountNode{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.minimap{
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -3714,6 +3714,17 @@ const routes = [
|
|||||||
parentPath: '/enterpriseStandardDatabase'
|
parentPath: '/enterpriseStandardDatabase'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/systemSearch',
|
||||||
|
name: 'systemSearch',
|
||||||
|
component: () =>
|
||||||
|
import('@/pages/regulatoryRepository/systemSearch'),
|
||||||
|
meta: {
|
||||||
|
requireAuth: true,
|
||||||
|
title: '体系搜索',
|
||||||
|
menuId: 'b7092983b5db427402388617d3e64106'
|
||||||
|
}
|
||||||
|
},
|
||||||
// 标准法规库 - 标准法规清单
|
// 标准法规库 - 标准法规清单
|
||||||
{
|
{
|
||||||
path: '/accessStandardsAndRegulations',
|
path: '/accessStandardsAndRegulations',
|
||||||
|
|||||||
Reference in New Issue
Block a user