完成OKR对齐视图

quasar.conf.js

@@ -48,7 +48,7 @@ module.exports = function (ctx) {
     build: {
       vueRouterMode: 'hash', // available values: 'hash', 'history'
       env: ctx.dev ? {
-        API: 'http://192.168.1.27:8300/api'
+        API: 'http://192.168.1.13:8085/api'
       } : {
         API: 'http://eduapi.oytour.com/api'
       },

src/App.vue

@@ -175,7 +175,9 @@ body,
 .micfont {
     font-family: perfectFont !important;
 }
-
+.fixed-right, .absolute-right{
+    overflow: unset;
+}
 .dialog-out-close {
     background: var(--q-color-primary);
     position: absolute !important;

src/api/okr/work.js

@@ -282,3 +282,10 @@ export function queryUserOKRNextAlignView(data){
     data
   })
 }
+export function queryOtherSignObjective(data){
+  return request({
+    url: '/OKRPeriod/GetOKROthersObjectiveInfo',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file

src/components/okr/okr-add.vue

@@ -197,23 +197,7 @@
                     </q-item-section>
                     <q-item-section>提交审核</q-item-section>
                   </q-item>
-                  <q-item
-                    class="items-center"
-                    clickable
-                    v-ripple
-                    v-if="newObjective.Status == 3 || newObjective.Status == 4"
-                    @click="setObjectiveStatus"
-                  >
-                    <q-item-section avatar>
-                      <inline-svg
-                        class="svg-icon svg-icon-g-p"
-                        src="icons/svg/General/Shield-check.svg"
-                        width="20px"
-                        height="20px"
-                      ></inline-svg>
-                    </q-item-section>
-                    <q-item-section>提交审核</q-item-section>
-                  </q-item>
+                  
                   <q-item
                     class="items-center"
                     clickable

src/components/okr/okr-align.vue

 <template>
-  <div class="absolute flex row " style="width:500px;z-index:999;" :style="{'left':direction=='up'?'15px':'15px','top':direction=='up'?'-16px':'11px'}">
+  <div
+    class="absolute flex row "
+    style="width:500px;z-index:999;"
+    :style="{
+      left: direction == 'up' ? '15px' : '15px',
+      top: direction == 'up' ? '-16px' : 'unset',
+      bottom: direction == 'up' ? 'unset' : '13px'
+    }"
+  >
     <svg
       width="24px"
       height="24px"
       style="margin-right:8px"
-      :style="{'transform':direction=='up'?'rotate(0deg)':'rotateX(180deg)','margin-top':direction=='up'?'7px':'4px'}"
+      :style="{
+        transform: direction == 'up' ? 'rotate(0deg)' : 'rotateX(180deg)',
+        'margin-top': direction == 'up' ? '7px' : '4px'
+      }"
       viewBox="0 0 24 24"
       version="1.1"
-      v-if="!showOnly || (showOnly && obj.ParentList.length>0 && direction=='up')||(showOnly && obj.ChildList.length>0 && direction=='down')"
+      v-if="
+        !showOnly ||
+          (showOnly && obj.ParentList.length > 0 && direction == 'up') ||
+          (showOnly && obj.ChildList.length > 0 && direction == 'down')
+      "
     >
       <g
         id="shangduiqi"
@@ -27,8 +42,8 @@
     <template v-for="(x, i) in obj.ParentList">
       <div
         class="hover-primary remark-font cursor-pointer q-mr-xs"
-        :style="{'margin-top':direction=='up'?'0px':'20px'}"
-        v-if="x.AlignList.length > 0 && direction=='up'"
+        :style="{ 'margin-top': direction == 'up' ? '0px' : '20px' }"
+        v-if="x.AlignList.length > 0 && direction == 'up'"
         :key="i"
       >
         <span>{{ x.AccountName }}</span
@@ -49,8 +64,8 @@
     <template v-for="(x, i) in obj.ChildList">
       <div
         class="hover-primary remark-font cursor-pointer q-mr-xs"
-        :style="{'margin-top':direction=='up'?'0px':'18px'}"
-        v-if="x.AlignList.length > 0 && direction=='down'"
+        :style="{ 'margin-top': direction == 'up' ? '0px' : '18px' }"
+        v-if="x.AlignList.length > 0 && direction == 'down'"
         :key="i"
       >
         <span>{{ x.AccountName }}</span
@@ -67,7 +82,10 @@
         </q-popup-proxy>
       </div>
     </template>
-    <div class="hover-primary remark-font cursor-pointer" v-if="direction=='up' && !showOnly">
+    <div
+      class="hover-primary remark-font cursor-pointer"
+      v-if="direction == 'up' && !showOnly"
+    >
       <q-icon
         name="iconfont icon-add"
         class="cursor-pointer"
@@ -75,7 +93,11 @@
       ></q-icon>
       <span>添加对齐</span>
       <q-popup-proxy style="z-index: 9999;">
-        <search-okr :period-id="periodId" :source-id="obj.Id" @add="addNewAlign"></search-okr>
+        <search-okr
+          :period-id="periodId"
+          :source-id="obj.Id"
+          @add="addNewAlign"
+        ></search-okr>
       </q-popup-proxy>
     </div>
   </div>
@@ -85,7 +107,7 @@
 import searchOkr from "./search-okr";
 import alignInfo from "./align-info";
 export default {
-  props: ["obj", "periodId",'direction','showOnly'],
+  props: ["obj", "periodId", "direction", "showOnly"],
   components: {
     searchOkr,
     alignInfo

src/components/okr/okr-details-info.vue

+<template>
+  <q-card
+    style="margin-top:61px;width:600px;overflow:unset;"
+    class="no-border-radius"
+    v-if="node"
+  >
+    <q-card-section class="row items-center">
+      <q-avatar
+        size="40px"
+        font-size="18px"
+        rounded
+        color="blue-2"
+        text-color="blue-13"
+      >
+        <img :src="node.EmPhoto" v-if="node.EmPhoto" />
+        <span v-else-if="node.EmName">{{ node.EmName.substring(0, 1) }}</span>
+      </q-avatar>
+      <div class="text-h6 col q-mx-md">{{ node.EmName }}</div>
+      <div class="text-primary cursor-pointer" @click="openObjective(node)">
+        查看详情
+      </div>
+    </q-card-section>
+    <q-card-section v-if="newObjective">
+      <okr-add
+        :objective="newObjective"
+        :show-only="true"
+        class="q-mb-lg"
+        :audit-mode="false"
+        :user-id="0"
+      ></okr-add>
+    </q-card-section>
+    <div
+      class="dialog-out-close"
+      v-close-popup
+      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;"
+    >
+      <q-icon name="iconfont icon-jujue1" size="26px" />
+    </div>
+  </q-card>
+</template>
+
+<script>
+import okrAdd from "./okr-query";
+import { queryOtherSignObjective, querySignObject } from "../../api/okr/work";
+import { mapGetters } from "vuex";
+export default {
+  props: ["obj", "proid"],
+  components: {
+    okrAdd
+  },
+  data() {
+    return {
+      node: {},
+      newObjective: null
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"])
+  },
+  watch: {
+    obj: {
+      handler(newValue, oldValue) {
+        this.node = newValue;
+        this.newObjective=null
+        this.updatedObjective();
+      },
+      immediate: true,
+      isDeep: true
+    }
+  },
+  methods: {
+    openObjective(x) {
+      let obj = {
+        Id: x.UserId,
+        EmployeeName: x.EmName,
+        UserIcon: x.EmPhoto
+      };
+      this.$root.$emit("openUserObj", obj);
+    },
+    updatedObjective() {
+      if (this.userInfo.Id == this.node.UserId) {
+        querySignObject({ ObjectiveId: this.node.Id }).then(r => {
+          this.newObjective = r.Data;
+          this.$forceUpdate();
+        });
+      } else {
+        queryOtherSignObjective({
+          ObjectiveId: this.node.Id,
+          PeriodId: this.proid,
+          UserId: this.node.UserId
+        }).then(r => {
+          this.newObjective = r.Data;
+          this.$forceUpdate();
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/okr/okr-query.vue

@@ -2,15 +2,17 @@
   <q-card class="q-py-md no-shadow q-mr-md okr-add">
     <q-input
       v-model="newObjective.Title"
+      type="textare"
       autogrow
       ref="obj_content"
       :outlined="newBoxState"
       :placeholder="newObjective.placeHolder"
-      :style="{ 'margin-left': newBoxState ? '-12px' : '15px' }"
+      :style="{ 'margin-left': newBoxState ? '-12px' : '15px'}"
+      :input-style="{'padding-bottom':(newObjective.ChildList && newObjective.ChildList.length > 0 )?'20px':''}"
       readonly
     >
       <template v-slot:before>
-        <div class="relative-position" v-if="!newBoxState">
+        <div class="relative-position" style="height:100%;margin-top:30px;" v-if="!newBoxState">
           <inline-svg
             class="svg-icon"
             :class="{
@@ -304,7 +306,7 @@
         </div>
       </div>
       <q-card flat class="q-mt-md">
-      <q-card-section>
+      <q-card-section v-if="newObjective.AuditUserName && newObjective.AuditUserName!=''">
         <div class="flex row items-center">
           <q-avatar
             size="40px"

src/components/relation/core4vue/SeeksGraphMath.js

@@ -492,7 +492,8 @@ var SeeksGraphMath = {
     }
   },
   conductStrengthToParents(node) {
-    if (node.lot.parent) {
+    console.log("寻找parent:",node.id,node.lot.parent)
+    if (node.lot.parent && !node.nodeParent) {
       node.lot.parent.lot.strengthWithChilds += 1
       this.conductStrengthToParents(node.lot.parent)
     }

src/components/relation/core4vue/SeeksRGNode.vue

@@ -2,30 +2,112 @@
   <div
     v-show="isAllowShowNode(nodeProps)"
     ref="seeksRGNode"
-    :style="{'left':nodeProps.x + 'px','top':nodeProps.y + 'px', 'opacity': (nodeProps.opacity>1?nodeProps.opacity/100:nodeProps.opacity) }"
+    :style="{
+      left: nodeProps.x + 'px',
+      top: nodeProps.y + 'px',
+      opacity:
+        nodeProps.opacity > 1 ? nodeProps.opacity / 100 : nodeProps.opacity
+    }"
     class="rel-node-peel"
     @mousedown.left.stop="onDragStart($event)"
     @mouseover.stop="onMouseHover($event)"
     @mouseout.stop="onMouseOut($event)"
     @click.stop="onclick($event)"
   >
-    <div v-if="(nodeProps.expandHolderPosition&&nodeProps.expandHolderPosition!=='hide')||(graphSetting.defaultExpandHolderPosition&&graphSetting.defaultExpandHolderPosition!=='hide'&&nodeProps.lot.childs&&nodeProps.lot.childs.length>0)" :class="[('c-expand-positon-'+(nodeProps.expandHolderPosition||graphSetting.defaultExpandHolderPosition))]" class="c-btn-open-close">
-      <span :class="expandButtonClass" :style="{'background-color':(nodeProps.color||graphSetting.defaultNodeColor)}" @click.stop="expandOrCollapseNode">
-        {{nodeProps.expanded?'':nodeProps.childNum}}
+    <div
+      v-if="
+        (nodeProps.expandHolderPosition &&
+          nodeProps.expandHolderPosition !== 'hide' &&
+          childNum > 0) ||
+          (graphSetting.defaultExpandHolderPosition &&
+            graphSetting.defaultExpandHolderPosition !== 'hide' &&
+            childNum > 0)
+      "
+      :class="[
+        'c-expand-positon-' +
+          (nodeProps.expandHolderPosition ||
+            graphSetting.defaultExpandHolderPosition)
+      ]"
+      class="c-btn-open-close"
+    >
+      <span
+        :class="expandButtonClass"
+        :style="{
+          'background-color': nodeProps.color || graphSetting.defaultNodeColor
+        }"
+        @click.stop="expandOrCollapseNode"
+      >
+        {{ nodeProps.expanded ? "" : childNum }}
       </span>
     </div>
+
+    <div
+      v-if="parentNum>0"
+      class="c-expand-positon-left c-btn-open-close"
+    >
+      <span
+        :class="parentExpandButtonClass"
+        :style="{
+          'background-color': nodeProps.color || graphSetting.defaultNodeColor
+        }"
+        style="font-size:13px;line-height:19px;"
+        @click.stop="parentExpandOrCollapseNode"
+      >
+        {{ nodeProps.parentExpanded ? "" : parentNum }}
+      </span>
+    </div>
+
     <div v-if="nodeProps.html" v-html="nodeProps.html" />
     <div
       v-else
-      :class="['rel-node-shape-'+(nodeProps.nodeShape===undefined?graphSetting.defaultNodeShape:nodeProps.nodeShape),'rel-node-type-'+nodeProps.type, (nodeProps.id===graphSetting.checkedNodeId?'rel-node-checked':''), (nodeProps.selected?'rel-node-selected':''), nodeProps.styleClass, (hovering?'rel-node-hover':''), (nodeProps.innerHTML?'rel-diy-node':'')]"
-      :style="{'background-color':(nodeProps.color===undefined?graphSetting.defaultNodeColor:nodeProps.color),'color':(nodeProps.fontColor===undefined?graphSetting.defaultNodeFontColor:nodeProps.fontColor),'border': (nodeProps.borderColor || graphSetting.defaultNodeBorderColor) + ' solid '+(nodeProps.borderWidth || graphSetting.defaultNodeBorderWidth)+'px', 'width':(nodeProps.width || graphSetting.defaultNodeWidth)+'px', 'height':(nodeProps.height||graphSetting.defaultNodeHeight)+'px'}"
+      :class="[
+        'rel-node-shape-' +
+          (nodeProps.nodeShape === undefined
+            ? graphSetting.defaultNodeShape
+            : nodeProps.nodeShape),
+        'rel-node-type-' + nodeProps.type,
+        nodeProps.id === graphSetting.checkedNodeId ? 'rel-node-checked' : '',
+        nodeProps.selected ? 'rel-node-selected' : '',
+        nodeProps.styleClass,
+        hovering ? 'rel-node-hover' : '',
+        nodeProps.innerHTML ? 'rel-diy-node' : ''
+      ]"
+      :style="{
+        'background-color':
+          nodeProps.color === undefined
+            ? graphSetting.defaultNodeColor
+            : nodeProps.color,
+        color:
+          nodeProps.fontColor === undefined
+            ? graphSetting.defaultNodeFontColor
+            : nodeProps.fontColor,
+        border:
+          (nodeProps.borderColor || graphSetting.defaultNodeBorderColor) +
+          ' solid ' +
+          (nodeProps.borderWidth || graphSetting.defaultNodeBorderWidth) +
+          'px',
+        width: (nodeProps.width || graphSetting.defaultNodeWidth) + 'px',
+        height: (nodeProps.height || graphSetting.defaultNodeHeight) + 'px'
+      }"
       class="rel-node"
     >
-      <template v-if="!(graphSetting.hideNodeContentByZoom === true && graphSetting.canvasZoom<40)">
+      <template
+        v-if="
+          !(
+            graphSetting.hideNodeContentByZoom === true &&
+            graphSetting.canvasZoom < 40
+          )
+        "
+      >
         <slot :node="nodeProps" name="node">
-          <div v-if="!nodeProps.innerHTML" :style="{'color':(nodeProps.fontColor || graphSetting.defaultNodeFontColor)}" class="c-node-text">
+          <div
+            v-if="!nodeProps.innerHTML"
+            :style="{
+              color: nodeProps.fontColor || graphSetting.defaultNodeFontColor
+            }"
+            class="c-node-text"
+          >
             <span v-html="getNodeName()" />
-            
           </div>
           <div v-else v-html="nodeProps.innerHTML" />
         </slot>
@@ -37,7 +119,7 @@
 <script>
 // import SeeksRGStore from './SeeksRGStore'
 // import SeeksGraphMath from './SeeksGraphMath'
-import SeeksRGUtils from './SeeksRGUtils'
+import SeeksRGUtils from "./SeeksRGUtils";
 // import Velocity from 'velocity-animate'
 // import { mapState } from 'vuex'
 // var _parent = this.$parent
@@ -46,35 +128,46 @@ import SeeksRGUtils from './SeeksRGUtils'
 //   return _r
 // }
 export default {
-  name: 'SeeksRGNode',
-  components: { },
+  name: "SeeksRGNode",
+  components: {},
   props: {
     graphSetting: {
       mustUseProp: true,
-      default: () => { return {} },
+      default: () => {
+        return {};
+      },
       type: Object
     },
     nodeProps: {
       mustUseProp: true,
-      default: () => { return {} },
+      default: () => {
+        return {};
+      },
       type: Object
     },
     onNodeClick: {
       mustUseProp: false,
-      default: () => { return () => {} },
+      default: () => {
+        return () => {};
+      },
       type: Function
     }
   },
   data() {
     return {
       hovering: false,
-      borderColor: '',
-      dragging: false
-    }
+      borderColor: "",
+      dragging: false,
+      parentNum: 0,
+      childNum: 0,
+      parentExpandButtonClass:""
+    };
   },
   computed: {
     expandButtonClass() {
-      return this.nodeProps.expanded===false ? 'c-expanded vertical-middle' : 'c-collapsed'
+      return this.nodeProps.expanded === false
+        ? "c-expanded vertical-middle"
+        : "c-collapsed";
     }
   },
   // show() {
@@ -94,19 +187,33 @@ export default {
   },
   created() {
     // Vue.version
+    if (this.nodeProps.childNum > 0) {
+      this.childNum = this.nodeProps.childNum;
+    } else if (this.nodeProps.childNum && this.nodeProps.childNum.length > 0) {
+      let temp = this.nodeProps.childNum.filter(x => !x.nodeParent);
+      if(temp && temp.length>0){
+        this.childNum=temp.length
+      }
+    }
+    if(this.nodeProps.parentNum){
+      this.parentNum=this.nodeProps.parentNum
+    }
+    // if(this.nodeProps.nodeParent){
+    //   this.nodeProps.isShow=false
+    // }
   },
   mounted() {
-    this.refreshNodeProperties()
+    this.refreshNodeProperties();
     // this.leave(this.$refs.seeksRGNode)
     // console.log('node show:', this.nodeProps.text, this.$parent.$slots.node)
   },
   beforeDestroy() {
-    const elx = this.$refs.seeksRGNode
-    elx.remove()
+    const elx = this.$refs.seeksRGNode;
+    elx.remove();
   },
   methods: {
     refreshNodeProperties() {
-      this.nodeProps.el = this.$refs.seeksRGNode
+      this.nodeProps.el = this.$refs.seeksRGNode;
       // console.log('node 挂载 el:', this.nodeProps.text, this.nodeProps.el.offsetWidth, this.nodeProps.el.offsetHeight)
       // this.$nextTick(() => {
       //   this.nodeProps.el.offsetWidth = this.$refs.seeksRGNode.offsetWidth
@@ -129,96 +236,129 @@ export default {
     getNodeName() {
       // if (this.hovering) return 'N-' + this.nodeProps.seeks_id
       if (this.hovering) {
-        return this.nodeProps.text
-      }
-      if (this.nodeProps.width === undefined && this.nodeProps.nodeShape !== 0) {
-        return this.nodeProps.text
-      }
-      var _w = this.nodeProps.el.offsetWidth
-      var _h = this.nodeProps.el.offsetHeight
-      var _num_l = parseInt((_w - 20) / 20)
-      var _num_c = parseInt((_h - 20) / 20)
+        return this.nodeProps.text;
+      }
+      if (
+        this.nodeProps.width === undefined &&
+        this.nodeProps.nodeShape !== 0
+      ) {
+        return this.nodeProps.text;
+      }
+      var _w = this.nodeProps.el.offsetWidth;
+      var _h = this.nodeProps.el.offsetHeight;
+      var _num_l = parseInt((_w - 20) / 20);
+      var _num_c = parseInt((_h - 20) / 20);
       if (_num_l === -1 || _num_c === -1) {
-        return this.nodeProps.text
+        return this.nodeProps.text;
       }
-      var _length = _num_l * _num_c * 2
-      var _text_arr = []
-      var _current_length = 0
+      var _length = _num_l * _num_c * 2;
+      var _text_arr = [];
+      var _current_length = 0;
       for (var i = 0; i < this.nodeProps.text.length; i++) {
-        var _thisChar = this.nodeProps.text[i]
-        var _charCode = _thisChar.charCodeAt(0)
-        var _charLength = 1
+        var _thisChar = this.nodeProps.text[i];
+        var _charCode = _thisChar.charCodeAt(0);
+        var _charLength = 1;
         if (_charCode < 0 || _charCode > 255) {
-          _charLength = 2
+          _charLength = 2;
         }
-        if ((_current_length + _charLength) > _length) {
-          return _text_arr.join('') + '...'
+        if (_current_length + _charLength > _length) {
+          return _text_arr.join("") + "...";
         } else {
-          _current_length += _charLength
-          _text_arr.push(_thisChar)
+          _current_length += _charLength;
+          _text_arr.push(_thisChar);
         }
       }
-      return _text_arr.join('')
+      return _text_arr.join("");
       // return _num_l + '/' + _num_c
       // return this.nodeProps.text
     },
     expandOrCollapseNode(e) {
+      console.log("切换Node显示状态",this.nodeProps.lot.childs)
       if (this.nodeProps.expanded === false) {
-        this.nodeProps.expanded = true
+        this.nodeProps.expanded = true;
         this.nodeProps.lot.childs.forEach(thisNode => {
-          thisNode.isShow = true
-        })
-        this.$parent.onNodeExpandEvent(this.nodeProps, e)
+          if (!thisNode.nodeParent) {
+            thisNode.isShow = true;
+          }
+        });
+        this.$parent.onNodeExpandEvent(this.nodeProps, e);
       } else {
-        this.nodeProps.expanded = false
+        this.nodeProps.expanded = false;
         this.nodeProps.lot.childs.forEach(thisNode => {
-          thisNode.isShow = false
-        })
-        this.$parent.onNodeCollapseEvent(this.nodeProps, e)
+          if (!thisNode.nodeParent) {
+            thisNode.isShow = false;
+          }
+        });
+        this.$parent.onNodeCollapseEvent(this.nodeProps, e);
+      }
+    },
+    parentExpandOrCollapseNode(e) {
+      if (this.nodeProps.parentExpanded) {
+        this.nodeProps.parentExpanded = false;
+        this.nodeProps.lot.childs.forEach(thisNode => {
+          if (thisNode.nodeParent) {
+            thisNode.isShow = false;
+          }
+        });
+        // this.$parent.onNodeExpandEvent(this.nodeProps, e);
+      } else {
+        this.nodeProps.parentExpanded = true;
+        this.nodeProps.lot.childs.forEach(thisNode => {
+          if (thisNode.nodeParent) {
+            thisNode.isShow = true;
+          }
+        });
+        // this.$parent.onNodeCollapseEvent(this.nodeProps, e);
       }
+      this.parentExpandButtonClass=this.nodeProps.parentExpanded ? "c-collapsed" : "";
+      this.$parent.onNodeCollapseEvent(this.nodeProps, e);
     },
     onDragStart(e) {
       if (this.graphSetting.disableDragNode || this.nodeProps.disableDrag) {
-        return
+        return;
       }
-      this.dragging = true
-      this.hovering = false
-      SeeksRGUtils.startDrag(e, this.nodeProps, this.onNodeDraged)
+      this.dragging = true;
+      this.hovering = false;
+      SeeksRGUtils.startDrag(e, this.nodeProps, this.onNodeDraged);
     },
     onNodeDraged(x, y) {
       if (this.graphSetting.isMoveByParentNode) {
         this.nodeProps.lot.childs.forEach(thisCnode => {
-          thisCnode.x += x
-          thisCnode.y += y
-        })
+          thisCnode.x += x;
+          thisCnode.y += y;
+        });
       }
       if (Math.abs(x) + Math.abs(y) > 6) {
-        setTimeout(function() {
-          if (window.SeeksGraphDebug) console.log('delay end dragging', this.dragging)
-          this.dragging = false
-        }.bind(this), 100)
+        setTimeout(
+          function() {
+            if (window.SeeksGraphDebug)
+              console.log("delay end dragging", this.dragging);
+            this.dragging = false;
+          }.bind(this),
+          100
+        );
       } else {
-        this.dragging = false
+        this.dragging = false;
       }
     },
     onMouseHover() {
       if (this.dragging) {
-        return
+        return;
       }
-      this.hovering = true
+      this.hovering = true;
     },
     onMouseOut() {
-      this.hovering = false
+      this.hovering = false;
     },
     onclick(e) {
       if (this.dragging) {
-        return
+        return;
       }
       if (!this.nodeProps.disableDefaultClickEffect) {
-        this.graphSetting.checkedNodeId = this.nodeProps.id
+        this.graphSetting.checkedNodeId = this.nodeProps.id;
       }
       if (this.onNodeClick) {
-        this.onNodeClick(this.nodeProps, e)
+        this.onNodeClick(this.nodeProps, e);
       }
     },
     // beforeEnter(el) {
@@ -246,87 +386,94 @@ export default {
       // if (this.borderColor !== '') {
       //   return this.borderColor
       // }
-      if (col[0] === '#') {
-        var _s = col.substring(1)
+      if (col[0] === "#") {
+        var _s = col.substring(1);
         if (_s.length === 3) {
-          _s = _s[0] + _s[0] + _s[1] + _s[1] + _s[2] + _s[2]
+          _s = _s[0] + _s[0] + _s[1] + _s[1] + _s[2] + _s[2];
         }
         var _rgb_arr = [
-          parseInt(_s[0] + '' + _s[1], 16),
-          parseInt(_s[2] + '' + _s[3], 16),
-          parseInt(_s[4] + '' + _s[5], 16)
-        ]
-        if (window.SeeksGraphDebug) console.log('getLightColor1:', col, ':', _rgb_arr.join(','))
-        col = 'rgb(' + _rgb_arr.join(',') + ')'
-      }
-      var _st = col.substring(col.indexOf('(') + 1)
-      _st = _st.substring(0, _st.indexOf(')'))
-      var _rgb_string = _st.split(',')
+          parseInt(_s[0] + "" + _s[1], 16),
+          parseInt(_s[2] + "" + _s[3], 16),
+          parseInt(_s[4] + "" + _s[5], 16)
+        ];
+        if (window.SeeksGraphDebug)
+          console.log("getLightColor1:", col, ":", _rgb_arr.join(","));
+        col = "rgb(" + _rgb_arr.join(",") + ")";
+      }
+      var _st = col.substring(col.indexOf("(") + 1);
+      _st = _st.substring(0, _st.indexOf(")"));
+      var _rgb_string = _st.split(",");
       // console.log('getLightColor444:', _st, ':', _rgb_string.join(','))
       if (_rgb_string.length >= 3) {
         var _rgb_number = [
           parseInt(parseInt(_rgb_string[0]) * 0.9),
           parseInt(parseInt(_rgb_string[1]) * 0.9),
           parseInt(parseInt(_rgb_string[2]) * 0.9)
-        ]
-        if (window.SeeksGraphDebug) console.log('getLightColor2:', col, ':', _rgb_number.join(','))
-        this.borderColor = 'rgb(' + _rgb_number.join(',') + ', 0.3)'
-        return this.borderColor
+        ];
+        if (window.SeeksGraphDebug)
+          console.log("getLightColor2:", col, ":", _rgb_number.join(","));
+        this.borderColor = "rgb(" + _rgb_number.join(",") + ", 0.3)";
+        return this.borderColor;
       } else {
-        this.borderColor = col
-        return col
+        this.borderColor = col;
+        return col;
       }
     },
     isAllowShowNode(thisNode) {
-      const _r = thisNode.isShow !== false && thisNode.isHide !== true && (!thisNode.lot.parent || this.isAllowShowNode(thisNode.lot.parent, false) === true)
-      return _r
+      const _r =
+        thisNode.isShow !== false &&
+        thisNode.isHide !== true &&
+        (!thisNode.lot.parent ||
+          this.isAllowShowNode(thisNode.lot.parent, false) === true);
+      return _r;
     }
   }
