yjhtgl-web/src/views/duty/eventing/eventDetails.vue

<template>
  <div class="detail-container">
    <div class="common-back-box" @click="handleBack">
      <i class="common-back" />
      返回上一级
    </div>
    <div class="common-header">
      <div class="common-header-left">
        <i class="common-title-icon" />
        <div>{{ detailData.event_title }}</div>
      </div>
      <div class="common-header-right">
        <el-button type="primary" :disabled="detailData.del_flag == '2'" @click="handleUpdate">
          <i class="edit-icon2" />
          编辑
        </el-button>
        <el-button type="primary" :disabled="detailData.event_status != '0'" @click="handleStartEvent">
          <i class="command-icon" />
          开始指挥
        </el-button>
        <el-button v-if="['0', '1'].includes(detailData.event_status)" type="danger" plain @click="handleCloseEvent">
          <i class="close-icon" />
          关闭事件
        </el-button>
        <el-button type="danger" plain icon="Minus" :disabled="detailData.del_flag != '0'" @click="handleDeleteEvent">删除事件</el-button>
      </div>
    </div>
    <div class="common-info-box">
      <div class="common-info-header">
        <i class="line-icon" />
        <div class="common-info-title">基础信息</div>
      </div>
      <div class="common-info-content">
        <div class="common-info-item">事件编号：{{ detailData.event_id }}</div>
        <div class="common-info-item">事件类型：<dict-tag :options="mm_event_type" :value="detailData.event_type" /></div>
        <div class="common-info-item">
          事件等级：
          <dict-tag :options="mm_event_level" :value="detailData.event_level" />
          <el-icon style="margin-left: 20px; cursor: pointer" @click="handleEventLevelOpen"><Fold /></el-icon>
        </div>
        <div class="common-info-item">事件状态：<dict-tag :options="mm_event_state" :value="detailData.event_status" /></div>
        <div class="common-info-item">事发地点：{{ detailData.address }}</div>
        <div class="common-info-item">事发时间：{{ detailData.event_time }}</div>
        <div class="common-info-item">上报时间：{{ detailData.report_time }}</div>
        <div class="common-info-item">
          伤亡情况：
          <div v-if="detailData.casualties == '0'" class="flex">
            <span>未上报</span>
            <span class="link" style="margin-left: 20px" @click="uploadeCasualties">去上报</span>
          </div>
          <div v-if="detailData.casualties == '1'" class="flex">
            <span>已上报</span>
          </div>
        </div>
        <div class="common-info-item">登记人：{{ detailData.reported_by }}</div>
        <div class="common-info-item">登记时间：{{ detailData.report_time }}</div>
        <div class="common-info-item">联系方式：{{ detailData.contact }}</div>
        <div class="common-info-item">事件来源：{{ detailData.event_source }}</div>
      </div>
    </div>
    <div class="common-info-box">
      <div class="common-info-header">
        <i class="line-icon" />
        <div class="common-info-title">事件概要</div>
      </div>
      <div v-if="!!detailData.event_description" class="common-info-content">{{ detailData.event_description }}</div>
    </div>
    <div class="common-info-box">
      <div class="common-info-header">
        <i class="line-icon" />
        <div class="common-info-title">事件跟踪</div>
      </div>
      <div class="common-info-content">
        <Step :step-data="eventTrackState" />
      </div>
    </div>
    <div class="common-info-box">
      <div class="common-info-header">
        <i class="line-icon" />
        <div class="common-info-title">指挥记录</div>
      </div>
      <div class="common-info-content">
        <div class="list">
          <div class="list-item">
            <i class="img"></i>
            <div class="item-title">大屏指挥记录</div>
          </div>
          <div class="list-item">
            <i class="img"></i>
            <div class="item-title">中屏指挥记录</div>
          </div>
        </div>
      </div>
    </div>
    <div class="common-info-box">
      <div class="common-info-header">
        <i class="line-icon" />
        <div class="common-info-title">匹配预案</div>
      </div>
      <div v-if="!!detailData.plan_name" class="common-info-content">
        <div class="list">
          <div class="list-item">
            <i class="img"></i>
            <div class="item-title">{{ detailData.plan_name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="common-info-box">
      <div class="common-info-header">
        <i class="line-icon" />
        <div class="common-info-title">事件总结报告</div>
      </div>
      <div v-if="!!summaryFiles && summaryFiles.length > 0" class="common-info-content">
        <div class="list2">
          <div v-for="(item, index) in summaryFiles" :key="index" class="list-item" @click="downloadSummaryFile(item)">
            <div class="link">{{ item.file_name }}</div>
            <el-icon class="icon"><Download /></el-icon>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="eventLevelState.show" title="事件等级" width="500" :before-close="handleEventLevelClose">
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in eventLevelState.data"
          :key="index"
          :timestamp="item.timestamp + '&nbsp;&nbsp;&nbsp;&nbsp;' + item.name"
          placement="top"
        >
          <div class="dict-item">
            <dict-tag :options="mm_event_level" :value="item.level" />
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

    <CloseEventDialog v-model="closeDialogState.show" :data="closeDialogState.form" :event-id="eventId" @update:model-value="fetchEventDetail" />

    <StartEventDialog v-model="startDialogState.show" :data="startDialogState.form" :event-id="eventId" @update:model-value="fetchEventDetail" />

    <EventEditDialog
      v-model="eventEditDialogState.show"
      :title="eventEditDialogState.title"
      :event-id="eventId"
      @update:model-value="fetchEventDetail"
    />

    <EditCasualtiesDialog
      v-model="editCasualtiesDialogState.show"
      :data="editCasualtiesDialogState.form"
      :event-id="eventId"
      @update:model-value="fetchEventDetail"
    />
  </div>
</template>

<script lang="ts" setup>
import { getEventDetail, deleteEvent } from '@/api/duty/eventing';
import StartEventDialog from './StartEventDialog.vue';
import CloseEventDialog from './CloseEventDialog.vue';
import EventEditDialog from './EventEditDialog.vue';
import EditCasualtiesDialog from './EditCasualtiesDialog.vue';
import { download2 } from '@/utils/request';

const props = defineProps({
  eventId: String
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
  proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region')
);
const emits = defineEmits(['close']);

// 事件等级数据
let eventLevelState = reactive({
  show: false,
  data: []
});

const handleEventLevelOpen = () => {
  eventLevelState.show = true;
};
const handleEventLevelClose = () => {
  eventLevelState.show = false;
};

// 下载总结报告
let summaryFiles = ref([]);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
// 下载方法
const downloadSummaryFile = (file: any) => {
  download2(baseUrl + '/file/download/' + file.url, file.file_name);
};

// 事件跟踪数据
let eventTrackState = reactive({
  active: 0,
  items: [
    {
      title: '事件登记',
      description: ''
    },
    {
      title: '进入指挥',
      description: ''
    },
    {
      title: '结束指挥',
      description: ''
    },
    {
      title: '关闭事件',
      description: ''
    }
  ]
});
// 返回上一级
const handleBack = () => {
  emits('close');
};

const detailData = ref({
  event_id: '',
  event_title: '',
  event_type: '',
  event_level: '',
  event_status: '',
  event_time: '',
  address: '',
  report_time: '',
  event_source: '',
  reported_by: '',
  event_description: '',
  contact: '',
  plan_name: '',
  casualties: '',
  deaths: '',
  injuries: '',
  missing: '',
  del_flag: ''
});

let startDialogState = reactive({
  show: false,
  form: {
    eventId: '',
    event_level: '',
    deaths: '',
    injuries: '',
    missing: ''
  }
});

const closeDialogState = reactive({
  show: false,
  form: {
    eventId: '',
    deaths: '',
    injuries: '',
    missing: '',
    fileNames: []
  }
});

const editCasualtiesDialogState = reactive({
  show: false,
  form: {
    eventId: '',
    deaths: '',
    injuries: '',
    missing: ''
  }
});

// 开始指挥（事件）
const handleStartEvent = () => {
  startDialogState.form.eventId = props.eventId;
  startDialogState.form.deaths = detailData.value.deaths;
  startDialogState.form.injuries = detailData.value.injuries;
  startDialogState.form.missing = detailData.value.missing;
  startDialogState.form.event_level = detailData.value.event_level;
  startDialogState.show = true;
};

// 关闭事件
const handleCloseEvent = () => {
  closeDialogState.form.eventId = props.eventId;
  closeDialogState.form.deaths = detailData.value.deaths;
  closeDialogState.form.injuries = detailData.value.injuries;
  closeDialogState.form.missing = detailData.value.missing;
  closeDialogState.form.fileNames = [];
  closeDialogState.show = true;
};

// 删除事件
const handleDeleteEvent = () => {
  ElMessageBox.confirm('确认删除事件吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    deleteEvent({ eventId: props.eventId }).then((res) => {
      proxy?.$modal.msgSuccess(res.msg);
      fetchEventDetail();
    });
  });
};

