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.
422 lines
12 KiB
422 lines
12 KiB
<template>
|
|
<div>
|
|
<div class="node-wrap" v-if="nodeConfig.orgType == '3'">
|
|
<div class="node-wrap-box">
|
|
<div class="node-box-after">
|
|
<div class="nodeBoxTop">
|
|
<nameSplit :item="nodeConfig" areaName="name" peopleName="name" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="branch-wrap">
|
|
<div class="branch-box-wrap">
|
|
<div class="branch-box">
|
|
<div
|
|
class="col-box"
|
|
v-for="(item, index) in nodeConfig.children"
|
|
:key="index"
|
|
>
|
|
<div class="condition-node">
|
|
<div class="condition-node-box">
|
|
<div class="auto-judge">
|
|
<div v-if="item.orgType != '6' && item.orgType != '7'">
|
|
<div
|
|
:class="[
|
|
item.children && item.children.length > 0
|
|
? 'wgdzbHover'
|
|
: 'wgdzb',
|
|
]"
|
|
>
|
|
<nameSplit
|
|
:item="item"
|
|
areaName="name"
|
|
peopleName="name"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="item._children"
|
|
style="text-align: center; cursor: pointer"
|
|
@click="getChildrenData(item, index, nodeConfig.children)"
|
|
>
|
|
<img
|
|
style="width: 16px; height: 16px; margin-left: 50px"
|
|
v-if="item.children && item.children.length > 0"
|
|
:src="require('@/assets/images/home/sh-red.png')"
|
|
alt=""
|
|
/>
|
|
<img
|
|
style="width: 16px; height: 16px; margin-left: 50px"
|
|
v-else
|
|
:src="require('@/assets/images/home/zk-red.png')"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.orgType == '6'">
|
|
<div
|
|
:class="[
|
|
item.children && item.children.length > 0
|
|
? 'lydxzHover'
|
|
: 'lydxz',
|
|
]"
|
|
>
|
|
<nameSplit
|
|
:item="item"
|
|
areaName="name"
|
|
peopleName="name"
|
|
/>
|
|
</div>
|
|
<div
|
|
style="text-align: center; cursor: pointer"
|
|
@click="
|
|
getChildrenDataPople(item, index, nodeConfig.children)
|
|
"
|
|
>
|
|
<img
|
|
style="width: 16px; height: 16px; margin-left: 50px"
|
|
v-if="item.id == currentId"
|
|
:src="require('@/assets/images/home/sh-red.png')"
|
|
alt=""
|
|
/>
|
|
<img
|
|
style="width: 16px; height: 16px; margin-left: 50px"
|
|
v-else
|
|
:src="require('@/assets/images/home/zk-red.png')"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.orgType == '7'">
|
|
<div
|
|
:class="[
|
|
item.categoryWarn === 'red'
|
|
? 'dyzxhRed'
|
|
: item.categoryWarn === 'yellow'
|
|
? 'dyzxhYellow'
|
|
: item.categoryWarn === 'green'
|
|
? 'dyzxhGreen'
|
|
: '',
|
|
item.children && item.children.length > 0
|
|
? 'dyzxhHover'
|
|
: 'dyzxh',
|
|
]"
|
|
:title="item.name"
|
|
>
|
|
<div class="dyzxhDian" v-if="index === 0"></div>
|
|
<div class="dyzxhDian1" v-else></div>
|
|
{{ item.name }}
|
|
</div>
|
|
<!-- <div
|
|
v-if="item._children"
|
|
style="text-align: center; cursor: pointer"
|
|
@click="getChildrenDataPople(item, index, nodeConfig.children)"
|
|
>
|
|
<img
|
|
style="width: 16px; height: 16px; margin-left: 50px"
|
|
v-if="item.children && item.children.length > 0"
|
|
:src="require('@/assets/images/home/sh-red.png')"
|
|
alt=""
|
|
/>
|
|
<img
|
|
style="width: 16px; height: 16px; margin-left: 50px"
|
|
v-else
|
|
:src="require('@/assets/images/home/zk-red.png')"
|
|
alt=""
|
|
/>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nodeWrapGrid
|
|
v-if="item.children"
|
|
:nodeConfig.sync="item"
|
|
></nodeWrapGrid>
|
|
<template v-if="index != 0">
|
|
<div class="top-left-cover-line"></div>
|
|
</template>
|
|
<template v-if="index != nodeConfig.children.length - 1">
|
|
<div class="top-right-cover-line"></div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <nodeWrapGrid v-if="nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode"></nodeWrapGrid> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { partyMemberCenListByOrg } from '@/api/hsyf'
|
|
export default {
|
|
props: ['nodeConfig'],
|
|
data () {
|
|
return {
|
|
homeTypeArr: [],
|
|
currentId: null,
|
|
sixLevelArr: [
|
|
'province',
|
|
'city',
|
|
'district',
|
|
'street',
|
|
'community',
|
|
'grid_manager'
|
|
]
|
|
}
|
|
},
|
|
mounted () {},
|
|
computed: {},
|
|
watch: {},
|
|
methods: {
|
|
getAllName (item) {
|
|
return item
|
|
},
|
|
|
|
getItemNameArr (str) {
|
|
return str.split(',').slice(0, 2)
|
|
},
|
|
|
|
spliceNameFun (row, num) {
|
|
if (row && row.length > num) {
|
|
return row.substring(0, num) + '...'
|
|
}
|
|
return row
|
|
},
|
|
|
|
getOnerSixLevelFlag (item) {
|
|
return this.sixLevelArr.includes(item.level)
|
|
},
|
|
|
|
findParentParentId (nodeConfig, pid) {
|
|
let parentParentId = ''
|
|
if (nodeConfig.id === pid) {
|
|
return nodeConfig.pid
|
|
} else {
|
|
if (nodeConfig.children && nodeConfig.children.length > 0) {
|
|
for (let i = 0; i < nodeConfig.children.length; i++) {
|
|
parentParentId = this.findParentParentId(
|
|
nodeConfig.children[i],
|
|
pid
|
|
)
|
|
if (parentParentId) {
|
|
return parentParentId
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
getChildrenData (item, idx, arr) {
|
|
arr.forEach((element, index) => {
|
|
if (index === idx) {
|
|
if (element.children) {
|
|
element._children = element.children
|
|
element.children = null
|
|
} else {
|
|
element.children = element._children
|
|
}
|
|
} else {
|
|
element.children = null
|
|
}
|
|
})
|
|
},
|
|
getChildrenDataPople (item, idx, arr) {
|
|
partyMemberCenListByOrg({ orgId: item.id }).then((res) => {
|
|
arr.forEach((element, index) => {
|
|
if (element.children) {
|
|
element._children = element.children
|
|
element.children = null
|
|
this.currentId = null
|
|
} else {
|
|
element.children = res.data.map(item => {
|
|
return {
|
|
...item,
|
|
orgType: 7
|
|
}
|
|
})
|
|
this.currentId = item.id
|
|
}
|
|
})
|
|
})
|
|
},
|
|
gotoPersonnel (item) {
|
|
const grandPid = this.findParentParentId(this.nodeConfig, item.pid)
|
|
const name = item.name ? item.name : '四号楼二单元302'
|
|
this.$router.push(
|
|
`/organizational/microgrid/${item.id}/${grandPid}/${name}`
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import "~@/assets/css/workflow.scss";
|
|
@mixin spanLevel {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
word-break: break-all;
|
|
}
|
|
@mixin normalLevel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
@mixin lastLevel {
|
|
@include spanLevel;
|
|
@include normalLevel;
|
|
height: 137px;
|
|
width: 30px;
|
|
margin-top: -12px;
|
|
background-size: 100%;
|
|
cursor: pointer;
|
|
writing-mode: tb-rl;
|
|
text-orientation: upright;
|
|
}
|
|
|
|
.name_more {
|
|
span {
|
|
&:hover {
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.node-box-after {
|
|
.nodeBoxTop {
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
color: #fff;
|
|
display: inline-block;
|
|
width: 168px;
|
|
height: 164px;
|
|
padding-top: 10px;
|
|
text-align: center;
|
|
background: url(~@/assets/images/home/firstLevelRed.png) no-repeat;
|
|
background-size: 118px 98px;
|
|
background-position: center 46px;
|
|
div:nth-child(2) {
|
|
cursor: pointer;
|
|
}
|
|
.node-com {
|
|
// padding: 0 12px;
|
|
.nodeTitle {
|
|
font-family: MF LangQian (Noncommercial);
|
|
font-weight: 400;
|
|
font-size: 24px !important;
|
|
color: #ffffff;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.auto-judge {
|
|
.wgdzb {
|
|
@include spanLevel;
|
|
min-width: 120px;
|
|
height: 94px;
|
|
text-align: center;
|
|
padding-top: 9px;
|
|
background-image: url(~@/assets/images/home/zbbg-red.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center 0;
|
|
// background-size: 100%;
|
|
}
|
|
.wgdzbHover {
|
|
@include spanLevel;
|
|
min-width: 120px;
|
|
height: 94px;
|
|
text-align: center;
|
|
padding-top: 19px;
|
|
background-image: url(~@/assets/images/home/zbbg-red.png);
|
|
// background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center 0;
|
|
}
|
|
.lydxz {
|
|
@include spanLevel;
|
|
// @include normalLevel;
|
|
text-align: center;
|
|
min-width: 120px;
|
|
height: 81px;
|
|
margin-bottom: 12px;
|
|
padding-top: 42px;
|
|
background-image: url(~@/assets/images/home/lydxzTree-red.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center 28px;
|
|
}
|
|
.lydxzHover {
|
|
@include spanLevel;
|
|
// @include normalLevel;
|
|
text-align: center;
|
|
min-width: 120px;
|
|
height: 81px;
|
|
margin-bottom: 12px;
|
|
padding-top: 42px;
|
|
background-image: url(~@/assets/images/home/lydxzTree-red.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center 28px;
|
|
}
|
|
.dyzxh {
|
|
@include lastLevel;
|
|
background-image: url(~@/assets/images/home/dyzxh-red.png);
|
|
justify-content: flex-start;
|
|
background-repeat: no-repeat;
|
|
background-position: center 24px;
|
|
height: 180px;
|
|
.dyzxhDian {
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-top: 24px;
|
|
margin-bottom: 6px;
|
|
border-radius: 8px;
|
|
background-image: radial-gradient(
|
|
circle at center,
|
|
rgba(255, 197, 35, 1),
|
|
rgba(255, 197, 35, 0.1)
|
|
);
|
|
}
|
|
.dyzxhDian1 {
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-top: 24px;
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
.dyzxhHover {
|
|
@include lastLevel;
|
|
background-image: url(~@/assets/images/home/dyzxh-red.png);
|
|
justify-content: flex-start;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.dyzxhGreen {
|
|
@include lastLevel;
|
|
background-image: url(~@/assets/images/home/gridGreen.png);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.dyzxhRed {
|
|
@include lastLevel;
|
|
background-image: url(~@/assets/images/home/gridRed.png);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.dyzxhYellow {
|
|
@include lastLevel;
|
|
background-image: url(~@/assets/images/home/gridYellow.png);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.lxjt {
|
|
@include spanLevel;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
height: 137px;
|
|
width: 30px;
|
|
writing-mode: tb-rl;
|
|
margin-top: -12px;
|
|
background-image: url(~@/assets/images/home/dyzxhTree.png);
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
</style>
|
|
|