esua-epdc-admin/src/views/modules/events/issue-reject-detail-view.vue

<template>
    <div class="project-handle">
        <el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
            <div class="project-detail">
                <el-form label-position="right" label-width="120px">
                    <el-form-item label="议题内容:" prop="eventContent">
                        <div>{{dataForm.eventContent}}</div>
                        <span v-for="(imgUrl, index) in dataForm.images" :key="index" style="margin: 5px">
                          <el-popover placement="bottom" title="" trigger="click">
                            <img :src="imgUrl" style='width: 300px;height: 300px;'>
                            <img slot="reference" :src="imgUrl" :alt="imgUrl" style="max-height: 100px;max-width: 100px">
                          </el-popover>
                        </span>
                    </el-form-item>
                    <el-form-item label="所属网格:" prop="ownGrid">
                        <div>{{dataForm.ownGrid}}</div>
                    </el-form-item>
                    <el-form-item label="上报时间:" prop="createdTime">
                        <div>{{dataForm.createdTime}}</div>
                    </el-form-item>
                    <el-form-item label="上报人:" prop="nickName">
                        <div>{{dataForm.nickName}}</div>
                    </el-form-item>
                    <el-form-item label="状态:" prop="stateName">
                        <div>{{dataForm.stateName}}</div>
                    </el-form-item>
                    <el-form-item label="处理意见:" prop="advice">
                        <div>{{dataForm.advice}}</div>
                    </el-form-item>
                </el-form>
                <div class="container">
                    <div class="location">上报位置: {{dataForm.address}}</div>
                    <div id="map"></div>
                </div>
            </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'
export default {
  data () {
    return {
      map: '',
      dataForm: {
        id: '',
        eventContent: '',
        nickName: '',
        stateName: '',
        advice: '',
        eventState: '',
        createdTime: '',
        images: []
      }
    }
  },
  mounted () {
    this.dataForm.id = this.$route.query.id
    this.init()
  },
  methods: {
    backToItemDeal () {
      this.$parent.selectComponent = 'ItemDeal'
    },
    initBmap (latitude, longitude) {
      this.map = new BMap.Map('map')
      const point = new BMap.Point(120.38821849395045, 36.120219258412966)
      var marker = new BMap.Marker(point)
      this.map.addOverlay(marker)
      this.map.centerAndZoom(point, 13)
      this.map.enableScrollWheelZoom(true)
    },
    init () {
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/events/epdcevents/rejectEventDetail/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        console.log(JSON.stringify(this.dataForm))
        this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss">
    .project-handle {
        .el-timeline {
            padding-left: 9px;
            font-size: 13px;
        }
    }
</style>

<style lang="scss" scoped>
    .project-handle {
        width: 100%;
        height: calc(100vh - 50px - 38px - 15px);
        background: #ffffff;
        box-sizing: border-box;
        padding: 10px;
        .project-detail {
            width: 100%;
            height: 70%;
            border: 2px solid #ccc;
            box-sizing: border-box;
            padding: 10px;
            float:left;
            margin-bottom: 1%;
            .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: 100%;
            float: right;
            border: 2px solid #ccc;
            box-sizing: border-box;
            margin-left: 1%;
            padding-top: 20px;
            overflow-y:auto;
            &::-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>