-}
+};
 </script>
 
 <style>
-  .rg-icon {
+.rg-icon {
   width: 19px;
   height: 19px;
   vertical-align: 0px;
   fill: currentColor;
   overflow: hidden;
-  }
-  .el-icon-remove,.el-icon-circle-plus{
+}
+.el-icon-remove,
+.el-icon-circle-plus {
   cursor: pointer;
-  }
-  .rel-node-peel{
+}
+.rel-node-peel {
   clear: both;
-    padding:8px;
+  padding: 8px;
   position: absolute;
   font-size: 14px;
   /*border:green solid 1px;*/
-  }
-  .rel-node{
+}
+.rel-node {
   text-align: center;
-  }
+}
 
-  .rel-node-shape-1{
+.rel-node-shape-1 {
   /*border: #FD8B37 solid 1px;*/
   border-radius: 8px;
-    padding:5px;
-    padding-left:15px;
-    padding-right:15px;
-  }
-  .c-node-text{
-    height:100%;
-    width:100%;
+  padding: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.c-node-text {
+  height: 100%;
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  }
-  .rel-node-shape-0{
-    padding:10px;
-  }
-  .rel-node-shape-0{
-    width:80px;
-    height:80px;
+}
+.rel-node-shape-0 {
+  padding: 10px;
+}
+.rel-node-shape-0 {
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
   /*border: #FD8B37 solid 2px;*/
   /*text-align: left;*/
@@ -335,80 +482,80 @@ export default {
   /*text-overflow: ellipsis;*/
   /*overflow: hidden;*/
   /*word-break: break-all;*/
-  }
-  .rel-node-shape-0:hover{
+}
+.rel-node-shape-0:hover {
   /*overflow: visible;*/
   /*text-overflow: inherit;*/
-    box-shadow: 0px 0px 5px #FFC5A6;
-  }
-  /*.rel-node{*/
-    /*display: table;*/
-  /*}*/
-  /*.rel-node span{*/
-    /*display: table-cell;*/
-    /*vertical-align:middle;*/
-  /*}*/
-  .rel-node-type-button{
+  box-shadow: 0px 0px 5px #ffc5a6;
+}
+/*.rel-node{*/
+/*display: table;*/
+/*}*/
+/*.rel-node span{*/
+/*display: table-cell;*/
+/*vertical-align:middle;*/
+/*}*/
+.rel-node-type-button {
   border-radius: 25px;
   color: blue;
   cursor: pointer;
-  }
-  .rel-node-hover{
-  }
-  .rel-node-checked{
-    box-shadow: 0px 0px 10px #FD8B37;
+}
+.rel-node-hover {
+}
+.rel-node-checked {
+  box-shadow: 0px 0px 10px #fd8b37;
   /*border-color: #BA7909;*/
   /*background-color: #FD8B37;*/
   /*color: #ffffff;*/
   /* firefox bug fix - won't rotate at 90deg angles */
   -moz-transform: rotate(-89deg) translateX(-190px);
-    animation-timing-function:linear;
+  animation-timing-function: linear;
   animation: ACTRGNodeInit 2s;
-  }
-  .rel-node-selected{
-    box-shadow: 0px 0px 10px #FD8B37;
+}
+.rel-node-selected {
+  box-shadow: 0px 0px 10px #fd8b37;
   /*border-color: #BA7909;*/
   /*background-color: #FD8B37;*/
   /*color: #ffffff;*/
   /* firefox bug fix - won't rotate at 90deg angles */
   -moz-transform: rotate(-89deg) translateX(-190px);
-    animation-timing-function:linear;
+  animation-timing-function: linear;
   animation: ACTRGNodeInit 2s;
-  }
-  .rel-node-vtree-2 {
-    transform-origin:0 0;/* 设置旋转中心为左上角*/
+}
+.rel-node-vtree-2 {
+  transform-origin: 0 0; /* 设置旋转中心为左上角*/
   /*transform-origin:50% 50%;!* 设置放大中心为元素中心 *!*/
   transform: rotate(30deg) translateX(0px);
-  }
-  .rel-node-vtree {
-    width:130px;
-    height:45px;
+}
+.rel-node-vtree {
+  width: 130px;
+  height: 45px;
   text-align: left;
-  }
-  /*.c-node-text{*/
-    /*font-size: 12px;*/
-    /*display: inline-block;*/
-    /*width:100px;*/
-    /*height:16px;*/
-    /*margin-top:40px;*/
-    /*margin-left:-25px;*/
-    /*position:absolute;*/
-    /*word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;*/
-    /*text-align:center;*/
-  /*}*/
-  .c-btn-open-close{
+}
+/*.c-node-text{*/
+/*font-size: 12px;*/
+/*display: inline-block;*/
+/*width:100px;*/
+/*height:16px;*/
+/*margin-top:40px;*/
+/*margin-left:-25px;*/
+/*position:absolute;*/
+/*word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;*/
+/*text-align:center;*/
+/*}*/
+.c-btn-open-close {
   position: absolute;
-    height:100%;
-    width:19px;
+  height: 100%;
+  width: 19px;
   /*border:red solid 1px;*/
   display: flex;
   align-items: center;
   justify-content: center;
   /*border:#ff0000 solid 1px;*/
-  }
-  .c-btn-open-close span{
+}
+.c-btn-open-close span {
   width: 19px;
-    height:19px;
+  height: 19px;
   display: inline-block;
   text-align: center;
   border-radius: 15px;
@@ -417,70 +564,70 @@ export default {
   font-size: 19px;
   line-height: 16px;
   background-size: 100% 100%;
-  }
-  .c-expanded{
+}
+.c-expanded {
   /*background-image: url(data:image/svg+xml;%20charset=utf8,%3Csvg%20t=%221606310217820%22%20viewBox=%220%200%201024%201024%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20p-id=%223373%22%20width=%2232%22%20height=%2232%22%3E%3Cpath%20d=%22M853.333333%20480H544V170.666667c0-17.066667-14.933333-32-32-32s-32%2014.933333-32%2032v309.333333H170.666667c-17.066667%200-32%2014.933333-32%2032s14.933333%2032%2032%2032h309.333333V853.333333c0%2017.066667%2014.933333%2032%2032%2032s32-14.933333%2032-32V544H853.333333c17.066667%200%2032-14.933333%2032-32s-14.933333-32-32-32z%22%20p-id=%223374%22%20fill=%22white%22%3E%3C/path%3E%3C/svg%3E);
     */
-    font-size:12px !important;
+  font-size: 12px !important;
   color: #000 !important;
-    background-color: #FFF !important;
+  background-color: #fff !important;
   box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08);
   padding-top: 2px !important;
-  }
-  .c-collapsed{
+}
+.c-collapsed {
   background-image: url(data:image/svg+xml;%20charset=utf8,%3Csvg%20t=%221606310454619%22%20class=%22icon%22%20viewBox=%220%200%201024%201024%22%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20p-id=%223662%22%20width=%22128%22%20height=%22128%22%3E%3Cpath%20d=%22M853.333333%20554.666667H170.666667c-23.466667%200-42.666667-19.2-42.666667-42.666667s19.2-42.666667%2042.666667-42.666667h682.666666c23.466667%200%2042.666667%2019.2%2042.666667%2042.666667s-19.2%2042.666667-42.666667%2042.666667z%22%20p-id=%223663%22%20fill=%22white%22%3E%3C/path%3E%3C/svg%3E);
-  }
-  .c-expand-positon-left{
-    margin-top:-8px;
-    margin-left:-18px;
-  }
-  .c-expand-positon-right{
-    height:100%;
-    width:100%;
+}
+.c-expand-positon-left {
+  margin-top: -8px;
+  margin-left: -36px;
+}
+.c-expand-positon-right {
+  height: 100%;
+  width: 100%;
   justify-content: center;
-  }
-  .c-expand-positon-right span{
-    margin-top:-18px;
-    margin-right:-18px;
-    margin-left:100%;
-  }
-  .c-expand-positon-bottom{
-    height:100%;
-    width:100%;
-    margin-top:7px;
-    margin-left:-8px;
+}
+.c-expand-positon-right span {
+  margin-top: -18px;
+  margin-right: -18px;
+  margin-left: 100%;
+}
+.c-expand-positon-bottom {
+  height: 100%;
+  width: 100%;
+  margin-top: 7px;
+  margin-left: -8px;
   align-items: flex-end;
   justify-content: center;
-  }
-  .c-expand-positon-top{
-    height:18px;
-    width:100%;
-    margin-top:-20px;
-    margin-left:-6px;
+}
+.c-expand-positon-top {
+  height: 18px;
+  width: 100%;
+  margin-top: -20px;
+  margin-left: -6px;
   align-items: flex-end;
   justify-content: center;
-  }
-  @keyframes ACTRGNodeInit {
+}
+@keyframes ACTRGNodeInit {
   from {
-      box-shadow: 0px 0px 15px #FD8B37;
+    box-shadow: 0px 0px 15px #fd8b37;
   }
   15% {
     box-shadow: 0px 0px 1px rgb(46, 78, 143);
   }
   30% {
-      box-shadow: 0px 0px 15px #FD8B37;
+    box-shadow: 0px 0px 15px #fd8b37;
   }
   45% {
     box-shadow: 0px 0px 1px rgb(46, 78, 143);
   }
   60% {
-      box-shadow: 0px 0px 15px #FD8B37;
+    box-shadow: 0px 0px 15px #fd8b37;
   }
   to {
     box-shadow: 0px 0px 1px rgb(46, 78, 143);
   }
-  }
-  .rel-diy-node{
-    padding:0px;
-  }
+}
+.rel-diy-node {
+  padding: 0px;
+}
 </style>

src/components/relation/core4vue/SeeksRGUtils.js

@@ -98,7 +98,11 @@ SeeksRGUtils.json2Node = function(originData) {
     disableDrag: originData.disableDrag !== undefined ? originData.disableDrag : false,
     data: originData.data !== undefined ? originData.data : {},
     childNum:originData.childNum !==undefined?originData.childNum:0,
-    nodeParent:originData.nodeParent!==undefined?originData.nodeParent:false
+    nodeParent:originData.nodeParent!==undefined?originData.nodeParent:false,
+    rightNode:originData.rightNode!==undefined?originData.rightNode:false,
+    rootId:originData.rootId!==undefined?originData.rootId:'',
+    rightRootId:originData.rightRootId!==undefined?originData.rightRootId:'',
+    sourceData:originData.sourceData!==undefined?originData.sourceData:{}
   }
   if(jsonData.lot === undefined) jsonData.lot = { childs: [], parent: undefined, eached: false, strength: 0 }
   if(jsonData.lot.childs === undefined) jsonData.lot.childs = []

src/components/relation/core4vue/layouters/SeeksBidirectionalTreeLayouter.js

@@ -3,7 +3,6 @@ import SeeksGraphMath from '../SeeksGraphMath'
 function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
   this.graphSetting = graphSetting
   this.config = layoutSetting || {}
-  console.log('new SeeksBidirectionalTreeLayouter:', this.config)
   if (!this.config.from) this.config.from = 'left'
   if (this.config.levelDistance && typeof this.config.levelDistance === 'string') {
     this.config.levelDistanceArr = this.config.levelDistance.split(',').map(thisNum => parseInt(thisNum))
@@ -12,7 +11,6 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
   this.allNodes = []
   this.__origin_nodes = []
   this.refresh = function() {
-    console.log('SeeksBidirectionalTreeLayouter:refresh:nodes:', this.__origin_nodes.length)
     this.placeNodes(this.__origin_nodes, this.rootNode)
   }
   this.analysisNodes4Didirectional = function(willLayoutNodes, thisLevelNodes, thisDeep, analyticResult, levelDirect) {
@@ -69,7 +67,7 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
         thisNode.targetTo.forEach((thisTarget) => {
           if (!thisTarget.lot)thisTarget.lot = { eached: false }
           if (!thisTarget.lot.eached) {
-            if (SeeksGraphMath.isAllowShowNode(thisTarget)) {
+            if (true) {
               thisTarget.lot.eached = true
               thisTarget.lot.parent = thisNode
               thisTarget.lot.index_of_parent = __thisTargetIndex++
@@ -83,10 +81,10 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
               thisNode.lot.childs.push(thisTarget)
               // console.log('hide node:', thisTarget.name, 'from:', thisNode.text)
             }
+            
           }
         })
         if(thisNode.targetFrom && thisNode.targetFrom.length>0){
-          console.log('well comming',thisNode.targetFrom)
           thisNode.targetFrom.forEach((thisTarget) => {
             if (!thisTarget.lot)thisTarget.lot = { eached: false }
             if (!thisTarget.lot.eached && thisTarget.nodeParent) {
@@ -99,9 +97,11 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
                 // __prev_node = thisTarget
                 thisNode.lot.childs.push(thisTarget)
                 newLevelNodes.push(thisTarget)
-                __thisNode_child_size++
+                //__thisNode_child_size++
               } else {
                 thisNode.lot.childs.push(thisTarget)
+                newLevelNodes.push(thisTarget)
+                //__thisNode_child_size++
                 // console.log('hide node:', thisTarget.name, 'from:', thisNode.text)
               }
             }
@@ -125,10 +125,12 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
     } else {
       willLayoutNodes.forEach(thisNode => {
         if (thisNode.lot.childs_size > 0) {
+         
           thisNode.lot.strengthWithChilds = 0
         }
       })
       willLayoutNodes.forEach(thisNode => {
+        
         if (thisNode.lot.childs_size === 0) {
           thisNode.lot.strengthWithChilds = 1
           SeeksGraphMath.conductStrengthToParents(thisNode)
@@ -141,7 +143,6 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
     }
   }
   this.placeNodes = function(allNodes, rootNode) {
-    console.log('SeeksBidirectionalTreeLayouter:placeNodes',allNodes)
     if (!rootNode) {
       console.error('root is null')
       return
@@ -179,11 +180,8 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
       max_length: 1,
       max_strength: 1
     }
-    console.log("编号1：",JSON.stringify(this.allNodes))
     this.analysisNodes4Didirectional(this.allNodes, [this.rootNode], 0, analyticResult, 1)
-    console.log("编号2：",this.allNodes.length)
     this.placeNodesPosition(this.rootNode, this.allNodes, analyticResult)
-    console.log("编号3：",this.allNodes.length)
 
     // console.log('根据数据调整画板高度')
     // if (this.config.from === 'left' || this.config.from === 'right') {
@@ -240,11 +238,9 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
         rootNode.lot.x = parseInt(__mapWidth * 0.3 - rootNode.el.offsetWidth) / 2 + _center_offset_x
         rootNode.lot.y = parseInt(__mapHeight / 2 - rootNode.el.offsetHeight / 2) + _center_offset_y
       }
-      console.log('设置根节点位置:', rootNode.text, rootNode.x, rootNode.y, this.graphSetting.canvasSize.width, this.graphSetting.canvasSize.height, this.graphSetting.canvasOffset.x, this.graphSetting.canvasOffset.y)
       rootNode.x = rootNode.lot.x + __offsetX
       rootNode.y = rootNode.lot.y + __offsetY
     } else {
-      console.log('固定位置的rootNode:', rootNode.text, rootNode.x, rootNode.y)
       if (rootNode.origin_x === undefined) {
         rootNode.origin_x = rootNode.x
         rootNode.origin_y = rootNode.y
@@ -253,7 +249,6 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
       rootNode.lot.y = rootNode.origin_y
       rootNode.x = rootNode.lot.x + __offsetX
       rootNode.y = rootNode.lot.y + __offsetY
-      console.log('固定位置的rootNode:', rootNode.text, rootNode.x, rootNode.y)
     }
     rootNode.lot.placed = true
     var dynamicSizeConfig = {
@@ -261,13 +256,164 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
       __mapHeight
     }
     this.placeRelativePosition(rootNode, analyticResult, dynamicSizeConfig)
+    let mainNodes=allNodes.filter(x=>x.id.indexOf('main')!=-1)
+    let maxlevel=0
+    //计算种子
+    mainNodes.forEach(thisNode=>{
+      let temp=allNodes.filter(x=>x.targetTo&&x.targetTo.length>0&& x.targetTo[0].id==thisNode.id&&x.nodeParent)
+      if(temp && temp.length>1){
+        //let begin=thisNode.lot.y-((temp.length-1)*100/2)
+        allNodes.forEach(x=>{
+          if(x.lot.level>maxlevel){
+            maxlevel=x.lot.level
+          }
+          // if(x.targetTo&&x.targetTo.length>0&& x.targetTo[0].id==thisNode.id&&x.nodeParent){
+          //   x.lot.y=begin
+          //   begin+=100
+          // }
+          if(x.id==thisNode.id){
+            x.parentNum=temp.length
+          }
+        })
+      }
+    })
+    let zongHeight=0
+    mainNodes.forEach(thisNode=>{
+      let parentNodes=allNodes.filter(x=>x.nodeParent&& x.lot.parent && x.lot.parent.id==thisNode.id && x.isShow)
+      if(parentNodes){
+        let sumHeight=0
+        parentNodes.forEach(x=>{
+          let maxHeight=1
+          for (let i = maxlevel; i > 2; i--) {
+            let levelCount=allNodes.filter(y=>y.rootId==x.id&&y.lot.level==i&&y.isShow)
+            if(levelCount && levelCount.length>maxHeight){
+              maxHeight=levelCount.length
+            }        
+          }
+          sumHeight+=maxHeight
+          x.maxHeight=maxHeight
+        })
+        thisNode.align='left'
+        thisNode.maxHeight=sumHeight
+        zongHeight+=sumHeight
+      }
+    })
+    let rightZongHeight=0
+    mainNodes.forEach(thisNode=>{
+      let parentNodes=allNodes.filter(x=>!x.nodeParent && x.lot.parent && x.lot.parent.id==thisNode.id && x.isShow)
+      if(parentNodes){
+        let sumHeight=0
+        parentNodes.forEach(x=>{
+          let maxHeight=1
+          for (let i = maxlevel; i > 2; i--) {
+            let levelCount=allNodes.filter(y=>y.rightRootId==x.id&&y.lot.level==i&&y.isShow)
+            if(levelCount && levelCount.length>maxHeight){
+              maxHeight=levelCount.length
+            }        
+          }
+          sumHeight+=maxHeight
+          x.maxHeight=maxHeight //>x.maxHeight?maxHeight:x.maxHeight
+        })
+        if(thisNode.maxHeight<=sumHeight){
+          thisNode.leftMaxHeight=thisNode.maxHeight
+          thisNode.maxHeight=sumHeight
+          thisNode.align='right'
+        }else{
+          thisNode.rightMaxHeight=sumHeight
+        }
+        rightZongHeight+=sumHeight
+      }
+    })
+    zongHeight=rightZongHeight>zongHeight?rightZongHeight:zongHeight
+    console.log("zongHeight",zongHeight)
+    //计算偏移量
+    if(zongHeight>=0 && mainNodes.length>0){
+      zongHeight=zongHeight<mainNodes.length?mainNodes.length:zongHeight
+      let beginY=rootNode.lot.y-(zongHeight*100/2)//((mainNodes[mainNodes.length-1].lot.y-mainNodes[0].lot.y)/2)+(zongHeight*100/2)
+      mainNodes.forEach((thisNode)=>{
+        if(zongHeight>0){
+          let parentNodes=allNodes.filter(x=>x.nodeParent && x.lot.parent.id==thisNode.id && x.isShow)
+          let tempBeginY=beginY
+          if(thisNode.align=='right'){
+            tempBeginY=beginY+((thisNode.maxHeight-thisNode.leftMaxHeight)*50)
+          }
+          parentNodes.forEach(x=>{
+            tempBeginY+=x.maxHeight*100/2
+            x.lot.y=tempBeginY
+            tempBeginY+=x.maxHeight*100/2
+          })
+
+          let rparentNodes=allNodes.filter(x=>!x.nodeParent && x.lot.parent && x.lot.parent.id==thisNode.id && x.isShow)
+          let rtempBeginY=beginY
+          if(thisNode.align=='left'){
+            rtempBeginY=beginY+((thisNode.maxHeight-thisNode.rightMaxHeight)*50)
+          }
+          console.log('rtempBeginY',rtempBeginY)
+          rparentNodes.forEach(x=>{
+            rtempBeginY+=x.maxHeight*100/2
+            x.lot.y=rtempBeginY
+            rtempBeginY+=x.maxHeight*100/2
+          })
+        }
+        thisNode.maxHeight=thisNode.maxHeight==0?1:thisNode.maxHeight
+        beginY+=thisNode.maxHeight*100/2
+        thisNode.lot.y=beginY
+        beginY+=thisNode.maxHeight*100/2
+      })
+    }
+    // allNodes.forEach(x=>{
+    //   if(x.rightNode || x.id.indexOf('child_')){
+    //     let parentNode=x.lot.parent
+    //     if(parentNode){
+    //       //获取上级坐标
+    //       let tempY=parentNode.lot.y
+    //       let index=parentNode.lot.childs.indexOf(x)
+    //       tempY=(tempY-((parentNode.childNum-1)*100/2))+(100*index)
+    //       x.lot.y=tempY
+    //       if(x.rightNode){
+    //         let tempX=parentNode.lot.x-420
+    //         x.lot.x=tempX
+    //       }
+    //     }
+    //   }
+    // })
+    allNodes.forEach(x=>{
+      if(!x.isShow)return;
+      if(x.rightNode){
+        let parentNode=x.lot.parent
+        //获取上级坐标
+        let tempX=parentNode.lot.x-420
+        let tempY=parentNode.lot.y
+        let index=parentNode.lot.childs.indexOf(x)
+        tempY=(tempY-((parentNode.lot.childs.length-1)*100/2))+(100*index)
+        x.lot.y=tempY
+        if(x.rightNode){
+          x.lot.x=tempX
+        }
+      }else if(x.id.indexOf('child')!=-1 && x.lot.parent && x.lot.parent.id.indexOf("main")==-1){
+        let parentNode=x.lot.parent
+        if (parentNode) {
+          let tempY=parentNode.lot.y
+          let index=x.lot.index_of_parent
+          tempY=(tempY-((parentNode.lot.childs.length-1)*100/2))+(100*index)
+          x.lot.y=tempY
+        }
+        console.log('捕获Child:',x,parentNode)
+      }
+    })
     allNodes.forEach(thisNode => {
       // if (rootNode === thisNode) {
       //   var _root_offset_x = this.config.root_offset_x || 0
       //   thisNode.x = thisNode.x + _root_offset_x
       //   return
       // }
-      console.log('计算node坐标：',thisNode.lot.x,thisNode.lot.y,thisNode)
+      // if(thisNode.id.indexOf('main')!=-1){
+      //   mainNodes.push(thisNode)
+      // }
+      if(thisNode.nodeParent){
+        thisNode.lot.x=thisNode.targetTo[0].lot.x-420
+        // thisNode.lot.y=thisNode.targetTo[0].lot.y
+      }
       if (thisNode.fixed === true) {
         thisNode.lot.placed = true
         return
@@ -281,6 +427,7 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
       thisNode.y = thisNode.offset_y + thisNode.lot.y + __offsetY
       thisNode.lot.placed = true
     })
+    
   }
   this.placeRelativePosition = function(rootNode, analyticResult, dynamicSizeConfig) {
     if (this.config.from === 'left' || this.config.from === 'right') {
@@ -295,14 +442,13 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
       if (__per_height < __min_per_height)__per_height = __min_per_height
       if (__per_height > __max_per_height)__per_height = __max_per_height
       this.allNodes.forEach(thisNode => {
-        console.log('进来了......',thisNode)
+        if(thisNode.nodeParent) return;
         if (thisNode.fixed === true) return
         if (thisNode.lot.placed === true) return
         if (thisNode === rootNode) return
         // console.log('Place node:', thisNode.text, thisNode)
         // console.log('Place node lot:', thisNode.lot.subling.level, thisNode.lot.index_of_level, 'of', thisNode.lot.subling.all_size, thisNode.lot.subling.all_strength)
         if (this.config.from === 'right') {
-          console.log('进来了......',thisNode)
           thisNode.lot.x = rootNode.lot.x - this.getLevelDistance(thisNode, thisNode.lot.subling.level, __per_width)
         } else {
           
@@ -311,7 +457,7 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
         
       })
       this.allNodes.forEach(thisNode => {
-        if (thisNode.fixed === true) return
+        if (thisNode.fixed === true || this.nodeParent) return
         if (thisNode.lot.level !== 0) {
           thisNode.lot.y = rootNode.lot.y + __per_height * ((analyticResult.max_strength / -2) + thisNode.lot.strengthWithChilds_from + thisNode.lot.strengthWithChilds / 2)
         }
@@ -342,7 +488,7 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
       if (__per_height < __min_per_height)__per_height = __min_per_height
       if (__per_height > __max_per_height)__per_height = __max_per_height
       this.allNodes.forEach(thisNode => {
-        if (thisNode.fixed === true) return
+        if (thisNode.fixed === true||this.nodeParent) return
         if (thisNode.lot.placed === true) return
         if (thisNode === rootNode) return
         // console.log('Place node:', thisNode.text, thisNode)
@@ -355,8 +501,7 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
         }
       })
       this.allNodes.forEach(thisNode => {
-        console.log('good join',thisNode)
-        if (thisNode.fixed === true) return
+        if (thisNode.fixed === true || this.nodeParent) return
         if (thisNode.lot.level !== 0) {
           // console.log('Place node xxxx:', thisNode.lot.strengthWithChilds_from, thisNode.lot.strengthWithChilds, __per_width)
           thisNode.lot.x = -58 + rootNode.lot.x + __per_width * ((analyticResult.max_strength / -2) + thisNode.lot.strengthWithChilds_from + thisNode.lot.strengthWithChilds / 2)

src/pages/okr/okr-align-view.vue

@@ -9,9 +9,13 @@
         :options="graphOptions"
         :on-node-expand="onNodeExpand"
         :on-node-collapse="onNodeCollapse"
+        :on-node-click="onNodeClick"
       >
       </SeeksRelationGraph>
     </div>
+    <q-dialog v-model="showOkrInfo" maximized full-height  seamless position="right">
+      <okr-detail-info :obj="chosenObj" :proid="proid"></okr-detail-info>
+    </q-dialog>
   </div>
 </template>
 
@@ -21,8 +25,9 @@ import {
   queryUserOKRNextAlignView
 } from "../../api/okr/work";
 import SeeksRelationGraph from "../../components/relation/index";
+import okrDetailInfo from '../../components/okr/okr-details-info'
 export default {
-  components: { SeeksRelationGraph },
+  components: { SeeksRelationGraph,okrDetailInfo },
   data() {
     return {
       g_loading: true,
@@ -46,11 +51,11 @@ export default {
           }
         ],
         defaultLineMarker: {
-          'markerWidth': 12,
-          'markerHeight': 12,
-          'refX': 6,
-          'refY': 6,
-          'data': 'M2,2 L10,6 L2,10 L6,6 L2,2'
+          markerWidth: 12,
+          markerHeight: 12,
+          refX: 6,
+          refY: 6,
+          data: "M2,2 L10,6 L2,10 L6,6 L2,2"
         },
         defaultExpandHolderPosition: "right",
         defaultNodeShape: 1,
@@ -60,15 +65,17 @@ export default {
         defaultNodeBorderWidth: 0,
         defaultLineColor: "#cecece",
         defaultNodeColor: "rgba(255,255,255,1)",
-        defaultNodeFontColor: "rgba(0,0,0,1)"
+        defaultNodeFontColor: "rgba(0,0,0,1)",
       },
-      proid: 51,
+      proid: 53,
       rootObjList: [],
       graph_json_data: {
         rootId: "0",
         nodes: [],
         links: []
-      }
+      },
+      showOkrInfo:false,
+      chosenObj:null
     };
   },
   created() {},
@@ -84,6 +91,10 @@ export default {
         this.genernalNodes();
       });
     },
+    onNodeClick(nodeObject, $event) {
+      this.chosenObj=nodeObject.sourceData
+      this.showOkrInfo=true
+    },
     genernalNodes() {
       let node = {
         id: "0",
@@ -91,22 +102,32 @@ export default {
         text: "111"
       };
       this.graph_json_data.nodes.push(node);
-      this.rootObjList.forEach((x,i) => {
-        let q=`main-${this.randomString()}`
-        this.graph_json_data.nodes.push(this.formatNode(x, q));
+      this.rootObjList.forEach((x, i) => {
+        let q = `main-${this.randomString()}`;
+        // if(x.ChildList&&x.ChildList.length>0){
+        //   let tempChild=JSON.parse(JSON.stringify(x.ChildList[0]))
+        //   x.ChildList.push(tempChild)
+        //   x.ChildList.push(tempChild)
+        //   x.ChildList.push(tempChild)
+        //   x.ChildList.push(tempChild)
+        // }
+        this.graph_json_data.nodes.push(this.formatNode(x, q, false));
         this.graph_json_data.links.push(
           this.formatLink("0", `${q}_${x.Id}`, true)
         );
         x.ChildList.forEach(y => {
-          let qy=`child-${this.randomString()}`
-          this.graph_json_data.nodes.push(this.formatNode(y, qy));
+          let qy = `child-${this.randomString()}`;
+          let newNode=this.formatNode(y, qy, false)
+          // newNode.rightRootId=`${q}_${x.Id}`
+          this.graph_json_data.nodes.push(newNode);
           this.graph_json_data.links.push(
             this.formatLink(`${q}_${x.Id}`, `${qy}_${y.Id}`, false)
           );
         });
+       
         x.ParentList.forEach(z => {
-          let zy=`parent-${this.randomString()}`
-          this.graph_json_data.nodes.push(this.formatNode(z, zy,true));
+          let zy = `parent-${this.randomString()}`;
+          this.graph_json_data.nodes.push(this.formatNode(z, zy, true));
           this.graph_json_data.links.push(
             this.formatLink(`${zy}_${z.Id}`, `${q}_${x.Id}`, false)
           );
@@ -120,14 +141,18 @@ export default {
             this.graph_json_data.rootId
           ).lot.childs;
           level_1_nodes.forEach(thisLevel1Node => {
+            if(!thisLevel1Node.nodeParent){
+              thisLevel1Node.parentExpanded=false
+            }
             this.applyCollapseStyle2Node(thisLevel1Node);
+            
           });
           this.$refs.seeksRelationGraph.refresh();
         }
       );
     },
     randomString() {
-      let length=6
+      let length = 6;
       var str =
         "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
       var result = "";
@@ -142,7 +167,7 @@ export default {
       }
       let node = {
         id,
-        disableDrag: false,
+        disableDrag: true,
         html: this.formatHtml(
           obj.EmName,
           obj.ProgressState,
@@ -156,13 +181,13 @@ export default {
           ? obj.ChildNum
           : 0
       };
-      if (prev.indexOf('child') != -1) {
+      if (prev.indexOf("child") != -1) {
         node.childNum = obj.ChildList
           ? obj.ChildList.length
           : obj.ChildNum
           ? obj.ChildNum
           : 0;
-      } else if (prev.indexOf('parent') != -1) {
+      } else if (prev.indexOf("parent") != -1) {
         node.childNum = obj.ParentList
           ? obj.ParentList.length
           : obj.ParentNum
@@ -183,10 +208,14 @@ export default {
         };
         node.expandHolderPosition = "left";
         node.expanded = false;
-        if (isParent) {
-          node.nodeParent=true          
+
+        console.log("接收到父级：", obj, node);
       }
+      if (isParent) {
+        node.nodeParent = true;
+        node.rootId=node.id
       }
+      node.sourceData=obj
       return node;
     },
     formatLink(from, to, isHide) {
@@ -198,10 +227,16 @@ export default {
       };
     },
     formatHtml(name, status, progress, statusName, title) {
-      let html = `<div class="parent-card"><div class="o-card flex row"><div class="col-auto q-mr-xs"><div style="width:20px;height:20px;font-size:14px;" class="bg-green-2 text-green vertical-middle rounded-borders text-center">${name.substring(
+      let color='primary'
+      if(status==2){
+        color="warning"
+      }else if(status==3){
+        color="negative"
+      }
+      let html = `<div class="parent-card"><div class="o-card flex row" style="border-left:3px solid var(--q-color-${color})"><div class="col-auto q-mr-xs"><div style="width:20px;height:20px;font-size:14px;" class="bg-green-2 text-green vertical-middle rounded-borders text-center">${name.substring(
         0,
         1
-      )}</div></div><div class="col q-ml-xs"><div class="flex row q-mb-xs"><div class="text-grey col f12">${name}</div><div class="text-negative text-weight-bold f12">${statusName} ${progress}%</div></div><div class="q-mt-xs ellipsis-2-lines" title="${title}">${title}</div></div></div></div>`;
+      )}</div></div><div class="col q-ml-xs"><div class="flex row q-mb-xs"><div class="text-grey col f12">${name}</div><div class="text-${color} text-weight-bold f12">${statusName} ${progress}%</div></div><div class="q-mt-xs ellipsis-2-lines" title="${title}">${title}</div></div></div></div>`;
       return html;
     },
     onSizeOptionChanged() {
@@ -217,6 +252,7 @@ export default {
       // _node的子节点将被隐藏，同时让_node右侧显示一个加号，点击后可以展开子节点
       if (_node.lot.childs.length > 0) {
         _node.lot.childs.forEach(thisChildNode => {
+         
             thisChildNode.isShow = false;
             this.applyCollapseStyle2Node(thisChildNode);
         });
@@ -251,9 +287,9 @@ export default {
       });
     },
     loadChildNodesFromRemoteServer(node, callback) {
-      let Type=2
-      if(node.id.indexOf('parent')!=-1){
-        Type=1
+      let Type = 2;
+      if (node.id.indexOf("parent") != -1) {
+        Type = 1;
       }
       queryUserOKRNextAlignView({
         PeriodId: this.proid,
@@ -265,16 +301,29 @@ export default {
             nodes: [],
             links: []
           };
-          let zy=`child-${this.randomString()}`
-          if(node.id.indexOf('parent')!=-1){
-            zy=`parent-${this.randomString()}`
-          }
+          let zy = `child-${this.randomString()}`;
+          // if (node.id.indexOf("parent") != -1) {
+          //   zy = `parent-${this.randomString()}`;
+          // }
           r.Data.forEach(x => {
-            _new_json_data.nodes.push(this.formatNode(x, zy));
-            if(zy.indexOf('child')!=-1){
-              _new_json_data.links.push(this.formatLink(node.id, `${zy}_${x.Id}`, false));
-            }else{
-               _new_json_data.links.push(this.formatLink(`${zy}_${x.Id}`,node.id, false));
+            //_new_json_data.nodes.push(this.formatNode(x, zy));
+            let newNode=this.formatNode(x, zy)
+            if(node.nodeParent||node.rightNode){
+              newNode.rightNode=newNode
+              newNode.rootId=node.rootId
+            }else if(node.rightRootId){
+              newNode.rightRootId=node.rightRootId
+            }
+
+            _new_json_data.nodes.push(newNode);
+            if (zy.indexOf("child") != -1) {
+              _new_json_data.links.push(
+                this.formatLink(node.id, `${zy}_${x.Id}`, false)
+              );
+            } else {
+              _new_json_data.links.push(
+                this.formatLink(`${zy}_${x.Id}`, node.id, false)
+              );
             }
           });
           callback(_new_json_data);