移风店大屏前端
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

<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>