From 35e8a727ee6443c6127ae5370a40962e368e39a6 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 30 Jan 2024 16:31:48 +0800
Subject: [PATCH] =?UTF-8?q?del:=20=E5=88=A0=E9=99=A4=E5=85=B3=E7=B3=BB?=
 =?UTF-8?q?=E5=9B=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChartGraphG6/index.vue | 392 --------------------------
 1 file changed, 392 deletions(-)
 delete mode 100644 src/components/ChartGraphG6/index.vue

diff --git a/src/components/ChartGraphG6/index.vue b/src/components/ChartGraphG6/index.vue
deleted file mode 100644
index 983d8181..00000000
--- a/src/components/ChartGraphG6/index.vue
+++ /dev/null
@@ -1,392 +0,0 @@
-<template>
-  <div>
-    <div ref="chartGraphG6Dom" :style="{ height: height, width: width }"></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, watch, onMounted, onBeforeUnmount, ref } from 'vue';
-import { Graph } from '@antv/g6';
-
-const props = defineProps({
-  /**
-   * 图表主题
-   *
-   * 'dark' | 'light'
-   */
-  theme: {
-    type: String,
-    default: 'light', // 'dark' | 'light'
-  },
-  /**宽度，默认100% */
-  width: {
-    type: String,
-    default: '100%',
-  },
-  /**高度 */
-  height: {
-    type: String,
-    default: '500px',
-  },
-});
-
-const chartGraphG6Dom = ref<HTMLElement | undefined>(undefined);
-
-const data = {
-  nodes: [
-    // 0 基站
-    {
-      id: '0',
-      x: 50,
-      y: 150,
-      size: 48,
-      type: 'circle',
-      label: '基站',
-      labelCfg: {
-        position: 'bottom',
-        offset: 10,
-        style: {
-          fill: '#333',
-          stroke: '#fff',
-          lineWidth: 10,
-        },
-      },
-      style: {
-        fill: '#9EC9FF',
-        stroke: '#5B8FF9',
-        lineWidth: 2,
-      },
-      icon: {
-        show: true,
-        // 可更换为其他图片地址
-        img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        width: 24,
-        height: 24,
-      },
-    },
-    // 1 DM
-    {
-      id: '1',
-      x: 450,
-      y: 450,
-      label: 'DM',
-      labelCfg: {
-        position: 'center',
-      },
-      style: {
-        fill: '#00b050',
-        stroke: '#00b050',
-        lineWidth: 1,
-      },
-    },
-    // 2 O&M
-    {
-      id: '2',
-      x: 50,
-      y: 450,
-      label: 'O&M',
-    },
-    // 100 EMS
-    {
-      id: '100',
-      label: 'EMS',
-      comboId: 'combo-ems',
-      x: 300,
-      y: 450,
-    },
-    // 190 UPF
-    {
-      id: '190',
-      comboId: 'combo-upf',
-      x: 300,
-      y: 350,
-      label: 'UPF',
-      labelCfg: {
-        position: 'center',
-      },
-      style: {
-        fill: '#d580ff',
-        stroke: '#d580ff',
-        lineWidth: 1,
-      },
-    },
-    // EP-IMS
-    {
-      id: '110',
-      comboId: 'combo-ims',
-      x: 600,
-      y: 350,
-      label: 'IMS',
-      labelCfg: {
-        position: 'center',
-      },
-      style: {
-        fill: '#ed7d31',
-        stroke: '#ed7d31',
-        lineWidth: 1,
-      },
-    },
-    // 5GC控制面
-    {
-      id: '170',
-      label: 'NSSF',
-      comboId: 'combo-5gc',
-      x: 300,
-      y: 50,
-    },
-    {
-      id: '130',
-      label: 'AUSF',
-      comboId: 'combo-5gc',
-      x: 450,
-      y: 50,
-    },
-    {
-      id: '140',
-      label: 'UDM',
-      comboId: 'combo-5gc',
-      x: 600,
-      y: 50,
-    },
-    {
-      id: '120',
-      label: 'AMF',
-      comboId: 'combo-5gc',
-      x: 300,
-      y: 150,
-    },
-    {
-      id: '180',
-      label: 'NRF',
-      comboId: 'combo-5gc',
-      x: 450,
-      y: 150,
-    },
-    {
-      id: '150',
-      label: 'SMF',
-      comboId: 'combo-5gc',
-      x: 300,
-      y: 250,
-    },
-    {
-      id: '160',
-      label: 'PCF',
-      comboId: 'combo-5gc',
-      x: 700,
-      y: 250,
-    },
-  ],
-  edges: [
-    {
-      id: '0-5gc',
-      source: '0',
-      target: 'combo-5gc',
-    },
-    {
-      id: '0-upf',
-      source: '0',
-      target: 'combo-upf',
-    },
-    {
-      id: 'upf-1',
-      source: 'combo-upf',
-      target: '1',
-    },
-
-    {
-      id: 'ems-2',
-      source: 'combo-ems',
-      target: '2',
-    },
-    {
-      id: '170-120',
-      source: '170',
-      target: '120',
-    },
-    {
-      id: '130-120',
-      source: '130',
-      target: '120',
-    },
-    {
-      id: '140-120',
-      source: '140',
-      target: '120',
-    },
-    {
-      id: '140-180',
-      source: '140',
-      target: '180',
-    },
-    {
-      id: '120-180',
-      source: '120',
-      target: '180',
-    },
-    {
-      id: '130-180',
-      source: '130',
-      target: '180',
-    },
-    {
-      id: '140-150',
-      source: '140',
-      target: '150',
-    },
-    {
-      id: '140-110',
-      source: '140',
-      target: '110',
-    },
-    {
-      id: '120-150',
-      source: '120',
-      target: '150',
-      data: {},
-    },
-    {
-      id: '150-180',
-      source: '150',
-      target: '180',
-      data: {},
-    },
-    {
-      id: '150-160',
-      source: '150',
-      target: '160',
-    },
-    {
-      id: '160-120',
-      source: '160',
-      target: '120',
-    },
-    {
-      id: '160-180',
-      source: '160',
-      target: '180',
-    },
-    {
-      id: '160-110',
-      source: '160',
-      target: '110',
-    },
-
-    {
-      id: '150-190',
-      source: '150',
-      target: '190',
-    },
-
-    {
-      id: 'upf-ims',
-      source: 'combo-upf',
-      target: 'combo-ims',
-    },
-    {
-      id: 'ems-5gc',
-      source: 'combo-ems',
-      target: 'combo-5gc',
-    },
-    {
-      id: 'ems-upf',
-      source: 'combo-ems',
-      target: 'combo-upf',
-    },
-    {
-      id: 'ems-ims',
-      source: 'combo-ems',
-      target: 'combo-ims',
-    },
-  ],
-  combos: [
-    {
-      id: 'combo-5gc',
-      data: {
-        text: '5GC控制面',
-      },
-    },
-    {
-      id: 'combo-upf',
-      data: {
-        keyShape: {
-          opacity: 0.8,
-          padding: [20, 20, 20, 20],
-          radius: 4,
-          lineWidth: 1,
-          stroke: '#d580ff',
-        },
-      },
-    },
-    {
-      id: 'combo-ims',
-      data: {},
-    },
-    {
-      id: 'combo-ems',
-      data: {},
-    },
-  ],
-};
-
-let graph: any = null;
-
-/**初始化渲染图表 */
-function initChart() {
-  if (!chartGraphG6Dom.value) return;
-  console.log(chartGraphG6Dom.value.clientWidth);
-  console.log(chartGraphG6Dom.value.clientHeight);
-  graph = new Graph({
-    container: chartGraphG6Dom.value,
-    height: chartGraphG6Dom.value.clientHeight,
-    width: chartGraphG6Dom.value.clientWidth,
-    fitCenter: true,
-    modes: {
-      default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
-    },
-    // 全局节点 矩形
-    defaultNode: {
-      type: 'rect',
-      size: [80, 40],
-      style: {
-        fill: '#fff',
-        lineWidth: 1,
-        radius: 8,
-      },
-      labelCfg: {},
-    },
-    // 全局边 三次贝塞尔曲线
-    defaultEdge: {
-      type: 'polyline',
-      style: {
-        offset: 20, // 拐弯处距离节点最小距离
-        radius: 4, // 拐弯处的圆角弧度，若不设置则为直角
-        lineWidth: 1,
-        stroke: '#87e8de',
-      },
-    },
-    // 全局框节点 矩形
-    defaultCombo: {
-      type: 'rect', // Combo 类型
-      size: [40, 40],
-      // ... 其他配置
-      style: {
-        lineWidth: 1,
-      },
-    },
-  });
-
-  graph.data(data); // 加载数据
-  graph.render(); // 渲染
-}
-
-onMounted(() => {
-  nextTick(() => {
-    initChart();
-  });
-});
-
-onBeforeUnmount(() => {});
-</script>
-
-<style lang="less" scoped></style>