重庆测试

src/router/index.js

 /*
  * @Author: your name
  * @Date: 2021-06-22 15:23:03
- * @LastEditTime: 2021-09-29 10:04:31
+ * @LastEditTime: 2021-11-17 18:10:30
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\router\index.js
@@ -12,6 +12,7 @@ import rightContentRoutes from './modules/rightContent.js';
 import shRightContentRoutes from './modules/shceContent';
 import hnRightContentRoutes from './modules/hnContent';
 import cqRightContentRoutes from './modules/cqContent';
+import ceshiContentRoutes from './modules/ceshi';
 import indexRoutes from "./modules/index";
 // import store from "../store";
 // import { getToken } from "../utils/auth";
@@ -41,6 +42,7 @@ const mainRouters = [
   shRightContentRoutes,
   hnRightContentRoutes,
   cqRightContentRoutes,
+  ceshiContentRoutes,
   {
     path: "*",
     name: "error",

src/router/modules/ceshi.js

+/*
+ * @Author: your name
+ * @Date: 2021-07-20 14:42:16
+ * @LastEditTime: 2021-11-17 18:12:42
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\router\modules\rightContent.js
+ */
+import Main from '@/views/ceshi/cqceshi.vue'
+
+export default {
+  path: "/cqceshi",
+  name: "cqceshi",
+  meta: {
+    title: "重庆测试",
+  },
+  component: Main
+}
\ No newline at end of file

