epmet-work-pc-chengyang/src/views/dataBoard/overview/components/EventDetail.vue

<template>
  <div>
    <el-dialog
        :destroy-on-close="true"
        :modal="true"
        :modal-append-to-body="false"
        :visible="showDialog"
        width="1118px"
        @close="handleClose"

    >
      <div class="main-title main-title2">
        <Title text="事件详情"/>
      </div>
      <div v-loading="loading"
           class="eventWrap"
           element-loading-background="rgba(0, 0, 0, 0.5)"
           element-loading-spinner="el-icon-loading"
           element-loading-text="加载中"
      >
        <el-row :gutter="32">
          <el-col
              :span="13"
              style="padding-left: 40px"
          >
            <div class="leftEvent">
              <div class="eventDetails">
                <img
                    :height="18"
                    :width="18"
                    src="@/assets/images/manyidu/tc-title-icon.png"
                />事项详情
              </div>
              <div class="eventItem">
                {{ item.eventContent }}
              </div>
              <div class="eventItem">
                <span>所属组织：</span>
                <span>{{ item.gridName }}</span>
              </div>
              <div class="eventItem">
                <span>上报渠道：</span>
                <span>{{ item.sourceTypeName }}</span>
              </div>
              <div class="eventItem">
                <span>事件类型：</span>
                <span>{{ item.categoryName }}</span>
              </div>
              <div class="eventItem">
                <span>接收时间：</span>
                <span>{{ item.happenTime }}</span>
              </div>
              <div class="eventItem">
                <span>联系人：</span>
                <span>{{ item.name }}</span>
              </div>
              <div class="eventItem">
                <span>联系电话：</span>
                <span>{{ item.mobile }}</span>
                <CallPhone icon="el-icon-phone"/>
              </div>
              <div class="eventItem">
                <span>详细地址：</span>
                <span>{{ item.address }}</span>
              </div>
              <div class="eventItem">
                <span>办结时限：</span>
                <span>{{ item.latestOperatedTime }}</span>
              </div>
              <div class="eventItem">
                <span>满意度评价：</span>
                <span>{{ item.satisfactionName }}</span>
              </div>
            </div>
          </el-col>
          <el-col
              :span="11"
          >
            <div class="rightEvent m-info">
              <div class="eventDetails">
                <img
                    :height="18"
                    :width="18"
                    src="@/assets/images/manyidu/tc-title-icon.png"
                />办理进展
              </div>
              <!-- <el-timeline class="timeline" :reverse="true">
                  <el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''">
                    <div class="status-box">
                      <div class="status1" v-if="index == activities.length - 1">回复</div>
                      <div class="status2" v-else>完成并回复</div>
                      <div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div>
                    </div>
                    <div class="content">
                      <div class="field">回复人：</div>
                      <div class="value">{{ item.departmentName }}</div>
                    </div>
                    <div class="content">
                      <div class="field">回复内容：</div>
                      <div class="value">{{ item.publicReply }}</div>
                    </div>
                  </el-timeline-item>
                </el-timeline> -->
              <div v-if="activities.length > 0">
                <!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> -->
                <div class="m-process">
                  <div class="list">
                    <div
                        v-for="(item, index) in activities"
                        :key="item.processId"
                        :class="[index === 0 ? 'z-on' : '']"
                        class="item"
                    >
                      <div class="item-row">
                        <template v-if="item.agencyId">
                          <div class="name">指派</div>
                        </template>
                        <template v-if="!item.timeLimit">
                          <div class="name">完成并回复</div>
                        </template>
                        <template v-if="!item.agencyId && item.timeLimit">
                          <div class="name">{{ item.processName }}</div>
                        </template>
                        <div class="date">
                          {{
                            item.processTime ? getTrueTime(item.processTime) : ""
                          }}
                        </div>
                      </div>
                      <div v-if="item.type === 'event'">
                        <template v-if="item.agencyId">
                          <div class="detail">
                            <div class="detail-field">指派人：</div>
                            <div class="detail-value">
                              {{ item.departmentName }}
                            </div>
                          </div>
                          <div class="detail">
                            <div class="detail-field">指派部门：</div>
                            <div class="detail-value">
                              {{ item.agencyName }}
                            </div>
                          </div>
                          <div class="detail">
                            <div class="detail-field">转办意见：</div>
                            <div class="detail-value">
                              {{ item.publicReply }}
                            </div>
                          </div>
                          <div class="detail">
                            <div class="detail-field">办结时限：</div>
                            <div class="detail-value">
                              {{ item.timeLimit }}
                            </div>
                          </div>
                        </template>
                        <template v-else>
                          <div class="detail">
                            <div class="detail-field">回复人：</div>
                            <div class="detail-value">
                              {{ item.departmentName }}
                            </div>
                          </div>
                          <div class="detail">
                            <div class="detail-field">回复内容：</div>
                            <div class="detail-value">
                              {{ item.publicReply }}
                            </div>
                          </div>
                          <div v-if="item.timeLimit" class="detail">
                            <div class="detail-field">办结时限：</div>
                            <div class="detail-value">
                              {{ getTrueTime(item.timeLimit) }}
                            </div>
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- </el-card> -->
              </div>
            </div>
          </el-col>
        </el-row>

        <div class="btn-group">
          <el-button class="green" plain round type="success" @click="handleDispatch">资源调度</el-button>
          <el-button class="orange" plain round type="warning" @click="handleSupervision">催办督办</el-button>
        </div>

      </div>
    </el-dialog>
    <ResourceScheduling ref="ResourceScheduling" :currentLevelData="currentLevelData" @handle="dispatchOrder"/>
    <Supervision ref="supervision" :currentLevelData="currentLevelData"/>
    <EventDispatchOrder
        v-if="isEventDispatchOrder"
        ref="EventDispatchOrder"
        @close="isEventDispatchOrder = false"
        @ok="handleSure"
    />
  </div>
</template>

<script>
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
import CallPhone from "@/views/dataBoard/cpts/CallPhone.vue";
import ResourceScheduling from "@/views/dataBoard/overview/components/ResourceScheduling.vue";
import Supervision from "@/views/dataBoard/overview/components/Supervision.vue";
import EventDispatchOrder from "@/views/dataBoard/overview/components/EventDispatchOrder.vue";


export default {
  name: "EventDetail",
  components: {
    CallPhone,
    Title,
    ResourceScheduling,
    Supervision,
    EventDispatchOrder
  },
  props: {
    currentLevelData: {
      type: Object,
      default: () => {
      },
    },
    id: {
      type: String,
      default: "",
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
    is12345: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      item: {},
      loading: false,
      loading1: false,
      activities: [],
      isEventDispatchOrder: false
    };
  },

  computed: {},
  watch: {
    showDialog: {
      handler(val) {
        if (val) {
          this.getDetailsData(this.id);
          this.getProcessData(this.id);
        } else {
          this.item = {}
          this.activities = []
        }
      },
      immediate: true,
    },
  },
  mounted() {
  },

  methods: {
    handleClose() {
      this.$emit("close", false);
      this.item = {};
    },
    handleSure() {
      this.$emit("ok");
      this.handleClose()
    },
    handleDispatch() {
      this.$refs.ResourceScheduling.open()
    },
    handleSupervision() {
      this.$refs.supervision.open(this.item,this.id, 'event')
    },
    openImg(src) {
      window.open(src);
    },

    getTrueTime(time) {
      return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
    },

    getDetailsData(id) {
      this.loading = true;
      console.log(this.is12345)
      let url
      if(this.is12345) {
        url = "/governance/icEvent/detail"
      } else {
        url = "/governance/icEventOld/detail"
      }
      this.$http
          .post(url, {icEventId: id})
          .then((res) => {
            const {code, data, msg} = res.data;
            if (code === 0) {
              this.item = data;
              this.loading = false;
            } else {
              this.loading = false;
              this.$message.error(msg);
            }
          });
    },

    getProcessData(id) {
      let url
      if(this.is12345) {
        url = "/governance/icEvent/process"
      } else {
        url = "/governance/icEventOld/process"
      }
      this.$http
          .post(url, {icEventId: id})
          .then((res) => {
            const {code, data, msg} = res.data;
            if (code === 0) {
              this.activities = data;
              this.loading1 = false;
            } else {
              this.loading1 = false;
              this.$message.error(msg);
            }
          });
    },
    dispatchOrder(data) {
      this.isEventDispatchOrder = true
      this.$nextTick(() => {
        this.$refs.EventDispatchOrder.open(this.item);
      })
    }
  },
};
</script>

<style lang="scss" scoped src="@/assets/scss/dataBoard/popup-info.scss"></style>

<style lang="scss" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";
@import "@/assets/scss/dataBoard/dialog.scss";

@mixin fontStyle {
  color: #fff !important;
  font-size: 14px !important;
}

.eventWrap {
  overflow-x: hidden;
  //height: 798px;
  overflow-y: auto;
  width: 1094px;
  padding: 24px;

  .eventDetails {
    font-size: 18px;
    margin: 0px 24px 48px 0;
    color: #ffffff;

    img {
      margin-top: -4px;
      margin-right: 8px;
    }
  }

  .m-info {
    padding: 0px !important;

    .m-process {
      margin: 0 !important;

      .name {
        @include fontStyle;
      }

      .date {
        @include fontStyle;
      }

      .detail {
        @include fontStyle;

        .detail-field {
          flex: none !important;
        }
      }
    }
  }

  .leftEvent {
    color: #fff;

    .eventItem {
      font-size: 14px;
      margin-bottom: 23px;
      color: #FFFFFF;

      span:first-child {
        color: #9CB4D3
      }

      span:last-child {
      }
    }
  }

  .rightEvent {
    color: #fff;
  }
}


.btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  .green {
    color: #00CD96;
    border: 1px solid #00CD96;
    background: rgba(39, 189, 127, 0.3);
  }

  .el-button {
    width: 136px;
    height: 36px;
    margin: 0 20px;
  }

  .orange {
    color: #FD8904;
    border: 1px solid #FD8904;
    background: rgba(253, 137, 4, 0.3);
  }


}

</style>