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.
406 lines
12 KiB
406 lines
12 KiB
<template>
|
|
<div>
|
|
<div class="node-wrap" v-if="nodeConfig.laneLevel === 1">
|
|
<div class="node-wrap-box">
|
|
<div class="node-box-after">
|
|
<div class="nodeBoxTop">
|
|
<nameSplit
|
|
:item="nodeConfig"
|
|
areaName="organizationName"
|
|
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="getOnerSixLevelFlag(item)">
|
|
<div
|
|
:class="[
|
|
item.children && item.children.length > 0
|
|
? 'wgdzbHover'
|
|
: 'wgdzb',
|
|
]"
|
|
>
|
|
<nameSplit
|
|
:item="item"
|
|
areaName="organizationName"
|
|
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.level === 'building_chief'">
|
|
<div
|
|
:class="[
|
|
item.children && item.children.length > 0
|
|
? 'lydxzHover'
|
|
: 'lydxz',
|
|
]"
|
|
>
|
|
<nameSplit
|
|
:item="item"
|
|
areaName="organizationName"
|
|
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.level === 'unit_chief'">
|
|
<!-- @click="gotoPersonnel(item)" -->
|
|
<div
|
|
:class="[
|
|
item.categoryWarn === 'red'
|
|
? 'dyzxhRed'
|
|
: item.categoryWarn === 'yellow'
|
|
? 'dyzxhYellow'
|
|
: item.categoryWarn === 'green'
|
|
? 'dyzxhGreen'
|
|
: '',
|
|
item.children && item.children.length > 0
|
|
? 'dyzxhHover'
|
|
: 'dyzxh',
|
|
]"
|
|
:title="item.organizationName"
|
|
>
|
|
<!-- {{ spliceNameFun(item.organizationName, 3) }} -->
|
|
<div class="dyzxhDian" v-if="index===0"></div>
|
|
<div class="dyzxhDian1" v-else></div>
|
|
{{ item.organizationName }}
|
|
</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>
|
|
</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>
|
|
export default {
|
|
props: ["nodeConfig"],
|
|
data() {
|
|
return {
|
|
homeTypeArr: [],
|
|
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;
|
|
}
|
|
});
|
|
},
|
|
gotoPersonnel(item) {
|
|
const grandPid = this.findParentParentId(this.nodeConfig, item.pid);
|
|
const name = item.organizationName
|
|
? item.organizationName
|
|
: "四号楼二单元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;
|
|
padding-top: 28px;
|
|
background-image: url(~@/assets/images/home/lydxzTree-red.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.lydxzHover {
|
|
@include spanLevel;
|
|
// @include normalLevel;
|
|
text-align: center;
|
|
min-width: 120px;
|
|
height: 81px;
|
|
padding-top: 28px;
|
|
background-image: url(~@/assets/images/home/lydxzTree-red.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.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>
|
|
|