feat:节点图谱展示
This commit is contained in:
parent
2a022785b2
commit
7ba15106fd
1269
package-lock.json
generated
1269
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -11,6 +11,8 @@
|
|||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g6": "^4.8.24",
|
||||
"axios": "^1.10.0",
|
||||
"element-plus": "^2.10.1",
|
||||
"tdesign-vue-next": "^1.13.2",
|
||||
"vue": "^3.5.13",
|
||||
|
|
|
|||
|
|
@ -1,79 +1,154 @@
|
|||
<script setup>
|
||||
<!-- <script setup>
|
||||
// import { RouterView } from 'vue-router'
|
||||
// import HelloWorld from './components/HelloWorld.vue'
|
||||
import Visualize from '../views/visualize/index.vue'
|
||||
import graphData from "../views/visualize/data/graphData.ts"
|
||||
console.log(graphData);
|
||||
|
||||
</script>
|
||||
// import Visualize from '../views/visualize/index.vue'
|
||||
// import graphData from "../views/visualize/data/graphData.ts"
|
||||
</script> -->
|
||||
|
||||
<template>
|
||||
<div style="width: 800px; height: 800px">
|
||||
<!-- <RouterView :graphData="graphData" /> -->
|
||||
<visualize :graphData="graphData" />
|
||||
<div style="width: 100%; height: 100%">
|
||||
<div class="graph-box" id="graph-container"></div>
|
||||
<div class="slider-box">
|
||||
<el-slider v-model="state.sliderValue" @input="sliderChange" :marks="state.marks" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from "axios";
|
||||
import { onMounted, reactive } from "vue";
|
||||
import { Graph } from "@antv/g6";
|
||||
import { ElLoading } from 'element-plus';
|
||||
|
||||
const state = reactive({
|
||||
graph: null,
|
||||
marks: {
|
||||
'0': "2024-01-03",
|
||||
'10': "2024-01-04",
|
||||
'20': "2024-01-05",
|
||||
'30': "2024-03-16",
|
||||
'40': "2024-03-17",
|
||||
'50': "2024-04-08",
|
||||
'60': "2024-05-26",
|
||||
'70': "2024-06-21",
|
||||
'80': "2024-06-24",
|
||||
'90': "2024-06-27",
|
||||
'100': "2024-06-28"
|
||||
},
|
||||
sliderValue: 0,
|
||||
loadingInstance: null
|
||||
})
|
||||
let loadingInstance = null;
|
||||
// 显示 Loading 组件
|
||||
const showLoading = () => {
|
||||
loadingInstance = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
};
|
||||
|
||||
// 隐藏 Loading 组件
|
||||
const hideLoading = () => {
|
||||
if (loadingInstance) {
|
||||
loadingInstance.close();
|
||||
}
|
||||
};
|
||||
|
||||
const sliderChange = (val) => {
|
||||
if (state.marks[val]) {
|
||||
getData(state.marks[val]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据日期获取图谱数据
|
||||
* @param dataTime 日期
|
||||
*/
|
||||
const getData = async (dataTime) => {
|
||||
showLoading()
|
||||
const res = await axios.get("http://10.7.1.52:1922/demo/edge/getEdgeData", {
|
||||
params: { dataTime }
|
||||
});
|
||||
if (res.data.code == 200) {
|
||||
createGraph(res.data.data)
|
||||
hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建图谱
|
||||
* @param data 图谱数据
|
||||
*/
|
||||
const createGraph = (data) => {
|
||||
if (state.graph) {
|
||||
state.graph.destroy();
|
||||
}
|
||||
const graph = new Graph({
|
||||
container: document.getElementById('graph-container'),
|
||||
width: 850,
|
||||
height: 850,
|
||||
autoResize: true,
|
||||
animation: true,
|
||||
modes: {
|
||||
default: ["drag-canvas", "drag-node", "zoom-canvas"],
|
||||
},
|
||||
layout: {
|
||||
type: 'force2',
|
||||
animate: true,
|
||||
damping: 0.1,
|
||||
interval: 0.05,
|
||||
minMovement: 0.3
|
||||
},
|
||||
defaultEdge: {
|
||||
size: 1,
|
||||
color: "skyblue",
|
||||
style: {
|
||||
endArrow: {
|
||||
path: "M 0,0 L 8,4 L 8,-4 Z",
|
||||
fill: "skyblue",
|
||||
},
|
||||
lineDash: [5, 5, 5],
|
||||
},
|
||||
}
|
||||
});
|
||||
graph.node((node) => {
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.label,
|
||||
size: 50,
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: "#000",
|
||||
},
|
||||
},
|
||||
style: {
|
||||
fill: node.bgColor ? node.bgColor : "skyblue",
|
||||
stroke: node.bgColor ? node.bgColor : "skyblue",
|
||||
lineWidth: 4,
|
||||
},
|
||||
};
|
||||
});
|
||||
graph.data(data)
|
||||
graph.render();
|
||||
graph.on('afterlayout', () => {
|
||||
graph.fitView();
|
||||
});
|
||||
state.graph = graph
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData('2024-01-03')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
.graph-box {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.slider-box {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -120,12 +120,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containner5">
|
||||
<div class="containner5" style="width: 850px; height: 850px">
|
||||
<IndexView/>
|
||||
</div>
|
||||
<div class="containner6">
|
||||
<!-- <div class="containner6">
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user