Browse Source

合并代码并提交党组织架构接口对接代码

feature
SongZhen 2 years ago
parent
commit
ff11ed0e80
  1. 2
      .env.development
  2. 244
      src/assets/css/workflow.scss
  3. BIN
      src/assets/images/home/bzfry.png
  4. BIN
      src/assets/images/home/cjry.png
  5. BIN
      src/assets/images/home/dbry.png
  6. BIN
      src/assets/images/home/dy.png
  7. BIN
      src/assets/images/home/gyg.png
  8. BIN
      src/assets/images/home/ldry.png
  9. BIN
      src/assets/images/home/lnr.png
  10. BIN
      src/assets/images/home/lzdyz.png
  11. BIN
      src/assets/images/home/mxbry.png
  12. BIN
      src/assets/images/home/snry.png
  13. BIN
      src/assets/images/home/syry.png
  14. BIN
      src/assets/images/home/szry.png
  15. BIN
      src/assets/images/home/tdry.png
  16. BIN
      src/assets/images/home/tsry.png
  17. BIN
      src/assets/images/home/tyjr.png
  18. BIN
      src/assets/images/home/tzry.png
  19. BIN
      src/assets/images/home/xfry.png
  20. BIN
      src/assets/images/home/ylfn.png
  21. BIN
      src/assets/images/home/zh.png
  22. BIN
      src/assets/images/home/zyz.png
  23. 59
      src/components/Tree/nodeWrap.vue
  24. 36
      src/router/index.js
  25. 527
      src/views/dataBoard/organizational/dangTree/index.vue
  26. 527
      src/views/dataBoard/organizational/gridTree/index.vue
  27. 290
      src/views/dataBoard/organizational/index.vue
  28. 527
      src/views/dataBoard/organizational/jwTree/index.vue
  29. 5
      src/views/dataBoard/satisfactionEval/components/Tabs/index.vue
  30. 64
      src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/detail.vue
  31. 1
      src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/index.vue
  32. 150
      src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/BusinessRecords.vue
  33. 188
      src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/EnjoyService.vue
  34. 76
      src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/Family.vue
  35. 93
      src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/MatterDetails.vue
  36. 51
      src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/PointsRecord.vue
  37. 2
      src/views/dataBoardMain/main-navbar.vue
  38. 14194
      yarn.lock

2
.env.development

@ -1,6 +1,6 @@
NODE_ENV=development
VUE_APP_API_SERVER = http://192.168.1.144/api
VUE_APP_API_SERVER = http://localhost:9001/api
# VUE_APP_API_SERVER = http://219.146.91.110:30801/api
# VUE_APP_API_SERVER = https://epmet-yantai.elinkservice.cn/api
# VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api

244
src/assets/css/workflow.scss

@ -1,3 +1,31 @@
@mixin navListCommon {
width: 120px;
height: 36px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
margin-right: 4px;
text-align: center;
line-height: 36px;
cursor: pointer;
}
@mixin flowLevwlCommon {
position: absolute;
width: 100%;
margin-bottom: 45px;
background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
color: #fff;
font-size: 16px;
}
@mixin flowLevelAfter {
position: absolute;
content: "";
display: block;
background-size: 100%;
}
.ant-btn {
line-height: 1.5;
display: inline-block;
@ -1124,7 +1152,7 @@ html {
.popperClass {
width: 130px !important;
height: 136px !important;
min-height: 136px !important;
background: #0E3164;
border: 1px solid #4883CD;
border-radius: 4px;
@ -1153,7 +1181,7 @@ html {
}
.dingflow-design .condition-node {
cursor: pointer;
// min-height: 220px
}
@ -1351,4 +1379,216 @@ html {
.ant-btn {
position: relative
}
.wrap {
.content {
margin-top: 65px;
padding: 0 17px;
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: 50% 50%;
// overflow: scroll;
.contentList {
position: relative;
width: 100%;
height: 109px;
// margin-bottom: 45px;
// background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
}
.flowLevel-1 {
@include flowLevwlCommon;
top: -10px;
height: 164px;
line-height: 164px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 51px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dwbg.png);
}
}
}
.flowLevel-2,
.flowLevel-3,
.flowLevel-4,
.flowLevel-5,
.flowLevel-6,
.flowLevel-7 {
@include flowLevwlCommon;
height: 126px;
line-height: 126px;
}
.flowLevel-2 {
top: 181px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 26px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dzb.png);
}
}
}
.flowLevel-3 {
top: 329px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 31px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lydxz.png);
}
}
}
.flowLevel-4 {
top: 475px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dyzxh.png);
}
}
}
.flowLevel-5 {
top: 623px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
.flowLevel-6 {
top: 771px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
.flowLevel-7 {
top: 922px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
.flowLevel-8 {
@include flowLevwlCommon;
top: 1070px;
height: 90px;
line-height: 90px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 14px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
.flowLevel-9 {
@include flowLevwlCommon;
top: 1179px;
height: 135px;
line-height: 135px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dyzxh.png);
}
}
}
.flowLevel-10 {
@include flowLevwlCommon;
top: 1338px;
height: 135px;
line-height: 135px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
}
}

BIN
src/assets/images/home/bzfry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 845 B

BIN
src/assets/images/home/cjry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 704 B

BIN
src/assets/images/home/dbry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 570 B

BIN
src/assets/images/home/dy.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 887 B

BIN
src/assets/images/home/gyg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 755 B

BIN
src/assets/images/home/ldry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 867 B

BIN
src/assets/images/home/lnr.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 750 B

BIN
src/assets/images/home/lzdyz.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 899 B

BIN
src/assets/images/home/mxbry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 876 B

BIN
src/assets/images/home/snry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 811 B

BIN
src/assets/images/home/syry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 964 B

BIN
src/assets/images/home/szry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 959 B

BIN
src/assets/images/home/tdry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 819 B

BIN
src/assets/images/home/tsry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 818 B

BIN
src/assets/images/home/tyjr.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 883 B

BIN
src/assets/images/home/tzry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 742 B

BIN
src/assets/images/home/xfry.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 961 B

BIN
src/assets/images/home/ylfn.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 752 B

BIN
src/assets/images/home/zh.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 917 B

BIN
src/assets/images/home/zyz.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 852 B

59
src/components/Tree/nodeWrap.vue

@ -28,23 +28,23 @@
</div>
</div>
<div class="lxjtWrap" v-if="item.partyOrgLevel === 10">
<el-popover popper-class="popperClass" placement="right" trigger="click">
<el-popover popper-class="popperClass" placement="right" trigger="hover">
<div class="popperList">
<div style="margin-bottom: 13px">家庭类别</div>
<div class="listMsg">
<img src="@/assets/images/home/jr.png" alt="" />
<span>退役军人</span>
<div class="listMsg" v-for="item in homeTypeArr" :key="item">
<img :src="require(`@/assets/images/home/${getHomeTypesMap(item)[1]}.png`)" alt="" />
<span style="margin-left: 3px">{{ getHomeTypesMap(item)[0] }}</span>
</div>
<div class="listMsg">
<!-- <div class="listMsg">
<img src="@/assets/images/home/cjr.png" alt="" />
<span>残疾人</span>
</div>
<div class="listMsg">
<img src="@/assets/images/home/kclr.png" alt="" />
<span>空巢老人</span>
</div>
</div> -->
</div>
<div slot="reference" class="lxjt" :title="item.principalName">
<div @mouseover="getHomeTypes(item.id)" slot="reference" class="lxjt" :title="item.principalName">
{{ spliceNameFun(item, 3) }}
<img src="@/assets/images/home/cjr.png" alt="" />
</div>
@ -75,7 +75,9 @@
export default {
props: ["nodeConfig"],
data() {
return {};
return {
homeTypeArr: [],
};
},
mounted() {},
computed: {},
@ -101,6 +103,46 @@ export default {
}
return allName;
},
// Map
getHomeTypesMap(item) {
const homeTypeMap = new Map([
["partyFlag", { name: "党员", icon: "dy" }],
["subsistenceAllowanceFlag", { name: "低保人员", icon: "dbry" }],
["ensureHouseFlag", { name: "保障房人员", icon: "bzfry" }],
["unemployedFlag", { name: "失业人员", icon: "syry" }],
["fertileWomanFlag", { name: "育龄妇女", icon: "ylfn" }],
["veteranFlag", { name: "退役军人", icon: "tyjr" }],
["unitedFrontFlag", { name: "统战人员", icon: "tzry" }],
["petitionOfficerFlag", { name: "信访人员", icon: "xfry" }],
["volunteerFlag", { name: "志愿者", icon: "zyz" }],
["oldPeopleFlag", { name: "老年人", icon: "lnr" }],
["emptyNesterFlag", { name: "空巢老人", icon: "kclr" }],
["specialSupportFlag", { name: "特扶人员", icon: "tfry" }],
["disabledFlag", { name: "失能人员", icon: "snry" }],
["dementedFlag", { name: "失智人员", icon: "szry" }],
["disabilityFlag", { name: "残疾人", icon: "cjr" }],
["seriousIllnessFlag", { name: "大病人员", icon: "dbry" }],
["chronicDiseaseFlag", { name: "慢性病人员", icon: "mxbry" }],
["specialCrowdFlag", { name: "特殊人群", icon: "tsry" }],
["tenantFlag", { name: "租户", icon: "zh" }],
["floatingFlag", { name: "流动人员", icon: "ldry" }],
["liveAloneFlag", { name: "独居老人", icon: "kclr" }],
["publicWelfareFlag", { name: "公益岗人员", icon: "gyg" }],
]);
return [homeTypeMap.get(item).name, homeTypeMap.get(item).icon];
},
getHomeTypes(id) {
this.$http.get(`/actual/base/organizational/structure/getResidentCategoryByHouseId?houseId=${"1495582904602800129"}`).then((res) => {
const { code, data } = res.data;
if (code === 0) {
const newItem = data[0];
const itemNumOne = Object.keys(newItem).filter((key) => newItem[key] === 1);
this.homeTypeArr = itemNumOne;
}
});
},
},
};
</script>
@ -118,6 +160,7 @@ export default {
.node-box-after {
.nodeBoxTop {
font-size: 14px;
cursor: pointer;
position: relative;
color: #fff;
display: inline-block;

36
src/router/index.js

@ -359,14 +359,46 @@ export const dataBoardRoutes = {
},
},
{
path: "organizational/index",
path: "/organizational",
props: true,
component: () => import("@/views/dataBoard/organizational/index"),
name: "dataBoard-organizational-index",
name: "Organizational",
meta: {
title: "组织架构",
isTab: false,
},
children: [
{
path: "/organizational/dangTree",
props: true,
component: () => import("@/views/dataBoard/organizational/dangTree/index"),
name: "DangTree",
meta: {
title: "党组织架构",
isTab: false,
},
},
{
path: "/organizational/jwTree",
props: true,
component: () => import("@/views/dataBoard/organizational/jwTree/index"),
name: "JwTree",
meta: {
title: "居委组织架构",
isTab: false,
},
},
{
path: "/organizational/gridTree",
props: true,
component: () => import("@/views/dataBoard/organizational/gridTree/index"),
name: "GridTree",
meta: {
title: "网格架构",
isTab: false,
},
},
],
},
{
path: "humanData/index",

527
src/views/dataBoard/organizational/dangTree/index.vue

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

527
src/views/dataBoard/organizational/gridTree/index.vue

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

290
src/views/dataBoard/organizational/index.vue

@ -2,7 +2,7 @@
<div class="organWrap">
<div class="top-nav">
<div class="top-nav-list">
<div v-for="item in navList" :key="item.key" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)">
<div v-for="item in navList" :key="item.key" :class="[$route.path == item.path ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)">
{{ item.name }}
</div>
</div>
@ -11,30 +11,7 @@
<div style="width: 100px; height: 100px; background-color: aqua; color: #fff;" v-drag>222</div>
</div> -->
<!-- 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>
<!-- <div class="flowLevel-6"></div>
<div class="flowLevel-7"></div>
<div class="flowLevel-8"></div>
<div class="flowLevel-9"></div>
<div class="flowLevel-10"></div> -->
<!-- <div class="flowLevel-2"><div>网格党支部</div></div>
<div class="flowLevel-3"><div>楼院党小组</div></div>
<div class="flowLevel-4"><div>党员中心户</div></div>
<div class="flowLevel-5"><div>联系家庭</div></div> -->
<el-row>
<el-col :span="4">
<div class="contentList"></div>
</el-col>
<el-col :span="20">
<div class="dingflow-design" v-loading="loading">
<nodeWrap :nodeConfig.sync="nodeConfig"></nodeWrap>
</div>
</el-col>
</el-row>
</div>
<router-view></router-view>
</div>
</template>
@ -44,29 +21,29 @@ import { relativeTimeThreshold } from "moment";
// import Tree from "./components/tree.vue";
export default {
name: "organizational",
name: "Organizational",
// components: {
// Tree,
// },
data() {
return {
loading: false,
levelArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
levelArr: [1, 2, 3, 4],
navList: [
{
name: "党委组织架构",
key: "1",
ifActive: true,
path: "/organizational/dangTree",
},
{
name: "居委组织架构",
key: "2",
ifActive: false,
path: "/organizational/jwTree",
},
{
name: "网格架构",
key: "3",
ifActive: false,
path: "/organizational/gridTree",
},
],
cardList: [
@ -485,55 +462,8 @@ export default {
};
},
computed: {},
mounted() {
// this.getTreeData();
},
mounted() {},
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);
},
chooseNav(item) {
this.navList.forEach((d) => {
if (item.key === d.key) {
@ -542,16 +472,7 @@ export default {
d.ifActive = false;
}
});
},
zoomSize(e) {
e.preventDefault();
if (e.deltaY > 0) {
if (this.nowVal == 50) return;
this.nowVal -= 0.5;
} else if (e.deltaY < 0) {
if (this.nowVal == 300) return;
this.nowVal += 0.5;
}
this.$router.push(item.path);
},
},
};
@ -571,22 +492,6 @@ export default {
cursor: pointer;
}
@mixin flowLevwlCommon {
position: absolute;
width: 100%;
margin-bottom: 45px;
background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
color: #fff;
font-size: 16px;
}
@mixin flowLevelAfter {
position: absolute;
content: "";
display: block;
background-size: 100%;
}
.organWrap {
margin-top: 18px;
.top-nav {
@ -605,182 +510,5 @@ export default {
}
}
}
.content {
margin-top: 65px;
padding: 0 17px;
position: relative;
transition: transform 0.3s ease-in-out;
transform-origin: 50% 50%;
// overflow: scroll;
.contentList {
position: relative;
width: 100%;
height: 109px;
// margin-bottom: 45px;
// background: linear-gradient(90deg, rgba(14, 121, 213, 0.14) 86%, rgba(79, 175, 255, 0) 100%);
}
.flowLevel-1 {
@include flowLevwlCommon;
top: -10px;
height: 164px;
line-height: 164px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 51px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dwbg.png);
}
}
}
.flowLevel-2,
.flowLevel-3,
.flowLevel-4,
.flowLevel-5,
.flowLevel-6,
.flowLevel-7 {
@include flowLevwlCommon;
height: 126px;
line-height: 126px;
}
.flowLevel-2 {
top: 181px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 26px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dzb.png);
}
}
}
.flowLevel-3 {
top: 329px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 31px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lydxz.png);
}
}
}
.flowLevel-4 {
top: 475px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dyzxh.png);
}
}
}
.flowLevel-5 {
top: 623px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
.flowLevel-6 {
top: 771px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
.flowLevel-7 {
top: 922px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
.flowLevel-8 {
@include flowLevwlCommon;
top: 1070px;
height: 90px;
line-height: 90px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 14px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
.flowLevel-9 {
@include flowLevwlCommon;
top: 1179px;
height: 135px;
line-height: 135px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/dyzxh.png);
}
}
}
.flowLevel-10 {
@include flowLevwlCommon;
top: 1338px;
height: 135px;
line-height: 135px;
div {
padding-left: 80px;
&::after {
@include flowLevelAfter;
top: 35px;
left: 15px;
width: 180px;
height: 60px;
background-image: url(~@/assets/images/home/lxjt.png);
}
}
}
}
}
</style>

