epmet-work-pc-chengyang/src/views/modules/shequzhili/xiangmu/cpts/event-info.vue

<template>
  <div class="">
    <div class="g-page" v-show="pageType == 'info'">
      <div class="g-left">
        <el-card>
          <div class="m-row">
            <div class="m-info">
              <div class="info-title">事件内容</div>
              <div class="info-content">{{ info.eventContent }}</div>
              <div class="info-audio" v-if="info.voiceList.length>0">
                <audio controls>
                  <source
                    :src="item.url"
                    type=""
                    :key="item.url"
                    v-for="item in info.voiceList"
                  />
                </audio>
              </div>
              <div class="info-pics">
                <img
                  :src="src"
                  :key="src"
                  v-for="src in info.eventImgs"
                  @click="watchImg(src)"
                />
              </div>
              <div class="info-prop">
                <span class="info-title-2">提交时间：</span>
                <span>{{ info.eventTime }}</span>
              </div>
              <div class="info-prop">
                <span class="info-title-2">报事人：</span>
                <span>{{ info.eventPeopleName }}</span>
              </div>
              <div class="info-prop">
                <span class="info-title-2">所属网格：</span>
                <span>{{ info.gridName }}</span>
              </div>
              <div class="info-prop">
                <span class="info-title-2">提报给：</span>
                <div>
                  <div>{{ info.eventPersonShow }}</div>
                  <div>{{ info.eventOrgShow }}</div>
                </div>

                <!-- <span>{{ info.eventPerson.join("、") || "--" }}</span> -->
              </div>
            </div>
          </div>

          <div class="m-btns" v-if="type == 'info'">
            <el-button size="" @click="handleClose">关闭</el-button>
          </div>
        </el-card>
      </div>
      <div class="g-right"></div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import foldText from "@/views/components/foldText";
import dateFormat from "dai-js/tools/dateFormat";

function iniData() {
  return {
    pageType: "info",

    info: {
      eventTime: "",
      eventContent: "",
      eventAddress: "",
      gridName: "",
      isClosed: true,
      isResolve: true,
      isRollback: true,
      eventImgs: [],
      eventPerson: [],
      eventOrg: [],
      eventPeopleName: "",
      projectInfo: {
        projectId: "",
        operationName: "",
        operationTime: "",
        projectDeclare: "",
      },
    },
  };
}

export default {
  name: "issueInfo",
  props: {
    eventId: {
      type: String,
      default: "64502a8f1048a7240295527a9b32e513",
    },
    type: {
      type: String,
      default: "info",
    },
  },

  components: {
    foldText,
  },

  data: iniData,

  computed: {},

  watch: {},

  mounted() {
    this.getApiData();
  },

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

    handleClose() {
      this.$emit("close");
    },

    async getApiData() {
      this.getEventInfo();
    },
    //加载组织数据
    async getEventInfo() {
      const url = "/gov/project/resievent/eventdetail-icdata";

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

      if (code === 0) {
        if (data.eventOrg && data.eventOrg.length > 0) {
          data.eventOrgShow = data.eventOrg.join("、");
        }
        if (data.eventPerson && data.eventPerson.length > 0) {
          data.eventPersonShow = data.eventPerson.join("、");
        }
        this.info = { ...data };
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/shequzhili/project-info.scss"
  scoped
></style>