<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">
            <!--            <div class="picList" style="height:10%;width:10%;margin-top: 0.1vw;margin-left: 41%;">-->
            <!--              <div @click="loadPng" class="icon1" title="导出图片">-->
            <!--                <el-icon>-->
            <!--                  <Picture />-->
            <!--                </el-icon>-->
            <!--              </div>-->

            <!--            </div>-->
            <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="graphHeader1" v-if="zhedie == 1">
          <div class="gjz">
            <div class="gjzText">关键字:</div>

            <input class="gjzInput" placeholder="请输入关键字" v-model="keywords" @blur="getInfo2" />

          </div>
          <div class="jiedianInfo">
            <!--            <div class="picList" style="float: left;height:100%;width:10%;margin-top: 0.2vw;margin-left: 51.5%;">-->
            <!--              <div @click="loadPng" class="icon2" title="导出图片">-->
            <!--                <i>-->
            <!--                  <el-icon>-->
            <!--                    <Picture />-->
            <!--                  </el-icon>-->
            <!--                </i>-->
            <!--              </div>-->

            <!--            </div>-->
            <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">
<!--                {{graphData.nodes}}-->
<!--                <RelationGraph ref="graphRef" :options="graphOptions" :nodes="graphData.nodes" :links="graphData.links"-->
<!--                               :on-node-click="onNodeClick" :on-line-click="onLineClick" />-->
                <RelationGraph ref="graphRef" :options="testoptions" :on-node-click="onNodeClick" :on-line-click="onLineClick"/>
              </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">
        <el-table :data="tableData" style="width: 95%;margin-left: 2.5%;height: 97%; background: transparent;" v-if="drawer">
          <el-table-column prop="name" label="文档名称" style="padding-bottom: 2vh;" />
        </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 } from "@/api/api/doc";
import {getDomainGraphTest, getpoinAll, getpoinByName} from "@/api/api/graph";
import { Picture } from "@element-plus/icons-vue";
import { selectAticleByRelation } from '@/api/api/article'

