package.json

@@ -11,8 +11,6 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@antv/g6": "^4.8.24",
-    "axios": "^1.10.0",
     "echarts": "^5.6.0",
     "element-plus": "^2.10.1",
     "tdesign-vue-next": "^1.13.2",

src/views/App.vue

@@ -1,154 +1,79 @@
-<!-- <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"
-</script> -->
+console.log(graphData);
+
+</script>
 
 <template>
-  <div style="width: 100%; height: 100%">
+  <div style="width: 800px; height: 800px">
-    <div class="graph-box" id="graph-container"></div>
+    <!-- <RouterView :graphData="graphData" /> -->
-    <div class="slider-box">
+    <visualize :graphData="graphData" />
-      <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>
-.graph-box {
+header {
-  width: 100%;
+  line-height: 1.5;
-  height: 100%;
+  max-height: 100vh;
 }
 
-.slider-box {
+.logo {
-  margin-top: 10px;
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+nav {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: #041421;
+}
+
+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

@@ -132,7 +132,7 @@
         </div>
       </div>
     </div>
-    <div class="containner5" style="width: 850px; height: 850px">
+    <div class="containner5">
       <IndexView />
     </div>
     <div class="containner6">