feat:节点图谱展示

package.json

@@ -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",

src/views/App.vue

@@ -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 Visualize from '../views/visualize/index.vue'
-import graphData from "../views/visualize/data/graphData.ts"
+// import graphData from "../views/visualize/data/graphData.ts"
-console.log(graphData);
+</script> -->
-
-</script>
 
 <template>
-  <div style="width: 800px; height: 800px">
+  <div style="width: 100%; height: 100%">
-    <!-- <RouterView :graphData="graphData" /> -->
+    <div class="graph-box" id="graph-container"></div>
-    <visualize :graphData="graphData" />
+    <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 {
+.graph-box {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
   width: 100%;
-  font-size: 12px;
+  height: 100%;
-  text-align: center;
-  margin-top: 2rem;
 }
 
-nav a.router-link-exact-active {
+.slider-box {
-  color: var(--color-text);
+  margin-top: 10px;
-}
-
-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;
-  }
 }
 </style>

src/views/Main.vue

@@ -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>