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
Show 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) {
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
View file @ adc7ef25
......@@ -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
View file @ adc7ef25
......@@ -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
View file @ adc7ef25
......@@ -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
View file @ adc7ef25
<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 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 @@
<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
View file @ adc7ef25
......@@ -476,7 +476,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
View file @ adc7ef25
......@@ -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,233 +128,352 @@ 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() {
//
// },
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() {
// 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
// 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() {
// 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 => {
if (!thisNode.nodeParent) {
thisNode.isShow = true;
}
});
this.$parent.onNodeExpandEvent(this.nodeProps, e);
} else {
this.nodeProps.expanded = false;
this.nodeProps.lot.childs.forEach(thisNode => {
thisNode.isShow = true
})
this.$parent.onNodeExpandEvent(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.expanded = false
this.nodeProps.parentExpanded = true;
this.nodeProps.lot.childs.forEach(thisNode => {
thisNode.isShow = false
})
this.$parent.onNodeCollapseEvent(this.nodeProps, e)
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) {
// 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) {
if (col[0] === '#') {
var _s = col.substring(1)
// if (this.borderColor !== '') {
// return this.borderColor
// }
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;*/
......@@ -281,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;
......@@ -363,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
View file @ adc7ef25
......@@ -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
View file @ adc7ef25
......@@ -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) {
......@@ -40,9 +38,9 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
// var __prev_node
thisLevelNodes.forEach(thisNode => {
var __thisNode_child_size = 0
// console.log('Build node::', thisNode.text, thisNode.targetNodes.length)
if (levelDirect === -1) {
// console.log('Build node::from::', thisNode.text, thisNode.targetFrom.length)
let __thisTargetIndex = 0
thisNode.targetFrom.forEach((thisTarget) => {
if (!thisTarget.lot)thisTarget.lot = { eached: false }
......@@ -51,38 +49,42 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
thisTarget.lot.eached = true
thisTarget.lot.parent = thisNode
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)
newLevelNodes.push(thisTarget)
__thisNode_child_size++
} else {
thisNode.lot.childs.push(thisTarget)
// console.log('hide node:', thisTarget.name, 'from:', thisNode.text)
}
}
})
} else {
// console.log('Build node::to::', thisNode.text, thisNode.targetTo.length)
let __thisTargetIndex = 0
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++
// thisTarget.lot.prevNode = __prev_node
// if (__prev_node)__prev_node.lot.nextNode = thisTarget
// __prev_node = thisTarget
thisNode.lot.childs.push(thisTarget)
newLevelNodes.push(thisTarget)
__thisNode_child_size++
} else {
thisNode.lot.childs.push(thisTarget)
// console.log('hide node:', thisTarget.name, 'from:', thisNode.text)
}
}
})
if(thisNode.targetFrom && thisNode.targetFrom.length>0){
thisNode.targetFrom.forEach((thisTarget) => {
if (!thisTarget.lot)thisTarget.lot = { eached: false }
if (!thisTarget.lot.eached && thisTarget.nodeParent) {
......@@ -90,13 +92,17 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
thisTarget.lot.eached = true
thisTarget.lot.parent = thisNode
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)
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)
}
}
})
......@@ -112,27 +118,31 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
if (__thisLOT_subling.all_strength > analyticResult.max_strength) {
analyticResult.max_strength = __thisLOT_subling.all_strength
}
// console.log(thisDeep, 'next level nodes:', newLevelNodes.length)
if (newLevelNodes.length > 0) {
// console.log('thisLevelNodes.length:', thisLevelNodes, thisLevelNodes.length)
this.analysisNodes4Didirectional(willLayoutNodes, newLevelNodes, thisDeep + levelDirect, analyticResult, levelDirect)
} 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)
}
})
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) {
if (!rootNode) {
console.error('root is null')
return
......@@ -142,11 +152,11 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
this.__origin_nodes = allNodes
this.rootNode = rootNode
allNodes.forEach(thisNode => {
// thisNode.lot = { eached: false }
thisNode.lot.eached = false
thisNode.lot.notLeafNode = false
thisNode.lot.childs = []
// thisNode.lot.parent = undefined
thisNode.lot.index_of_parent = 0
thisNode.lot.strength = 0
thisNode.lot.strengthWithChilds_from = 0
......@@ -170,21 +180,47 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
max_length: 1,
max_strength: 1
}
this.analysisNodes4Didirectional(this.allNodes, [this.rootNode], 0, analyticResult, 1)
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) {
var __mapWidth = this.graphSetting.viewSize.width
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 __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) {
var _center_offset_x = parseInt(this.config.centerOffset_x) || 0
var _center_offset_y = parseInt(this.config.centerOffset_y) || 0
......@@ -202,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
}
rootNode.x = rootNode.lot.x + __offsetX
rootNode.y = rootNode.lot.y + __offsetY
} else {
if (rootNode.origin_x === undefined) {
rootNode.origin_x = rootNode.x
rootNode.origin_y = rootNode.y
......@@ -215,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
}
rootNode.lot.placed = true
var dynamicSizeConfig = {
......@@ -223,21 +256,178 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
__mapHeight
}
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) {
thisNode.lot.placed = true
return
}
if (!SeeksGraphMath.isAllowShowNode(thisNode)) return
// console.log(thisNode.text, thisNode.offset_x, thisNode.offset_y)
var __offsetX = thisNode.offset_x || 0
var __offsetY = thisNode.offset_y || 0
thisNode.x = thisNode.offset_x + thisNode.lot.x + __offsetX
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') {
......@@ -252,11 +442,12 @@ 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.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') {
thisNode.lot.x = rootNode.lot.x - this.getLevelDistance(thisNode, thisNode.lot.subling.level, __per_width)
} else {
......@@ -266,12 +457,25 @@ 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)
}
})
// 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 {
const __min_per_height = this.config.min_per_height || 250
const __max_per_height = this.config.max_per_height || 400
......@@ -284,23 +488,38 @@ 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)
// 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') {
thisNode.lot.y = rootNode.lot.y - this.getLevelDistance(thisNode, thisNode.lot.subling.level, __per_height)
} 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)
}
})
this.allNodes.forEach(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)
// 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) {
......@@ -316,4 +535,5 @@ function SeeksBidirectionalTreeLayouter(layoutSetting, graphSetting) {
}
}
}
export default SeeksBidirectionalTreeLayouter
src/components/school/schoolarea/school-form.vue
View file @ adc7ef25
......@@ -12,7 +12,7 @@
<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 || '请填写校区地址']" />
<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
@filter="filterFn">
<template v-slot:no-option>
......@@ -23,23 +23,23 @@
</q-item>
</template>
</q-select>
<q-select filled v-model="model" use-input input-debounce="0" label="Simple filter" :options="options"
@filter="filterFn" style="width: 250px">
<q-select filled v-model="model" class="col-6 q-pb-lg" use-input input-debounce="0" label="Simple filter" :options="options"
@filter="filterFn">
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No results
未找到相关数据
</q-item-section>
</q-item>
</template>
</q-select>
<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"
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"
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">
<q-toggle size="md" label="校区状态" color="primary" :false-value="1" :true-value="0"
v-model="objOption.Status" />
......
src/pages/okr/okr-align-view.vue
View file @ adc7ef25
......@@ -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);
......
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