张若晨
3 years ago
21 changed files with 1893 additions and 12 deletions
|
After Width: | Height: | Size: 234 KiB |
@ -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,81 @@ |
|||
<template> |
|||
<div> |
|||
<el-row> |
|||
<el-col :span="10"> |
|||
<data-title title="家庭标签"> |
|||
</data-title> |
|||
<MatterDetails /> |
|||
<data-title title="家庭关系" /> |
|||
<Family @setJuminData="setJuminData" /> |
|||
</el-col> |
|||
<el-col :span="13" :offset="1"> |
|||
<data-title title="居民各项业务记录" /> |
|||
<BusinessRecords :juminArr="juminArr" /> |
|||
<data-title title="人口变化情况" /> |
|||
<EnjoyService /> |
|||
</el-col> |
|||
</el-row> |
|||
<resi-details |
|||
@close="popupShow = false" |
|||
:resi-id="resId" |
|||
v-if="popupShow" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.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"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
|
|||
export default { |
|||
name: "OrgPersonnel", |
|||
components: { |
|||
MatterDetails, |
|||
Family, |
|||
BusinessRecords, |
|||
EnjoyService, |
|||
PointsRecord, |
|||
dataTitle, |
|||
resiDetails, |
|||
}, |
|||
data() { |
|||
return { |
|||
popupShow: false, |
|||
resId: "", |
|||
juminArr: [], |
|||
}; |
|||
}, |
|||
mounted() { |
|||
const query = this.$route.query; |
|||
this.resId = query.user_id; |
|||
}, |
|||
methods: { |
|||
setJuminData(arr) { |
|||
this.juminArr = arr; |
|||
}, |
|||
}, |
|||
}; |
|||
</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; |
|||
} |
|||
a:hover { |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,189 @@ |
|||
<template> |
|||
<div class="business-records"> |
|||
<Tabs v-model="type" :list="typeList" @changeVal="typeChange" /> |
|||
<complaint |
|||
@changeTotal="changeTotal" |
|||
:juminArr="juminArr" |
|||
v-show="type == 1" |
|||
/> |
|||
<economize |
|||
@changeTotal="changeTotal" |
|||
:juminArr="juminArr" |
|||
v-show="type == 2" |
|||
/> |
|||
<community |
|||
@changeTotal="changeTotal" |
|||
:juminArr="juminArr" |
|||
v-show="type == 3" |
|||
/> |
|||
<reporting-events |
|||
@changeTotal="changeTotal" |
|||
:juminArr="juminArr" |
|||
v-show="type == 4" |
|||
/> |
|||
<resident |
|||
@changeTotal="changeTotal" |
|||
:juminArr="juminArr" |
|||
v-show="type == 5" |
|||
/> |
|||
<giveService |
|||
@changeTotal="changeTotal" |
|||
:juminArr="juminArr" |
|||
v-show="type == 6" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue"; |
|||
import complaint from "./businessTables/complaint.vue"; |
|||
import economize from "./businessTables/economize.vue"; |
|||
import community from "./businessTables/community.vue"; |
|||
import reportingEvents from "./businessTables/reporting-events.vue"; |
|||
import resident from "./businessTables/resident.vue"; |
|||
import giveService from "./businessTables/give-service.vue"; |
|||
|
|||
export default { |
|||
name: "BusinessRecords", |
|||
props: { |
|||
juminArr: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
components: { |
|||
Tabs, |
|||
complaint, |
|||
reportingEvents, |
|||
economize, |
|||
community, |
|||
resident, |
|||
giveService, |
|||
}, |
|||
data() { |
|||
return { |
|||
type: 1, |
|||
typeList: [ |
|||
{ |
|||
label: "12345投诉", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "省满意度调查", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "社区满意度自查", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "上报事件", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "居民需求", |
|||
value: 5, |
|||
}, |
|||
{ |
|||
label: "社区服务", |
|||
value: 6, |
|||
}, |
|||
], |
|||
typeLists: [ |
|||
{ |
|||
label: "12345投诉", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "省满意度调查", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "社区满意度自查", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "上报事件", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "居民需求", |
|||
value: 5, |
|||
}, |
|||
{ |
|||
label: "社区服务", |
|||
value: 6, |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
typeChange(e) { |
|||
this.type = e; |
|||
}, |
|||
changeTotal(item) { |
|||
this.typeList[item.name].label = item.total |
|||
? `${this.typeLists[item.name].label}（${item.total}）` |
|||
: this.typeLists[item.name].label; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.business-records { |
|||
margin-top: 12px; |
|||
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,120 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="list" max-height="390px" height="390px"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="变更人" prop="resiName" width="140" /> |
|||
<el-table-column label="变更类型" prop="typeName" width="" /> |
|||
<el-table-column label="变更前" prop="beforeChange" width="120" /> |
|||
<el-table-column label="变更后" prop="afterChange" width="120" /> |
|||
<el-table-column label="操作人" prop="operatorName" width="120" /> |
|||
<el-table-column label="调整时间" prop="changeTime" width="190" /> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "community", |
|||
props: { |
|||
juminArr: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
houseId: "", |
|||
list: [], |
|||
total: 0, |
|||
}; |
|||
}, |
|||
created() { |
|||
const query = this.$route.query; |
|||
this.houseId = query.houseId; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
// 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访) |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http |
|||
.get( |
|||
"/actual/base/peopleRoomOverview/houseResidentChangeRecord?houseId=" + |
|||
this.houseId |
|||
) |
|||
.then(({ data: res }) => { |
|||
console.log('res::',res); |
|||
this.list = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
completeFlag: completeFlags[item.completeFlag], |
|||
}; |
|||
}); |
|||
this.total = res.data.length; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</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,161 @@ |
|||
<template> |
|||
<div class="family"> |
|||
<div class="tag" v-for="item in data" :key="item.id"> |
|||
<div> |
|||
{{ item.name }} |
|||
<span v-if="item.houseHolderRel" |
|||
>({{ item.houseHolderRel == "本人" ? "户主" : item.houseHolderRel }}) |
|||
</span> |
|||
</div> |
|||
<div v-if="item.householdSituation"> |
|||
入户状态：{{ item.householdSituation }} |
|||
</div> |
|||
<div>居民分类：{{ getType(item.classificationOfInhabitantsList) }}</div> |
|||
</div> |
|||
<div style="padding-top: 220px; margin-left: 148px"> |
|||
<div class="user-name">{{ hzData.name }}</div> |
|||
<div class="user-gx">（户主）</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Family", |
|||
data() { |
|||
return { |
|||
data: [], |
|||
queryParam: { |
|||
type: "1", |
|||
}, |
|||
info: {}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
getType() { |
|||
return (arr) => { |
|||
if (arr.length > 0) { |
|||
let txt = ""; |
|||
arr.forEach((item, index) => { |
|||
if (arr.length == index + 1) { |
|||
txt = txt + item; |
|||
} else { |
|||
txt = txt + item + ","; |
|||
} |
|||
}); |
|||
return txt; |
|||
} else { |
|||
return "暂无"; |
|||
} |
|||
}; |
|||
}, |
|||
}, |
|||
created() { |
|||
const query = this.$route.query; |
|||
this.queryParam.resid = query.houseId; |
|||
this.getDatas(); |
|||
}, |
|||
methods: { |
|||
getDatas() { |
|||
this.$http |
|||
.post( |
|||
"/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid=" + |
|||
this.queryParam.resid |
|||
) |
|||
.then(({ data: res }) => { |
|||
const data = res.data; |
|||
this.data = data; |
|||
this.hzData = data.filter((item) => item.houseHolderRel == "本人")[0]; |
|||
this.$emit("setJuminData", data); |
|||
}); |
|||
}, |
|||
// getUserInfo() { |
|||
// this.$http |
|||
// .post( |
|||
// "/actual/base/peopleRoomOverview/getPersonalFile?resid=" + |
|||
// this.queryParam.resid, |
|||
// this.queryParam |
|||
// ) |
|||
// .then(({ data: res }) => { |
|||
// this.info = res.data; |
|||
// }); |
|||
// }, |
|||
}, |
|||
}; |
|||
</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; |
|||
background: url("@/assets/images/manyidu/gx_big.png") no-repeat center; |
|||
background-size: 100% 100%; |
|||
width: 180px; |
|||
min-height: 80px; |
|||
&:nth-of-type(1) { |
|||
left: -24px; |
|||
top: -24px; |
|||
} |
|||
&:nth-of-type(2) { |
|||
right: -24px; |
|||
top: -24px; |
|||
} |
|||
&:nth-of-type(3) { |
|||
left: -24px; |
|||
bottom: -20px; |
|||
} |
|||
&:nth-of-type(4) { |
|||
right: -24px; |
|||
top: 274px; |
|||
} |
|||
&:nth-of-type(5) { |
|||
left: -94px; |
|||
top: 74px; |
|||
} |
|||
&:nth-of-type(6) { |
|||
right: -94px; |
|||
top: 74px; |
|||
} |
|||
&:nth-of-type(7) { |
|||
left: -124px; |
|||
top: 174px; |
|||
} |
|||
&:nth-of-type(8) { |
|||
right: -124px; |
|||
top: 174px; |
|||
} |
|||
} |
|||
.user-name { |
|||
width: 174px; |
|||
text-align: center; |
|||
height: 17px; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
margin-top: -12px; |
|||
} |
|||
.user-gx { |
|||
width: 174px; |
|||
text-align: center; |
|||
height: 17px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
line-height: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<div class="matter-details"> |
|||
<div class="user-img"> |
|||
<!-- <img src="@/assets/images/manyidu/dn_bg1.png" alt="" /> --> |
|||
<div class="user-name">{{ data.name }}</div> |
|||
</div> |
|||
<div class="tags"> |
|||
<div |
|||
:class="`tag ${index % 2 == 0 ? 'small' : ''} ${ |
|||
item.red == '0' ? '' : 'red' |
|||
}`" |
|||
v-for="(item, index) in data" |
|||
:key="item.tagName" |
|||
> |
|||
{{ item.tagName }} |
|||
</div> |
|||
</div> |
|||
<div class="jtxxdz">四季景园1号楼1单元101</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "MatterDetails", |
|||
data() { |
|||
return { |
|||
data: [], |
|||
queryParams: {}, |
|||
genderArr: ["未知", "男", "女"], |
|||
}; |
|||
}, |
|||
|
|||
created() { |
|||
const query = this.$route.query; |
|||
this.queryParams.houseId = query.houseId; |
|||
this.getDatas(); |
|||
}, |
|||
methods: { |
|||
getDatas() { |
|||
this.$http |
|||
.get( |
|||
"/actual/base/peopleRoomOverview/getHouseTag?houseId=" + |
|||
this.queryParams.houseId |
|||
) |
|||
.then(({ data: res }) => { |
|||
this.data = res.data; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.jtxxdz { |
|||
width: 100%; |
|||
text-align: center; |
|||
height: 14px; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff !important; |
|||
line-height: 32px; |
|||
position: absolute; |
|||
top:370px; |
|||
left: 0; |
|||
} |
|||
.matter-details { |
|||
width: 607px; |
|||
height: 372px; |
|||
background: url("@/assets/images/manyidu/dn_bg3.png") no-repeat center bottom; |
|||
background-size: 454px 230px; |
|||
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; |
|||
} |
|||
} |
|||
|
|||
.user-name { |
|||
width: 174px; |
|||
text-align: center; |
|||
height: 17px; |
|||
font-size: 18px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
margin-top: -12px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<div> |
|||
<div class="enjoy-service"> |
|||
<div class="enjoy-service-item" v-for="(item, index) in data"> |
|||
<div class="num">+{{ item.classificationNum }}</div> |
|||
<div class="info"> |
|||
<div class="title">{{ item.classification }}</div> |
|||
<div class="time">{{ item.recordTime }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "PointsRecord", |
|||
data() { |
|||
return { |
|||
data:[], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/recorHistory") |
|||
.then(({ data: res }) => { |
|||
this.data = res.data; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.enjoy-service { |
|||
padding-left: 26px; |
|||
margin-top: 12px; |
|||
} |
|||
.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> |
|||
@ -0,0 +1,130 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="list" max-height="363px" height="363px"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="不满意事项类型" prop="scope" width="190" /> |
|||
<el-table-column label="不满意事项描述" prop="problemDesc" width="" /> |
|||
<el-table-column label="办理状态" prop="completeFlag" width="120" /> |
|||
<el-table-column label="是否回访" prop="isReturn" width="120" /> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "community", |
|||
props: { |
|||
juminArr: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
}; |
|||
}, |
|||
watch: { |
|||
juminArr(newVal, oldVal) { |
|||
if (newVal.length > 0) { |
|||
this.queryParams.residList = newVal.map((item) => { |
|||
return item.id; |
|||
}); |
|||
this.getList(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
// 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访) |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http |
|||
.post( |
|||
"/actual/base/peopleRoomOverview/communitySatisfactionPageList", |
|||
this.queryParams |
|||
) |
|||
.then(({ data: res }) => { |
|||
this.list = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
completeFlag: completeFlags[item.completeFlag], |
|||
}; |
|||
}); |
|||
this.total = res.data.length; |
|||
this.$emit("changeTotal", { name: 2, total: this.total }); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</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,137 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="list" max-height="363px" height="363px"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="事件类型" prop="categorycode" width="" /> |
|||
<el-table-column label="事件描述" prop="eventcontent" width="" /> |
|||
<el-table-column label="办理状态" prop="status" width="" /> |
|||
<el-table-column label="接收时间" prop="happentime" width="180" /> |
|||
<el-table-column label="标记" prop="marktype" 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.pageNo" |
|||
:limit.sync="queryParams.pageSize" |
|||
@pagination="getList" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "complaint", |
|||
props: { |
|||
juminArr: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
eventType: "3", |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
}; |
|||
}, |
|||
watch: { |
|||
juminArr(newVal, oldVal) { |
|||
if (newVal.length > 0) { |
|||
this.queryParams.residList = newVal.map((item) => { |
|||
return item.id; |
|||
}); |
|||
this.getList(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
// 事件分页查询 |
|||
const statusArr = { |
|||
processing: "处理中", |
|||
closed_case: "已办结", |
|||
}; |
|||
const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"]; |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/eventPageList", this.queryParams) |
|||
.then(({ data: res }) => { |
|||
this.list = res.data.list.map((item) => { |
|||
return { |
|||
...item, |
|||
status: item.status?statusArr[item.status]:null, |
|||
marktype: marktypes[item.marktype], |
|||
}; |
|||
}); |
|||
this.total = res.data.total; |
|||
this.$emit("changeTotal", { name: 0, total: this.total }); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</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,115 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="list" max-height="363px" height="363px"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="不满意事项类型" prop="scope" width="190" /> |
|||
<el-table-column label="不满意事项描述" prop="problemDesc" width="" /> |
|||
<el-table-column label="办理状态" prop="completeFlag" width="120" /> |
|||
<el-table-column label="是否回访" prop="isReturn" width="120" /> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "economize", |
|||
props: { |
|||
juminArr: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
}; |
|||
}, |
|||
watch: { |
|||
juminArr(newVal, oldVal) { |
|||
if (newVal.length > 0) { |
|||
this.queryParams.residList = newVal.map((item) => { |
|||
return item.id; |
|||
}); |
|||
this.getList(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
// 省满意度列表 |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/provincialSatisfactionPageList", this.queryParams) |
|||
.then(({ data: res }) => { |
|||
this.list = res.data; |
|||
this.total = res.data.length; |
|||
this.$emit("changeTotal", { name: 1, total: this.total }); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</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,119 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="list" max-height="363px" height="363px"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="需求类型" prop="serviceCategoryKey" width="" /> |
|||
<el-table-column label="事件描述" prop="serviceName" width="" /> |
|||
<el-table-column label="服务情况" prop="state" width="" /> |
|||
<el-table-column label="创建时间" prop="serviceTimeStart" width="180" /> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "give-service", |
|||
props: { |
|||
juminArr: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
}; |
|||
}, |
|||
watch: { |
|||
juminArr(newVal, oldVal) { |
|||
if (newVal.length > 0) { |
|||
this.queryParams.residList = newVal.map((item) => { |
|||
return item.id; |
|||
}); |
|||
this.getList(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
// 社区服务列表 |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/communityServicePageList", this.queryParams) |
|||
.then(({ data: res }) => { |
|||
this.list = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
}; |
|||
}); |
|||
this.total = res.data.length; |
|||
this.$emit("changeTotal", { name: 5, total: this.total }); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</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,135 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="list" max-height="363px" height="363px"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="事件类型" prop="categorycode" width="" /> |
|||
<el-table-column label="事件描述" prop="eventcontent" width="" /> |
|||
<el-table-column label="办理状态" prop="status" width="" /> |
|||
<el-table-column label="接收时间" prop="happentime" width="180" /> |
|||
<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.pageNo" |
|||
:limit.sync="queryParams.pageSize" |
|||
@pagination="getList" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "reporting-events", |
|||
props: { |
|||
juminArr: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
}; |
|||
}, |
|||
watch: { |
|||
juminArr(newVal, oldVal) { |
|||
if (newVal.length > 0) { |
|||
this.queryParams.residList = newVal.map((item) => { |
|||
return item.id; |
|||
}); |
|||
this.getList(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
// 事件分页查询 |
|||
const statusArr = { |
|||
processing: "处理中", |
|||
closed_case: "已办结", |
|||
}; |
|||
const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"]; |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/eventPageList", this.queryParams) |
|||
.then(({ data: res }) => { |
|||
this.list = res.data.list.map((item) => { |
|||
return { |
|||
...item, |
|||
status: item.status?statusArr[item.status]:null, |
|||
marktype: marktypes[item.marktype], |
|||
}; |
|||
}); |
|||
this.total = res.data.total; |
|||
this.$emit("changeTotal", { name: 3, total: this.total }); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</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,122 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="list" max-height="363px" height="363px"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column label="需求类型" prop="categoryName" width="" /> |
|||
<el-table-column label="需求描述" prop="content" width="" /> |
|||
<el-table-column label="办理情况" prop="status" width="" /> |
|||
<el-table-column label="上报时间" prop="reportTime" width="180" /> |
|||
<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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "complaint", |
|||
props: { |
|||
juminArr: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
}; |
|||
}, |
|||
watch: { |
|||
juminArr(newVal, oldVal) { |
|||
if (newVal.length > 0) { |
|||
this.queryParams.residList = newVal.map((item) => { |
|||
return item.id; |
|||
}); |
|||
this.getList(); |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
// 居民需求列表 |
|||
this.$http |
|||
.post( |
|||
"/actual/base/peopleRoomOverview/demandOfResidentsPageList", |
|||
this.queryParams |
|||
) |
|||
.then(({ data: res }) => { |
|||
this.list = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
}; |
|||
}); |
|||
this.total = res.data.length; |
|||
this.$emit("changeTotal", { name: 4, total: this.total }); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</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> |
|||
Loading…
Reference in new issue