yjdp-web/src/views/routineCommandMap/eventing/eventDetails.vue

<template>
  <div v-if="modelValue" class="dialog-wrap">
    <div class="overlay" @click="closeDialog"></div>
    <div class="dialog" :style="{ height: height }">
      <div class="dialog-header">
        <div class="dialog-title">{{ title }}</div>
        <div class="icon-close" @click="closeDialog">
          <el-icon size="100px"><Close /></el-icon>
        </div>
      </div>
      <div class="dialog-content">
        <slot />
        <div class="app-container">
          <div class="back-btn" @click="handleBack">
            <el-icon><Back /></el-icon>
            返回上一级
          </div>
          <div class="line">
            <div class="title">{{ detailData.event_title }}</div>
            <div class="flex">
              <el-button type="primary" :disabled="detailData.del_flag == '2'" @click="handleUpdate">编辑</el-button>
              <el-button type="primary" :disabled="detailData.event_status != '0'" @click="handleStartEvent">开始指挥</el-button>
              <el-button type="danger" :disabled="detailData.event_status != '2'" @click="handleCloseEvent">关闭事件</el-button>
              <el-button type="danger" :disabled="detailData.del_flag != '0'" @click="handleDeleteEvent">删除事件</el-button>
            </div>
          </div>
          <div class="sub-title">基础信息</div>
          <div class="line2">
            <div class="line-item">
              <div class="item-label">事件编号：</div>
              <div class="item-value">{{ detailData.event_id }}</div>
            </div>
            <div class="line-item">
              <div class="item-label">事件类型：</div>
              <div class="item-value">
                <dict-tag :options="mm_event_type" :value="detailData.event_type" />
              </div>
            </div>
            <div class="line-item">
              <div class="item-label">事件等级：</div>
              <div class="item-value" style="display: flex; align-items: center">
                <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>
            <div class="line-item">
              <div class="item-label">事件状态：</div>
              <div class="item-value">
                <dict-tag :options="mm_event_state" :value="detailData.event_status" />
              </div>
            </div>
          </div>
          <div class="line2">
            <div class="line-item">
              <div class="item-label">事发地点：</div>
              <div class="item-value link">{{ detailData.address }}</div>
            </div>
            <div class="line-item">
              <div class="item-label">事发时间：</div>
              <div class="item-value">{{ detailData.event_time }}</div>
            </div>
            <div class="line-item">
              <div class="item-label">上报时间：</div>
              <div class="item-value">{{ detailData.report_time }}</div>
            </div>
            <div class="line-item">
              <div class="item-label">伤亡情况：</div>
              <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>
          <div class="line2">
            <div class="line-item">
              <div class="item-label">登记人：</div>
              <div class="item-value">{{ detailData.reported_by }}</div>
            </div>
            <div class="line-item">
              <div class="item-label">登记时间：</div>
              <div class="item-value">{{ detailData.report_time }}</div>
            </div>
            <div class="line-item">
              <div class="item-label">联系方式：</div>
              <div class="item-value">{{ detailData.contact }}</div>
            </div>
            <div class="line-item">
              <div class="item-label">事件来源：</div>
              <div class="item-value">{{ detailData.event_source }}</div>
            </div>
          </div>
          <div class="sub-title">事件概要</div>
          <div class="textarea">{{ detailData.event_description }}</div>

          <div class="sub-title">事件跟踪</div>

          <el-steps :active="eventTrackState.active" :align-center="true" style="width: 100%">
            <el-step v-for="(item, index) in eventTrackState.items" :key="index" :title="item.title" :description="item.description"></el-step>
          </el-steps>

          <div class="sub-title">指挥记录</div>
          <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 class="sub-title">匹配预案</div>
          <div class="list">
            <div class="list-item2">{{ detailData.plan_name }}</div>
          </div>
          <div class="sub-title">事件总结报告</div>
          <div class="list2">
            <div v-for="(item, index) in summaryFiles" :key="index" class="list-item" @click="downloadSummaryFile(item.url)">
              <div class="link">{{ item.file_name }}</div>
              <el-icon class="icon"><Download /></el-icon>
            </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>
      </div>
    </div>
  </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';

const route = useRoute();
const router = useRouter();
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')
);

// 事件等级数据
let eventLevelState = reactive({
  show: false,
  data: [
    {
      timestamp: '2024/7/1 09:00:09',
      name: '张佳佳',
      level: '4'
    },
    {
      timestamp: '2024/7/1 09:00:09',
      name: '张佳佳',
      level: '3'
    },
    {
      timestamp: '2024/7/1 09:00:09',
      name: '张佳佳',
      level: '2'
    },
    {
      timestamp: '2024/7/1 09:00:09',
      name: '张佳佳',
      level: '1'
    }
  ]
});

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

// 下载总结报告
let summaryFiles = ref([]);
const downloadSummaryFile = (url) => {
  window.open(url);
};

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

let eventId = ref('');
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 = eventId.value;
  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 = eventId.value;
  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: eventId.value }).then((res) => {
      proxy?.$modal.msgSuccess(res.msg);
      fetchEventDetail();
    });
  });
};

// 上报伤亡情况
const uploadeCasualties = () => {
  editCasualtiesDialogState.form.eventId = eventId.value;
  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: eventId.value }).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(() => {
  eventId.value = route.query.event_id as string;
  fetchEventDetail();
});
interface Props {
  modelValue: boolean;
  title?: string;
  height?: string;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false
});
const emit = defineEmits(['update:modelValue']);

// 关闭弹窗
const closeDialog = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.dialog-wrap {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: pointer;
  }
  .dialog {
    width: 5000px;
    height: 2000px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20px;
  }
}
.dialog {
  padding: 0 50px;
  .dialog-header {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-close {
      cursor: pointer;
    }
  }
}
</style>