完成事件数据的查询和部分修改工作

src/components/D3Visualization/GraphEventHandler.js

@@ -19,6 +19,7 @@
  */
 
 import {mapNodes, mapRelationships, getGraphStats} from './mapper'
+import store from '@/store'
 
 export class GraphEventHandler {
   constructor (graph, graphView, getNodeNeighbours, onItemMouseOver, onItemSelected, onGraphModelChange) {
@@ -66,10 +67,8 @@ export class GraphEventHandler {
     if (!d.selected) {
       this.selectItem(d)
       this.onItemSelected({type: 'node', item: {id: d.id, labels: d.labels, properties: d.propertyList}})
-      this.selectedNode = d
+      // 存储节点数据到vuex中，其他模块可使用，mutation函数似乎只能传一个参数
-      store.state.selectedNode = {type: 'node', item: {id: d.id, labels: d.labels, properties: d.propertyList}}
+      store.commit('kg/SET_KG', {type: 'node', item: {id: d.id, labels: d.labels, properties: d.propertyList}})
-      store.state.selectedItem = 1
-      console.log("graph.js", store.state.selectedNode)
     } else {
       this.deselectItem()
     }
@@ -108,10 +107,8 @@ export class GraphEventHandler {
     if (!relationship.selected) {
       this.selectItem(relationship)
       this.onItemSelected({type: 'relationship', item: {id: relationship.id, type: relationship.type, properties: relationship.propertyList}})
-      this.selectedRelationShip = relationship
+      // 存储关系数据到vuex中，其他模块可使用
-      store.state.selectedRelationShip = {type: 'relationship', item: {id: relationship.id, type: relationship.type, properties: relationship.propertyList}}
+      store.commit('kg/SET_KG', {type: 'relation', item: {id: relationship.id, labels: relationship.type, properties: relationship.propertyList}})
-      store.state.selectedItem = 2
-      console.log("graph.js", this.selectedRelationShip)
     } else {
       this.deselectItem()
     }

src/components/D3Visualization/components/Graph.vue

@@ -176,12 +176,12 @@
         },
         deep: true
       },
-      selectedNode: {
+      // selectedNode: {
-        handler: function(val, oldVal) {
+      //   handler: function(val, oldVal) {
-          this.$store.state.selectedNode = val
+      //     this.$store.state.selectedNode = val
-          console.log("change:", val)
+      //     console.log("change:", val)
-        }
+      //   }
-      },
+      // },
       relationships: {
         handler: function(val, oldVal) {
           if (oldVal.toString() !== val.toString() && this.graphView) {

src/store/getters.js

@@ -3,6 +3,7 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name
+  name: state => state.user.name,
+  kg: state => state.kg
 }
 export default getters

src/store/index.js

@@ -4,6 +4,7 @@ import getters from './getters'
 import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
+import kg from './modules/kg'
 
 Vue.use(Vuex)
 
@@ -11,7 +12,8 @@ const store = new Vuex.Store({
   modules: {
     app,
     settings,
-    user
+    user,
+    kg
   },
   getters
 })

src/store/modules/kg.js

@@ -0,0 +1,32 @@
+
+
+const getDefaultState = () => {
+    return {
+        // type = node ? relation
+        type: 'node',
+        data: {}
+    }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+    RESET_KG: (state) => {
+        state = getDefaultState()
+    },
+    SET_KG: (state, obj) => {
+        state.type = obj.type
+        state.data = obj.item
+    },
+}
+
+const actions = {
+
+}
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/views/Test/test2.vue

@@ -1,18 +1,32 @@
 <template>
   <div>
-    <i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
+     <i :class="{ 'arrowRight': !flag, 'arrowDown': flag}" class="el-icon-arrow-right" style="margin-left:5px" @click="flag = !flag"></i>
-    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
-    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
-    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
-    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
-    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
-    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
-    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
-    菜鸟教程 -- 学的不仅是技术，更是梦想！！！
   </div>
 </template>
 
 <script>
-
+  export default {
+    data() {
+      return {
+        flag : false
+      }
+    }
+  }
 </script>
 
+
+<style scoped>
+.arrowRight{
+  cursor: pointer;
+  transition: 0.2s;
+  transform-origin: center;
+  transform: rotateZ(0deg);
+}
+.arrowDown{
+  cursor: pointer;
+  transition: 0.2s;
+  transform-origin: center;
+  transform: rotateZ(90deg);
+}
+</style>
+

src/views/event/select copy.vue

@@ -0,0 +1,618 @@
+<template>
+  <div class="kgWidget">
+    <div class="kgHead">
+      <div style="margin-left:30px;">
+        <span>输入查询语句进行查询:</span>
+        <input type="text" style="width:700px;" v-model="query" @keyup.enter="executeQuery" />
+      </div>
+    </div>
+
+    <div class="flexRow kgWidgetContainer">
+      <div class="editBox flexColumn">
+        <Visualization @clickNode="handleClickNode" :records="records" :clearAll="clearAll"></Visualization>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import { Visualization } from "@/components/D3Visualization";
+import { setting } from "@/config";
+const neo4j = require("neo4j-driver");
+export default {
+  components: {
+    Visualization
+  },
+  data() {
+    return {
+      query: "match (s:School) return s limit 2",
+      records: [],
+      clearAll: false
+    };
+  },
+  mounted() {
+    this.driver = neo4j.driver(
+      setting.neo4jUrl,
+      neo4j.auth.basic(setting.neo4jUserName, setting.neo4jPassword)
+    );
+    this.executeQuery();
+  },
+  methods: {
+    handleClickNode(item) {
+      console.log(item)
+    },
+    executeQuery() {
+      let me = this;
+      me.records = [];
+      this.clearAll = true;
+      const session = this.driver.session();
+
+      let query = this.query;
+      if (query == "") return;
+
+      session
+        .run(query, {})
+        .then(function(result) {
+          me.clearAll = false;
+          me.records = result.records;
+          console.log("neo4j 结果", result);
+          session.close();
+        })
+        .catch(function(error) {
+          console.log(error);
+          this.driver.close();
+        });
+    }
+  },
+  watch: {
+    records: {
+      handler: function(val, oldVal) {},
+      deep: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.kgWidget {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.kgWidget div,
+.kgWidget li,
+.kgWidget span，input,
+.kgWidget ul {
+  font-size: 13px;
+}
+
+.kgWidget .fontIcon {
+  color: #b0b0b0;
+}
+
+.kgWidget .fontIcon:hover {
+  color: #424242;
+}
+
+.kgWidget .borderTop {
+  border-top: 1px solid #ccc;
+}
+
+.kgWidget .fullHeight {
+  height: 100%;
+}
+
+.kgWidget .bold {
+  font-weight: 600;
+}
+
+.kgWidget .canDragEl {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+.kgWidget.cursorGrabbing,
+.kgWidget.cursorGrabbing * {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important;
+}
+
+.kgWidget input[type="text"],
+.kgWidget textarea {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  resize: none;
+  height: 32px;
+  line-height: 32px;
+}
+
+.kgWidget textarea {
+  height: 30px;
+  line-height: 30px;
+}
+
+.kgWidget .confirmMsg {
+  text-align: center;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.kgWidget .kgWidget {
+  height: 100%;
+  width: 100%;
+}
+
+.kgWidget .kgWidget:before {
+  content: "";
+  display: table;
+}
+
+.kgWidget .kgHead {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.kgWidget .kgContent,
+.kgWidget .kgHead,
+.kgWidget .kgLeftMenu,
+.kgWidget .kgSettings {
+  background: #fff;
+}
+
+.kgWidget .kgLeftMenu {
+  height: 100%;
+}
+
+.kgWidget .kgContent,
+.kgWidget .kgContent input,
+.kgWidget .kgLeftMenu,
+.kgWidget .kgLeftMenu input {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.kgWidget .kgContent,
+.kgWidget .kgSettings {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+}
+
+.kgWidget .kgContent {
+  overflow: hidden;
+}
+
+.kgWidget .kgHead {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.kgWidget .kgLeftMenu,
+.kgWidget .handleArea {
+  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.15);
+}
+
+.kgWidget .kgHeadBox,
+.kgWidget .kgWidgetContainer {
+  width: 100%;
+  /*min-width: 1280px;*/
+  margin: 0 auto;
+  height: 100%;
+}
+
+.kgWidget .kgHeadBox .goback {
+  display: inline-block;
+  font-size: 0;
+  padding: 0 10px;
+  color: #757575;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.kgWidget .kgHeadBox .goback:hover {
+  color: #333;
+}
+
+.kgWidget .kgHeadBox .goback i.icon {
+  font-size: 20px;
+  line-height: 50px;
+}
+
+.kgWidget .kgWidgetContainer {
+  box-sizing: border-box;
+  padding-top: 60px;
+  font-size: 12px;
+}
+
+.kgWidget .kgHead {
+  height: 50px;
+  line-height: 50px;
+}
+
+.kgWidget .kgHead .kgCancel,
+.kgWidget .kgHead .kgSave {
+  display: inline-block;
+  margin-left: 10px;
+  height: 34px;
+  line-height: 34px;
+  vertical-align: middle;
+  margin-top: 8px;
+  width: 88px;
+  text-align: center;
+}
+
+.kgWidget .kgHead .kgCancel:not(:hover) {
+  color: #ccc !important;
+}
+
+.kgWidget .kgHead .kgSave {
+  color: #fff;
+  border-radius: 3px;
+}
+
+.kgWidget .kgLeftMenu {
+  width: 180px;
+}
+
+.kgWidget .kgContent {
+  width: 640px;
+  border-right: 1px solid #ccc;
+}
+
+.kgWidget .kgSettings {
+  width: 464px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.kgWidget .kgTitle {
+  font-size: 14px;
+  color: #333;
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+}
+
+.kgWidget .flexBox {
+  display: -webkit-box;
+  display: flex;
+}
+
+.kgWidget .dragPreview {
+  position: absolute;
+  top: 8px;
+  left: 16px;
+}
+
+.limitTxt {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  max-width: 86px;
+}
+
+.confirmSave .noHeader {
+  height: 0;
+}
+
+.confirmSave .dialogContent {
+  text-align: center;
+  padding: 14px 0;
+  padding-right: 20px;
+  height: 36px;
+}
+
+.confirmSave .savePrompt {
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: 5px;
+  color: #9e9e9e;
+}
+
+.confirmSave .saveLoader {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 22px;
+}
+
+.pointerEvents {
+  pointer-events: none;
+}
+
+.kgWidget .widgetBox {
+  color: #333;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  height: 100%;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+}
+
+.kgWidget .editBoxItem {
+  padding: 12px 0;
+  padding-left: 10px;
+  box-sizing: border-box;
+}
+
+.kgWidget .dragHint {
+  opacity: 0.3;
+  padding: 0 0 6px 10px;
+}
+
+.kgWidget .dragTitle {
+  font-weight: 700;
+  padding: 6px 0 6px 10px;
+}
+
+.kgWidget .widgetList {
+  -webkit-box-flex: 1;
+  flex: 1;
+}
+
+.kgWidget .widgetListLi {
+  width: 180px;
+  list-style: none;
+  position: relative;
+  background: #f4f5f7;
+}
+
+.kgWidget .widgetListLi:not(.active) {
+  color: #333 !important;
+}
+
+.kgWidget .widgetListLi:not(:hover) {
+  background: #fff !important;
+}
+
+.kgWidget .widgetListLi:not(:hover) .addBottomWidget {
+  display: none;
+}
+
+.kgWidget .widgetListLi .addBottomWidget {
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  cursor: pointer;
+}
+
+.kgWidget .widgetListLi .addBottomWidget .iconMenu {
+  color: #ddd;
+  font-size: 22px;
+}
+
+.kgWidget .widgetListLi .addBottomWidget .iconMenu:hover {
+  color: #999;
+}
+
+.kgWidget .widgetListItem {
+  padding: 12px 0 12px 10px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.kgWidget .widgetListItem i {
+  font-size: 16px;
+  color: #9e9e9e;
+  width: 25px;
+  display: inline-block;
+}
+
+.editBox {
+  font-size: 12px;
+  color: #333;
+  width: 100%;
+  -webkit-box-flex: 1;
+  flex: 1;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.editBox .bottomLocation {
+  -webkit-box-flex: 1;
+  flex: 1;
+  min-height: 40px;
+}
+
+.editBox .editArea {
+  min-height: 361px;
+  display: -webkit-box;
+  display: flex;
+  width: 100%;
+  position: relative;
+  background: #fff;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+}
+
+.editBox .editWidgetContainer {
+  width: 100%;
+  padding: 0 14px;
+  box-sizing: border-box;
+  padding-top: 10px;
+}
+
+.editBox .editWidgetList {
+  width: 100%;
+  display: -webkit-box;
+  display: flex;
+}
+
+.kgWidget .settingsBox {
+  font-size: 13px;
+  color: #333;
+  -webkit-box-flex: 1;
+  flex: 1;
+}
+
+.kgWidget .settingsBox .widgetSettingsBox {
+  padding-top: 24px;
+  padding-left: 20px;
+}
+
+.kgWidget .settingsBox .widgetSettingsTitle {
+  padding-bottom: 22px;
+}
+
+.kgWidget .settingsBox .widgetSettingsTitle .wsLf > span {
+  opacity: 1;
+}
+
+.kgWidget .settingsBox .radioGroup {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.kgWidget .extraSettings {
+  width: 100%;
+  border-bottom: 1px solid #ccc;
+}
+
+.kgWidget .extraSettings .filterSettingsTip {
+  color: #b0b0b0;
+  vertical-align: middle;
+  margin-top: -7px;
+  font-weight: 400;
+}
+
+.kgWidget .extraSettings .filterSettingsTip:after {
+  white-space: normal;
+  width: 299px;
+}
+
+.kgWidget .extraSettings .defaultSettings {
+  padding-top: 12px;
+}
+
+.kgWidget .extraSettings .extraSettingsTitle {
+  font-size: 14px;
+  height: 40px;
+  margin-left: 20px;
+  line-height: 40px;
+}
+
+.kgWidget .extraSettings .filterSettingsBox {
+  max-height: 180px;
+  min-height: 88px;
+  padding-bottom: 7px;
+}
+
+.kgWidget .extraSettings .filterSettingsItem {
+  float: left;
+  width: 50%;
+  margin-bottom: 4px;
+  padding-left: 24px;
+  box-sizing: border-box;
+}
+
+.kgWidget .icon-dialpad {
+  font-size: 18px;
+}
+
+.kgWidget input[type="text"],
+.kgWidget textarea {
+  padding: 0 10px;
+  width: 320px;
+  border-radius: 3px;
+  border: 1px solid;
+}
+
+.kgWidget input[type="text"]:not(.active):not(:hover),
+.kgWidget textarea:not(.active):not(:hover) {
+  border-color: #ccc !important;
+}
+
+.kgWidget input[type="text"].halfInput,
+.kgWidget textarea.halfInput {
+  width: 90px;
+}
+
+.kgWidget textarea.multipleLine {
+  height: auto !important;
+  padding: 5px 10px;
+  line-height: 20px;
+  vertical-align: middle;
+}
+
+.kgWidget input[type="radio"] {
+  margin-right: 10px;
+}
+
+.kgWidget .addOption {
+  display: block;
+  margin-left: 40px;
+  margin-top: 14px;
+  cursor: pointer;
+}
+
+.kgWidget .defaultSettings {
+  padding-top: 60px;
+  text-align: center;
+  color: #333;
+  opacity: 0.3;
+  font-size: 14px;
+}
+
+.kgWidget .OAOptionsBox {
+  padding-left: 20px;
+  margin-top: 28px;
+}
+
+.kgWidget .OAOptionsBox .checkboxLabel {
+  margin-bottom: 16px;
+  display: block;
+}
+
+.kgWidget .iconDelete {
+  margin-top: -12px;
+  vertical-align: middle;
+  font-size: 18px;
+}
+</style>
+
+
+<style lang="scss">
+// 此处为了避免引入庞大的common.css 进行了css修补
+#svg-vis {
+  padding-top: 40px !important;
+}
+
+.laomJi.contracted {
+  overflow: visible;
+}
+
+.cBHfln.contracted {
+  max-height: 100px;
+}
+
+</style>

src/views/event/select.vue

@@ -1,15 +1,46 @@
 <template>
-  <div class="kgWidget">
+  <div>
-    <div class="kgHead">
+    <div class="kgWidget">
-      <div style="margin-left:30px;">
+      <div class="kgHead">
-        <span>输入查询语句进行查询:</span>
+        <div style="margin-left: 30px">
-        <input type="text" style="width:700px;" v-model="query" @keyup.enter="executeQuery" />
+          <el-row>
+            <el-col :span="4">
+              <el-select v-model="domain" placeholder="请选择">
+                <el-option
+                  v-for="item in domainOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="12">
+              <el-input
+                v-model="query"
+                placeholder="请输入查询关键词"
+                @keyup.enter.native="executeQuery"
+              ></el-input>
+            </el-col>
+            <el-col :span="4">
+              <el-input-number
+                v-model="nodeNum"
+                placeholder="返回节点数量"
+                :min="1"
+              ></el-input-number>
+            </el-col>
+          </el-row>
+        </div>
       </div>
-    </div>
 
-    <div class="flexRow kgWidgetContainer">
+      <div class="flexRow kgWidgetContainer">
-      <div class="editBox flexColumn">
+        <div class="editBox flexColumn">
-        <Visualization @clickNode="handleClickNode" :records="records" :clearAll="clearAll"></Visualization>
+          <Visualization
+            @clickNode="handleClickNode"
+            :records="records"
+            :clearAll="clearAll"
+          ></Visualization>
+        </div>
       </div>
     </div>
   </div>
@@ -21,13 +52,42 @@ import { setting } from "@/config";
 const neo4j = require("neo4j-driver");
 export default {
   components: {
-    Visualization
+    Visualization,
   },
   data() {
     return {
-      query: "match (s:School) return s limit 2",
+      query: "",
       records: [],
-      clearAll: false
+      clearAll: false,
+
+      domainOptions: [
+        {
+          value: "Department",
+          label: "部门",
+        },
+        {
+          value: "Job",
+          label: "岗位",
+        },
+        {
+          value: "Person",
+          label: "人员",
+        },
+        {
+          value: "Event",
+          label: "事件",
+        },
+        {
+          value: "School",
+          label: "学校",
+        },
+        {
+          value: "不限",
+          label: "不限",
+        },
+      ],
+      domain: "Event",
+      nodeNum: 10,
     };
   },
   mounted() {
@@ -38,36 +98,42 @@ export default {
     this.executeQuery();
   },
   methods: {
-    handleClickNode(item) {},
+    handleClickNode(item) {
+      // console.log(item);
+    },
     executeQuery() {
-      let me = this;
+      this.records = [];
-      me.records = [];
       this.clearAll = true;
-      const session = this.driver.session();
+      let session = this.driver.session();
-
-      let query = this.query;
-      if (query == "") return;
 
+      // if (this.query == "") return;
+      // todo: 限制query不能出现关键字，如limit
+      let domain = this.domain;
+      if (domain != "不限") {
+        domain = ":" + domain;
+      } else {
+        domain = "";
+      }
+      let query = `match (n${domain}) where n.name=~'.*${this.query}.*' return n limit ${this.nodeNum}`;
       session
         .run(query, {})
-        .then(function(result) {
+        .then((result) => {
-          me.clearAll = false;
+          this.clearAll = false;
-          me.records = result.records;
+          this.records = result.records;
-          console.log("neo4j 结果", result);
           session.close();
         })
-        .catch(function(error) {
+        .catch((error) => {
           console.log(error);
           this.driver.close();
         });
-    }
+    },
   },
   watch: {
     records: {
-      handler: function(val, oldVal) {},
+      handler: function (val, oldVal) {},
-      deep: true
+      deep: true,
-    }
+    },
-  }
+  },
 };
 </script>
 
@@ -78,10 +144,12 @@ export default {
   -ms-user-select: none;
   user-select: none;
   position: absolute;
-  top: 0;
+  height: 100%;
+  width: 100%;
+  /* top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: 0; */
 }
 
 .kgWidget div,
@@ -612,5 +680,5 @@ export default {
 .cBHfln.contracted {
   max-height: 100px;
 }
-
 </style>
+

src/views/manage/event/basic/index.vue

@@ -1,3 +1,769 @@
 <template>
-    <div>管理 事件基本信息</div>
+  <div class="main-body">
+    <div class="kgWidget">
+      <div class="kgHead">
+        <div style="margin-left: 30px">
+          <el-row>
+            <el-col :span="4">
+              <el-select v-model="domain" placeholder="请选择">
+                <el-option
+                  v-for="item in domainOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="12">
+              <el-input
+                v-model="query"
+                placeholder="请输入查询关键词"
+                @keyup.enter.native="executeQuery"
+              ></el-input>
+            </el-col>
+            <el-col :span="4">
+              <el-input-number
+                v-model="nodeNum"
+                placeholder="返回节点数量"
+                :min="1"
+              ></el-input-number>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div class="flexRow kgWidgetContainer">
+        <div class="editBox flexColumn">
+          <Visualization
+            @clickNode="handleClickNode"
+            :records="records"
+            :clearAll="clearAll"
+          ></Visualization>
+        </div>
+      </div>
+    </div>
+    <div class="arrow-pane" @click="editOpen = !editOpen">
+      <i
+        :class="{ arrowRight: !editOpen, arrowLeft: editOpen }"
+        class="el-icon-arrow-right"
+      ></i>
+    </div>
+    <transition name="slide-fade">
+      <div class="edit-pane" v-show="editOpen">
+        <!-- 展示键值对 -->
+        <div>{{curType}}</div>
+      </div>
+    </transition>
+  </div>
 </template>
+
+<script type="text/ecmascript-6">
+import { Visualization } from "@/components/D3Visualization";
+import { setting } from "@/config";
+const neo4j = require("neo4j-driver");
+export default {
+  components: {
+    Visualization,
+  },
+  data() {
+    return {
+      query: "",
+      records: [],
+      clearAll: false,
+
+      domainOptions: [
+        {
+          value: "Department",
+          label: "部门",
+        },
+        {
+          value: "Job",
+          label: "岗位",
+        },
+        {
+          value: "Person",
+          label: "人员",
+        },
+        {
+          value: "Event",
+          label: "事件",
+        },
+        {
+          value: "School",
+          label: "学校",
+        },
+        {
+          value: "不限",
+          label: "不限",
+        },
+      ],
+      domain: "Event",
+      nodeNum: 10,
+      editOpen: false,
+    };
+  },
+  computed: {
+    curType() {
+        return this.$store.getters.kg.type
+    }
+  },
+  mounted() {
+    this.driver = neo4j.driver(
+      setting.neo4jUrl,
+      neo4j.auth.basic(setting.neo4jUserName, setting.neo4jPassword)
+    );
+    this.executeQuery();
+  },
+  methods: {
+    handleClickNode(item) {
+      // console.log(item);
+    },
+    executeQuery() {
+      this.records = [];
+      this.clearAll = true;
+      let session = this.driver.session();
+
+      // if (this.query == "") return;
+      // todo: 限制query不能出现关键字，如limit
+      let domain = this.domain;
+      if (domain != "不限") {
+        domain = ":" + domain;
+      } else {
+        domain = "";
+      }
+      let query = `match (n${domain}) where n.name=~'.*${this.query}.*' return n limit ${this.nodeNum}`;
+      session
+        .run(query, {})
+        .then((result) => {
+          this.clearAll = false;
+          this.records = result.records;
+          session.close();
+        })
+        .catch((error) => {
+          console.log(error);
+          this.driver.close();
+        });
+    },
+  },
+  watch: {
+    records: {
+      handler: function (val, oldVal) {
+
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main-body {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.arrow-pane {
+  float: left;
+  position: absolute;
+  right: 5px;
+  top: 150px;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+  z-index: 2;
+  padding: 6px;
+  color: rgb(113, 113, 114);
+  text-align: center;
+  background: rgb(255, 255, 255);
+  box-shadow: rgb(52 58 67 / 10%) 0px 0px 2px, rgb(52 58 67 / 8%) 0px 1px 2px,
+    rgb(52 58 67 / 8%) 0px 1px 4px;
+}
+
+.edit-pane {
+  float: left;
+  position: absolute;
+  right: 0px;
+  top: 140px;
+  z-index: 1;
+
+  width: 25%;
+  max-width: 95%;
+  height: 70%;
+  background: rgb(255, 255, 255);
+  color: rgb(51, 51, 51);
+  font-family: "Open Sans", HelveticaNeue-Light, "Helvetica Neue Light",
+    "Helvetica Neue", Helvetica, Arial, sans-serif;
+  box-shadow: rgba(52, 58, 67, 0.1) 0px 0px 2px,
+    rgba(52, 58, 67, 0.08) 0px 1px 2px, rgba(52, 58, 67, 0.08) 0px 1px 4px;
+}
+
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.arrowRight {
+  transition: 0.5s;
+  transform-origin: center;
+  transform: rotateZ(0deg);
+}
+
+.arrowLeft {
+  transition: 0.5s;
+  transform-origin: center;
+  transform: rotateZ(180deg);
+}
+
+.kgWidget {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* position: absolute; */
+  height: 100%;
+  width: 100%;
+  /* top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0; */
+}
+
+.kgWidget div,
+.kgWidget li,
+.kgWidget span，input,
+.kgWidget ul {
+  font-size: 13px;
+}
+
+.kgWidget .fontIcon {
+  color: #b0b0b0;
+}
+
+.kgWidget .fontIcon:hover {
+  color: #424242;
+}
+
+.kgWidget .borderTop {
+  border-top: 1px solid #ccc;
+}
+
+.kgWidget .fullHeight {
+  height: 100%;
+}
+
+.kgWidget .bold {
+  font-weight: 600;
+}
+
+.kgWidget .canDragEl {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+.kgWidget.cursorGrabbing,
+.kgWidget.cursorGrabbing * {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important;
+}
+
+.kgWidget input[type="text"],
+.kgWidget textarea {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  resize: none;
+  height: 32px;
+  line-height: 32px;
+}
+
+.kgWidget textarea {
+  height: 30px;
+  line-height: 30px;
+}
+
+.kgWidget .confirmMsg {
+  text-align: center;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.kgWidget .kgWidget {
+  height: 100%;
+  width: 100%;
+}
+
+.kgWidget .kgWidget:before {
+  content: "";
+  display: table;
+}
+
+.kgWidget .kgHead {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.kgWidget .kgContent,
+.kgWidget .kgHead,
+.kgWidget .kgLeftMenu,
+.kgWidget .kgSettings {
+  background: #fff;
+}
+
+.kgWidget .kgLeftMenu {
+  height: 100%;
+}
+
+.kgWidget .kgContent,
+.kgWidget .kgContent input,
+.kgWidget .kgLeftMenu,
+.kgWidget .kgLeftMenu input {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.kgWidget .kgContent,
+.kgWidget .kgSettings {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+}
+
+.kgWidget .kgContent {
+  overflow: hidden;
+}
+
+.kgWidget .kgHead {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.kgWidget .kgLeftMenu,
+.kgWidget .handleArea {
+  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.15);
+}
+
+.kgWidget .kgHeadBox,
+.kgWidget .kgWidgetContainer {
+  width: 100%;
+  /*min-width: 1280px;*/
+  margin: 0 auto;
+  height: 100%;
+}
+
+.kgWidget .kgHeadBox .goback {
+  display: inline-block;
+  font-size: 0;
+  padding: 0 10px;
+  color: #757575;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.kgWidget .kgHeadBox .goback:hover {
+  color: #333;
+}
+
+.kgWidget .kgHeadBox .goback i.icon {
+  font-size: 20px;
+  line-height: 50px;
+}
+
+.kgWidget .kgWidgetContainer {
+  box-sizing: border-box;
+  padding-top: 60px;
+  font-size: 12px;
+}
+
+.kgWidget .kgHead {
+  height: 50px;
+  line-height: 50px;
+}
+
+.kgWidget .kgHead .kgCancel,
+.kgWidget .kgHead .kgSave {
+  display: inline-block;
+  margin-left: 10px;
+  height: 34px;
+  line-height: 34px;
+  vertical-align: middle;
+  margin-top: 8px;
+  width: 88px;
+  text-align: center;
+}
+
+.kgWidget .kgHead .kgCancel:not(:hover) {
+  color: #ccc !important;
+}
+
+.kgWidget .kgHead .kgSave {
+  color: #fff;
+  border-radius: 3px;
+}
+
+.kgWidget .kgLeftMenu {
+  width: 180px;
+}
+
+.kgWidget .kgContent {
+  width: 640px;
+  border-right: 1px solid #ccc;
+}
+
+.kgWidget .kgSettings {
+  width: 464px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.kgWidget .kgTitle {
+  font-size: 14px;
+  color: #333;
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+}
+
+.kgWidget .flexBox {
+  display: -webkit-box;
+  display: flex;
+}
+
+.kgWidget .dragPreview {
+  position: absolute;
+  top: 8px;
+  left: 16px;
+}
+
+.limitTxt {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  max-width: 86px;
+}
+
+.confirmSave .noHeader {
+  height: 0;
+}
+
+.confirmSave .dialogContent {
+  text-align: center;
+  padding: 14px 0;
+  padding-right: 20px;
+  height: 36px;
+}
+
+.confirmSave .savePrompt {
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: 5px;
+  color: #9e9e9e;
+}
+
+.confirmSave .saveLoader {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 22px;
+}
+
+.pointerEvents {
+  pointer-events: none;
+}
+
+.kgWidget .widgetBox {
+  color: #333;
+  font-size: 12px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  height: 100%;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+}
+
+.kgWidget .editBoxItem {
+  padding: 12px 0;
+  padding-left: 10px;
+  box-sizing: border-box;
+}
+
+.kgWidget .dragHint {
+  opacity: 0.3;
+  padding: 0 0 6px 10px;
+}
+
+.kgWidget .dragTitle {
+  font-weight: 700;
+  padding: 6px 0 6px 10px;
+}
+
+.kgWidget .widgetList {
+  -webkit-box-flex: 1;
+  flex: 1;
+}
+
+.kgWidget .widgetListLi {
+  width: 180px;
+  list-style: none;
+  position: relative;
+  background: #f4f5f7;
+}
+
+.kgWidget .widgetListLi:not(.active) {
+  color: #333 !important;
+}
+
+.kgWidget .widgetListLi:not(:hover) {
+  background: #fff !important;
+}
+
+.kgWidget .widgetListLi:not(:hover) .addBottomWidget {
+  display: none;
+}
+
+.kgWidget .widgetListLi .addBottomWidget {
+  position: absolute;
+  top: 10px;
+  right: 16px;
+  cursor: pointer;
+}
+
+.kgWidget .widgetListLi .addBottomWidget .iconMenu {
+  color: #ddd;
+  font-size: 22px;
+}
+
+.kgWidget .widgetListLi .addBottomWidget .iconMenu:hover {
+  color: #999;
+}
+
+.kgWidget .widgetListItem {
+  padding: 12px 0 12px 10px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.kgWidget .widgetListItem i {
+  font-size: 16px;
+  color: #9e9e9e;
+  width: 25px;
+  display: inline-block;
+}
+
+.editBox {
+  font-size: 12px;
+  color: #333;
+  width: 100%;
+  -webkit-box-flex: 1;
+  flex: 1;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.editBox .bottomLocation {
+  -webkit-box-flex: 1;
+  flex: 1;
+  min-height: 40px;
+}
+
+.editBox .editArea {
+  min-height: 361px;
+  display: -webkit-box;
+  display: flex;
+  width: 100%;
+  position: relative;
+  background: #fff;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+}
+
+.editBox .editWidgetContainer {
+  width: 100%;
+  padding: 0 14px;
+  box-sizing: border-box;
+  padding-top: 10px;
+}
+
+.editBox .editWidgetList {
+  width: 100%;
+  display: -webkit-box;
+  display: flex;
+}
+
+.kgWidget .settingsBox {
+  font-size: 13px;
+  color: #333;
+  -webkit-box-flex: 1;
+  flex: 1;
+}
+
+.kgWidget .settingsBox .widgetSettingsBox {
+  padding-top: 24px;
+  padding-left: 20px;
+}
+
+.kgWidget .settingsBox .widgetSettingsTitle {
+  padding-bottom: 22px;
+}
+
+.kgWidget .settingsBox .widgetSettingsTitle .wsLf > span {
+  opacity: 1;
+}
+
+.kgWidget .settingsBox .radioGroup {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.kgWidget .extraSettings {
+  width: 100%;
+  border-bottom: 1px solid #ccc;
+}
+
+.kgWidget .extraSettings .filterSettingsTip {
+  color: #b0b0b0;
+  vertical-align: middle;
+  margin-top: -7px;
+  font-weight: 400;
+}
+
+.kgWidget .extraSettings .filterSettingsTip:after {
+  white-space: normal;
+  width: 299px;
+}
+
+.kgWidget .extraSettings .defaultSettings {
+  padding-top: 12px;
+}
+
+.kgWidget .extraSettings .extraSettingsTitle {
+  font-size: 14px;
+  height: 40px;
+  margin-left: 20px;
+  line-height: 40px;
+}
+
+.kgWidget .extraSettings .filterSettingsBox {
+  max-height: 180px;
+  min-height: 88px;
+  padding-bottom: 7px;
+}
+
+.kgWidget .extraSettings .filterSettingsItem {
+  float: left;
+  width: 50%;
+  margin-bottom: 4px;
+  padding-left: 24px;
+  box-sizing: border-box;
+}
+
+.kgWidget .icon-dialpad {
+  font-size: 18px;
+}
+
+.kgWidget input[type="text"],
+.kgWidget textarea {
+  padding: 0 10px;
+  width: 320px;
+  border-radius: 3px;
+  border: 1px solid;
+}
+
+.kgWidget input[type="text"]:not(.active):not(:hover),
+.kgWidget textarea:not(.active):not(:hover) {
+  border-color: #ccc !important;
+}
+
+.kgWidget input[type="text"].halfInput,
+.kgWidget textarea.halfInput {
+  width: 90px;
+}
+
+.kgWidget textarea.multipleLine {
+  height: auto !important;
+  padding: 5px 10px;
+  line-height: 20px;
+  vertical-align: middle;
+}
+
+.kgWidget input[type="radio"] {
+  margin-right: 10px;
+}
+
+.kgWidget .addOption {
+  display: block;
+  margin-left: 40px;
+  margin-top: 14px;
+  cursor: pointer;
+}
+
+.kgWidget .defaultSettings {
+  padding-top: 60px;
+  text-align: center;
+  color: #333;
+  opacity: 0.3;
+  font-size: 14px;
+}
+
+.kgWidget .OAOptionsBox {
+  padding-left: 20px;
+  margin-top: 28px;
+}
+
+.kgWidget .OAOptionsBox .checkboxLabel {
+  margin-bottom: 16px;
+  display: block;
+}
+
+.kgWidget .iconDelete {
+  margin-top: -12px;
+  vertical-align: middle;
+  font-size: 18px;
+}
+</style>
+
+
+<style lang="scss">
+// 此处为了避免引入庞大的common.css 进行了css修补
+#svg-vis {
+  padding-top: 40px !important;
+}
+
+.laomJi.contracted {
+  overflow: visible;
+}
+
+.cBHfln.contracted {
+  max-height: 100px;
+}
+</style>
+