dev search

src/views/search/Home.vue

@@ -59,9 +59,16 @@
                 </li>
               </ul>
             </div> -->
-            <div v-if="search_engine == '图谱' && searched">
-              <Graph ref="charts" :chartList="searchList" />
-            </div>
+              <a-spin v-show="search_engine == '图谱'" :spinning="loadingChecked" class="flex1 panel flex-col" style="height: 100%;background-color: transparent;">
+                <chart-comp ref="chart"
+                          @="getInfoTooltip"
+                          :isShowContextMenu="true"
+                          @reloadChart="reloadChart"
+                          :nodes="nodes"
+                          :links="links"
+                          :enable="true"
+                          :isShowChart="true"></chart-comp>
+              </a-spin>
           </div>
         </div>
       </div>
@@ -73,95 +80,41 @@
 // import axios from "axios";
 import storage from "@/utils/storage";
 import fetchJsonp from "fetch-jsonp";
-import Graph from "@/components/Echarts/graph";
+// import Graph from "@/components/Echarts/graph";
+import chartComp from '@/views/knowledge/common/chart'
+import { getGraphEntClsTree } from '@/api/graph/statisticalMap'
+import { getAllEntityClass } from '@/api/graph/entityClass'
+  import { getAllRelationClass } from '@/api/graph/relationClass'
+const dataList = []
+  // 根据树生成一个列表
+  const generateList = (data) => {
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i]
+      const key = node.key
+      dataList.push({key, title: node.entClsName, entClsName: node.entClsName})
+      if (node.children) {
+        generateList(node.children, node.key)
+      }
+    }
+  }
 export default {
   name: "Home",
-  components: { Graph },
+  components: { chartComp },
   data() {
     return {
+      loadingChecked: false,
+      nodes: null,
+      links: null,
+      relClsList: [], // 关系类列表
+      allRelClsNameList: [],// 所有的关系类名列表
+      checkedRelClsNameList: [], // 去重的关系类名列表
       search_engine: "",
-      searched: false,
       engines: "",
       engine_names: "",
       keyword: "",
       keywords: [],
       key_selected: -1,
       search_hot_display: "display: none",
-      searchList: {
-        seriesData: [
-          {
-            name: "飞机",
-          },
-          {
-            name: "机翼",
-          },
-          {
-            name: "机身",
-          },
-          {
-            name: "尾翼",
-          },
-          {
-            name: "起落装置",
-          },
-          {
-            name: "操纵系统",
-          },
-          {
-            name: "动力系统",
-          },
-        ],
-        linksData: [
-          {
-            source: "机翼",
-            target: "飞机",
-            label: {
-              show: true, // 是否显示line的文字
-              formatter: "组成" // line的文字
-            },
-          },
-          {
-            source: "机身",
-            target: "飞机",
-            label: {
-              show: true, // 是否显示line的文字
-              formatter: "组成" // line的文字
-            },
-          },
-          {
-            source: "尾翼",
-            target: "飞机",
-            label: {
-              show: true, // 是否显示line的文字
-              formatter: "组成" // line的文字
-            },
-          },
-          {
-            source: "起落装置",
-            target: "飞机",
-            label: {
-              show: true, // 是否显示line的文字
-              formatter: "组成" // line的文字
-            },
-          },
-          {
-            source: "操纵系统",
-            target: "飞机",
-            label: {
-              show: true, // 是否显示line的文字
-              formatter: "组成" // line的文字
-            },
-          },
-          {
-            source: "动力系统",
-            target: "飞机",
-            label: {
-              show: true, // 是否显示line的文字
-              formatter: "组成" // line的文字
-            },
-          },
-        ],
-      },
     };
   },
   created() {
@@ -187,17 +140,66 @@ export default {
       this.engine_names = storage.get("engines")["list"];
       this.set_search_engine(this.engine_names[0]);
     }
+    this.refreshEntityClassList()
+    /**
+     * 请求数据，获取所有实体类的信息，然后根据pid组装出实体类之间的关系
+     * */
+    this.loadingChecked = true
+    Promise.all([getAllEntityClass(true), getAllRelationClass()]).then((resp) => {
+      let links = []
+      resp[0].data.forEach((v) => {
+        v.id = v.entClsID
+        v.label = v.entClsName
+        if (v.pid !== null) {
+          let fromId = v.pid, toId = v.entClsID
+          const item = {
+            id: fromId + '_' + toId
+          }
+          item.from = v.pid
+          item.to = v.entClsID
+          item.classType = 'dashed'
+          links.push(item)
+        }
+      })
+      var relClassNameTempMap = {}
+      resp[1].data.forEach((v) => {
+        const item = {
+          label: v.relClsName,
+          value: v.relClsID,
+          checked: true
+        }
+        v.from = v.startID
+        v.to = v.endID
+        v.id = v.relClsID
+        v.label = v.relClsName
+        this.relClsList.push(item)
+        relClassNameTempMap[v.relClsName] = true
+      })
+      //去掉重复关系类名
+      for (let name in relClassNameTempMap) {
+        this.allRelClsNameList.push({
+          label: name,
+          value: name
+        })
+        this.checkedRelClsNameList.push(name)
+      }
+      links = links.concat(resp[1].data)
+      this.allEntClassCache = resp[0]
+      this.filLinks = this.allLinksCache = links
+
+      // if (clsId) { // 路径中存在实体类id
+      //   this.onCheckEntCls(this.checkedKeys)
+      // } else {
+        this.drawChart(resp[0].data, links)
+      // }
+      this.loadingChecked = false
+    })
   },
   methods: {
     set_search_engine(engine) {
       storage.set("search_engine", engine);
       this.search_engine = engine;
-      if(engine=="图谱"){
-        this.keyword = "飞机由什么组成"
-      }else{
-        this.keyword = ''
-      }
-      this.searched = false;
+      this.keyword = ''
     },
     get_search_engine() {
       return storage.get("search_engine");
@@ -276,8 +278,76 @@ export default {
       this.get_hot_keyword();
     },
     doSearch() {
-      this.searched = true
-    }
+    },
+    getInfoTooltip(event, args) {
+      const vm = this
+      this.$set(this.tooltip, 'x', event.pageX + 'px')
+      this.$set(this.tooltip, 'y', event.pageY + 'px')
+      if (args.clickNode) {
+        vm.tooltip.entClsID = args.clickNode.data.entClsID
+        vm.tooltip.relClsID = false
+      } else if (args.clickLink) {
+        vm.tooltip.entClsID = false
+        vm.tooltip.relClsID = args.clickLink.data.relClsID
+        vm.relClsName = args.clickLink.data.relClsName
+      } else {
+        vm.tooltip.entClsID = false
+        vm.tooltip.relClsID = false
+      }
+    },
+    reloadChart(nodes, links) {
+      this.drawChart(nodes, links)
+    },
+    drawChart(nodes, links) {
+      this.nodes = nodes
+      this.links = links
+      this.$refs.chart.destroyChart() // 先清空chart实例，再绘图
+      this.$refs.chart.reDraw(undefined, nodes, links)
+    },
+    refreshEntityClassList(clsId) {
+      this.loadingTree = true
+      getGraphEntClsTree().then((data) => {
+        for (let i = 0; i < data.length; i++) {
+          data[i]['key'] = data[i]['entClsID']
+          data[i]['title'] = data[i]['entClsName']
+          data[i]['scopedSlots'] = {title: 'custom'}
+          if (!data[i]['pid']) {
+            this.checkedKeys.push(data[i]['entClsID'])
+          }
+        }
+        // 此处传固定的option
+        const option = {
+          idName: 'entClsID',
+          pidName: 'pid',
+          childName: 'children',
+          returnList: []
+        }
+        let treeData = this.$utils.tree.listToTree(data, option) // 数组转成树
+        if (clsId) {  // 如果路径中存在实体类id
+          for (let z = 0; z < treeData.length; z++) {
+            if (treeData[z]['entClsID'] === clsId) {
+              this.checkedKeys = getIdsList(treeData[z])
+            }
+          }
+        }
+        this.gData = treeData
+        generateList(treeData)  // 生成个列表
+        const vm = this
+        // 遍历树找到父节点下面的所有子节点
+        this.$utils.tree.walk(treeData, function (node, index, way) {
+          var id = clsId  // 路由中的id
+          var myWay = []  // 需要找到的展开节点key
+          if (node.key === id) {
+            for (let i = 0; i < way.length; i++) {
+              myWay.push(way[i]['key'])
+            }
+            vm.expandedKeys = myWay
+            return false
+          }
+        })
+        this.loadingTree = false
+      })
+    },
   },
 };
 </script>