elink-star
/
epmet-work-pc-chengyang
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
城阳pc工作端前端代码
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.
4608 Commits
7 Branches
0 Tags
105 MiB
Tree: bfdbdafdd7
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'bfdbdafdd7'
${ noResults }
epmet-work-pc-chengyang/src/views/dataBoard/organizational/index.vue

560 lines
15 KiB
Raw Normal View History

还原代码
2 years ago
<template>
<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>
</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>
</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>
<el-row>
<el-col :span="4">
<div class="contentList"></div>
</el-col>
<el-col :span="20">
<div class="dingflow-design">
<nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
// import Tree from "./components/tree.vue";
export default {
name: "organizational",
// components: {
// Tree,
// },
data() {
return {
navList: [
{
name: "党委组织架构",
key: "1",
ifActive: true,
},
{
name: "居委组织架构",
key: "2",
ifActive: false,
},
{
name: "网格架构",
key: "3",
ifActive: false,
},
],
cardList: [
{
title: "社区党委",
key: "1",
name: "南昌路社区党委 （党委书记：解书记）",
children: [
{
title: "网格党支部",
name: "第一网格党支部(支部书记：王艺发)",
key: "1",
children: [
{
title: "楼院党小组",
name: "第一楼院党小组 （组长：韩文国）",
key: "1",
},
{
title: "楼院党小组",
name: "第二楼院党小组 （组长：褚丽兰）",
key: "2",
},
],
},
{
title: "网格党支部",
name: "第二网格党支部 （支部书记：尤芬紫）",
key: "2",
children: [
{
title: "楼院党小组",
name: "第一楼院党小组 （组长：韩文国）",
key: "1",
},
{
title: "楼院党小组",
name: "第二楼院党小组 （组长：褚丽兰）",
key: "2",
},
],
},
{
title: "网格党支部",
name: "第三网格党支部 （支部书记：凤桥强）",
key: "3",
children: [
{
title: "楼院党小组",
name: "第一楼院党小组 （组长：韩文国）",
key: "1",
},
{
title: "楼院党小组",
name: "第二楼院党小组 （组长：褚丽兰）",
key: "2",
},
{
title: "楼院党小组",
name: "第三楼院党小组 （组长：王丽丽）",
key: "3",
},
],
},
],
},
],
nowVal: 100,
nodeConfig: {
title: "社区党委",
name: "南昌路社区党委(党委书记：解书记)",
key: "1",
children: [
{
title: "网格党支部",
name: "第一网格党支部 （支部书记：王艺发）",
type: 2,
children: [
{
title: "楼院党小组",
type: 3,
name: "第一楼院党小组 （组长：韩文国）",
children: [
{
title: "党员中心户",
type: 4,
name: "周游",
},
{
title: "党员中心户",
type: 4,
name: "王阳明",
},
{
title: "党员中心户",
type: 4,
name: "刘艳萍",
},
{
title: "党员中心户",
type: 4,
name: "谢苗苗",
},
{
title: "党员中心户",
type: 4,
name: "杨军",
},
],
},
{
title: "楼院党小组",
type: 3,
name: "第二楼院党小组 （组长：褚丽兰）",
children: [
{
title: "党员中心户",
type: 4,
name: "周游",
},
{
title: "党员中心户",
type: 4,
name: "王阳明",
},
{
title: "党员中心户",
type: 4,
name: "刘艳萍",
},
{
title: "党员中心户",
type: 4,
name: "谢苗苗",
},
{
title: "党员中心户",
type: 4,
name: "杨军",
},
],
},
],
},
{
title: "网格党支部",
name: "第二网格党支部 （支部书记：尤芬紫）",
type: 3,
children: [
{
title: "楼院党小组",
type: 3,
name: "第一楼院党小组 （组长：韩文国）",
children: [
{
title: "党员中心户",
type: 4,
name: "周游",
},
{
title: "党员中心户",
type: 4,
name: "王阳明",
children: [
{
title: "联系家庭",
type: 5,
name: "王宇",
},
{
title: "联系家庭",
type: 5,
name: "刘冰冰",
},
{
title: "联系家庭",
type: 5,
name: "杨飞宇",
},
{
title: "联系家庭",
type: 5,
name: "齐天",
},
],
},
{
title: "党员中心户",
type: 4,
name: "刘艳萍",
},
{
title: "党员中心户",
type: 4,
name: "谢苗苗",
},
],
},
{
title: "楼院党小组",
type: 3,
name: "第二楼院党小组 （组长：褚丽兰）",
children: [
{
title: "党员中心户",
type: 4,
name: "周游",
},
{
title: "党员中心户",
type: 4,
name: "王阳明",
},
{
title: "党员中心户",
type: 4,
name: "刘艳萍",
},
{
title: "党员中心户",
type: 4,
name: "谢苗苗",
},
],
},
],
},
{
title: "网格党支部",
name: "第三网格党支部 （支部书记：凤桥强）",
type: 3,
children: [
{
title: "楼院党小组",
type: 3,
name: "第一楼院党小组 （组长：韩文国）",
children: [
{
title: "党员中心户",
type: 4,
name: "周游",
},
{
title: "党员中心户",
type: 4,
name: "王阳明",
},
{
title: "党员中心户",
type: 4,
name: "刘艳萍",
},
{
title: "党员中心户",
type: 4,
name: "谢苗苗",
},
{
title: "党员中心户",
type: 4,
name: "杨军",
},
],
},
{
title: "楼院党小组",
type: 3,
name: "第二楼院党小组 （组长：褚丽兰）",
children: [
{
title: "党员中心户",
type: 4,
name: "周游",
},
{
title: "党员中心户",
type: 4,
name: "王阳明",
},
{
title: "党员中心户",
type: 4,
name: "刘艳萍",
},
{
title: "党员中心户",
type: 4,
name: "谢苗苗",
},
{
title: "党员中心户",
type: 4,
name: "杨军",
},
],
},
{
title: "楼院党小组",
type: 3,
name: "第三楼院党小组 （组长：王丽丽）",
children: [
{
title: "党员中心户",
type: 4,
name: "周游",
},
{
title: "党员中心户",
type: 4,
name: "王阳明",
},
{
title: "党员中心户",
type: 4,
name: "刘艳萍",
},
{
title: "党员中心户",
type: 4,
name: "谢苗苗",
},
],
},
],
},
],
},
};
},
computed: {},
methods: {
chooseNav(item) {
this.navList.forEach((d) => {
if (item.key === d.key) {
d.ifActive = true;
} else {
d.ifActive = false;
}
});
},
zoomSize(e) {
e.preventDefault();
if (e.deltaY > 0) {
if (this.nowVal == 50) return;
this.nowVal -= 0.5;
} else if (e.deltaY < 0) {
if (this.nowVal == 300) return;
this.nowVal += 0.5;
}
},
},
};
</script>
<style lang="scss">
@import "~@/assets/css/workflow.scss";
@mixin navListCommon {
width: 120px;
height: 36px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
margin-right: 4px;
text-align: center;
line-height: 36px;
cursor: pointer;
}
@mixin flowLevwlCommon {
position: absolute;
width: 100%;
margin-bottom: 45px;
background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
color: #fff;
font-size: 16px;
}
@mixin flowLevelAfter {
position: absolute;
content: "";
display: block;
background-size: 100%;
}
.organWrap {
margin-top: 18px;
.top-nav {
.top-nav-list {
display: flex;
margin-left: 28px;
.top-nav-item {
@include navListCommon;
background-image: url("~@/assets/images/home/noChooseMain.png");
color: #96b1ce;
}
.top-nav-itemAC {
@include navListCommon;
background-image: url("~@/assets/images/home/chooseMain.png");
color: #fff;
}
}
}
.content {
margin-top: 65px;
padding: 0 17px;
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: 50% 50%;
.contentList {
position: relative;
width: 100%;
height: 109px;
// margin-bottom: 45px;
// background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
}
.flowLevel {
@include flowLevwlCommon;
top: -10px;
height: 164px;
line-height: 164px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 51px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dwbg.png);
}
}
}
.flowLevel-2 {
@include flowLevwlCommon;
top: 184px;
height: 119px;
line-height: 119px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 26px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dzb.png);
}
}
}
.flowLevel-3 {
@include flowLevwlCommon;
top: 328px;
height: 85px;
line-height: 85px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 10px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lydxz.png);
}
}
}
.flowLevel-4 {
@include flowLevwlCommon;
top: 429px;
height: 135px;
line-height: 135px;
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 {
@include flowLevwlCommon;
top: 598px;
height: 135px;
line-height: 135px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
}
}
</style>