You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
377 lines
12 KiB
377 lines
12 KiB
3 years ago
|
<template>
|
||
|
|
<div class="screen-org-tree">
|
||
|
|
<div class="level-row" v-for="(level1, index1) in list" :key="index1">
|
||
|
|
<div class="level-1-row">
|
||
|
|
<div class="level-1-row-item">
|
||
|
|
<img class="level-1-row-item-line" src="../../../../../../assets/img/plugins/zuo.png">
|
||
|
|
<div class="level-1-row-item-content">
|
||
|
|
<div class="level-1-row-item-content-info">
|
||
|
|
<img src="../../../../../../assets/img/plugins/dangqi.png" class="level-1-row-item-content-info-icon">
|
||
|
|
<div class="level-1-row-item-content-info-text">
|
||
|
|
<div class="level-1-row-item-content-info-text-title">{{level1.name}}</div>
|
||
|
|
<div class="level-1-row-item-content-info-text-leader">书记: {{level1.leaderName}}
|
||
|
|
<img src="../../../../../../assets/img/plugins/shuoming-X.png" class="level-1-row-item-content-info-text-leader-icon" @click="onShowInfoDialog(level1.id, level1.leaderId, $event)">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<img src="../../../../../../assets/img/plugins/jiantou-D.png" class="level-1-row-item-content-arrow">
|
||
|
|
</div>
|
||
|
|
<img class="level-1-row-item-line" src="../../../../../../assets/img/plugins/you.png">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="level-2-row">
|
||
|
|
<div class="level-2-row-item" v-for="(level2, index2) in level1.children" :key="index2">
|
||
|
|
<img class="level-2-row-item-top" src="../../../../../../assets/img/plugins/jiantou-A.png">
|
||
|
|
<div class="level-2-row-item-content">
|
||
|
|
<img src="../../../../../../assets/img/plugins/danghui.png" class="level-2-row-item-content-icon">
|
||
|
|
<div class="level-2-row-item-content-title">{{level2.name}}</div>
|
||
|
|
<div class="level-2-row-item-content-leader">书记: {{level2.leaderName}}
|
||
|
|
<img src="../../../../../../assets/img/plugins/shuoming-X.png" class="level-2-row-item-content-leader-icon" @click="onShowInfoDialog(level2.id, level2.leaderId, $event)">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<img class="level-2-row-item-bottom" src="../../../../../../assets/img/plugins/jiantou-X.png">
|
||
|
|
<div class="level-3-item" v-for="(level3, index3) in level2.children" :key="index3">
|
||
|
|
<img src="../../../../../../assets/img/plugins/dian.png" class="level-3-item-icon">
|
||
|
|
<div class="level-3-item-title">{{level3.name}}</div>
|
||
|
|
<div class="level-3-item-leader">{{level3.leaderName}}</div>
|
||
|
|
<img class="level-3-item-leader-icon" src="../../../../../../assets/img/plugins/shuoming-X.png" @click="onShowInfoDialog(level3.id, level3.leaderId, $event)">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 个人信息弹窗 -->
|
||
|
|
<transition name="el-fade-in-linear">
|
||
|
|
<info-dialog v-if="showInfo"
|
||
|
|
:axisStructId="axisStructId"
|
||
|
|
:leaderId="leaderId"
|
||
|
|
:position="pos"
|
||
|
|
@close="showInfo = false"></info-dialog>
|
||
|
|
</transition>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import infoDialog from './info-dialog'
|
||
|
|
export default {
|
||
|
|
name: "screen-org-tree",
|
||
|
|
components: {
|
||
|
|
infoDialog
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
id: '0',
|
||
|
|
name: '兴德路社区党委',
|
||
|
|
leaderId: '0',
|
||
|
|
leaderName: '杨磊',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '1',
|
||
|
|
name: '第一党支部',
|
||
|
|
leaderId: '1',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '11',
|
||
|
|
name: '第一党小组第一党小组第一党小组',
|
||
|
|
leaderId: '11',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '12',
|
||
|
|
name: '第二党小组',
|
||
|
|
leaderId: '12',
|
||
|
|
leaderName: '牟振华',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '31',
|
||
|
|
name: '第三党小组',
|
||
|
|
leaderId: '31',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '42',
|
||
|
|
name: '第四党小组',
|
||
|
|
leaderId: '42',
|
||
|
|
leaderName: '牟振华',
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '2',
|
||
|
|
name: '第二党支部',
|
||
|
|
leaderId: '2',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '21',
|
||
|
|
name: '第一党小组',
|
||
|
|
leaderId: '21',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '22',
|
||
|
|
name: '第二党小组',
|
||
|
|
leaderId: '22',
|
||
|
|
leaderName: '牟振华',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '31',
|
||
|
|
name: '第三党小组',
|
||
|
|
leaderId: '31',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '42',
|
||
|
|
name: '第四党小组',
|
||
|
|
leaderId: '42',
|
||
|
|
leaderName: '牟振华',
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '3',
|
||
|
|
name: '第三党支部',
|
||
|
|
leaderId: '3',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '31',
|
||
|
|
name: '第一党小组',
|
||
|
|
leaderId: '31',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '32',
|
||
|
|
name: '第二党小组',
|
||
|
|
leaderId: '32',
|
||
|
|
leaderName: '牟振华',
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '4',
|
||
|
|
name: '第四党支部',
|
||
|
|
leaderId: '4',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '41',
|
||
|
|
name: '第一党小组',
|
||
|
|
leaderId: '41',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '42',
|
||
|
|
name: '第二党小组',
|
||
|
|
leaderId: '42',
|
||
|
|
leaderName: '牟振华',
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '5',
|
||
|
|
name: '第五党支部',
|
||
|
|
leaderId: '5',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: '51',
|
||
|
|
name: '第一党小组',
|
||
|
|
leaderId: '51',
|
||
|
|
leaderName: '吴红',
|
||
|
|
children: []
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '52',
|
||
|
|
name: '第二党小组',
|
||
|
|
leaderId: '52',
|
||
|
|
leaderName: '牟振华',
|
||
|
|
children: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
],
|
||
|
|
showInfo: false, // 是否显示个人信息弹窗
|
||
|
|
pos: { x: 0, y: 0 }, // 个人信息弹窗位置
|
||
|
|
axisStructId: '', // 传给弹窗的组织节点id
|
||
|
|
leaderId: '', // 传给弹窗的人员id
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onShowInfoDialog (axisStructId, leaderId, e) {
|
||
|
|
this.axisStructId = axisStructId
|
||
|
|
this.leaderId = leaderId
|
||
|
|
this.pos.x = e.layerX
|
||
|
|
this.pos.y = e.layerY
|
||
|
|
this.showInfo = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" >
|
||
|
|
.screen-org-tree {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.level-1-row {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
&-item {
|
||
|
|
width: 80%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
border-bottom: 1px dashed #2b85ff;
|
||
|
|
cursor: pointer;
|
||
|
|
&-line {
|
||
|
|
width: 178px;
|
||
|
|
height: 16px;
|
||
|
|
margin-top: 30px;
|
||
|
|
}
|
||
|
|
&-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 0 7px;
|
||
|
|
&-info {
|
||
|
|
width: 300px;
|
||
|
|
height: 80px;
|
||
|
|
background: url('../../../../../../assets/img/plugins/dangwei-by.png') no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
&-icon {
|
||
|
|
width: 57px;
|
||
|
|
height: 41px;
|
||
|
|
margin-left: 12px;
|
||
|
|
}
|
||
|
|
&-text {
|
||
|
|
width: calc(100% - 70px);
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
&-title {
|
||
|
|
height: 30px;
|
||
|
|
font-size: 26px;
|
||
|
|
font-weight: bold;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
letter-spacing: 3px;
|
||
|
|
margin-left: 7px;
|
||
|
|
margin-top: 20px;
|
||
|
|
background-image: linear-gradient(to top, #00a2ff, #56f9ff, #ffffff);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
&-leader {
|
||
|
|
height: calc(100% - 50px);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
font-size: 16px;
|
||
|
|
&-icon {
|
||
|
|
margin-left: 7px;
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
cursor: help;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.level-2-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: space-around;
|
||
|
|
&-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
&-top {
|
||
|
|
|
||
|
|
}
|
||
|
|
&-bottom {
|
||
|
|
|
||
|
|
}
|
||
|
|
&-content {
|
||
|
|
width: 170px;
|
||
|
|
height: 110px;
|
||
|
|
background: url('../../../../../../assets/img/plugins/zhibu-by.png') no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
cursor: pointer;
|
||
|
|
&-icon {
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
&-title {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
letter-spacing: 1px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
word-wrap:break-word;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
display: -webkit-box;
|
||
|
|
}
|
||
|
|
&-leader {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
&-icon {
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
margin-left: 4px;
|
||
|
|
cursor: help;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.level-3-item {
|
||
|
|
width: 170px;
|
||
|
|
height: 38px;
|
||
|
|
background: url('../../../../../../assets/img/plugins/xiaozu-by.png') no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
&-leader-icon {
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
cursor: help;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|