LL
2 months ago
34 changed files with 6314 additions and 8 deletions
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="table"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="list" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-text="加载中..." |
|||
> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
<el-table-column label="地点" prop="address"/> |
|||
<el-table-column label="工单号" prop="workOrderNum" show-overflow-tooltip/> |
|||
<el-table-column label="所属社区" prop="gridName"></el-table-column> |
|||
<el-table-column label="事件分类" prop="categoryName" show-overflow-tooltip></el-table-column> |
|||
<el-table-column label="投诉内容" min-width="220px" prop="eventContent" show-overflow-tooltip></el-table-column> |
|||
<el-table-column label="接收时间" prop="happenTime"></el-table-column> |
|||
<el-table-column label="联系人" prop="name"></el-table-column> |
|||
<el-table-column label="联系电话" prop="mobile"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
v-if="scope.row.reportUserId != null && scope.row.reportUserId != ''" |
|||
size="small" |
|||
type="text" |
|||
@click="handleLook(scope.row)" |
|||
> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</el-button> |
|||
<span v-else> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="状态" prop="status"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.status === 'processing'">处理中</span> |
|||
<span v-else-if="scope.row.status === 'closed_case'">已完成</span> |
|||
<span v-else>--</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue"; |
|||
import {requestPost} from "@/js/dai/request"; |
|||
export default { |
|||
name: "TddtlxsjDetail", |
|||
components: {Breadcrumb, Pagination, Title, EventDetails}, |
|||
data() { |
|||
return { |
|||
showDialog: false, |
|||
rowId: "", |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 13, |
|||
}, |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
/* { |
|||
path: "/dataBoard/satisfactionEval/Problem/tddtlxsj", |
|||
name: "同地点同类型重复投诉问题列表", |
|||
},*/ |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
}, |
|||
], |
|||
list: [], |
|||
title: "", |
|||
loading: false, |
|||
recId: "", |
|||
departId: "", |
|||
address: "", |
|||
mobile: "", |
|||
}; |
|||
}, |
|||
activated() { |
|||
// this.breadcrumbList[2].name = this.address + '' |
|||
let type = this.$route.query.type; |
|||
if (type === 'list') { |
|||
this.breadcrumbList = [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/Problem/tddtlxsj", |
|||
name: "同地点同类型重复投诉问题列表", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
} |
|||
] |
|||
} else { |
|||
this.breadcrumbList = [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
} |
|||
] |
|||
} |
|||
this.recId = this.$route.query.recId; |
|||
this.departId = this.$route.query.departId; |
|||
this.address = this.$route.query.address; |
|||
this.mobile = this.$route.query.mobile; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
async getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
} |
|||
try { |
|||
const url = "/governance/dwdEvent/list"; |
|||
if (this.recId) { |
|||
params.secondIdList = [this.recId]; |
|||
} |
|||
if (this.departId) { |
|||
params.departId = this.departId; |
|||
} |
|||
if (this.address) { |
|||
params.content = this.address; |
|||
} |
|||
if (this.mobile) { |
|||
params.mobile = this.mobile; |
|||
} |
|||
const {data, code, msg} = await requestPost(url, { |
|||
...params, |
|||
}); |
|||
if (code == 0) { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
} |
|||
} catch (err) { |
|||
console.log(err); |
|||
} |
|||
}, |
|||
handleView({icEventId}) { |
|||
this.showDialog = true; |
|||
this.rowId = icEventId; |
|||
}, |
|||
// 查看 |
|||
handleLook(row) { |
|||
let {reportUserId} = row |
|||
this.$router.push({ |
|||
path: "/dataBoard/overview/resident", |
|||
query: { |
|||
user_id: reportUserId, |
|||
type: 'renfang' |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,189 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-select |
|||
v-model.trim="typeCondition" |
|||
class="select" |
|||
placeholder="请选择" |
|||
popper-class="selectPopClass" |
|||
size="small" |
|||
> |
|||
<el-option |
|||
v-for="item in typeConditionList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-button class="btn" size="small" type="primary" @click="search">查询</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="table"> |
|||
<el-table v-loading="loading" :data="list" element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" element-loading-text="加载中..."> |
|||
<el-table-column label="序号" width="50" type="index"/> |
|||
<el-table-column label="地点" prop="address"/> |
|||
<el-table-column label="类型" prop="categoryName"/> |
|||
<el-table-column label="投诉次数" prop="amount"/> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
export default { |
|||
name: "tddtlxsjList", |
|||
components: {Breadcrumb, Pagination, Title}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
month: "", |
|||
agencyId: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
type: 1 |
|||
}, |
|||
typeCondition: 5, |
|||
typeConditionList: [ |
|||
{ |
|||
label: "本月", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "上月", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "近三月", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "近半年", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "近一年", |
|||
value: 5, |
|||
}, |
|||
], |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "同地点同类型重复投诉问题列表 ", |
|||
}, |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return {label: index - 0 + 1 + "月", value: index - 0 + 1}; |
|||
}), |
|||
list: [], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
/* let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
};*/ |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
...this.timeChange(this.typeCondition) |
|||
} |
|||
requestPost('/governance/dwdEvent/eventList',params).then(({data}) => { |
|||
this.total = data?data.total : 0; |
|||
this.list = data?data.list : []; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
timeChange(type) { |
|||
let queryDateStart = "", |
|||
queryDateEnd = ""; |
|||
if (type == 1) { |
|||
queryDateStart = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
queryDateStart = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 3) { |
|||
queryDateStart = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 4) { |
|||
queryDateStart = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 5) { |
|||
queryDateStart = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
queryDateEnd = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
queryDateEnd = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
return {queryDateStart, queryDateEnd}; |
|||
}, |
|||
handleView(row) { |
|||
let params = { |
|||
recId: row.categoryId, |
|||
address: row.address |
|||
} |
|||
this.$router.push('/dataBoard/satisfactionEval/Problem/tddtlxsj/detail?type=list&'+this.$paramsFormat(params)) |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="table"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="list" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-text="加载中..." |
|||
> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
<el-table-column label="地点" prop="address"/> |
|||
<el-table-column label="工单号" prop="workOrderNum" show-overflow-tooltip/> |
|||
<el-table-column label="所属社区" prop="gridName"></el-table-column> |
|||
<el-table-column label="事件分类" prop="categoryName" show-overflow-tooltip></el-table-column> |
|||
<el-table-column label="投诉内容" min-width="220px" prop="eventContent" show-overflow-tooltip></el-table-column> |
|||
<el-table-column label="接收时间" prop="happenTime"></el-table-column> |
|||
<el-table-column label="联系人" prop="name"></el-table-column> |
|||
<el-table-column label="联系电话" prop="mobile"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
v-if="scope.row.reportUserId != null && scope.row.reportUserId != ''" |
|||
size="small" |
|||
type="text" |
|||
@click="handleLook(scope.row)" |
|||
> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</el-button> |
|||
<span v-else> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="状态" prop="status"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.status === 'processing'">处理中</span> |
|||
<span v-else-if="scope.row.status === 'closed_case'">已完成</span> |
|||
<span v-else>--</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue"; |
|||
import {requestPost} from "@/js/dai/request"; |
|||
export default { |
|||
name: "TddtlxsjDetail", |
|||
components: {Breadcrumb, Pagination, Title, EventDetails}, |
|||
data() { |
|||
return { |
|||
showDialog: false, |
|||
rowId: "", |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 13, |
|||
}, |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
/* { |
|||
path: "/dataBoard/satisfactionEval/Problem/tyqybtlx", |
|||
name: "同一区域不同类型重复投诉问题列表", |
|||
},*/ |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
}, |
|||
], |
|||
list: [], |
|||
title: "", |
|||
loading: false, |
|||
recId: "", |
|||
departId: "", |
|||
address: "", |
|||
mobile: "", |
|||
}; |
|||
}, |
|||
activated() { |
|||
// this.breadcrumbList[2].name = this.address + '' |
|||
let type = this.$route.query.type |
|||
if (type === 'list') { |
|||
this.breadcrumbList = [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/Problem/tyqybtlx", |
|||
name: "同一区域不同类型重复投诉问题列表", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
}, |
|||
] |
|||
} else { |
|||
this.breadcrumbList = [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
}, |
|||
] |
|||
} |
|||
this.recId = this.$route.query.recId; |
|||
this.departId = this.$route.query.departId; |
|||
this.address = this.$route.query.address; |
|||
this.mobile = this.$route.query.mobile; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
async getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
} |
|||
try { |
|||
const url = "/governance/dwdEvent/list"; |
|||
if (this.recId) { |
|||
params.secondIdList = [this.recId]; |
|||
} |
|||
if (this.departId) { |
|||
params.departId = this.departId; |
|||
} |
|||
if (this.address) { |
|||
params.content = this.address; |
|||
} |
|||
if (this.mobile) { |
|||
params.mobile = this.mobile; |
|||
} |
|||
const {data, code, msg} = await requestPost(url, { |
|||
...params, |
|||
}); |
|||
if (code == 0) { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
} |
|||
} catch (err) { |
|||
console.log(err); |
|||
} |
|||
}, |
|||
handleView({icEventId}) { |
|||
this.showDialog = true; |
|||
this.rowId = icEventId; |
|||
}, |
|||
// 查看 |
|||
handleLook(row) { |
|||
let {reportUserId} = row |
|||
this.$router.push({ |
|||
path: "/dataBoard/overview/resident", |
|||
query: { |
|||
user_id: reportUserId, |
|||
type: 'renfang' |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,225 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-select |
|||
v-model.trim="typeCondition" |
|||
class="select" |
|||
placeholder="请选择" |
|||
popper-class="selectPopClass" |
|||
size="small" |
|||
@change="timeChange" |
|||
> |
|||
<el-option |
|||
v-for="item in typeConditionList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-button class="btn" size="small" type="primary" @click="search">查询</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="table"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="data" |
|||
:span-method="objectSpanMethod" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-text="加载中..." |
|||
> |
|||
<el-table-column label="序号" prop="number" width="70" align="center"> |
|||
<template slot-scope="{$index}"> |
|||
{{$index - 0 + 1}} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="地点" prop="address"/> |
|||
<el-table-column label="类型" prop="categoryName"/> |
|||
<el-table-column label="投诉次数" prop="amount"/> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import {requestPost} from "@/js/dai/request"; |
|||
export default { |
|||
name: "tyryList", |
|||
components: {Breadcrumb, Pagination, Title}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
month: "", |
|||
agencyId: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
type: 3 |
|||
}, |
|||
typeCondition: 5, |
|||
typeConditionList: [ |
|||
{ |
|||
label: "本月", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "上月", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "近三月", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "近半年", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "近一年", |
|||
value: 5, |
|||
}, |
|||
], |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "同一区域不同类型重复投诉问题列表 ", |
|||
}, |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return {label: index - 0 + 1 + "月", value: index - 0 + 1}; |
|||
}), |
|||
data: [], |
|||
data1: [ |
|||
"number", |
|||
"address", |
|||
"categoryName", |
|||
"amount" |
|||
], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
/* this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
};*/ |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
objectSpanMethod({row, column, rowIndex, columnIndex}) { |
|||
if (columnIndex === 1 || columnIndex === 4) { |
|||
if (rowIndex > 0 && row.address === this.data[rowIndex - 1].address) { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0, |
|||
}; |
|||
} else { |
|||
let rowspan = 1; |
|||
for (let i = rowIndex + 1; i < this.data.length; i++) { |
|||
if (row.address === this.data[i].address) { |
|||
rowspan++; |
|||
} else { |
|||
break; |
|||
} |
|||
} |
|||
return { |
|||
rowspan, |
|||
colspan: 1, |
|||
}; |
|||
} |
|||
} |
|||
}, |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
...this.timeChange(this.typeCondition) |
|||
} |
|||
requestPost('/governance/dwdEvent/eventList',params).then(({data}) => { |
|||
this.total = data?data.total : 0; |
|||
this.list = data?data.list : []; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
timeChange(type) { |
|||
let queryDateStart = "", |
|||
queryDateEnd = ""; |
|||
if (type == 1) { |
|||
queryDateStart = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
queryDateStart = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 3) { |
|||
queryDateStart = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 4) { |
|||
queryDateStart = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 5) { |
|||
queryDateStart = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
queryDateEnd = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
queryDateEnd = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
return {queryDateStart, queryDateEnd}; |
|||
}, |
|||
handleView({address}) { |
|||
this.$router.push('/dataBoard/satisfactionEval/Problem/tyqybtlx/detail?type=list&address=' + address) |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table-border.scss"; |
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="table"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="list" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-text="加载中..." |
|||
> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
<el-table-column label="地点" prop="address"/> |
|||
<el-table-column label="工单号" prop="workOrderNum" show-overflow-tooltip/> |
|||
<el-table-column label="所属社区" prop="gridName"></el-table-column> |
|||
<el-table-column label="事件分类" prop="categoryName" show-overflow-tooltip></el-table-column> |
|||
<el-table-column label="投诉内容" prop="eventContent" show-overflow-tooltip min-width="220px"></el-table-column> |
|||
<el-table-column label="接收时间" prop="happenTime"></el-table-column> |
|||
<el-table-column label="联系人" prop="name"></el-table-column> |
|||
<el-table-column label="联系电话" prop="mobile"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
v-if="scope.row.reportUserId != null && scope.row.reportUserId != ''" |
|||
@click="handleLook(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</el-button> |
|||
<span v-else> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="状态" prop="status"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.status === 'processing'">处理中</span> |
|||
<span v-else-if="scope.row.status === 'closed_case'">已完成</span> |
|||
<span v-else>--</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue"; |
|||
import {requestPost} from "@/js/dai/request"; |
|||
export default { |
|||
name: "TddtlxsjDetail", |
|||
components: {Breadcrumb, Pagination, Title, EventDetails}, |
|||
data() { |
|||
return { |
|||
showDialog: false, |
|||
rowId: "", |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
/* { |
|||
path: "/dataBoard/satisfactionEval/Problem/tyry", |
|||
name: "同一人员重复投诉问题列表", |
|||
},*/ |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
}, |
|||
], |
|||
list: [], |
|||
title: "", |
|||
loading: false, |
|||
recId: "", |
|||
departId: "", |
|||
address: "", |
|||
mobile: "", |
|||
}; |
|||
}, |
|||
activated() { |
|||
// this.breadcrumbList[2].name = this.address + '' |
|||
let type = this.$route.query.type; |
|||
if(type === 'list') { |
|||
this.breadcrumbList = [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/Problem/tyry", |
|||
name: "同一人员重复投诉问题列表", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
} |
|||
] |
|||
} else { |
|||
this.breadcrumbList = [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
} |
|||
] |
|||
} |
|||
this.recId = this.$route.query.recId; |
|||
this.departId = this.$route.query.departId; |
|||
this.address = this.$route.query.address; |
|||
this.mobile = this.$route.query.mobile; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
async getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
} |
|||
try { |
|||
const url = "/governance/dwdEvent/list"; |
|||
if(this.recId){ |
|||
params.secondIdList = [this.recId]; |
|||
} |
|||
if(this.departId){ |
|||
params.departId = this.departId; |
|||
} |
|||
if(this.address){ |
|||
params.content = this.address; |
|||
} |
|||
if(this.mobile){ |
|||
params.mobile = this.mobile; |
|||
} |
|||
const { data, code, msg } = await requestPost(url, { |
|||
...params, |
|||
}); |
|||
if (code == 0) { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
} |
|||
} catch (err) { |
|||
console.log(err); |
|||
} |
|||
}, |
|||
handleView({icEventId}) { |
|||
this.showDialog = true; |
|||
this.rowId = icEventId; |
|||
}, |
|||
// 查看 |
|||
handleLook(row) { |
|||
let { reportUserId } = row |
|||
this.$router.push({ |
|||
path: "/dataBoard/overview/resident", |
|||
query: { |
|||
user_id: reportUserId, |
|||
type:'renfang' |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,210 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-select |
|||
v-model.trim="typeCondition" |
|||
class="select" |
|||
placeholder="请选择" |
|||
popper-class="selectPopClass" |
|||
size="small" |
|||
@change="timeChange" |
|||
> |
|||
<el-option |
|||
v-for="item in typeConditionList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-button class="btn" size="small" type="primary" @click="search">查询</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="table"> |
|||
<el-table v-loading="loading" :data="list" element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" element-loading-text="加载中..."> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
<el-table-column label="联系方式" prop="mobile"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
v-if="scope.row.resiId != null && scope.row.resiId != ''" |
|||
@click="handleLook(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</el-button> |
|||
<span v-else> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="投诉次数" prop="amount"></el-table-column> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import {requestPost} from "@/js/dai/request"; |
|||
export default { |
|||
name: "tyryList", |
|||
components: {Breadcrumb, Pagination, Title}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
month: "", |
|||
agencyId: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
type: 2 |
|||
}, |
|||
typeCondition: 5, |
|||
typeConditionList: [ |
|||
{ |
|||
label: "本月", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "上月", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "近三月", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "近半年", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "近一年", |
|||
value: 5, |
|||
}, |
|||
], |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "同一人员重复投诉问题列表 ", |
|||
}, |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return {label: index - 0 + 1 + "月", value: index - 0 + 1}; |
|||
}), |
|||
list: [], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
/* this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
};*/ |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
...this.timeChange(this.typeCondition) |
|||
} |
|||
requestPost('/governance/dwdEvent/eventList',params).then(({data}) => { |
|||
this.total = data?data.total : 0; |
|||
this.list = data?data.list : []; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
timeChange(type) { |
|||
let queryDateStart = "", |
|||
queryDateEnd = ""; |
|||
if (type == 1) { |
|||
queryDateStart = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
queryDateStart = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 3) { |
|||
queryDateStart = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 4) { |
|||
queryDateStart = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 5) { |
|||
queryDateStart = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
queryDateEnd = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
queryDateEnd = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
return {queryDateStart, queryDateEnd}; |
|||
}, |
|||
handleView(row) { |
|||
this.$router.push('/dataBoard/satisfactionEval/Problem/tyry/detail?type=list&mobile='+row.mobile) |
|||
}, |
|||
// 查看 |
|||
handleLook(row) { |
|||
let { resiId } = row |
|||
this.$router.push({ |
|||
path: "/dataBoard/overview/resident", |
|||
query: { |
|||
user_id: resiId, |
|||
type:'renfang' |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,36 @@ |
|||
<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,131 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
class="dissatisfied-detail" |
|||
title="" |
|||
:visible.sync="dialogVisible" |
|||
width="1118px" |
|||
:modal="false" |
|||
:before-close="handleClose" |
|||
> |
|||
<div class="main-title"> |
|||
<Title :text="month + '份12345政务热线事件列表'" /> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="table"> |
|||
<el-table :data="list"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
|
|||
<el-table-column prop="monthTime" label="月度" /> |
|||
|
|||
<el-table-column prop="agencyName" label="所属社区"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="categoryName" label="事项类型" /> |
|||
|
|||
<el-table-column |
|||
prop="eventContent" |
|||
width="200" |
|||
show-overflow-tooltip |
|||
label="事项描述" |
|||
/> |
|||
<el-table-column prop="receiveTime" width="200" label="接收时间" /> |
|||
|
|||
<el-table-column prop="statusName" label="状态" /> |
|||
|
|||
<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> |
|||
</div> |
|||
|
|||
<Pagination |
|||
v-show="total > 0" |
|||
:total="total" |
|||
:page.sync="queryParams.pageNo" |
|||
:limit.sync="queryParams.pageSize" |
|||
@pagination="getList" |
|||
/> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<EventDetails :showDialog="showDialog" :id="this.rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import EventDetails from "@/views/dataBoard/cpts/event-details.vue"; |
|||
|
|||
export default { |
|||
name: "EventList", |
|||
components: { Breadcrumb, Pagination, Title, EventDetails }, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 5, |
|||
}, |
|||
total: 0, |
|||
list: [], |
|||
month: "", |
|||
dialogVisible: false, |
|||
showDialog: false, |
|||
rowId: "", |
|||
}; |
|||
}, |
|||
activated() {}, |
|||
methods: { |
|||
handleClose(done) { |
|||
this.dialogVisible = false; |
|||
}, |
|||
open(searchParams) { |
|||
this.dialogVisible = true; |
|||
this.month = this.$moment(searchParams.monthTime).format("YYYY年M月"); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.$http |
|||
.get( |
|||
"/governance/satisfactionOverview/event12345List?" + |
|||
this.$paramsFormat(this.queryParams) |
|||
) |
|||
.then(({ data: { data } }) => { |
|||
this.list = data.list; |
|||
this.total = data.total; |
|||
}); |
|||
}, |
|||
handleView({ id }) { |
|||
this.showDialog = true; |
|||
this.rowId = id; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
@import "@/assets/scss/dataBoard/dialog.scss"; |
|||
/deep/ .el-dialog__wrapper { |
|||
background: rgba(0, 0, 0, 0.85); |
|||
z-index: 9999999999 !important; |
|||
} |
|||
.dissatisfied-detail { |
|||
.main-title { |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
</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)!important; |
|||
border: 1px solid #126AC5!important; |
|||
border-radius: 2px!important; |
|||
color: #A3B9DA!important; |
|||
height: 28px!important; |
|||
} |
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
background: #1A95FF!important; |
|||
border-radius: 2px!important; |
|||
color: #FFFFFF!important; |
|||
} |
|||
} |
|||
.pagination-container.hidden { |
|||
display: none; |
|||
} |
|||
.el-dialog .pagination-container { |
|||
padding-bottom: 0!important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div class="tabs"> |
|||
<div |
|||
class="tab" |
|||
:class="value2 === item.value ? 'cur' : ''" |
|||
v-for="(item, index) in list" |
|||
@click="tabClick(index)" |
|||
:key="item.value" |
|||
> |
|||
{{ 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.value2); |
|||
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,60 @@ |
|||
<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 { |
|||
// width: 100%; |
|||
height: 40px; |
|||
background: url(@/assets/images/shuju/overview/title-bg.png) no-repeat; |
|||
background-size: auto 100%; |
|||
padding: 8px 16px 8px 45px; |
|||
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,54 @@ |
|||
<template> |
|||
<div :class="noBg ? 'no-bg' : ''" class="title"> |
|||
<div class="text"> |
|||
<span class="txt">{{ text }}</span> |
|||
<slot name="time"></slot> |
|||
</div> |
|||
<slot name="info"></slot> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "Title", |
|||
props: { |
|||
text: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
noBg: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.title { |
|||
// width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 30px; |
|||
padding: 7px 0px 5px 34px; |
|||
background: url(@/assets/images/shuju/overview/title-small-bg.png) no-repeat; |
|||
//background-size: 100% 100%; |
|||
.text { |
|||
font-family: PingFang SC; |
|||
font-size: 18px; |
|||
font-weight: 400; |
|||
position: relative; |
|||
z-index: 2; |
|||
color: #fff; |
|||
-webkit-background-clip: text; |
|||
display: flex; |
|||
align-items: center; |
|||
.txt { |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
} |
|||
.no-bg { |
|||
background: none; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,369 @@ |
|||
<template> |
|||
<el-dialog |
|||
:before-close="handleClose" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:visible.sync="dialogVisible" |
|||
class="dissatisfied-detail" |
|||
title="" |
|||
width="1118px" |
|||
> |
|||
<div class="content"> |
|||
<div class="main-title main-title2"> |
|||
<Title text="社区自查报告详情"/> |
|||
</div> |
|||
<div class="content2"> |
|||
<div class="title-sub"> |
|||
<img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png"/> |
|||
不满意事项列表 |
|||
</div> |
|||
<div class="preface"> |
|||
<p>尊敬的居民朋友：</p> |
|||
<p class="indent-2"> |
|||
为了更好地推进社区工作，为您提供更全面、优质的社区服务，请您根据真实情况填写此表，我们将认真对待您提出的问题，并承诺对您提供的信息保密，感谢您的配合！</p> |
|||
</div> |
|||
|
|||
<div class="problem-list"> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">1、您对本社区的文化设施建设情况</div> |
|||
<el-radio-group disabled v-model.trim="detail.evaCulturalFacility"> |
|||
<el-radio label="veryGood">满意</el-radio> |
|||
<el-radio label="good">基本满意</el-radio> |
|||
<el-radio label="bad">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">1.1、您具体对哪些方面不满意？请详细说明原因。</div> |
|||
<el-radio-group disabled v-model.trim="detail.culturalFacilityAsp"> |
|||
<el-radio label="culturalFacilityAsp01">社区文化广场</el-radio> |
|||
<el-radio label="culturalFacilityAsp02">图书阅览室</el-radio> |
|||
<el-radio label="culturalFacilityAsp03">文艺演出</el-radio> |
|||
<el-radio label="culturalFacilityAsp04">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因: {{detail.culturalFacilityReason}}</div> |
|||
</div> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">2、您对本社区的体育健身设施、组织开展的健身活动、比赛等体育活动是否满意?</div> |
|||
<el-radio-group disabled v-model.trim="detail.evaSportsFacility"> |
|||
<el-radio label="veryGood">满意</el-radio> |
|||
<el-radio label="good">基本满意</el-radio> |
|||
<el-radio label="bad">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">2.1、您具体对哪些方面不满意？请详细说明原因。</div> |
|||
<el-radio-group disabled v-model.trim="detail.sportsFacilityAsp"> |
|||
<el-radio label="sportsFacilityAsp01">社区健身器材</el-radio> |
|||
<el-radio label="sportsFacilityAsp02">健身运动</el-radio> |
|||
<el-radio label="sportsFacilityAsp03">体育活动</el-radio> |
|||
<el-radio label="sportsFacilityAsp03">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因:{{detail.sportsFacilityReason}}</div> |
|||
</div> |
|||
<div class="problem-item"> |
|||
<div class="problem-title">3、您对本社区的幼儿园保育教育质量，小学/初中数学质量以及师德师风方面是否满意？</div> |
|||
<el-radio-group disabled v-model.trim=detail.evaBasicEducation> |
|||
<el-radio label="veryGood">满意</el-radio> |
|||
<el-radio label="good">基本满意</el-radio> |
|||
<el-radio label="bad">不满意</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因：{{detail.basicEducationReason}}</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">4、您对本社区的医疗机构便利程度、医务人员的服务态度是否满意？</div> |
|||
<el-radio-group disabled v-model.trim="detail.evaMedical"> |
|||
<el-radio label="veryGood">满意</el-radio> |
|||
<el-radio label="good">基本满意</el-radio> |
|||
<el-radio label="bad">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">4.1、您具体对哪些方面不满意？请详细说明原因。</div> |
|||
<el-radio-group disabled v-model.trim="detail.medicalAsp"> |
|||
<el-radio label="medicalAsp01">挂号缴费</el-radio> |
|||
<el-radio label="medicalAsp02">检查化验</el-radio> |
|||
<el-radio label="medicalAsp03">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因：{{detail.medicalReason}}</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">5、您对本社区的养老院建设和服务、居家社区养老服务等方面是否满意？</div> |
|||
<el-radio-group disabled v-model.trim="detail.evaOldPeopleProvide"> |
|||
<el-radio label="veryGood">满意</el-radio> |
|||
<el-radio label="good">基本满意</el-radio> |
|||
<el-radio label="bad">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">5.1、您具体对哪些方面不满意？请详细说明原因。</div> |
|||
<el-radio-group disabled v-model.trim="detail.oldPeopleProvideAsp"> |
|||
<el-radio label="oldPeopleProvideAsp01">社区老年人活动场所</el-radio> |
|||
<el-radio label="oldPeopleProvideAsp02">社区为老服务</el-radio> |
|||
<el-radio label="oldPeopleProvideAsp03">居家养老服务</el-radio> |
|||
<el-radio label="oldPeopleProvideAsp04">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因：{{detail.oldPeopleProvideReason}}</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">6、您对本社区的社会救助和服务态度以及困难家庭住房保障工作是否满意？</div> |
|||
<el-radio-group disabled v-model.trim="detail.evaSocialAssistance"> |
|||
<el-radio label="veryGood">满意</el-radio> |
|||
<el-radio label="good">基本满意</el-radio> |
|||
<el-radio label="bad">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">6.1、您具体对哪些方面不满意？请详细说明原因。</div> |
|||
<el-radio-group disabled v-model.trim="detail.socialAssistanceAsp"> |
|||
<el-radio label="socialAssistanceAsp01">低保、特困、残疾人保障办理便利程度</el-radio> |
|||
<el-radio label="socialAssistanceAsp02">临时救助申请办理便利程度</el-radio> |
|||
<el-radio label="socialAssistanceAsp03">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因：{{detail.socialAssistanceReason}}</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">7、您对本社区的空气质量、居住环境、道路情况、停车情况是否满意？</div> |
|||
<el-radio-group disabled v-model.trim="detail.evaEcologicalEnv"> |
|||
<el-radio label="veryGood">满意</el-radio> |
|||
<el-radio label="good">基本满意</el-radio> |
|||
<el-radio label="bad">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">7.1、您具体对哪些方面不满意？请详细说明原因。</div> |
|||
<el-radio-group disabled v-model.trim="detail.ecologicalEnvAsp"> |
|||
<el-radio label="ecologicalEnvAsp01">废气、异味、工地扬尘</el-radio> |
|||
<el-radio label="ecologicalEnvAsp02">楼院卫生</el-radio> |
|||
<el-radio label="ecologicalEnvAsp03">乱停车</el-radio> |
|||
<el-radio label="ecologicalEnvAsp04">占道经营</el-radio> |
|||
<el-radio label="ecologicalEnvAsp05">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因：{{detail.ecologicalEnvReason}}</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title"> |
|||
8、您对本社区的公安机关打击违法犯罪活动、开展巡逻执勤、维护治安秩序等安全防范工作方面是否满意？ |
|||
</div> |
|||
<el-radio-group disabled v-model.trim="detail.evaSocialSecurity"> |
|||
<el-radio label="veryGood">满意</el-radio> |
|||
<el-radio label="good">基本满意</el-radio> |
|||
<el-radio label="bad">不满意</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title"> |
|||
8、您对本社区的公安机关打击违法犯罪活动、开展巡逻执勤、维护治安秩序等安全防范工作方面是否满意？ |
|||
</div> |
|||
<el-radio-group disabled v-model.trim="detail.socialSecurityAsp"> |
|||
<el-radio label="socialSecurityAsp01">扫黑除恶</el-radio> |
|||
<el-radio label="socialSecurityAsp02">打击犯罪</el-radio> |
|||
<el-radio label="socialSecurityAsp03">保护人身财产安全</el-radio> |
|||
<el-radio label="socialSecurityAsp04">其他</el-radio> |
|||
</el-radio-group> |
|||
<div>不满意的原因：{{ detail.socialSecurityReason }}</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title"> |
|||
<div>9、您的姓名</div> |
|||
<div class="line">{{reporter.reporterName}}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title"> |
|||
<div>10、您的手机号</div> |
|||
<div class="line">{{reporter.reporterMobile}}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">11、您是否接受回访？</div> |
|||
<el-radio-group disabled v-model.trim="reporter.followUpStatus"> |
|||
<el-radio :label="-1">接受回访</el-radio> |
|||
<el-radio :label="1">不接受回访</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
|
|||
<div class="problem-item"> |
|||
<div class="problem-title">12、请选择合适您的回访方式</div> |
|||
<el-radio-group disabled v-model.trim="reporter.expectFollowUpWay"> |
|||
<el-radio label="1">电话回访</el-radio> |
|||
<el-radio label="2">工作人员上门回访</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<!-- <div class="problem-item"> |
|||
<div class="problem-title">请填写您在社区的家庭住址</div> |
|||
<div class="select"> |
|||
<el-select v-model.trim="value" class="select" filterable placeholder="选择所在小区" |
|||
popper-class="selectPopClass"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model.trim="value" class="select" filterable placeholder="楼栋" popper-class="selectPopClass"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model.trim="value" class="select" filterable placeholder="单元" popper-class="selectPopClass"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model.trim="value" class="select" filterable placeholder="门牌号" popper-class="selectPopClass"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="textarea"> |
|||
<el-input |
|||
:autosize="{ minRows: 5, maxRows: 10}" |
|||
placeholder="如以上选择无法找到您的家庭住址，可在这里填写。" |
|||
type="textarea" |
|||
/> |
|||
</div> |
|||
</div>--> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
|
|||
export default { |
|||
name: "dissatisfieReason", |
|||
components: {Title}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
radio: 3, |
|||
value: "", |
|||
options: [{ |
|||
label: '1', |
|||
value: 1 |
|||
}], |
|||
detail: {}, |
|||
reporter: {} |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleClose(done) { |
|||
this.dialogVisible = false; |
|||
}, |
|||
open(id) { |
|||
this.dialogVisible = true; |
|||
this.getDetail(id); |
|||
}, |
|||
getDetail(id) { |
|||
this.$http.get(`/governance/satisfaction/communitySelfInsp/inspResult/detail/${id}`).then(({data: {data}}) => { |
|||
this.detail = data.satisfaction || {} |
|||
this.reporter = data.reporter || {} |
|||
}) |
|||
|
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/dialog.scss"; |
|||
|
|||
.content2 { |
|||
padding: 42px 40px; |
|||
color: #fff; |
|||
} |
|||
|
|||
.indent-2 { |
|||
text-indent: 2em; |
|||
} |
|||
|
|||
.title-sub { |
|||
font-size: 18px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.problem-list { |
|||
font-size: 14px; |
|||
margin-top: 24px; |
|||
|
|||
.problem-item { |
|||
margin-bottom: 25px; |
|||
|
|||
.problem-title { |
|||
margin-bottom: 17px; |
|||
} |
|||
|
|||
.el-radio-group { |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/ .el-radio__label { |
|||
color: #fff !important; |
|||
} |
|||
|
|||
/deep/ .el-textarea__inner { |
|||
color: #fff; |
|||
border: 1px solid #0E3978; |
|||
border-radius: 2px; |
|||
background: rgba(0, 23, 66, 0.72); |
|||
} |
|||
|
|||
.el-select { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
.textarea { |
|||
width: 610px; |
|||
margin-top: 10px; |
|||
} |
|||
/deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner { |
|||
border-color: #0056d6!important; |
|||
background: #0056d6!important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,210 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-date-picker |
|||
v-model.trim="queryParams.period" |
|||
:append-to-body="false" |
|||
placeholder="按月度" |
|||
popper-class="date-current-weiyi" |
|||
size="small" |
|||
type="month" |
|||
value-format="yyyy-MM" |
|||
/> |
|||
<el-select |
|||
v-model.trim="queryParams.agencyId" |
|||
placeholder="按组织" |
|||
popper-class="selectPopClass" |
|||
size="small" |
|||
> |
|||
<el-option |
|||
v-for="item in orgOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-model.trim="queryParams.name" placeholder="不满意原因" size="small"></el-input> |
|||
<el-button class="btn" size="small" type="primary" @click="search">查询</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="table"> |
|||
<el-table v-loading="loading" :data="list" element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" element-loading-text="加载中..."> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
<el-table-column label="填写时间" prop="periodStart" width="130"/> |
|||
<el-table-column label="所属组织" prop="agencyName" width="118"/> |
|||
<el-table-column label="姓名" prop="reporterName"></el-table-column> |
|||
<el-table-column label="联系电话" prop="reporterMobile"> |
|||
<template slot-scope="scope"> |
|||
{{ $sensitive(scope.row.reporterMobile, 3, 7) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column :formatter="(row) => row.evaCulturalFacility === 'veryGood' ? '满意' : '不满意'" label="文化设施" prop="evaCulturalFacility" |
|||
width="150"/> |
|||
<el-table-column :formatter="(row) => row.evaSportsFacility === 'veryGood' ? '满意' : '不满意'" label="体育设施" prop="evaSportsFacility" |
|||
width="150"/> |
|||
<el-table-column :formatter="(row) => row.evaEcologicalEnv === 'veryGood' ? '满意' : '不满意'" label="生态环境" prop="evaEcologicalEnv" |
|||
width="150"/> |
|||
<el-table-column :formatter="(row) => row.evaSocialSecurity === 'veryGood' ? '满意' : '不满意'" label="社会治安" prop="evaSocialSecurity" |
|||
width="150"/> |
|||
<el-table-column :formatter="(row) => row.evaSocialAssistance === 'veryGood' ? '满意' : '不满意'" label="社会救助" prop="evaSocialAssistance" |
|||
width="150"/> |
|||
<el-table-column :formatter="(row) => row.evaOldPeopleProvide === 'veryGood' ? '满意' : '不满意'" label="老有所养" prop="evaOldPeopleProvide" |
|||
width="150"/> |
|||
<el-table-column :formatter="(row) => row.evaBasicEducation === 'veryGood' ? '满意' : '不满意'" label="基础教育" prop="evaBasicEducation" |
|||
width="150"/> |
|||
<el-table-column :formatter="(row) => row.evaMedical === 'veryGood' ? '满意' : '不满意'" label="病有所医" prop="evaMedical" |
|||
width="150"/> |
|||
<el-table-column align="center" label="详情" width="90"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<dissatisfieReasonDetail ref="detail" /> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import dissatisfieReasonDetail from "@/views/dataBoard/satisfactionEval/dissatisfieReason/detail.vue"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
export default { |
|||
name: "dissatisfied", |
|||
components: {Breadcrumb, Pagination, Title, dissatisfieReasonDetail}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
period: "", |
|||
agencyId: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "社区自查不满意原因列表 ", |
|||
}, |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return {label: index - 0 + 1 + "月", value: index - 0 + 1}; |
|||
}), |
|||
list: [{},{},{}], |
|||
title: "", |
|||
loading: true, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
let searchParams = this.$route.query.searchParams?JSON.parse(this.$route.query.searchParams):{}; |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getOrg(); |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
this.$http.get("/governance/satisfaction/communitySelfInsp/inspResult/list?" + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
getOrg() { |
|||
let params = { |
|||
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|||
level: this.$store.state.chooseArea.chooseName.level, |
|||
}; |
|||
this.$http.post(`/gov/org/agency/maporg`, params).then(async ({data: {data}}) => { |
|||
this.queryParams.agencyId = this.$store.state.chooseArea.chooseName.orgId; |
|||
let parent = {value: data.id, label: data.name}; |
|||
this.orgOptions = [ |
|||
parent, |
|||
...data.children.map((item) => { |
|||
return { |
|||
value: item.id, |
|||
label: item.name, |
|||
}; |
|||
}), |
|||
]; |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
timeChange(type) { |
|||
let startTime = "", |
|||
endTime = ""; |
|||
if (type == 1) { |
|||
startTime = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 3) { |
|||
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 4) { |
|||
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 5) { |
|||
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
endTime = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
return [startTime, endTime]; |
|||
}, |
|||
handleView({id}) { |
|||
this.id = id; |
|||
this.$refs.detail.open(id); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,234 @@ |
|||
<template> |
|||
<el-dialog |
|||
:before-close="handleClose" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:visible.sync="dialogVisible" |
|||
class="dissatisfied-detail" |
|||
title="" |
|||
width="1118px" |
|||
> |
|||
<div class="content"> |
|||
<div class="main-title main-title2"> |
|||
<Title text="不满意事项详情"/> |
|||
</div> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="10"> |
|||
<div class="sub-title">事项详情</div> |
|||
<div class="detail"> |
|||
<p> |
|||
{{ unsatisfiedMattersModel.reason }} |
|||
</p> |
|||
<ul> |
|||
<li> |
|||
<span>事项来源：</span |
|||
>{{ |
|||
satisfactionSourceOptions[ |
|||
unsatisfiedMattersModel.satisfactionSource |
|||
] |
|||
}} |
|||
</li> |
|||
<li> |
|||
<span>事项类型：</span |
|||
>{{ unsatisfiedMattersModel.satisfactionCategoryName }} |
|||
</li> |
|||
<li> |
|||
<span>所属月份：</span |
|||
>{{ unsatisfiedMattersModel.satisfactionCategoryName }} |
|||
</li> |
|||
<li> |
|||
<span>所属社区：</span |
|||
>{{ unsatisfiedMattersModel.organizationName }} |
|||
</li> |
|||
<li><span>提交人：</span>{{ unsatisfiedMattersModel.name }}</li> |
|||
<li> |
|||
<span>提交人电话：</span>{{ unsatisfiedMattersModel.mobile }} |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</el-col> |
|||
<el-col :offset="4" :span="10"> |
|||
<!-- <div class="sub-title">历史不满意事项</div> |
|||
<div class="number-list"> |
|||
<div class="number-item"> |
|||
<div class="text">12345投诉</div> |
|||
<div class="num"> |
|||
<span class="orange">{{ |
|||
unsatisfiedHisCount.satisfaction_12345 |
|||
}}</span> |
|||
人 |
|||
</div> |
|||
</div> |
|||
<div class="number-item"> |
|||
<div class="text">省满意度调查</div> |
|||
<div class="num"> |
|||
<span class="green">{{ |
|||
unsatisfiedHisCount.satisfaction_province |
|||
}}</span> |
|||
人 |
|||
</div> |
|||
</div> |
|||
<div class="number-item"> |
|||
<div class="text">社区满意度自评</div> |
|||
<div class="num"> |
|||
<span class="light">{{ |
|||
unsatisfiedHisCount.satisfaction_community |
|||
}}</span> |
|||
人 |
|||
</div> |
|||
</div> |
|||
</div>--> |
|||
<div class="sub-title">回访记录</div> |
|||
<div class="log"> |
|||
<div |
|||
v-for="(item, index) in followUpRecordDetails" |
|||
class="log-item" |
|||
> |
|||
<div class="name"> |
|||
{{ item.followUpUser }}（{{ item.roleName }}） |
|||
</div> |
|||
<div>{{ item.followUpDate }}</div> |
|||
<div> |
|||
{{ item.followUpWay }} <i class="el-icon-arrow-right"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
export default { |
|||
name: "DissatisfiedDetail", |
|||
components: {Title}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
unsatisfiedMattersModel: "", |
|||
unsatisfiedHisCount: "", |
|||
followUpRecordDetails: "", |
|||
satisfactionSourceOptions: { |
|||
satisfaction_12345: "12345投诉", |
|||
satisfaction_province: "省满意度调查", |
|||
satisfaction_community: "社区满意度自查", |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleClose(done) { |
|||
this.dialogVisible = false; |
|||
}, |
|||
open(id) { |
|||
this.dialogVisible = true; |
|||
this.getDetail(id); |
|||
}, |
|||
getDetail(id) { |
|||
this.$http |
|||
.post( |
|||
"/governance/satisfactionDetailList/getUnsatisfiedMattersDetailInfo", |
|||
{id:id, |
|||
satisfactionSource:'satisfaction_province' |
|||
} |
|||
) |
|||
.then(({data: {data}}) => { |
|||
this.unsatisfiedMattersModel = data.unsatisfiedMattersModel || {}; |
|||
// this.unsatisfiedHisCount = data.unsatisfiedHisCount; |
|||
this.followUpRecordDetails = data.followUpRecordDetails || []; |
|||
if (this.unsatisfiedMattersModel.satisfactionSource) { |
|||
this.unsatisfiedMattersModel.satisfactionSource = |
|||
satisfactionSourceOptions.filter( |
|||
(item) => |
|||
item.value === this.unsatisfiedMattersModel.satisfactionSource |
|||
)[0].label; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/dialog.scss"; |
|||
.content { |
|||
padding: 0 64px; |
|||
} |
|||
.main-title { |
|||
margin-bottom: 40px; |
|||
} |
|||
.sub-title { |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
line-height: 22px; |
|||
margin-bottom: 14px; |
|||
padding-left: 26px; |
|||
color: #ffffff; |
|||
background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center; |
|||
} |
|||
.detail { |
|||
p { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
line-height: 32px; |
|||
margin: 0 0 10px; |
|||
color: #ffffff; |
|||
} |
|||
ul { |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style-type: none; |
|||
} |
|||
li { |
|||
line-height: 32px; |
|||
color: #ffffff; |
|||
span { |
|||
color: #9cb4d3; |
|||
} |
|||
} |
|||
} |
|||
.number-list { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 30px; |
|||
padding-left: 26px; |
|||
.text { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
margin-bottom: 17px; |
|||
color: #a3b9da; |
|||
} |
|||
.num { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #a3b9da; |
|||
span { |
|||
font-size: 32px; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
} |
|||
} |
|||
} |
|||
.orange { |
|||
color: #ffb73c; |
|||
} |
|||
.green { |
|||
color: #08ebae; |
|||
} |
|||
.light { |
|||
color: #7fceff; |
|||
} |
|||
.log { |
|||
padding-left: 26px; |
|||
.log-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
padding: 9px 0; |
|||
color: #fff; |
|||
background: url("@/assets/images/manyidu/hf_line.png") bottom center no-repeat; |
|||
.name { |
|||
flex: 0 0 33.33333%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,312 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList" /> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-date-picker v-if="!hideSearch" size="small" popper-class="date-current-weiyi" :append-to-body="false" v-model.trim="queryParams.month" type="month" value-format="yyyy-MM" placeholder="按月度"> </el-date-picker> |
|||
<el-select v-if="!hideSearch" popper-class="selectPopClass" v-model.trim="queryParams.agencyId" size="small" placeholder="按组织"> |
|||
<el-option v-for="item in orgOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|||
</el-select> |
|||
<el-select class="searchSelect" popper-class="selectPopClass" clearable collapse-tags multiple v-model.trim="queryParams.satisfactionSource" size="small" placeholder="按不满意事项来源" @change="getSatisfactionCategoryOptions"> |
|||
<el-option v-for="item in satisfactionSourceOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|||
</el-select> |
|||
<el-select popper-class="selectPopClass" clearable v-model.trim="queryParams.satisfactionCategory" size="small" placeholder="按不满意事项类型"> |
|||
<el-option v-for="item in satisfactionCategoryOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|||
</el-select> |
|||
<el-input v-model.trim="queryParams.name" size="small" placeholder="按人员姓名"></el-input> |
|||
<el-input v-model.trim="queryParams.mobile" size="small" placeholder="按人员电话"></el-input> |
|||
<el-button size="small" class="btn" type="primary" @click="search">查询</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="table"> |
|||
<el-table :data="list" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.5)"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column prop="month" label="月度" width="114" /> |
|||
<el-table-column prop="organizationName" width="118" label="所属社区" /> |
|||
<el-table-column prop="satisfactionSource" width="168" label="事项来源"> |
|||
<template slot-scope="{ row }"> |
|||
<span |
|||
:style="{ |
|||
color: satisfactionSourceFormat(row.satisfactionSource).color, |
|||
}"> |
|||
{{ satisfactionSourceFormat(row.satisfactionSource).label }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="satisfactionCategoryName" width="150" label="事项类型" /> |
|||
<el-table-column prop="reason" show-overflow-tooltip label="事项描述" /> |
|||
<el-table-column prop="createdTime" width="197" label="提交时间" /> |
|||
<el-table-column prop="name" width="119" label="姓名" /> |
|||
<el-table-column prop="mobile" width="153" label="电话" /> |
|||
<el-table-column prop="completeFlag" width="118px" label="是否完成"> |
|||
<template slot-scope="{ row }"> |
|||
<span :class="row.completeFlag === '是' ? 'light' : 'red'"> |
|||
{{ row.completeFlag }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="followUpStatus" width="118px" label="是否回访"> |
|||
<template slot-scope="{ row }"> |
|||
<span :class="row.followUpStatus === '是' ? 'light' : 'red'"> |
|||
{{ row.followUpStatus }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dangerFlag" width="118px" label="消除风险"> |
|||
<template slot-scope="{ row }"> |
|||
<span :class="row.dangerFlag === '是' ? 'light' : 'red'"> |
|||
{{ row.dangerFlag }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<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> |
|||
</div> |
|||
<Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" /> |
|||
<DissatisfiedDetail ref="detail" :id="id" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import DissatisfiedDetail from "./detail.vue"; |
|||
export default { |
|||
name: "dissatisfiedPage", |
|||
components: { Breadcrumb, DissatisfiedDetail, Pagination }, |
|||
data() { |
|||
return { |
|||
hideSearch: false, |
|||
queryParams: { |
|||
month: "", |
|||
agencyId: "", |
|||
satisfactionSource: [], |
|||
satisfactionCategory: "", |
|||
name: "", |
|||
mobile: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
id: {}, |
|||
total: 0, |
|||
timeRange: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "不满意事项列表", |
|||
}, |
|||
], |
|||
orgOptions: [], |
|||
satisfactionCategoryOptions: [], |
|||
list: [], |
|||
satisfactionSourceOptions: [ |
|||
{ |
|||
value: "satisfaction_12345", |
|||
label: "12345投诉", |
|||
color: "#FFB73C", |
|||
}, |
|||
{ |
|||
value: "satisfaction_province", |
|||
label: "省满意度调查", |
|||
color: "#64C1FF", |
|||
}, |
|||
{ |
|||
value: "satisfaction_community", |
|||
label: "社区满意度自查", |
|||
color: "#08EBAE", |
|||
}, |
|||
], |
|||
loading: true, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getOldPageParamsData(); |
|||
this.getOrg(); |
|||
}, |
|||
methods: { |
|||
getOldPageParamsData() { |
|||
const { id, timeType } = this.$route.params; |
|||
let satisSourceArr = []; |
|||
if (id == 1) { |
|||
satisSourceArr = ["satisfaction_province", "satisfaction_community"]; |
|||
} else if (id == 2) { |
|||
satisSourceArr = ["satisfaction_12345"]; |
|||
} |
|||
this.queryParams.satisfactionSource = satisSourceArr; |
|||
if (this.queryParams.satisfactionSource.length > 0) { |
|||
this.getSatisfactionCategoryOptions(); |
|||
} |
|||
if (timeType != 0) { |
|||
this.hideSearch = true; |
|||
this.timeRange = this.timeChange(timeType); |
|||
this.queryParams.startTime = this.timeRange[0]; |
|||
this.queryParams.endTime = this.timeRange[1]; |
|||
this.queryParams.month = ""; |
|||
} else { |
|||
this.hideSearch = false; |
|||
} |
|||
}, |
|||
getSatisfactionCategoryOptions() { |
|||
this.queryParams.satisfactionCategory = ""; |
|||
if (!this.queryParams.satisfactionSource) { |
|||
this.satisfactionCategoryOptions = []; |
|||
return; |
|||
} |
|||
const satisfactionSource = this.queryParams.satisfactionSource.toString(); |
|||
this.$http.get("/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource=" + satisfactionSource).then(({ data: { data } }) => { |
|||
this.satisfactionCategoryOptions = data.map((item) => { |
|||
return { |
|||
label: item.categoryName, |
|||
value: item.categoryCode, |
|||
}; |
|||
}); |
|||
this.queryParams.satisfactionCategory = this.$route.params.type == 0 ? "" : this.$route.params.type; |
|||
}); |
|||
}, |
|||
satisfactionSourceFormat(val) { |
|||
let satisfactionSource = this.satisfactionSourceOptions.filter((item) => item.value === val)[0]; |
|||
return satisfactionSource ? satisfactionSource : ""; |
|||
}, |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
this.$http.get("/governance/satisfactionDetailList/getUnsatisfiedMattersList?" + this.$paramsFormat(this.queryParams)).then(({ data: { data } }) => { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
getOrg() { |
|||
let params = { |
|||
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|||
level: this.$store.state.chooseArea.chooseName.level, |
|||
}; |
|||
this.$http.post(`/gov/org/agency/maporg`, params).then(async ({ data: { data } }) => { |
|||
this.queryParams.agencyId = this.$store.state.chooseArea.chooseName.orgId; |
|||
let parent = { value: data.id, label: data.name }; |
|||
this.orgOptions = [ |
|||
parent, |
|||
...data.children.map((item) => { |
|||
return { |
|||
value: item.id, |
|||
label: item.name, |
|||
}; |
|||
}), |
|||
]; |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
timeChange(type) { |
|||
let startTime = "", |
|||
endTime = ""; |
|||
if (type == 1) { |
|||
startTime = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 3) { |
|||
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 4) { |
|||
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 5) { |
|||
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
endTime = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
return [startTime, endTime]; |
|||
}, |
|||
handleView(id) { |
|||
this.id = id; |
|||
this.$refs.detail.open(id); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
/deep/ .el-input__inner { |
|||
background: none; |
|||
border: none; |
|||
color: #fff; |
|||
} |
|||
} |
|||
.searchSelect { |
|||
width: 200px; |
|||
/deep/ .el-select__tags { |
|||
width: 200px !important; |
|||
max-width: 200px !important; |
|||
} |
|||
} |
|||
.btn { |
|||
margin-left: 46px; |
|||
height: 32px; |
|||
} |
|||
} |
|||
.orange { |
|||
color: #ffb73c; |
|||
} |
|||
.blue { |
|||
color: #64c1ff; |
|||
} |
|||
.green { |
|||
color: #08ebae; |
|||
} |
|||
.light { |
|||
color: #3cf5ff; |
|||
} |
|||
.red { |
|||
color: #f95619; |
|||
} |
|||
::v-deep .date-current-weiyi { |
|||
background: rgba(3, 19, 51, 0.9); |
|||
border-color: #006cff; |
|||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1); |
|||
.el-date-picker__header-label { |
|||
color: #ffffff; |
|||
} |
|||
.el-picker-panel__icon-btn { |
|||
color: #ffffff; |
|||
} |
|||
.el-month-table { |
|||
td { |
|||
.cell { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
.el-month-table td.current:not(.disabled) .cell { |
|||
color: #fff; |
|||
background-color: #409eff; |
|||
} |
|||
.el-month-table td.today:not(.disabled) .cell { |
|||
color: #0056d6; |
|||
} |
|||
.el-date-picker__header--bordered { |
|||
border-bottom: solid 1px #006cff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,51 @@ |
|||
<template> |
|||
<div> |
|||
<div class="breadcrumb"> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
</div> |
|||
<Personnel/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb' |
|||
import Personnel from '@/views/dataBoard/cpts/personnel' |
|||
export default { |
|||
name: "dissatisfiedPersonnelDetail", |
|||
components: { |
|||
Breadcrumb, |
|||
Personnel |
|||
}, |
|||
data() { |
|||
return { |
|||
breadcrumbList: [{ |
|||
path: '/dataBoard/satisfactionEval/index', |
|||
name: '满意度评价' |
|||
}, { |
|||
path: '/dataBoard/satisfactionEval/dissatisfiedPersonnel', |
|||
name: '画像匹配同类潜在不满意人员 ' |
|||
}, { |
|||
path: '', |
|||
name: '' |
|||
}], |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$set(this.breadcrumbList[2], 'name', this.$route.query.name) |
|||
this.breadcrumbList[2].name = this.$route.query.name |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.sub-title { |
|||
background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center; |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
line-height: 22px; |
|||
padding-left: 26px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.breadcrumb { |
|||
margin-bottom: 25px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,140 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList" /> |
|||
<!-- <div class="main-title"> |
|||
<Title :text="`“${title}”画像匹配同类潜在不满意人员 `" noBg/> |
|||
</div>--> |
|||
<div class="table"> |
|||
<el-table :data="list" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.5)"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
|
|||
<el-table-column prop="gridName" width="118" label="所属组织" /> |
|||
|
|||
<el-table-column prop="restName" label="姓名"></el-table-column> |
|||
|
|||
<el-table-column prop="mobile" label="电话"> |
|||
<template slot-scope="scope"> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="categoryNames" label="人员性质" /> |
|||
|
|||
<el-table-column prop="gender" label="性别"> |
|||
<template slot-scope="{ row }"> |
|||
{{ row.gender === "1" ? "男" : row.gender === "2" ? "女" : row.gender === "0" ? "未知" : "" }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="age" label="年龄" /> |
|||
|
|||
<el-table-column prop="cultureName" label="学历" /> |
|||
|
|||
<el-table-column prop="marriageName" label="婚姻" /> |
|||
|
|||
<el-table-column prop="monthIncomeLevel" label="月收入" /> |
|||
|
|||
<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> |
|||
</div> |
|||
|
|||
<Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
|
|||
export default { |
|||
name: "dissatisfied", |
|||
components: { Breadcrumb, Pagination, Title }, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "画像匹配同类潜在不满意人员 ", |
|||
}, |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return { label: index - 0 + 1 + "月", value: index - 0 + 1 }; |
|||
}), |
|||
list: [], |
|||
title: "", |
|||
loading: true, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.loading = true; |
|||
this.$http.get("/governance/satisfactionOverview/satisfactionCrowdList?" + this.$paramsFormat(this.queryParams)).then(({ data: { data } }) => { |
|||
this.list = data.list; |
|||
this.total = data.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
handleView({ restName, restId }) { |
|||
this.$router.push("/dataBoard/satisfactionEval/dissatisfiedPersonnel/detail?name=" + restName + "&user_id=" + restId); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
|
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
|
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
background: none; |
|||
border: none; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
margin-left: 46px; |
|||
height: 32px; |
|||
} |
|||
} |
|||
|
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
|
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -1,15 +1,158 @@ |
|||
<template> |
|||
<div> |
|||
我是恒安治 |
|||
<div class="satisfaction-eval"> |
|||
<el-row :gutter="15"> |
|||
<el-col :span="8" class=""> |
|||
<div class="bgImg"> |
|||
<Title text="12345数据分析" /> |
|||
<EventAnalysis /> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="bgImg"> |
|||
<Title text="12345投诉事件数" /> |
|||
<ComplaintIncident /> |
|||
</div> |
|||
<div class="bgImg"> |
|||
<Title text="各新村12345投诉人数"> |
|||
<el-date-picker size="small" popper-class="date-current-weiyi" :append-to-body="false" |
|||
v-model.trim="scoreMonth" type="month" value-format="yyyy-MM-dd" value="yyyy-MM" placeholder="按月度" |
|||
style="width: 118px" :picker-options="pickerOptions" /> |
|||
</Title> |
|||
<ComplaintPeople :date="scoreMonth" /> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="bgImg"> |
|||
<Title text="12345热线类型分析"/> |
|||
<TypesOfDissatisfaction/> |
|||
</div> |
|||
<div class="bgImg"> |
|||
<Title text="12345人员画像分析" /> |
|||
<PersonnelPortrait /> |
|||
</div> |
|||
<div class="bgImg"> |
|||
<Title text="潜在不满意人数" /> |
|||
<PotentialPeople :date="typeDate" /> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
import Title from "@/views/newDataBoard/hengAnZhi/components/Title/index.vue"; |
|||
import ComplaintIncident from "@/views/newDataBoard/hengAnZhi/modules/ComplaintIncident"; |
|||
import PersonnelPortrait from "@/views/newDataBoard/hengAnZhi/modules/PersonnelPortrait"; |
|||
import PotentialPeople from "@/views/newDataBoard/hengAnZhi/modules/PotentialPeople"; |
|||
import EventAnalysis from "@/views/newDataBoard/hengAnZhi/modules/EventAnalysis"; |
|||
import ComplaintPeople from "@/views/newDataBoard/hengAnZhi/modules/ComplaintPeople"; |
|||
import TypesOfDissatisfaction from "@/views/newDataBoard/hengAnZhi/modules/TypesOfDissatisfaction"; |
|||
export default { |
|||
name: "satisfactionEvaluation", |
|||
components: { |
|||
Title, |
|||
ComplaintIncident, |
|||
ComplaintPeople, |
|||
TypesOfDissatisfaction, |
|||
PersonnelPortrait, |
|||
PotentialPeople, |
|||
EventAnalysis, |
|||
}, |
|||
data() { |
|||
return { |
|||
typeDate: {}, |
|||
index: 0, |
|||
type: 0, |
|||
time: 0, |
|||
scoreMonth: this.$moment().add(-1, 'month').startOf("month").format("YYYY-MM-DD"), |
|||
pickerOptions: { |
|||
disabledDate: (time) => { |
|||
let month = this.$moment().add(-1, 'month').startOf("month").format("YYYY-MM-DD") |
|||
// return time.getTime() > Date.now() |
|||
return time.getTime() > new Date(month).getTime(); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
goToPage(url) { |
|||
this.$router.push(url); |
|||
}, |
|||
timeChange(date) { |
|||
this.typeDate = date; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped src="@/assets/scss/dataBoard/overview/index.scss" /> |
|||
<style lang="scss" scoped> |
|||
/deep/ .el-input__inner { |
|||
//width: 90px !important; |
|||
height: 24px !important; |
|||
color: #a0cdff; |
|||
border: 1px solid #125aaa !important; |
|||
border-radius: 12px !important; |
|||
background: #021c49 !important; |
|||
} |
|||
|
|||
/deep/ .el-input__icon { |
|||
line-height: 24px !important; |
|||
color: #a0cdff; |
|||
} |
|||
|
|||
.more { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
cursor: pointer; |
|||
color: #a0cdff; |
|||
} |
|||
|
|||
.bgImg { |
|||
margin-top: 5px; |
|||
background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
::v-deep .date-current-weiyi { |
|||
border-color: #006cff; |
|||
background: rgba(3, 19, 51, 0.9); |
|||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1); |
|||
|
|||
.el-date-picker__header-label { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.el-picker-panel__icon-btn { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.el-month-table { |
|||
td { |
|||
.cell { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-month-table td.current:not(.disabled) .cell { |
|||
color: #fff; |
|||
background-color: #409eff; |
|||
} |
|||
|
|||
.el-month-table td.today:not(.disabled) .cell { |
|||
color: #0056d6; |
|||
} |
|||
|
|||
.el-date-picker__header--bordered { |
|||
border-bottom: solid 1px #006cff; |
|||
} |
|||
|
|||
.el-month-table td.disabled .cell { |
|||
opacity: .5; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
/deep/ .title { |
|||
//padding-left: 58px; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<div class="self-trend" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0,0,0,0.5)"> |
|||
<div style="height: 250px;"> |
|||
<EChart :options="complaintOption" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import EChart from '@/components/EChart'; |
|||
import { requestGet } from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: "ComplaintIncident", |
|||
components: { EChart }, |
|||
data() { |
|||
return { |
|||
trendType: 1, |
|||
loading: false, |
|||
complaintOption: {}, |
|||
} |
|||
}, |
|||
watch: { |
|||
"$store.state.chooseArea.chooseName"(val) { |
|||
if (val.orgId) { |
|||
this.getData(); |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.$store.state.chooseArea.chooseName.orgId) { |
|||
this.getData(); |
|||
} |
|||
}, |
|||
methods: { |
|||
trendTypeChange(val) { |
|||
if (val !== this.trendType) { |
|||
this.trendType = val |
|||
this.getData() |
|||
} |
|||
}, |
|||
async getData() { |
|||
// this.loading = true |
|||
let params = { |
|||
level: this.$store.state.chooseArea.chooseName.level, |
|||
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|||
} |
|||
let url = '/governance/satisfactionOverview/notSatisfactionTrend' |
|||
const { data, code, msg } = await requestGet(url, params); |
|||
console.log('data======', data) |
|||
this.initCharts(); |
|||
}, |
|||
initCharts() { |
|||
this.complaintOption = { |
|||
backgroundColor: "transparent", |
|||
tooltip: { |
|||
show: false, |
|||
trigger: "axis" |
|||
}, |
|||
legend: { |
|||
top: 10, |
|||
textStyle: { |
|||
color: "#fff" |
|||
}, |
|||
data: ["12345投诉事件数"] |
|||
}, |
|||
grid: { |
|||
left: 50, |
|||
right: 20, |
|||
top: 40, |
|||
bottom: 50, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
boundaryGap: true, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#2c5a8d" |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: "#9ecbff", |
|||
rotate: 30 |
|||
}, |
|||
data: [ |
|||
"2025-02", "2025-03", "2025-04", "2025-05", |
|||
"2025-06", "2025-07", "2025-08", "2025-09", |
|||
"2025-10", "2025-11", "2025-12", "2026-01" |
|||
] |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
name: "单位：人", |
|||
nameTextStyle: { |
|||
color: "#9ecbff" |
|||
}, |
|||
axisLabel: { |
|||
color: "#9ecbff" |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
type: "dashed", |
|||
color: "#1f4c7a" |
|||
} |
|||
} |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
type: "bar", |
|||
data: new Array(12).fill(100), |
|||
barWidth: "60%", |
|||
silent: true, |
|||
itemStyle: { |
|||
color: "rgba(40,120,255,0.08)" |
|||
}, |
|||
z: 1 |
|||
}, |
|||
{ |
|||
name: "12345投诉事件数", |
|||
type: "line", |
|||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], |
|||
smooth: true, |
|||
symbol: "circle", |
|||
symbolSize: 8, |
|||
lineStyle: { |
|||
width: 2, |
|||
color: "#35f3ff" |
|||
}, |
|||
itemStyle: { |
|||
color: "#35f3ff", |
|||
borderColor: "#35f3ff" |
|||
}, |
|||
z: 2 |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.self-trend { |
|||
padding: 16px 16px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<div class="table" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0,0,0,0.5)"> |
|||
<el-table v-if="dataList.length" :data="dataList" height="578px" style="width: 90%; margin: auto;"> |
|||
<el-table-column label="新村名称" prop="name" align="center"></el-table-column> |
|||
<el-table-column label="不满意人数" prop="num" align="center"></el-table-column> |
|||
<el-table-column label="投诉次数" prop="count" align="center"></el-table-column> |
|||
</el-table> |
|||
<NoData v-else size="80"></NoData> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestGet } from "@/js/dai/request"; |
|||
import NoData from "@/views/newDataBoard/cpts/NoData"; |
|||
|
|||
export default { |
|||
name: "ComplaintPeople", |
|||
components: { |
|||
NoData |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
dataList: [] |
|||
} |
|||
}, |
|||
props: { |
|||
date: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
}, |
|||
watch: { |
|||
"$store.state.chooseArea.chooseName"(val) { |
|||
if (val.orgId) { |
|||
this.getList(); |
|||
} |
|||
}, |
|||
date() { |
|||
this.getList(); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
if (this.$store.state.chooseArea.chooseName.orgId) { |
|||
this.getList() |
|||
} |
|||
}, |
|||
methods: { |
|||
async getList() { |
|||
this.loading = true; |
|||
let url = '/governance/satisfaction/communitySelfInsp/satisfactionScore'; |
|||
let params = { |
|||
time: this.date, |
|||
agencyId: this.$store.state.chooseArea.chooseName.orgId |
|||
} |
|||
const { data, code, msg } = await requestGet(url, params) |
|||
console.log('data======', data); |
|||
this.dataList = data; |
|||
// this.dataList = [ |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// {name: 'xxx新村', num: 10, count: 20}, |
|||
// ] |
|||
this.loading = false; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table-border.scss"; |
|||
|
|||
.table { |
|||
padding: 10px; |
|||
} |
|||
|
|||
::v-deep .no-data { |
|||
height: 578px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,368 @@ |
|||
<template> |
|||
<div style="padding: 20px 10px;"> |
|||
<title-small text="同地点同类型事件重复投诉问题"> |
|||
<template v-slot:time> |
|||
<el-select v-model.trim="typeCondition1" class="select" placeholder="请选择" popper-class="selectPopClass" |
|||
@change="value => timeChange(value, 1)"> |
|||
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
</template> |
|||
<template v-slot:info> |
|||
<span class="infoColor" @click="$router.push('/dataBoard/satisfactionEval/Problem/tddtlxsj')"> |
|||
更多<i class="el-icon-arrow-right"></i> |
|||
</span> |
|||
</template> |
|||
</title-small> |
|||
<div class="t-list f-hflex"> |
|||
<div class="item f-flex header"> |
|||
<div>序号</div> |
|||
<div>地点</div> |
|||
<div>类型</div> |
|||
<div>投诉次数</div> |
|||
</div> |
|||
<div v-if="list.length > 0" class="list-con"> |
|||
<div v-if="list.length > 0" v-for="(item, index) in list" :key="index" :class="['item', 'f-flex']" |
|||
@click="goTddlxDetail(item)"> |
|||
<div>{{ index - 0 + 1 }}</div> |
|||
<div>{{ item.address }}</div> |
|||
<div>{{ item.categoryName }}</div> |
|||
<div>{{ item.amount }}</div> |
|||
</div> |
|||
</div> |
|||
<NoData v-else size="80" /> |
|||
</div> |
|||
<title-small text="同一人员重复投诉问题"> |
|||
<template v-slot:time> |
|||
<el-select v-model.trim="typeCondition2" class="select" placeholder="请选择" popper-class="selectPopClass" |
|||
@change="value => timeChange(value, 2)"> |
|||
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
</template> |
|||
<template v-slot:info> |
|||
<span class="infoColor" @click="$router.push('/dataBoard/satisfactionEval/Problem/tyry')"> |
|||
更多<i class="el-icon-arrow-right"></i> |
|||
</span> |
|||
</template> |
|||
</title-small> |
|||
<div class="t-list f-hflex"> |
|||
<div class="item f-flex header"> |
|||
<div>序号</div> |
|||
<div>联系方式</div> |
|||
<div>投诉次数</div> |
|||
</div> |
|||
<div v-if="list2.length > 0" class="list-con"> |
|||
<div v-for="(item, index) in list2" :key="index" class="item f-flex bto-border" v-if="list2.length > 0"> |
|||
<div>{{ index - 0 + 1 }}</div> |
|||
<div> |
|||
<template> |
|||
<el-button v-if="item.resiId !== null && item.resiId !== ''" @click="handleLook(item.resiId)" type="text" |
|||
size="small"> |
|||
{{ item.mobile }} |
|||
</el-button> |
|||
<span v-else> |
|||
{{ item.mobile }} |
|||
</span> |
|||
</template> |
|||
</div> |
|||
<div @click="goTryDetail(item)">{{ item.amount }}</div> |
|||
</div> |
|||
</div> |
|||
<NoData v-else size="80" /> |
|||
</div> |
|||
<title-small text="同一区域不同类型投诉问题"> |
|||
<template v-slot:time> |
|||
<el-select v-model.trim="typeCondition3" class="select" placeholder="请选择" popper-class="selectPopClass" |
|||
@change="value => timeChange(value, 3)"> |
|||
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" |
|||
:value="item.value"></el-option> |
|||
</el-select> |
|||
</template> |
|||
<template v-slot:info> |
|||
<span class="infoColor" @click="$router.push('/dataBoard/satisfactionEval/Problem/tyqybtlx')"> |
|||
更多<i class="el-icon-arrow-right"></i> |
|||
</span> |
|||
</template> |
|||
</title-small> |
|||
<div class="table"> |
|||
<el-table :data="data" :span-method="objectSpanMethod" height="300" @row-click="rowClick"> |
|||
<el-table-column align="center" label="序号" prop="number" width="80"> |
|||
<template slot-scope="{$index}"> |
|||
{{ $index - 0 + 1 }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="地点" prop="address"></el-table-column> |
|||
<el-table-column label="类型" prop="categoryName"></el-table-column> |
|||
<el-table-column label="投诉次数" prop="amount" width="120"></el-table-column> |
|||
<template #empty> |
|||
<NoData size="80" /> |
|||
</template> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue"; |
|||
import NoData from "@/views/newDataBoard/cpts/NoData"; |
|||
export default { |
|||
components: { |
|||
titleSmall, |
|||
NoData |
|||
}, |
|||
data() { |
|||
return { |
|||
typeCondition1: 5, |
|||
typeCondition2: 5, |
|||
typeCondition3: 5, |
|||
startTime: '', |
|||
endTime: '', |
|||
list: [], |
|||
typeConditionList: [ |
|||
{ |
|||
label: "本月", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "上月", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "近三月", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "近半年", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "近一年", |
|||
value: 5, |
|||
}, |
|||
], |
|||
list2: [], |
|||
data: [], |
|||
data1: [ |
|||
"number", |
|||
"address", |
|||
"categoryName", |
|||
"amount" |
|||
], |
|||
spanArr: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
}, |
|||
watch: { |
|||
"$store.state.chooseArea.chooseName"(val) { |
|||
if (val.orgId) { |
|||
this.timeChange(5, '') |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
if (this.$store.state.chooseArea.chooseName.orgId) { |
|||
this.timeChange(5, '') |
|||
} |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
objectSpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
if (columnIndex === 1) { |
|||
if (rowIndex > 0 && row.address === this.data[rowIndex - 1].address) { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0, |
|||
}; |
|||
} else { |
|||
let rowspan = 1; |
|||
for (let i = rowIndex + 1; i < this.data.length; i++) { |
|||
if (row.address === this.data[i].address) { |
|||
rowspan++; |
|||
} else { |
|||
break; |
|||
} |
|||
} |
|||
return { |
|||
rowspan, |
|||
colspan: 1, |
|||
}; |
|||
} |
|||
} |
|||
}, |
|||
timeChange(typeCondition, type) { |
|||
let startTime = "", |
|||
endTime = ""; |
|||
if (typeCondition === 1) { |
|||
startTime = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (typeCondition === 2) { |
|||
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (typeCondition === 3) { |
|||
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (typeCondition === 4) { |
|||
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (typeCondition === 5) { |
|||
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (typeCondition === 2) { |
|||
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
endTime = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
this.startTime = startTime; |
|||
this.endTime = endTime; |
|||
// this.getData(); |
|||
this.getList(type) |
|||
}, |
|||
getList(type) { |
|||
this.$http.post('/governance/dwdEvent/report', { |
|||
"queryDateStart": this.startTime, |
|||
"queryDateEnd": this.endTime |
|||
}).then(({ data: { data } }) => { |
|||
if (type === '' || type === 1) { |
|||
this.list = data ? data.addressEvent : [] || [] |
|||
} |
|||
if (type === '' || type === 2) { |
|||
this.list2 = data ? data.mobileEvent : [] || [] |
|||
} |
|||
if (type === '' || type === 3) { |
|||
this.data = data ? data.addressMobileEvents : [] || [] |
|||
} |
|||
}) |
|||
}, |
|||
rowClick({ address }) { |
|||
this.$router.push('/dataBoard/satisfactionEval/Problem/tyqybtlx/detail?address=' + address) |
|||
}, |
|||
goTddlxDetail(row) { |
|||
let params = { |
|||
recId: row.categoryId, |
|||
address: row.address |
|||
} |
|||
this.$router.push('/dataBoard/satisfactionEval/Problem/tddtlxsj/detail?' + this.$paramsFormat(params)) |
|||
}, |
|||
goTryDetail(row) { |
|||
this.$router.push('/dataBoard/satisfactionEval/Problem/tyry/detail?mobile=' + row.mobile) |
|||
}, |
|||
// 查看 |
|||
handleLook(resiId) { |
|||
this.$router.push({ |
|||
path: "/dataBoard/overview/resident", |
|||
query: { |
|||
user_id: resiId, |
|||
type: 'renfang' |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
<style lang='scss' scoped> |
|||
@import "@/assets/scss/dataBoard/table-border.scss"; |
|||
|
|||
.infoColor { |
|||
color: #A3B9DA; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.h150 { |
|||
height: 150px; |
|||
} |
|||
|
|||
.h200 { |
|||
height: 200px; |
|||
} |
|||
|
|||
.f-hflex { |
|||
width: 83px; |
|||
} |
|||
|
|||
.f-flex { |
|||
margin-top: 4px; |
|||
} |
|||
|
|||
.f-darkGray { |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
.t-list { |
|||
position: relative; |
|||
flex: 1; |
|||
width: 100%; |
|||
margin-bottom: 20px; |
|||
margin-top: 15px; |
|||
|
|||
.item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
height: 40px; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
background: #0a2a5c; |
|||
|
|||
div { |
|||
overflow: hidden; |
|||
flex: 1; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
|
|||
&:last-child { |
|||
flex: 0 0 80px; |
|||
} |
|||
|
|||
&:first-child { |
|||
flex: 0 0 50px; |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
color: #02fcff; |
|||
box-shadow: 0 0 10px #38b2ff, 0 0 5px #38b2ff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bto-border { |
|||
height: 1px; |
|||
color: #FFFFFF !important; |
|||
border-bottom: 1px solid; |
|||
border-image: linear-gradient(to right, #1c3e69 0%, #4eafd5 50%, #1c3e69 100%); |
|||
border-image-slice: 1; |
|||
background: none !important; |
|||
|
|||
&:hover { |
|||
box-sizing: unset !important; |
|||
} |
|||
} |
|||
|
|||
.header { |
|||
color: #A3B9DA !important; |
|||
background: none !important; |
|||
|
|||
&:hover { |
|||
box-sizing: unset !important; |
|||
} |
|||
} |
|||
|
|||
.list-con { |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
height: 100px; |
|||
} |
|||
|
|||
.no-data { |
|||
height: 167px; |
|||
} |
|||
|
|||
.select { |
|||
width: 100px; |
|||
} |
|||
|
|||
.table { |
|||
margin-top: 10px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,479 @@ |
|||
<template> |
|||
<div class="personnel-portrait" v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.5)"> |
|||
<div class="screen"> |
|||
<div class="txt">已有不满意人群画像</div> |
|||
<!-- <el-select v-if="resultType == 'provinceAndSelf'" v-model.trim="typeCondition" @change="getData" placeholder="请选择" class="select" popper-class="selectPopClass"> |
|||
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> </el-option> |
|||
</el-select> --> |
|||
</div> |
|||
<div class="portrait"> |
|||
<div class="tag yellow" v-if="gridName"> |
|||
<div :class="[gridName.length > 5 ? 'smallSize' : '', 'text']"> |
|||
{{ gridName }} |
|||
</div> |
|||
</div> |
|||
<div class="tag blue" v-if="ageClassification"> |
|||
<div :class="[ageClassification.length > 5 ? 'smallSize' : '', 'text']"> |
|||
{{ ageClassification }} |
|||
</div> |
|||
</div> |
|||
<div class="tag red" :key="index" |
|||
v-for="(residentTag,index) in residentTagArray" |
|||
> |
|||
<div :class="[residentTag.length > 5 ? 'smallSize' : '', 'text']"> |
|||
{{ residentTag }} |
|||
</div> |
|||
</div> |
|||
<div class="tag green" v-if="service"> |
|||
<div :class="[service.length > 5 ? 'smallSize' : '', 'text']"> |
|||
{{ service }} |
|||
</div> |
|||
</div> |
|||
<div class="tag light" v-if="monthIncomeLevel"> |
|||
<div :class="[monthIncomeLevel.length > 5 ? 'smallSize' : '', 'text']"> |
|||
{{ monthIncomeLevel }} |
|||
</div> |
|||
</div> |
|||
<div class="tag green" v-if="cultureName"> |
|||
<div :class="[cultureName.length > 5 ? 'smallSize' : '', 'text']"> |
|||
{{ cultureName }} |
|||
</div> |
|||
</div> |
|||
<div class="tag orange" v-if="marriageName"> |
|||
<div :class="[marriageName.length > 5 ? 'smallSize' : '', 'text']"> |
|||
{{ marriageName }} |
|||
</div> |
|||
</div> |
|||
<div class="tag purple" v-if="gender"> |
|||
<div class="text"> |
|||
{{ gender === "1" ? "男" : gender === "2" ? "女" : gender === "0" ? "未知" : "" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="portrait1"> |
|||
<img class="daqipao qipao1" src="@/assets/images/overview/qipao.png" /> |
|||
<img class="xiaoqipao qipao2" src="@/assets/images/overview/qipao-xiao.png" /> |
|||
<img class="daqipao qipao3" src="@/assets/images/overview/qipao.png" /> |
|||
<img class="xiaoqipao qipao4" src="@/assets/images/overview/qipao-xiao.png" /> |
|||
<img class="daqipao qipao5" src="@/assets/images/overview/qipao.png" /> |
|||
<img class="xiaoqipao qipao6" src="@/assets/images/overview/qipao-xiao.png" /> |
|||
<img class="daqipao qipao7" src="@/assets/images/overview/qipao.png" /> |
|||
<img class="xiaoqipao qipao8" src="@/assets/images/overview/qipao-xiao.png" /> |
|||
</div> |
|||
<div style="display: flex"> |
|||
<div class="btn" @click="gotopage"> |
|||
<div> |
|||
按画像匹配到潜在不满意人员：<span> |
|||
<b>{{ matchPeopleNum ? matchPeopleNum : 0 }}</b |
|||
>人</span |
|||
> |
|||
</div> |
|||
<i class="el-icon-arrow-right"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestGet } from "@/js/dai/request"; |
|||
export default { |
|||
name: "PersonnelPortrait", |
|||
components: { }, |
|||
data() { |
|||
return { |
|||
resultType: "provinceAndSelf", |
|||
typeCondition: "", |
|||
typeConditionList: [], |
|||
gender: "", |
|||
marriageName: "", |
|||
ageClassification: "", |
|||
cultureName: "", |
|||
gridName: "", |
|||
service: "", |
|||
monthIncomeLevel: "", |
|||
residentTagArray:[], |
|||
matchPeopleNum: 0, |
|||
searchParams: "", |
|||
loading: true, |
|||
}; |
|||
}, |
|||
watch: { |
|||
"$store.state.chooseArea.chooseName"(val) { |
|||
if (val.orgId) { |
|||
// this.getDisKey() |
|||
this.getData(); |
|||
} |
|||
}, |
|||
typeCondition(val) { |
|||
if (val) { |
|||
this.gender = ""; |
|||
this.marriageName = ""; |
|||
this.ageClassification = ""; |
|||
this.cultureName = ""; |
|||
this.gridName = ""; |
|||
this.service = ""; |
|||
this.monthIncomeLevel = ""; |
|||
this.residentTagArray = []; |
|||
this.matchPeopleNum = 0; |
|||
this.typeCondition = val; |
|||
this.getData(); |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getDisKey(); |
|||
if (this.$store.state.chooseArea.chooseName.orgId) { |
|||
this.getData(); |
|||
} |
|||
}, |
|||
methods: { |
|||
resultTypeChange(val) { |
|||
this.resultType = val; |
|||
this.getData(); |
|||
}, |
|||
gotopage() { |
|||
this.$router.push("/dataBoard/satisfactionEval/dissatisfiedPersonnel?searchParams=" + this.searchParams); |
|||
}, |
|||
getDisKey() { |
|||
this.$http.post("/sys/dict/data/dictlist", { dictType: "satisfaction_category" }).then(({ data: { data } }) => { |
|||
this.typeCondition = data[0].value; |
|||
this.typeConditionList = data; |
|||
}); |
|||
}, |
|||
getData() { |
|||
this.loading = false; |
|||
let params = { |
|||
level: this.$store.state.chooseArea.chooseName.level, |
|||
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|||
queryType: this.resultType, |
|||
category: this.resultType == "provinceAndSelf" ? this.typeCondition : null, |
|||
}; |
|||
this.$http.get("/governance/satisfactionOverview/satisfactionCrowdPortrait?" + this.$paramsFormat(params)).then(({ data: { data } }) => { |
|||
this.gender = data.gender; |
|||
this.marriageName = data.marriageName; |
|||
this.ageClassification = data.ageClassification; |
|||
this.cultureName = data.cultureName; |
|||
this.gridName = data.gridName; |
|||
this.service = data.service; |
|||
this.monthIncomeLevel = data.monthIncomeLevel; |
|||
this.residentTagArray = []; |
|||
if(data.residentTagName){ |
|||
this.residentTagArray = data.residentTagName.split(","); |
|||
} |
|||
this.matchPeopleNum = data.matchPeopleNum; |
|||
this.loading = false; |
|||
this.searchParams = JSON.stringify({ ...data, ...params }); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
$yellow: #ef9700; |
|||
$blue: #1a95ff; |
|||
$red: #ee3030; |
|||
$light: #2ab6be; |
|||
$green: #1b7d47; |
|||
$orange: #f95619; |
|||
$purple: #6642fd; |
|||
$purple2: #db42fd; |
|||
$green2: #58cc32; |
|||
.personnel-portrait { |
|||
padding: 16px; |
|||
} |
|||
.screen { |
|||
display: flex; |
|||
align-items: center; |
|||
.txt { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
margin-right: 25px; |
|||
} |
|||
/deep/ .el-input__inner { |
|||
width: 110px !important; |
|||
height: 24px !important; |
|||
background: #021c49 !important; |
|||
border: 1px solid #125aaa !important; |
|||
border-radius: 12px !important; |
|||
color: #a0cdff; |
|||
} |
|||
/deep/ .el-input__icon { |
|||
line-height: 24px !important; |
|||
color: #a0cdff; |
|||
} |
|||
} |
|||
.portrait1 { |
|||
width: 500px; |
|||
height: 345px; |
|||
margin-top: -345px; |
|||
padding-left: 80px; |
|||
overflow: hidden; |
|||
img { |
|||
margin: 30px; |
|||
} |
|||
.daqipao { |
|||
width: 8px; |
|||
height: 48px; |
|||
} |
|||
.xiaoqipao { |
|||
width: 8px; |
|||
height: 34px; |
|||
} |
|||
.qipao1 { |
|||
animation: scrollmyd 5s linear infinite; |
|||
} |
|||
.qipao2 { |
|||
animation: scrollmyd1 7s linear infinite; |
|||
} |
|||
.qipao3 { |
|||
animation: scrollmyd 6s linear infinite; |
|||
} |
|||
.qipao4 { |
|||
animation: scrollmyd1 8s linear infinite; |
|||
} |
|||
.qipao5 { |
|||
animation: scrollmyd 5s linear infinite; |
|||
} |
|||
.qipao6 { |
|||
animation: scrollmyd1 7s linear infinite; |
|||
} |
|||
.qipao7 { |
|||
animation: scrollmyd 4s linear infinite; |
|||
} |
|||
.qipao8 { |
|||
animation: scrollmyd1 6s linear infinite; |
|||
} |
|||
} |
|||
@keyframes scrollmyd { |
|||
0% { |
|||
transform: translatey(700%); |
|||
} |
|||
100% { |
|||
transform: translatey(-200%); |
|||
} |
|||
} |
|||
@keyframes scrollmyd1 { |
|||
0% { |
|||
transform: translatey(900%); |
|||
} |
|||
100% { |
|||
transform: translatey(-200%); |
|||
} |
|||
} |
|||
.portrait { |
|||
width: 388px; |
|||
height: 310px; |
|||
position: relative; |
|||
background: url("@/assets/images/manyidu/hx_bg.png") no-repeat center 80px; |
|||
background-size: 234px 186px; |
|||
margin: 0 auto; |
|||
cursor: pointer; |
|||
.tag { |
|||
position: absolute; |
|||
width: 76px; |
|||
height: 76px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.text { |
|||
width: 60px; |
|||
height: 60px; |
|||
top: 0; |
|||
left: 0; |
|||
color: #fff; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
} |
|||
.smallSize { |
|||
font-size: 10px; |
|||
} |
|||
&:after { |
|||
content: ""; |
|||
opacity: 0.3; |
|||
display: block; |
|||
width: 76px; |
|||
height: 76px; |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
} |
|||
&:nth-of-type(3) { |
|||
left: 162px; |
|||
top: 0; |
|||
.text { |
|||
background: $yellow; |
|||
} |
|||
&:after { |
|||
background: $yellow; |
|||
} |
|||
} |
|||
&:nth-of-type(5) { |
|||
left: 323px; |
|||
top: 107px; |
|||
.text { |
|||
background: $blue; |
|||
} |
|||
&:after { |
|||
background: $blue; |
|||
} |
|||
} |
|||
&:nth-of-type(2) { |
|||
left: 316px; |
|||
top: 203px; |
|||
.text { |
|||
background: $red; |
|||
} |
|||
&:after { |
|||
background: $red; |
|||
} |
|||
} |
|||
&:nth-of-type(6) { |
|||
left: 228px; |
|||
top: 246px; |
|||
.text { |
|||
background: $light; |
|||
} |
|||
&:after { |
|||
background: $light; |
|||
} |
|||
} |
|||
&:nth-of-type(4) { |
|||
left: 77px; |
|||
top: 246px; |
|||
.text { |
|||
background: $green; |
|||
} |
|||
&:after { |
|||
background: $green; |
|||
} |
|||
} |
|||
&:nth-of-type(7) { |
|||
left: 0px; |
|||
top: 158px; |
|||
.text { |
|||
background: $orange; |
|||
} |
|||
&:after { |
|||
background: $orange; |
|||
} |
|||
} |
|||
&:nth-of-type(1) { |
|||
left: 48px; |
|||
top: 57px; |
|||
.text { |
|||
background: $purple; |
|||
} |
|||
&:after { |
|||
background: $purple; |
|||
} |
|||
} |
|||
&:nth-of-type(8) { |
|||
left: 260px; |
|||
top: 29px; |
|||
.text { |
|||
background: $green2; |
|||
} |
|||
&:after { |
|||
background: $green2; |
|||
} |
|||
} |
|||
} |
|||
/* |
|||
.yellow { |
|||
.text { |
|||
background: $yellow; |
|||
} |
|||
&:after { |
|||
background: $yellow; |
|||
} |
|||
} |
|||
.blue { |
|||
.text { |
|||
background: $blue; |
|||
} |
|||
&:after { |
|||
background: $blue; |
|||
} |
|||
} |
|||
.red { |
|||
.text { |
|||
background: $red; |
|||
} |
|||
&:after { |
|||
background: $red; |
|||
} |
|||
} |
|||
.light { |
|||
.text { |
|||
background: $light; |
|||
} |
|||
&:after { |
|||
background: $light; |
|||
} |
|||
} |
|||
.green { |
|||
.text { |
|||
background: $green; |
|||
} |
|||
&:after { |
|||
background: $green; |
|||
} |
|||
} |
|||
.orange { |
|||
.text { |
|||
background: $orange; |
|||
} |
|||
&:after { |
|||
background: $orange; |
|||
} |
|||
} |
|||
.purple { |
|||
.text { |
|||
background: $purple; |
|||
} |
|||
&:after { |
|||
background: $purple; |
|||
} |
|||
} |
|||
.purple2 { |
|||
.text { |
|||
background: $purple2; |
|||
} |
|||
&:after { |
|||
background: $purple2; |
|||
} |
|||
} |
|||
.green2 { |
|||
.text { |
|||
background: $green2; |
|||
} |
|||
&:after { |
|||
background: $green2; |
|||
} |
|||
}*/ |
|||
} |
|||
.btn { |
|||
min-width: 320px; |
|||
height: 40px; |
|||
background: #00143C; |
|||
border: 1px solid #125AAA; |
|||
border-radius: 20px; |
|||
border-radius: 23px; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 40px; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 0 20px; |
|||
margin: 0 auto 0; |
|||
cursor: pointer; |
|||
span { |
|||
font-size: 18px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,320 @@ |
|||
<template> |
|||
<div |
|||
v-loading="loading" |
|||
class="potential-people" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-text="加载中..." |
|||
> |
|||
<!-- <div |
|||
class="potential-people-item" |
|||
@click=" |
|||
$router.push( |
|||
'/dataBoard/satisfactionEval/potentialPeople?countType=event' |
|||
) |
|||
" |
|||
> |
|||
<div class="icon"> |
|||
<img |
|||
class="imgBg" |
|||
src="@/assets/images/manyidu/xuanzhuan-bg.png" |
|||
alt="" |
|||
/> |
|||
<img class="imgIcon" src="@/assets/images/manyidu/qz_wjj.png" alt="" /> |
|||
</div> |
|||
<div class="txt"> |
|||
事件未解决 <br /> |
|||
上报人数 |
|||
</div> |
|||
<div class="num"> |
|||
<span style="margin-right: 4px" class="orange">{{ |
|||
unSolvedNum ? unSolvedNum : 0 |
|||
}}</span |
|||
>人 |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="potential-people-item" |
|||
@click=" |
|||
$router.push( |
|||
'/dataBoard/satisfactionEval/potentialPeople?countType=demand' |
|||
) |
|||
" |
|||
> |
|||
<div class="icon"> |
|||
<img |
|||
class="imgBg" |
|||
src="@/assets/images/manyidu/xuanzhuan-bg.png" |
|||
alt="" |
|||
/> |
|||
<img class="imgIcon" src="@/assets/images/manyidu/qz_wmz.png" alt="" /> |
|||
</div> |
|||
<div class="txt"> |
|||
需求未满足 <br /> |
|||
人数 |
|||
</div> |
|||
<div class="num"> |
|||
<span style="margin-right: 4px" class="green">{{ |
|||
unFinishNum ? unFinishNum : 0 |
|||
}}</span |
|||
>人 |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="potential-people-item" |
|||
@click=" |
|||
$router.push( |
|||
'/dataBoard/satisfactionEval/potentialPeople?countType=service' |
|||
) |
|||
" |
|||
> |
|||
<div class="icon"> |
|||
<img |
|||
class="imgBg" |
|||
src="@/assets/images/manyidu/xuanzhuan-bg.png" |
|||
alt="" |
|||
/> |
|||
<img class="imgIcon" src="@/assets/images/manyidu/qz_wx.png" alt="" /> |
|||
</div> |
|||
<div class="txt"> |
|||
应享未享 <br /> |
|||
服务人数 |
|||
</div> |
|||
<div class="num"> |
|||
<span style="margin-right: 4px" class="light">{{ |
|||
noServiceNum ? noServiceNum : 0 |
|||
}}</span |
|||
>人 |
|||
</div> |
|||
</div>--> |
|||
<div class="number-list"> |
|||
<div class="number-item" @click=" |
|||
$router.push( |
|||
'/dataBoard/satisfactionEval/potentialPeople?countType=event' |
|||
)"> |
|||
<div class="img"> |
|||
<img alt="" src="@/assets/images/manyidu/hf_ts.png"/> |
|||
</div> |
|||
<div> |
|||
<div class="txt"> |
|||
事件未解决 <br/> |
|||
上报人数 |
|||
</div> |
|||
<div class="num"> |
|||
<span class="orange">{{ unSolvedNum ? unSolvedNum : 0 }}</span> 人 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="number-item" @click=" |
|||
$router.push( |
|||
'/dataBoard/satisfactionEval/potentialPeople?countType=demand' |
|||
) |
|||
"> |
|||
<div class="img"> |
|||
<img alt="" src="@/assets/images/manyidu/hf_bmy.png"/> |
|||
</div> |
|||
<div> |
|||
<div class="txt"> |
|||
需求未满足 <br/> |
|||
人数 |
|||
</div> |
|||
<div class="num"> |
|||
<span class="green">{{ |
|||
unFinishNum ? unFinishNum : 0 |
|||
}}</span> |
|||
人 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="number-item" @click=" |
|||
$router.push( |
|||
'/dataBoard/satisfactionEval/potentialPeople?countType=service' |
|||
) |
|||
"> |
|||
<div class="img"> |
|||
<img alt="" src="@/assets/images/manyidu/hf_zpbmy.png"/> |
|||
</div> |
|||
<div> |
|||
<div class="txt"> |
|||
应享未享 <br/> |
|||
服务人数 |
|||
</div> |
|||
<div class="num"> |
|||
<span class="light">{{ noServiceNum ? noServiceNum : 0 }}</span> 人 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "PotentialPeople", |
|||
data() { |
|||
return { |
|||
noServiceNum: 0, |
|||
unFinishNum: 0, |
|||
unSolvedNum: 0, |
|||
loading: true, |
|||
}; |
|||
}, |
|||
props: { |
|||
date: { |
|||
type: Object, |
|||
default: () => { |
|||
}, |
|||
}, |
|||
}, |
|||
watch: { |
|||
"$store.state.chooseArea.chooseName"(val) { |
|||
if (val.orgId) { |
|||
this.getData(); |
|||
} |
|||
}, |
|||
date() { |
|||
this.getData(); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
if (this.$store.state.chooseArea.chooseName.orgId) { |
|||
this.getData(); |
|||
} |
|||
}, |
|||
methods: { |
|||
getData() { |
|||
this.loading = true; |
|||
let params = { |
|||
level: this.$store.state.chooseArea.chooseName.level, |
|||
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|||
...this.date, |
|||
}; |
|||
this.$http |
|||
.get( |
|||
"/governance/satisfactionOverview/potentialSatisfactionGroup?" + |
|||
this.$paramsFormat(params) |
|||
) |
|||
.then(({data: {data}}) => { |
|||
this.noServiceNum = data.noServiceNum; |
|||
this.unFinishNum = data.unFinishNum; |
|||
this.unSolvedNum = data.unSolvedNum; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@keyframes roate { |
|||
0% { |
|||
transform: rotateZ(0); |
|||
-ms-transform: rotateZ(0); |
|||
-moz-transform: rotateZ(0); |
|||
-webkit-transform: rotateZ(0); |
|||
-o-transform: rotateZ(0); |
|||
} |
|||
100% { |
|||
transform: rotateZ(360deg); |
|||
-ms-transform: rotateZ(360deg); |
|||
-moz-transform: rotateZ(360deg); |
|||
-webkit-transform: rotateZ(360deg); |
|||
-o-transform: rotateZ(360deg); |
|||
} |
|||
} |
|||
.potential-people { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 16px 20px; |
|||
.potential-people-item { |
|||
flex: 1; |
|||
margin: 14px; |
|||
padding: 26px 0 31px; |
|||
text-align: center; |
|||
border: 1px solid rgba(28, 67, 111, 0.22); |
|||
background: linear-gradient( |
|||
0deg, |
|||
rgba(31, 121, 255, 0.22) 0%, |
|||
rgba(31, 121, 255, 0) 100% |
|||
); |
|||
.icon { |
|||
width: 86px; |
|||
height: 86px; |
|||
margin: 0 auto; |
|||
.imgIcon { |
|||
position: relative; |
|||
top: -58px; |
|||
width: 30px; |
|||
height: 30px; |
|||
} |
|||
.imgBg { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
animation: roate 5s infinite linear; //这是重点，给它一个旋转的属性 |
|||
} |
|||
} |
|||
.txt { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
line-height: 24px; |
|||
margin: 11px 0 22px; |
|||
white-space: normal; |
|||
color: #a3b9da; |
|||
} |
|||
.num { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
white-space: normal; |
|||
color: #a3b9da; |
|||
span { |
|||
font-size: 32px; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.orange { |
|||
color: #ffb73c; |
|||
} |
|||
.green { |
|||
color: #08ebae; |
|||
} |
|||
.light { |
|||
color: #7fceff; |
|||
} |
|||
.number-list { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
padding: 10px 0px 15px; |
|||
.number-item { |
|||
display: flex; |
|||
.image { |
|||
width: 98px; |
|||
height: 70px; |
|||
} |
|||
.txt { |
|||
font-size: 15px; |
|||
margin-left: -6px; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 26px; |
|||
margin-bottom: 17px; |
|||
white-space: nowrap; |
|||
} |
|||
.num { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
color: #a3b9da; |
|||
white-space: nowrap; |
|||
span { |
|||
font-size: 32px; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
//color: #3ab7ff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,215 @@ |
|||
<template> |
|||
<div class="types-dissatisfaction" v-loading="loading" element-loading-text="加载中..." |
|||
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.5)"> |
|||
<div class="screen"> |
|||
<el-select v-model.trim="typeCondition" popper-class="selectPopClass" placeholder="请选择" class="select" |
|||
@change="timeChange"> |
|||
<el-option v-for="item in typeConditionList" :key="item.value" :label="item.label" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<div style="height: 210px"> |
|||
<EChart :options="radarOption" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import EChart from '@/components/EChart'; |
|||
import { requestGet } from "@/js/dai/request"; |
|||
export default { |
|||
name: "TypesOfDissatisfaction", |
|||
components: { EChart }, |
|||
data() { |
|||
return { |
|||
resultType: 1, |
|||
typeCondition: 5, |
|||
typeConditionList: [ |
|||
{ |
|||
label: "本月", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "上月", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "近三月", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "近半年", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "近一年", |
|||
value: 5, |
|||
}, |
|||
], |
|||
radarOption: [], |
|||
loading: true, |
|||
}; |
|||
}, |
|||
watch: { |
|||
"$store.state.chooseArea.chooseName"(val) { |
|||
if (val.orgId) { |
|||
this.timeChange(); |
|||
// this.getData(); |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
if (this.$store.state.chooseArea.chooseName.orgId) { |
|||
this.timeChange(); |
|||
} |
|||
}, |
|||
methods: { |
|||
resultTypeChange(val) { |
|||
if (val !== this.resultType) { |
|||
this.resultType = val; |
|||
this.timeChange(); |
|||
} |
|||
}, |
|||
timeChange() { |
|||
let startTime = "", |
|||
endTime = ""; |
|||
if (this.typeCondition === 1) { |
|||
startTime = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (this.typeCondition === 2) { |
|||
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (this.typeCondition === 3) { |
|||
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (this.typeCondition === 4) { |
|||
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (this.typeCondition === 5) { |
|||
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (this.typeCondition === 2) { |
|||
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
endTime = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
this.getData(startTime, endTime); |
|||
this.$emit("timeChange", { startTime, endTime }); |
|||
}, |
|||
async getData(startTime, endTime) { |
|||
this.loading = false; |
|||
let params = { |
|||
level: this.$store.state.chooseArea.chooseName.level, |
|||
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|||
startTime, |
|||
endTime, |
|||
}; |
|||
let url = "/governance/satisfactionOverview/satisfactionGroup"; |
|||
const { data, code, msg } = await requestGet(url, params); |
|||
this.initCharts(); |
|||
}, |
|||
initCharts() { |
|||
this.radarOption = { |
|||
backgroundColor: "transparent", |
|||
legend: { |
|||
right: 20, |
|||
top: "middle", |
|||
orient: "vertical", |
|||
icon: "rect", |
|||
itemWidth: 10, |
|||
itemHeight: 10, |
|||
textStyle: { |
|||
color: "#9ecbff" |
|||
}, |
|||
data: ["12345热线事件上报人数"] |
|||
}, |
|||
radar: { |
|||
center: ["40%", "50%"], |
|||
radius: "60%", |
|||
indicator: [ |
|||
{ name: "城市综合", max: 1 }, |
|||
{ name: "党风政风行风", max: 1 }, |
|||
{ name: "三农问题", max: 1 }, |
|||
{ name: "人力资源保障", max: 1 }, |
|||
{ name: "自然资源", max: 1 }, |
|||
{ name: "城乡建设", max: 1 }, |
|||
{ name: "社会事业", max: 1 }, |
|||
{ name: "经济综合", max: 1 } |
|||
], |
|||
name: { |
|||
textStyle: { |
|||
color: "#cfe8ff", |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(120,180,255,0.4)" |
|||
} |
|||
}, |
|||
splitArea: { |
|||
areaStyle: { |
|||
color: ["transparent"] |
|||
} |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "rgba(120,180,255,0.4)" |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "12345热线事件上报人数", |
|||
type: "radar", |
|||
data: [ |
|||
{ |
|||
name: "12345热线事件上报人数", |
|||
value: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1], |
|||
// 不显示区域 |
|||
areaStyle: { |
|||
opacity: 0 |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
color: "#4fdcff" |
|||
}, |
|||
|
|||
symbol: "circle", |
|||
symbolSize: 8, |
|||
|
|||
itemStyle: { |
|||
color: "#4fdcff" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
this.loading = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.types-dissatisfaction { |
|||
padding: 16px 32px; |
|||
} |
|||
|
|||
.screen { |
|||
text-align: end; |
|||
|
|||
/deep/ .el-input__inner { |
|||
width: 90px !important; |
|||
height: 24px !important; |
|||
background: #021c49 !important; |
|||
border: 1px solid #125aaa !important; |
|||
border-radius: 12px !important; |
|||
color: #a0cdff; |
|||
} |
|||
|
|||
/deep/ .el-input__icon { |
|||
line-height: 24px !important; |
|||
color: #a0cdff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,332 @@ |
|||
<template> |
|||
<el-dialog |
|||
width="1118px" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:destroy-on-close="true" |
|||
:visible="showDialog" |
|||
@close="handleClose" |
|||
> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="24" style="padding-left: 40px"> |
|||
<title-box text="事件详情" /> |
|||
</el-col> |
|||
<el-col |
|||
:span="13" |
|||
style="padding-left: 40px" |
|||
v-loading="loading" |
|||
element-loading-text="加载中" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0, 21, 64, 0" |
|||
> |
|||
<div class="leftEvent"> |
|||
<div class="eventDetails"> |
|||
<img |
|||
:width="18" |
|||
:height="18" |
|||
src="@/assets/images/manyidu/tc-title-icon.png" |
|||
/>事项详情 |
|||
</div> |
|||
<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.createdTime }}</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.address }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报人：</span> |
|||
<span>{{ item.name }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>联系电话：</span> |
|||
<span>{{ item.mobile }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col |
|||
:span="11" |
|||
v-loading="loading1" |
|||
element-loading-text="加载中" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0, 21, 64, 0.3)" |
|||
> |
|||
<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> |
|||
import titleBox from "@/views/dataBoard/satisfactionEval/components/Title" |
|||
export default { |
|||
name: "ReportAnEvent", |
|||
components: { |
|||
titleBox, |
|||
}, |
|||
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); |
|||
} |
|||
}, |
|||
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" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
@import "@/assets/scss/dataBoard/dialog.scss"; |
|||
@mixin fontStyle { |
|||
color: #fff !important; |
|||
font-size: 14px !important; |
|||
} |
|||
.eventWrap { |
|||
//width: 1094px; |
|||
//height: 798px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
color: #ffffff; |
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
.m-info { |
|||
padding: 0px !important; |
|||
.m-process { |
|||
margin: 0 !important; |
|||
.name { |
|||
@include fontStyle; |
|||
} |
|||
.date { |
|||
@include fontStyle; |
|||
} |
|||
.detail { |
|||
@include fontStyle; |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.leftEvent { |
|||
color: #fff; |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
span:first-child { |
|||
} |
|||
span:last-child { |
|||
} |
|||
} |
|||
} |
|||
.rightEvent { |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,302 @@ |
|||
<template> |
|||
<el-dialog |
|||
width="1118px" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:destroy-on-close="true" |
|||
:visible="showDialog" |
|||
@close="handleClose" |
|||
> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="24" style="padding-left: 40px"> |
|||
<title-box text="事件详情"/> |
|||
</el-col> |
|||
<el-col |
|||
:span="13" |
|||
style="padding-left: 40px" |
|||
v-loading="loading" |
|||
element-loading-text="加载中" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0, 21, 64, 0" |
|||
> |
|||
<div class="leftEvent"> |
|||
<div class="eventDetails"> |
|||
<img |
|||
:width="18" |
|||
:height="18" |
|||
src="@/assets/images/manyidu/tc-title-icon.png" |
|||
/>事项详情 |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.agencyName }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报渠道：</span> |
|||
<span>{{ item.reportType }}</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>{{ item.demandUserMobile }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>需求人住址：</span> |
|||
<span>{{ item.reportUserName }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>上报人：</span> |
|||
<span>{{ item.reportUserName }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col |
|||
:span="11" |
|||
v-loading="loading1" |
|||
element-loading-text="加载中" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0, 21, 64, 0.3)" |
|||
> |
|||
<div class="rightEvent m-info"> |
|||
<div class="eventDetails"> |
|||
<img |
|||
:width="18" |
|||
:height="18" |
|||
src="@/assets/images/manyidu/tc-title-icon.png" |
|||
/>办理进展 |
|||
</div> |
|||
<div v-if="logList.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 logList" |
|||
> |
|||
<div class="item-row"> |
|||
<template> |
|||
<div class="name"> |
|||
{{ |
|||
item.actionCode === 'create' ? '创建需求' : |
|||
item.actionCode === 'update' ? '更新需求' : |
|||
item.actionCode === 'cancel' ? '撤销需求' : |
|||
item.actionCode === 'assign' ? '指派' : |
|||
item.actionCode === 'take_order' ? '接单' : |
|||
item.actionCode === 'finish' ? '完成' : |
|||
item.actionCode === 'evaluate' ? '评价' : '' |
|||
}} |
|||
</div> |
|||
</template> |
|||
、 |
|||
<div class="date"> |
|||
{{ |
|||
item.oprateTime |
|||
}} |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<template v-if="item.actionCode === 'create'"> |
|||
<div class="detail"> |
|||
<div class="detail-field">上报人：</div> |
|||
<div class="detail-value"> |
|||
{{ item.reportUserName }} {{ item.roleName }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template v-if="item.actionCode === 'assign'"> |
|||
<div class="detail"> |
|||
<div class="detail-field">办理人：</div> |
|||
<div class="detail-value"> |
|||
{{ item.assignUser }} |
|||
</div> |
|||
</div> |
|||
<div class="detail"> |
|||
<div class="detail-field">指派给服务组织：</div> |
|||
<div class="detail-value"> |
|||
{{ item.serverName }} （{{ |
|||
item.serviceType === 'volunteer' ? '志愿者' : |
|||
item.serviceType === 'social_org' ? '社会组织' : |
|||
item.serviceType === 'community_org' ? '社区自组织' : |
|||
item.serviceType === 'party_unit' ? '区域党建单位' : |
|||
item.serviceType === 'enterprise' ? '企业，商家' : '' |
|||
}}） |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template v-if="item.actionCode === 'finish'"> |
|||
<div class="detail"> |
|||
<div class="detail-field">服务组织：</div> |
|||
<div class="detail-value"> |
|||
{{ item.serverName }} （{{ |
|||
item.serviceType === 'volunteer' ? '志愿者' : |
|||
item.serviceType === 'social_org' ? '社会组织' : |
|||
item.serviceType === 'community_org' ? '社区自组织' : |
|||
item.serviceType === 'party_unit' ? '区域党建单位' : |
|||
item.serviceType === 'enterprise' ? '企业，商家' : '' |
|||
}}） |
|||
</div> |
|||
</div> |
|||
<!-- <div class="detail"> |
|||
<div class="detail-field">完成时间：</div> |
|||
<div class="detail-value"> |
|||
{{ item.assignUser }} |
|||
</div> |
|||
</div>--> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- </el-card> --> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import titleBox from "@/views/dataBoard/satisfactionEval/components/Title" |
|||
export default { |
|||
name: "ReportAnEvent", |
|||
components: { |
|||
titleBox, |
|||
}, |
|||
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; |
|||
this.$http |
|||
.get("/governance/satisfactionDetailList/getUserDemandUnSolvedDetail?id=" + id) |
|||
.then((res) => { |
|||
const {code, data, msg} = res.data; |
|||
if (code === 0) { |
|||
this.item = data; |
|||
this.logList = data.logList; |
|||
this.loading = false; |
|||
} else { |
|||
this.loading = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
@import "@/assets/scss/dataBoard/dialog.scss"; |
|||
@mixin fontStyle { |
|||
color: #fff !important; |
|||
font-size: 14px !important; |
|||
} |
|||
.eventWrap { |
|||
width: 1094px; |
|||
//height: 798px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
color: #ffffff; |
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
.m-info { |
|||
padding: 0px !important; |
|||
.m-process { |
|||
margin: 0 !important; |
|||
.name { |
|||
@include fontStyle; |
|||
} |
|||
.date { |
|||
@include fontStyle; |
|||
} |
|||
.detail { |
|||
@include fontStyle; |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.leftEvent { |
|||
color: #fff; |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
span:first-child { |
|||
} |
|||
span:last-child { |
|||
} |
|||
} |
|||
} |
|||
.rightEvent { |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,211 @@ |
|||
<template> |
|||
<el-dialog width="1118px" :modal="true" :modal-append-to-body="false" :destroy-on-close="true" :visible="showDialog" @close="handleClose"> |
|||
<div class="eventWrap"> |
|||
<el-row :gutter="32"> |
|||
<el-col :span="24" style="padding-left: 40px"> |
|||
<title-box text="事件详情" /> |
|||
</el-col> |
|||
<el-col :span="13" style="padding-left: 40px" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0"> |
|||
<div class="leftEvent"> |
|||
<div class="eventDetails"><img :width="18" :height="18" src="@/assets/images/manyidu/tc-title-icon.png" />事项详情</div> |
|||
<div class="eventItem"> |
|||
<span>所属组织：</span> |
|||
<span>{{ item.organizationName }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务类型：</span> |
|||
<span>{{ item.serviceCategoryName }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务事项：</span> |
|||
<span>{{ item.serviceName }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务时间：</span> |
|||
<span>{{ item.serviceTimeStart }} ~ {{ item.serviceTimeEnd }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<div>服务内容：</div> |
|||
<div style="margin-top: 20px">{{ item.remark }}</div> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>经办人：</span> |
|||
<span>{{ item.principalName }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>联系电话：</span> |
|||
<span> {{ $sensitive(item.principalContact, 3, 7) }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>服务组织：</span> |
|||
<span>{{ item.serviceOrgName }}</span> |
|||
</div> |
|||
<div class="eventItem"> |
|||
<span>政策依据：</span> |
|||
<span>{{ item.title }}</span> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="11" v-loading="loading1" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> |
|||
<div class="rightEvent m-info"> |
|||
<div class="eventDetails"><img :width="18" :height="18" src="@/assets/images/manyidu/tc-title-icon.png" />办理进展</div> |
|||
<div v-if="logList.length > 0"> |
|||
<div class="m-process"> |
|||
<div class="list"> |
|||
<div class="item" :class="[index === 0 ? 'z-on' : '']" v-for="(item, index) in logList"> |
|||
<div class="item-row"> |
|||
<div class="name">{{ item.serviceStatus }}</div> |
|||
<div class="date"> |
|||
{{ item.createdTime }} |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<template v-if="item.serviceStatus === '创建服务'"> |
|||
<div class="detail"> |
|||
<div class="detail-field">创建人：</div> |
|||
<div class="detail-value">{{ item.createdBy }} （{{ item.agencyName }}）</div> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<div class="detail"> |
|||
<div class="detail-field">服务组织：</div> |
|||
<div class="detail-value"> |
|||
{{ item.serviceOrgName }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- </el-card> --> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import titleBox from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
export default { |
|||
name: "ReportAnEvent", |
|||
components: { |
|||
titleBox, |
|||
}, |
|||
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; |
|||
this.$http.get("/governance/satisfactionDetailList/getServiceNotEnjoyedDetailById?id=" + id).then((res) => { |
|||
const { code, data, msg } = res.data; |
|||
if (code === 0) { |
|||
this.item = data; |
|||
this.logList = data.logList; |
|||
this.loading = false; |
|||
} else { |
|||
this.loading = false; |
|||
this.$message.error(msg); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
@import "@/assets/scss/dataBoard/dialog.scss"; |
|||
@mixin fontStyle { |
|||
color: #fff !important; |
|||
font-size: 14px !important; |
|||
} |
|||
.eventWrap { |
|||
width: 1094px; |
|||
//height: 798px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding: 24px; |
|||
.eventDetails { |
|||
font-size: 18px; |
|||
margin: 48px 24px 48px 0; |
|||
color: #ffffff; |
|||
img { |
|||
margin-top: -4px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
.m-info { |
|||
padding: 0px !important; |
|||
.m-process { |
|||
margin: 0 !important; |
|||
.name { |
|||
@include fontStyle; |
|||
} |
|||
.date { |
|||
@include fontStyle; |
|||
} |
|||
.detail { |
|||
@include fontStyle; |
|||
.detail-field { |
|||
flex: none !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.leftEvent { |
|||
color: #fff; |
|||
.eventItem { |
|||
font-size: 14px; |
|||
margin-bottom: 24px; |
|||
span:first-child { |
|||
} |
|||
span:last-child { |
|||
} |
|||
} |
|||
} |
|||
.rightEvent { |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,291 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList" /> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-select |
|||
popper-class="selectPopClass" |
|||
v-model.trim="queryParams.agencyId" |
|||
size="small" |
|||
placeholder="按组织" |
|||
v-if="this.$route.query.type != 'shuji'" |
|||
> |
|||
<el-option |
|||
v-for="item in orgOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
></el-option> |
|||
</el-select> |
|||
<el-select |
|||
popper-class="selectPopClass" |
|||
v-model.trim="queryParams.satisfactionSource" |
|||
size="small" |
|||
placeholder="按类型" |
|||
v-else |
|||
> |
|||
<el-option |
|||
v-for="item in orgOptionsC" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
></el-option> |
|||
</el-select> |
|||
<el-input |
|||
v-model.trim="queryParams.name" |
|||
clearable |
|||
size="small" |
|||
placeholder="按姓名" |
|||
></el-input> |
|||
<el-input |
|||
v-model.trim="queryParams.mobile" |
|||
clearable |
|||
size="small" |
|||
placeholder="按电话" |
|||
></el-input> |
|||
<el-button size="small" class="btn" type="primary" @click="search" |
|||
>查询</el-button |
|||
> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="table"> |
|||
<el-table |
|||
:data="list" |
|||
v-loading="loading" |
|||
element-loading-text="加载中..." |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
|
|||
<el-table-column prop="name" label="上报人" /> |
|||
|
|||
<el-table-column prop="mobile" label="上报人电话"> |
|||
<template slot-scope="scope"> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="agencyName" label="所属组织"></el-table-column> |
|||
|
|||
<el-table-column prop="eventCount" sortable label="事件未解决数"> |
|||
<template slot-scope="{ row }"> |
|||
<el-button |
|||
type="text" |
|||
@click=" |
|||
$router.push( |
|||
'/dataBoard/satisfactionEval/potentialPeople/sjwjj?reportUserId=' + |
|||
row.reportUserId |
|||
) |
|||
" |
|||
> |
|||
{{ row.eventCount }} |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="demandCount" sortable label="需求未满足数"> |
|||
<template slot-scope="{ row }"> |
|||
<el-button |
|||
type="text" |
|||
@click=" |
|||
$router.push( |
|||
'/dataBoard/satisfactionEval/potentialPeople/xqwmz?reportUserId=' + |
|||
row.reportUserId |
|||
) |
|||
" |
|||
> |
|||
{{ row.demandCount }} |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="serviceCount" sortable label="应享未享数"> |
|||
<template slot-scope="{ row }"> |
|||
<el-button |
|||
type="text" |
|||
@click=" |
|||
$router.push( |
|||
'/dataBoard/satisfactionEval/potentialPeople/yxwxfw?reportUserId=' + |
|||
row.reportUserId |
|||
) |
|||
" |
|||
> |
|||
{{ row.serviceCount }} |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="countAll" sortable label="总数"> |
|||
<template slot-scope="{ row }" |
|||
>{{ row.countAll }} |
|||
<!-- <el-button type="text"></el-button>--> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<Pagination |
|||
v-show="total > 0" |
|||
:total="total" |
|||
:page.sync="queryParams.pageNo" |
|||
:limit.sync="queryParams.pageSize" |
|||
@pagination="getList" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
|
|||
export default { |
|||
name: "dissatisfied", |
|||
components: { Breadcrumb, Pagination, Title }, |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
queryParams: { |
|||
month: "", |
|||
org: "", |
|||
matterSource: "", |
|||
matterType: "", |
|||
name: "", |
|||
tel: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
satisfactionSource:"" |
|||
}, |
|||
orgOptions: [], |
|||
total: 0, |
|||
breadcrumbList: [ |
|||
|
|||
], |
|||
orgOptionsC:[ |
|||
{ |
|||
label:'12345政务热线', |
|||
value:'satisfaction_12345' |
|||
}, |
|||
{ |
|||
label:'上级满意度调查', |
|||
value:'satisfaction_province' |
|||
}, |
|||
{ |
|||
label:'社区满意度调查', |
|||
value:'satisfaction_community' |
|||
} |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return { label: index - 0 + 1 + "月", value: index - 0 + 1 }; |
|||
}), |
|||
list: [], |
|||
}; |
|||
}, |
|||
|
|||
activated() { |
|||
this.queryParams.mobile = '' |
|||
this.queryParams.name = '' |
|||
if(this.$route.query.type == 'shuji'){ |
|||
this.breadcrumbList = [ |
|||
{ |
|||
path: "/dataBoard/overview/index", |
|||
name: "指挥调度", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "不满意风险人员", |
|||
}, |
|||
] |
|||
this.queryParams.satisfactionSource = this.$route.query.satisfactionSource |
|||
}else{ |
|||
this.breadcrumbList = [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "潜在不满意人数", |
|||
}, |
|||
] |
|||
} |
|||
this.getOrg(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getOrg() { |
|||
let params = { |
|||
orgId: this.$store.state.chooseArea.chooseName.orgId, |
|||
level: this.$store.state.chooseArea.chooseName.level, |
|||
}; |
|||
|
|||
this.$http |
|||
.post(`/gov/org/agency/maporg`, params) |
|||
.then(async ({ data: { data } }) => { |
|||
this.queryParams.agencyId = |
|||
this.$store.state.chooseArea.chooseName.orgId; |
|||
let parent = { value: data.id, label: data.name }; |
|||
this.orgOptions = [ |
|||
parent, |
|||
...data.children.map((item) => { |
|||
return { |
|||
value: item.id, |
|||
label: item.name, |
|||
}; |
|||
}), |
|||
]; |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
}; |
|||
this.$http |
|||
.get( |
|||
"/governance/satisfactionDetailList/getPotentialDissatisfiedCountDetail?" + |
|||
this.$paramsFormat(params) |
|||
) |
|||
.then(({ data: { data } }) => { |
|||
this.list = data.list; |
|||
this.total = data.total; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
handleView(id) {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
|
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
|
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
background: none; |
|||
border: none; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
margin-left: 46px; |
|||
height: 32px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList" /> |
|||
<div class="table"> |
|||
<el-table :data="list" |
|||
v-loading="loading" |
|||
element-loading-text="加载中..." |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column prop="name" label="上报人" /> |
|||
<el-table-column prop="mobile" label="上报人电话"> |
|||
<template slot-scope="scope"> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="agencyName" label="所属组织"> </el-table-column> |
|||
<el-table-column prop="categoryName" label="事件类型" /> |
|||
<el-table-column prop="eventContent" show-overflow-tooltip label="事件描述" /> |
|||
<el-table-column prop="latestProcessingStatus" label="最新办理状态" /> |
|||
<el-table-column prop="latestProcessingTime" sortable label="最近办理时间" /> |
|||
<el-table-column prop="happenTime" sortable label="事件上报时间" /> |
|||
<el-table-column sortable label="详情"> |
|||
<template slot-scope="{ row }"> |
|||
<el-button type="text" @click="handleView(row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" /> |
|||
<sjwjj :showDialog="showDialog" :id="rowId" @close="close" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import sjwjj from "@/views/dataBoard/satisfactionEval/potentialPeople/details/sjwjj.vue"; |
|||
export default { |
|||
name: "dissatisfied", |
|||
components: { Breadcrumb, Pagination, Title, sjwjj }, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
reportUserId: this.$route.query.reportUserId, |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/potentialPeople", |
|||
name: "潜在不满意数", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "事件未解决数", |
|||
}, |
|||
], |
|||
list: [], |
|||
showDialog: false, |
|||
rowId: "", |
|||
loading: true |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.queryParams.reportUserId = this.$route.query.reportUserId; |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true |
|||
this.$http.get("/governance/satisfactionDetailList/getEventUnSolvedByUserId?" + this.$paramsFormat(this.queryParams)).then(({ data: { data } }) => { |
|||
this.list = data.list; |
|||
this.total = data.total; |
|||
this.loading = false |
|||
}); |
|||
}, |
|||
handleView({ id }) { |
|||
this.showDialog = true; |
|||
this.rowId = id; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.table { |
|||
margin-top: 40px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,128 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="table"> |
|||
<el-table :data="list" |
|||
v-loading="loading" |
|||
element-loading-text="加载中..." |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
> |
|||
<el-table-column |
|||
label="序号" |
|||
type="index" |
|||
width="80"/> |
|||
<el-table-column |
|||
prop="demandUserName" |
|||
label="需求人"/> |
|||
<el-table-column |
|||
prop="demandUserMobile" |
|||
label="需求人电话"> |
|||
<template slot-scope="scope"> |
|||
{{ $sensitive(scope.row.demandUserMobile, 3, 7) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="agencyName" |
|||
label="所属组织"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="content" |
|||
show-overflow-tooltip |
|||
label="需求描述"/> |
|||
<el-table-column |
|||
prop="latestProcessingStatus" |
|||
label="最新办理状态"/> |
|||
<el-table-column |
|||
prop="latestProcessingTime" |
|||
sortable |
|||
label="最近办理时间"/> |
|||
<el-table-column |
|||
prop="reportTime" |
|||
sortable |
|||
label="需求提交时间"/> |
|||
<el-table-column |
|||
sortable |
|||
label="详情"> |
|||
<template slot-scope="{row}"> |
|||
<el-button type="text" @click="handleView(row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<Pagination |
|||
v-show="total>0" |
|||
:total="total" |
|||
:page.sync="queryParams.pageNo" |
|||
:limit.sync="queryParams.pageSize" |
|||
@pagination="getList" |
|||
/> |
|||
<xqwmz :showDialog="showDialog" :id="rowId" @close="close"/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb' |
|||
import Pagination from '@/views/dataBoard/satisfactionEval/components/Pagination' |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title" |
|||
import xqwmz from "@/views/dataBoard/satisfactionEval/potentialPeople/details/xqwmz.vue" |
|||
export default { |
|||
name: "dissatisfied", |
|||
components: {Breadcrumb, Pagination, Title, xqwmz}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
reportUserId: this.$route.query.reportUserId, |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
breadcrumbList: [{ |
|||
path: '/dataBoard/satisfactionEval/index', |
|||
name: '满意度评价' |
|||
}, { |
|||
path: '/dataBoard/satisfactionEval/potentialPeople', |
|||
name: '潜在不满意数' |
|||
}, { |
|||
path: '', |
|||
name: '需求未满足数' |
|||
}], |
|||
list: [], |
|||
showDialog: false, |
|||
rowId: '', |
|||
loading: true |
|||
} |
|||
}, |
|||
activated() { |
|||
this.queryParams.reportUserId = this.$route.query.reportUserId |
|||
this.queryParams.pageNo = 1 |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1 |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true |
|||
this.$http.get('/governance/satisfactionDetailList/getUserDemandUnSolvedByUserId?' + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => { |
|||
this.list = data.list; |
|||
this.total = data.total; |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
handleView({name, id}) { |
|||
this.showDialog = true |
|||
this.rowId = id |
|||
}, |
|||
close() { |
|||
this.showDialog = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.table { |
|||
margin-top: 40px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,115 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="table"> |
|||
<el-table :data="list" |
|||
v-loading="loading" |
|||
element-loading-text="加载中..." |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
|
|||
<el-table-column prop="name" label="服务对象姓名"/> |
|||
|
|||
<el-table-column prop="mobile" label="服务对象电话"> |
|||
<template slot-scope="scope"> |
|||
{{ $sensitive(scope.row.mobile, 3, 7) }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="organizationName" label="所属组织"></el-table-column> |
|||
|
|||
<el-table-column prop="serviceCategoryName" label="服务类型"/> |
|||
|
|||
<el-table-column prop="remark" show-overflow-tooltip label="服务描述"/> |
|||
<el-table-column prop="serviceStatus" sortable label="是否已完成服务"/> |
|||
<el-table-column prop="serviceTimeStart" sortable label="服务发起时间"/> |
|||
<el-table-column sortable label="详情"> |
|||
<template slot-scope="{ row }"> |
|||
<el-button type="text" @click="handleView(row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" |
|||
@pagination="getList"/> |
|||
<yxwxfw :showDialog="showDialog" :id="rowId" @close="close"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import yxwxfw from "@/views/dataBoard/satisfactionEval/potentialPeople/details/yxwxfw.vue"; |
|||
|
|||
export default { |
|||
name: "dissatisfied", |
|||
components: {Breadcrumb, Pagination, Title, yxwxfw}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/potentialPeople", |
|||
name: "潜在不满意数", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "应享未享服务数", |
|||
}, |
|||
], |
|||
|
|||
list: [], |
|||
showDialog: false, |
|||
rowId: "", |
|||
loading: true |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.queryParams.reportUserId = this.$route.query.reportUserId; |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true |
|||
this.$http.get("/governance/satisfactionDetailList/getServiceNotEnjoyedByUserId?" + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => { |
|||
this.list = data.list; |
|||
this.total = data.total; |
|||
this.loading = false |
|||
}); |
|||
}, |
|||
|
|||
handleView({id}) { |
|||
this.showDialog = true; |
|||
this.rowId = id; |
|||
}, |
|||
close() { |
|||
this.showDialog = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
|
|||
.table { |
|||
margin-top: 40px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue