add graph for entity

src/api/knowledge/search.js

@@ -33,4 +33,12 @@ export function getTop10() {
     url: '/suport/question/getTop10',
     method: 'get',
   })
+}
+
+// 根据实体id查询实体1层关系
+export function getRelationByEntityId(id) {
+  return request({
+    url: `/kg/getRelationByEntityId/${id}`,
+    method: 'get',
+  })
 }

src/components/Echarts/graph.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="chart" ref="gCharts" class="chart"></div>
+  <div id="chart" ref="gCharts" class="chart" :style="'width:'+width+'px;height:'+height+'px'"></div>
 </template>
 <script>
 import * as echarts from "echarts";
@@ -10,6 +10,14 @@ export default {
       type: Object,
       required: true,
     },
+    width: {
+      type: Number,
+      default: 900,
+    },
+    height: {
+      type: Number,
+      default: 600,
+    },
   },
   watch: {
     chartList: {
@@ -61,6 +69,7 @@ export default {
         // this.myChart = echarts.init(document.getElementById("chart"));
         this.myChart = echarts.init(this.$refs.gCharts);
         this.myChart.on("click", (params) => {
+          console.info('params',params)
           if (params.dataType === "node") {
             //判断点击的是图表的节点部分
             this.nodeClick(params);
@@ -183,8 +192,6 @@ export default {
 </script>
 <style scoped>
 .chart {
-  width: 900px;
-  height: 600px;
   border: 1px solid wheat;
 }
 </style>

src/views/knowledge/entity/index.vue

@@ -63,7 +63,13 @@
 
     <el-table v-loading="loading" :data="entityList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="实体名称" align="center" prop="name" />
+      <el-table-column label="实体名称" align="center" prop="name" >
+        <template slot-scope="scope">
+          <div @click="showGraphDialog(scope.row)">
+            {{ scope.row.name }}
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="实体类" align="center" prop="labels">
         <template slot-scope="scope">
           {{ scope.row.labels.join(', ') }}
@@ -112,15 +118,21 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <el-dialog :visible.sync="dialogGraphVisible" @close="closeGraphDialog" @mouseleave="closeGraphDialog" width="500px">
+      <Graph ref="charts" :chartList="chartData" :width="450" :height="450"/>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listEntity, getEntity, delEntity, addEntity, updateEntity } from "@/api/knowledge/entity";
+import { getRelationByEntityId } from '@/api/knowledge/search'
 import {bit2Info} from '@/utils/validate'
+import Graph from '@/components/Echarts/graph'
 
 export default {
   name: "Entity",
+  components: { Graph },
   data() {
     return {
       // 遮罩层
@@ -151,12 +163,24 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+      },
+      dialogGraphVisible: false,
+      searchList: {},
+      chartData: {
+        seriesData: [],
+        linksData: [],
+      },
     };
   },
   created() {
     this.getList();
   },
+  // mounted() {
+  //   this.bindTableEvents();
+  // },
+  // beforeDestroy() {
+  //   this.unbindTableEvents();
+  // },
   methods: {
     /** 查询实体管理列表 */
     bit2Info,
@@ -250,7 +274,70 @@ export default {
       this.download('knowledge/entity/export', {
         ...this.queryParams
       }, `entity_${new Date().getTime()}.xlsx`)
-    }
+    },
+    showGraphDialog(row) {
+      // 显示对话框，并设置内容
+      getRelationByEntityId(row.id).then(resp => {
+        let respData = resp.data
+        if(respData.data.length === 0){
+          this.$message({
+            message: '没有找到匹配的数据',
+            type: 'warning'
+          });
+        }
+        let seriesData = []
+        let linksData = []
+        for (let item of respData.data) {
+          seriesData.push(
+            { name: item.name }
+          )
+        }
+        for (let link of respData.links) {
+          linksData.push(
+            {
+              source: link.fromName,
+              target: link.toName,
+              label: {
+                show: true, // 是否显示line的文字
+                formatter: link.name // line的文字
+              },
+            }
+          )
+        }
+        this.chartData = {
+          seriesData,
+          linksData,
+        }
+        this.dialogGraphVisible = true;
+      })
+    },
+    closeGraphDialog() {
+      // 关闭对话框
+      this.dialogGraphVisible = false;
+    },
+    // bindTableEvents() {
+    //   const tableBody = this.$el.querySelector('.el-table__body-wrapper');
+    //   if (tableBody) {
+    //     tableBody.addEventListener('mouseenter', this.handleMouseEnter);
+    //     tableBody.addEventListener('mouseleave', this.handleMouseLeave);
+    //   }
+    // },
+    // unbindTableEvents() {
+    //   const tableBody = this.$el.querySelector('.el-table__body-wrapper');
+    //   if (tableBody) {
+    //     tableBody.removeEventListener('mouseenter', this.handleMouseEnter);
+    //     tableBody.removeEventListener('mouseleave', this.handleMouseLeave);
+    //   }
+    // },
+    // handleMouseEnter(event) {
+    //   if (event.target.tagName === 'TD') {
+    //     const firstColumnCell = event.target.parentNode.firstElementChild;
+    //     this.showDialog(firstColumnCell.textContent);
+    //   }
+    // },
+    // handleMouseLeave() {
+    //   this.closeGraphDialog();
+    // }
   }
 };
 </script>

src/views/neo4j/class_relation/index.vue

@@ -204,7 +204,7 @@ export default {
     this.getEntityClassOption();
   },
   activated(){
-    this.tEntityClassOption();
+    this.getEntityClassOption();
   },
   methods: {
     /** 查询实体类关系列表 */