// 上报伤亡情况
const uploadeCasualties = () => {
  editCasualtiesDialogState.form.eventId = props.eventId;
  editCasualtiesDialogState.form.deaths = '';
  editCasualtiesDialogState.form.injuries = '';
  editCasualtiesDialogState.form.missing = '';
  editCasualtiesDialogState.show = true;
};

const eventEditDialogState = reactive({
  show: false,
  title: ''
});

const fetchEventDetail = () => {
  console.log('fetchEventDetail');
  closeDialogState.show = false;
  startDialogState.show = false;
  eventEditDialogState.show = false;
  editCasualtiesDialogState.show = false;

  getEventDetail({ event_id: props.eventId }).then((res) => {
    detailData.value = res.data;
    eventTrackState = res.data.event_status_tracks;
    eventLevelState.data = res.data.event_level_tracks;
    summaryFiles.value = res.data.summary_file;
  });
};

const handleUpdate = () => {
  console.log('handleUpdate');
  eventEditDialogState.title = '修改事件';
  eventEditDialogState.show = true;
};

onMounted(() => {
  fetchEventDetail();
});
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  .list-item {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    margin-right: 40px;
    cursor: pointer;
    position: relative;
    .img {
      width: 238px;
      height: 142px;
      background: url('@/assets/images/cardBg.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .item-title {
      position: absolute;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      color: #2c81ff;
    }
    &:last-child {
      margin-right: 0;
    }
  }
  .list-item2 {
    margin-right: 40px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
  }
}
.list2 {
  .list-item {
    display: flex;
    align-items: center;
    color: #2c81ff;
    cursor: pointer;
    .icon {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.dict-item {
  :deep(.warning2) {
    background-color: #fdfbe2;
    border: 1px solid #fad400;
    color: #fad400;
    padding: 5px 12px;
    border-radius: 5px;
  }
  :deep(.primary2) {
    background-color: #ecf5ff;
    border: 1px solid #409eff;
    color: #409eff;
    padding: 5px 12px;
    border-radius: 5px;
  }
  :deep(.danger2) {
    background-color: #fef0f0;
    border: 1px solid #f56c6c;
    color: #f56c6c;
    padding: 5px 12px;
    border-radius: 5px;
  }
  :deep(.warning3) {
    background-color: #fdf6ec;
    border: 1px solid #e6a23c;
    color: #e6a23c;
    padding: 5px 12px;
    border-radius: 5px;
  }
}
</style>