21 changed files with 46727 additions and 3 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 538 B |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 536 B |
@ -0,0 +1,268 @@ |
|||
<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.png')" alt="" /> |
|||
<img style="width: 16px; height: 16px;margin-left: 50px;" v-else :src="require('@/assets/images/home/zk.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.png')" alt="" /> |
|||
<img style="width: 16px; height: 16px;margin-left: 50px;" v-else :src="require('@/assets/images/home/zk.png')" alt="" /> |
|||
</div> |
|||
</div> |
|||
<div v-if="item.level === 'unit_chief'"> |
|||
<div @click="gotoPersonnel(item)" :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) }} --> |
|||
{{ 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.png')" alt="" /> |
|||
<img style="width: 16px; height: 16px;margin-left: 50px;" v-else :src="require('@/assets/images/home/zk.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-image: url(~@/assets/images/home/firstLevel.png); |
|||
background-size: 100%; |
|||
div:nth-child(2) { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
.auto-judge { |
|||
.wgdzb { |
|||
@include spanLevel; |
|||
min-width: 120px; |
|||
height: 126px; |
|||
text-align: center; |
|||
padding-top: 9px; |
|||
background-image: url(~@/assets/images/home/zbbg.png); |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
// background-size: 100%; |
|||
} |
|||
.wgdzbHover { |
|||
@include spanLevel; |
|||
min-width: 120px; |
|||
height: 126px; |
|||
text-align: center; |
|||
padding-top: 9px; |
|||
background-image: url(~@/assets/images/home/zbbgClick.png); |
|||
// background-size: 100%; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
} |
|||
.lydxz { |
|||
@include spanLevel; |
|||
// @include normalLevel; |
|||
text-align: center; |
|||
min-width: 120px; |
|||
height: 126px; |
|||
padding-top: 25px; |
|||
background-image: url(~@/assets/images/home/lydxzTree.png); |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
} |
|||
.lydxzHover { |
|||
@include spanLevel; |
|||
// @include normalLevel; |
|||
text-align: center; |
|||
min-width: 120px; |
|||
height: 126px; |
|||
padding-top: 25px; |
|||
background-image: url(~@/assets/images/home/lydxzClick.png); |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
} |
|||
.dyzxh { |
|||
@include lastLevel; |
|||
background-image: url(~@/assets/images/home/dyzxhTree.png); |
|||
background-repeat: no-repeat; |
|||
} |
|||
.dyzxhHover { |
|||
@include lastLevel; |
|||
background-image: url(~@/assets/images/home/dyzxhClick.png); |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.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> |
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<div class="node-com"> |
|||
<div v-if="!flag" class="nodeTitle" :title="getAllName(item[areaName])">{{ spliceNameFun(item[areaName], 7) }}</div> |
|||
<div class="name_more peoName" v-if="item[peopleName] && !item[peopleName].includes(',')" @click="gotoPersonnel(item.resiId)" :title="getAllName(item[peopleName])">{{ spliceNameFun(item[peopleName], 12) }}</div> |
|||
<div class="name_more" v-if="item[peopleName] && item[peopleName].includes(',')"> |
|||
<span v-for="(i, k) in getItemNameArr(item[peopleName])" :key="i" @click="gotoPersonnel(item.resiId.split(',')[k])" :title="getAllName(i)">{{ spliceNameFun(i, 12) }}{{ k === getItemNameArr(item[peopleName]).length - 1 ? "" : "," }}</span> |
|||
<!-- 多个人员展示 --> |
|||
<!-- <popTips :item="item" :pageName="pageName" /> --> |
|||
</div> |
|||
<div v-if="item.partyOrgLevel < 9" class="peoPosition peoName">({{ getPeopositionMap(item.partyOrgLevel) }})</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "NameSplit", |
|||
props: { |
|||
item: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
areaName: { |
|||
type: String, |
|||
default: "partyOrgName", |
|||
}, |
|||
peopleName: { |
|||
type: String, |
|||
default: "principalName", |
|||
}, |
|||
flag: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
pageName: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
methods: { |
|||
getAllName(item) { |
|||
return item; |
|||
}, |
|||
|
|||
getItemNameArr(str) { |
|||
return str.split(",").slice(0, 1); |
|||
}, |
|||
|
|||
spliceNameFun(row, num) { |
|||
return row.substring(0, num); |
|||
}, |
|||
gotoPersonnel(id) { |
|||
if (id) { |
|||
this.$router.push({ path: `/organizational/orgPersonnel/${this.pageName}`, query: { user_id: id } }); |
|||
} else { |
|||
this.$message.error("该人员暂无居民信息！"); |
|||
} |
|||
}, |
|||
getPeopositionMap(type) { |
|||
const positionMap = new Map([ |
|||
[1, "省委"], |
|||
[2, "市委"], |
|||
[3, "区委书记"], |
|||
[4, "党工委书记"], |
|||
[5, "党委书记"], |
|||
[6, "党总支书记"], |
|||
[7, "支部书记"], |
|||
[8, "组长"], |
|||
]); |
|||
return positionMap.get(type); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scope lang="scss"> |
|||
.node-com { |
|||
// padding: 0 12px; |
|||
.nodeTitle { |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
.peoName { |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
opacity: 0.8; |
|||
} |
|||
.name_more { |
|||
cursor: pointer; |
|||
span { |
|||
&:hover { |
|||
font-weight: bold; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue