|
@@ -0,0 +1,293 @@
|
|
|
+<template>
|
|
|
+ <div class="event_map"></div>
|
|
|
+ <div class="event_title">{{eventInfo.event_title||"暂无事件标题"}}</div>
|
|
|
+ <div class="event_prop">
|
|
|
+ <div class="event_type"><dict-tag :options="mm_event_type" :value="eventInfo.event_type"></dict-tag></div>
|
|
|
+ <div class="event_level"><dict-tag :options="mm_event_level" :value="eventInfo.event_level||'0'"></dict-tag></div>
|
|
|
+ <div class="event_status"><dict-tag :options="mm_event_state" :value="eventInfo.event_status"></dict-tag></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-tabs v-model:active="active">
|
|
|
+ <van-tab title="基础信息">
|
|
|
+ <div class="event_tab">
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">事件编号:</div>
|
|
|
+ <div class="event-data-item-value">{{eventInfo.event_id}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">事件类型:</div>
|
|
|
+ <div class="event-data-item-value"><dict-tag :options="mm_event_type" :value="eventInfo.event_type"></dict-tag></div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">事件等级:</div>
|
|
|
+ <div class="event-data-item-value"><dict-tag :options="mm_event_level" :value="eventInfo.event_level||'0'"></dict-tag></div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">事件状态:</div>
|
|
|
+ <div class="event-data-item-value"><dict-tag :options="mm_event_state" :value="eventInfo.event_status"></dict-tag></div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">事发地点:</div>
|
|
|
+ <div class="event-data-item-value">{{eventInfo.address}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">事发时间:</div>
|
|
|
+ <div class="event-data-item-value">{{eventInfo.event_time}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">上报时间:</div>
|
|
|
+ <div class="event-data-item-value">{{eventInfo.report_time}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">伤亡情况:</div>
|
|
|
+ <div class="event-data-item-value blue" @click="handleUploadCasualties">去上报</div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">登记人:</div>
|
|
|
+ <div class="event-data-item-value">{{eventInfo.reported_by}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">登记时间:</div>
|
|
|
+ <div class="event-data-item-value">{{eventInfo.reported_time}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">联系方式:</div>
|
|
|
+ <div class="event-data-item-value">{{eventInfo.contact}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="event-data-item">
|
|
|
+ <div class="event-data-item-title">事件来源:</div>
|
|
|
+ <div class="event-data-item-value">{{eventInfo.event_source}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="事件概要"><div class="event_tab">{{ eventInfo.event_description }}</div></van-tab>
|
|
|
+ <van-tab title="事件跟踪"><div class="event_tab">
|
|
|
+ <van-steps direction="vertical" :active="0">
|
|
|
+ <van-step v-for="(item,index) in eventTrackState.items" :key="item.id">
|
|
|
+ <h3>{{ item.title }}</h3>
|
|
|
+ <p>{{ item.description }}</p>
|
|
|
+ </van-step>
|
|
|
+ </van-steps>
|
|
|
+ </div></van-tab>
|
|
|
+ <van-tab title="匹配预案">
|
|
|
+ <div class="event_tab">
|
|
|
+ <van-empty description="未关联到对应预案" />
|
|
|
+ <div style="margin-top: -5.0vmin; display: flex; flex-direction: row; justify-content: center;">
|
|
|
+ <van-button type="primary" size="small" @click="handleEnterEvent">手工关联</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="总结报告">
|
|
|
+ <div class="event_tab">
|
|
|
+ <div v-if="eventInfo.plan_name||'' === ''">
|
|
|
+ <van-empty image="search" description="暂未上传总结报告" />
|
|
|
+ <div style="margin-top: -5.0vmin; display: flex; flex-direction: row; justify-content: center;">
|
|
|
+ <van-button type="primary" size="small" @click="handleUploadCasualties">去上传</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-tab>
|
|
|
+
|
|
|
+ </van-tabs>
|
|
|
+
|
|
|
+ <div style="padding: 3.0vmin; display: flex; flex-direction: row; justify-content: center;">
|
|
|
+ <div style="display: flex; flex-direction: row; justify-content: space-between;">
|
|
|
+ <van-button v-if="eventInfo.event_status == '1'" type="primary" size="small" @click="handleEnterEvent">进入指挥</van-button>
|
|
|
+ <van-button v-if="eventInfo.event_status == '2'" type="danger" size="small" @click="handleCloseEvent">关闭事件</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <UploadEventCasualtiesDialog v-model="uploadCasualtiesState.show" :data="uploadCasualtiesState.form" @update:model-value="onUploadCasualtiesDialogClose"></UploadEventCasualtiesDialog>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import {getCurrentInstance, reactive, ref, toRefs, onMounted} from 'vue';
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
+import { getEventDetail, closeEvent } from "@/api/event";
|
|
|
+import UploadEventCasualtiesDialog from "./UploadEventCasualtiesDialog.vue";
|
|
|
+import { showDialog, showConfirmDialog, showToast } from 'vant';
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+const route = useRoute()
|
|
|
+const proxy = getCurrentInstance()?.proxy;
|
|
|
+const { mm_event_type, mm_event_level, mm_event_state } = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state'));
|
|
|
+
|
|
|
+const active = ref(0);
|
|
|
+const eventId = ref('');
|
|
|
+const data = reactive({
|
|
|
+ eventInfo: {
|
|
|
+ event_id: '',
|
|
|
+ event_title: '',
|
|
|
+ event_code: '',
|
|
|
+ event_type: '',
|
|
|
+ event_level: '',
|
|
|
+ event_status: '',
|
|
|
+ address: '',
|
|
|
+ event_time: '',
|
|
|
+ report_time: '',
|
|
|
+ contact: '',
|
|
|
+ event_source: '',
|
|
|
+ event_description: '',
|
|
|
+ reported_by: '',
|
|
|
+ reported_time: '',
|
|
|
+
|
|
|
+ plan_id: '',
|
|
|
+ plan_name: '',
|
|
|
+ summary_file: [],
|
|
|
+ // 伤亡情况
|
|
|
+ deaths: '',
|
|
|
+ injuries: '',
|
|
|
+ missing: '',
|
|
|
+ },
|
|
|
+ eventTrackState: {
|
|
|
+ active: 0,
|
|
|
+ items: [{
|
|
|
+ id: 0,
|
|
|
+ title: '事件登记',
|
|
|
+ description: ''
|
|
|
+ }]
|
|
|
+ }
|
|
|
+});
|
|
|
+const { eventInfo, eventTrackState } = toRefs(data);
|
|
|
+const handleEnterEvent = () => {
|
|
|
+ router.push("/mobile_control2/index?event_id="+eventId.value);
|
|
|
+};
|
|
|
+
|
|
|
+// 关闭事件
|
|
|
+const handleCloseEvent = () => {
|
|
|
+ if(eventInfo.value.plan_id === '') {
|
|
|
+ showDialog({message: '关闭事件前请先匹配预案'});
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(eventInfo.value.summary_file.length === 0) {
|
|
|
+ showDialog({message: '关闭事件前请先上传总结报告'});
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ showConfirmDialog({
|
|
|
+ title: '提示',
|
|
|
+ message: '关闭事件所有事项相关数据将不能再修改,是否继续?'
|
|
|
+ }).then(()=>{
|
|
|
+ closeEvent({ eventId: eventId.value }).then((res) => {
|
|
|
+ refreshData()
|
|
|
+ })
|
|
|
+ })
|
|
|
+};
|
|
|
+
|
|
|
+// 上报伤亡情况
|
|
|
+const uploadCasualtiesState = reactive({
|
|
|
+ show: false,
|
|
|
+ form: {
|
|
|
+ event_id: '',
|
|
|
+ deaths: '',
|
|
|
+ injuries: '',
|
|
|
+ missing: ''
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const handleUploadCasualties = () => {
|
|
|
+ console.log('handleUploadCasualties');
|
|
|
+ uploadCasualtiesState.form.event_id = eventId.value;
|
|
|
+ uploadCasualtiesState.form.deaths = eventInfo.value.deaths;
|
|
|
+ uploadCasualtiesState.form.injuries = eventInfo.value.injuries;
|
|
|
+ uploadCasualtiesState.form.missing = eventInfo.value.missing;
|
|
|
+ uploadCasualtiesState.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+const onUploadCasualtiesDialogClose = (t) => {
|
|
|
+ console.log('onUploadCasualtiesDialogClose', t)
|
|
|
+ uploadCasualtiesState.show = false;
|
|
|
+ if(t) {
|
|
|
+ refreshData();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+onMounted(()=>{
|
|
|
+ refreshData();
|
|
|
+})
|
|
|
+
|
|
|
+const refreshData = () => {
|
|
|
+ eventId.value = route.query.event_id as string;
|
|
|
+ getEventDetail({event_id: eventId.value})
|
|
|
+ .then((res) => {
|
|
|
+ eventInfo.value = res.data
|
|
|
+ eventTrackState.value = res.data.event_status_tracks;
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.event_map {
|
|
|
+ width: 100vw;
|
|
|
+ height: 40vmin;
|
|
|
+ background: #ccffcc;
|
|
|
+}
|
|
|
+.event_title {
|
|
|
+ padding: 1.6vmin 3.2vmin;
|
|
|
+ font-size: 6.2vmin;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.event_prop {
|
|
|
+ padding: 0 3.2vmin;
|
|
|
+ line-height: 4.8vmin;
|
|
|
+ font-size:3.6vmin;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: start;
|
|
|
+ color:#999;
|
|
|
+
|
|
|
+ .event_type {
|
|
|
+ padding: 0.5vmin 3.0vmin;
|
|
|
+ background: #efefef;
|
|
|
+ margin-right: 2.0vmin;
|
|
|
+ }
|
|
|
+
|
|
|
+ .event_level {
|
|
|
+ padding: 0.5vmin 3.0vmin;
|
|
|
+ background: #efefef;
|
|
|
+ margin-right: 2.0vmin;
|
|
|
+ }
|
|
|
+
|
|
|
+ .event_status {
|
|
|
+ padding: 0.5vmin 3.0vmin;
|
|
|
+ background: #efefef;
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.event_tab {
|
|
|
+ padding:3.2vmin;
|
|
|
+ color: #000;
|
|
|
+
|
|
|
+ .event-data-item {
|
|
|
+ font-size:4.2vmin;
|
|
|
+ line-height: 8.0vmin;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .event-data-item-title {
|
|
|
+ color: #888;
|
|
|
+ min-width: 5em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .event-data-item-value {
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ color: #1989fa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size:4.2vmin;
|
|
|
+ line-height: 8.0vmin;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|