|
|
|
@ -2,26 +2,34 @@ |
|
|
|
<div class="organWrap"> |
|
|
|
<div class="top-nav"> |
|
|
|
<div class="top-nav-list"> |
|
|
|
<div v-for="item in navList" :key="item.key" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)">{{ item.name }}</div> |
|
|
|
<div v-for="item in navList" :key="item.key" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)"> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div style="width: 100%; height: 100%；position: relative;"> |
|
|
|
<div style="width: 100px; height: 100px; background-color: aqua; color: #fff;" v-drag>222</div> |
|
|
|
</div> --> |
|
|
|
<div class="content" v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'"> |
|
|
|
<div class="flowLevel"> |
|
|
|
<div>社区党委</div> |
|
|
|
<!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" --> |
|
|
|
<div class="content"> |
|
|
|
<div v-for="(item, index) in levelArr" :key="item" :class="[`flowLevel-${index + 1}`]"> |
|
|
|
<div>{{ getTitleNameMapFun(item) }}</div> |
|
|
|
</div> |
|
|
|
<div class="flowLevel-2"><div>网格党支部</div></div> |
|
|
|
<!-- <div class="flowLevel-6"></div> |
|
|
|
<div class="flowLevel-7"></div> |
|
|
|
<div class="flowLevel-8"></div> |
|
|
|
<div class="flowLevel-9"></div> |
|
|
|
<div class="flowLevel-10"></div> --> |
|
|
|
<!-- <div class="flowLevel-2"><div>网格党支部</div></div> |
|
|
|
<div class="flowLevel-3"><div>楼院党小组</div></div> |
|
|
|
<div class="flowLevel-4"><div>党员中心户</div></div> |
|
|
|
<div class="flowLevel-5"><div>联系家庭</div></div> |
|
|
|
<div class="flowLevel-5"><div>联系家庭</div></div> --> |
|
|
|
<el-row> |
|
|
|
<el-col :span="4"> |
|
|
|
<div class="contentList"></div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="20"> |
|
|
|
<div class="dingflow-design"> |
|
|
|
<div class="dingflow-design" v-loading="loading"> |
|
|
|
<nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
@ -31,6 +39,9 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { Loading } from "element-ui"; |
|
|
|
import { relativeTimeThreshold } from "moment"; |
|
|
|
|
|
|
|
// import Tree from "./components/tree.vue"; |
|
|
|
export default { |
|
|
|
name: "organizational", |
|
|
|
@ -39,6 +50,8 @@ export default { |
|
|
|
// }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
loading: false, |
|
|
|
levelArr: [], |
|
|
|
navList: [ |
|
|
|
{ |
|
|
|
name: "党委组织架构", |
|
|
|
@ -384,7 +397,55 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
mounted() { |
|
|
|
this.getTreeData(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//获取背景层级 |
|
|
|
getDataPLevel(item) { |
|
|
|
let arr = [...this.levelArr]; |
|
|
|
arr.push(item.partyOrgLevel); |
|
|
|
this.levelArr = [...arr]; |
|
|
|
if (item.children) { |
|
|
|
this.getDataPLevel(item.children[0]); |
|
|
|
} |
|
|
|
}, |
|
|
|
//获取树状结构 |
|
|
|
getTreeData() { |
|
|
|
this.loading = true; |
|
|
|
this.$http |
|
|
|
.get("/actual/base/organizational/structure/partyCommitteeOrg") |
|
|
|
.then((res) => { |
|
|
|
const { |
|
|
|
data: { code, data }, |
|
|
|
} = res; |
|
|
|
if (code === 0) { |
|
|
|
this.nodeConfig = data[0]; |
|
|
|
this.getDataPLevel(data[0]); |
|
|
|
this.loading = false; |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
this.loading = false; |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
getTitleNameMapFun(i) { |
|
|
|
let titleNameMap = new Map([ |
|
|
|
[1, "省委"], |
|
|
|
[2, "市委"], |
|
|
|
[3, "区委"], |
|
|
|
[4, "党工委"], |
|
|
|
[5, "党委"], |
|
|
|
[6, "党总支"], |
|
|
|
[7, "党支部"], |
|
|
|
[8, "楼院党小组"], |
|
|
|
[9, "党员中心户"], |
|
|
|
[10, "联系家庭"], |
|
|
|
]); |
|
|
|
return titleNameMap.get(i); |
|
|
|
}, |
|
|
|
|
|
|
|
chooseNav(item) { |
|
|
|
this.navList.forEach((d) => { |
|
|
|
if (item.key === d.key) { |
|
|
|
@ -462,6 +523,7 @@ export default { |
|
|
|
position: relative; |
|
|
|
transition: transform 0.3s ease-in-out; |
|
|
|
transform-origin: 50% 50%; |
|
|
|
// overflow: scroll; |
|
|
|
.contentList { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
@ -469,7 +531,7 @@ export default { |
|
|
|
// margin-bottom: 45px; |
|
|
|
// background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%); |
|
|
|
} |
|
|
|
.flowLevel { |
|
|
|
.flowLevel-1 { |
|
|
|
@include flowLevwlCommon; |
|
|
|
top: -10px; |
|
|
|
height: 164px; |
|
|
|
@ -486,11 +548,19 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.flowLevel-2 { |
|
|
|
.flowLevel-2, |
|
|
|
.flowLevel-3, |
|
|
|
.flowLevel-4, |
|
|
|
.flowLevel-5, |
|
|
|
.flowLevel-6, |
|
|
|
.flowLevel-7, |
|
|
|
.flowLevel-8 { |
|
|
|
@include flowLevwlCommon; |
|
|
|
top: 184px; |
|
|
|
height: 119px; |
|
|
|
line-height: 119px; |
|
|
|
height: 126px; |
|
|
|
line-height: 126px; |
|
|
|
} |
|
|
|
.flowLevel-2 { |
|
|
|
top: 181px; |
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
&::after { |
|
|
|
@ -504,15 +574,12 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.flowLevel-3 { |
|
|
|
@include flowLevwlCommon; |
|
|
|
top: 328px; |
|
|
|
height: 85px; |
|
|
|
line-height: 85px; |
|
|
|
top: 329px; |
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 10px; |
|
|
|
top: 31px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
@ -521,8 +588,78 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.flowLevel-4 { |
|
|
|
top: 475px; |
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
background-image: url(~@/assets/images/home/dyzxh.png); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.flowLevel-5 { |
|
|
|
top: 623px; |
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
background-image: url(~@/assets/images/home/lxjt.png); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.flowLevel-6 { |
|
|
|
top: 771px; |
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
background-image: url(~@/assets/images/home/lxjt.png); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.flowLevel-7 { |
|
|
|
top: 922px; |
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
background-image: url(~@/assets/images/home/lxjt.png); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.flowLevel-8 { |
|
|
|
top: 1070px; |
|
|
|
div { |
|
|
|
padding-left: 80px; |
|
|
|
&::after { |
|
|
|
@include flowLevelAfter; |
|
|
|
top: 35px; |
|
|
|
left: 15px; |
|
|
|
width: 180px; |
|
|
|
height: 60px; |
|
|
|
background-image: url(~@/assets/images/home/lxjt.png); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.flowLevel-9 { |
|
|
|
@include flowLevwlCommon; |
|
|
|
top: 429px; |
|
|
|
top: 1220px; |
|
|
|
height: 135px; |
|
|
|
line-height: 135px; |
|
|
|
div { |
|
|
|
@ -537,9 +674,9 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.flowLevel-5 { |
|
|
|
.flowLevel-10 { |
|
|
|
@include flowLevwlCommon; |
|
|
|
top: 598px; |
|
|
|
top: 1380px; |
|
|
|
height: 135px; |
|
|
|
line-height: 135px; |
|
|
|
div { |
|
|
|
|
SongZhen
2 years ago