From c7ba5185ba2c6fe6ebd9e81852c88ff4343ecaa6 Mon Sep 17 00:00:00 2001
From: jzy <928294064@qq.com>
Date: Fri, 26 Sep 2025 15:16:54 +0800
Subject: [PATCH] yangshi

---
 gyxtp/src/router/router.js           |    2 +-
 gyxtp/src/view/graphPageCopy0926.vue | 1834 ++++++++++++++++++++++++++++++++++
 2 files changed, 1835 insertions(+), 1 deletion(-)
 create mode 100644 gyxtp/src/view/graphPageCopy0926.vue

diff --git a/gyxtp/src/router/router.js b/gyxtp/src/router/router.js
index ffa72c7..e0f5778 100644
--- a/gyxtp/src/router/router.js
+++ b/gyxtp/src/router/router.js
@@ -22,7 +22,7 @@ const routes = [
         meta: {
             title: '数据图谱',
         },
-        component: () => import ("../view/graphPageCopy.vue")
+        component: () => import ("../view/graphPageCopy0926.vue")
     },
     {
         path: '/battlefield',
diff --git a/gyxtp/src/view/graphPageCopy0926.vue b/gyxtp/src/view/graphPageCopy0926.vue
new file mode 100644
index 0000000..41feff5
--- /dev/null
+++ b/gyxtp/src/view/graphPageCopy0926.vue
@@ -0,0 +1,1834 @@
+<template>
+  <div class="about">
+    <HeaderInfo style="height: 5.65vw;float: left;"></HeaderInfo>
+    <leftInfo @show="isZhe" style="width: 5vw;position: absolute;top: 5.35vw;position: absolute;z-index:100;"
+              :leftNum="0" :zhedie="zhedie" v-if="zhedie == 0"></leftInfo>
+    <div v-if="zhedie == 0" @click="this.zhedie = 1"
+         style="position: absolute;height: 3vw;width: 3vw;font-size: 2vw;border-radius:  0 50% 50% 0;z-index: 1000;bottom:45%;left:5vw;cursor: pointer">
+      <img src="../assets/img2/close3.png" style="width: 60%;object-fit: contain;">
+    </div>
+    <div v-if="zhedie == 1" @click="this.zhedie = 0"
+         style="position: absolute;height: 3vw;width: 3vw;font-size: 2vw;border-radius:  0 50% 50% 0;z-index: 1000;bottom:49%;left:0vw;cursor: pointer">
+      <img src="../assets/img2/open3.png" style="width: 60%;object-fit: contain;margin-top: 1.8vw;">
+    </div>
+    <div class="rightBox">
+      <div class="graphGround">
+        <div class="graphHeader" v-if="zhedie == 0">
+          <div class="gjz">
+            <div class="gjzText">关键词:</div>
+            <input class="gjzInput" placeholder="请输入关键词" v-model="keywords"/>
+            <div @click="getInfo2"
+                 style="width: 4vw;height: 1.5vw;background-color: #0AB7FD;float: right;font-size: 1vw;line-height:1.5vw; height: 1.5vw;text-align: center;border-radius:2vw;margin-top: 0.25vw;cursor: pointer;">
+              查询
+            </div>
+          </div>
+
+          <div class="jiedianInfo">
+            <img src="../assets/img2/dingwei.png"
+                 style="width: 2vw;object-fit: contain;position: absolute;z-index: 2000;top: 1vw;right: 2vw;cursor: pointer;"
+                 @click="opending">
+
+
+            <div class="selectListInfo" v-if="isDing"
+                 style="z-index: 2000;
+                 max-height:35vw;
+                 border-radius: 1vw;
+                 background-color: rgba(76,100,233,0.71) ;position:absolute;right: 4vw;top: 2vw;font-size: 0.9vw;overflow-y: scroll;margin-left: 1vw;margin-right: 1vw;">
+              <div
+                  style="font-size: 1.1vw;color: #ffffff;width:130%;background-color: rgba(32,51,162,0.71) ;
+              text-align: center;height: 2.2vw;line-height: 2vw;margin-left: -13%;padding-top: 2%;letter-spacing: 3px;">
+                图谱快速定位
+              </div>
+              <el-tree :data="this.data1" :props="defaultProps1" class="flow-tree" accordion @node-click="goCenter"
+                       style="padding: 1.2vw 0;" node-key="id" ref="tree" highlight-current>
+                <template #default="{ node }">
+                  <span class="custom-tree-node" style="display: flex;flex-direction: row;" v-if="node.level == 1">
+                    <div class="lineInfo" style="width: 0.2vw;height: 0.8vw; box-shadow: #FFFFFF 0px 0px 4px 1px;
+                                        background: rgb(255, 255, 255);display: inline-block;
+                                        margin-top: 0.6vw;margin-right: 0.5vw;"></div>
+                    <div class="label" style="font-size: 1.1vw;cursor: pointer;line-height: 2vw;">{{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 2" style="border-top: none !important;">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label"
+                         style="font-size: 1vw;cursor: pointer;margin-left: 0.5vw;color: rgb(236,236,236);line-height: 2vw;">
+                      {{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 3">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label"
+                         style="font-size: 0.9vw;cursor: pointer;margin-left: 1vw;color: rgb(236,236,236);line-height: 2vw;">
+                      {{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 4">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label"
+                         style="font-size: 0.8vw;cursor: pointer;margin-left: 1.5vw;color: rgb(236,236,236);line-height: 2vw;">
+                      {{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 5">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label"
+                         style="font-size: 0.7vw;cursor: pointer;margin-left: 2vw;color: rgb(236,236,236);line-height: 2vw;">
+                      {{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 6">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label" style="font-size: 0.6vw;cursor: pointer;margin-left: 2.5vw;line-height: 2vw;">{{
+                        node.label }}</div>
+                  </span>
+                </template>
+              </el-tree>
+            </div>
+          </div>
+        </div>
+        <div class="graphHeader1" v-if="zhedie == 1">
+          <div class="gjz">
+            <div class="gjzText">关键词:</div>
+
+            <input class="gjzInput" placeholder="请输入关键词" v-model="keywords" @blur="getInfo2"/>
+            <div @click="getInfo2"
+                 style="width: 4vw;height: 1.5vw;background-color: #0AB7FD;float: right;font-size: 1vw;line-height:1.5vw; height: 1.5vw;text-align: center;border-radius:2vw;margin-top: 0.25vw;cursor: pointer;">
+              查询
+            </div>
+          </div>
+          <div class="jiedianInfo">
+            <img src="../assets/img2/dingwei.png"
+                 style="width: 2vw;object-fit: contain;position: absolute;z-index: 2000;top: 1vw;right: 2vw;cursor: pointer;"
+                 @click="opending">
+
+
+            <div class="selectListInfo" v-if="isDing"
+                 style="z-index: 2000;
+                 max-height:35vw;
+                 border-radius: 1vw;
+                 background-color: rgba(76,100,233,0.71) ;position:absolute;right: 4vw;top: 2vw;font-size: 0.9vw;overflow-y: scroll;margin-left: 1vw;margin-right: 1vw;">
+              <div
+                  style="font-size: 1.1vw;color: #ffffff;width:130%;background-color: rgba(32,51,162,0.71) ;
+              text-align: center;height: 2.2vw;line-height: 2vw;margin-left: -13%;padding-top: 2%;letter-spacing: 3px;">
+                图谱快速定位
+              </div>
+              <el-tree :data="this.data1" :props="defaultProps" class="flow-tree" accordion @node-click="goCenter"
+                       style="padding: 1.2vw 0;" node-key="id" ref="tree" highlight-current>
+                <template #default="{ node }">
+                  <span class="custom-tree-node" style="display: flex;flex-direction: row;" v-if="node.level == 1">
+                    <div class="lineInfo" style="width: 0.2vw;height: 0.8vw; box-shadow: #FFFFFF 0px 0px 4px 1px;
+                                        background: rgb(255, 255, 255);display: inline-block;
+                                        margin-top: 0.6vw;margin-right: 0.5vw;"></div>
+                    <div class="label" style="font-size: 1.1vw;cursor: pointer;line-height: 2vw;">{{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 2" style="border-top: none !important;">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label"
+                         style="font-size: 1vw;cursor: pointer;margin-left: 0.5vw;color: rgb(236,236,236);line-height: 2vw;">
+                      {{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 3">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label"
+                         style="font-size: 0.9vw;cursor: pointer;margin-left: 1vw;color: rgb(236,236,236);line-height: 2vw;">
+                      {{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 4">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label"
+                         style="font-size: 0.8vw;cursor: pointer;margin-left: 1.5vw;color: rgb(236,236,236);line-height: 2vw;">
+                      {{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 5">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label"
+                         style="font-size: 0.7vw;cursor: pointer;margin-left: 2vw;color: rgb(236,236,236);line-height: 2vw;">
+                      {{ node.label }}</div>
+                  </span>
+                  <span class="custom-tree-node" v-if="node.level == 6">
+                    <div class="lineInfo"
+                         style="width: 0.15vw;height: 2vw; rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;">
+                    </div>
+                    <div class="label" style="font-size: 0.6vw;cursor: pointer;margin-left: 2.5vw;line-height: 2vw;">{{
+                        node.label
+                      }}</div>
+                  </span>
+                </template>
+              </el-tree>
+            </div>
+
+          </div>
+
+
+        </div>
+        <div class="graphContent">
+          <div :class="full ? 'full-screen' : 'show-box'">
+
+            <!-- 节点右键菜单 -->
+            <div style="width: 100%;height: 100%;">
+              <div class="gContainer">
+                <RelationGraph ref="graphRef" :options="graphOptions" :nodes="graphData.nodes" :links="graphData.links"
+                               :on-node-click="onNodeClick"
+                               :on-line-click="onLineClick"
+                               :on-node-expand="onNodeExpand"
+                               :on-node-collapse="onNodeCollapse"
+                />
+              </div>
+            </div>
+
+
+          </div>
+
+
+        </div>
+
+
+      </div>
+
+      <div style="background-color: transparent;height: 20%;width: 40%;position: absolute;top: 1vw;right: 0;"></div>
+
+      <el-drawer v-model="drawer" title="相关文档" direction="rtl" size="30%" :modal="false" :wrapperClosable="false"
+                 :append-to-body="true" @opened="onDrawerOpened" @closed="onDrawerClosed"
+                 style="position: fixed;right: 0;background-color: rgba(76, 100, 233, 0.71);top: 5.35vw;height: 91%;color: #fff;font-size: 2vw;">
+        <el-table :data="tableData" style="border: none;width: 100%;margin-left: 3.25%;height:530px; background: transparent;overflow: auto"
+                  v-if="drawer" :row-class-name="tableRowClassName">
+          <el-table-column label="文档名称" width="400">
+            <template #default="scope">
+              <div @click="goArticle(scope.row)" style="cursor: pointer; padding: 8px;">
+                {{ scope.row.name }}
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-drawer>
+    </div>
+
+
+  </div>
+
+
+</template>
+
+<script>
+import RelationGraph, {RGJsonData, RGOptions} from 'relation-graph-vue3';
+import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
+import {config} from '@/assets/defaultConfig.js'
+import {demoData} from '@/assets/demo2.js'
+import HeaderInfo from "@/components/UseAll/headerInfo.vue";
+import leftInfo from "@/components/UseAll/leftInfo.vue";
+import {getAllTitle, getDocInfo, getTitleByGroup} from "@/api/api/doc";
+import {getDomainGraphTest, getheightLight} from "@/api/api/graph";
+import {Picture} from "@element-plus/icons-vue";
+import {selectAticleByRelation} from '@/api/api/article'
+import {height} from "fontfaceobserver";
+
+export default {
+  components: {
+    leftInfo,
+    HeaderInfo,
+    Picture,
+    RelationGraph
+  },
+  data() {
+    return {
+
+      direction: "rtl",
+      // visGraph实例对象
+      visGraph: null,
+      visLayout: null,//布局对象
+      layoutLoopName: null,//布局循环对象
+      // visGraph可视化交互配置
+      config,
+      //示例数据
+      demoData,
+      circleBgImage: require('@/assets/images/circle.png'),//节点背景图片
+      // visGraph创建节点和连线数据集
+      graphData: {
+        nodes: [],
+        links: []
+      },
+      nodeList: [],
+      linkList: [],
+      graphLegend: [
+        //{type:'图例一',color:'rgb(233,120,120)',show:true}
+      ],//图例数组，根据数据的节点类型生成
+
+      properShow: false,//属性展示配置
+      tipLayer: { //提示层配置
+        show: false, //是否显示提示层
+        header: '提示信息', // 提示表头
+        data: [] //提示内部的数据
+      },
+      graphOptions: {
+        // 启用展开/折叠按钮
+        defaultExpandHolderPosition: 'right', // 按钮显示位置：'left' 或 'right'
+        defaultExpandHolderSize: 16,
+        defaultExpandHolderColor: '#fff',
+        defaultExpandHolderBorder: '1px solid #00d7e0',
+
+        allowSwitchLineShape: true,
+        allowSwitchJunctionPoint: true,
+        defaultLineColor: '#2E74B5',
+        defaultNodeColor: '#2E74B5',
+        defaultNodeBorderWidth: 0,
+        defaultNodeBorderColor: '#2E74B5',
+        defaultNodeFontColor: '#ffffff',
+        defaultNodeShape: 0,
+        defaultNodeWidth: 40,
+        defaultNodeHeight: 40,
+        toolBarDirection: 'h',
+        toolBarPositionH: 'center',
+        toolBarPositionV: 'bottom',
+        defaultLineShape: 1,
+        defaultJunctionPoint: 'border',
+        // lineUseTextPath: true,
+        defaultLineTextOffset_x: 2,
+        defaultLineTextOffset_y: -3,
+        layout: {
+          layoutName: 'tree',
+          from: 'top',
+          min_per_width: 350,
+          max_per_width: 370,
+          min_per_height: 10,
+          max_per_height: 20
+        }
+      },
+      currentNode: {}, // 选中的节点对象
+      attrbutes: [],//选中节点或连线的属性列表
+      currentLink: {},// 选中的连线对象
+      //节点详细信息弹框
+      showNodeInfoDialog: false,
+      //关系连线信息弹层
+      showLinkInfoDialog: false,
+      //属性节点详细弹层控制开关
+      showProperNodeInfo: false,
+      properNode: {},//属性节点
+      currentLayoutType: 'frDirect',//当前布局类型，用于区分是否可以拖动
+      loading: true,
+
+
+      data: {
+        nodes: [],
+        links: []
+      },
+      data1: [],
+      defaultProps: {
+        children: 'level2',
+        label: 'docTitle',
+        level: 'titleLevel',
+        docLevel: 'docLevel',
+      },
+      names: ['0级', '一级', '二级', '三级', '四级', '五级', '六级'],
+      labels: ['0', '1', '2', '3', '4', '5', '6'],
+      linkTypes: ['info', 'type', 'locate', 'export'],
+      zhedie: 0,
+      isLoginShow: false,
+      jiedianType: 0,
+      totalNum: 0,
+      selectInfo: "",
+      viewerData: {
+        total: 25,
+        limit: 10,
+        skip: 0,
+        links: {
+          previous: undefined,
+          next: function () {
+          },
+        },
+      },
+      gg: [],
+      graphNodes: [],
+      graphEdges: [],
+      currentNodeId: '', //当期选中节点id
+      vertexData: '', //节点详细数据
+      full: false, //是否全屏,
+      simpleData: {},
+      keywords: '',
+      userNameInfo: '',
+      docList: [],
+      drawer: false,
+      tableData: [],
+      isDing: false,
+
+      // graphData:[],
+      nodes: [],
+      links: [],
+      heightLight:{},
+
+      width: 2000,
+      height: 1000,
+      svg: null,
+
+      rootId: 0,
+      defaultProps1: {
+        children: 'children',
+        label: 'docTitle',
+        level: 'titleLevel',
+        docLevel: 'docLevel',
+      },
+      heightlightTable:[]
+
+    }
+  },
+  methods: {
+    onNodeCollapse(node, e) {
+      this.$refs.graphRef.refresh();
+    },
+
+    // 节点展开时触发
+    onNodeExpand(node, e) {
+      this.$refs.graphRef.refresh();
+    },
+    handleNodeClick(node) {
+      console.log(node);
+    },
+    tableRowClassName({row, rowIndex}) {
+      for(var i=0;i<this.heightlightTable.length;i++){
+        if(this.heightlightTable[i]==row.id){
+          return 'success-row';
+        }
+      }
+      return '';
+    },
+    loadPng() {
+      this.visGraph.saveImage();
+    },
+    // 获取所有的知识节点信息
+    async drawGraphData() {
+      this.graphData = this.demoData;
+      if (this.visGraph === null) {
+        this.createGraph();
+        this.visGraph.drawData(this.graphData);
+        this.visGraph.incremaNodesCodinate(this.graphData.nodes);
+        this.reLayout();
+      } else {
+        this.createGraph();
+        this.visGraph.drawData(this.graphData);
+        this.visGraph.incremaNodesCodinate(this.graphData.nodes);
+        this.reLayout();
+      }
+      this.loading = false;
+    },
+    // 创建全局绘图客户端对象
+    createGraph() {
+      this.visGraph = new VisGraph(document.getElementById('graph-panel'), this.config)
+    },
+    async goCenter(node) {
+      try {
+        const docId = node.id.toString();
+        const graph = this.$refs.graphRef?.getInstance();
+
+        if (!graph) return;
+
+        graph.getNodes().forEach(n => {
+          n.selected = false;
+        });
+
+        const targetNode = graph.getNodes().find(n =>
+            n.data?.docId === docId || n.id === docId
+        );
+        await graph.focusNodeById(targetNode.id);
+        this.$nextTick(() => {
+          this.$refs.tree?.setCurrentKey(node.id);
+        });
+      } catch (error) {
+        console.error('定位失败:', error);
+      }
+    },
+
+    // 执行布局算法
+    reLayout(alpha) {
+      var that = this;
+      if (alpha == null) {
+        that.visLayout = null;
+        that.visLayout = new LayoutFactory(this.visGraph.getGraphData()).createLayout('fastFR');
+        that.visLayout.resetConfig({
+          label: {
+            show: true
+          },
+          friction: 0.8,
+          linkDistance: 400,
+          linkStrength: 0.2,
+          charge: -1000,
+          gravity: 0.01,
+          noverlap: true,
+          size: [that.visGraph.stage.width, that.visGraph.stage.height]
+        });
+      } else {
+        that.visLayout.alpha += (alpha > 1 ? 0.2 : alpha); //继续运动
+      }
+
+      runLayout();//开始继续动画执行
+
+      //通过动画帧控制控制布局算法的执行，有动画效果
+      function runLayout() {
+        cancelAnimationFrame(that.layoutLoopName);//停止动画控制
+        that.visLayout.runLayout();  //运行布局算法
+        that.visGraph.refresh();
+        if (that.visLayout.alpha > 0.05) {
+          that.layoutLoopName = requestAnimationFrame(runLayout);
+        } else {
+          if (that.visGraph.currentNode && that.visGraph.currentNode.isDragging) {
+            that.visLayout.alpha = 0.1; //继续运动
+            that.layoutLoopName = requestAnimationFrame(runLayout);
+          } else {
+            that.visLayout.alpha = 0; //停止运动
+            cancelAnimationFrame(that.layoutLoopName);
+          }
+        }
+      }
+
+    },
+
+    getAll() {
+      getTitleByGroup().then((res) => {
+        let data = res
+        data.g01["level"] = 1
+        data.g01["docTitle"] = data.g01["name"]
+        data.g02["level"] = 1
+        data.g02["docTitle"] = data.g02["name"]
+        data.g03["level"] = 1
+        data.g03["docTitle"] = data.g03["name"]
+        data.g04["level"] = 1
+        data.g04["docTitle"] = data.g04["name"]
+        data.g11["level"] = 1
+        data.g11["docTitle"] = data.g11["name"]
+        data.g12["level"] = 1
+        data.g12["docTitle"] = data.g12["name"]
+        data.g13["level"] = 1
+        data.g13["docTitle"] = data.g13["name"]
+        data.g14["level"] = 1
+        data.g14["docTitle"] = data.g14["name"]
+        data.g15["level"] = 1
+        data.g15["docTitle"] = data.g15["name"]
+        data.g21["level"] = 1
+        data.g21["docTitle"] = data.g21["name"]
+        data.g22["level"] = 1
+        data.g22["docTitle"] = data.g22["name"]
+        this.data1 = []
+        this.data1.push(data.g01)
+        this.data1.push(data.g02)
+        this.data1.push(data.g03)
+        this.data1.push(data.g04)
+        this.data1.push(data.g11)
+        this.data1.push(data.g12)
+        this.data1.push(data.g13)
+        this.data1.push(data.g14)
+        this.data1.push(data.g15)
+        this.data1.push(data.g21)
+        this.data1.push(data.g22)
+      })
+    },
+    opending() {
+      if (this.isDing == true) {
+        this.isDing = !this.isDing;
+      } else {
+        this.isDing = !this.isDing;
+      }
+
+    },
+    isZhe(zhedie) {
+      this.zhedie = zhedie;
+    },
+    getInfoInit() {
+      if (localStorage.getItem("userName") != null && localStorage.getItem("userName") != "") {
+        this.userNameInfo = localStorage.getItem("userName");
+      } else {
+        this.$router.push('/');
+      }
+    },
+    logout() {
+      const expirationDate = new Date();
+      expirationDate.setDate(expirationDate.getDate() - 1);
+      document.cookie = 'satoken=; expires=${expirationDate.toUTCString()}';
+      localStorage.clear();
+      this.$router.push('/');
+    },
+    goChat() {
+      this.$router.push('/intelligentQA');
+    },
+    goIndex() {
+      this.$router.push('/');
+    },
+    goZc() {
+      this.$router.push('/battlefield');
+    },
+    golist() {
+      this.$router.push('/list');
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    getInfo() {
+      if (this.keywords) {
+        let params = {nodename: this.keywords};
+        getDomainGraphTest(params).then((res) => {
+          this.zhengl(res.data);
+        })
+      } else {
+        getDomainGraphTest({}).then((res) => {
+          this.zhengl(res.data);
+        })
+      }
+    },
+    getInfo2() {
+      if(this.keywords!=""){
+        getheightLight(this.keywords).then((res)=>{
+          this.heightLight = {
+            "nodes": res.nodes.hits,
+            "links":res.links.hits,
+            "nodes1":res.nodes1
+          }
+          console.log(this.heightLight)
+          getDomainGraphTest({}).then((r) => {
+            this.zhengl(r.data);
+          })
+        })
+      }else{
+        getDomainGraphTest({}).then((res) => {
+          this.zhengl(res.data);
+        })
+      }
+
+
+    },
+    getNodeClass(name) {
+      // console.log(name)
+      // 确保 this.heightLight.nodes 存在且是一个数组
+      const nodes = this.heightLight.nodes;
+      const nodes1 = this.heightLight.nodes1;
+      if (nodes==undefined){
+        return "";
+      }
+      if (nodes.length === 0&&nodes1.length === 0) {
+        return "";
+      }
+      // 将传入的 id 转为字符串
+      const targetId = String(name).trim();
+
+      // 遍历 nodes 数组，检查是否有元素的 id（转字符串）与 targetId 相等
+      let found = nodes.some(node => {
+        const nodeId = node.sourceAsMap.abstracts
+        return nodeId === targetId;
+      });
+      let found2 = nodes1.some(node => {
+        const nodeId = node.docTitle
+        return nodeId === targetId;
+      });
+
+      found = found || found2
+
+      // 找到了返回 'nodeclass'，否则返回 ''
+      return found ? 'nodeclass' : '';
+    },
+    getLinesClass(mergedDbIds) {
+      console.log("44444444444444")
+      const lines = this.heightLight.links;
+      if (lines == undefined){
+        return ""
+      }
+      // 将传入的 id 转为字符串
+      // const targetId = Number(String(id).trim());
+      // console.log(targetId)
+      const list=Array.from(mergedDbIds)
+      const numberArray = list.map(item => parseInt(item, 10));
+      const found = lines.some(line => {
+        const data= line.sourceAsMap.data
+        const array=JSON.parse(data)
+        console.log(array)
+        if(array.length>0){
+          return numberArray.includes(array[0]);
+        }else {
+          console.log("没有")
+          return false
+        }
+
+      });
+
+      // 找到了返回 'nodeclass'，否则返回 ''
+      return found ? 'lineclass' : '';
+    },
+    async onLineClick(lineObject, linkObject, event) {
+      console.log(linkObject)
+      console.log(lineObject)
+      const from = linkObject.fromNode.data.docId
+      const to = linkObject.toNode.data.docId
+      const data = {
+        sourceId: from,
+        targetId: to,
+      }
+      this.heightlightTable=[]
+      console.log(lineObject.id)
+      let mergedDbIds=lineObject.data
+      const numberArray = (Array.from(mergedDbIds)).map(item => parseInt(item, 10));
+      const lines = this.heightLight.links;
+      console.log(this.heightLight.links)
+
+      if(this.heightLight.links!=undefined){
+        lines.some(line => {
+          const data= line.sourceAsMap.data
+          const array=JSON.parse(data)
+          if(array.length>0){
+            if(numberArray.includes(array[0])){
+              this.heightlightTable.push(Number(line.sourceAsMap.DBid))
+            }
+          }
+        });
+      }
+
+
+      console.log(this.heightlightTable)
+      // const id=linkObject.relations[0].id
+      this.tableData = await selectAticleByRelation(data);
+      // this.heightLight.links
+      // line.sourceAsMap.data
+      this.drawer = true;
+    },
+    //整理图谱数据
+    //整理图谱数据
+    //整理图谱数据
+    zhengl(data) {
+      console.log(data)
+      const nodes = []
+      const links = []
+      const nodeList = data.nodes;
+      const lineList = data.links;
+
+      // 创建节点映射表，方便查找
+      const nodeMap = {};
+      nodeList.forEach(node => {
+        nodeMap[node.id] = node;
+      });
+
+      // 找出有连接的节点
+      const connectedNodeIds = new Set();
+      lineList.forEach(line => {
+        connectedNodeIds.add(line.source);
+        connectedNodeIds.add(line.target);
+      });
+
+      // 按层级和组别分组孤立节点
+      const isolatedNodesByGroupAndLevel = {};
+      nodeList.forEach(node => {
+        if (!connectedNodeIds.has(node.id)) {
+          const groupId = node.groupId || '1';
+          const level = node.docLeve || '0';
+          if (!isolatedNodesByGroupAndLevel[groupId]) {
+            isolatedNodesByGroupAndLevel[groupId] = {};
+          }
+          if (!isolatedNodesByGroupAndLevel[groupId][level]) {
+            isolatedNodesByGroupAndLevel[groupId][level] = [];
+          }
+          isolatedNodesByGroupAndLevel[groupId][level].push(node);
+        }
+      });
+
+      // 存储每个层级每个组别的节点位置信息
+      const levelGroupPositions = {};
+
+      // 处理有连接的节点
+      if (nodeList != undefined) {
+        // 按组别分组处理有连接的节点
+        const groupedNodes = {
+          '0': {levels: {}},
+          '1': {levels: {}},
+          '2': {levels: {}}
+        };
+
+        // 按组别和层级分类节点
+        nodeList.forEach(node => {
+          if (connectedNodeIds.has(node.id)) {
+            const groupId = node.groupId || '1';
+            const level = node.docLeve || '1';
+            if (!groupedNodes[groupId]) groupedNodes[groupId] = {levels: {}};
+            if (!groupedNodes[groupId].levels[level]) groupedNodes[groupId].levels[level] = [];
+            groupedNodes[groupId].levels[level].push(node);
+          }
+        });
+
+        // 定义组别的位置偏移
+        const groupOffsets = {
+          '0': -10200, // 左侧区域
+          '1': 0,     // 中间区域
+          '2': 10200   // 右侧区域
+        };
+
+        // 处理每个组别的节点
+        Object.keys(groupedNodes).forEach(groupId => {
+          const groupData = groupedNodes[groupId];
+          const groupOffsetX = groupOffsets[groupId] || 0;
+
+          // 处理每个层级的节点
+          Object.keys(groupData.levels).sort().forEach(level => {
+            const levelNodes = groupData.levels[level].sort((a, b) => a.docId - b.docId);
+            const levelNum = parseInt(level);
+
+            // 计算该层级节点的起始X位置（考虑组别偏移）
+            const startX = groupOffsetX - (levelNodes.length * 200) / 2;
+
+            // 初始化该层级该组别的位置信息
+            const levelGroupKey = `${levelNum}_${groupId}`;
+            if (!levelGroupPositions[levelGroupKey]) {
+              levelGroupPositions[levelGroupKey] = {
+                minX: startX,
+                maxX: startX + levelNodes.length * 200,
+                leftAvailableX: startX - 200, // 左侧可用位置
+                rightAvailableX: startX  + 200, // 右侧可用位置
+                hasConnectedNodes: levelNodes.length > 0
+              };
+            }
+
+            levelNodes.forEach((node, index) => {
+              if (levelNum === 0) this.rootId = node.id;
+
+              // 根据层级设置节点样式
+              let color, fontSize, fontColor;
+              switch (levelNum) {
+                case 0:
+                  color = 'rgb(227,203,0)';
+                  fontSize = '70px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 1:
+                  color = 'rgb(47,47,230)';
+                  fontSize = '68px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 2:
+                  color = 'rgb(255,138,0)';
+                  fontSize = '50px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 3:
+                  color = 'rgb(30,255,0)';
+                  fontSize = '40px';
+                  fontColor = 'rgb(0,0,0)';
+                  break;
+                case 4:
+                  color = 'rgb(248,143,248)';
+                  fontSize = '32px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 5:
+                  color = 'rgb(65,154,255)';
+                  fontSize = '30px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 6:
+                  color = 'rgb(0,228,255)';
+                  fontSize = '28px';
+                  fontColor = 'rgb(0,0,0)';
+                  break;
+                default:
+                  color = 'rgb(200,200,200)';
+                  fontSize = '24px';
+                  fontColor = 'rgb(255,255,255)';
+              }
+
+              const x = startX + index * 200;
+              // 修改点：当 groupId 为 '1' 时，Y 值反向
+              const y = groupId === '1' ? levelNum * -1400 : levelNum * 1400;
+
+              // 添加节点
+              nodes.push({
+                id: node.id,
+                text: node.name,
+                data: {
+                  docId: node.docId,
+                  group: node.groupId
+                },
+                level: levelNum,
+                x: x,
+                y: y,
+                fixed: true,
+                width: 150,
+                height: 150,
+                color: color,
+                font: `normal ${fontSize} Arial`,
+                fontColor: fontColor,
+                expandHolderPosition: 'right',
+                expanded: true,
+                styleClass:this.getNodeClass(node.name),
+              });
+            });
+          });
+        });
+      }
+
+      // 处理孤立节点 - 放置在有连线节点的两侧
+      Object.keys(isolatedNodesByGroupAndLevel).sort().forEach(groupId => {
+        const groupData = isolatedNodesByGroupAndLevel[groupId];
+        const groupOffsetX = groupId === '0' ? -10200 : groupId === '1' ? 0 : 10200;
+
+        Object.keys(groupData).sort().forEach(level => {
+          const levelNodes = groupData[level];
+          const levelNum = parseInt(level);
+
+          // 确定孤立节点的Y坐标（与有连接节点保持一致）
+          const y = groupId === '1' ? levelNum * -1400 : levelNum * 1400;
+
+          // 获取或创建该层级该组别的位置信息
+          const levelGroupKey = `${levelNum}_${groupId}`;
+
+          // 先按docId排序孤立节点
+          const sortedIsolatedNodes = levelNodes.sort((a, b) => a.docId - b.docId);
+
+          if (!levelGroupPositions[levelGroupKey] || !levelGroupPositions[levelGroupKey].hasConnectedNodes) {
+            // 如果没有有连接的节点，居中展示孤立节点
+            const totalWidth = sortedIsolatedNodes.length * 200;
+            const startX = groupOffsetX - totalWidth / 2;
+
+            // 放置孤立节点（居中排列）
+            sortedIsolatedNodes.forEach((node, index) => {
+              // 根据层级设置节点样式
+              let color, fontSize, fontColor;
+              switch (levelNum) {
+                case 0:
+                  color = 'rgb(227,203,0)';
+                  fontSize = '70px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 1:
+                  color = 'rgb(47,47,230)';
+                  fontSize = '68px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 2:
+                  color = 'rgb(255,138,0)';
+                  fontSize = '50px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 3:
+                  color = 'rgb(30,255,0)';
+                  fontSize = '40px';
+                  fontColor = 'rgb(0,0,0)';
+                  break;
+                case 4:
+                  color = 'rgb(248,143,248)';
+                  fontSize = '32px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 5:
+                  color = 'rgb(65,154,255)';
+                  fontSize = '30px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 6:
+                  color = 'rgb(0,228,255)';
+                  fontSize = '28px';
+                  fontColor = 'rgb(0,0,0)';
+                  break;
+                default:
+                  color = 'rgb(200,200,200)';
+                  fontSize = '24px';
+                  fontColor = 'rgb(255,255,255)';
+              }
+
+              const x = startX + index * 200;
+
+              nodes.push({
+                id: node.id,
+                text: node.name,
+                data: {
+                  docId: node.docId,
+                  group: node.groupId
+                },
+                x: x,
+                y: y,
+                fixed: true,
+                width: 150,
+                height: 150,
+                color: color,
+                font: `normal ${fontSize} Arial`,
+                fontColor: fontColor,
+                styleClass:this.getNodeClass(node.name),
+              });
+            });
+          } else {
+            // 如果有有连接的节点，在两侧放置孤立节点
+            const positionInfo = levelGroupPositions[levelGroupKey];
+
+            // 将孤立节点分成两组：左侧和右侧
+            const leftNodes = [];
+            const rightNodes = [];
+
+            sortedIsolatedNodes.forEach((node, index) => {
+              if (index % 2 === 0) {
+                leftNodes.push(node); // 偶数索引放左侧
+              } else {
+                rightNodes.push(node); // 奇数索引放右侧
+              }
+            });
+
+            // 放置左侧孤立节点（从右往左排列）
+            let currentLeftX = positionInfo.leftAvailableX;
+            for (let i = leftNodes.length - 1; i >= 0; i--) {
+              const node = leftNodes[i];
+
+              // 根据层级设置节点样式
+              let color, fontSize, fontColor;
+              switch (levelNum) {
+                case 0:
+                  color = 'rgb(227,203,0)';
+                  fontSize = '70px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 1:
+                  color = 'rgb(47,47,230)';
+                  fontSize = '68px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 2:
+                  color = 'rgb(255,138,0)';
+                  fontSize = '50px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 3:
+                  color = 'rgb(30,255,0)';
+                  fontSize = '40px';
+                  fontColor = 'rgb(0,0,0)';
+                  break;
+                case 4:
+                  color = 'rgb(248,143,248)';
+                  fontSize = '32px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 5:
+                  color = 'rgb(65,154,255)';
+                  fontSize = '30px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 6:
+                  color = 'rgb(0,228,255)';
+                  fontSize = '28px';
+                  fontColor = 'rgb(0,0,0)';
+                  break;
+                default:
+                  color = 'rgb(200,200,200)';
+                  fontSize = '24px';
+                  fontColor = 'rgb(255,255,255)';
+              }
+
+              nodes.push({
+                id: node.id,
+                text: node.name,
+                data: {
+                  docId: node.docId,
+                  group: node.groupId
+                },
+                x: currentLeftX,
+                y: y,
+                fixed: true,
+                width: 150,
+                height: 150,
+                color: color,
+                font: `normal ${fontSize} Arial`,
+                fontColor: fontColor,
+                styleClass:this.getNodeClass(node.name),
+              });
+
+              currentLeftX -= 200;
+            }
+
+            // 放置右侧孤立节点（从左往右排列）
+            let currentRightX = positionInfo.rightAvailableX;
+            rightNodes.forEach(node => {
+              // 根据层级设置节点样式
+              let color, fontSize, fontColor;
+              switch (levelNum) {
+                case 0:
+                  color = 'rgb(227,203,0)';
+                  fontSize = '70px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 1:
+                  color = 'rgb(47,47,230)';
+                  fontSize = '68px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 2:
+                  color = 'rgb(255,138,0)';
+                  fontSize = '50px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 3:
+                  color = 'rgb(30,255,0)';
+                  fontSize = '40px';
+                  fontColor = 'rgb(0,0,0)';
+                  break;
+                case 4:
+                  color = 'rgb(248,143,248)';
+                  fontSize = '32px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 5:
+                  color = 'rgb(65,154,255)';
+                  fontSize = '30px';
+                  fontColor = 'rgb(255,255,255)';
+                  break;
+                case 6:
+                  color = 'rgb(0,228,255)';
+                  fontSize = '28px';
+                  fontColor = 'rgb(0,0,0)';
+                  break;
+                default:
+                  color = 'rgb(200,200,200)';
+                  fontSize = '24px';
+                  fontColor = 'rgb(255,255,255)';
+              }
+
+              nodes.push({
+                id: node.id,
+                text: node.name,
+                data: {
+                  docId: node.docId,
+                  group: node.groupId
+                },
+                x: currentRightX,
+                y: y,
+                fixed: true,
+                width: 150,
+                height: 150,
+                color: color,
+                font: `normal ${fontSize} Arial`,
+                fontColor: fontColor,
+                styleClass:this.getNodeClass(node.name),
+              });
+
+              currentRightX += 200;
+            });
+          }
+        });
+      });
+
+      // 处理连线
+      lineList.forEach(line => {
+        let style=""
+        let num=1
+        if(this.getLinesClass(line.mergedDbIds)!=""){
+          style=this.getLinesClass(line.DbId)
+          num=10
+        }
+        links.push({
+          id:line.DbId,
+          from: line.source,
+          to: line.target,
+          text: line.relate || '相关',
+          color:
+              line.num <= 5 ? 'rgb(255, 255, 255)' : // 白色
+                  line.num <= 10 ? 'rgb(0, 255, 0)' : // 绿色
+                      line.num <= 15 ? 'rgb(255, 255, 0)' : // 黄色
+                          'rgb(178,246,255)', // 红色（包含line.num <= 20和超过20的情况）
+          lineWidth:num,
+          lineShape: 1,
+          styleClass:style,
+          data:line.mergedDbIds
+        })
+      });
+
+      this.graphData = {
+        'rootId': this.rootId,
+        nodes,
+        links
+      };
+
+      // 确保图表更新
+      this.$nextTick(() => {
+        if (this.$refs.graphRef) {
+          this.$refs.graphRef.setOptions(this.graphOptions);
+          this.$refs.graphRef.setJsonData(this.graphData);
+          this.$refs.graphRef.refresh();
+        }
+      });
+    },
+    goArticle(row) {
+      this.$router.push({
+        path: '/articleInfo',
+        query: {
+          id: row.id
+        }
+      })
+    },
+    onNodeClick(nodeObject, $event) {
+      console.log(nodeObject)
+      const data = {
+        'id': nodeObject.data.docId,
+        'docTitle': nodeObject.text,
+      }
+      getDocInfo(data).then((res) => {
+        localStorage.setItem("docUrl", res.data.docUrl)
+        this.$router.push({
+          name: 'docInfo',
+          query: {
+            title: res.data.docTitle,
+            level: res.data.docLevel,
+            keyword: res.data.docTitle,
+            docId: res.data.id
+          }
+        })
+      });
+    }
+  },
+  created() {
+    var that = this;
+
+    //节点的点击事件
+    this.config.node.onClick = function (event, node) {
+      var data = {
+        'id': node.properties.docId,
+        'docTitle': node.properties.name,
+      }
+      getDocInfo(data).then((res) => {
+        localStorage.setItem("docUrl", res.data.docUrl)
+        that.$router.push({
+          name: 'docInfo',
+          query: {
+            title: res.data.docTitle,
+            level: res.data.docLevel,
+            keyword: res.data.docTitle,
+            docId: res.data.id
+          }
+        })
+      });
+
+      node.color = 'rgb(' + node.fillColor + ')';
+      that.currentNode = node;
+      that.tipLayer.header = node.label || '';
+      that.tipLayer.data = node.properties.attributes || []; //节点属性列表
+      that.attrbutes = node.properties.attributes || []; //节点属性列表
+    };
+  },
+  mounted() {
+    //初始化加载绘图
+    this.getInfo();
+    this.getAll();
+  }
+}
+</script>
+
+<style>
+/*****页面主要布局样式定义******/
+.graph-nav {
+  height: 80px;
+  background-color: #fff;
+  line-height: 26px;
+  font-size: 13px;
+  padding: 10px 20px;
+}
+
+.graph-area {
+  position: relative;
+  height: calc(100% - 105px);
+  padding: 0;
+  background-color: #fafafa;
+  border: 1px solid #ddd;
+}
+
+/******工具栏*******/
+.toolbar {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  background: #efefef;
+}
+
+.toolbar .toolbar-item {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  font-size: 18px;
+  text-align: center;
+  color: #888;
+  border-bottom: 1px solid #ddd;
+  cursor: pointer;
+}
+
+.toolbar .toolbar-item:hover {
+  color: deepskyblue;
+}
+
+/*******图例区域样式定义*****/
+.legend-wrap {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+}
+
+.legend-wrap > .legend-item {
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+}
+
+.legend-item > .item-dot {
+  float: left;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border-radius: 10px;
+  background-color: rgb(210, 210, 210);
+  cursor: pointer;
+}
+
+.legend-item > .item-label {
+  display: inline-block;
+  float: left;
+  margin-left: 5px;
+  max-width: 120px;
+}
+
+/*****节点弹出鼠标提示层样式*****/
+.tip-wrap {
+  position: absolute;
+  width: 350px;
+  height: auto;
+  min-height: 150px;
+  background: #fff;
+  box-shadow: 0px 0px 10px #999;
+  font-size: 14px;
+}
+
+.tip-wrap > .tip-header {
+  height: 30px;
+  line-height: 30px;
+  padding: 5px 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.tip-wrap > .tip-body {
+  padding: 0 10px 10px;
+}
+
+/*****右键菜单样式******/
+.right-menu-layer {
+  position: absolute;
+  width: 100px;
+  z-index: 5;
+  display: none;
+  border-radius: 3px;
+  overflow: hidden;
+  background: #fafafa;
+  border: 1px solid #e1e2e2;
+  box-shadow: 0 0 5px #ddd;
+  padding: 5px 3px;
+}
+
+.right-menu-layer button {
+  display: block;
+  height: 24px;
+  line-height: 24px;
+  background: transparent;
+  border: none;
+  color: #444;
+  text-align: center;
+  cursor: pointer;
+}
+
+.right-menu-layer button > i {
+  margin-right: 5px;
+}
+
+.right-menu-layer button:hover {
+  color: slateblue;
+}
+
+.right-menu-layer button:focus {
+  outline: 0;
+}
+
+.box-card {
+  box-shadow: 0 0 3px #d4c8c8;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.gContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: 100%;
+  height: 45vw;
+}
+
+.about {
+  width: 100%;
+  height: 100%;
+  /*background-image: url("../assets/img1/graphback.jpg");*/
+  /* 背景图垂直、水平均居中 */
+  background-position: center center;
+  /* 背景图不平铺 */
+  background-repeat: no-repeat;
+  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
+  background-attachment: fixed;
+  /* 让背景图基于容器大小伸缩 */
+  background-size: cover;
+  /* 设置背景颜色，背景图加载过程中会显示背景色 */
+}
+
+
+.rightBox {
+  width: 100%;
+  height: 95%;
+  top: 5.35vw;
+  position: absolute;
+  background-color: #2d3562;
+}
+
+
+.graphGround {
+  width: 100%;
+  height: 100%;
+  /*background-color: #0AB7FD;*/
+  border-radius: 2vw;
+}
+
+.graphHeader {
+  /*float: left;*/
+  width: 95%;
+  height: 5%;
+  background-color: transparent;
+  margin-left: 6vw;
+  margin-top: 0.5vw;
+  /*border-radius: 2vw 2vw 0 0;*/
+}
+
+.graphHeader1 {
+  /*float: left;*/
+  width: 90%;
+  height: 5%;
+  background-color: transparent;
+  margin-left: 1.5vw;
+  margin-top: 0.5vw;
+  /*border-radius: 2vw 2vw 0 0;*/
+}
+
+.graphContent {
+  width: 100%;
+  height: 94%;
+  background: transparent;
+  /* border: 1px solid #04538e; */
+  position: relative;
+  margin-top: 0%;
+}
+
+
+.gjz {
+  width: 25%;
+  height: 2vw;
+  float: left;
+  margin-right: 20%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+}
+
+.gjzText {
+  float: left;
+  font-size: 1vw;
+  height: 100%;
+  line-height: 2vw;
+  color: #ffffff;
+  font-family: '微软雅黑';
+  letter-spacing: 0.1vw;
+}
+
+.gjzInput {
+  width: 60%;
+  height: 1.6vw;
+  border-radius: 2vw;
+  border: #ffffff 1px solid;
+  background: transparent;
+  text-indent: 4px;
+  color: #ffffff;
+  font-size: 0.9vw;
+  margin: 0.2vw 0;
+}
+
+.jiedianInfo {
+  width: 100%;
+  height: 100%;
+  margin-left: 50%;
+}
+
+.jiedian {
+  width: 15vw;
+  height: 100%;
+  float: left;
+  margin-left: 26vw;
+  margin-right: 1vw;
+}
+
+.jiedian1 {
+  width: 15vw;
+  height: 100%;
+  float: left;
+  margin-left: 32vw;
+  margin-right: 1vw;
+}
+
+.jiedianText {
+  float: left;
+  font-size: 1.2vw;
+  color: #ffffff;
+  font-family: '微软雅黑';
+  margin-right: 8%;
+  letter-spacing: 0.1vw;
+}
+
+select {
+  color: #ffffff;
+}
+
+.jiedianList {
+  width: 8vw;
+  height: 75%;
+  margin-top: 1.5%;
+  /*box-shadow: rgba(92, 228, 229, 0.31) 1px 1px 8px 0px;*/
+  border-radius: 2vw;
+  border: #ffffff 1px solid;
+  background: transparent;
+  outline: none;
+  /* 鼠标移上，变小手 */
+  cursor: pointer;
+  float: left;
+  /* 清除默认的箭头样式 */
+}
+
+.jiedianNum {
+  height: 1.5vw;
+  width: 30%;
+  margin-left: 1%;
+  border: none;
+  border-radius: 2vw;
+  background: rgba(255, 255, 255, 0.75);
+  text-indent: 2px;
+}
+
+/*.jiansuo {*/
+/*  width: 7%;*/
+/*  height: 80%;*/
+/*  line-height: 1.8vw;*/
+/*  background-color: transparent;*/
+/*  float: right;*/
+/*  margin-top: 0.2%;*/
+/*  margin-right: 1%;*/
+/*  border-radius: 2vw;*/
+/*  text-align: center;*/
+/*  color: #ffffff;*/
+/*  border: #ffffff 1px solid;*/
+/*  font-size: 1vw;*/
+/*}*/
+
+.custom-menu {
+  position: absolute;
+  padding: 5px 0px;
+  background-color: rgba(84, 92, 100, 0.8);
+  top: 100px;
+  left: 100px;
+  border-radius: 5px;
+  z-index: 1000;
+  display: none;
+}
+
+.icon1 {
+  margin-left: 45%;;
+  cursor: pointer;
+  color: #ffffff;
+  width: 2vw;
+  height: 2vw;
+  font-size: 2vw;
+}
+
+.icon2 {
+  margin-left: 45%;
+  cursor: pointer;
+  font-size: 2px;
+  color: #ffffff;
+  width: 2vw;
+  height: 2vw;
+  font-size: 2vw;
+}
+
+.custom-menu div {
+  padding: 5px 0px;
+  text-align: center;
+}
+
+.custom-menu div span {
+  font-family: '微软雅黑';
+  font-size: 12px;
+  color: rgb(255, 255, 255);
+}
+
+.custom-menu div span:hover {
+  cursor: pointer;
+  color: orange;
+}
+
+.loadPng {
+  position: absolute;
+  right: 3vw;
+  top: 1vw;
+  z-index: 9999;
+  cursor: pointer;
+  font-size: 1.5vw;
+  color: #ffffff;
+}
+
+loadPng:hover {
+  color: #ffffff;
+}
+
+.screenPng {
+  position: absolute;
+  right: 1vw;
+  top: 2vh;
+  z-index: 9999;
+  cursor: pointer;
+  font-size: 1.5vw;
+  color: #ffffff;
+}
+
+.screenPng:hover {
+  color: #ffffff;
+}
+
+.show-box {
+  position: relative;
+  background: transparent;
+  /*border: 1px solid #04538e;*/
+  border-radius: 5px;
+  height: calc(100%);
+  /*border-radius: 0 0 2vw 2vw;*/
+}
+
+.full-screen {
+  position: fixed;
+  background: #2d3562;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.other {
+  width: 2vw;
+  height: 3vw;
+  z-index: 100;
+  bottom: 4vw;
+  position: absolute;
+  /*background-color: red;*/
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}
+
+.rel-node-checked {
+  transition: background-color .2s ease, outline .2s ease, color .2s ease, -webkit-box-shadow .2s ease;
+  box-shadow: 0 0 20px 15px #C0FFF9FF !important;
+}
+
+
+.label {
+  font-size: 1vw;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  width: 12vw;
+  height: 2vw;
+}
+
+input::-webkit-input-placeholder {
+  color: #FFFFFF;
+}
+</style>
+<style>
+.rel-node-checked {
+  transition: background-color .2s ease, outline .2s ease, color .2s ease, -webkit-box-shadow .2s ease;
+  box-shadow: 0 0 20px 15px #C0FFF9FF !important;
+}
+
+.el-tree-node__content:hover {
+  background: rgba(255, 255, 255, 0.21);
+  font-weight: 550;
+
+  .lineInfo {
+    background: #0012ff !important;
+  }
+}
+
+.el-tree--highlight-current {
+  .el-tree-node.is-current > .el-tree-node__content {
+    background-color: rgba(255, 255, 255, 0.21);
+    color: #fff;
+
+    .lineInfo {
+      background: #0012ff !important;
+    }
+  }
+}
+
+.el-tree-node__content {
+  color: #ffffff;
+  height: 2vw !important;
+  padding-left: 2vw !important;
+  padding-right: 2vw !important;
+
+}
+
+.el-tree-node {
+  cursor: pointer;
+}
+
+.el-tree-node__children {
+  overflow: visible !important
+}
+
+.el-tree-node__expand-icon {
+  position: absolute !important;
+  right: 10% !important;
+  width: 1vw;
+  height: 1vw;
+}
+
+.el-tree-node is-expanded is-focusable .el-tree-node__label {
+  padding-left: 15px !important;
+}
+
+.el-tree-node__expand-icon {
+  margin-top: 5px;
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(90deg);
+}
+
+.el-tree-node__expand-icon.is-leaf {
+  display: none;
+}
+
+/* 三角图标 展开 */
+.el-tree-node__expand-icon.expanded {
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
+.label {
+  font-size: 1vw;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  width: 12vw;
+  height: 2vw;
+}
+
+input::-webkit-input-placeholder {
+  color: #FFFFFF;
+}
+
+/* .gContainer :deep(.relation-graph) :deep(.rel-map) {
+  background-color: #2d3562 !important;
+} */
+
+.gContainer .relation-graph .rel-map,
+.relation-graph .rel-map,
+.rel-map {
+  background-color: #2d3562 !important;
+}
+
+.el-drawer__title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  color: #fff;
+}
+
+.el-drawer__close-btn {
+  width: 1.5vw;
+}
+
+.el-drawer__header {
+  display: flex;
+}
+
+.el-table__header {
+  width: 100%;
+}
+
+.el-table:not(.el-table--border) .el-table__cell {
+  /* border-right: none; */
+  border: none;
+}
+
+tr {
+  margin-bottom: 2vh;
+}
+
+.el-tree--highlight-current {
+  background: no-repeat;
+}
+.el-icon{
+  color: #FFFFFF !important;
+  font-size: 1vw;
+}
+
+.lineclass{
+  filter: drop-shadow(0 0 10px white) !important; /* 添加白色光晕 */
+}
+.nodeclass {
+  /* 白色 3px 边框 */
+  stroke: white !important;
+  stroke-width: 3 !important;
+  stroke-opacity: 1 !important;
+
+  /* 多层光晕：内层青色，外层白色 */
+  filter:
+      drop-shadow(0 0 20px rgba(0, 255, 255, 1)) /* 内层青色光晕 */
+      drop-shadow(0 0 20px rgba(0, 255, 255, 1)) /* 内层青色光晕 */
+      drop-shadow(0 0 20px rgba(0, 255, 255, 1)) /* 内层青色光晕 */
+      drop-shadow(0 0 50px rgba(255, 255, 255, 1)); /* 外层白色光晕 */
+
+  /* 确保边框在填充之上 */
+  paint-order: stroke fill !important;
+}
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: red;
+  font-weight: 600;
+  color:white;
+}
+.el-table .cell{
+  width:400px;
+}
+.el-table__inner-wrapper{
+  height: auto;
+  background-color: #fff;
+}
+.el-table__empty-block{
+  background-color: #fff;
+  width: 400px!important;
+}
+</style>
\ No newline at end of file