export default {
  components: {
    leftInfo,
    HeaderInfo,
    Picture,
    RelationGraph
  },
  data() {
    return {
      getpoinName :"模糊综合评价方法",
      testoptions: {
        layout: {
          layoutName: 'force',
          animate: false,           // 必须关闭动画
          maxIterations: 50,        // 仍控制在合理范围
          fit: true,
          padding: 80,              // 增加画布边距，防止节点贴边
          // --- 核心：放大两倍间距 ---
          idealEdgeLength: 200,     // 🔥 从 100 → 200（直接翻倍）
          nodeRepulsion: 150000,    // 🔥 大幅提升斥力，防止压缩
          gravity: 0.05,            // 🔽 极低引力，避免向中心聚集
          stiffness: 200,           // 保持边“硬”，防止拉伸变形
          damping: 0.85,            // 高阻尼抑制震荡
          distanceMin: 30,
          distanceMax: 600          // 允许更大空间
        }
      },
      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}
      ],//图例数组，根据数据的节点类型生成
      knowlegeInfo: {//图谱信息，需要服务端查询后赋值
        name: '公司网络图谱',
        tag: '公司',
        desc: '某某公司图谱信息',
        nodeNum: 7,
        relationNum: 9,
        permission: '私有'
      },
      properShow: false,//属性展示配置
      tipLayer: { //提示层配置
        show: false, //是否显示提示层
        header: '提示信息', // 提示表头
        data: [] //提示内部的数据
      },
      graphOptions: {
        debug: false,
        lineUseTextPath: true,
        layout: {
          layoutName: 'tree',
          from: 'top',
          levelDistance: 200,      // 层与层之间的垂直间距
          nodeDistance: 150,       // 同一层级的水平间距
          min_per_width: 120,      // 最小水平间距（固定值）
          max_per_width: 120,      // 最大水平间距（固定值，强制均匀分布）
          min_per_height: 300,     // 最小垂直间距（固定值）
          max_per_height: 300,     // 最大垂直间距（固定值，强制对齐）
          disableDrag: true,       // 禁止拖动节点（可选）
          align: 'center',         // 居中排列
          fixed: false,            // 允许自动布局调整
        },
        defaultlineWidth: 2,
        defaultLineShape: 1,
        defaultNodeShape: 0,
        defaultLineFontSize: 80,
        defaultNodeBorderWidth: 0,
        defaultLineColor: 'rgb(255,255,255)',
        defaultNodeColor: 'rgba(0, 206, 209, 1)',
        lineLengths: 100,
        defaultNodeFontSize: '20px', // 全局默认字体大小
        toolBarPositionH: 'right',
        toolBarPositionV: 'top',
        disableNodeClickEffect: true,
      },
      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: [],

      width: 2000,
      height: 1000,
      svg: null,

    }
  },
  methods: {
    handleNodeClick(node) {
      console.log(node);
    },
    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() {
      getAllTitle().then((res) => {
        this.data1 = res;
      })
    },
    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);
          console.log(res)
          console.log(this.graphData.nodes)
          console.log(this.graphData.links)
        })
      }
    },
    getInfo2() {
      // 1. 清空当前数据
      this.data = undefined;

      // 2. 准备查询参数（有关键词时用关键词查询，否则查询全部）
      const params = this.keywords ? { nodename: this.keywords } : {};

      // 3. 调用API获取数据
      getDomainGraphTest(params)
          .then((res) => {
            // 4. 处理并渲染新数据
            this.zhengl(res.data);
          })
          .catch((error) => {
            console.error("数据加载失败:", error);
            // 可以在这里添加错误处理，比如显示提示信息
          });
    },

    // },
    async onLineClick(lineObject, linkObject, event) {
      const from = linkObject.fromNode.data.docId
      const to = linkObject.toNode.data.docId
      const data = {
        sourceId: from,
        targetId: to,
      }
      this.tableData = await selectAticleByRelation(data);
      this.drawer = true;
      console.log(this.tableData)
      console.log(this.drawer)
    },
    //整理图谱数据
    zhengl(data) {
      const nodes = []
      const links = []
      const nodeList = data.nodes;
      const lineList = data.links;

      this.graphData = { nodes, links };

    },
    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
          }
        })
      });
    },
    getColor(type){
      let res = "rgb(227,203,0)"
      if (type=="author"){
        res = "rgb(255,203,0)"
      }
      if (type=="agency"){
        res = "rgb(0,255,0)"
      }
      if (type=="keyword"){
        res = "rgb(0,0,255)"
      }
      return res
    },
  },
  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 || []; //节点属性列表
      // that.showTipLayer(event);
    };

  },
  mounted() {
    //初始化加载绘图
    // this.getInfo();
    // this.getAll();
    // this.drawGraphData()

    getpoinByName(this.getpoinName).then((res) => {
      let nodes = []
      let links = []
      for (let i = 0;i<res.nodes.length;i++){
        if (res.nodes[i].type=="keyword" && res.nodes[i].text!=this.getpoinName){
          continue
        }
        let t_data = {
          id:res.nodes[i].id,
          text:res.nodes[i].text,
          color:this.getColor(res.nodes[i].type),
        }
        nodes.push(t_data)
      }
      for (let i = 0;i<res.links.length;i++){
        let t_data = {
          from:res.links[i].from,
          to:res.links[i].to,
          text:res.links[i].text,
        }
        links.push(t_data)
      }



      var data  = {
        nodes:nodes,
        links:links
      }

      this.$refs.graphRef.setJsonData(data);
    })

    // getpoinAll().then((res) => {
    //   for (let i = 0;i<res.nodes.length;i++){
    //     let t_data = {
    //       id:res.nodes[i].id,
    //       text:res.nodes[i].text,
    //       color:this.getColor(res.nodes[i].type),
    //     }
    //     res.nodes[i] = t_data
    //   }
    //   for (let i = 0;i<res.links.length;i++){
    //     let t_data = {
    //       from:res.links[i].from,
    //       to:res.links[i].to,
    //       text:res.links[i].text,
    //     }
    //     res.links[i] = t_data
    //   }
    //
    //
    //
    //   var data  = {
    //     nodes:res.nodes,
    //     links:res.links
    //   }
    //
    //   this.$refs.graphRef.setJsonData(data);
    // })



  },
}
</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%;
}

td{
  border: 1px solid #000;
}

tr {
  margin-bottom: 2vh;
}
.el-tree--highlight-current {
  background: no-repeat;
}
</style>