src/setting.js

 /*
  * @Author: your name
  * @Date: 2021-06-20 11:48:40
- * @LastEditTime: 2021-10-22 14:32:13
+ * @LastEditTime: 2021-11-14 10:59:07
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \control_platform\src\settings.js

src/utils/gxt.js

@@ -5722,6 +5722,7 @@ if (false) {(function () {
       // }
     },
     onRGLineClick(lineData, e) {
+
       if (this.onLineClick) {
         this.onLineClick(lineData, e);
       }

src/views/ceshi/cqceshi.vue

+<template>
+  <div>
+    <div
+      ref="myPage"
+      style="height: calc(100vh)"
+      @click="isShowNodeMenuPanel = false"
+    >
+      <SeeksRelationGraph
+        ref="seeksRelationGraph"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick"
+      >
+        <div
+          slot="node"
+          slot-scope="{ node }"
+          @contextmenu.prevent.stop="showNodeMenus(node, $event)"
+        >
+          <div
+            style="
+              height: 64px;
+              line-height: 64px;
+              border-radius: 32px;
+              cursor: pointer;
+            "
+          >
+            <i style="font-size: 30px" :class="node.data.myicon" />
+          </div>
+          <div
+            style="
+              color: forestgreen;
+              font-size: 16px;
+              position: absolute;
+              width: 160px;
+              height: 25px;
+              line-height: 25px;
+              margin-top: 5px;
+              margin-left: -48px;
+              text-align: center;
+              background-color: rgba(66, 187, 66, 0.2);
+            "
+          >
+            {{ node.text }}
+          </div>
+        </div>
+      </SeeksRelationGraph>
+    </div>
+    <div
+      v-show="isShowNodeMenuPanel"
+      :style="{
+        left: nodeMenuPanelPosition.x + 'px',
+        top: nodeMenuPanelPosition.y + 'px',
+      }"
+      style="
+        z-index: 999;
+        padding: 10px;
+        background-color: #ffffff;
+        border: #eeeeee solid 1px;
+        box-shadow: 0px 0px 8px #cccccc;
+        position: absolute;
+      "
+    >
+      <div
+        style="
+          line-height: 25px;
+          padding-left: 10px;
+          color: #888888;
+          font-size: 12px;
+        "
+      >
+        对这个节点进行操作：
+      </div>
+      <div class="c-node-menu-item" @click.stop="btn1()">复制账号</div>
+      <div class="c-node-menu-item" @click.stop="btn2()">标注</div>
+      <div class="c-node-menu-item" @click.stop="btn3()">展开</div>
+      <div class="c-node-menu-item" @click.stop="btn4()">收缩</div>
+    </div>
+    <div class="table1" v-if="table1">
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        style="width: 100%"
+        class="table1_1"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column label="服务名称" width="120">
+          <template slot-scope="scope">{{ scope.row.date }}</template>
+        </el-table-column>
+        <el-table-column prop="name" label="服务状态" width="120">
+        </el-table-column>
+      </el-table>
+      <div>
+        <el-button type="primary" @click="primary">确认</el-button>
+        <el-button
+          type="success"
+          @click="
+            table1 = false;
+            table2 = false;
+          "
+          >取消</el-button
+        >
+      </div>
+    </div>
+    <div class="table2" v-if="table2">
+      <el-table
+        ref="multipleTable"
+        :data="tableData2"
+        tooltip-effect="dark"
+        style="width: 100%"
+        class="table1_2"
+      >
+        <el-table-column type="index" width="50"> </el-table-column>
+        <el-table-column prop="name" label="名称" width="120"></el-table-column>
+        <el-table-column prop="date" label="值" width="120"></el-table-column>
+        <el-table-column prop="name" label="操作" width="120">
+          <template slot-scope="scope">
+            <div
+              style="color: red"
+              v-if="scope.row.shang"
+              @click="
+                () => {
+                  scope.row.shang = !scope.row.shang;
+                  shangtu(scope.row);
+                }
+              "
+            >
+              上图
+            </div>
+            <div
+              style="color: green"
+              v-else
+              @click="
+                () => {
+                  scope.row.shang = !scope.row.shang;
+                  quxiaoshangtu(scope.row);
+                }
+              "
+            >
+              取消上图
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="table3" v-if="table3">
+      <el-table
+        ref="multipleTable"
+        :data="tableData3"
+        tooltip-effect="dark"
+        style="width: 100%"
+        class="table1_3"
+      >
+        <el-table-column type="index" width="50"> </el-table-column>
+        <el-table-column
+          prop="leixing"
+          label="类型"
+          width="120"
+        ></el-table-column>
+        <el-table-column prop="zhi" label="值" width="120"></el-table-column>
+        <el-table-column prop="guanxi" label="关系" width="120">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+const graphData = [
+  { id: "1", name: "节点-1", data: { myicon: "el-icon-setting" } },
+  { id: "2", name: "节点-2", data: { myicon: "el-icon-setting" } },
+  { id: "3", name: "节点-3", data: { myicon: "el-icon-setting" } },
+  { id: "4", name: "节点-4", data: { myicon: "el-icon-setting" } },
+  { id: "6", name: "节点-6", data: { myicon: "el-icon-setting" } },
+  { id: "7", name: "节点-7", data: { myicon: "el-icon-setting" } },
+];
+import SeeksRelationGraph from "@/utils/gxt.js";
+
+export default {
+  name: "Demo",
+  components: { SeeksRelationGraph },
+  data() {
+    return {
+      isShowCodePanel: false,
+      isShowNodeMenuPanel: false,
+      nodeMenuPanelPosition: { x: 0, y: 0 },
+      graphOptions: {
+        allowSwitchLineShape: true,
+        allowSwitchJunctionPoint: true,
+        defaultJunctionPoint: "border",
+        // 这里可以参考"Graph 图谱"中的参数进行设置
+        layouts: [
+          {
+            label: "中心图",
+            layoutName: "center",
+            layoutClassName: "seeks-layout-center",
+            distance_coefficient: "0.8",
+          },
+        ],
+      },
+      table1: false,
+      table2: false,
+      table3: false,
+      nodeArr: [
+        // 注意：在节点配置信息中，你的自定义属性需要像下面这样放到data标签中，否则数据会丢失
+        { id: "1", name: "节点-1", data: { myicon: "el-icon-setting" } },
+        { id: "2", name: "节点-2", data: { myicon: "el-icon-setting" } },
+        { id: "3", name: "节点-3", data: { myicon: "el-icon-setting" } },
+        { id: "4", name: "节点-4", data: { myicon: "el-icon-setting" } },
+        { id: "6", name: "节点-6", data: { myicon: "el-icon-setting" } },
+        { id: "7", name: "节点-7", data: { myicon: "el-icon-setting" } },
+      ],
+      linkArr: [
+        { from: "2", to: "1", text: "投资" },
+        { from: "2", to: "3", text: "高管" },
+        { from: "2", to: "4", text: "高管" },
+        { from: "2", to: "6", text: "高管" },
+        { from: "2", to: "7", text: "高管" },
+      ],
+      tableData: [
+        {
+          date: "多维串并",
+          name: "运行",
+        },
+        {
+          date: "现场前科",
+          name: "运行",
+        },
+        {
+          date: "现场前科2",
+          name: "未运行",
+        },
+        {
+          date: "多维研判",
+          name: "未运行",
+        },
+      ],
+      tableData2: [
+        {
+          date: "24",
+          name: "节点-1",
+        },
+        {
+          date: "51",
+          name: "节点-3",
+        },
+        {
+          date: "123",
+          name: "节点-4",
+        },
+        {
+          date: "42",
+          name: "节点-6",
+        },
+        {
+          date: "42",
+          name: "节点-7",
+        },
+      ],
+      tableData3: [
+        {
+          leixing: "类型1",
+          zhi: "值1",
+          guanxi: "关系1",
+        },
+        {
+          leixing: "类型2",
+          zhi: "值2",
+          guanxi: "关系2",
+        },
+        {
+          leixing: "类型3",
+          zhi: "值3",
+          guanxi: "关系3",
+        },
+        {
+          leixing: "类型4",
+          zhi: "值4",
+          guanxi: "关系4",
+        },
+        {
+          leixing: "类型5",
+          zhi: "值5",
+          guanxi: "关系5",
+        },
+      ],
+      selectArr: [],
+      currentNode: {},
+      cunData: [],
+    };
+  },
+  mounted() {
+    this.showSeeksGraph();
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.selectArr = val;
+    },
+    showSeeksGraph(query) {
+      var __graph_json_data = {
+        rootId: "2",
+        nodes: [
+          // 注意：在节点配置信息中，你的自定义属性需要像下面这样放到data标签中，否则数据会丢失
+          { id: "2", name: "节点-2", data: { myicon: "el-icon-setting" } },
+        ],
+        links: [],
+      };
+      this.$refs.seeksRelationGraph.setJsonData(
+        __graph_json_data,
+        (seeksRGGraph) => {
+          // 这些写上当图谱初始化完成后需要执行的代码
+        }
+      );
+    },
+    onNodeClick(nodeObject, $event) {
+      this.currentNode = nodeObject;
+      if (nodeObject.id == "2") {
+        this.table1 = true;
+      } else {
+        this.$message.error("该节点没有数据");
+      }
+      console.log("onNodeClick:", nodeObject);
+    },
+    onLineClick(lineObject, $event) {
+      this.table3 = true;
+      console.log("onLineClick:", lineObject);
+    },
+    quxiaoshangtu(row) {
+      let self = this;
+      this.$refs.seeksRelationGraph.removeNodeById(row.id);
+      self.cunData = this.$refs.seeksRelationGraph.getNodes().map((i) => i.id);
+      console.log(1111111, self.cunData);
+    },
+    showNodeMenus(nodeObject, $event) {
+      this.currentNode = nodeObject;
+      var _base_position = this.$refs.myPage.getBoundingClientRect();
+      console.log("showNodeMenus:", $event, _base_position);
+      this.isShowNodeMenuPanel = true;
+      this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x;
+      this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y;
+    },
+    btn1() {
+      console.log(111111, this.currentNode);
+      const _input = document.createElement("input");
+      // 设置内容
+      _input.value = this.currentNode.text;
+      // 添加临时实例
+      document.body.appendChild(_input);
+      // 选择实例内容
+      _input.select();
+      // 执行复制
+      document.execCommand("Copy");
+      document.body.removeChild(_input);
+      alert("复制成功");
+      // 删除临时实例
+      this.isShowNodeMenuPanel = false;
+    },
+    btn2() {
+      let id = this.currentNode.id;
+      let obj = this.$refs.seeksRelationGraph.getNodeById(id);
+      obj.color = "red";
+      console.log(this.$refs.seeksRelationGraph.getNodeById(id));
+      this.isShowNodeMenuPanel = false;
+    },
+    btn3() {
+      let self = this;
+      let id = this.currentNode.id;
+      var node = this.$refs.seeksRelationGraph.getNodeById(id);
+      self.isShowNodeMenuPanel = false;
+      if (!node.data.shou) return;
+      node.data.shou = false;
+      let linkarr = [];
+      let nodearr = [];
+      this.getGraphData().forEach((i) => {
+        if (i.id != "2" && this.cunData.includes(i.id)) {
+          nodearr.push(i);
+        }
+      });
+      nodearr.forEach((i) => {
+        let obj = this.linkArr.find((j) => j.from == "2" && j.to == i.id);
+        linkarr.push(obj);
+      });
+      this.$refs.seeksRelationGraph.appendJsonData(
+        {
+          nodes: nodearr,
+          links: linkarr,
+        },
+        (seeksRGGraph) => {}
+      );
+    },
+    btn4(node) {
+      let id = this.currentNode.id;
+      let dianNode = this.$refs.seeksRelationGraph.getNodeById(
+        this.currentNode.id
+      );
+      dianNode.data.shou = true;
+      if (!node) {
+        var node = this.$refs.seeksRelationGraph.getNodeById(id);
+      }
+      node.lot.childs.forEach((i) => {
+        if (i.lot.childs.length > 0) {
+          this.btn4(i);
+        }
+        this.$refs.seeksRelationGraph.removeNodeById(i.id);
+      });
+      this.isShowNodeMenuPanel = false;
+    },
+    getGraphData() {
+      return JSON.parse(JSON.stringify(graphData));
+    },
+    shangtu(row) {
+      let self = this;
+      let nodearr = [
+        { id: row.id, name: row.name, data: { myicon: "el-icon-setting" } },
+      ];
+      let linkarr = [{ from: this.currentNode.id, to: row.id, text: "投资" }];
+      this.$refs.seeksRelationGraph.appendJsonData(
+        {
+          nodes: nodearr,
+          links: linkarr,
+        },
+        (seeksRGGraph) => {
+          self.cunData = seeksRGGraph.getNodes().map((i) => i.id);
+          console.log(1111111, self.cunData);
+        }
+      );
+    },
+    refreence() {
+      this.tableData2 = this.tableData2.map((i) => {
+        if (this.cunData.includes(i.id)) {
+          i.shang = false;
+        } else {
+          i.shang = true;
+        }
+        return i;
+      });
+    },
+    primary() {
+      if (this.selectArr.length <= 0) {
+        this.$message.error("请选择数据后进行操作");
+        return;
+      }
+      const data = [
+        {
+          date: "24",
+          name: "节点-1",
+          id: "1",
+          shang: true,
+        },
+        {
+          date: "51",
+          name: "节点-3",
+          id: "3",
+          shang: true,
+        },
+        {
+          date: "123",
+          name: "节点-4",
+          id: "4",
+          shang: true,
+        },
+        {
+          date: "42",
+          name: "节点-6",
+          id: "6",
+          shang: true,
+        },
+        {
+          date: "42",
+          name: "节点-7",
+          id: "7",
+          shang: true,
+        },
+      ];
+      let arr = data.slice(0, this.selectArr.length + 1);
+      this.tableData2 = arr;
+      this.refreence();
+      this.table2 = true;
+    },
+  },
+  watch: {
+    cunData: {
+      deep: true,
+      handler(val) {
+        this.refreence();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+</style>
+
+<style lang="scss" scoped>
+.c-node-menu-item {
+  line-height: 30px;
+  padding-left: 10px;
+  cursor: pointer;
+  color: #444444;
+  font-size: 14px;
+  border-top: #efefef solid 1px;
+}
+.c-node-menu-item:hover {
+  background-color: rgba(66, 187, 66, 0.2);
+}
+.table1 {
+  width: 400px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 998;
+}
+.table2 {
+  width: 500px;
+  position: absolute;
+  top: 500px;
+  right: 0;
+  z-index: 998;
+}
+.table3 {
+  width: 500px;
+  position: absolute;
+  bottom: 0;
+  left: 50px;
+  z-index: 998;
+}
+.table1_1 {
+}
+</style>