Skip to content

C
confucius
Commit adc7ef25 authored by 黄奎's avatar 黄奎
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/luochao/confucius

parents 8aef43bc ed29a253
Hide whitespace changes
Inline Side-by-side
Showing with 998 additions and 405 deletions
quasar.conf.js
View file @ adc7ef25
...@@ -48,7 +48,7 @@ module.exports = function (ctx) { ...@@ -48,7 +48,7 @@ module.exports = function (ctx) {
build: { build: {
vueRouterMode: 'hash', // available values: 'hash', 'history' vueRouterMode: 'hash', // available values: 'hash', 'history'
env: ctx.dev ? { 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' API: 'http://eduapi.oytour.com/api'
}, },
......
src/App.vue
View file @ adc7ef25
...@@ -175,7 +175,9 @@ body, ...@@ -175,7 +175,9 @@ body,
.micfont { .micfont {
font-family: perfectFont !important; font-family: perfectFont !important;
} }
.fixed-right, .absolute-right{
overflow: unset;
}
.dialog-out-close { .dialog-out-close {
background: var(--q-color-primary); background: var(--q-color-primary);
position: absolute !important; position: absolute !important;
......
src/api/okr/work.js
View file @ adc7ef25
...@@ -281,4 +281,11 @@ export function queryUserOKRNextAlignView(data){ ...@@ -281,4 +281,11 @@ export function queryUserOKRNextAlignView(data){
method: 'post', method: 'post',
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
View file @ adc7ef25
...@@ -197,23 +197,7 @@ ...@@ -197,23 +197,7 @@
</q-item-section> </q-item-section>
<q-item-section>提交审核</q-item-section> <q-item-section>提交审核</q-item-section>
</q-item> </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 <q-item
class="items-center" class="items-center"
clickable clickable
......
src/components/okr/okr-align.vue
View file @ adc7ef25
<template> <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 <svg
width="24px" width="24px"
height="24px" height="24px"
style="margin-right:8px" 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" viewBox="0 0 24 24"
version="1.1" 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 <g
id="shangduiqi" id="shangduiqi"
...@@ -27,8 +42,8 @@ ...@@ -27,8 +42,8 @@
<template v-for="(x, i) in obj.ParentList"> <template v-for="(x, i) in obj.ParentList">
<div <div
class="hover-primary remark-font cursor-pointer q-mr-xs" class="hover-primary remark-font cursor-pointer q-mr-xs"
:style="{'margin-top':direction=='up'?'0px':'20px'}" :style="{ 'margin-top': direction == 'up' ? '0px' : '20px' }"
v-if="x.AlignList.length > 0 && direction=='up'" v-if="x.AlignList.length > 0 && direction == 'up'"
:key="i" :key="i"
> >
<span>{{ x.AccountName }}</span <span>{{ x.AccountName }}</span
...@@ -46,11 +61,11 @@ ...@@ -46,11 +61,11 @@
</q-popup-proxy> </q-popup-proxy>
</div> </div>
</template> </template>
<template v-for="(x, i) in obj.ChildList"> <template v-for="(x, i) in obj.ChildList">
<div <div
class="hover-primary remark-font cursor-pointer q-mr-xs" class="hover-primary remark-font cursor-pointer q-mr-xs"
:style="{'margin-top':direction=='up'?'0px':'18px'}" :style="{ 'margin-top': direction == 'up' ? '0px' : '18px' }"
v-if="x.AlignList.length > 0 && direction=='down'" v-if="x.AlignList.length > 0 && direction == 'down'"
:key="i" :key="i"
> >
<span>{{ x.AccountName }}</span <span>{{ x.AccountName }}</span
...@@ -67,7 +82,10 @@ ...@@ -67,7 +82,10 @@
</q-popup-proxy> </q-popup-proxy>
</div> </div>
</template> </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 <q-icon
name="iconfont icon-add" name="iconfont icon-add"
class="cursor-pointer" class="cursor-pointer"
...@@ -75,7 +93,11 @@ ...@@ -75,7 +93,11 @@
></q-icon> ></q-icon>
<span>添加对齐</span> <span>添加对齐</span>
<q-popup-proxy style="z-index: 9999;"> <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> </q-popup-proxy>
</div> </div>
</div> </div>
...@@ -85,7 +107,7 @@ ...@@ -85,7 +107,7 @@
import searchOkr from "./search-okr"; import searchOkr from "./search-okr";
import alignInfo from "./align-info"; import alignInfo from "./align-info";
export default { export default {
props: ["obj", "periodId",'direction','showOnly'], props: ["obj", "periodId", "direction", "showOnly"],
components: { components: {
searchOkr, searchOkr,
alignInfo alignInfo
......
src/components/okr/okr-details-info.vue 0 → 100644
View file @ adc7ef25
<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
View file @ adc7ef25
...@@ -2,15 +2,17 @@ ...@@ -2,15 +2,17 @@
<q-card class="q-py-md no-shadow q-mr-md okr-add"> <q-card class="q-py-md no-shadow q-mr-md okr-add">
<q-input <q-input
v-model="newObjective.Title" v-model="newObjective.Title"
type="textare"
autogrow autogrow
ref="obj_content" ref="obj_content"
:outlined="newBoxState" :outlined="newBoxState"
:placeholder="newObjective.placeHolder" :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 readonly
> >
<template v-slot:before> <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 <inline-svg
class="svg-icon" class="svg-icon"
:class="{ :class="{
...@@ -304,7 +306,7 @@ ...@@ -304,7 +306,7 @@
</div> </div>
</div> </div>
<q-card flat class="q-mt-md"> <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"> <div class="flex row items-center">
<q-avatar <q-avatar
size="40px" size="40px"
......
src/components/relation/core4vue/SeeksGraphMath.js
View file @ adc7ef25
...@@ -476,7 +476,8 @@ var SeeksGraphMath = { ...@@ -476,7 +476,8 @@ var SeeksGraphMath = {
} }
}, },
conductStrengthToParents(node) { 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 node.lot.parent.lot.strengthWithChilds += 1
this.conductStrengthToParents(node.lot.parent) this.conductStrengthToParents(node.lot.parent)
} }
......
src/components/relation/core4vue/SeeksRGNode.vue
View file @ adc7ef25
...@@ -2,30 +2,112 @@ ...@@ -2,30 +2,112 @@
<div <div
v-show="isAllowShowNode(nodeProps)" v-show="isAllowShowNode(nodeProps)"
ref="seeksRGNode" 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" class="rel-node-peel"
@mousedown.left.stop="onDragStart($event)" @mousedown.left.stop="onDragStart($event)"
@mouseover.stop="onMouseHover($event)" @mouseover.stop="onMouseHover($event)"
@mouseout.stop="onMouseOut($event)" @mouseout.stop="onMouseOut($event)"
@click.stop="onclick($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"> <div
<span :class="expandButtonClass" :style="{'background-color':(nodeProps.color||graphSetting.defaultNodeColor)}" @click.stop="expandOrCollapseNode"> v-if="
{{nodeProps.expanded?'':nodeProps.childNum}} (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> </span>
</div> </div>
<div v-if="nodeProps.html" v-html="nodeProps.html" /> <div v-if="nodeProps.html" v-html="nodeProps.html" />
<div <div
v-else 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':'')]" :class="[
: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'}" '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" 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"> <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()" /> <span v-html="getNodeName()" />
</div> </div>
<div v-else v-html="nodeProps.innerHTML" /> <div v-else v-html="nodeProps.innerHTML" />
</slot> </slot>
...@@ -37,7 +119,7 @@ ...@@ -37,7 +119,7 @@
<script> <script>
// import SeeksRGStore from './SeeksRGStore' // import SeeksRGStore from './SeeksRGStore'
// import SeeksGraphMath from './SeeksGraphMath' // import SeeksGraphMath from './SeeksGraphMath'
import SeeksRGUtils from './SeeksRGUtils' import SeeksRGUtils from "./SeeksRGUtils";
// import Velocity from 'velocity-animate' // import Velocity from 'velocity-animate'
// import { mapState } from 'vuex' // import { mapState } from 'vuex'
// var _parent = this.$parent // var _parent = this.$parent
...@@ -46,387 +128,506 @@ import SeeksRGUtils from './SeeksRGUtils' ...@@ -46,387 +128,506 @@ import SeeksRGUtils from './SeeksRGUtils'
// return _r // return _r
// } // }
export default { export default {
name: 'SeeksRGNode', name: "SeeksRGNode",
components: { }, components: {},
props: { props: {
graphSetting: { graphSetting: {
mustUseProp: true, mustUseProp: true,
default: () => { return {} }, default: () => {
return {};
},
type: Object type: Object
}, },
nodeProps: { nodeProps: {
mustUseProp: true, mustUseProp: true,
default: () => { return {} }, default: () => {
return {};
},
type: Object type: Object
}, },
onNodeClick: { onNodeClick: {
mustUseProp: false, mustUseProp: false,
default: () => { return () => {} }, default: () => {
return () => {};
},
type: Function type: Function
} }
}, },
data() { data() {
return { return {
hovering: false, hovering: false,
borderColor: '', borderColor: "",
dragging: false dragging: false,
} parentNum: 0,
childNum: 0,
parentExpandButtonClass:""
};
}, },
computed: { computed: {
expandButtonClass() { expandButtonClass() {
return this.nodeProps.expanded===false ? 'c-expanded vertical-middle' : 'c-collapsed' return this.nodeProps.expanded === false
? "c-expanded vertical-middle"
: "c-collapsed";
} }
}, },
// show() {
//
// },
watch: { watch: {
// 'nodeProps.isShow': function(v) {
// console.log('nodeProps.isShow:', v)
// if (v === true) {
// this.$nextTick(() => {
// this.nodeProps.el.offsetWidth = this.$refs.seeksRGNode.offsetWidth
// this.nodeProps.el.offsetHeight = this.$refs.seeksRGNode.offsetHeight
// console.log('node 挂载 el size:', this.$refs.seeksRGNode.offsetWidth, this.$refs.seeksRGNode.offsetHeight)
// })
// }
// }
}, },
created() { 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() { mounted() {
this.refreshNodeProperties() this.refreshNodeProperties();
// this.leave(this.$refs.seeksRGNode)
// console.log('node show:', this.nodeProps.text, this.$parent.$slots.node)
}, },
beforeDestroy() { beforeDestroy() {
const elx = this.$refs.seeksRGNode const elx = this.$refs.seeksRGNode;
elx.remove() elx.remove();
}, },
methods: { methods: {
refreshNodeProperties() { 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
// this.nodeProps.el.offsetHeight = this.$refs.seeksRGNode.offsetHeight
// console.log('node 挂载 el size:', this.$refs.seeksRGNode.offsetWidth, this.$refs.seeksRGNode.offsetHeight)
// })
// this.nodeProps.em = true
// if (this.nodeProps.style === 0) {
// this.nodeProps.name = SeeksRGUtils.transName4Circle(this.nodeProps.name, this.nodeProps.el.offsetWidth)
// console.log('resize node name:', this.name)
// }
// this.nodeProps.el_width = this.$refs.seeksRGNode.offsetWidth
// this.nodeProps.el_height = this.$refs.seeksRGNode.offsetHeight
// var __this = this
// setInterval(function() {
// __this.nodeProps.x = __this.nodeProps.x
// __this.nodeProps.y = __this.nodeProps.y
// }, 1000)
}, },
getNodeName() { getNodeName() {
// if (this.hovering) return 'N-' + this.nodeProps.seeks_id
if (this.hovering) { if (this.hovering) {
return this.nodeProps.text return this.nodeProps.text;
} }
if (this.nodeProps.width === undefined && this.nodeProps.nodeShape !== 0) { if (
return this.nodeProps.text this.nodeProps.width === undefined &&
this.nodeProps.nodeShape !== 0
) {
return this.nodeProps.text;
} }
var _w = this.nodeProps.el.offsetWidth var _w = this.nodeProps.el.offsetWidth;
var _h = this.nodeProps.el.offsetHeight var _h = this.nodeProps.el.offsetHeight;
var _num_l = parseInt((_w - 20) / 20) var _num_l = parseInt((_w - 20) / 20);
var _num_c = parseInt((_h - 20) / 20) var _num_c = parseInt((_h - 20) / 20);
if (_num_l === -1 || _num_c === -1) { if (_num_l === -1 || _num_c === -1) {
return this.nodeProps.text return this.nodeProps.text;
} }
var _length = _num_l * _num_c * 2 var _length = _num_l * _num_c * 2;
var _text_arr = [] var _text_arr = [];
var _current_length = 0 var _current_length = 0;
for (var i = 0; i < this.nodeProps.text.length; i++) { for (var i = 0; i < this.nodeProps.text.length; i++) {
var _thisChar = this.nodeProps.text[i] var _thisChar = this.nodeProps.text[i];
var _charCode = _thisChar.charCodeAt(0) var _charCode = _thisChar.charCodeAt(0);
var _charLength = 1 var _charLength = 1;
if (_charCode < 0 || _charCode > 255) { if (_charCode < 0 || _charCode > 255) {
_charLength = 2 _charLength = 2;
} }
if ((_current_length + _charLength) > _length) { if (_current_length + _charLength > _length) {
return _text_arr.join('') + '...' return _text_arr.join("") + "...";
} else { } else {
_current_length += _charLength _current_length += _charLength;
_text_arr.push(_thisChar) _text_arr.push(_thisChar);
} }
} }
return _text_arr.join('') return _text_arr.join("");
// return _num_l + '/' + _num_c // return _num_l + '/' + _num_c
// return this.nodeProps.text // return this.nodeProps.text
}, },
expandOrCollapseNode(e) { expandOrCollapseNode(e) {
console.log("切换Node显示状态",this.nodeProps.lot.childs)
if (this.nodeProps.expanded === false) { if (this.nodeProps.expanded === false) {
this.nodeProps.expanded = true this.nodeProps.expanded = true;
this.nodeProps.lot.childs.forEach(thisNode => { this.nodeProps.lot.childs.forEach(thisNode => {
thisNode.isShow = true if (!thisNode.nodeParent) {
}) thisNode.isShow = true;
this.$parent.onNodeExpandEvent(this.nodeProps, e) }
});
this.$parent.onNodeExpandEvent(this.nodeProps, e);
} else { } else {
this.nodeProps.expanded = false this.nodeProps.expanded = false;
this.nodeProps.lot.childs.forEach(thisNode => { this.nodeProps.lot.childs.forEach(thisNode => {
thisNode.isShow = false if (!thisNode.nodeParent) {
}) thisNode.isShow = false;
this.$parent.onNodeCollapseEvent(this.nodeProps, e) }
});
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) { onDragStart(e) {
if (this.graphSetting.disableDragNode || this.nodeProps.disableDrag) { if (this.graphSetting.disableDragNode || this.nodeProps.disableDrag) {
return return;
} }
this.dragging = true this.dragging = true;
this.hovering = false this.hovering = false;
SeeksRGUtils.startDrag(e, this.nodeProps, this.onNodeDraged) SeeksRGUtils.startDrag(e, this.nodeProps, this.onNodeDraged);
}, },
onNodeDraged(x, y) { onNodeDraged(x, y) {
if (this.graphSetting.isMoveByParentNode) { if (this.graphSetting.isMoveByParentNode) {
this.nodeProps.lot.childs.forEach(thisCnode => { this.nodeProps.lot.childs.forEach(thisCnode => {
thisCnode.x += x thisCnode.x += x;
thisCnode.y += y thisCnode.y += y;
}) });
} }
if (Math.abs(x) + Math.abs(y) > 6) { if (Math.abs(x) + Math.abs(y) > 6) {
setTimeout(function() { setTimeout(
if (window.SeeksGraphDebug) console.log('delay end dragging', this.dragging) function() {
this.dragging = false if (window.SeeksGraphDebug)
}.bind(this), 100) console.log("delay end dragging", this.dragging);
this.dragging = false;
}.bind(this),
100
);
} else { } else {
this.dragging = false this.dragging = false;
} }
}, },
onMouseHover() { onMouseHover() {
if (this.dragging) { if (this.dragging) {
return return;
} }
this.hovering = true this.hovering = true;
}, },
onMouseOut() { onMouseOut() {
this.hovering = false this.hovering = false;
}, },
onclick(e) { onclick(e) {
if (this.dragging) { if (this.dragging) {
return return;
} }
if (!this.nodeProps.disableDefaultClickEffect) { if (!this.nodeProps.disableDefaultClickEffect) {
this.graphSetting.checkedNodeId = this.nodeProps.id this.graphSetting.checkedNodeId = this.nodeProps.id;
} }
if (this.onNodeClick) { if (this.onNodeClick) {
this.onNodeClick(this.nodeProps, e) this.onNodeClick(this.nodeProps, e);
} }
}, },
// beforeEnter(el) {
// console.log('beforeEnter')
// el.style.opacity = 0
// el.style.transformOrigin = 'left'
// },
// enter(el, done) {
// console.log('enter')
// Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
// Velocity(el, { fontSize: '1em' }, { complete: done })
// },
// leave(el, done) {
// console.log('leave')
// Velocity(el, { translateX: '0px', rotateZ: '360deg' }, { duration: 600 })
// // Velocity(el, { rotateZ: '180deg' }, { loop: 1 })
// // Velocity(el, {
// // rotateZ: '45deg',
// // translateY: '30px',
// // translateX: '30px',
// // opacity: 0
// // }, { complete: done })
// },
getLightColor(col) { getLightColor(col) {
// if (this.borderColor !== '') {
if (col[0] === '#') { // return this.borderColor
var _s = col.substring(1) // }
if (col[0] === "#") {
var _s = col.substring(1);
if (_s.length === 3) { 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 = [ var _rgb_arr = [
parseInt(_s[0] + '' + _s[1], 16), parseInt(_s[0] + "" + _s[1], 16),
parseInt(_s[2] + '' + _s[3], 16), parseInt(_s[2] + "" + _s[3], 16),
parseInt(_s[4] + '' + _s[5], 16) parseInt(_s[4] + "" + _s[5], 16)
] ];
if (window.SeeksGraphDebug) console.log('getLightColor1:', col, ':', _rgb_arr.join(',')) if (window.SeeksGraphDebug)
col = 'rgb(' + _rgb_arr.join(',') + ')' console.log("getLightColor1:", col, ":", _rgb_arr.join(","));
col = "rgb(" + _rgb_arr.join(",") + ")";
} }
var _st = col.substring(col.indexOf('(') + 1) var _st = col.substring(col.indexOf("(") + 1);
_st = _st.substring(0, _st.indexOf(')')) _st = _st.substring(0, _st.indexOf(")"));
var _rgb_string = _st.split(',') var _rgb_string = _st.split(",");
// console.log('getLightColor444:', _st, ':', _rgb_string.join(','))
if (_rgb_string.length >= 3) { if (_rgb_string.length >= 3) {
var _rgb_number = [ var _rgb_number = [
parseInt(parseInt(_rgb_string[0]) * 0.9), parseInt(parseInt(_rgb_string[0]) * 0.9),
parseInt(parseInt(_rgb_string[1]) * 0.9), parseInt(parseInt(_rgb_string[1]) * 0.9),
parseInt(parseInt(_rgb_string[2]) * 0.9) parseInt(parseInt(_rgb_string[2]) * 0.9)
] ];
if (window.SeeksGraphDebug) console.log('getLightColor2:', col, ':', _rgb_number.join(',')) if (window.SeeksGraphDebug)
this.borderColor = 'rgb(' + _rgb_number.join(',') + ', 0.3)' console.log("getLightColor2:", col, ":", _rgb_number.join(","));
return this.borderColor this.borderColor = "rgb(" + _rgb_number.join(",") + ", 0.3)";
return this.borderColor;
} else { } else {
this.borderColor = col this.borderColor = col;
return col return col;
} }
}, },
isAllowShowNode(thisNode) { isAllowShowNode(thisNode) {
const _r = thisNode.isShow !== false && thisNode.isHide !== true && (!thisNode.lot.parent || this.isAllowShowNode(thisNode.lot.parent, false) === true) const _r =
return _r thisNode.isShow !== false &&
thisNode.isHide !== true &&
(!thisNode.lot.parent ||
this.isAllowShowNode(thisNode.lot.parent, false) === true);
return _r;
} }
} }
} };
</script> </script>
<style> <style>
.rg-icon { .rg-icon {
width: 19px; width: 19px;
height: 19px; height: 19px;
vertical-align: 0px; vertical-align: 0px;
fill: currentColor; fill: currentColor;
overflow: hidden; overflow: hidden;
} }
.el-icon-remove,.el-icon-circle-plus{ .el-icon-remove,
cursor: pointer; .el-icon-circle-plus {
} cursor: pointer;
.rel-node-peel{ }
clear: both; .rel-node-peel {
padding:8px; clear: both;
position: absolute; padding: 8px;
font-size: 14px; position: absolute;
/*border:green solid 1px;*/ font-size: 14px;
} /*border:green solid 1px;*/
.rel-node{ }
text-align: center; .rel-node {
} text-align: center;
}
.rel-node-shape-1{ .rel-node-shape-1 {
/*border: #FD8B37 solid 1px;*/ /*border: #FD8B37 solid 1px;*/
border-radius: 8px; border-radius: 8px;
padding:5px; padding: 5px;
padding-left:15px; padding-left: 15px;
padding-right:15px; padding-right: 15px;
} }
.c-node-text{ .c-node-text {
height:100%; height: 100%;
width:100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.rel-node-shape-0{ .rel-node-shape-0 {
padding:10px; padding: 10px;
} }
.rel-node-shape-0{ .rel-node-shape-0 {
width:80px; width: 80px;
height:80px; height: 80px;
border-radius: 50%; border-radius: 50%;
/*border: #FD8B37 solid 2px;*/ /*border: #FD8B37 solid 2px;*/
/*text-align: left;*/ /*text-align: left;*/
/*padding:10px;*/ /*padding:10px;*/
/*white-space: nowrap;*/ /*white-space: nowrap;*/
/*text-overflow: ellipsis;*/ /*text-overflow: ellipsis;*/
/*overflow: hidden;*/ /*overflow: hidden;*/
/*word-break: break-all;*/ /*word-break: break-all;*/
} }
.rel-node-shape-0:hover{ .rel-node-shape-0:hover {
/*overflow: visible;*/ /*overflow: visible;*/
/*text-overflow: inherit;*/ /*text-overflow: inherit;*/
box-shadow: 0px 0px 5px #FFC5A6; box-shadow: 0px 0px 5px #ffc5a6;
} }
/*.rel-node{*/ /*.rel-node{*/
/*display: table;*/ /*display: table;*/
/*}*/ /*}*/
/*.rel-node span{*/ /*.rel-node span{*/
/*display: table-cell;*/ /*display: table-cell;*/
/*vertical-align:middle;*/ /*vertical-align:middle;*/
/*}*/ /*}*/
.rel-node-type-button{ .rel-node-type-button {
border-radius: 25px; border-radius: 25px;
color: blue; color: blue;
cursor: pointer; cursor: pointer;
} }
.rel-node-hover{ .rel-node-hover {
} }
.rel-node-checked{ .rel-node-checked {
box-shadow: 0px 0px 10px #FD8B37; box-shadow: 0px 0px 10px #fd8b37;
/*border-color: #BA7909;*/ /*border-color: #BA7909;*/
/*background-color: #FD8B37;*/ /*background-color: #FD8B37;*/
/*color: #ffffff;*/ /*color: #ffffff;*/
/* firefox bug fix - won't rotate at 90deg angles */ /* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px); -moz-transform: rotate(-89deg) translateX(-190px);
animation-timing-function:linear; animation-timing-function: linear;
animation: ACTRGNodeInit 2s; animation: ACTRGNodeInit 2s;
} }
.rel-node-selected{ .rel-node-selected {
box-shadow: 0px 0px 10px #FD8B37; box-shadow: 0px 0px 10px #fd8b37;
/*border-color: #BA7909;*/ /*border-color: #BA7909;*/
/*background-color: #FD8B37;*/ /*background-color: #FD8B37;*/
/*color: #ffffff;*/ /*color: #ffffff;*/
/* firefox bug fix - won't rotate at 90deg angles */ /* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px); -moz-transform: rotate(-89deg) translateX(-190px);
animation-timing-function:linear; animation-timing-function: linear;
animation: ACTRGNodeInit 2s; animation: ACTRGNodeInit 2s;
} }
.rel-node-vtree-2 { .rel-node-vtree-2 {
transform-origin:0 0;/* 设置旋转中心为左上角*/ transform-origin: 0 0; /* 设置旋转中心为左上角*/
/*transform-origin:50% 50%;!* 设置放大中心为元素中心 *!*/ /*transform-origin:50% 50%;!* 设置放大中心为元素中心 *!*/
transform: rotate(30deg) translateX(0px); transform: rotate(30deg) translateX(0px);
} }
.rel-node-vtree { .rel-node-vtree {
width:130px; width: 130px;
height:45px; height: 45px;
text-align: left; text-align: left;
} }
/*.c-node-text{*/ /*.c-node-text{*/
/*font-size: 12px;*/ /*font-size: 12px;*/
/*display: inline-block;*/ /*display: inline-block;*/
/*width:100px;*/ /*width:100px;*/
/*height:16px;*/ /*height:16px;*/
/*margin-top:40px;*/ /*margin-top:40px;*/
/*margin-left:-25px;*/ /*margin-left:-25px;*/
/*position:absolute;*/ /*position:absolute;*/
/*word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;*/ /*word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;*/
/*text-align:center;*/ /*text-align:center;*/
/*}*/ /*}*/
.c-btn-open-close{ .c-btn-open-close {
position: absolute; position: absolute;
height:100%; height: 100%;
width:19px; width: 19px;
/*border:red solid 1px;*/ /*border:red solid 1px;*/
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/*border:#ff0000 solid 1px;*/ /*border:#ff0000 solid 1px;*/
} }
.c-btn-open-close span{ .c-btn-open-close span {
width: 19px; width: 19px;
height:19px; height: 19px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
border-radius: 15px; border-radius: 15px;
color: #ffffff; color: #ffffff;
cursor: pointer; cursor: pointer;
font-size: 19px; font-size: 19px;
line-height: 16px; line-height: 16px;
background-size: 100% 100%; 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); /*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; color: #000 !important;
background-color: #FFF !important; background-color: #fff !important;
box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08); box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08);
padding-top: 2px !important; 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); 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{ .c-expand-positon-left {
margin-top:-8px; margin-top: -8px;
margin-left:-18px; margin-left: -36px;
} }
.c-expand-positon-right{ .c-expand-positon-right {
height:100%; height: 100%;
width:100%; width: 100%;
justify-content: center; 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;
align-items: flex-end;
justify-content: center;
}
.c-expand-positon-top {
height: 18px;
width: 100%;
margin-top: -20px;
margin-left: -6px;
align-items: flex-end;
justify-content: center;
}
@keyframes ACTRGNodeInit {
from {
box-shadow: 0px 0px 15px #fd8b37;
} }
.c-expand-positon-right span{ 15% {
margin-top:-18px; box-shadow: 0px 0px 1px rgb(46, 78, 143);
margin-right:-18px;
margin-left:100%;
} }
.c-expand-positon-bottom{ 30% {
height:100%; box-shadow: 0px 0px 15px #fd8b37;
width:100%;
margin-top:7px;
margin-left:-8px;
align-items: flex-end;
justify-content: center;
} }
.c-expand-positon-top{ 45% {
height:18px; box-shadow: 0px 0px 1px rgb(46, 78, 143);
width:100%;
margin-top:-20px;
margin-left:-6px;
align-items: flex-end;
justify-content: center;
} }
@keyframes ACTRGNodeInit { 60% {
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;
}
45% {
box-shadow: 0px 0px 1px rgb(46, 78, 143);
}
60% {
box-shadow: 0px 0px 15px #FD8B37;
}
to {
box-shadow: 0px 0px 1px rgb(46, 78, 143);
}
} }
.rel-diy-node{ to {
padding:0px; box-shadow: 0px 0px 1px rgb(46, 78, 143);
} }
}
.rel-diy-node {
padding: 0px;
}
</style> </style>
src/components/relation/core4vue/SeeksRGUtils.js
View file @ adc7ef25
...@@ -98,7 +98,11 @@ SeeksRGUtils.json2Node = function(originData) { ...@@ -98,7 +98,11 @@ SeeksRGUtils.json2Node = function(originData) {
disableDrag: originData.disableDrag !== undefined ? originData.disableDrag : false, disableDrag: originData.disableDrag !== undefined ? originData.disableDrag : false,
data: originData.data !== undefined ? originData.data : {}, data: originData.data !== undefined ? originData.data : {},
childNum:originData.childNum !==undefined?originData.childNum:0, 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 === undefined) jsonData.lot = { childs: [], parent: undefined, eached: false, strength: 0 }
if(jsonData.lot.childs === undefined) jsonData.lot.childs = [] if(jsonData.lot.childs === undefined) jsonData.lot.childs = []
......
src/components/relation/core4vue/layouters/SeeksBidirectionalTreeLayouter.js
View file @ adc7ef25
...@@ -3,7 +3,6 @@ import SeeksGraphMath from '../SeeksGraphMath' ...@@ -3,7 +3,6 @@ import SeeksGraphMath from '../SeeksGraphMath'
function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
this.graphSetting = graphSetting this.graphSetting = graphSetting
this.config = layoutSetting || {} this.config = layoutSetting || {}
console.log('new SeeksBidirectionalTreeLayouter:', this.config)
if (!this.config.from) this.config.from = 'left' if (!this.config.from) this.config.from = 'left'
if (this.config.levelDistance && typeof this.config.levelDistance === 'string') { if (this.config.levelDistance && typeof this.config.levelDistance === 'string') {
this.config.levelDistanceArr = this.config.levelDistance.split(',').map(thisNum => parseInt(thisNum)) this.config.levelDistanceArr = this.config.levelDistance.split(',').map(thisNum => parseInt(thisNum))
...@@ -12,7 +11,6 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -12,7 +11,6 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
this.allNodes = [] this.allNodes = []
this.__origin_nodes = [] this.__origin_nodes = []
this.refresh = function() { this.refresh = function() {
console.log('SeeksBidirectionalTreeLayouter:refresh:nodes:', this.__origin_nodes.length)
this.placeNodes(this.__origin_nodes, this.rootNode) this.placeNodes(this.__origin_nodes, this.rootNode)
} }
this.analysisNodes4Didirectional = function(willLayoutNodes, thisLevelNodes, thisDeep, analyticResult, levelDirect) { this.analysisNodes4Didirectional = function(willLayoutNodes, thisLevelNodes, thisDeep, analyticResult, levelDirect) {
...@@ -40,9 +38,9 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -40,9 +38,9 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
// var __prev_node // var __prev_node
thisLevelNodes.forEach(thisNode => { thisLevelNodes.forEach(thisNode => {
var __thisNode_child_size = 0 var __thisNode_child_size = 0
// console.log('Build node::', thisNode.text, thisNode.targetNodes.length)
if (levelDirect === -1) { if (levelDirect === -1) {
// console.log('Build node::from::', thisNode.text, thisNode.targetFrom.length)
let __thisTargetIndex = 0 let __thisTargetIndex = 0
thisNode.targetFrom.forEach((thisTarget) => { thisNode.targetFrom.forEach((thisTarget) => {
if (!thisTarget.lot)thisTarget.lot = { eached: false } if (!thisTarget.lot)thisTarget.lot = { eached: false }
...@@ -51,38 +49,42 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -51,38 +49,42 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
thisTarget.lot.eached = true thisTarget.lot.eached = true
thisTarget.lot.parent = thisNode thisTarget.lot.parent = thisNode
thisTarget.lot.index_of_parent = __thisTargetIndex++ thisTarget.lot.index_of_parent = __thisTargetIndex++
// thisTarget.lot.prevNode = __prev_node
// if (__prev_node)__prev_node.lot.nextNode = thisTarget
// __prev_node = thisTarget
thisNode.lot.childs.push(thisTarget) thisNode.lot.childs.push(thisTarget)
newLevelNodes.push(thisTarget) newLevelNodes.push(thisTarget)
__thisNode_child_size++ __thisNode_child_size++
} else { } else {
thisNode.lot.childs.push(thisTarget) thisNode.lot.childs.push(thisTarget)
// console.log('hide node:', thisTarget.name, 'from:', thisNode.text)
} }
} }
}) })
} else { } else {
// console.log('Build node::to::', thisNode.text, thisNode.targetTo.length)
let __thisTargetIndex = 0 let __thisTargetIndex = 0
thisNode.targetTo.forEach((thisTarget) => { thisNode.targetTo.forEach((thisTarget) => {
if (!thisTarget.lot)thisTarget.lot = { eached: false } if (!thisTarget.lot)thisTarget.lot = { eached: false }
if (!thisTarget.lot.eached) { if (!thisTarget.lot.eached) {
if (SeeksGraphMath.isAllowShowNode(thisTarget)) { if (true) {
thisTarget.lot.eached = true thisTarget.lot.eached = true
thisTarget.lot.parent = thisNode thisTarget.lot.parent = thisNode
thisTarget.lot.index_of_parent = __thisTargetIndex++ thisTarget.lot.index_of_parent = __thisTargetIndex++
// thisTarget.lot.prevNode = __prev_node
// if (__prev_node)__prev_node.lot.nextNode = thisTarget
// __prev_node = thisTarget
thisNode.lot.childs.push(thisTarget) thisNode.lot.childs.push(thisTarget)
newLevelNodes.push(thisTarget) newLevelNodes.push(thisTarget)
__thisNode_child_size++ __thisNode_child_size++
} else { } else {
thisNode.lot.childs.push(thisTarget) thisNode.lot.childs.push(thisTarget)
// console.log('hide node:', thisTarget.name, 'from:', thisNode.text)
} }
} }
}) })
if(thisNode.targetFrom && thisNode.targetFrom.length>0){ if(thisNode.targetFrom && thisNode.targetFrom.length>0){
thisNode.targetFrom.forEach((thisTarget) => { thisNode.targetFrom.forEach((thisTarget) => {
if (!thisTarget.lot)thisTarget.lot = { eached: false } if (!thisTarget.lot)thisTarget.lot = { eached: false }
if (!thisTarget.lot.eached && thisTarget.nodeParent) { if (!thisTarget.lot.eached && thisTarget.nodeParent) {
...@@ -90,13 +92,17 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -90,13 +92,17 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
thisTarget.lot.eached = true thisTarget.lot.eached = true
thisTarget.lot.parent = thisNode thisTarget.lot.parent = thisNode
thisTarget.lot.index_of_parent = __thisTargetIndex++ thisTarget.lot.index_of_parent = __thisTargetIndex++
// thisTarget.lot.prevNode = __prev_node
// if (__prev_node)__prev_node.lot.nextNode = thisTarget
// __prev_node = thisTarget
thisNode.lot.childs.push(thisTarget) thisNode.lot.childs.push(thisTarget)
newLevelNodes.push(thisTarget) newLevelNodes.push(thisTarget)
__thisNode_child_size++ //__thisNode_child_size++
} else { } else {
thisNode.lot.childs.push(thisTarget) thisNode.lot.childs.push(thisTarget)
newLevelNodes.push(thisTarget)
//__thisNode_child_size++
// console.log('hide node:', thisTarget.name, 'from:', thisNode.text)
} }
} }
}) })
...@@ -112,27 +118,31 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -112,27 +118,31 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
if (__thisLOT_subling.all_strength > analyticResult.max_strength) { if (__thisLOT_subling.all_strength > analyticResult.max_strength) {
analyticResult.max_strength = __thisLOT_subling.all_strength analyticResult.max_strength = __thisLOT_subling.all_strength
} }
// console.log(thisDeep, 'next level nodes:', newLevelNodes.length)
if (newLevelNodes.length > 0) { if (newLevelNodes.length > 0) {
// console.log('thisLevelNodes.length:', thisLevelNodes, thisLevelNodes.length)
this.analysisNodes4Didirectional(willLayoutNodes, newLevelNodes, thisDeep + levelDirect, analyticResult, levelDirect) this.analysisNodes4Didirectional(willLayoutNodes, newLevelNodes, thisDeep + levelDirect, analyticResult, levelDirect)
} else { } else {
willLayoutNodes.forEach(thisNode => { willLayoutNodes.forEach(thisNode => {
if (thisNode.lot.childs_size > 0) { if (thisNode.lot.childs_size > 0) {
thisNode.lot.strengthWithChilds = 0 thisNode.lot.strengthWithChilds = 0
} }
}) })
willLayoutNodes.forEach(thisNode => { willLayoutNodes.forEach(thisNode => {
if (thisNode.lot.childs_size === 0) { if (thisNode.lot.childs_size === 0) {
thisNode.lot.strengthWithChilds = 1 thisNode.lot.strengthWithChilds = 1
SeeksGraphMath.conductStrengthToParents(thisNode) SeeksGraphMath.conductStrengthToParents(thisNode)
} }
}) })
SeeksGraphMath.analysisDataTree([willLayoutNodes[0]], 0, levelDirect) SeeksGraphMath.analysisDataTree([willLayoutNodes[0]], 0, levelDirect)
// willLayoutNodes.forEach(thisNode => {
// thisNode.text = thisNode.lot.strengthWithChilds_from + ':' + thisNode.lot.strengthWithChilds + '/' + thisNode.lot.strength
// })
} }
} }
this.placeNodes = function(allNodes, rootNode) { this.placeNodes = function(allNodes, rootNode) {
if (!rootNode) { if (!rootNode) {
console.error('root is null') console.error('root is null')
return return
...@@ -142,11 +152,11 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -142,11 +152,11 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
this.__origin_nodes = allNodes this.__origin_nodes = allNodes
this.rootNode = rootNode this.rootNode = rootNode
allNodes.forEach(thisNode => { allNodes.forEach(thisNode => {
// thisNode.lot = { eached: false }
thisNode.lot.eached = false thisNode.lot.eached = false
thisNode.lot.notLeafNode = false thisNode.lot.notLeafNode = false
thisNode.lot.childs = [] thisNode.lot.childs = []
// thisNode.lot.parent = undefined
thisNode.lot.index_of_parent = 0 thisNode.lot.index_of_parent = 0
thisNode.lot.strength = 0 thisNode.lot.strength = 0
thisNode.lot.strengthWithChilds_from = 0 thisNode.lot.strengthWithChilds_from = 0
...@@ -170,21 +180,47 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -170,21 +180,47 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
max_length: 1, max_length: 1,
max_strength: 1 max_strength: 1
} }
this.analysisNodes4Didirectional(this.allNodes, [this.rootNode], 0, analyticResult, 1) this.analysisNodes4Didirectional(this.allNodes, [this.rootNode], 0, analyticResult, 1)
this.placeNodesPosition(this.rootNode, this.allNodes, analyticResult) this.placeNodesPosition(this.rootNode, this.allNodes, analyticResult)
// console.log('根据数据调整画板高度')
// if (this.config.from === 'left' || this.config.from === 'right') {
// let __suitableHeight = analyticResult.max_strength * 50 + 100
// if (__suitableHeight < this.graphSetting.viewSize.height + 300)__suitableHeight = this.graphSetting.viewSize.height + 300
// this.graphSetting.canvasSize.height = __suitableHeight
// let __suitableWidth = analyticResult.max_deep * 1000 + 600
// if (__suitableWidth < this.graphSetting.viewSize.width + 500)__suitableWidth = this.graphSetting.viewSize.width + 500
// this.graphSetting.canvasSize.width = __suitableWidth
// } else {
// let __suitableWidth = analyticResult.max_strength * 320 + 1000
// if (__suitableWidth < this.graphSetting.viewSize.width + 500)__suitableWidth = this.graphSetting.viewSize.width + 500
// this.graphSetting.canvasSize.width = __suitableWidth
// let __suitableHeight = analyticResult.max_deep * 400 + 200
// if (__suitableHeight < this.graphSetting.viewSize.height + 300)__suitableHeight = this.graphSetting.viewSize.height + 300
// this.graphSetting.canvasSize.height = __suitableHeight
// }
// if (this.graphSetting.heightByContent) {
// console.log('根据数据调整视窗高度')
// if (this.config.from === 'left' || this.config.from === 'right') {
// this.graphSetting.viewSize.height = this.graphSetting.canvasSize.height
// } else {
// this.graphSetting.viewSize.height = analyticResult.max_deep * 500 + 300
// }
// }
// this.graphSetting.canvasOffset.x = this.graphSetting.viewNVInfo.width / 2 - 100
// this.graphSetting.canvasOffset.y = this.graphSetting.viewNVInfo.height / 2 - 100
} }
this.placeNodesPosition = function(rootNode, allNodes, analyticResult) { this.placeNodesPosition = function(rootNode, allNodes, analyticResult) {
var __mapWidth = this.graphSetting.viewSize.width var __mapWidth = this.graphSetting.viewSize.width
var __mapHeight = this.graphSetting.viewSize.height var __mapHeight = this.graphSetting.viewSize.height
// console.log('analysisNodes:', analyticResult, allNodes)
// this.graphSetting.canvasOffset.x = 0
// this.graphSetting.canvasOffset.y = 0
var __offsetX = rootNode.offset_x || 0 var __offsetX = rootNode.offset_x || 0
var __offsetY = rootNode.offset_y || 0 var __offsetY = rootNode.offset_y || 0
// console.log('#############Seeks graph viewSize:Tree layout:', this.graphSetting.viewSize.width, this.graphSetting.viewSize.height)
// console.log('[layout canvasOffset]', __mapHeight, this.graphSetting, this.graphSetting.canvasSize, this.config)
// console.log('[Layout:AnalyticResult]', analyticResult)
if (rootNode.fixed !== true) { if (rootNode.fixed !== true) {
var _center_offset_x = parseInt(this.config.centerOffset_x) || 0 var _center_offset_x = parseInt(this.config.centerOffset_x) || 0
var _center_offset_y = parseInt(this.config.centerOffset_y) || 0 var _center_offset_y = parseInt(this.config.centerOffset_y) || 0
...@@ -202,11 +238,9 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -202,11 +238,9 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
rootNode.lot.x = parseInt(__mapWidth * 0.3 - rootNode.el.offsetWidth) / 2 + _center_offset_x 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 rootNode.lot.y = parseInt(__mapHeight / 2 - rootNode.el.offsetHeight / 2) + _center_offset_y
} }
rootNode.x = rootNode.lot.x + __offsetX rootNode.x = rootNode.lot.x + __offsetX
rootNode.y = rootNode.lot.y + __offsetY rootNode.y = rootNode.lot.y + __offsetY
} else { } else {
if (rootNode.origin_x === undefined) { if (rootNode.origin_x === undefined) {
rootNode.origin_x = rootNode.x rootNode.origin_x = rootNode.x
rootNode.origin_y = rootNode.y rootNode.origin_y = rootNode.y
...@@ -215,7 +249,6 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -215,7 +249,6 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
rootNode.lot.y = rootNode.origin_y rootNode.lot.y = rootNode.origin_y
rootNode.x = rootNode.lot.x + __offsetX rootNode.x = rootNode.lot.x + __offsetX
rootNode.y = rootNode.lot.y + __offsetY rootNode.y = rootNode.lot.y + __offsetY
} }
rootNode.lot.placed = true rootNode.lot.placed = true
var dynamicSizeConfig = { var dynamicSizeConfig = {
...@@ -223,21 +256,178 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -223,21 +256,178 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
__mapHeight __mapHeight
} }
this.placeRelativePosition(rootNode, analyticResult, dynamicSizeConfig) this.placeRelativePosition(rootNode, analyticResult, dynamicSizeConfig)
allNodes.forEach(thisNode => { 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
// }
// 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) { if (thisNode.fixed === true) {
thisNode.lot.placed = true thisNode.lot.placed = true
return return
} }
if (!SeeksGraphMath.isAllowShowNode(thisNode)) return if (!SeeksGraphMath.isAllowShowNode(thisNode)) return
// console.log(thisNode.text, thisNode.offset_x, thisNode.offset_y)
var __offsetX = thisNode.offset_x || 0 var __offsetX = thisNode.offset_x || 0
var __offsetY = thisNode.offset_y || 0 var __offsetY = thisNode.offset_y || 0
thisNode.x = thisNode.offset_x + thisNode.lot.x + __offsetX thisNode.x = thisNode.offset_x + thisNode.lot.x + __offsetX
thisNode.y = thisNode.offset_y + thisNode.lot.y + __offsetY thisNode.y = thisNode.offset_y + thisNode.lot.y + __offsetY
thisNode.lot.placed = true thisNode.lot.placed = true
}) })
} }
this.placeRelativePosition = function(rootNode, analyticResult, dynamicSizeConfig) { this.placeRelativePosition = function(rootNode, analyticResult, dynamicSizeConfig) {
if (this.config.from === 'left' || this.config.from === 'right') { if (this.config.from === 'left' || this.config.from === 'right') {
...@@ -252,11 +442,12 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -252,11 +442,12 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
if (__per_height < __min_per_height)__per_height = __min_per_height if (__per_height < __min_per_height)__per_height = __min_per_height
if (__per_height > __max_per_height)__per_height = __max_per_height if (__per_height > __max_per_height)__per_height = __max_per_height
this.allNodes.forEach(thisNode => { this.allNodes.forEach(thisNode => {
if(thisNode.nodeParent) return;
if (thisNode.fixed === true) return if (thisNode.fixed === true) return
if (thisNode.lot.placed === true) return if (thisNode.lot.placed === true) return
if (thisNode === rootNode) 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') { if (this.config.from === 'right') {
thisNode.lot.x = rootNode.lot.x - this.getLevelDistance(thisNode, thisNode.lot.subling.level, __per_width) thisNode.lot.x = rootNode.lot.x - this.getLevelDistance(thisNode, thisNode.lot.subling.level, __per_width)
} else { } else {
...@@ -266,12 +457,25 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -266,12 +457,25 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
}) })
this.allNodes.forEach(thisNode => { this.allNodes.forEach(thisNode => {
if (thisNode.fixed === true) return if (thisNode.fixed === true || this.nodeParent) return
if (thisNode.lot.level !== 0) { 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) thisNode.lot.y = rootNode.lot.y + __per_height * ((analyticResult.max_strength / -2) + thisNode.lot.strengthWithChilds_from + thisNode.lot.strengthWithChilds / 2)
} }
}) })
// this.allNodes.forEach(thisNode => {
// if (thisNode.fixed === true) return
// if (thisNode.lot.level === 1) {
// thisNode.lot.y = __per_height * (thisNode.lot.strength_plus - thisNode.lot.strength + (thisNode.lot.strength - 1) / 2)
// }
// })
// this.allNodes.forEach(thisNode => {
// if (thisNode.fixed === true) return
// if (thisNode.lot.level > 1) {
// // thisNode.lot.y = __per_height * (thisNode.lot.strength_plus - thisNode.lot.strength + (thisNode.lot.strength - 1) / 2)
// thisNode.lot.y = __per_height * (thisNode.lot.parent.lot.strength_plus - thisNode.lot.parent.lot.strength + thisNode.lot.index_of_parent)
// // thisNode.text = thisNode.lot.parent.lot.strength_plus + '-' + thisNode.lot.parent.lot.strength + '+' + thisNode.lot.index_of_parent
// }
// })
} else { } else {
const __min_per_height = this.config.min_per_height || 250 const __min_per_height = this.config.min_per_height || 250
const __max_per_height = this.config.max_per_height || 400 const __max_per_height = this.config.max_per_height || 400
...@@ -284,23 +488,38 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -284,23 +488,38 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
if (__per_height < __min_per_height)__per_height = __min_per_height if (__per_height < __min_per_height)__per_height = __min_per_height
if (__per_height > __max_per_height)__per_height = __max_per_height if (__per_height > __max_per_height)__per_height = __max_per_height
this.allNodes.forEach(thisNode => { this.allNodes.forEach(thisNode => {
if (thisNode.fixed === true) return if (thisNode.fixed === true||this.nodeParent) return
if (thisNode.lot.placed === true) return if (thisNode.lot.placed === true) return
if (thisNode === rootNode) 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 === 'bottom') { if (this.config.from === 'bottom') {
thisNode.lot.y = rootNode.lot.y - this.getLevelDistance(thisNode, thisNode.lot.subling.level, __per_height) thisNode.lot.y = rootNode.lot.y - this.getLevelDistance(thisNode, thisNode.lot.subling.level, __per_height)
} else { } else {
// console.log('Place node xxxx:', rootNode.lot.y, thisNode.lot.subling.level, __per_height)
thisNode.lot.y = rootNode.lot.y + this.getLevelDistance(thisNode, thisNode.lot.subling.level, __per_height) thisNode.lot.y = rootNode.lot.y + this.getLevelDistance(thisNode, thisNode.lot.subling.level, __per_height)
} }
}) })
this.allNodes.forEach(thisNode => { this.allNodes.forEach(thisNode => {
if (thisNode.fixed === true || this.nodeParent) return
if (thisNode.fixed === true) return
if (thisNode.lot.level !== 0) { 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) thisNode.lot.x = -58 + rootNode.lot.x + __per_width * ((analyticResult.max_strength / -2) + thisNode.lot.strengthWithChilds_from + thisNode.lot.strengthWithChilds / 2)
// thisNode.lot.x = rootNode.lot.x
} }
}) })
// this.allNodes.forEach(thisNode => {
// if (thisNode.fixed === true) return
// if (thisNode.lot.level === 1) {
// thisNode.lot.x = __per_width * (thisNode.lot.strength_plus - thisNode.lot.strength + thisNode.lot.strength / 2)
// }
// })
// this.allNodes.forEach(thisNode => {
// if (thisNode.fixed === true) return
// if (thisNode.lot.level > 1) {
// thisNode.lot.x = __per_width * (thisNode.lot.parent.lot.strength_plus - thisNode.lot.parent.lot.strength + thisNode.lot.index_of_parent)
// }
// })
} }
} }
this.getLevelDistance = function(node, level, perSize) { this.getLevelDistance = function(node, level, perSize) {
...@@ -316,4 +535,5 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) { ...@@ -316,4 +535,5 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
} }
} }
} }
export default SeeksBidirectionalTreeLayouter
\ No newline at end of file export default SeeksBidirectionalTreeLayouter
src/components/school/schoolarea/school-form.vue
View file @ adc7ef25
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.SAddress" ref="SAddress" <q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.SAddress" ref="SAddress"
class="col-6 q-pb-lg" label="校区地址" :rules="[val => !!val || '请填写校区地址']" /> class="col-6 q-pb-lg" label="校区地址" :rules="[val => !!val || '请填写校区地址']" />
<q-select class="col-6 q-pb-lg q-pr-lg" clearable filled stack-label use-input input-debounce="0" <q-select class="col-6 q-pb-lg q-pr-lg" clearable filled stack-label use-input input-debounce="0"
hint="Basic filtering" option-value="Id" option-label="EmployeeName" v-model="objOption.ManagerId" option-value="Id" option-label="EmployeeName" v-model="objOption.ManagerId"
ref="ManagerId" :options="EmployeeList" label="校区联系人" :dense="false" emit-value map-options ref="ManagerId" :options="EmployeeList" label="校区联系人" :dense="false" emit-value map-options
@filter="filterFn"> @filter="filterFn">
<template v-slot:no-option> <template v-slot:no-option>
...@@ -23,23 +23,23 @@ ...@@ -23,23 +23,23 @@
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
<q-select filled v-model="model" use-input input-debounce="0" label="Simple filter" :options="options" <q-select filled v-model="model" class="col-6 q-pb-lg" use-input input-debounce="0" label="Simple filter" :options="options"
@filter="filterFn" style="width: 250px"> @filter="filterFn">
<template v-slot:no-option> <template v-slot:no-option>
<q-item> <q-item>
<q-item-section class="text-grey"> <q-item-section class="text-grey">
No results 未找到相关数据
</q-item-section> </q-item-section>
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
<q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.SLinkTel" ref="SLinkTel" <q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.SLinkTel" ref="SLinkTel"
class="col-6 q-pb-lg" label="校区联系电话" :rules="[val => !!val || '请填写校区联系电话']" /> class="col-6 q-pb-lg q-pr-lg" label="校区联系电话" :rules="[val => !!val || '请填写校区联系电话']" />
<q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.Remark" <q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.Remark"
class="col-6 q-pb-lg q-pr-lg" label="校区备注" /> class="col-6 q-pb-lg" label="校区备注" />
<selectTree v-if="DeptList&&DeptList.length>0" :treeData='DeptList' :defaultArray="returnString" <selectTree v-if="DeptList&&DeptList.length>0" :treeData='DeptList' :defaultArray="returnString"
nodeKey="DeptId" :multiple="false" labelKey="DeptName" childrenKey="ChildList" tipText="上级部门" nodeKey="DeptId" :multiple="false" labelKey="DeptName" childrenKey="ChildList" tipText="上级部门"
@getChild="getChild" classStr="col-6 q-pb-lg"></selectTree> @getChild="getChild" classStr="col-6 q-pb-lg q-pr-lg"></selectTree>
<div class="col-6"> <div class="col-6">
<q-toggle size="md" label="校区状态" color="primary" :false-value="1" :true-value="0" <q-toggle size="md" label="校区状态" color="primary" :false-value="1" :true-value="0"
v-model="objOption.Status" /> v-model="objOption.Status" />
......
src/pages/okr/okr-align-view.vue
View file @ adc7ef25
...@@ -9,9 +9,13 @@ ...@@ -9,9 +9,13 @@
:options="graphOptions" :options="graphOptions"
:on-node-expand="onNodeExpand" :on-node-expand="onNodeExpand"
:on-node-collapse="onNodeCollapse" :on-node-collapse="onNodeCollapse"
:on-node-click="onNodeClick"
> >
</SeeksRelationGraph> </SeeksRelationGraph>
</div> </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> </div>
</template> </template>
...@@ -21,8 +25,9 @@ import { ...@@ -21,8 +25,9 @@ import {
queryUserOKRNextAlignView queryUserOKRNextAlignView
} from "../../api/okr/work"; } from "../../api/okr/work";
import SeeksRelationGraph from "../../components/relation/index"; import SeeksRelationGraph from "../../components/relation/index";
import okrDetailInfo from '../../components/okr/okr-details-info'
export default { export default {
components: { SeeksRelationGraph }, components: { SeeksRelationGraph,okrDetailInfo },
data() { data() {
return { return {
g_loading: true, g_loading: true,
...@@ -46,11 +51,11 @@ export default { ...@@ -46,11 +51,11 @@ export default {
} }
], ],
defaultLineMarker: { defaultLineMarker: {
'markerWidth': 12, markerWidth: 12,
'markerHeight': 12, markerHeight: 12,
'refX': 6, refX: 6,
'refY': 6, refY: 6,
'data': 'M2,2 L10,6 L2,10 L6,6 L2,2' data: "M2,2 L10,6 L2,10 L6,6 L2,2"
}, },
defaultExpandHolderPosition: "right", defaultExpandHolderPosition: "right",
defaultNodeShape: 1, defaultNodeShape: 1,
...@@ -60,15 +65,17 @@ export default { ...@@ -60,15 +65,17 @@ export default {
defaultNodeBorderWidth: 0, defaultNodeBorderWidth: 0,
defaultLineColor: "#cecece", defaultLineColor: "#cecece",
defaultNodeColor: "rgba(255,255,255,1)", defaultNodeColor: "rgba(255,255,255,1)",
defaultNodeFontColor: "rgba(0,0,0,1)" defaultNodeFontColor: "rgba(0,0,0,1)",
}, },
proid: 51, proid: 53,
rootObjList: [], rootObjList: [],
graph_json_data: { graph_json_data: {
rootId: "0", rootId: "0",
nodes: [], nodes: [],
links: [] links: []
} },
showOkrInfo:false,
chosenObj:null
}; };
}, },
created() {}, created() {},
...@@ -84,6 +91,10 @@ export default { ...@@ -84,6 +91,10 @@ export default {
this.genernalNodes(); this.genernalNodes();
}); });
}, },
onNodeClick(nodeObject, $event) {
this.chosenObj=nodeObject.sourceData
this.showOkrInfo=true
},
genernalNodes() { genernalNodes() {
let node = { let node = {
id: "0", id: "0",
...@@ -91,22 +102,32 @@ export default { ...@@ -91,22 +102,32 @@ export default {
text: "111" text: "111"
}; };
this.graph_json_data.nodes.push(node); this.graph_json_data.nodes.push(node);
this.rootObjList.forEach((x,i) => { this.rootObjList.forEach((x, i) => {
let q=`main-${this.randomString()}` let q = `main-${this.randomString()}`;
this.graph_json_data.nodes.push(this.formatNode(x, q)); // 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.graph_json_data.links.push(
this.formatLink("0", `${q}_${x.Id}`, true) this.formatLink("0", `${q}_${x.Id}`, true)
); );
x.ChildList.forEach(y => { x.ChildList.forEach(y => {
let qy=`child-${this.randomString()}` let qy = `child-${this.randomString()}`;
this.graph_json_data.nodes.push(this.formatNode(y, qy)); 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.graph_json_data.links.push(
this.formatLink(`${q}_${x.Id}`, `${qy}_${y.Id}`, false) this.formatLink(`${q}_${x.Id}`, `${qy}_${y.Id}`, false)
); );
}); });
x.ParentList.forEach(z => { x.ParentList.forEach(z => {
let zy=`parent-${this.randomString()}` let zy = `parent-${this.randomString()}`;
this.graph_json_data.nodes.push(this.formatNode(z, zy,true)); this.graph_json_data.nodes.push(this.formatNode(z, zy, true));
this.graph_json_data.links.push( this.graph_json_data.links.push(
this.formatLink(`${zy}_${z.Id}`, `${q}_${x.Id}`, false) this.formatLink(`${zy}_${z.Id}`, `${q}_${x.Id}`, false)
); );
...@@ -120,14 +141,18 @@ export default { ...@@ -120,14 +141,18 @@ export default {
this.graph_json_data.rootId this.graph_json_data.rootId
).lot.childs; ).lot.childs;
level_1_nodes.forEach(thisLevel1Node => { level_1_nodes.forEach(thisLevel1Node => {
if(!thisLevel1Node.nodeParent){
thisLevel1Node.parentExpanded=false
}
this.applyCollapseStyle2Node(thisLevel1Node); this.applyCollapseStyle2Node(thisLevel1Node);
}); });
this.$refs.seeksRelationGraph.refresh(); this.$refs.seeksRelationGraph.refresh();
} }
); );
}, },
randomString() { randomString() {
let length=6 let length = 6;
var str = var str =
"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var result = ""; var result = "";
...@@ -142,7 +167,7 @@ export default { ...@@ -142,7 +167,7 @@ export default {
} }
let node = { let node = {
id, id,
disableDrag: false, disableDrag: true,
html: this.formatHtml( html: this.formatHtml(
obj.EmName, obj.EmName,
obj.ProgressState, obj.ProgressState,
...@@ -156,13 +181,13 @@ export default { ...@@ -156,13 +181,13 @@ export default {
? obj.ChildNum ? obj.ChildNum
: 0 : 0
}; };
if (prev.indexOf('child') != -1) { if (prev.indexOf("child") != -1) {
node.childNum = obj.ChildList node.childNum = obj.ChildList
? obj.ChildList.length ? obj.ChildList.length
: obj.ChildNum : obj.ChildNum
? obj.ChildNum ? obj.ChildNum
: 0; : 0;
} else if (prev.indexOf('parent') != -1) { } else if (prev.indexOf("parent") != -1) {
node.childNum = obj.ParentList node.childNum = obj.ParentList
? obj.ParentList.length ? obj.ParentList.length
: obj.ParentNum : obj.ParentNum
...@@ -183,10 +208,14 @@ export default { ...@@ -183,10 +208,14 @@ export default {
}; };
node.expandHolderPosition = "left"; node.expandHolderPosition = "left";
node.expanded = false; 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; return node;
}, },
formatLink(from, to, isHide) { formatLink(from, to, isHide) {
...@@ -198,10 +227,16 @@ export default { ...@@ -198,10 +227,16 @@ export default {
}; };
}, },
formatHtml(name, status, progress, statusName, title) { 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, 0,
1 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; return html;
}, },
onSizeOptionChanged() { onSizeOptionChanged() {
...@@ -217,8 +252,9 @@ export default { ...@@ -217,8 +252,9 @@ export default {
// _node的子节点将被隐藏，同时让_node右侧显示一个加号，点击后可以展开子节点 // _node的子节点将被隐藏，同时让_node右侧显示一个加号，点击后可以展开子节点
if (_node.lot.childs.length > 0) { if (_node.lot.childs.length > 0) {
_node.lot.childs.forEach(thisChildNode => { _node.lot.childs.forEach(thisChildNode => {
thisChildNode.isShow = false;
this.applyCollapseStyle2Node(thisChildNode); thisChildNode.isShow = false;
this.applyCollapseStyle2Node(thisChildNode);
}); });
_node.expanded = false; _node.expanded = false;
_node.expandHolderPosition = "right"; _node.expandHolderPosition = "right";
...@@ -251,9 +287,9 @@ export default { ...@@ -251,9 +287,9 @@ export default {
}); });
}, },
loadChildNodesFromRemoteServer(node, callback) { loadChildNodesFromRemoteServer(node, callback) {
let Type=2 let Type = 2;
if(node.id.indexOf('parent')!=-1){ if (node.id.indexOf("parent") != -1) {
Type=1 Type = 1;
} }
queryUserOKRNextAlignView({ queryUserOKRNextAlignView({
PeriodId: this.proid, PeriodId: this.proid,
...@@ -265,16 +301,29 @@ export default { ...@@ -265,16 +301,29 @@ export default {
nodes: [], nodes: [],
links: [] links: []
}; };
let zy=`child-${this.randomString()}` let zy = `child-${this.randomString()}`;
if(node.id.indexOf('parent')!=-1){ // if (node.id.indexOf("parent") != -1) {
zy=`parent-${this.randomString()}` // zy = `parent-${this.randomString()}`;
} // }
r.Data.forEach(x => { r.Data.forEach(x => {
_new_json_data.nodes.push(this.formatNode(x, zy)); //_new_json_data.nodes.push(this.formatNode(x, zy));
if(zy.indexOf('child')!=-1){ let newNode=this.formatNode(x, zy)
_new_json_data.links.push(this.formatLink(node.id, `${zy}_${x.Id}`, false)); if(node.nodeParent||node.rightNode){
}else{ newNode.rightNode=newNode
_new_json_data.links.push(this.formatLink(`${zy}_${x.Id}`,node.id, false)); 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); callback(_new_json_data);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment