From 8af37788c5674cf4dcf11a1146f193b73674f43a Mon Sep 17 00:00:00 2001
From: zhaoyongnian <541231643@qq.com>
Date: Mon, 5 Sep 2022 16:44:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=89=E5=90=88=E4=B8=80=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/events/appeal-detail-view.vue     | 358 ++++++++++++
 .../modules/events/appeal-enforcement-add.vue | 516 ++++++++++++++++++
 src/views/modules/events/appeal-list.vue      | 213 ++++++++
 src/views/modules/events/appeal.vue           |  30 +
 4 files changed, 1117 insertions(+)
 create mode 100644 src/views/modules/events/appeal-detail-view.vue
 create mode 100644 src/views/modules/events/appeal-enforcement-add.vue
 create mode 100644 src/views/modules/events/appeal-list.vue
 create mode 100644 src/views/modules/events/appeal.vue

diff --git a/src/views/modules/events/appeal-detail-view.vue b/src/views/modules/events/appeal-detail-view.vue
new file mode 100644
index 00000000..e9752ad2
--- /dev/null
+++ b/src/views/modules/events/appeal-detail-view.vue
@@ -0,0 +1,358 @@
+<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="145px">
+            <el-form-item label="诉求内容:">
+              <div>{{dataForm.itemContent}}</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>
+                <div v-if="dataForm.voice">
+                    <audio controls style="height: 30px;">
+                        <source :src="dataForm.voice" >
+                    </audio>
+                </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 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>
+          <div class="container">
+              <div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.issueAddress}}</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>
+
+  </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: 'itemCloseDetailView',
+  data () {
+    return {
+      map: '',
+      dataForm: {
+        id: '',
+        nickName: '',
+        distributeTime: '',
+        itemContent: '',
+        handleProgressResultDTOS: [],
+        issueProgressResultDTOS: [],
+        images: [],
+        voice: ''
+      },
+      previewImgList: [],
+      order: '',
+      orderField: '',
+
+      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()
+      // this.$router.push({ path: this.$route.path })
+    },
+    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()
+        }
+      })
+    },
+    clickImg (url) {
+      this.previewImgList = []
+      this.previewImgList.push(url)
+    },
+
+    getInfo () {
+      this.$http.get(`/events/item/getItemAppealDetail/${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
+            console.log(111)
+            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(() => {})
+    }
+  }
+}
+</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;
+            float:left;
+            margin-bottom: 1%;
+            position: relative;
+             padding-top: 20px;
+            .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: #aaa;
+                }
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: #fff;
+                }
+            }
+            .container {
+                width: 40%;
+                height: 80%;
+                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>
diff --git a/src/views/modules/events/appeal-enforcement-add.vue b/src/views/modules/events/appeal-enforcement-add.vue
new file mode 100644
index 00000000..0be961cc
--- /dev/null
+++ b/src/views/modules/events/appeal-enforcement-add.vue
@@ -0,0 +1,516 @@
+<template>
+  <el-dialog :visible.sync="visible"
+             :title="!dataForm.id ? $t('add') : $t('update')"
+             :close-on-click-modal="false"
+             :close-on-press-escape="false"
+             width="700px"
+             customClass="customWidth">
+    <el-form :model="dataForm"
+             :rules="dataRule"
+             ref="dataForm"
+             @keyup.enter.native="dataFormSubmitHandle()"
+             :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+      <el-form-item label="事项名称"
+                    prop="lawName" label-width="120px">
+        <el-input v-model="dataForm.lawName"
+                  placeholder="请输入事项名称" style="width:90%;" maxlength="10"></el-input>
+      </el-form-item>
+      <el-form-item label="诉求详情"
+                    prop="lawContent" label-width="120px">
+        <el-input v-model="dataForm.lawContent"
+                  type="textarea"
+                  :rows="6"
+                  maxlength="500"
+                  placeholder="请输入主要诉求内容（诉求详情不少于10个字）" style="width:90%;"></el-input>
+      </el-form-item>
+
+      <el-form-item label="建议主办单位"
+                    prop="hostUnit" label-width="120px">
+        <el-input v-model="dataForm.hostUnit"
+                  type="textarea"
+                  :rows="6"
+                  maxlength="500"
+                  placeholder="请输入" style="width:90%;"></el-input>
+      </el-form-item>
+      <el-form-item label="建议协办单位"
+                    prop="assistUnit" label-width="120px">
+        <el-input v-model="dataForm.assistUnit"
+                  placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
+      </el-form-item>
+
+      <el-form-item label="有关需求"
+                    prop="demand" label-width="120px">
+        <el-input v-model="dataForm.demand"
+                  type="textarea"
+                  :rows="6"
+                  maxlength="500"
+                  placeholder="拟邀请区xx局分管局长、xx科长；熟悉xx相关业务的科室负责人。（可提出参会人员要求）" style="width:90%;"></el-input>
+      </el-form-item>
+      <el-form-item label="事项类型"
+                    prop="demand" label-width="120px">
+          <el-radio-group v-model="dataForm.lawType"
+              :disabled="!!dataForm.id">
+            <el-radio :label="0">计划事项</el-radio>
+            <el-radio :label="1">临时事项</el-radio>
+          </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="与部门是否沟通"
+                    prop="demand" label-width="120px">
+          <el-radio-group v-model="dataForm.isExchange"
+              :disabled="!!dataForm.id">
+            <el-radio :label="0">已经沟通</el-radio>
+            <el-radio :label="1">尚未沟通</el-radio>
+          </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="召集人姓名"
+                    prop="convenerName" label-width="120px">
+        <el-input v-model="dataForm.convenerName"
+                  placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
+      </el-form-item>
+
+      <el-form-item label="召集人职务"
+                    prop="convenerJob" label-width="120px">
+        <el-input v-model="dataForm.convenerJob"
+                  placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
+      </el-form-item>
+
+      <el-form-item label="召集人电话"
+                    prop="convenerMobile" label-width="120px">
+        <el-input v-model="dataForm.convenerMobile"
+                  placeholder="请输入" style="width:90%;" maxlength="11"></el-input>
+      </el-form-item>
+
+      <el-form-item label="联系人姓名"
+                    prop="contactName" label-width="120px">
+        <el-input v-model="dataForm.contactName"
+                  placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
+      </el-form-item>
+
+      <el-form-item label="联系人职务"
+                    prop="contactJob" label-width="120px">
+        <el-input v-model="dataForm.contactJob"
+                  placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
+      </el-form-item>
+
+      <el-form-item label="联系人电话"
+                    prop="contactMobile" label-width="120px">
+        <el-input v-model="dataForm.contactMobile"
+                  placeholder="请输入" style="width:90%;" maxlength="11"></el-input>
+      </el-form-item>
+
+      <el-form-item label="报到时间"
+                    prop="reportTime"
+                    label-width="120px">
+          <el-date-picker v-model="dataForm.reportTime"
+                          type="datetime"
+                          :picker-options="pickerBeginDateBefore"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          format="yyyy-MM-dd HH:mm:ss"
+                          placeholder="选择日期时间">
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item label="报道地点" prop="reportAddress" label-width="120px">
+          <el-input v-model="dataForm.reportAddress" type="text" clearable style="width:50%;"></el-input>&emsp;
+          <el-button type="primary" @click="searchKeyword()" class="custom-button-default">搜索</el-button>
+        </el-form-item>
+
+        <el-form-item label=" " prop="map">
+          <div>
+            <div id="container" style="width:500px;height:400px;"></div>
+          </div>
+        </el-form-item>
+
+      <el-form-item label="会议名称"
+                    prop="meetingName" label-width="120px">
+        <el-input v-model="dataForm.meetingName"
+                  placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
+      </el-form-item>
+      <el-form-item label="上传图片" prop="images" label-width="120px">
+        <el-upload  accept="image/png, image/jpeg"
+                    :action="uploadUrl"
+                    list-type="picture-card"
+                    :file-list="dataForm.images"
+                    :limit="3"
+                    :on-success="handleAvatarActSuccess"
+                    :on-remove="removeImage"
+                    :on-exceed="handleExceed">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary"
+                 @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import jsonp from 'jsonp'
+import Cookies from 'js-cookie'
+var searchService
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        lawName: '', // 事项名称不可为空
+        lawContent: '', // 诉求详情不可为空
+        hostUnit: '', // 主办单位不可为空
+        assistUnit: '', // 协办单位不可为空
+        demand: '', // 有关需求不可为空
+        lawType: '', // 事项类型不可为空
+        isExchange: '', // 是否沟通不可为空
+        convenerName: '', // 召集人姓名不可为空
+        convenerJob: '', // 召集人职务不可为空
+        convenerMobile: '', // 召集人电话不可为空
+        contactName: '', // 联系人姓名不可为空
+        contactJob: '', // 联系人职务不可为空
+        contactMobile: '', // 联系人电话不可为空
+        reportTime: '', // 报到时间不能为空
+        reportAddress: '', // 报到地点不可为空
+        issueLatitude: 0, // 纬度不能为空
+        issueLongitude: 0, // 经度不能为空
+        meetingName: '', // 会议名称不可为空
+        itemVoice: '', // 语音
+        duration: '', // 语音时长
+        images: [], // 图片
+        city: '',
+        radius: 200
+      },
+      uploadUrl: '',
+      loading: false,
+      pickerBeginDateBefore: {
+        disabledDate: (time) => {
+          let beginDateVal = this.dataForm.endTime
+          if (beginDateVal) {
+            return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
+          }
+        }
+      }
+    }
+  },
+  watch: {
+  },
+  computed: {
+    dataRule () {
+      return {
+
+        lawName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        lawContent: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        hostUnit: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        assistUnit: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        demand: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        lawType: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+
+        isExchange: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        convenerName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        convenerJob: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        convenerMobile: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确号码格式', trigger: 'blur' }
+        ],
+        contactName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        contactJob: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        contactMobile: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确号码格式', trigger: 'blur' }
+        ],
+        reportTime: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        reportAddress: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+
+        meetingName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.getMyLocation()
+        this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+      })
+    },
+    getAddress (lat, lng) {
+      this.dataForm.issueLongitude = lng
+      this.dataForm.issueLatitude = lat
+      var url3 =
+        'https://apis.map.qq.com/ws/geocoder/v1/?location=' +
+        lat +
+        ',' +
+        lng +
+        '&key=MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M&output=jsonp'
+      jsonp(url3, null, (err, data) => {
+        if (err) {
+          console.log(err)
+        }
+        console.log(data)
+        this.dataForm.reportAddress = data.result.address
+      })
+    },
+    getMyLocation () {
+      var geolocation = new qq.maps.Geolocation(
+        'MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M',
+        'e家党群-管理端'
+      )
+      geolocation.getIpLocation(this.showPosition, this.showErr)
+    },
+    showPosition (position) {
+      console.log(position)
+      this.dataForm.issueLatitude = position.lat
+      this.dataForm.issueLongitude = position.lng
+      this.dataForm.city = position.city
+      this.setMap()
+    },
+    showErr () {
+      console.log('定位失败')
+      this.getMyLocation() // 定位失败再请求定位，测试使用
+    },
+    setMap () {
+      const that = this
+      var markerList = []
+      var radiusList = []
+      // 步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
+      // 设置地图中心点
+      var myLatlng = new qq.maps.LatLng(
+        this.dataForm.issueLatitude,
+        this.dataForm.issueLongitude
+      )
+      // 定义工厂模式函数
+      var zoom = this.capacity()
+      var myOptions = {
+        zoom: zoom, // 设置地图缩放级别
+        center: myLatlng, // 设置中心点样式
+        mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
+      }
+      // 获取dom元素添加地图信息
+      var map = new qq.maps.Map(
+        document.getElementById('container'),
+        myOptions
+      )
+      // 设置圆形
+      var radius = new qq.maps.Circle({
+        center: new qq.maps.LatLng(
+          this.dataForm.issueLatitude,
+          this.dataForm.issueLongitude
+        ),
+        radius: this.dataForm.radius,
+        map: map
+      })
+      radiusList.push(radius)
+      var marker = new qq.maps.Marker({
+        position: myLatlng,
+        map: map
+      })
+      markerList.push(marker)
+      // 初始化mark点击事件
+      that.getAddress(that.dataForm.issueLatitude, that.dataForm.issueLongitude)
+      qq.maps.event.addListener(marker, 'click', function (event) {
+        that.addressCheckHandle()
+      })
+      // 添加监听事件   获取鼠标单击事件
+      qq.maps.event.addListener(map, 'click', function (event) {
+        that.cleanMarkRadius(markerList, radiusList)
+        that.getAddress(event.latLng.lat, event.latLng.lng)
+        var myLatlng = new qq.maps.LatLng(event.latLng.lat, event.latLng.lng)
+        map.setCenter(myLatlng)
+        var marker = new qq.maps.Marker({
+          position: event.latLng,
+          map: map
+        })
+        // 设置圆形
+        var radius = new qq.maps.Circle({
+          center: new qq.maps.LatLng(event.latLng.lat, event.latLng.lng),
+          radius: that.dataForm.radius,
+          map: map
+        })
+        radiusList.push(radius)
+        markerList.push(marker)
+        qq.maps.event.addListener(map, 'click', function (event) {
+          that.cleanMarkRadius(markerList, radiusList)
+        })
+        qq.maps.event.addListener(marker, 'click', function (event) {
+          that.addressCheckHandle()
+        })
+      })
+      // 调用地址解析类
+      searchService = new qq.maps.SearchService({
+        complete: function (result) {
+          var pois = result.detail.pois
+          if (pois == null || pois.length <= 0) {
+            alert('未找到地址!')
+            that.getAddress(that.dataForm.issueLatitude, that.dataForm.issueLongitude)
+            return
+          }
+          map.setCenter(pois[0].latLng)
+          that.getAddress(pois[0].latLng.lat, pois[0].latLng.lng)
+          var marker = new qq.maps.Marker({
+            map: map,
+            position: pois[0].latLng
+          })
+          // 设置圆形
+          var radius = new qq.maps.Circle({
+            center: new qq.maps.LatLng(pois[0].latLng.lat, pois[0].latLng.lng),
+            radius: that.dataForm.radius,
+            map: map
+          })
+          radiusList.push(radius)
+          markerList.push(marker)
+          that.cleanMarkRadius(markerList, radiusList)
+          qq.maps.event.addListener(marker, 'click', function (event) {
+            that.addressCheckHandle()
+          })
+        }
+      })
+    },
+    searchKeyword () {
+      searchService.setLocation(this.dataForm.city)
+      searchService.search(this.dataForm.reportAddress)
+    },
+    addressCheckHandle () {
+      if (this.dataForm.reportAddress === '' || !(this.dataForm.issueLatitude > 0)) {
+        alert('请选择地址!')
+        return
+      }
+      this.addressCheckVisible = true
+      this.$nextTick(() => {
+        this.$refs.addressCheck.init(this.dataForm)
+      })
+    },
+    cleanMarkRadius (markerList, radiusList) {
+      if (markerList) {
+        if (markerList.length > 1) {
+          for (var i4 = 0; i4 < markerList.length - 1; i4++) {
+            markerList[i4].setMap(null)
+          }
+        } else {
+          for (var i3 = 0; i3 < markerList.length; i3++) {
+            markerList[i3].setMap(null)
+          }
+        }
+      }
+      if (radiusList) {
+        if (radiusList.length > 1) {
+          for (var i2 = 0; i2 < radiusList.length - 1; i2++) {
+            radiusList[i2].setMap(null)
+          }
+        } else {
+          for (var i1 = 0; i1 < markerList.length; i1++) {
+            radiusList[i1].setMap(null)
+          }
+        }
+      }
+    },
+    capacity () {
+      if (this.dataForm.radius > 0 && this.dataForm.radius <= 25) {
+        return 18
+      } else if (this.dataForm.radius > 25 && this.dataForm.radius <= 50) {
+        return 17
+      } else if (this.dataForm.radius > 50 && this.dataForm.radius <= 100) {
+        return 16
+      } else if (this.dataForm.radius > 100 && this.dataForm.radius <= 200) {
+        return 15
+      } else if (this.dataForm.radius > 200 && this.dataForm.radius <= 500) {
+        return 14
+      } else if (this.dataForm.radius > 500 && this.dataForm.radius <= 1000) {
+        return 13
+      } else if (this.dataForm.radius > 1000 && this.dataForm.radius <= 2000) {
+        return 12
+      } else if (this.dataForm.radius > 2000 && this.dataForm.radius <= 5000) {
+        return 11
+      }
+    },
+    // 图片处理
+    handleAvatarActSuccess (res, file) {
+      let image = {}
+      image.name = Math.round(Math.random() * 5)
+      image.url = res.data.url
+      this.dataForm.images.push(image)
+      this.imgDataRule = false
+    },
+    removeImage (file, fileList) {
+      this.dataForm.images = fileList
+      if (this.dataForm.images.length > 0) {
+        this.imgDataRule = false
+      } else {
+        this.imgDataRule = true
+      }
+    },
+    handleExceed () {
+      this.$message({
+        showClose: true,
+        message: '最多上传三张图片',
+        type: 'warning'
+      })
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      let images = []
+      if (this.dataForm.images.length > 0) {
+        this.dataForm.images.forEach(element => {
+          images.push(element.url)
+        })
+      }
+      this.dataForm.images = images
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http['post']('/events/work/item/submitLawItem', this.dataForm).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.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => { })
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>
+<style lang="scss">
+  .customWidth {
+  width:35%
+  }
+</style>
diff --git a/src/views/modules/events/appeal-list.vue b/src/views/modules/events/appeal-list.vue
new file mode 100644
index 00000000..f91eaf63
--- /dev/null
+++ b/src/views/modules/events/appeal-list.vue
@@ -0,0 +1,213 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+      <div class="mod-item__item}">
+          <el-form
+                  :inline="true"
+                  :model="dataForm"
+                  @keyup.enter.native="getDataListSearch()"
+          >
+              <el-form-item label="诉求类型" prop="appealType" label-width="80px">
+                <el-select v-model="dataForm.appealType" placeholder="请选择" clearable>
+                  <el-option label="民生" value="0"> </el-option>
+                  <el-option label="发展" value="1"> </el-option>
+                  <el-option label="执法" value="2"> </el-option>
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="项目内容" prop="itemCode">
+                  <el-input
+                          v-model="dataForm.itemContent"
+                          placeholder="请输入项目内容"
+                          clearable
+                          @keyup.native="btKeyUpItemContent"
+                          style="width:200px;"
+                  ></el-input>
+              </el-form-item>
+              <br>
+              <div>
+                  <el-form-item label="上报起始时间" prop="startTime" label-width="100px">
+                      <el-date-picker
+                              v-model="dataForm.startTime"
+                              type="date"
+                              :picker-options="pickerBeginDateBefore"
+                              value-format="yyyy-MM-dd"
+                              format="yyyy-MM-dd"
+                              placeholder="选择日期时间"
+                              style="width:250px;" @change="changeTime"
+                      >
+                      </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="选择日期时间"
+                              style="width:250px;" @change="changeTime"
+                      >
+                      </el-date-picker>
+                  </el-form-item>
+                  <el-form-item>
+                      <el-button type="success" @click="getDataListSearch()" class="custom-button-default">{{ $t('query') }}</el-button>
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary"
+                               class="custom-button-add"
+                               @click="addAppealEnforcement()">新增执法诉求</el-button>
+                  </el-form-item>
+                <!-- <el-form-item>
+                  <el-button type="success"
+                      @click="exportHandle()" class="custom-button-modify">{{ $t('export') }}</el-button>
+                </el-form-item> -->
+              </div>
+          </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="itemContent"
+                      label="项目内容"
+                      header-align="center"
+                      min-width="400"
+                      align="left"
+                      show-overflow-tooltip
+              ></el-table-column>
+              <el-table-column
+                      prop="createdTime"
+                      label="转成项目时间"
+                      header-align="center"
+                      width="180"
+                      align="center"
+              ></el-table-column>
+              <el-table-column
+                      prop="nickName"
+                      label="提交人"
+                      header-align="center"
+                      min-width="200"
+                      align="center"
+                      show-overflow-tooltip
+              ></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"
+                          class="custom-table-button-default"
+                          @click="dealAction(scope.row.id)">详情
+                      </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>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"></add-or-update>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './appeal-enforcement-add'
+
+export default {
+  mixins: [mixinViewModule],
+  name: 'AppealList',
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/events/item/getItemAppealPage',
+        getDataListIsPage: true,
+        exportURL: '/events/item/unexport'
+      },
+      dataForm: {
+        id: '',
+        itemState: '0',
+        startTime: '',
+        endTime: '',
+        streetId: '',
+        communityId: '',
+        gridId: '',
+        itemCode: '',
+        itemContent: '',
+        nickName: '',
+        mobile: '',
+        appealType: ''
+
+      },
+      addOrUpdateVisible: false,
+      pickerBeginDateBefore: {
+        disabledDate: (time) => {
+          let beginDateVal = this.dataForm.endTime
+          if (beginDateVal) {
+            return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
+          }
+        }
+      },
+      pickerBeginDateAfter: {
+        disabledDate: (time) => {
+          let EndDateVal = this.dataForm.startTime
+          if (EndDateVal) {
+            return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
+          }
+        }
+      }
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  created: function () {
+
+  },
+  watch: {
+
+  },
+  methods: {
+    dealAction (id) {
+      this.$parent.selectComponent = 'AppealDetailView'
+      this.$router.push({ path: '/events-appeal', query: { id: id } })
+    },
+    addAppealEnforcement () {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init()
+      })
+    },
+    btKeyUpItemContent (e) {
+      e.target.value = e.target.value.replace(/[`~!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】\\[\]、；‘’，。、\s+]/g, '')
+      this.dataForm.itemContent = e.target.value
+    }
+  }
+}
+</script>
diff --git a/src/views/modules/events/appeal.vue b/src/views/modules/events/appeal.vue
new file mode 100644
index 00000000..02df36a1
--- /dev/null
+++ b/src/views/modules/events/appeal.vue
@@ -0,0 +1,30 @@
+<template>
+  <keep-alive include="AppealList">
+      <component :is="selectComponent"></component>
+  </keep-alive>
+</template>
+
+<script>
+import AppealList from './appeal-list'
+import AppealDetailView from './appeal-detail-view'
+export default {
+  data () {
+    return {
+      selectComponent: AppealList
+    }
+  },
+  components: {
+    AppealList,
+    AppealDetailView
+  },
+  methods: {
+    init () {
+      this.selectComponent = AppealList
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>