|
After Width: | Height: | Size: 845 B |
|
After Width: | Height: | Size: 704 B |
|
After Width: | Height: | Size: 570 B |
|
After Width: | Height: | Size: 887 B |
|
After Width: | Height: | Size: 755 B |
|
After Width: | Height: | Size: 867 B |
|
After Width: | Height: | Size: 750 B |
|
After Width: | Height: | Size: 899 B |
|
After Width: | Height: | Size: 876 B |
|
After Width: | Height: | Size: 811 B |
|
After Width: | Height: | Size: 964 B |
|
After Width: | Height: | Size: 959 B |
|
After Width: | Height: | Size: 819 B |
|
After Width: | Height: | Size: 818 B |
|
After Width: | Height: | Size: 883 B |
|
After Width: | Height: | Size: 742 B |
|
After Width: | Height: | Size: 961 B |
|
After Width: | Height: | Size: 752 B |
|
After Width: | Height: | Size: 917 B |
|
After Width: | Height: | Size: 852 B |
@ -0,0 +1,527 @@ |
|||
<template> |
|||
<div class="wrap"> |
|||
<!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" --> |
|||
<div class="content"> |
|||
<div v-for="(item, index) in levelArr" :key="item" :class="[`flowLevel-${index + 1}`]"> |
|||
<div>{{ getTitleNameMapFun(item) }}</div> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="4"> |
|||
<div class="contentList"></div> |
|||
</el-col> |
|||
<el-col :span="20"> |
|||
<div class="dingflow-design" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> |
|||
<nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "DangTree", |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
levelArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|||
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: { |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 1, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 1, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 2, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 2, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 3, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 3, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 4, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 4, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 5, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 5, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 6, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 6, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 7, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 7, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 8, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 8, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 9, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 9, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 10, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 10, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
|
|||
// 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: {}, |
|||
mounted() { |
|||
// this.getTreeData(); |
|||
}, |
|||
methods: { |
|||
//获取背景层级 |
|||
getDataPLevel(item) { |
|||
let arr = [...this.levelArr]; |
|||
arr.push(item.partyOrgLevel); |
|||
this.levelArr = [...arr]; |
|||
if (item.children) { |
|||
this.getDataPLevel(item.children[0]); |
|||
} |
|||
}, |
|||
//获取树状结构 |
|||
getTreeData() { |
|||
this.loading = true; |
|||
this.$http |
|||
.get("/actual/base/organizational/structure/partyCommitteeOrg") |
|||
.then((res) => { |
|||
const { |
|||
data: { code, data }, |
|||
} = res; |
|||
if (code === 0) { |
|||
this.nodeConfig = data[0]; |
|||
this.getDataPLevel(data[0]); |
|||
this.loading = false; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
|
|||
getTitleNameMapFun(i) { |
|||
let titleNameMap = new Map([ |
|||
[1, "省委"], |
|||
[2, "市委"], |
|||
[3, "区委"], |
|||
[4, "党工委"], |
|||
[5, "党委"], |
|||
[6, "党总支"], |
|||
[7, "党支部"], |
|||
[8, "楼院党小组"], |
|||
[9, "党员中心户"], |
|||
[10, "联系家庭"], |
|||
]); |
|||
return titleNameMap.get(i); |
|||
}, |
|||
|
|||
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"; |
|||
</style> |
|||
@ -0,0 +1,527 @@ |
|||
<template> |
|||
<div class="wrap"> |
|||
<!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" --> |
|||
<div class="content"> |
|||
<div v-for="(item, index) in levelArr" :key="item" :class="[`flowLevel-${index + 1}`]"> |
|||
<div>{{ getTitleNameMapFun(item) }}</div> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="4"> |
|||
<div class="contentList"></div> |
|||
</el-col> |
|||
<el-col :span="20"> |
|||
<div class="dingflow-design" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> |
|||
<nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "GridTree", |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
levelArr: [1, 2, 3], |
|||
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: { |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 1, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 1, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 2, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 2, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 3, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 3, |
|||
// children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 4, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 4, |
|||
// children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 5, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 5, |
|||
// children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 6, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 6, |
|||
// children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 7, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 7, |
|||
// // children: [ |
|||
// // { |
|||
// // partyOrgName: "市北区委", |
|||
// // partyOrgLevel: 8, |
|||
// // partyOrgPid: "0", |
|||
// // principalName: "栾秀杰", |
|||
// // laneLevel: 8, |
|||
// // children: [ |
|||
// // { |
|||
// // partyOrgName: "市北区委", |
|||
// // partyOrgLevel: 9, |
|||
// // partyOrgPid: "0", |
|||
// // principalName: "栾秀杰", |
|||
// // laneLevel: 9, |
|||
// // children: [ |
|||
// // { |
|||
// // partyOrgName: "市北区委", |
|||
// // partyOrgLevel: 10, |
|||
// // partyOrgPid: "0", |
|||
// // principalName: "栾秀杰", |
|||
// // laneLevel: 10, |
|||
// // }, |
|||
// // ], |
|||
// // }, |
|||
// // ], |
|||
// // }, |
|||
// // ], |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// ], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
|
|||
// 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: {}, |
|||
mounted() { |
|||
// this.getTreeData(); |
|||
}, |
|||
methods: { |
|||
//获取背景层级 |
|||
getDataPLevel(item) { |
|||
let arr = [...this.levelArr]; |
|||
arr.push(item.partyOrgLevel); |
|||
this.levelArr = [...arr]; |
|||
if (item.children) { |
|||
this.getDataPLevel(item.children[0]); |
|||
} |
|||
}, |
|||
//获取树状结构 |
|||
getTreeData() { |
|||
this.loading = true; |
|||
this.$http |
|||
.get("/actual/base/organizational/structure/partyCommitteeOrg") |
|||
.then((res) => { |
|||
const { |
|||
data: { code, data }, |
|||
} = res; |
|||
if (code === 0) { |
|||
this.nodeConfig = data[0]; |
|||
this.getDataPLevel(data[0]); |
|||
this.loading = false; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
|
|||
getTitleNameMapFun(i) { |
|||
let titleNameMap = new Map([ |
|||
[1, "省委"], |
|||
[2, "市委"], |
|||
[3, "区委"], |
|||
[4, "党工委"], |
|||
[5, "党委"], |
|||
[6, "党总支"], |
|||
[7, "党支部"], |
|||
[8, "楼院党小组"], |
|||
[9, "党员中心户"], |
|||
[10, "联系家庭"], |
|||
]); |
|||
return titleNameMap.get(i); |
|||
}, |
|||
|
|||
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"; |
|||
</style> |
|||
@ -0,0 +1,527 @@ |
|||
<template> |
|||
<div class="wrap"> |
|||
<!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" --> |
|||
<div class="content"> |
|||
<div v-for="(item, index) in levelArr" :key="item" :class="[`flowLevel-${index + 1}`]"> |
|||
<div>{{ getTitleNameMapFun(item) }}</div> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="4"> |
|||
<div class="contentList"></div> |
|||
</el-col> |
|||
<el-col :span="20"> |
|||
<div class="dingflow-design" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> |
|||
<nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "JwTree", |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
levelArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|||
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: { |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 1, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 1, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 2, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 2, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 3, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 3, |
|||
children: [ |
|||
{ |
|||
partyOrgName: "市北区委", |
|||
partyOrgLevel: 4, |
|||
partyOrgPid: "0", |
|||
principalName: "栾秀杰", |
|||
laneLevel: 4, |
|||
children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 5, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 5, |
|||
// children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 6, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 6, |
|||
// children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 7, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 7, |
|||
// children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 8, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 8, |
|||
// children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 9, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 9, |
|||
// children: [ |
|||
// { |
|||
// partyOrgName: "市北区委", |
|||
// partyOrgLevel: 10, |
|||
// partyOrgPid: "0", |
|||
// principalName: "栾秀杰", |
|||
// laneLevel: 10, |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// ], |
|||
// }, |
|||
// ], |
|||
// }, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
|
|||
// 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: {}, |
|||
mounted() { |
|||
// this.getTreeData(); |
|||
}, |
|||
methods: { |
|||
//获取背景层级 |
|||
getDataPLevel(item) { |
|||
let arr = [...this.levelArr]; |
|||
arr.push(item.partyOrgLevel); |
|||
this.levelArr = [...arr]; |
|||
if (item.children) { |
|||
this.getDataPLevel(item.children[0]); |
|||
} |
|||
}, |
|||
//获取树状结构 |
|||
getTreeData() { |
|||
this.loading = true; |
|||
this.$http |
|||
.get("/actual/base/organizational/structure/partyCommitteeOrg") |
|||
.then((res) => { |
|||
const { |
|||
data: { code, data }, |
|||
} = res; |
|||
if (code === 0) { |
|||
this.nodeConfig = data[0]; |
|||
this.getDataPLevel(data[0]); |
|||
this.loading = false; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
|
|||
getTitleNameMapFun(i) { |
|||
let titleNameMap = new Map([ |
|||
[1, "省委"], |
|||
[2, "市委"], |
|||
[3, "区委"], |
|||
[4, "党工委"], |
|||
[5, "党委"], |
|||
[6, "党总支"], |
|||
[7, "党支部"], |
|||
[8, "楼院党小组"], |
|||
[9, "党员中心户"], |
|||
[10, "联系家庭"], |
|||
]); |
|||
return titleNameMap.get(i); |
|||
}, |
|||
|
|||
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"; |
|||
</style> |
|||
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<div class="business-records"> |
|||
<Tabs v-model="type" :list="typeList" @changeVal="typeChange"/> |
|||
<div class="table"> |
|||
<el-table :data="list"> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80"/> |
|||
<el-table-column |
|||
label="评价周期" |
|||
prop="key" |
|||
width=""/> |
|||
<el-table-column |
|||
label="姓名" |
|||
prop="key" |
|||
width=""/> |
|||
<el-table-column |
|||
label="电话" |
|||
prop="key" |
|||
width=""/> |
|||
<el-table-column |
|||
label="不满意类型" |
|||
prop="key" |
|||
width=""/> |
|||
<el-table-column |
|||
label="不满意原因" |
|||
prop="key" |
|||
width=""/> |
|||
<el-table-column label="操作" width="90" align="center"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<Pagination |
|||
v-show="total>0" |
|||
:total="total" |
|||
:page.sync="queryParams.pageNum" |
|||
:limit.sync="queryParams.pageSize" |
|||
@pagination="getList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue"; |
|||
|
|||
export default { |
|||
name: "BusinessRecords", |
|||
components: {Tabs}, |
|||
data() { |
|||
return { |
|||
total: 10, |
|||
queryParams: { |
|||
pageNum: 0, |
|||
pageSize: 10, |
|||
}, |
|||
type: 1, |
|||
typeList: [{ |
|||
label: ' 12345投诉', |
|||
value: 1 |
|||
}, { |
|||
label: '省满意度调查', |
|||
value: 2 |
|||
}, { |
|||
label: '社区满意度自查', |
|||
value: 3 |
|||
}, { |
|||
label: '事件', |
|||
value: 4 |
|||
}, { |
|||
label: '需求', |
|||
value: 5 |
|||
}, { |
|||
label: '服务', |
|||
value: 6 |
|||
}, { |
|||
label: '回访记录', |
|||
value: 7 |
|||
}], |
|||
list: [{},{},{},{},{}] |
|||
} |
|||
}, |
|||
methods: { |
|||
typeChange() { |
|||
|
|||
}, |
|||
getList() { |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.business-records { |
|||
margin-bottom: 25px; |
|||
} |
|||
.table { |
|||
/deep/ .el-table td, /deep/ .el-table th, /deep/ .el-table tr { |
|||
padding: 14px !important; |
|||
border:none!important; |
|||
min-height: 52px; |
|||
|
|||
} |
|||
/deep/ .el-table td, /deep/ .el-table th { |
|||
background: none!important; |
|||
} |
|||
/deep/ .el-table td { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
text-shadow: 1px 2px 4px rgba(10,32,60,0.51); |
|||
} |
|||
|
|||
/deep/ .el-table tr { |
|||
background: none; |
|||
&:hover { |
|||
background-color: rgba(26, 149, 255, 0.3) !important; |
|||
} |
|||
|
|||
} |
|||
/deep/ .el-table__body-wrapper tr:nth-of-type(odd) { |
|||
background: rgba(14, 56, 115, 0.4); |
|||
} |
|||
|
|||
/deep/ .el-table { |
|||
background: none !important; |
|||
|
|||
&:before { |
|||
background: none; |
|||
} |
|||
} |
|||
/deep/ .el-table__header-wrapper tr { |
|||
color: #A3B9DA !important; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
opacity: 0.76; |
|||
background: none; |
|||
&:hover { |
|||
background: none!important; |
|||
} |
|||
} |
|||
/deep/ .el-table__header-wrapper { |
|||
background: none!important; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,188 @@ |
|||
<template> |
|||
<div className="event-statistics"> |
|||
<div id="enjoyServiceChart" style="height: 360px;"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
|
|||
export default { |
|||
name: "EnjoyService", |
|||
data() { |
|||
return {} |
|||
}, |
|||
mounted() { |
|||
this.initCharts() |
|||
}, |
|||
methods: { |
|||
initCharts() { |
|||
let div = document.getElementById('enjoyServiceChart'); |
|||
this.myChart = echarts.init(div); |
|||
|
|||
let xData = ['岗位找人', '技能找人', '温暖找人', '服务找人']; |
|||
let tq = [300, 90, 48, 39]; |
|||
const max = Math.max(...tq) |
|||
|
|||
let barArray = new Array(xData.length).fill((parseInt(max / 100) + 1) * 100) |
|||
var option = { |
|||
title: { |
|||
show: false, |
|||
text: '', |
|||
x: 'center', |
|||
top: '15px', |
|||
textStyle: { |
|||
color: '#333333', |
|||
fontWeight: 500, |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
backgroundColor: 'rgba(13, 64, 71, 0.50)', |
|||
borderColor: 'rgba(143, 225, 252, 0.60)', |
|||
padding: 8, |
|||
textStyle: { |
|||
color: '#fff', |
|||
}, |
|||
formatter: function (params) { |
|||
console.log(params) |
|||
var res = '' |
|||
for (var i = 0; i < params.length; i++) { |
|||
if (params[i].seriesName != "") { |
|||
res += '<p>' + params[0].name + ':' + params[i].data + '</p>' |
|||
} |
|||
} |
|||
return res; |
|||
}, |
|||
}, |
|||
grid: { |
|||
top: '0', |
|||
left: '1%', |
|||
right: '2%', |
|||
bottom: '0', |
|||
containLabel: true |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#323c41' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
align: 'right', |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#A3B9DA' |
|||
} |
|||
}, |
|||
boundaryGap: true, |
|||
data: xData, |
|||
}, { |
|||
type: 'category', |
|||
data: xData, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLine: {show: false}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
boundaryGap: true, |
|||
|
|||
} |
|||
], |
|||
|
|||
xAxis: [ |
|||
{ |
|||
type: 'value', |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: 'rgba(4,187,255,0.18)', |
|||
type: 'dashed' |
|||
}, |
|||
}, |
|||
nameTextStyle: { |
|||
color: '#A3B9DA', |
|||
textStyle: { |
|||
fontSize: 12 |
|||
}, |
|||
align: 'center' |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#A3B9DA', |
|||
textStyle: { |
|||
fontSize: 12 |
|||
} |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
barWidth: 16, |
|||
itemStyle: { |
|||
// lenged文本 |
|||
opacity: 1, // 这个是 透明度 |
|||
color: new echarts.graphic.LinearGradient( |
|||
1, |
|||
0, |
|||
0, |
|||
0, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: '#6EDDFE' // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: '#0B1F57' // 100% 处的颜色 |
|||
} |
|||
], |
|||
false |
|||
) |
|||
}, |
|||
data: tq, //data.values |
|||
}, |
|||
{ |
|||
name: '', |
|||
type: 'bar', |
|||
|
|||
barWidth: 66, |
|||
barGap: '-60%', |
|||
data: barArray, |
|||
itemStyle: { |
|||
normal: { |
|||
color: 'rgba(89,130,194,0.12)' |
|||
} |
|||
}, |
|||
zlevel: -1, |
|||
yAxisIndex: 1, |
|||
} |
|||
], |
|||
}; |
|||
this.myChart.setOption(option); |
|||
window.addEventListener("resize", () => this.myChart.resize()); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.event-statistics { |
|||
padding: 16px 16px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<div class="family"> |
|||
<div class="tag"> |
|||
<div>张三(户主)</div> |
|||
<div>入户状态:入户一致</div> |
|||
<div>居民分类:老年人</div> |
|||
</div> |
|||
<div class="tag"> |
|||
<div>张三(户主)</div> |
|||
<div>入户状态:入户一致</div> |
|||
<div>居民分类:老年人</div> |
|||
</div> |
|||
<div class="tag"> |
|||
<div>张三(户主)</div> |
|||
<div>入户状态:入户一致</div> |
|||
</div> |
|||
<div class="tag"> |
|||
<div>张三(户主)</div> |
|||
<div>入户状态:入户一致</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Family" |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.family { |
|||
width: 464px; |
|||
height: 340px; |
|||
background: url('@/assets/images/manyidu/gx_bg.png') no-repeat center; |
|||
position: relative; |
|||
margin: 40px auto; |
|||
} |
|||
.tag { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 22px; |
|||
padding: 18px 24px; |
|||
box-sizing: border-box; |
|||
position: absolute; |
|||
&:nth-of-type(1), |
|||
&:nth-of-type(2) { |
|||
background: url("@/assets/images/manyidu/gx_big.png") no-repeat center; |
|||
width: 180px; |
|||
height: 100px; |
|||
} |
|||
&:nth-of-type(3), |
|||
&:nth-of-type(4) { |
|||
background: url("@/assets/images/manyidu/gx_small.png") no-repeat center; |
|||
width: 180px; |
|||
height: 70px; |
|||
padding: 15px 24px; |
|||
} |
|||
&:nth-of-type(1) { |
|||
left: -98px; |
|||
top: 34px; |
|||
} |
|||
&:nth-of-type(2) { |
|||
right: -68px; |
|||
top: 34px; |
|||
} |
|||
&:nth-of-type(3) { |
|||
left: -91px; |
|||
bottom: 41px; |
|||
} |
|||
&:nth-of-type(4) { |
|||
right: -44px; |
|||
bottom: 41px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,93 @@ |
|||
<template> |
|||
<div class="matter-details"> |
|||
<div class="user-img"> |
|||
<img src="@/assets/images/manyidu/dn_bg1.png" alt=""> |
|||
</div> |
|||
<div class="tags"> |
|||
<div class="tag red">满意度风险人员</div> |
|||
<div class="tag small">与子女同住</div> |
|||
<div class="tag">第三网格</div> |
|||
<div class="tag small">入户一致</div> |
|||
<div class="tag">13343999999</div> |
|||
<div class="tag">四季景园1号楼1单元101</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "MatterDetails" |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.matter-details { |
|||
width: 607px; |
|||
height: 372px; |
|||
background: url("@/assets/images/manyidu/dn_bg2.png") no-repeat center bottom; |
|||
position: relative; |
|||
margin: 12px auto 60px; |
|||
} |
|||
.user-img { |
|||
position: absolute; |
|||
left: calc(50% - 87px); |
|||
top: calc(50% - 37px); |
|||
} |
|||
.tag { |
|||
position: absolute; |
|||
background: url("@/assets/images/manyidu/dn_big.png") center no-repeat; |
|||
width: 108px; |
|||
height: 107px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 16px; |
|||
box-sizing: border-box; |
|||
padding: 24px; |
|||
text-align: center; |
|||
word-break: break-all; |
|||
&.small { |
|||
width: 89px; |
|||
height: 89px; |
|||
background: url("@/assets/images/manyidu/dn_small.png") center no-repeat; |
|||
padding: 16px; |
|||
} |
|||
&.red { |
|||
background: url("@/assets/images/manyidu/dn_red.png") center no-repeat; |
|||
color: #FE0000; |
|||
} |
|||
&:nth-of-type(1) { |
|||
left: 0; |
|||
bottom: 15px; |
|||
} |
|||
|
|||
&:nth-of-type(2) { |
|||
left: 42px; |
|||
bottom: 185px; |
|||
} |
|||
|
|||
&:nth-of-type(3) { |
|||
left: 194px; |
|||
bottom: 245px; |
|||
} |
|||
|
|||
&:nth-of-type(4) { |
|||
left: 384px; |
|||
bottom: 240px; |
|||
} |
|||
|
|||
&:nth-of-type(5) { |
|||
left: 499px; |
|||
bottom: 157px; |
|||
} |
|||
|
|||
&:nth-of-type(6) { |
|||
left: 453px; |
|||
bottom: 10px; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,51 @@ |
|||
<template> |
|||
<div> |
|||
<div class="enjoy-service"> |
|||
<div class="enjoy-service-item" v-for="(item,index) in 5"> |
|||
<div class="num">+10</div> |
|||
<div class="info"> |
|||
<div class="title">便民服务-配餐服务</div> |
|||
<div class="time">2023-07-15 15:30:30</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "PointsRecord" |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
.enjoy-service { |
|||
padding-left: 26px; |
|||
} |
|||
.enjoy-service-item { |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
padding: 14px 16px 14px; |
|||
margin-bottom: 8px; |
|||
background: #07266B; |
|||
.num { |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 22px; |
|||
} |
|||
.info { |
|||
font-size: 14px; |
|||
margin-left: 40px; |
|||
.title { |
|||
font-weight: 500; |
|||
margin-bottom: 10px; |
|||
} |
|||
.time { |
|||
font-weight: 400; |
|||
color: #A3B9DA; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||