新增关联页面

2023-07-13 10:12:31 +08:00
parent ee0013fc18
commit 8cd092c4fd
13 changed files with 324 additions and 157 deletions
--- a/web/src/components/graph/GraphModel.vue
+++ b/web/src/components/graph/GraphModel.vue
@@ -258,7 +258,7 @@ var _ = require('lodash');
 var nodeProps = {
  id: 'vid',
  label: 'properties.label',
-  name: 'properties.tagName',
+  name: 'vid',
  labelName: 'properties.label'
 };
 var edgeProps = {
@@ -873,6 +873,7 @@ function resolveGraphData(data) {
    Reflect.ownKeys(nodeProps).forEach(key => {
      node[key] = _.get(node, nodeProps[key], '');
    });
+    console.log(node);
  });
  data.relations.forEach(edge => {
    Reflect.ownKeys(edgeProps).forEach(key => {
--- a/web/src/components/graph/GraphSpace.vue
+++ b/web/src/components/graph/GraphSpace.vue
@@ -5,22 +5,22 @@
        <div class="graph-info-child">
          <div class="info-item" style="margin-bottom: 15px">
            <div class="info-item-title">
-              <label>{{comment}}</label>
+              <label>{{ comment }}</label>
              <!--<div class="add-attribute-box" style="float: right" @click="showAddGraphSpaceDialog({Name:''})">新建-->
              <!--</div>-->
              <!--<div class="add-attribute-box" style="float: right;margin-right: 10px" @click="removeGraphSpace()">-->
-                <!--删除-->
+              <!--删除-->
              <!--</div>-->
            </div>
            <div class="info-item-content">
              <!--<el-select v-model="space" filterable placeholder="请选择" @change="handleSpaceChange">-->
-                <!--<el-option v-for="item in spaceList"-->
-                           <!--:key="item.name"-->
-                           <!--:label="item.comment"-->
-                           <!--:value="item.name">-->
-                <!--</el-option>-->
+              <!--<el-option v-for="item in spaceList"-->
+              <!--:key="item.name"-->
+              <!--:label="item.comment"-->
+              <!--:value="item.name">-->
+              <!--</el-option>-->
              <!--</el-select>-->
-              <div style="margin-top: 20px;font-size: 14px;color: #606266">本体名称：{{ontologyName}}</div>
+              <div style="margin-top: 20px;font-size: 14px;color: #606266">本体名称：{{ ontologyName }}</div>
            </div>
          </div>
          <el-tabs v-model="activeTab" class="el-tabs-item">
@@ -36,7 +36,7 @@
                  <template slot-scope="scope">
                    <div :style="scope.row.Name === activeSelectType ? 'color: #409EFF':''">
                      <label>{{ scope.row.comment }}</label>
-                      <label>({{ scope.row.count }})</label>
+                      <!--                      <label>({{ scope.row.count }})</label>-->
                    </div>
                  </template>
                </el-table-column>
@@ -55,7 +55,7 @@
                  <template slot-scope="scope">
                    <div :style="scope.row.Name === activeSelectType ? 'color: #409EFF':''">
                      <label>{{ scope.row.comment }}</label>
-                      <label>({{ scope.row.count }})</label>
+                      <!--                      <label>({{ scope.row.count }})</label>-->
                    </div>
                  </template>
                </el-table-column>
@@ -79,6 +79,9 @@
          <div v-show="tabModifyCmdType === 'nodeDetail'">
            <node-detail ref="nodeDetail"></node-detail>
          </div>
+          <div v-show="tabModifyCmdType === 'edgeDetail'">
+            <edge-detail ref="edgeDetail"></edge-detail>
+          </div>
          <div v-show="tabModifyCmdType === 'edgeAdd'">
            <edge-add ref="edgeAdd"></edge-add>
          </div>
@@ -92,7 +95,8 @@
        <div v-if="showFlag" style="display: inline-block;margin-right: 50px">
          <el-input placeholder="请输入关键词" v-model="keyword" style="width: 550px">
            <el-select v-model="searchTag" slot="prepend" placeholder="请选择概念" style="width: 150px" filterable>
-              <el-option :label="item.comment" :value="item.Name" v-for="(item,index) in tagList" v-if="index != 0"></el-option>
+              <el-option :label="item.comment" :value="item.Name" v-for="(item,index) in tagList"
+                         v-if="index != 0"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="searchBtn()"></el-button>
          </el-input>
@@ -111,8 +115,8 @@
          <i title="返回"></i>
        </div>
        <!--<div title="按住shift点选两节点可新增关系" :class="['icon icon-arrow', createEdgeModelFlag ? 'active' : '']"-->
-             <!--@click="changeCreateEdgeModel">-->
-          <!--<i title="按住shift点选两节点可新增关系"></i>-->
+        <!--@click="changeCreateEdgeModel">-->
+        <!--<i title="按住shift点选两节点可新增关系"></i>-->
        <!--</div>-->
        <!--        <div class="icon icon-remove" @click="removeNode">-->
        <!--          <i title="删除"></i>-->
@@ -212,7 +216,7 @@ export default {
    'node-detail': nodeDetail,
    'edge-detail': edgeDetail,
    'graph-space-add': graphSpaceAdd,
-    'edge-add':edgeAdd
+    'edge-add': edgeAdd
  },
  data() {
    return {
@@ -233,15 +237,15 @@ export default {
      },
      tagMap: {},
      edgeMap: {},
-      ontologyName:"",
-      showFlag:false,
-      keyword:"",
-      searchTag:"",
-      ontologyId:"",
-      comment:"",
-      qo:{
-          pageNo:"",
-          name:""
+      ontologyName: "",
+      showFlag: false,
+      keyword: "",
+      searchTag: "",
+      ontologyId: "",
+      comment: "",
+      qo: {
+        pageNo: "",
+        name: ""
      }
    }
  },
@@ -249,15 +253,15 @@ export default {
    vm = this;
  },
  mounted() {
-      vm.qo = {
-          pageNo: this.$route.query.pageNo,
-          name: this.$route.query.name
-      };
-      vm.ontologyId = this.$route.query.ontologyId;
-      vm.space = this.$route.query.space;
-      vm.comment = this.$route.query.comment;
-      vm.handleSpaceChange();
-      // vm.querySpaceList();
+    vm.qo = {
+      pageNo: this.$route.query.pageNo,
+      name: this.$route.query.name
+    };
+    vm.ontologyId = this.$route.query.ontologyId;
+    vm.space = this.$route.query.space;
+    vm.comment = this.$route.query.comment;
+    vm.handleSpaceChange();
+    // vm.querySpaceList();
    // vm.initGraph();
  },
  methods: {
@@ -271,34 +275,34 @@ export default {
        if (res.data.length > 0) {
          vm.space = res.data[0].name;
          vm.handleSpaceChange();
-        }else{
-            vm.space = "";
-            vm.tagMap = {};
-            vm.edgeMap = {};
-            vm.tagList = [];
-            vm.edgeList = [];
-            vm.ontologyName = "";
-            vm.destroyGraph();
+        } else {
+          vm.space = "";
+          vm.tagMap = {};
+          vm.edgeMap = {};
+          vm.tagList = [];
+          vm.edgeList = [];
+          vm.ontologyName = "";
+          vm.destroyGraph();
        }
      });
    },
-    queryOntologyDetail(){
-        var id = vm.ontologyId;
-        // vm.spaceList.forEach(item => {
-        //     if(item.name == vm.space){
-        //         id = item.OntologyId;
-        //     }
-        // })
+    queryOntologyDetail() {
+      var id = vm.ontologyId;
+      // vm.spaceList.forEach(item => {
+      //     if(item.name == vm.space){
+      //         id = item.OntologyId;
+      //     }
+      // })

-        if(id){
-            request({
-                url: `/ontology/getone/`+id,
-                method: 'post',
-                data: {id:id}
-            }).then(res => {
-                vm.ontologyName = res.data.name;
-            })
-        }
+      if (id) {
+        request({
+          url: `/ontology/getone/` + id,
+          method: 'post',
+          data: {id: id}
+        }).then(res => {
+          vm.ontologyName = res.data.name;
+        })
+      }
    },
    handleSpaceChange() {
      vm.initGraph();
@@ -342,10 +346,10 @@ export default {
        method: 'get',
        data: {}
      }).then(res => {
-        res.data.unshift({
-          Name: `All`,
-          comment: '实体数'
-        });
+        // res.data.unshift({
+        //   Name: `All`,
+        //   comment: '实体数'
+        // });
        res.data.forEach(row => {
          row.count = vm.tagMap[row.Name] ? vm.tagMap[row.Name] : 0;
        });
@@ -359,10 +363,10 @@ export default {
        method: 'get',
        data: {}
      }).then(res => {
-        res.data.unshift({
-          Name: `All`,
-          comment: '三元组数'
-        });
+        // res.data.unshift({
+        //   Name: `All`,
+        //   comment: '三元组数'
+        // });
        res.data.forEach(row => {
          row.count = vm.edgeMap[row.Name] ? vm.edgeMap[row.Name] : 0;
        });
@@ -405,6 +409,7 @@ export default {
    queryDetail(type, obj) { // type : node/edge
      vm.tabModifyCmdType = type + 'Detail';
      vm.propsInfoVisible = true;
+      console.log(type);
      vm.$nextTick(() => {
        vm.$refs[type + 'Detail'].queryDetail(vm.space, obj);
      });
@@ -478,8 +483,17 @@ export default {
          });

          if (node.properties) {
-            node.label = node.name = getFirstStringProperty(node.properties);
+            // node.label = node.name = getFirstStringProperty(node.properties);
+            node.label = node.name = node.vid;
          }
+
+          if(node.labels === 'tag_1412011336') {
+            node.style = {
+              fill: '#8fe8e8'
+            }
+          }
+
+
        });
      }

@@ -603,90 +617,90 @@ export default {
        vm.$refs['nodeDetail'].createItem(vm.space);
      });
    },
-    showAddEdgeDialog(){
-        vm.tabModifyCmdType = 'edgeAdd';
-        vm.propsInfoVisible = true;
-        vm.$nextTick(() => {
-            vm.$refs['edgeAdd'].createItem(vm.space);
-        });
+    showAddEdgeDialog() {
+      vm.tabModifyCmdType = 'edgeAdd';
+      vm.propsInfoVisible = true;
+      vm.$nextTick(() => {
+        vm.$refs['edgeAdd'].createItem(vm.space);
+      });
    },
    //搜索
-    searchBtn(){
-        if(!vm.searchTag){
-            vm.$message.warning("请选择概念");
-            return false;
-        }
-        if(!vm.keyword){
-            vm.$message.warning("请输入关键字");
-            return false;
-        }
-        vm.graphLoading = true;
-        request({
-            url: `/nebula_operate/findnodebykeyword/${vm.space}/${vm.searchTag}`,
-            method: 'post',
-            data: {keyword:vm.keyword}
-        }).then(res => {
-            if (res.data) {
-                res.data.forEach(node => {
-                    Reflect.ownKeys(nodeProps).forEach(key => {
-                        node[key] = _.get(node, nodeProps[key], '');
-                    });
+    searchBtn() {
+      if (!vm.searchTag) {
+        vm.$message.warning("请选择概念");
+        return false;
+      }
+      if (!vm.keyword) {
+        vm.$message.warning("请输入关键字");
+        return false;
+      }
+      vm.graphLoading = true;
+      request({
+        url: `/nebula_operate/findnodebykeyword/${vm.space}/${vm.searchTag}`,
+        method: 'post',
+        data: {keyword: vm.keyword}
+      }).then(res => {
+        if (res.data) {
+          res.data.forEach(node => {
+            Reflect.ownKeys(nodeProps).forEach(key => {
+              node[key] = _.get(node, nodeProps[key], '');
+            });

-                    if (node.properties) {
-                        node.label = node.name = getFirstStringProperty(node.properties);
-                    }
-                });
+            if (node.properties) {
+              node.label = node.name = getFirstStringProperty(node.properties);
            }
+          });
+        }

-            graphData = {
-                nodes: res.data ? res.data : [],
-                edges: []
-            };
-            // 读取数据
-            graph.data(graphData);
-            // 渲染图
-            graph.render();
-            vm.graphLoading = false;
-        });
+        graphData = {
+          nodes: res.data ? res.data : [],
+          edges: []
+        };
+        // 读取数据
+        graph.data(graphData);
+        // 渲染图
+        graph.render();
+        vm.graphLoading = false;
+      });
    },
-    findOnePathBySrcidAndDctid(srcId, dstId){
-        request({
-            url: `/nebula_operate/findonepathbysrcidanddctid/${vm.space}/${srcId}/${dstId}`,
-            method: 'get',
-            data: {}
-        }).then(res => {
-            vm.resolveGraphData(res);
-        });
+    findOnePathBySrcidAndDctid(srcId, dstId) {
+      request({
+        url: `/nebula_operate/findonepathbysrcidanddctid/${vm.space}/${srcId}/${dstId}`,
+        method: 'get',
+        data: {}
+      }).then(res => {
+        vm.resolveGraphData(res);
+      });
    },
-    findNodeById(tag,vid){
-        request({
-            url: `/nebula_operate/findnodebyid/${vm.space}/${tag}/${vid}`,
-            method: 'get',
-            data: {}
-        }).then(res => {
-            if (res.data) {
-                Reflect.ownKeys(nodeProps).forEach(key => {
-                    res.data[key] = _.get(res.data, nodeProps[key], '');
-                });
+    findNodeById(tag, vid) {
+      request({
+        url: `/nebula_operate/findnodebyid/${vm.space}/${tag}/${vid}`,
+        method: 'get',
+        data: {}
+      }).then(res => {
+        if (res.data) {
+          Reflect.ownKeys(nodeProps).forEach(key => {
+            res.data[key] = _.get(res.data, nodeProps[key], '');
+          });

-                if (res.data.properties) {
-                    res.data.label = res.data.name = getFirstStringProperty(res.data.properties);
-                }
-            }
+          if (res.data.properties) {
+            res.data.label = res.data.name = getFirstStringProperty(res.data.properties);
+          }
+        }

-            graphData = {
-                nodes: res.data ? [res.data] : [],
-                edges: []
-            };
-            // 读取数据
-            graph.data(graphData);
-            // 渲染图
-            graph.render();
-            vm.graphLoading = false;
-        });
+        graphData = {
+          nodes: res.data ? [res.data] : [],
+          edges: []
+        };
+        // 读取数据
+        graph.data(graphData);
+        // 渲染图
+        graph.render();
+        vm.graphLoading = false;
+      });
    },
    backGraph() { // 返回
-        vm.$router.push({path: "/graphSpaceManage", query: {pageNo: vm.qo.pageNo, name: vm.qo.name}})
+      vm.$router.push({path: "/graphSpaceManage", query: {pageNo: vm.qo.pageNo, name: vm.qo.name}})
    },
  }
 }