442 lines
8.6 KiB
Vue
442 lines
8.6 KiB
Vue
<template>
|
|
<view class="table pr" :style="'zoom:' + size + ';'">
|
|
<view class="v-tr" style="display: flex">
|
|
<view
|
|
class="v-td"
|
|
:class="{
|
|
colspan: Array.isArray(treeData.children)
|
|
? treeData.children.length * 2
|
|
: 1,
|
|
parentLevel:
|
|
Array.isArray(treeData.children) && treeData.children.length,
|
|
extend:
|
|
Array.isArray(treeData.children) &&
|
|
treeData.children.length &&
|
|
treeData.extend,
|
|
}"
|
|
>
|
|
<view class="node">
|
|
<view
|
|
class="person"
|
|
:class="Array.isArray(treeData.class) ? treeData.class : []"
|
|
>
|
|
<view class="frame-text">
|
|
<!-- <view style="font-weight: bold">{{
|
|
treeData.nodeCode === '0-root' ? '' : treeData.nodeCode
|
|
}}</view> -->
|
|
<view v-if="treeData.memberCode && treeData.memberName">
|
|
<view>{{ treeData.memberCode }}</view>
|
|
<view
|
|
>{{ treeData.stage }}-{{ treeData.stageSort }}({{
|
|
treeData.pointMember
|
|
}})</view
|
|
>
|
|
<!-- <view>{{ treeData.pointMember }}</view> -->
|
|
<view>{{ treeData.creationTime }}</view>
|
|
</view>
|
|
<view v-else> 空点位 </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="v-tr"
|
|
v-if="
|
|
Array.isArray(treeData.children) &&
|
|
treeData.children.length &&
|
|
treeData.extend
|
|
"
|
|
>
|
|
<view
|
|
v-for="(children, index) in treeData.children"
|
|
:key="index"
|
|
colspan="2"
|
|
class="childLevel v-td"
|
|
>
|
|
<TreeChart
|
|
:json="children"
|
|
:left="0"
|
|
:top="0"
|
|
@click-node="clickNode"
|
|
@click-top="clickTop"
|
|
:stageName="stageName"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TreeChart',
|
|
props: ['json', 'size', 'stageName'],
|
|
data() {
|
|
return {
|
|
treeData: {},
|
|
}
|
|
},
|
|
watch: {
|
|
json: {
|
|
handler: function (Props) {
|
|
let extendKey = function (jsonData) {
|
|
jsonData.extend =
|
|
jsonData.extend === void 0 ? true : !!jsonData.extend
|
|
if (Array.isArray(jsonData.children)) {
|
|
jsonData.children.forEach(c => {
|
|
extendKey(c)
|
|
})
|
|
}
|
|
return jsonData
|
|
}
|
|
if (Props) {
|
|
this.treeData = extendKey(Props)
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
toggleExtend: function (treeData) {
|
|
treeData.extend = !treeData.extend
|
|
this.$forceUpdate()
|
|
},
|
|
clickNode(e) {
|
|
this.$emit('click-node', e)
|
|
},
|
|
clickTop(e) {
|
|
this.$emit('click-top', e)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.f18 {
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
.pv-btn {
|
|
width: 200rpx;
|
|
height: 50rpx;
|
|
background: #007bff;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
line-height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: auto;
|
|
margin-top: 12rpx;
|
|
margin-bottom: 12rpx;
|
|
border-radius: 8rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 123, 255, 0.2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.pv-btn:hover {
|
|
background: #0056b3;
|
|
transform: translateY(-1rpx);
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 123, 255, 0.3);
|
|
}
|
|
|
|
.next-btn {
|
|
border-radius: 50%;
|
|
background: #6c757d;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: auto;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.next-btn:hover {
|
|
background: #495057;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.table {
|
|
border-collapse: separate !important;
|
|
border-spacing: 0 !important;
|
|
width: 100%;
|
|
/* background: #f8f9fa; */
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.v-tr {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.v-td {
|
|
position: relative;
|
|
vertical-align: top;
|
|
padding: 0 0 130rpx 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.extend_handle {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 30rpx;
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
padding: 10rpx;
|
|
transform: translate3d(-30rpx, 0, 0);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.extend_handle:before {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
border: 4rpx solid;
|
|
border-color: #6c757d #6c757d transparent transparent;
|
|
transform: rotateZ(135deg);
|
|
transform-origin: 50% 50% 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.extend_handle:hover:before {
|
|
border-color: #495057 #495057 transparent transparent;
|
|
transform: rotateZ(135deg) scale(1.1);
|
|
}
|
|
|
|
.extend .extend_handle:before {
|
|
transform: rotateZ(-45deg);
|
|
}
|
|
|
|
.extend .extend_handle:hover:before {
|
|
transform: rotateZ(-45deg) scale(1.1);
|
|
}
|
|
|
|
.extend::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 84rpx;
|
|
height: 84rpx;
|
|
border-left: 4rpx solid #dee2e6;
|
|
transform: translate3d(-2rpx, 0, 0);
|
|
}
|
|
|
|
.childLevel::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 100%;
|
|
height: 84rpx;
|
|
border-left: 4rpx solid #dee2e6;
|
|
transform: translate3d(-2rpx, 0, 0);
|
|
}
|
|
|
|
.childLevel::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: -88rpx;
|
|
border-top: 4rpx solid #dee2e6;
|
|
}
|
|
|
|
.childLevel:first-child:before,
|
|
.childLevel:last-child:before {
|
|
display: none;
|
|
}
|
|
|
|
.childLevel:first-child:after {
|
|
left: 50%;
|
|
height: 84rpx;
|
|
border: 4rpx solid;
|
|
border-color: #dee2e6 transparent transparent #dee2e6;
|
|
border-radius: 8rpx 0 0 0;
|
|
transform: translate3d(2rpx, 0, 0);
|
|
}
|
|
|
|
.childLevel:last-child:after {
|
|
right: 50%;
|
|
height: 84rpx;
|
|
border: 4rpx solid;
|
|
border-color: #dee2e6 #dee2e6 transparent transparent;
|
|
border-radius: 0 8rpx 0 0;
|
|
transform: translate3d(-2rpx, 0, 0);
|
|
}
|
|
|
|
.childLevel:first-child.childLevel:last-child::after {
|
|
left: auto;
|
|
border-radius: 0;
|
|
border-color: transparent #dee2e6 transparent transparent;
|
|
transform: translate3d(2rpx, 0, 0);
|
|
}
|
|
|
|
.node {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 0 10rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.node .person {
|
|
position: relative;
|
|
display: inline-block;
|
|
z-index: 2;
|
|
width: fit-content;
|
|
padding: 20rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid #e9ecef;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
min-width: 120rpx;
|
|
}
|
|
|
|
.node .person:hover {
|
|
transform: translateY(-4rpx);
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
|
border-color: #6c757d;
|
|
}
|
|
|
|
.node .person:active {
|
|
transform: translateY(-2rpx);
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.node .person .person-ava {
|
|
width: 88rpx;
|
|
height: 53rpx;
|
|
border-radius: 15rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.frame-text {
|
|
border-radius: 8rpx;
|
|
font-size: 22rpx;
|
|
margin: 0 auto;
|
|
color: #495057;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.frame-text view:first-child {
|
|
font-weight: 600;
|
|
font-size: 24rpx;
|
|
margin-bottom: 4rpx;
|
|
color: #212529;
|
|
}
|
|
|
|
.frame-text view:not(:first-child) {
|
|
font-size: 20rpx;
|
|
color: #6c757d;
|
|
margin-bottom: 2rpx;
|
|
}
|
|
|
|
.node .person .avat {
|
|
display: block;
|
|
width: 4em;
|
|
height: 4em;
|
|
margin: auto;
|
|
overflow: hidden;
|
|
background: #f8f9fa;
|
|
border: 4px solid #e9ecef;
|
|
box-sizing: border-box;
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.node .person .avat img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.node .person .name {
|
|
display: block;
|
|
margin: auto;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
font-size: 20rpx;
|
|
line-height: 1.5;
|
|
padding-top: 24rpx;
|
|
color: #495057;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.node .person .name-bottom {
|
|
display: block;
|
|
margin: auto;
|
|
overflow: hidden;
|
|
border-top: none;
|
|
box-sizing: border-box;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.node.hasMate::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 2em;
|
|
right: 2em;
|
|
top: 2em;
|
|
border-top: 4px solid #dee2e6;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 横板 */
|
|
.landscape {
|
|
transform: translate(-100%, 0) rotate(-90deg);
|
|
transform-origin: 100% 0;
|
|
}
|
|
|
|
.landscape .node {
|
|
text-align: left;
|
|
height: 8em;
|
|
width: 8em;
|
|
}
|
|
|
|
.landscape .person {
|
|
position: relative;
|
|
transform: rotate(90deg);
|
|
padding-left: 4.5em;
|
|
height: 4em;
|
|
top: 4em;
|
|
left: -1em;
|
|
}
|
|
|
|
.landscape .person .avat {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.landscape .person .name {
|
|
height: 4em;
|
|
line-height: 4em;
|
|
}
|
|
|
|
.landscape .hasMate {
|
|
position: relative;
|
|
}
|
|
|
|
.landscape .hasMate .person {
|
|
position: absolute;
|
|
}
|
|
|
|
.landscape .hasMate .person:first-child {
|
|
left: auto;
|
|
right: -4em;
|
|
}
|
|
|
|
.landscape .hasMate .person:last-child {
|
|
left: -4em;
|
|
margin-left: 0;
|
|
}
|
|
</style>
|