duanliangtao
1 year ago
22 changed files with 2605 additions and 53 deletions
@ -1,7 +1,7 @@ |
|||
NODE_ENV=production |
|||
# VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api |
|||
# VUE_APP_API_SERVER = http://192.168.1.140/api |
|||
VUE_APP_API_SERVER = http://219.146.91.110:30801/api |
|||
VUE_APP_API_SERVER = http://192.168.1.140/api |
|||
# VUE_APP_API_SERVER = http://192.168.1.60:8080/api |
|||
VUE_APP_BIPASS_API_SERVER = http://dcommunity-dev.elinkservice.cn:30801/linkdata/linkdata-gateway/route |
|||
VUE_APP_NODE_ENV=prod:sit |
|||
VUE_APP_PUBLIC_PATH=epmet-oper |
|||
|
|||
@ -0,0 +1,298 @@ |
|||
<template> |
|||
<div style="padding:0 16px;margin-top: 7px;"> |
|||
<el-tabs v-model="topTabs" @tab-click="tabClick"> |
|||
<el-tab-pane :label="complainLabel" name="12345"> |
|||
<complain :tableData="complainList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="shengLabel" name="sheng"> |
|||
<sheng :tableData="shengList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="shequLabel" name="shequ"> |
|||
<shequ :tableData="shequList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="shijianLabel" name="shijian"> |
|||
<shijian :tableData="shijianList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="xuqiuLabel" name="xuqiu"> |
|||
<xuqiu :tableData="xuqiuList" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :label="fuwuLabel" name="fuwu"> |
|||
<div style="display: flex; flex-direction: column; height: 100%"> |
|||
<fuwu |
|||
:tableData="fuwuList" |
|||
style="flex: 1; overflow: auto" |
|||
/> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import complain from "./table/complain"; |
|||
import sheng from "./table/sheng"; |
|||
import shequ from "./table/shequ"; |
|||
import shijian from "./table/shijian"; |
|||
import xuqiu from "./table/xuqiu"; |
|||
import fuwu from "./table/fuwu"; |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
topTabs: "12345", |
|||
|
|||
complainTotal: 0, |
|||
complainList: [], |
|||
complainLabel: "", |
|||
|
|||
shengLabel: "", |
|||
shengList: [], |
|||
shengTotal: 0, |
|||
|
|||
shequLabel: "", |
|||
shequList: [], |
|||
shequTotal: 0, |
|||
|
|||
shijianLabel: "", |
|||
shijianList: [], |
|||
shijianTotal: 0, |
|||
|
|||
xuqiuLabel: "", |
|||
xuqiuList: [], |
|||
xuqiuTotal: 0, |
|||
|
|||
fuwuLabel: "", |
|||
fuwuList: [], |
|||
fuwuTotal: 0, |
|||
|
|||
pageNo: 1, |
|||
pageSize: 20, |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
}, |
|||
async mounted() { |
|||
// 获取家庭所有成员 |
|||
await this.getHouseRelationShip(); |
|||
|
|||
await this.getComplainList(); |
|||
await this.getShengList(); |
|||
await this.getShequList(); |
|||
await this.getshijianList(); |
|||
await this.getxuqiuList(); |
|||
await this.getfuwuList(); |
|||
}, |
|||
props: { |
|||
houseId: { |
|||
type: String, |
|||
default: () => {}, |
|||
}, |
|||
familyResiList: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
|
|||
}, |
|||
//方法 |
|||
methods: { |
|||
tabClick(index) {}, |
|||
handleSizeChange() {}, |
|||
handleCurrentChange() {}, |
|||
getComplainList() { |
|||
|
|||
if (this.resiId.length == 0) { |
|||
this.complainList = []; |
|||
this.complainLabel = `12345投诉（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
eventType: "3", |
|||
}; |
|||
const statusArr = { |
|||
processing: "处理中", |
|||
closed_case: "已办结", |
|||
}; |
|||
const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"]; |
|||
|
|||
// 省满意度列表 |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/eventPageList", parm) |
|||
.then(({ data: res }) => { |
|||
this.complainList = res.data.list.map((item) => { |
|||
return { |
|||
...item, |
|||
status: item.status ? statusArr[item.status] : null, |
|||
marktype: marktypes[item.marktype], |
|||
}; |
|||
}); |
|||
this.complainTotal = res.data.total; |
|||
|
|||
this.complainLabel = `12345投诉（${this.complainTotal}）`; |
|||
}); |
|||
}, |
|||
getShengList() { |
|||
if (this.resiId.length == 0) { |
|||
this.shengList = []; |
|||
this.shengLabel = `省满意度调查（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http |
|||
.post( |
|||
"/actual/base/peopleRoomOverview/provincialSatisfactionPageList", |
|||
parm |
|||
) |
|||
.then(({ data: res }) => { |
|||
this.shengList = res.data; |
|||
this.shengTotal = res.data.length; |
|||
this.shengLabel = `省满意度调查（${this.shengTotal}）`; |
|||
}); |
|||
}, |
|||
getShequList() { |
|||
if (this.resiId.length == 0) { |
|||
this.shequList = []; |
|||
this.shequLabel = `社区满意度自查（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
this.$http |
|||
.post( |
|||
"/actual/base/peopleRoomOverview/communitySatisfactionPageList", |
|||
parm |
|||
) |
|||
.then(({ data: res }) => { |
|||
this.shequList = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
completeFlag: completeFlags[item.completeFlag], |
|||
}; |
|||
}); |
|||
this.shequTotal = this.shequList.length; |
|||
this.shequLabel = `社区满意度自查（${this.shequTotal}）`; |
|||
}); |
|||
}, |
|||
getshijianList() { |
|||
if (this.resiId.length == 0) { |
|||
this.shijianList = []; |
|||
this.shijianLabel = `上报事件（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
const statusArr = { |
|||
processing: "处理中", |
|||
closed_case: "已办结", |
|||
}; |
|||
const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"]; |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/eventPageList", parm) |
|||
.then(({ data: res }) => { |
|||
this.shijianList = res.data.list.map((item) => { |
|||
return { |
|||
...item, |
|||
status: item.status ? statusArr[item.status] : null, |
|||
marktype: marktypes[item.marktype], |
|||
}; |
|||
}); |
|||
this.shijianTotal = this.shijianList.length; |
|||
this.shijianLabel = `上报事件（${this.shijianTotal}）`; |
|||
}); |
|||
}, |
|||
getxuqiuList() { |
|||
if (this.resiId.length == 0) { |
|||
this.xuqiuList = []; |
|||
this.xuqiuLabel = `居民需求（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/demandOfResidentsPageList", parm) |
|||
.then(({ data: res }) => { |
|||
this.xuqiuList = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
}; |
|||
}); |
|||
this.xuqiuTotal = this.xuqiuList.length; |
|||
this.xuqiuLabel = `居民需求（${this.xuqiuTotal}）`; |
|||
}); |
|||
}, |
|||
getfuwuList() { |
|||
if (this.resiId.length == 0) { |
|||
this.fuwuList = []; |
|||
this.fuwuLabel = `社区服务（0）`; |
|||
return; |
|||
} |
|||
let parm = { |
|||
residList: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
}; |
|||
this.$http |
|||
.post("/actual/base/peopleRoomOverview/communityServicePageList", parm) |
|||
.then(({ data: res }) => { |
|||
this.fuwuList = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
}; |
|||
}); |
|||
this.fuwuTotal = this.fuwuList.length; |
|||
this.fuwuLabel = `社区服务（${this.fuwuTotal}）`; |
|||
}); |
|||
}, |
|||
|
|||
// 业务记录 |
|||
async getHouseRelationShip() { |
|||
try { |
|||
var resiIds = []; |
|||
await this.$http.post("/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid="+this.houseId).then(({ data: res }) => { |
|||
res.data.forEach(function(item) { |
|||
// 将每个元素中的"id"放入houseResiIds数组中 |
|||
resiIds.push(item.id); |
|||
},this); |
|||
}); |
|||
|
|||
this.resiId = resiIds; |
|||
|
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: { complain, sheng, fuwu, shijian, xuqiu, shequ }, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,206 @@ |
|||
<template> |
|||
<el-dialog width="818px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog" |
|||
@close="handleClose" title="服务详情"> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="23" style="padding-left: 40px"> |
|||
<div class="leftEvent"> |
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ formData.principalName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务类型：</span> |
|||
<span>{{ |
|||
formData.customerId && getFwType(formData.customerId) |
|||
}}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务事项：</span> |
|||
<span>{{ formData.serviceName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务时间：</span> |
|||
<span>{{ formData.serviceTimeStart || '--' }} ~ |
|||
{{ formData.serviceTimeEnd || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务内容：</span> |
|||
<span style="margin-top: 20px">{{ formData.remark || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>经办人：</span> |
|||
<span>{{ formData.principalName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>联系电话：</span> |
|||
<span> {{ $sensitive(formData.principalContact, 3, 7) }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务组织：</span> |
|||
<span>{{ formData.principalName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>政策依据：</span> |
|||
<span>{{ formData.policyTitle || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "ReportAnEvent", |
|||
components: { |
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: {}, |
|||
loading: false, |
|||
activities: [], |
|||
|
|||
|
|||
// 服务类型。 |
|||
serviceTypesLevel1: [], |
|||
formData: {} |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.$http |
|||
.get("/governance/commonServiceType/selectList/0") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceTypesLevel1 = res.data; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getFwType(value) { |
|||
if (this.serviceTypesLevel1.length > 0 && value) { |
|||
return this.serviceTypesLevel1.filter( |
|||
(item) => item.customerId == value |
|||
)[0].name; |
|||
} |
|||
return ""; |
|||
}, |
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
this.$http |
|||
.post("/governance/icServiceRecordV2/detail", { |
|||
serviceRecordId: id, |
|||
}) |
|||
.then((res) => { |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.formData = data; |
|||
this.loading = false; |
|||
} else { |
|||
this.loading = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
// this.$http |
|||
// .post("/governance/icEvent/process", { icEventId: id }) |
|||
// .then((res) => { |
|||
// const { code, data, msg } = res.data; |
|||
// if (code === 0) { |
|||
// this.activities = data; |
|||
// } else { |
|||
// this.$message.error(msg); |
|||
// } |
|||
// }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
|
|||
.eventWrap { |
|||
width: 1094px; |
|||
max-height: 798px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
|
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
|
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
|
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,189 @@ |
|||
<template> |
|||
<el-dialog width="818px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog" |
|||
@close="handleClose" title="省满意度调查不满意事项详情"> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="23" style="padding-left: 40px"> |
|||
<div class="leftEvent"> |
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.agencyName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>不满意事项来源：</span> |
|||
<span>省满意度调查</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>不满意事项类型：</span> |
|||
<span>{{ item.scopeId && getSxType(item.scopeId) }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>所属月份：</span> |
|||
<span>{{ |
|||
item.createdTime && getMonthData(item.createdTime) |
|||
}}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<div>不满意事项描述：</div> |
|||
<div style="margin-top: 20px">{{ item.problemDesc || '--' }}</div> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>提交人姓名：</span> |
|||
<span>{{ item.name || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>提交人电话：</span> |
|||
<span> {{ $sensitive(item.mobile, 3, 7) }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>完成时限：</span> |
|||
<span>{{ item.completeTime || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
components: { |
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: { |
|||
logList: [], |
|||
}, |
|||
loading: false, |
|||
loading1: false, |
|||
activities: [], |
|||
// 不满意类型列表 |
|||
satisfactionCategoryOptions: [], |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() { }, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getSxType(value) { |
|||
if (this.satisfactionCategoryOptions.length > 0 && value) { |
|||
return this.satisfactionCategoryOptions.filter( |
|||
(item) => item.value == value |
|||
)[0].label; |
|||
} |
|||
return ""; |
|||
}, |
|||
getMonthData(time) { |
|||
if (time) { |
|||
return this.$moment(time).format("YYYY年MM月"); |
|||
} |
|||
return ""; |
|||
}, |
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
this.$http |
|||
.post("/governance/provinceEvaluationRecord/" + id) |
|||
.then((res) => { |
|||
this.loading = false; |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.item = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
this.$http |
|||
.get( |
|||
"/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=" |
|||
) |
|||
.then(({ data: { data } }) => { |
|||
this.satisfactionCategoryOptions = data.map((item) => { |
|||
return { |
|||
label: item.categoryName, |
|||
value: item.categoryCode, |
|||
}; |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
|
|||
.eventWrap { |
|||
width: 1094px; |
|||
max-height: 798px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
|
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
|
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,306 @@ |
|||
<template> |
|||
<el-dialog width="1118px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog" |
|||
@close="handleClose" title="事件详情"> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="13" style="padding-left: 40px"> |
|||
<div class="leftEvent"> |
|||
|
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.gridName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报渠道：</span> |
|||
<span>{{ item.sourceTypeName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>事件类型：</span> |
|||
<span>{{ item.categoryName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>接受时间：</span> |
|||
<span>{{ item.happenTime || '--' }}</span> |
|||
</div> |
|||
<!-- <div class="eventItem"> |
|||
<span>工单号：</span> |
|||
<span>{{ item.workOrderNum }}</span> |
|||
</div>--> |
|||
<div class="eventItem"> |
|||
<div>问题描述：</div> |
|||
<div style="margin-top: 20px">{{ item.eventContent || '--' }}</div> |
|||
</div> |
|||
<!-- <div class="eventItem"> |
|||
<div>图片：</div> |
|||
<div style="margin-top: 20px; display: flex"> |
|||
<img |
|||
style="width: 100px; height: 100px; margin-right: 5px" |
|||
v-for="src in item.imageList" |
|||
:key="src" |
|||
:src="src" |
|||
alt="/" |
|||
@click="openImg(src)" |
|||
/> |
|||
</div> |
|||
</div>--> |
|||
<div class="eventItem"> |
|||
<span>联系人：</span> |
|||
<span>{{ item.name || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>联系电话：</span> |
|||
<span>{{ item.mobile || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>详细地址：</span> |
|||
<span>{{ item.address || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>办结时限：</span> |
|||
<span>{{ item.latestOperatedTime || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>满意度评价：</span> |
|||
<span>{{ item.satisfactionName || '--' }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<div class="rightEvent m-info"> |
|||
<!-- <div class="eventDetails"> |
|||
<img :width="18" :height="18" src="@/assets/images/manyidu/tc-title-icon.png" />办理进展 |
|||
</div> --> |
|||
<!-- <el-timeline class="timeline" :reverse="true"> |
|||
<el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''"> |
|||
<div class="status-box"> |
|||
<div class="status1" v-if="index == activities.length - 1">回复</div> |
|||
<div class="status2" v-else>完成并回复</div> |
|||
<div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="field">回复人：</div> |
|||
<div class="value">{{ item.departmentName }}</div> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="field">回复内容：</div> |
|||
<div class="value">{{ item.publicReply }}</div> |
|||
</div> |
|||
</el-timeline-item> |
|||
</el-timeline> --> |
|||
<div v-if="activities.length > 0"> |
|||
<!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> --> |
|||
<div class="m-process"> |
|||
<div class="list"> |
|||
<div class="item" :class="[index === 0 ? 'z-on' : '']" :key="item.processId" |
|||
v-for="(item, index) in activities"> |
|||
<div class="item-row"> |
|||
<template v-if="item.agencyId"> |
|||
<div class="name">指派</div> |
|||
</template> |
|||
<template v-if="!item.timeLimit"> |
|||
<div class="name">完成并回复</div> |
|||
</template> |
|||
<template v-if="!item.agencyId && item.timeLimit"> |
|||
<div class="name">{{ item.processName || '--' }}</div> |
|||
</template> |
|||
<div class="date"> |
|||
{{ |
|||
item.processTime ? getTrueTime(item.processTime) : "" |
|||
}} |
|||
</div> |
|||
</div> |
|||
<div v-if="item.type === 'event'"> |
|||
<template v-if="item.agencyId"> |
|||
<div class="detail"> |
|||
<div class="detail-field">指派人：</div> |
|||
<div class="detail-value"> |
|||
{{ item.departmentName || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="detail-field">指派部门：</div> |
|||
<div class="detail-value"> |
|||
{{ item.agencyName || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="detail-field">转办意见：</div> |
|||
<div class="detail-value"> |
|||
{{ item.publicReply || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="detail-field">办结时限：</div> |
|||
<div class="detail-value"> |
|||
{{ item.timeLimit || '--' }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<div class="detail"> |
|||
<div class="detail-field">回复人：</div> |
|||
<div class="detail-value"> |
|||
{{ item.departmentName || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="detail-field">回复内容：</div> |
|||
<div class="detail-value"> |
|||
{{ item.publicReply || '--' }} |
|||
</div> |
|||
</div> |
|||
<div class="detail" v-if="item.timeLimit"> |
|||
<div class="detail-field">办结时限：</div> |
|||
<div class="detail-value"> |
|||
{{ getTrueTime(item.timeLimit) }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- </el-card> --> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "ReportAnEvent", |
|||
components: { |
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: {}, |
|||
loading: false, |
|||
loading1: false, |
|||
activities: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
this.getProcessData(this.id); |
|||
} else { |
|||
this.item = {} |
|||
this.activities = [] |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() { |
|||
}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
this.$http |
|||
.post("/governance/icEvent/detail", { icEventId: id }) |
|||
.then((res) => { |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.item = data; |
|||
this.loading = false; |
|||
} else { |
|||
this.loading = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
getProcessData(id) { |
|||
this.$http |
|||
.post("/governance/icEvent/process", { icEventId: id }) |
|||
.then((res) => { |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.activities = data; |
|||
this.loading1 = false; |
|||
} else { |
|||
this.loading1 = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
|
|||
.eventWrap { |
|||
width: 1094px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
|
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
|
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
|
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
|
|||
span:first-child {} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,283 @@ |
|||
<template> |
|||
<el-dialog |
|||
width="818px" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:destroy-on-close="true" |
|||
:visible="showDialog" |
|||
@close="handleClose" |
|||
title="社区满意度自查不满意事项详情" |
|||
> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="24" style="padding-left: 40px"> |
|||
</el-col> |
|||
<el-col |
|||
:span="23" |
|||
style="padding-left: 40px" |
|||
> |
|||
<div class="leftEvent"> |
|||
|
|||
<!-- <div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.agencyName }}</span> |
|||
</div> --> |
|||
<div class="eventItem"> |
|||
<span>不满意事项来源：</span> |
|||
<span>社区意度自查</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>不满意事项类型：</span> |
|||
<span>{{ getSxType(item) }}</span> |
|||
</div> |
|||
<!-- <div class="eventItem"> |
|||
<span>所属月份：</span> |
|||
<span>{{ |
|||
item.createdTime && getMonthData(item.createdTime) |
|||
}}</span> |
|||
</div> --> |
|||
<div class="eventItem"> |
|||
<div>不满意事项描述：</div> |
|||
<div style="margin-top: 20px">{{ getSxReason(item) }}</div> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>提交人姓名：</span> |
|||
<span>{{ item.reporterName || '--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>提交人电话：</span> |
|||
<span> {{ $sensitive(item.reporterMobile, 3, 7) }}</span> |
|||
</div> |
|||
<!-- <div class="eventItem"> |
|||
<span>完成时限：</span> |
|||
<span>{{ item.completeTime }}</span> |
|||
</div> --> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
components: { |
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: { |
|||
logList: [], |
|||
}, |
|||
loading: false, |
|||
// 不满意类型列表 |
|||
satisfactionCategoryOptions: [ |
|||
{ |
|||
key: "evaCulturalFacility", |
|||
value: "文化设施", |
|||
}, |
|||
{ |
|||
key: "evaSportsFacility", |
|||
value: "体育设施", |
|||
}, |
|||
{ |
|||
key: "evaEcologicalEnv", |
|||
value: "生态环境", |
|||
}, |
|||
{ |
|||
key: "evaSocialSecurity", |
|||
value: "社会治安", |
|||
}, |
|||
{ |
|||
key: "evaocialAssistance", |
|||
value: "社会救助", |
|||
}, |
|||
{ |
|||
key: "evaOldPeopleProvide", |
|||
value: "老有所养", |
|||
}, |
|||
{ |
|||
key: "evaBasicEducation", |
|||
value: "基础教育", |
|||
}, |
|||
{ |
|||
key: "evaMedical", |
|||
value: "病有所医", |
|||
}, |
|||
], |
|||
reason: [ |
|||
"basicEducationReason", |
|||
"culturalFacilityReason", |
|||
"ecologicalEnvReason", |
|||
"medicalReason", |
|||
"oldPeopleProvideReason", |
|||
"socialAssistanceReason", |
|||
"socialSecurityReason", |
|||
"sportsFacilityReason", |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getSxType(row) { |
|||
let arr = []; |
|||
let text = ""; |
|||
for (let k in row) { |
|||
if (row[k] == "bad") { |
|||
arr.push(k); |
|||
} |
|||
} |
|||
this.satisfactionCategoryOptions.forEach((item) => { |
|||
arr.forEach((item1) => { |
|||
if (item1 == item.key) { |
|||
if (text == "") { |
|||
text = item.value; |
|||
} else { |
|||
text = text + "， " + item.value; |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
return text; |
|||
}, |
|||
getSxReason(row) { |
|||
let text = ""; |
|||
this.reason.forEach((item) => { |
|||
for (let key in row) { |
|||
if (item == key && row[key]) { |
|||
if (text == "") { |
|||
text = row[key]; |
|||
} else { |
|||
text = text + "；" + row[key]; |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
return text; |
|||
}, |
|||
getMonthData(time) { |
|||
if (time) { |
|||
return this.$moment(time).format("YYYY年MM月"); |
|||
} |
|||
return ""; |
|||
}, |
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
this.$http |
|||
.get( |
|||
"/governance/satisfaction/communitySelfInsp/inspResult/detail/" + id |
|||
) |
|||
.then((res) => { |
|||
this.loading = false; |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.item = { ...data.reporter, ...data.satisfaction }; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
// this.$http |
|||
// .post("/governance/provinceEvaluationRecord/" + id) |
|||
// .then((res) => { |
|||
// this.loading = false; |
|||
// const { code, data, msg } = res.data; |
|||
// if (code === 0) { |
|||
// this.item = data; |
|||
// } else { |
|||
// this.$message.error(msg); |
|||
// } |
|||
// }); |
|||
// this.$http |
|||
// .get( |
|||
// "/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=" |
|||
// ) |
|||
// .then(({ data: { data } }) => { |
|||
// console.log('data::', data); |
|||
// this.satisfactionCategoryOptions = data.map((item) => { |
|||
// return { |
|||
// label: item.categoryName, |
|||
// value: item.categoryCode, |
|||
// }; |
|||
// }); |
|||
// }); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
.eventWrap { |
|||
width: 1094px; |
|||
// max-height: 798px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
|
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,188 @@ |
|||
<template> |
|||
<el-dialog |
|||
width="818px" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:destroy-on-close="true" |
|||
:visible="showDialog" |
|||
@close="handleClose" |
|||
title="需求详情" |
|||
> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
|
|||
<el-col |
|||
:span="23" |
|||
style="padding-left: 40px" |
|||
> |
|||
<div class="leftEvent"> |
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.gridName||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报渠道：</span> |
|||
<span>{{ item.reportTypeName||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>需求类型：</span> |
|||
<span>{{ item.categoryName ||'--'}}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报时间：</span> |
|||
<span>{{ item.reportTime||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<div>需求描述：</div> |
|||
<div style="margin-top: 20px">{{ item.content ||'--'}}</div> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>需求人姓名：</span> |
|||
<span>{{ item.demandUserName ||'--'}}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>需求人电话：</span> |
|||
<span> {{ $sensitive(item.demandUserMobile, 3, 7) }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>完成时限：</span> |
|||
<span>{{ item.wantServiceTime||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>需求人住址：</span> |
|||
<span>{{ item.serviceAddress||'--' }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报人：</span> |
|||
<span>{{ item.reportUserName||'--' }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "ReportAnEvent", |
|||
components: { |
|||
|
|||
}, |
|||
props: { |
|||
id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
item: { |
|||
logList: [], |
|||
}, |
|||
loading: false, |
|||
loading1: false, |
|||
activities: [], |
|||
}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
watch: { |
|||
showDialog: { |
|||
handler(val) { |
|||
if (val) { |
|||
this.getDetailsData(this.id); |
|||
} |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
this.item = {}; |
|||
}, |
|||
|
|||
openImg(src) { |
|||
window.open(src); |
|||
}, |
|||
|
|||
getTrueTime(time) { |
|||
return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm"); |
|||
}, |
|||
|
|||
getDetailsData(id) { |
|||
this.loading = true; |
|||
|
|||
let params = { |
|||
demandRecId: id, |
|||
}; |
|||
this.$http |
|||
.post("/governance/userdemand/demandDetail", params) |
|||
.then((res) => { |
|||
this.loading = false; |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.item = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
.eventWrap { |
|||
width: 1094px; |
|||
height: 610px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
|
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
|
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.m-info { |
|||
padding: 0px !important; |
|||
|
|||
.m-process { |
|||
margin: 0 !important; |
|||
.detail { |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.leftEvent { |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
|
|||
span:first-child { |
|||
} |
|||
|
|||
span:last-child { |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,187 @@ |
|||
|
|||
<template> |
|||
<div> |
|||
<div style="height:300px; width: 500px;"> |
|||
<RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" |
|||
:on-line-click="onLineClick" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
export default { |
|||
name: 'RelationGraphDemo3', |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
graphOptions: { |
|||
disableDragNode: true, |
|||
defaultNodeBorderWidth: 0, |
|||
defaultNodeColor: 'rgba(238, 178, 94, 0)', |
|||
allowSwitchLineShape: true, |
|||
allowSwitchJunctionPoint: true, |
|||
defaultLineShape: 1, |
|||
allowShowMiniToolBar: false, |
|||
layouts: [ |
|||
{ |
|||
label: '中心', |
|||
layoutName: 'center', |
|||
layoutClassName: 'seeks-layout-center', |
|||
distance_coefficient: 1.5 |
|||
} |
|||
], |
|||
defaultJunctionPoint: 'border', |
|||
// 这里可以参考"Graph 图谱"中的参数进行设置 |
|||
} |
|||
}; |
|||
}, |
|||
props: { |
|||
houseInfo: { |
|||
type: Object, |
|||
default: () => { } |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.getFamilyRelationshipList() |
|||
}) |
|||
}, |
|||
watch: { |
|||
houseInfo: { |
|||
handler(newVal, oldVal) { |
|||
this.getFamilyRelationshipList() |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
methods: { |
|||
async getFamilyRelationshipList() { |
|||
let url = `/actual/base/peopleRoomOverview/getFamilyRelationshipList?type=1&resid=` + this.houseInfo.id; |
|||
let { code, data, msg } = await requestPost(url) |
|||
if (code == 0) { |
|||
|
|||
// 将房屋本身的信息放到数组元素的第一个 |
|||
const rootNode = {}; |
|||
rootNode["id"] = this.houseInfo.id; |
|||
rootNode["name"] = this.houseInfo.fullName; |
|||
rootNode["type"] = 1; |
|||
data.unshift(rootNode); |
|||
|
|||
let familyList = data.map((item, index) => ({ |
|||
'id': `N${index + 1}`, |
|||
'text': item.name, |
|||
'innerHTML': `<div class="c-my-node${index == 0 ? '1' : '2'} c-my-node-${item.type == 1?'home':index == 0 ? item.gender == 1 ? 'father' : 'mother' : item.houseHolderRel == '配偶' ? item.gender == '1' ? 'mother' : 'father' : item.houseHolderRel == '女儿' ? 'girl' : item.houseHolderRel == '儿子' ? 'gon' : item.houseHolderRel == '父亲' || item.houseHolderRel == '祖父母' ? item.gender == 1 ? 'grandpa' : 'grandma' : item.houseHolderRel == '母亲' ? 'grandma' : item.gender == 1 ? 'father' : 'mother' }"><div class="c-node-name${index == 0 ? '1' : '2'}" style="color:#000">${item.type == 1?`${item.name}`:item.name.length === 2 ? |
|||
item.name.substring(0, 1) + '*' : |
|||
item.name.substring(0, 1) + '*' + item.name.substring(2)} ${item.age?`（${item.age}）岁`:''}</div></div>` |
|||
})) |
|||
|
|||
|
|||
let lineList = data.map((item, index) => ({ |
|||
'from': 'N1', |
|||
'to': `N${index + 1}`, |
|||
'text':item.type ==1?'未知':data[index].houseHolderRel || '自住', |
|||
'isHideArrow': true, |
|||
'color': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' || item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')), |
|||
'fontColor': item.houseHolderRel === '父亲' ? '#3876f2' : (item.houseHolderRel === '母亲' || item.houseHolderRel === '祖父母' ? '#ff9696' : (item.houseHolderRel === '女儿' ? '#ffd5d5' : '#3876f2')) |
|||
})); |
|||
lineList = lineList.slice(1) |
|||
const __graph_json_data = { rootId: 'root', nodes: familyList, lines: lineList } |
|||
this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (graphInstance) => { |
|||
// 这些写上当图谱初始化完成后需要执行的代码 |
|||
}); |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
onNodeClick(nodeObject, $event) { |
|||
console.log('onNodeClick:', nodeObject); |
|||
}, |
|||
onLineClick(lineObject, $event) { |
|||
console.log('onLineClick:', lineObject); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" > |
|||
.c-my-node2 { |
|||
border: none; |
|||
background-position: center center; |
|||
background-size: 100%; |
|||
height: 74px; |
|||
width: 74px; |
|||
border-radius: 40px; |
|||
} |
|||
|
|||
.c-node-name2 { |
|||
margin-left: -5px; |
|||
text-align: center; |
|||
margin-top: 63px; |
|||
line-height: 20px; |
|||
position: absolute; |
|||
width: 96px; |
|||
height: 20px; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 4px 6px 0px rgba(211, 213, 214, 0.4); |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
.c-my-node1 { |
|||
border: none; |
|||
background-size: 100%; |
|||
height: 100px; |
|||
width: 100px; |
|||
border-radius: 50px; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
} |
|||
|
|||
.c-my-node-son { |
|||
background-image: url(~@/assets/images/index/son.png) !important; |
|||
} |
|||
|
|||
.c-my-node-girl { |
|||
background-image: url(~@/assets/images/index/girl.png) !important; |
|||
} |
|||
|
|||
.c-my-node-father { |
|||
background-image: url(~@/assets/images/index/father.png) !important; |
|||
} |
|||
|
|||
.c-my-node-mother { |
|||
background-image: url(~@/assets/images/index/mother.png) !important; |
|||
} |
|||
|
|||
.c-my-node-grandpa { |
|||
background-image: url(~@/assets/images/index/grandpa.png) !important; |
|||
} |
|||
|
|||
.c-my-node-grandma { |
|||
background-image: url(~@/assets/images/index/grandma.png) !important; |
|||
} |
|||
|
|||
.c-my-node-home { |
|||
background-image: url(~@/assets/images/index/home.png) !important; |
|||
} |
|||
|
|||
.c-node-name1 { |
|||
margin-left: -5px; |
|||
text-align: center; |
|||
margin-top: 63px; |
|||
line-height: 20px; |
|||
position: absolute; |
|||
width: 96px; |
|||
height: 20px; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 4px 6px 0px rgba(211, 213, 214, 0.4); |
|||
border-radius: 10px; |
|||
} |
|||
|
|||
.rel-node-checked { |
|||
box-shadow: none !important; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,56 @@ |
|||
<template> |
|||
<div class="table" style="padding:0 16px;"> |
|||
|
|||
<el-table class="m-table-item" :data="tableData" border style="width: 100%; margin-top:23px"> |
|||
<el-table-column label="序号" type="index" fixed="left" align="left" width="50"> |
|||
</el-table-column> |
|||
<el-table-column v-for="item in tableHeader" :key="item.columnName" :prop="item.columnName" :label="item.label" |
|||
align="left" :show-overflow-tooltip="true" :width="item.width || ''"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ handleFilterSpan(scope.row, item) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
tableHeader: [ |
|||
{ columnName: "resiName", label: "变更人", width: 150 }, |
|||
{ columnName: "typeName", label: "变更类型", width: 80 }, |
|||
{ columnName: "beforeChange", label: "变更前", width: 200 }, |
|||
{ columnName: "afterChange", label: "变更后", width: 200 }, |
|||
{ columnName: "operatorName", label: "操作人", width: 80 }, |
|||
{ columnName: "changeTime", label: "调整时间", width: 150 } |
|||
], |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
computed: { |
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleFilterSpan(row, item) { |
|||
let _val = ""; |
|||
return _val || row[item.columnName]; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData" > |
|||
<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(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<sjdetails :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import sjdetails from "../details/sjdetail"; |
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
sjdetails |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
pageNo: 1, |
|||
pageSize: 20 |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
let parm = { |
|||
residList: [this.resiId], |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize |
|||
} |
|||
this.list = []; |
|||
this.total = 0; |
|||
// this.$emit("changeTotal", { name: 2, total: 0 }); |
|||
// 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访) |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http.post("/actual/base/peopleRoomOverview/communitySatisfactionPageList", parm).then(({ data: res }) => { |
|||
this.list = [] |
|||
// this.list = res.data.list.map((item) => { |
|||
// return { |
|||
// ...item, |
|||
// status: item.status ? statusArr[item.status] : null, |
|||
// marktype: marktypes[item.marktype], |
|||
// }; |
|||
// }); |
|||
this.total = this.list.length; |
|||
this.$emit("changeTotal", { name: 2, total: this.total }); |
|||
}); |
|||
}, |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
this.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getList(); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData"> |
|||
<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(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<fwdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import fwdetail from "../details/fwdetail"; |
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
fwdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table> |
|||
<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(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<shengdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import shengdetail from "../details/shengdetail"; |
|||
|
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
shengdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData"> |
|||
<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(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<sqdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import sqdetail from "../details/sqdetail"; |
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
sqdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData"> |
|||
<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(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<sjdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import sjdetail from "../details/sjdetail"; |
|||
export default { |
|||
components: { |
|||
sjdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
mounted() { }, |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
let residList = [this.resiId] |
|||
this.list = []; |
|||
this.total = 0; |
|||
// this.$emit("changeTotal", { name: 2, total: 0 }); |
|||
// 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访) |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http.post("/actual/base/peopleRoomOverview/communitySatisfactionPageList", { residList }).then(({ data: res }) => { |
|||
this.list = [{ |
|||
scope: "服务态度", |
|||
problemDesc: "服务人员态度不好", |
|||
completeFlag: "未办理", |
|||
isReturn: "否" |
|||
}, |
|||
{ |
|||
scope: "处理速度", |
|||
problemDesc: "等待时间过长", |
|||
completeFlag: "已办理", |
|||
isReturn: "是" |
|||
}, |
|||
{ |
|||
scope: "设备问题", |
|||
problemDesc: "使用的机器经常故障", |
|||
completeFlag: "办理中", |
|||
isReturn: "否" |
|||
}, |
|||
{ |
|||
scope: "其他", |
|||
problemDesc: "场地不够干净", |
|||
completeFlag: "已办理", |
|||
isReturn: "是" |
|||
}] |
|||
this.total = res.data.length; |
|||
// this.$emit("changeTotal", { name: 2, total: this.total }); |
|||
}); |
|||
}, |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,103 @@ |
|||
<template> |
|||
<div class="table"> |
|||
<el-table :data="tableData"> |
|||
<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(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<xqdetail :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import xqdetail from "../details/xqdetail"; |
|||
|
|||
export default { |
|||
name: "community", |
|||
components: { |
|||
xqdetail |
|||
}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
residList: [], |
|||
}, |
|||
list: [], |
|||
total: 0, |
|||
rowId: null, |
|||
showDialog: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
}, |
|||
|
|||
mounted() { }, |
|||
props: { |
|||
tableData: { |
|||
type: Array, |
|||
default: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
let residList = [this.resiId] |
|||
this.list = []; |
|||
this.total = 0; |
|||
// this.$emit("changeTotal", { name: 2, total: 0 }); |
|||
// 办理状态(-2：未知，-1：不接受回访，0：接受回访/待回访，1已回访) |
|||
const completeFlags = { |
|||
"-2": "未知", |
|||
"-1": "不接受回访", |
|||
0: "接受回访/待回访", |
|||
1: "已回访", |
|||
}; |
|||
// 省满意度列表 |
|||
this.$http.post("/actual/base/peopleRoomOverview/communitySatisfactionPageList", { residList }).then(({ data: res }) => { |
|||
this.list = [{ |
|||
scope: "服务态度", |
|||
problemDesc: "服务人员态度不好", |
|||
completeFlag: "未办理", |
|||
isReturn: "否" |
|||
}, |
|||
{ |
|||
scope: "处理速度", |
|||
problemDesc: "等待时间过长", |
|||
completeFlag: "已办理", |
|||
isReturn: "是" |
|||
}, |
|||
{ |
|||
scope: "设备问题", |
|||
problemDesc: "使用的机器经常故障", |
|||
completeFlag: "办理中", |
|||
isReturn: "否" |
|||
}, |
|||
{ |
|||
scope: "其他", |
|||
problemDesc: "场地不够干净", |
|||
completeFlag: "已办理", |
|||
isReturn: "是" |
|||
}] |
|||
this.total = res.data.length; |
|||
// this.$emit("changeTotal", { name: 2, total: this.total }); |
|||
}); |
|||
}, |
|||
handleView(item) { |
|||
this.rowId = item.id; |
|||
this.showDialog = true; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"></style> |
|||
|
|||
@ -0,0 +1,346 @@ |
|||
<template> |
|||
<div class="g-main" v-loading="loading"> |
|||
<div class="right"> |
|||
<!-- <div class="editBtn"> |
|||
<el-button |
|||
class="diy-button--add" |
|||
type="primary" |
|||
size="small" |
|||
@click.native="handelClickHouseEdit" |
|||
>编辑</el-button |
|||
> |
|||
</div> --> |
|||
<div class="title-small" id="base">房屋信息</div> |
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
|
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房屋编码：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.houseCode || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房屋类型：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.houseTypeName || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房屋用途：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.purposeName || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房屋状态：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.rentName || "--" }} |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
|
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">家庭标签：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.familyTags || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">房主姓名：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.ownerName || "--" }} |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label"><b>证件号：</b></div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ |
|||
houseDetailObj.ownerIdCard |
|||
? houseDetailObj.ownerIdCard |
|||
: "--" |
|||
}} |
|||
</div> |
|||
<img |
|||
v-show="showFlagIdCardBtn" |
|||
src="@/assets/img/yanjing1.png" |
|||
alt="" |
|||
width="14px" |
|||
style="margin-left: 10px" |
|||
/> |
|||
<img |
|||
v-show="!showFlagIdCardBtn" |
|||
src="@/assets/img/yanjing2.png" |
|||
alt="" |
|||
width="14px" |
|||
style="margin-left: 10px" |
|||
/> |
|||
<el-button |
|||
type="text" |
|||
class="div-table-button--blue" |
|||
size="small" |
|||
@click="handelCLickShowCheckPassword('idCard')" |
|||
>{{ showFlagIdCardBtn ? "显示" : "隐藏" }}</el-button |
|||
> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label"><b>联系电话：</b></div> |
|||
<div class="f-left8 f-font-color"> |
|||
{{ |
|||
houseDetailObj.ownerPhone |
|||
? houseDetailObj.ownerPhone |
|||
: "--" |
|||
}} |
|||
</div> |
|||
<img |
|||
v-show="showFlagMobileBtn" |
|||
src="@/assets/img/yanjing1.png" |
|||
alt="" |
|||
width="14px" |
|||
style="margin-left: 10px" |
|||
/> |
|||
<img |
|||
v-show="!showFlagMobileBtn" |
|||
src="@/assets/img/yanjing2.png" |
|||
alt="" |
|||
width="14px" |
|||
style="margin-left: 10px" |
|||
/> |
|||
<el-button |
|||
type="text" |
|||
class="div-table-button--blue" |
|||
size="small" |
|||
@click="handelCLickShowCheckPassword('mobile')" |
|||
>{{ showFlagMobileBtn ? "显示" : "隐藏" }}</el-button |
|||
> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row type="flex" justify="" class="f-m-top23"> |
|||
|
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">备注：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.remark || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">创建时间：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.createdTime || "--" }} |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="f-flex"> |
|||
<div class="f-label">更新时间：</div> |
|||
<div class="f-left8 f-font-color" v-if="houseDetailObj"> |
|||
{{houseDetailObj.updatedTime || "--" }} |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
<div class="title-small">关系图谱 |
|||
<el-button type="primary" style="margin-left: 20px;" size="small" |
|||
@click="addResident()">新增居民</el-button> |
|||
</div> |
|||
|
|||
<graph |
|||
:houseInfo="houseDetailObj" |
|||
v-if="houseDetailObj" |
|||
/> |
|||
|
|||
<div class="title-small" id="businessRecord">业务记录</div> |
|||
<business-record :houseId="houseId"></business-record> |
|||
<div class="title-small" id="updateRecord">更新记录</div> |
|||
<change-record :tableData="houseChangeRecordList"></change-record> |
|||
</div> |
|||
<el-dialog title="密码验证" :visible.sync="showCheckPassword"> |
|||
<el-form :model="form" :rules="rules" ref="form"> |
|||
<el-form-item label="密码" prop="password"> |
|||
<el-input |
|||
v-model="form.password" |
|||
autocomplete="off" |
|||
type="password" |
|||
placeholder="请输入当前账号密码" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="showCheckPassword = false">取 消</el-button> |
|||
<el-button type="primary" @click="handelClickCheckPassword" |
|||
>确 定</el-button |
|||
> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import graph from "./cpts/graph.vue"; |
|||
import businessRecord from "./cpts/businessRecord.vue"; |
|||
import changeRecord from "./cpts/table/changeRecord.vue"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
checkType: "edit", //edit或者view |
|||
houseChangeRecordList: [], //更新记录 |
|||
houseDetailObj: {}, //房屋详情 |
|||
showFlagIdCardBtn: true, |
|||
showFlagMobileBtn: true, |
|||
|
|||
showCheckPassword: false, |
|||
houseId:"", |
|||
|
|||
form: { |
|||
password: "", //脱敏确认密码 |
|||
}, |
|||
rules: { |
|||
password: [{ required: true, message: "请输入密码", trigger: "blur" }], |
|||
}, |
|||
}; |
|||
}, |
|||
components: { graph, businessRecord, changeRecord }, |
|||
created() { |
|||
}, |
|||
mounted() {}, |
|||
activated() {}, |
|||
methods: { |
|||
// 更新记录 |
|||
async getChangeRecordDetailById() { |
|||
try { |
|||
const { data } = await this.$http.get( |
|||
`/actual/base/peopleRoomOverview/houseResidentChangeRecord?houseId=${this.houseId}` |
|||
); |
|||
if (data.data == null) { |
|||
this.houseChangeRecordList = []; |
|||
} else { |
|||
this.houseChangeRecordList = data.data; |
|||
} |
|||
} catch (error) { |
|||
console.log(error); |
|||
} |
|||
}, |
|||
|
|||
getHouseDetail() { |
|||
this.$http |
|||
.post(`/actual/base/communityHouse/getMaskedHouseDeatilById/${this.houseId}`) |
|||
.then(async (res) => { |
|||
if (res.data.code === 0) { |
|||
this.houseDetailObj = res.data.data || {}; |
|||
|
|||
} else if (res.data.code >= 8000) { |
|||
this.houseDetailObj = {}; |
|||
this.$message.error(res.data.msg); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
this.loading = false; |
|||
}, |
|||
handelClickHouseEdit() { |
|||
this.checkType = "edit"; |
|||
this.showCheckPassword = true; |
|||
}, |
|||
|
|||
handelCLickShowCheckPassword(type) { |
|||
this.form.password = ""; |
|||
this.checkType = "view"; |
|||
if (type === "idCard") { |
|||
if (this.showFlagIdCardBtn) { |
|||
this.showCheckPassword = true; |
|||
} else { |
|||
this.showFlagIdCardBtn = true; |
|||
this.$set( |
|||
this.houseDetailObj, |
|||
"ownerIdCard", |
|||
this.houseDetailObj.ownerIdCard.substr(0, 11) + |
|||
"****" + |
|||
this.houseDetailObj.ownerIdCard.substr(16, 2) |
|||
); |
|||
} |
|||
} else if (type === "mobile") { |
|||
if (this.showFlagMobileBtn) { |
|||
this.showCheckPassword = true; |
|||
} else { |
|||
this.showFlagMobileBtn = true; |
|||
this.$set( |
|||
this.houseDetailObj, |
|||
"ownerPhone", |
|||
this.houseDetailObj.ownerPhone.substr(0, 3) + |
|||
"****" + |
|||
this.houseDetailObj.ownerPhone.substr(7, 4) |
|||
); |
|||
} |
|||
} |
|||
this.tuominType = type; |
|||
}, |
|||
|
|||
handelClickCheckPassword() { |
|||
this.$refs.form.validate((vali) => { |
|||
if (vali) { |
|||
this.handleSaveTuomin(this.form.password); |
|||
} else { |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
addResident(){ |
|||
// this.$router.push({ name: 'add-resi' }); |
|||
this.$router.push({ |
|||
name: "add-resi", |
|||
params: { agencyId: "1673584241869238273",gridId: "1673585475279826946",villageId:"1673600667388780545",buildId:"1673600667527192577",unitId:"1673600667577524226",homeId:"1673600737530126338"}, |
|||
}); |
|||
}, |
|||
|
|||
async handleSaveTuomin(password) { |
|||
const url = `/actual/base/communityHouse/getClearHouseDeatilById/${this.houseId}`; |
|||
let parm = { |
|||
password, |
|||
}; |
|||
const { data, code, msg } = await requestPost(url, parm); |
|||
if (code === 0) { |
|||
if (this.tuominType === "mobile") { |
|||
this.$set(this.houseDetailObj, "ownerPhone", data.ownerPhone); |
|||
this.showFlagMobileBtn = !this.showFlagMobileBtn; |
|||
} |
|||
if (this.tuominType === "idCard") { |
|||
this.$set(this.houseDetailObj, "ownerIdCard", data.ownerIdCard); |
|||
this.showFlagIdCardBtn = !this.showFlagIdCardBtn; |
|||
} |
|||
this.showCheckPassword = false; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
computed: {}, |
|||
watch: { |
|||
"$store.state.huaXiang.houseInfo.houseId": { |
|||
handler(newValue, oldValue) { |
|||
this.houseId = newValue; |
|||
this.houseDetailObj = {}; |
|||
this.houseGraphObj = {}; |
|||
|
|||
this.getHouseDetail(); |
|||
this.getChangeRecordDetailById(); |
|||
|
|||
this.loading = false; |
|||
}, |
|||
deep: true, // 开启深度监听 |
|||
immediate: true, // 立即触发一次handler |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/pages/resiInfo.scss"; |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
</style> |
|||
Loading…
Reference in new issue