527
src/views/dataBoard/organizational/jwTree/index.vue

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

5
src/views/dataBoard/satisfactionEval/components/Tabs/index.vue

@ -45,10 +45,13 @@ export default {
padding: 10px 11px;
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
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;
}
}

64
src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/detail.vue

@ -1,16 +1,53 @@
<template>
<div>
<Breadcrumb :list="breadcrumbList"/>
<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>
</div>
</template>
<script>
import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb'
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: "dissatisfiedPersonnelDetail",
components: {Breadcrumb},
components: {
Breadcrumb,
MatterDetails,
Family,
BusinessRecords,
EnjoyService,
PointsRecord
},
data() {
return {
breadcrumbList: [{
@ -26,14 +63,25 @@ export default {
}
},
mounted() {
console.log(this.breadcrumbList,this.$route)
console.log(this.breadcrumbList, this.$route)
this.$set(this.breadcrumbList[2],'name',this.$route.query.name)
this.$set(this.breadcrumbList[2], 'name', this.$route.query.name)
this.breadcrumbList[2].name = this.$route.query.name
}
}
</script>
<style scoped>
<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>

1
src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/index.vue

@ -133,7 +133,6 @@ export default {
},
handleView({name,id}) {
this.$router.push('/dataBoard/satisfactionEval/dissatisfiedPersonnel/detail?name=张三&id=1')
}
}
}

150
src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/BusinessRecords.vue

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

188
src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/EnjoyService.vue

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

76
src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/Family.vue

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

93
src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/MatterDetails.vue

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

51
src/views/dataBoard/satisfactionEval/dissatisfiedPersonnel/modules/PointsRecord.vue

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

2
src/views/dataBoardMain/main-navbar.vue

@ -24,7 +24,7 @@
<div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/overview/index' }" @click="toPage('/dataBoard/overview/index')">
<span>概览</span>
</div>
<div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/organizational/index' }" @click="toPage('/dataBoard/organizational/index')">
<div class="nav-item" :class="{ 'z-on': $route.path.includes('/organizational') }" @click="toPage('/organizational/dangTree')">
<span>组织架构</span>
</div>
<div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/humanData/index' }" @click="toPage('/dataBoard/humanData/index')">

14194
yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save