Browse Source

最热议题添加详情

master
尹作梅 6 years ago
parent
commit
ae72148ab9
  1. 160
      src/views/modules/analysis/issue/hottest-issue-list.vue
  2. 149
      src/views/modules/analysis/issue/hottest-issue.vue
  3. 427
      src/views/modules/analysis/issue/issue-detail-view.vue

160
src/views/modules/analysis/issue/hottest-issue-list.vue

@ -0,0 +1,160 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-news__topic}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="所属机构">
<el-cascader v-model="ids" :options="options" :props="{ checkStrictly: true }" clearable filterable>
</el-cascader>
</el-form-item>
<el-form-item label="议题摘要" prop="topicContent">
<el-input v-model="dataForm.issueContent" placeholder="请输入关键字模糊搜索" clearable ></el-input>
</el-form-item>
<el-form-item label="时间"
prop="startTime">
<el-date-picker v-model="dataForm.startTime"
type="date"
:picker-options="pickerBeginDateBefore"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="至"
label-width="25px"
prop="endTime">
<el-date-picker v-model="dataForm.endTime"
type="date"
:picker-options="pickerBeginDateAfter"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column>
<el-table-column prop="issueContent" label="议题摘要" header-align="center" align="center"></el-table-column>
<el-table-column prop="allDeptNames" label="来源网格" header-align="center" align="center"></el-table-column>
<el-table-column prop="nickName" label="发言人" header-align="center" align="center"></el-table-column>
<el-table-column prop="createdTime" label="发布时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="approveNum" label="支持总数" header-align="center" align="center"></el-table-column>
<el-table-column prop="opposeNum" label="反对总数" header-align="center" align="center"></el-table-column>
<el-table-column prop="commentNum" label="评论总数" header-align="center" align="center"></el-table-column>
<el-table-column prop="browseNum" label="浏览总数" header-align="center" align="center"></el-table-column>
<el-table-column prop="expressAttitudeNum" label="表达态度总数" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="detailAction(scope.row.id)">{{ $t('look') }}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
<detail
v-if="detailVisible"
ref="detail"
@refreshDataList="getDataList"
></detail>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import Detail from './issue-detail-view'
export default {
mixins: [mixinViewModule],
name: 'hottestIssueList',
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/analysis/issue/pageHottestIssue',
getDataListIsPage: true
},
closeVisible: false,
detailVisible: false,
dataForm: {
id: '',
streetId: '',
communityId: '',
gridId: '',
startTime: '',
endTime: '',
topicContent: ''
},
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.dataForm.startTime
if (beginDateVal) {
return time.getTime() > new Date(beginDateVal).getTime()
}
}
},
pickerBeginDateAfter: {
disabledDate: (time) => {
let EndDateVal = this.dataForm.endTime
if (EndDateVal) {
return time.getTime() < new Date(EndDateVal).getTime()
}
}
},
ids: [],
options: []
}
},
components: {
Detail
},
created: function () {
this.getOptions()
},
watch: {
'ids': function (val) {
if (val.length === 0) {
this.dataForm.streetId = ''
this.dataForm.communityId = ''
this.dataForm.gridId = ''
}
if (val.length === 1) {
this.dataForm.streetId = this.ids[0]
this.dataForm.communityId = ''
this.dataForm.gridId = ''
}
if (val.length === 2) {
this.dataForm.streetId = this.ids[0]
this.dataForm.communityId = this.ids[1]
this.dataForm.gridId = ''
}
if (val.length === 3) {
this.dataForm.streetId = this.ids[0]
this.dataForm.communityId = this.ids[1]
this.dataForm.gridId = this.ids[2]
}
}
},
methods: {
getOptions () {
this.$http.get(`/sys/user/deptOptions/getByLoginUser`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.options = res.data.options
}).catch(() => {})
},
detailAction (id) {
this.$parent.selectComponent = 'IssueDetailView'
this.$router.push({ path: '/analysis-issue-hottest-issue', query: { id: id } })
}
}
}
</script>

149
src/views/modules/analysis/issue/hottest-issue.vue

@ -1,151 +1,30 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-news__topic}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="所属机构">
<el-cascader v-model="ids" :options="options" :props="{ checkStrictly: true }" clearable filterable>
</el-cascader>
</el-form-item>
<el-form-item label="议题摘要" prop="topicContent">
<el-input v-model="dataForm.issueContent" placeholder="请输入关键字模糊搜索" clearable ></el-input>
</el-form-item>
<el-form-item label="时间"
prop="startTime">
<el-date-picker v-model="dataForm.startTime"
type="date"
:picker-options="pickerBeginDateBefore"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="至"
label-width="25px"
prop="endTime">
<el-date-picker v-model="dataForm.endTime"
type="date"
:picker-options="pickerBeginDateAfter"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column>
<el-table-column prop="issueContent" label="议题摘要" header-align="center" align="center"></el-table-column>
<el-table-column prop="allDeptNames" label="来源网格" header-align="center" align="center"></el-table-column>
<el-table-column prop="nickName" label="发言人" header-align="center" align="center"></el-table-column>
<el-table-column prop="createdTime" label="发布时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="approveNum" label="支持总数" header-align="center" align="center"></el-table-column>
<el-table-column prop="opposeNum" label="反对总数" header-align="center" align="center"></el-table-column>
<el-table-column prop="commentNum" label="评论总数" header-align="center" align="center"></el-table-column>
<el-table-column prop="browseNum" label="浏览总数" header-align="center" align="center"></el-table-column>
<el-table-column prop="expressAttitudeNum" label="表达态度总数" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150" v-if="false">
<template slot-scope="scope">
<el-button type="text" size="small" @click="look(scope.row.id)">{{ $t('look') }}</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
</div>
</el-card>
<keep-alive include="hottestIssueList">
<component :is="selectComponent"></component>
</keep-alive>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import HottestIssueList from './hottest-issue-list'
import IssueDetailView from './issue-detail-view'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/analysis/issue/pageHottestIssue',
getDataListIsPage: true
},
closeVisible: false,
dataForm: {
id: '',
streetId: '',
communityId: '',
gridId: '',
startTime: '',
endTime: '',
topicContent: ''
},
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.dataForm.startTime
if (beginDateVal) {
return time.getTime() > new Date(beginDateVal).getTime()
}
}
},
pickerBeginDateAfter: {
disabledDate: (time) => {
let EndDateVal = this.dataForm.endTime
if (EndDateVal) {
return time.getTime() < new Date(EndDateVal).getTime()
}
}
},
ids: [],
options: []
selectComponent: HottestIssueList
}
},
components: {
},
created: function () {
this.getOptions()
},
watch: {
'ids': function (val) {
if (val.length === 0) {
this.dataForm.streetId = ''
this.dataForm.communityId = ''
this.dataForm.gridId = ''
}
if (val.length === 1) {
this.dataForm.streetId = this.ids[0]
this.dataForm.communityId = ''
this.dataForm.gridId = ''
}
if (val.length === 2) {
this.dataForm.streetId = this.ids[0]
this.dataForm.communityId = this.ids[1]
this.dataForm.gridId = ''
}
if (val.length === 3) {
this.dataForm.streetId = this.ids[0]
this.dataForm.communityId = this.ids[1]
this.dataForm.gridId = this.ids[2]
}
}
HottestIssueList,
IssueDetailView
},
methods: {
getOptions () {
this.$http.get(`/sys/user/deptOptions/getByLoginUser`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.options = res.data.options
}).catch(() => {})
},
look (id) {
// this.$parent.selectComponent = 'TopicDetail'
// this.$router.push({ path: '/group-topic', query: { id: id } })
init () {
this.selectComponent = HottestIssueList
}
}
}
</script>
<style lang="scss" scoped>
</style>

427
src/views/modules/analysis/issue/issue-detail-view.vue

@ -0,0 +1,427 @@
<template>
<div class="project-handle">
<el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
<div class="project-detail">
<div class="project-detail-tip">议题详情</div>
<el-form label-position="right" label-width="120px">
<el-form-item label="议题内容:">
<div>{{dataForm.issueContent}}</div>
<el-image v-for="url in dataForm.images"
style="width: 100px; height: 100px; margin-right: 10px"
:key="url"
:src="url"
:preview-src-list="previewImgList"
@click="clickImg(url)">
</el-image>
</el-form-item>
<el-form-item label="所属网格:" prop="ownGrid">
<div>{{dataForm.allDeptNames}}</div>
</el-form-item>
<el-form-item v-if="dataForm.groupName && dataForm.groupName.length > 0" label="议题来源:" prop="ownGrid">
<div>{{dataForm.groupName}}</div>
</el-form-item>
<el-form-item v-if="!dataForm.groupName || dataForm.groupName.length == 0" label="议题来源:" prop="ownGrid">
<div>党群议事</div>
</el-form-item>
<el-form-item label="上报时间:">
<div>{{dataForm.distributeTime}}</div>
</el-form-item>
<el-form-item label="上报人:">
<div>{{dataForm.nickName}}</div>
</el-form-item>
<el-form-item label="电话:" prop="mobile">
<div>{{dataForm.mobile}}</div>
</el-form-item>
<el-form-item label="所属类别:" prop="categoryName">
<div>{{dataForm.categoryName}}</div>
</el-form-item>
<el-form-item label="议题态度:">
<span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span>&nbsp;&nbsp;
<span>评论 {{dataForm.commentNum}}</span>&nbsp;&nbsp;
<span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp;
<span>不支持 {{dataForm.opposeNum}}</span>
</el-form-item>
<el-form-item label="议题评论:" v-if="false">
<el-button type="text" @click="innerVisible = true">查看评论</el-button>
</el-form-item>
</el-form>
<div class="container">
<div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.address}}</div>
<div id="map"></div>
</div>
</div>
<div class="project-progress">
<div class="project-progress-tip">处理进展</div>
<el-timeline>
<el-timeline-item
v-for="(item, index) in timeLineList"
:key="item.id"
:color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
<div :id="`content${index}`" style="line-height:25px; ">
<div
:style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' || item.type === 'issue-project' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
v-if="item.type !== 'init'">
{{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
<div v-if="item.state === 3">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">来源社群</span>{{item.groupName}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人</span>{{item.handlerDept}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话</span>{{item.mobile}}</div>
</div>
<div v-if="item.state !== 3">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门</span>{{item.handlerDept}}</div>
</div>
<div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0" style="width: 100%; display: flex;">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">吹哨部门</span> </div>
<div>
<span v-for="(csDept, index1) in item.itemDeptDTOS" :key="index1">
{{ csDept.deptName }}<br/>
</span>
</div>
</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见</span> {{item.advice}}</div>
<div style="display: flex;">
<el-image v-for="url in item.images"
style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;"
:key="url"
:src="url"
:preview-src-list="previewImgList"
alt="处理图片"
@click="clickImg(url)">
</el-image>
</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
<div style="width: 100%; text-align:center; float:left;">
<el-button size="medium" style="width: 95px" type="primary" @click="back">返回</el-button>
</div>
</el-form>
<el-dialog width="90%" title="评论" :visible.sync="innerVisible" append-to-body>
<el-table :data="commentsDTOs" border style="width: 100%;">
<el-table-column prop="user.userName" label="发言人" header-align="center" align="center"></el-table-column>
<el-table-column prop="commentTime" label="发言时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="content" label="发言内容" header-align="center" align="center"></el-table-column>
<el-table-column prop="replyComment.userName" label="被回复人" header-align="center" align="center"></el-table-column>
<el-table-column prop="replyComment.content" label="被回复内容" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button v-if="scope.row.shieldFlag === '0'" type="button" size="small" @click="deleteComment(scope.row.commentId)">屏蔽</el-button>
<el-button v-if="scope.row.shieldFlag === '1'" type="text" size="small">已屏蔽</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="limitVal"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandleNew"
@current-change="pageCurrentChangeHandleNew">
</el-pagination>
</el-dialog>
</div>
</template>
<script>
import BMap from 'BMap'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
export default {
name: 'IssueDetailView',
data () {
return {
map: '',
innerVisible: false,
dataForm: {
id: '',
nickName: '',
distributeTime: '',
issueContent: '',
handleProgressResultDTOS: [],
issueProgressResultDTOS: [],
images: []
},
previewImgList: [],
order: '',
orderField: '',
pageIndex: 1,
limitVal: 10,
total: 0,
commentsDTOs: [],
timeLineList: []
}
},
mounted () {
this.dataForm.id = this.$route.query.id
this.init()
},
filters: {
formatState (item) {
if (item.type === 'project') {
if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
return '吹哨'
} else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
return '回应'
} else if (item.state === 5) {
return '关闭'
} else if (item.state === 10) {
return '结案'
} else if (item.state === 15) {
return '上报网格化平台'
} else if (item.state === 20) {
return '网格化平台-受理'
} else if (item.state === 25) {
return '网格化平台-立案'
} else if (item.state === 30) {
return '网格化平台-派遣'
} else if (item.state === 35) {
return '网格化平台-中间再派'
} else if (item.state === 40) {
return '网格化平台-接单'
} else if (item.state === 45) {
return '网格化平台-处理'
} else if (item.state === 50) {
return '网格化平台-中间督办'
} else if (item.state === 55) {
return '网格化平台-催办'
} else if (item.state === 60) {
return '网格化平台-结案'
}
} else if (item.type === 'issue' || item.type === 'init') {
if (item.state === 0) {
return '审核通过'
} else if (item.state === 1) {
return '回应'
} else if (item.state === 2) {
return '关闭'
} else if (item.state === 3) {
return '转议题'
}
} else if (item.type === 'issue-project') {
return '转项目'
}
}
},
methods: {
back () {
this.$parent.init()
},
initBmap (latitude, longitude) {
this.map = new BMap.Map('map')
const point = new BMap.Point(longitude, latitude)
var marker = new BMap.Marker(point)
this.map.addOverlay(marker)
this.map.centerAndZoom(point, 13)
this.map.enableScrollWheelZoom(true)
},
init () {
this.$nextTick(() => {
if (this.dataForm.id) {
this.getInfo()
this.getCommentList()
}
})
},
deleteComment (val) {
this.$http['post']('/events/issue/deleteComment', { commentIds: [val] }).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.getCommentList()
}
})
}).catch(() => {})
},
clickImg (url) {
this.previewImgList = []
this.previewImgList.push(url)
},
getInfo () {
this.$http.get(`/events/issue/issueContentDetail/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
item.type = 'issue-project'
} else {
item.type = 'project'
}
})
this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
item.type = 'init'
} else {
item.type = 'issue'
}
})
this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
this.$nextTick(() => {
this.timeLineList.forEach((item, index) => {
const oDiv = document.getElementById(`content${index}`)
const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
if (item.type === 'issue' || item.type === 'issue-project') {
oBorder.style.borderLeft = '1px solid #ffa546'
} else if (item.type === 'project') {
oBorder.style.borderLeft = '1px solid #009688'
}
})
})
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
}).catch(() => {})
},
pageSizeChangeHandleNew (val) {
this.pageIndex = 1
this.limitVal = val
this.getCommentList()
},
pageCurrentChangeHandleNew (val) {
this.pageIndex = val
this.getCommentList()
},
getCommentList () {
this.$http.get('/events/issue/comments', { params: { id: this.dataForm.id, order: this.order, orderField: this.orderField, page: this.pageIndex, limit: this.limitVal }
}).then(({ data: res }) => {
if (res.code !== 0) {
this.commentsDTOs = []
this.total = 0
return this.$message.error(res.msg)
}
this.commentsDTOs = res.data.list
this.total = res.data.total
}).catch(() => {})
}
}
}
</script>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
}
.el-form-item__label {
font-weight: bold;
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: calc(100vh - 120px);
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 79%;
height: 80%;
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;
padding-top: 20px;
float:left;
margin-bottom: 1%;
position:relative;
.project-detail-tip {
position: absolute;
top: 0;
left:0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #4ac38b;
text-align:center;
}
.el-form {
width: 58%;
height: 100%;
float:left;
overflow-y:auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #fff;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
}
.container {
width: 40%;
height: 100%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
#map {
width: 100%;
height: calc(100% - 30px);
}
}
}
.project-progress {
width: 20%;
height: 80%;
float: right;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 20px;
overflow-y:auto;
position: relative;
padding-top: 40px;
.project-progress-tip {
position: absolute;
top: 0;
left:0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #0098ff;
text-align:center;
}
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
width: 79%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float:left;
}
}
</style>
Loading…
Cancel
Save