epmet-work-pc-chengyang/src/views/modules/shequzhili/issue/cpts/eventDetail.vue

<template>
  <div class="epidemic-form">
    <div class="dialog-h-content scroll-h">
      <div v-if="initLoading"
           class="m-detail-main">
        <div class="m-info">
          <div class="m-info-prop">
            <span class="u-info-title-2">所属网格：</span>
            <span>{{ eventDetailData.gridName||'--'  }}</span>
          </div>

          <div class="m-info-prop">
            <span class="u-info-title-2">发生时间：</span>
            <span>{{ eventDetailData.happenTime||'--' }}</span>
          </div>

          <div class="m-info-prop">
            <span class="u-info-title-2">事件内容：</span>
            <span>{{ eventDetailData.eventContent||'--'  }}</span>
          </div>

          <div class="m-info-prop"
               v-if="eventDetailData.imageList&&eventDetailData.imageList.length>0">
            <span class="u-info-title-2">图片：</span>

            <div class="m-info-pics">

              <img v-for="(item,index) in eventDetailData.imageList"
                   style="width:80px;height:80px"
                   :key="index"
                   :src="item"
                   @click="watchImg(item)">

            </div>
          </div>
          <div class="m-info-prop"
               v-if="eventDetailData.voiceList&&eventDetailData.voiceList.length>0">
            <span class="u-info-title-2">音频：</span>

            <audio controls>
              <source :src="item.url"
                      type=""
                      :key="item.url"
                      v-for="item in eventDetailData.voiceList" />
            </audio>

          </div>

          <div class="m-info-prop">
            <span class="u-info-title-2">反映渠道：</span>
            <span>{{ eventDetailData.sourceTypeName||'--'  }}</span>
          </div>
          <div class="m-info-prop">
            <span class="u-info-title-2">地址：</span>
            <span>{{ eventDetailData.address||'--'  }}</span>
          </div>
          <div class="m-info-prop">
            <span class="u-info-title-2">报事人：</span>
            <span>{{ eventDetailData.name||'--'  }}</span>
          </div>
          <div class="m-info-prop">
            <span class="u-info-title-2">手机号：</span>
            <span>{{ eventDetailData.mobile||'--'  }}</span>
          </div>
          <div class="m-info-prop">
            <span class="u-info-title-2">身份证号：</span>
            <span>{{ eventDetailData.idCard||'--'  }}</span>
          </div>
          <div class="m-info-prop">
            <span class="u-info-title-2">痛点难点：</span>
            <span>{{ eventDetailData.difficultPointName||'--'  }}</span>
          </div>
          <div v-if="eventDetailData.satisfactionName"
               class="m-info-prop">
            <span class="u-info-title-2">满意度：</span>
            <span>{{ eventDetailData.satisfactionName||'--'  }}</span>
          </div>

        </div>
      </div>

    </div>

    <div class="div-btn">
      <el-button size="small"
                 @click="handleCancle">关 闭</el-button>
      <!-- <el-button v-if="formType != 'detail'"
                 size="small"
                 type="primary"
                 :disabled="btnDisable"
                 @click="handleComfirm">确 定</el-button> -->
    </div>

  </div>
</template>

<script>

import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import dateFormat from "dai-js/tools/dateFormat";


let loading // 加载动画
export default {
  data () {
    return {
      initLoading: false,
      eventId: '',
      eventDetailData: {},

      voiceList: [],


    }
  },
  components: {},
  async mounted () {
    const { user } = this.$store.state
    this.agencyId = user.agencyId

  },

  methods: {


    async initForm (eventId) {
      this.startLoading()
      this.eventId = eventId
      await this.loadForm()
      this.initLoading = true
      this.endLoading()


    },
    async loadForm () {

      const url = "/gov/project/icEvent/detail";

      const { data, code, msg } = await requestPost(url, {
        icEventId: this.eventId,
      });

      if (code === 0) {

        this.eventDetailData = { ...data };

      } else {
        this.$message.error(msg);
      }
    },

    handleCancle () {
      // this.resetData()
      this.$emit('diaDetailClose')

    },

    watchImg (src) {
      window.open(src);
    },

    resetData () {

      this.eventDetailData = {}
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {


  },
  props: {
    // serviceList: {
    //   type: Array,
    //   default: []
    // },
  }
}
</script>


<style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";
</style>