siyaqi
3 weeks ago
8 changed files with 841 additions and 5 deletions
@ -0,0 +1,152 @@ |
|||
<template> |
|||
<el-tabs v-model="activeName" style="margin-top: 8px"> |
|||
<el-tab-pane label="图谱" name="1"> |
|||
<treeNodeg6 ref="treeGraph" :mockData="mockData" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="表格" name="2"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="tableData" |
|||
@selection-change="handleSelectionChange" |
|||
border |
|||
style="width: 100%" |
|||
> |
|||
|
|||
<el-table-column label="代码编号" align="center" prop="codeNum" /> |
|||
<el-table-column label="代码名称" align="center" prop="codeName" /> |
|||
<el-table-column label="引用标准编号" align="center" prop="stdNum" /> |
|||
<el-table-column label="引用标准英文名" align="center" prop="stdCode" /> |
|||
<el-table-column label="引用标准中文名" align="center" prop="stdName" /> |
|||
<el-table-column label="引用字典编号" align="center" prop="dictNum" /> |
|||
<el-table-column label="引用字典英文名" align="center" prop="dictCode" /> |
|||
<el-table-column label="引用字典中文名" align="center" prop="dictName" /> |
|||
</el-table> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted, nextTick } from "vue"; |
|||
import { getStdCodeMap } from "@/api/datastd/std"; |
|||
import treeNodeg6 from "./treeNodeg6.vue"; |
|||
|
|||
const activeName = ref("1"); // 默认打开图谱 |
|||
|
|||
const treeGraph = ref(null); |
|||
const tableData = ref([]); |
|||
const selections = ref([]); |
|||
const loading = ref(false); |
|||
const props = defineProps({ |
|||
rowData: { |
|||
type: Object, |
|||
required: false |
|||
} |
|||
|
|||
}); |
|||
// mocked data |
|||
const mockData = ref({ |
|||
id: "g1", |
|||
name: props.rowData.codeName, |
|||
count: 123456, |
|||
label: props.rowData.codeNum, |
|||
rate: 1.0, |
|||
status: "G", |
|||
variableValue: "代码", |
|||
variableUp: true, |
|||
children:[] |
|||
// children: [ |
|||
// { |
|||
// id: "g12", |
|||
// name: "发行机构类型", |
|||
// count: 123456, |
|||
// label: "iss_ins_type", |
|||
// rate: 1.0, |
|||
// status: "R", |
|||
// currency: "xx001", |
|||
// variableValue: "标准", |
|||
// variableUp: true, |
|||
// children: [ |
|||
// { |
|||
// id: "g121", |
|||
// name: "发行机构类型", |
|||
// collapsed: true, |
|||
// count: 123456, |
|||
// label: "iss_ins_type", |
|||
// rate: 1.0, |
|||
// status: "B", |
|||
// currency: "xx002", |
|||
// variableValue: "词典", |
|||
// variableUp: true, |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// { |
|||
// id: "g13", |
|||
// name: "发行人编号", |
|||
// label: "issr_no", |
|||
// rate: 1, |
|||
// status: "R", |
|||
// currency: "xx002", |
|||
// variableValue: "标准", |
|||
// variableUp: true, |
|||
// }, |
|||
// ], |
|||
}); |
|||
|
|||
// 获取数据列表 |
|||
const getList = async () => { |
|||
loading.value = true; |
|||
try { |
|||
const response = await listStdCodemap(); |
|||
tableData.value = response.rows || []; |
|||
} finally { |
|||
loading.value = false; |
|||
} |
|||
}; |
|||
|
|||
const handleSelectionChange = (selection) => { |
|||
selections.value = selection; |
|||
}; |
|||
|
|||
// 默认加载图谱 |
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
|
|||
getStdCodeMap(props.rowData.id).then(response => { |
|||
mockData.value.children = response.data.children; |
|||
tableData.value = response.data.tableData; |
|||
if (treeGraph.value) { |
|||
treeGraph.value.refreshGraph(); |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.app-container { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.query-form-container { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.el-table .el-input { |
|||
width: 100%; |
|||
} |
|||
|
|||
.form-container { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.info-text { |
|||
font-size: 18px; |
|||
line-height: 1.6; |
|||
color: #333; |
|||
font-weight: 500; |
|||
display: inline-block; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,564 @@ |
|||
<template> |
|||
<div> |
|||
<div ref="container" id="container" class="graph-container"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { onMounted, ref } from 'vue'; |
|||
import G6 from '@antv/g6'; |
|||
import insertCss from 'insert-css'; |
|||
|
|||
insertCss(` |
|||
.g6-component-tooltip { |
|||
background-color: rgba(0,0,0, 0.65); |
|||
padding: 10px; |
|||
box-shadow: rgb(174, 174, 174) 0px 0px 10px; |
|||
width: fit-content; |
|||
color: #fff; |
|||
border-radius = 4px; |
|||
} |
|||
`); |
|||
|
|||
// mocked data |
|||
// const mockData = { |
|||
// id: 'g1', |
|||
// name: '发型机构类型代码', |
|||
// count: 123456, |
|||
// label: 'SYS049', |
|||
// // currency: '代码', |
|||
// rate: 1.0, |
|||
// status: 'G', |
|||
// // variableName: 'V1', |
|||
// variableValue:'代码', |
|||
// variableUp: true, |
|||
// children: [ |
|||
// { |
|||
// id: 'g12', |
|||
// name: '发行机构类型', |
|||
// count: 123456, |
|||
// label: 'iss_ins_type', |
|||
// rate: 1.0, |
|||
// status: 'R', |
|||
// currency: 'xx001', |
|||
// // variableName: 'V2', |
|||
// variableValue:'标准', |
|||
// variableUp: true, |
|||
// children: [ |
|||
// { |
|||
// id: 'g121', |
|||
// name: '发行机构类型', |
|||
// collapsed: true, |
|||
// count: 123456, |
|||
// label: 'iss_ins_type', |
|||
// rate: 1.0, |
|||
// status: 'B', |
|||
// currency: 'xx002', |
|||
// variableValue:'词典', |
|||
// variableUp: true, |
|||
|
|||
// }, |
|||
|
|||
// ], |
|||
// }, |
|||
// { |
|||
// id: 'g13', |
|||
// name: '发行人编号', |
|||
// label: 'issr_no', |
|||
// rate: 1, |
|||
// status: 'R', |
|||
// currency: 'xx002', |
|||
// // variableName: '标准', |
|||
// variableValue:'标准', |
|||
// variableUp: true, |
|||
|
|||
// } |
|||
|
|||
// ], |
|||
// }; |
|||
|
|||
const colors = { |
|||
B: '#5B8FF9', |
|||
R: '#F46649', |
|||
Y: '#EEBC20', |
|||
G: '#5BD8A6', |
|||
DI: '#A7A7A7', |
|||
}; |
|||
|
|||
|
|||
|
|||
export default { |
|||
name: 'G6TreeGraph', |
|||
props: { |
|||
// 这里声明传入的数据 prop，名称保持 mockData |
|||
mockData: { |
|||
type: Object, |
|||
required: true, |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const container = ref(null); |
|||
let graph = null; |
|||
// // 组件props配置 |
|||
const propsConfig = { |
|||
data: props.mockData, |
|||
config: { |
|||
padding: [20, 50], |
|||
defaultLevel: 3, |
|||
defaultZoom: 0.8, |
|||
modes: { default: ['zoom-canvas', 'drag-canvas'] }, |
|||
}, |
|||
}; |
|||
console.log(props.mockData,"mockDatamockDatamockData") |
|||
// 自定义节点和边的注册函数 |
|||
const registerFn = () => { |
|||
/** 自定义节点 **/ |
|||
G6.registerNode( |
|||
'flow-rect', |
|||
{ |
|||
shapeType: 'flow-rect', |
|||
draw(cfg, group) { |
|||
const { |
|||
name = '', |
|||
variableName, |
|||
variableValue, |
|||
variableUp, |
|||
label, |
|||
collapsed, |
|||
currency, |
|||
status, |
|||
rate, |
|||
} = cfg; |
|||
|
|||
const grey = '#CED4D9'; |
|||
const rectConfig = { |
|||
width: 202, |
|||
height: 60, |
|||
lineWidth: 1, |
|||
fontSize: 12, |
|||
fill: '#fff', |
|||
radius: 4, |
|||
stroke: grey, |
|||
opacity: 1, |
|||
}; |
|||
|
|||
const nodeOrigin = { |
|||
x: -rectConfig.width / 2, |
|||
y: -rectConfig.height / 2, |
|||
}; |
|||
|
|||
const textConfig = { |
|||
textAlign: 'left', |
|||
textBaseline: 'bottom', |
|||
}; |
|||
|
|||
const rect = group.addShape('rect', { |
|||
attrs: { |
|||
x: nodeOrigin.x, |
|||
y: nodeOrigin.y, |
|||
...rectConfig, |
|||
}, |
|||
}); |
|||
|
|||
const rectBBox = rect.getBBox(); |
|||
|
|||
// label title |
|||
group.addShape('text', { |
|||
attrs: { |
|||
...textConfig, |
|||
x: 12 + nodeOrigin.x, |
|||
y: 20 + nodeOrigin.y, |
|||
text: name.length > 28 ? name.substr(0, 28) + '...' : name, |
|||
fontSize: 12, |
|||
opacity: 0.85, |
|||
fill: '#000', |
|||
cursor: 'pointer', |
|||
}, |
|||
name: 'name-shape', |
|||
}); |
|||
|
|||
// price |
|||
const price = group.addShape('text', { |
|||
attrs: { |
|||
...textConfig, |
|||
x: 12 + nodeOrigin.x, |
|||
y: rectBBox.maxY - 12, |
|||
text: label, |
|||
fontSize: 16, |
|||
fill: '#000', |
|||
opacity: 0.85, |
|||
}, |
|||
}); |
|||
|
|||
// label currency |
|||
group.addShape('text', { |
|||
attrs: { |
|||
...textConfig, |
|||
x: price.getBBox().maxX + 5, |
|||
y: rectBBox.maxY - 12, |
|||
text: currency, |
|||
fontSize: 12, |
|||
fill: '#000', |
|||
opacity: 0.75, |
|||
}, |
|||
}); |
|||
|
|||
// percentage |
|||
const percentText = group.addShape('text', { |
|||
attrs: { |
|||
...textConfig, |
|||
x: rectBBox.maxX - 8, |
|||
y: rectBBox.maxY - 12, |
|||
// text: `${((variableValue || 0) * 100).toFixed(2)}%`, |
|||
text: variableValue, |
|||
fontSize: 12, |
|||
textAlign: 'right', |
|||
fill: colors[status], |
|||
}, |
|||
}); |
|||
|
|||
// percentage triangle |
|||
const symbol = variableUp ? 'triangle' : 'triangle-down'; |
|||
const triangle = group.addShape('marker', { |
|||
attrs: { |
|||
...textConfig, |
|||
x: percentText.getBBox().minX - 10, |
|||
y: rectBBox.maxY - 12 - 6, |
|||
symbol, |
|||
r: 6, |
|||
fill: colors[status], |
|||
}, |
|||
}); |
|||
|
|||
// variable name |
|||
group.addShape('text', { |
|||
attrs: { |
|||
...textConfig, |
|||
x: triangle.getBBox().minX - 4, |
|||
y: rectBBox.maxY - 12, |
|||
text: variableName, |
|||
fontSize: 12, |
|||
textAlign: 'right', |
|||
fill: '#000', |
|||
opacity: 0.45, |
|||
}, |
|||
}); |
|||
|
|||
// bottom line background |
|||
group.addShape('rect', { |
|||
attrs: { |
|||
x: nodeOrigin.x, |
|||
y: rectBBox.maxY - 4, |
|||
width: rectConfig.width, |
|||
height: 4, |
|||
radius: [0, 0, rectConfig.radius, rectConfig.radius], |
|||
fill: '#E0DFE3', |
|||
}, |
|||
}); |
|||
|
|||
// bottom percent |
|||
group.addShape('rect', { |
|||
attrs: { |
|||
x: nodeOrigin.x, |
|||
y: rectBBox.maxY - 4, |
|||
width: rate * rectBBox.width, |
|||
height: 4, |
|||
radius: [0, 0, 0, rectConfig.radius], |
|||
fill: colors[status], |
|||
}, |
|||
}); |
|||
|
|||
// collapse rect |
|||
if (cfg.children && cfg.children.length) { |
|||
group.addShape('rect', { |
|||
attrs: { |
|||
x: rectConfig.width / 2 - 8, |
|||
y: -8, |
|||
width: 16, |
|||
height: 16, |
|||
stroke: 'rgba(0, 0, 0, 0.25)', |
|||
cursor: 'pointer', |
|||
fill: '#fff', |
|||
}, |
|||
name: 'collapse-back', |
|||
modelId: cfg.id, |
|||
}); |
|||
|
|||
// collapse text |
|||
group.addShape('text', { |
|||
attrs: { |
|||
x: rectConfig.width / 2, |
|||
y: -1, |
|||
textAlign: 'center', |
|||
textBaseline: 'middle', |
|||
text: collapsed ? '+' : '-', |
|||
fontSize: 16, |
|||
cursor: 'pointer', |
|||
fill: 'rgba(0, 0, 0, 0.25)', |
|||
}, |
|||
name: 'collapse-text', |
|||
modelId: cfg.id, |
|||
}); |
|||
} |
|||
|
|||
this.drawLinkPoints(cfg, group); |
|||
return rect; |
|||
}, |
|||
update(cfg, item) { |
|||
const { level, status, name } = cfg; |
|||
const group = item.getContainer(); |
|||
let mask = group.find((ele) => ele.get('name') === 'mask-shape'); |
|||
let maskLabel = group.find((ele) => ele.get('name') === 'mask-label-shape'); |
|||
if (level === 0) { |
|||
group.get('children').forEach((child) => { |
|||
if (child.get('name')?.includes('collapse')) return; |
|||
child.hide(); |
|||
}); |
|||
if (!mask) { |
|||
mask = group.addShape('rect', { |
|||
attrs: { |
|||
x: -101, |
|||
y: -30, |
|||
width: 202, |
|||
height: 60, |
|||
opacity: 0, |
|||
fill: colors[status], |
|||
}, |
|||
name: 'mask-shape', |
|||
}); |
|||
maskLabel = group.addShape('text', { |
|||
attrs: { |
|||
fill: '#fff', |
|||
fontSize: 20, |
|||
x: 0, |
|||
y: 10, |
|||
text: name.length > 28 ? name.substr(0, 16) + '...' : name, |
|||
textAlign: 'center', |
|||
opacity: 0, |
|||
}, |
|||
name: 'mask-label-shape', |
|||
}); |
|||
const collapseRect = group.find((ele) => ele.get('name') === 'collapse-back'); |
|||
const collapseText = group.find((ele) => ele.get('name') === 'collapse-text'); |
|||
collapseRect?.toFront(); |
|||
collapseText?.toFront(); |
|||
} else { |
|||
mask.show(); |
|||
maskLabel.show(); |
|||
} |
|||
mask.animate({ opacity: 1 }, 200); |
|||
maskLabel.animate({ opacity: 1 }, 200); |
|||
return mask; |
|||
} else { |
|||
group.get('children').forEach((child) => { |
|||
if (child.get('name')?.includes('collapse')) return; |
|||
child.show(); |
|||
}); |
|||
mask?.animate({ opacity: 0 }, { |
|||
duration: 200, |
|||
callback: () => mask.hide(), |
|||
}); |
|||
maskLabel?.animate({ opacity: 0 }, { |
|||
duration: 200, |
|||
callback: () => maskLabel.hide(), |
|||
}); |
|||
} |
|||
this.updateLinkPoints(cfg, group); |
|||
}, |
|||
setState(name, value, item) { |
|||
if (name === 'collapse') { |
|||
const group = item.getContainer(); |
|||
const collapseText = group.find((e) => e.get('name') === 'collapse-text'); |
|||
if (collapseText) { |
|||
if (!value) { |
|||
collapseText.attr({ text: '-' }); |
|||
} else { |
|||
collapseText.attr({ text: '+' }); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
getAnchorPoints() { |
|||
return [ |
|||
[0, 0.5], |
|||
[1, 0.5], |
|||
]; |
|||
}, |
|||
}, |
|||
'rect' |
|||
); |
|||
|
|||
G6.registerEdge( |
|||
'flow-cubic', |
|||
{ |
|||
getControlPoints(cfg) { |
|||
let controlPoints = cfg.controlPoints; |
|||
if (!controlPoints || !controlPoints.length) { |
|||
const { startPoint, endPoint, sourceNode, targetNode } = cfg; |
|||
const { x: startX, y: startY, coefficientX, coefficientY } = sourceNode |
|||
? sourceNode.getModel() |
|||
: startPoint; |
|||
const { x: endX, y: endY } = targetNode ? targetNode.getModel() : endPoint; |
|||
let curveStart = (endX - startX) * coefficientX; |
|||
let curveEnd = (endY - startY) * coefficientY; |
|||
curveStart = curveStart > 40 ? 40 : curveStart; |
|||
curveEnd = curveEnd < -30 ? curveEnd : -30; |
|||
controlPoints = [ |
|||
{ x: startPoint.x + curveStart, y: startPoint.y }, |
|||
{ x: endPoint.x + curveEnd, y: endPoint.y }, |
|||
]; |
|||
} |
|||
return controlPoints; |
|||
}, |
|||
getPath(points) { |
|||
const path = []; |
|||
path.push(['M', points[0].x, points[0].y]); |
|||
path.push([ |
|||
'C', |
|||
points[1].x, |
|||
points[1].y, |
|||
points[2].x, |
|||
points[2].y, |
|||
points[3].x, |
|||
points[3].y, |
|||
]); |
|||
return path; |
|||
}, |
|||
}, |
|||
'single-line' |
|||
); |
|||
}; |
|||
|
|||
// 初始化图表 |
|||
const initGraph = (data) => { |
|||
if (!data) { |
|||
return; |
|||
} |
|||
const { onInit, config } = propsConfig; |
|||
const tooltip = new G6.Tooltip({ |
|||
offsetX: 20, |
|||
offsetY: 30, |
|||
itemTypes: ['node'], |
|||
getContent: (e) => { |
|||
const outDiv = document.createElement('div'); |
|||
const nodeName = e.item.getModel().name; |
|||
let formatedNodeName = ''; |
|||
for (let i = 0; i < nodeName.length; i++) { |
|||
formatedNodeName = `${formatedNodeName}${nodeName[i]}`; |
|||
if (i !== 0 && i % 20 === 0) |
|||
formatedNodeName = `${formatedNodeName}<br/>`; |
|||
} |
|||
outDiv.innerHTML = `${formatedNodeName}`; |
|||
return outDiv; |
|||
}, |
|||
shouldBegin: (e) => { |
|||
if ( |
|||
e.target.get('name') === 'name-shape' || |
|||
e.target.get('name') === 'mask-label-shape' |
|||
) |
|||
return true; |
|||
return false; |
|||
}, |
|||
}); |
|||
graph = new G6.TreeGraph({ |
|||
container: container.value, |
|||
...defaultConfig(), |
|||
...config, |
|||
plugins: [tooltip], |
|||
}); |
|||
if (typeof onInit === 'function') { |
|||
onInit(graph); |
|||
} |
|||
graph.data(data); |
|||
graph.render(); |
|||
|
|||
const handleCollapse = (e) => { |
|||
const target = e.target; |
|||
const id = target.get('modelId'); |
|||
const item = graph.findById(id); |
|||
const nodeModel = item.getModel(); |
|||
nodeModel.collapsed = !nodeModel.collapsed; |
|||
graph.layout(); |
|||
graph.setItemState(item, 'collapse', nodeModel.collapsed); |
|||
}; |
|||
graph.on('collapse-text:click', (e) => { |
|||
handleCollapse(e); |
|||
}); |
|||
graph.on('collapse-back:click', (e) => { |
|||
handleCollapse(e); |
|||
}); |
|||
|
|||
let currentLevel = 1; |
|||
const briefZoomThreshold = Math.max(graph.getZoom(), 0.5); |
|||
graph.on('viewportchange', (e) => { |
|||
if (e.action !== 'zoom') return; |
|||
const currentZoom = graph.getZoom(); |
|||
let toLevel = currentLevel; |
|||
if (currentZoom < briefZoomThreshold) { |
|||
toLevel = 0; |
|||
} else { |
|||
toLevel = 1; |
|||
} |
|||
if (toLevel !== currentLevel) { |
|||
currentLevel = toLevel; |
|||
graph.getNodes().forEach((node) => { |
|||
graph.updateItem(node, { level: toLevel }); |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
// 默认配置，根据 container 的宽高动态生成 |
|||
const defaultConfig = () => { |
|||
const width = container.value.scrollWidth; |
|||
const height = container.value.scrollHeight || 500; |
|||
return { |
|||
width, |
|||
height, |
|||
modes: { |
|||
default: ['zoom-canvas', 'drag-canvas'], |
|||
}, |
|||
fitView: true, |
|||
animate: true, |
|||
defaultNode: { |
|||
type: 'flow-rect', |
|||
}, |
|||
defaultEdge: { |
|||
type: 'cubic-horizontal', |
|||
style: { |
|||
stroke: '#CED4D9', |
|||
}, |
|||
}, |
|||
layout: { |
|||
type: 'indented', |
|||
direction: 'LR', |
|||
dropCap: false, |
|||
indent: 300, |
|||
getHeight: () => 60, |
|||
}, |
|||
}; |
|||
}; |
|||
const refreshGraph = () => { |
|||
nextTick(() => { |
|||
registerFn(); |
|||
initGraph(propsConfig.data); |
|||
window.onresize = () => { |
|||
if (!graph || graph.get('destroyed')) return; |
|||
if (!container.value || !container.value.scrollWidth || !container.value.scrollHeight) |
|||
return; |
|||
graph.changeSize(container.value.scrollWidth, container.value.scrollHeight); |
|||
|
|||
} |
|||
}); |
|||
}; |
|||
return { container ,refreshGraph }; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.graph-container { |
|||
width: 100%; |
|||
height: 600px; |
|||
/* border: 1px solid #ddd; */ |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue