3 changed files with 601 additions and 135 deletions
			
			
		@ -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> | 
				
			|||
@ -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> | 
				
			|||
 | 
				
			|||
@ -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>   | 
				
			|||
                        <span>评论 {{dataForm.commentNum}}</span>   | 
				
			|||
                        <span>支持 {{dataForm.approveNum}}</span>   | 
				
			|||
                        <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…
					
					
				
		Reference in new issue