After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 6.7 KiB |
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 7.6 KiB |
After Width: | Height: | Size: 9.9 KiB |
After Width: | Height: | Size: 157 KiB |
@ -0,0 +1,438 @@ |
|||
<template> |
|||
<div class="screen-org-tree"> |
|||
<div class="no-data" v-if="list.length == 0"> |
|||
<!-- <img |
|||
src="../../../../../../assets/img/modules/visual/noData.png" |
|||
alt="" |
|||
srcset="" |
|||
class="no-data-img" |
|||
/> --> |
|||
<span class="no-data-text">暂无数据~</span> |
|||
</div> |
|||
<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/images/jiagou/zuo.png"> |
|||
<div class="level-1-row-item-content"> |
|||
<div class="level-1-row-item-content-info" @click.stop="onClickNode(level1.id)"> |
|||
<img src="../../assets/images/jiagou/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/images/jiagou/shuoming-X.png" |
|||
class="level-1-row-item-content-info-text-leader-icon" |
|||
@click.stop="onShowInfoDialog(level1.id, level1.leaderId, $event)"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<img src="../../assets/images/jiagou/jiantou-D.png" class="level-1-row-item-content-arrow"> |
|||
</div> |
|||
<img class="level-1-row-item-line" src="../../assets/images/jiagou/you.png"> |
|||
</div> |
|||
</div> |
|||
<div class="level-2-row"> |
|||
<div class="level-2-row-item" v-for="(level2, index2) in level1.children" :key="index2" |
|||
@click.stop="onClickNode(level2.id)"> |
|||
<img class="level-2-row-item-top" src="../../assets/images/jiagou/jiantou-A.png"> |
|||
<div class="level-2-row-item-content"> |
|||
<img src="../../assets/images/jiagou/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/images/jiagou/shuoming-X.png" |
|||
class="level-2-row-item-content-leader-icon" |
|||
@click.stop="onShowInfoDialog(level2.id, level2.leaderId, $event)"> |
|||
</div> |
|||
</div> |
|||
<img class="level-2-row-item-bottom" src="../../assets/images/jiagou/jiantou-X.png"> |
|||
<div class="level-3-item" v-for="(level3, index3) in level2.children" :key="index3" |
|||
@click.stop="onClickNode(level3.id)"> |
|||
<img src="../../assets/images/jiagou/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/images/jiagou/shuoming-X.png" |
|||
@click.stop="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 |
|||
}, |
|||
props: { |
|||
list: { |
|||
type: Array |
|||
} |
|||
}, |
|||
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 |
|||
}, |
|||
onClickNode(id) { |
|||
console.log(id) |
|||
this.$emit('onClickNode', { id: id }) |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
.screen-org-tree { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.level-row { |
|||
overflow: auto; |
|||
} |
|||
|
|||
.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/images/jiagou/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/images/jiagou/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/images/jiagou/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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 暂无数据 |
|||
.no-data { |
|||
width: 100%; |
|||
height: calc(100% - 50px); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
&-text { |
|||
width: 249px; |
|||
height: 172px; |
|||
line-height: 172px; |
|||
color: #fff; |
|||
} |
|||
} |
|||
}</style> |