SongZhen
2 years ago
46 changed files with 3126 additions and 632 deletions
|
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,22 @@ |
|||
const state = { |
|||
chooseName: "金湖路社区", |
|||
}; |
|||
|
|||
const mutations = { |
|||
CHOOSE_NAME: (state, name) => { |
|||
state.chooseName = name; |
|||
}, |
|||
}; |
|||
|
|||
const actions = { |
|||
chooseName({ commit }, name) { |
|||
commit("CHOOSE_NAME", name); |
|||
}, |
|||
}; |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
mutations, |
|||
actions, |
|||
}; |
|||
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<div class="wrap"> |
|||
<!-- --> |
|||
<div class="content" v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'"> |
|||
<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: [], |
|||
navList: [ |
|||
{ |
|||
name: "党委组织架构", |
|||
key: "1", |
|||
ifActive: true, |
|||
}, |
|||
{ |
|||
name: "居委组织架构", |
|||
key: "2", |
|||
ifActive: false, |
|||
}, |
|||
{ |
|||
name: "网格架构", |
|||
key: "3", |
|||
ifActive: false, |
|||
}, |
|||
], |
|||
nowVal: 100, |
|||
|
|||
nodeConfig: {}, |
|||
}; |
|||
}, |
|||
watch: { |
|||
"$store.state.chooseArea.chooseName"(n, v) { |
|||
console.log(n); |
|||
}, |
|||
}, |
|||
computed: {}, |
|||
mounted() { |
|||
console.log(this.$store.state.chooseArea.chooseName); |
|||
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,41 @@ |
|||
<template> |
|||
<div> |
|||
<div class="breadcrumb"> |
|||
<el-breadcrumb separator="/"> |
|||
<el-breadcrumb-item v-for="(item,index) in list" :to="item.path" :key="index">{{ item.name }}</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Breadcrumb", |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
.breadcrumb { |
|||
background: url("@/assets/images/manyidu/breadcrumb_bg.png") no-repeat left top; |
|||
height: 50px; |
|||
color: #fff; |
|||
padding-left: 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
/deep/ .el-breadcrumb__inner { |
|||
color: #fff!important; |
|||
|
|||
&.is-link { |
|||
color: #A3B9DA!important; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,138 @@ |
|||
<template> |
|||
<div :class="{'hidden':hidden}" class="pagination-container"> |
|||
<el-pagination |
|||
:background="background" |
|||
:current-page.sync="currentPage" |
|||
:page-size.sync="pageSize" |
|||
:layout="layout" |
|||
:page-sizes="pageSizes" |
|||
:pager-count="pagerCount" |
|||
:total="total" |
|||
v-bind="$attrs" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'Pagination', |
|||
props: { |
|||
total: { |
|||
required: true, |
|||
type: Number |
|||
}, |
|||
page: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
limit: { |
|||
type: Number, |
|||
default: 20 |
|||
}, |
|||
pageSizes: { |
|||
type: Array, |
|||
default() { |
|||
return [10, 20, 30, 50] |
|||
} |
|||
}, |
|||
// 移动端页码按钮的数量端默认值5 |
|||
pagerCount: { |
|||
type: Number, |
|||
default: document.body.clientWidth < 992 ? 5 : 7 |
|||
}, |
|||
layout: { |
|||
type: String, |
|||
default: 'total, prev, pager, next, jumper, sizes' |
|||
}, |
|||
background: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
autoScroll: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
hidden: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
}; |
|||
}, |
|||
computed: { |
|||
currentPage: { |
|||
get() { |
|||
return this.page |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:page', val) |
|||
} |
|||
}, |
|||
pageSize: { |
|||
get() { |
|||
return this.limit |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:limit', val) |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
handleSizeChange(val) { |
|||
if (this.currentPage * val > this.total) { |
|||
this.currentPage = 1 |
|||
} |
|||
this.$emit('pagination', { page: this.currentPage, limit: val }) |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.$emit('pagination', { page: val, limit: this.pageSize }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.pagination-container { |
|||
padding: 32px 16px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
position: relative; |
|||
|
|||
/deep/ .el-pagination__total { |
|||
position: absolute; |
|||
left: 16px; |
|||
top: 32px; |
|||
color: #A3B9DA; |
|||
} |
|||
/deep/ .el-pagination__jump { |
|||
color: #A3B9DA; |
|||
} |
|||
/deep/ .el-pagination.is-background .btn-next, |
|||
/deep/ .el-pagination.is-background .btn-prev, |
|||
/deep/ .el-pagination.is-background .el-pager li { |
|||
background: rgba(0,23,66,0.3); |
|||
border: 1px solid #126AC5; |
|||
border-radius: 2px; |
|||
color: #A3B9DA; |
|||
} |
|||
/deep/ .el-input__inner { |
|||
background: rgba(0,23,66,0.3); |
|||
border: 1px solid #126AC5; |
|||
border-radius: 2px; |
|||
color: #A3B9DA; |
|||
} |
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
background: #1A95FF; |
|||
border-radius: 2px; |
|||
color: #FFFFFF!important; |
|||
} |
|||
} |
|||
.pagination-container.hidden { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<div class="tabs"> |
|||
<div class="tab" :class="value2 === item.value?'cur':''" v-for="(item,index) in list" @click="tabClick(index)" :key="index"> |
|||
{{item.label}} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Tabs", |
|||
props: { |
|||
list:{ |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
value:{ |
|||
type: [String,Number], |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
value2: this.value, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.value2 = this.value |
|||
}, |
|||
methods: { |
|||
tabClick(index) { |
|||
this.value2 = this.list[index].value |
|||
this.$emit('changeVal',this.value) |
|||
this.$emit('changeLabel',this.list[index].label) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.tabs { |
|||
display: flex; |
|||
.tab { |
|||
cursor: pointer; |
|||
padding: 10px 11px; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #96B1CE; |
|||
min-width: 120px; |
|||
background: url("@/assets/images/manyidu/tab.png") repeat-x top left; |
|||
margin-right: 4px; |
|||
text-align: center; |
|||
&.cur { |
|||
color: #FFFFFF; |
|||
background: url("@/assets/images/manyidu/tab_cur.png") repeat-x top left; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div class="title" :class="noBg?'no-bg':''"> |
|||
<span class="text"> |
|||
<span class="txt">{{ text }}</span> |
|||
<span class="text-shadow">{{ text }}</span> |
|||
</span> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Title", |
|||
props: { |
|||
text: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
noBg: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.title { |
|||
background: url(../../../../../assets/images/shuju/overview/title-bg.png) |
|||
no-repeat 0 0 fixed; |
|||
padding: 8px 16px 8px 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.text { |
|||
position: relative; |
|||
font-size: 22px; |
|||
font-family: HYShuYuanHeiJ; |
|||
font-weight: 400; |
|||
|
|||
.txt { |
|||
color: #1f79ff; |
|||
background: linear-gradient(0deg, #2dc1ff 0%, #ffffff 58.5205078125%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.text-shadow { |
|||
top: 4px; |
|||
left: 3px; |
|||
position: absolute; |
|||
color: #020f21; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
.no-bg { |
|||
background: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<div> |
|||
<div class="breadcrumb"> |
|||
<Breadcrumb :list="breadcrumbList" /> |
|||
</div> |
|||
<el-row> |
|||
<el-col :span="10"> |
|||
<div class="sub-title">事项详情</div> |
|||
<MatterDetails /> |
|||
|
|||
<div class="sub-title">家庭关系</div> |
|||
<Family /> |
|||
</el-col> |
|||
<el-col :span="13" :offset="1"> |
|||
<div class="sub-title">居民各项业务记录</div> |
|||
<BusinessRecords /> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="sub-title">享受服务次数统计</div> |
|||
<EnjoyService /> |
|||
</el-col> |
|||
<el-col :span="11" :offset="1"> |
|||
<div class="sub-title">积分记录</div> |
|||
<PointsRecord /> |
|||
</el-col> |
|||
</el-row> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "./components/Breadcrumb/index.vue"; |
|||
import MatterDetails from "./modules/MatterDetails"; |
|||
import Family from "./modules/Family"; |
|||
import BusinessRecords from "./modules/BusinessRecords"; |
|||
import EnjoyService from "./modules/EnjoyService"; |
|||
import PointsRecord from "./modules/PointsRecord"; |
|||
|
|||
export default { |
|||
name: "OrgPersonnel", |
|||
components: { |
|||
Breadcrumb, |
|||
MatterDetails, |
|||
Family, |
|||
BusinessRecords, |
|||
EnjoyService, |
|||
PointsRecord, |
|||
}, |
|||
data() { |
|||
return { |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/organizational/dangTree", |
|||
name: "党组织架构", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "居民画像", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
mounted() { |
|||
console.log(this.breadcrumbList, this.$route); |
|||
|
|||
this.$set(this.breadcrumbList[2], "name", this.$route.query.name); |
|||
this.breadcrumbList[2].name = this.$route.query.name; |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.sub-title { |
|||
background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center; |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
padding-left: 26px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.breadcrumb { |
|||
margin-bottom: 25px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,128 @@ |
|||
<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: " 满意度", |
|||
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> |
|||
@ -1,118 +1,107 @@ |
|||
<template> |
|||
<main class="g-main"> |
|||
<!-- tab展示内容 --> |
|||
<template> |
|||
<template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<iframe :src=" |
|||
$router.currentRoute.meta.iframeURL + |
|||
'?token=' + |
|||
token + |
|||
'&customerId=' + |
|||
customerId |
|||
" ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes" |
|||
:style="{ height: $store.state.fixed1920.height - 100 + 'px' }" /> |
|||
</template> |
|||
<keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<router-view @changeCustomerName="changeCustomerName" /> |
|||
</keep-alive> |
|||
</template> |
|||
</main> |
|||
<main class="g-main"> |
|||
<!-- tab展示内容 --> |
|||
<template> |
|||
<template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<iframe :src="$router.currentRoute.meta.iframeURL + '?token=' + token + '&customerId=' + customerId" ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes" :style="{ height: $store.state.fixed1920.height - 100 + 'px' }" /> |
|||
</template> |
|||
<keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<router-view ref="reloadPage" @changeCustomerName="changeCustomerName" /> |
|||
</keep-alive> |
|||
</template> |
|||
</main> |
|||
</template> |
|||
<script> |
|||
import { |
|||
isURL |
|||
} from "@/utils/validate"; |
|||
import Cookie from "js-cookie"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
iframeUrl: "", |
|||
token: "", |
|||
customerId: "", |
|||
}; |
|||
}, |
|||
watch: { |
|||
// "$router.currentRoute.name": function () { |
|||
// console.log($router.currentRoute); |
|||
// }, |
|||
}, |
|||
created() { |
|||
this.token = localStorage.getItem("token"); |
|||
this.customerId = localStorage.getItem("customerId"); |
|||
}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$emit("changeCustomerName", customerName); |
|||
}, |
|||
// tabs, 是否通过iframe展示 |
|||
tabIsIframe(url) { |
|||
// this.appendIframe(url) |
|||
// this.iframeUrl = |
|||
// url + |
|||
// "?token=" + |
|||
// localStorage.getItem("token") + |
|||
// "&customerId=" + |
|||
// localStorage.getItem("customerId"); |
|||
// return /^http[s]?:\/\/.*/.test(url); |
|||
return isURL(url); |
|||
}, |
|||
// tabs, 选中tab |
|||
tabSelectedHandle(tab) { |
|||
tab = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === tab.name)[0]; |
|||
if (tab) { |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { |
|||
...tab.params |
|||
}, |
|||
query: { |
|||
...tab.query |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 删除tab |
|||
tabRemoveHandle(tabName) { |
|||
if (tabName === "home") { |
|||
return false; |
|||
} |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name !== tabName); |
|||
if (this.$store.state.contentTabs.length <= 0) { |
|||
this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = "home"; |
|||
return false; |
|||
} |
|||
// 当前选中tab被删除 |
|||
if (tabName === this.$store.state.contentTabsActiveName) { |
|||
let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]; |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { |
|||
...tab.params |
|||
}, |
|||
query: { |
|||
...tab.query |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 关闭其它 |
|||
tabsCloseOtherHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => { |
|||
return (item.name === "home" || item.name === this.$store.state.contentTabsActiveName); |
|||
}); |
|||
}, |
|||
// tabs, 关闭全部 |
|||
tabsCloseAllHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === "home"); |
|||
this.$router.push({ |
|||
name: "home" |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
import { isURL } from "@/utils/validate"; |
|||
import Cookie from "js-cookie"; |
|||
export default { |
|||
props: ["name"], |
|||
data() { |
|||
return { |
|||
iframeUrl: "", |
|||
token: "", |
|||
customerId: "", |
|||
}; |
|||
}, |
|||
watch: { |
|||
// "$router.currentRoute.name": function () { |
|||
// console.log($router.currentRoute); |
|||
// }, |
|||
}, |
|||
created() { |
|||
// console.log("name", this.name); |
|||
this.token = localStorage.getItem("token"); |
|||
this.customerId = localStorage.getItem("customerId"); |
|||
}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$emit("changeCustomerName", customerName); |
|||
}, |
|||
// tabs, 是否通过iframe展示 |
|||
tabIsIframe(url) { |
|||
// this.appendIframe(url) |
|||
// this.iframeUrl = |
|||
// url + |
|||
// "?token=" + |
|||
// localStorage.getItem("token") + |
|||
// "&customerId=" + |
|||
// localStorage.getItem("customerId"); |
|||
// return /^http[s]?:\/\/.*/.test(url); |
|||
return isURL(url); |
|||
}, |
|||
// tabs, 选中tab |
|||
tabSelectedHandle(tab) { |
|||
tab = this.$store.state.contentTabs.filter((item) => item.name === tab.name)[0]; |
|||
if (tab) { |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { |
|||
...tab.params, |
|||
}, |
|||
query: { |
|||
...tab.query, |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 删除tab |
|||
tabRemoveHandle(tabName) { |
|||
if (tabName === "home") { |
|||
return false; |
|||
} |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter((item) => item.name !== tabName); |
|||
if (this.$store.state.contentTabs.length <= 0) { |
|||
this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = "home"; |
|||
return false; |
|||
} |
|||
// 当前选中tab被删除 |
|||
if (tabName === this.$store.state.contentTabsActiveName) { |
|||
let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]; |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { |
|||
...tab.params, |
|||
}, |
|||
query: { |
|||
...tab.query, |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 关闭其它 |
|||
tabsCloseOtherHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter((item) => { |
|||
return item.name === "home" || item.name === this.$store.state.contentTabsActiveName; |
|||
}); |
|||
}, |
|||
// tabs, 关闭全部 |
|||
tabsCloseAllHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter((item) => item.name === "home"); |
|||
this.$router.push({ |
|||
name: "home", |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style> |
|||
|
|||
Loading…
Reference in new issue