|
|
@@ -0,0 +1,453 @@
|
|
|
+<template>
|
|
|
+ <Dialog v-model="show" type="xl" title="事件管理列表" hide-footer>
|
|
|
+ <transition name="fade">
|
|
|
+ <div v-show="showSearch" class="mb-[20px]">
|
|
|
+ <el-form ref="queryFormRef" :model="queryParams">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 第一行 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="事件类型" prop="event_type">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.event_type"
|
|
|
+ placeholder="全部"
|
|
|
+ class="custom-select"
|
|
|
+ size="large"
|
|
|
+ popper-class="custom-select-popper"
|
|
|
+ :teleported="false"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="事件等级" prop="event_level">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.event_level"
|
|
|
+ placeholder="全部"
|
|
|
+ class="custom-select"
|
|
|
+ size="large"
|
|
|
+ popper-class="custom-select-popper"
|
|
|
+ :teleported="false"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="事件状态" prop="event_status">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.event_status"
|
|
|
+ placeholder="全部"
|
|
|
+ class="custom-select"
|
|
|
+ size="large"
|
|
|
+ popper-class="custom-select-popper"
|
|
|
+ :teleported="false"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option v-for="item in mm_event_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="行政区划" prop="region_code">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.region_code"
|
|
|
+ placeholder="全部"
|
|
|
+ class="custom-select"
|
|
|
+ size="large"
|
|
|
+ popper-class="custom-select-popper"
|
|
|
+ :teleported="false"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option v-for="item in region" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="mt-[10px]">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="事发时间" prop="event_time">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.event_time"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="选择事发时间"
|
|
|
+ class="common-date-picker"
|
|
|
+ :teleported="false"
|
|
|
+ popper-class="common-date-popper"
|
|
|
+ style="width: 100%"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item prop="keyword">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.keyword"
|
|
|
+ class="custom-input2"
|
|
|
+ placeholder="请输入事件标题/事件地点"
|
|
|
+ clearable
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="common-btn-primary" @click="handleQuery">搜索</div>
|
|
|
+ <div class="common-btn" @click="resetQuery">重置</div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ <!-- 表格组件 -->
|
|
|
+ <div class="common-table">
|
|
|
+ <div class="table-header">
|
|
|
+ <div class="td">事件编号</div>
|
|
|
+ <div class="td">事件标题</div>
|
|
|
+ <div class="td">事件类型</div>
|
|
|
+ <div class="td">事件等级</div>
|
|
|
+ <div class="td">事件地点</div>
|
|
|
+ <div class="td">事件状态</div>
|
|
|
+ <div class="td">事件时间</div>
|
|
|
+ <div class="td">操作</div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(item, index) in eventList" :key="index" class="tr">
|
|
|
+ <div class="td">{{ item.event_id }}</div>
|
|
|
+ <div class="td">{{ item.event_title }}</div>
|
|
|
+ <div class="td">{{ item.event_type }}</div>
|
|
|
+ <div class="td">{{ item.event_level }}</div>
|
|
|
+ <div class="td">{{ item.address }}</div>
|
|
|
+ <div class="td">{{ item.event_status }}</div>
|
|
|
+ <div class="td">{{ item.event_time }}</div>
|
|
|
+ <div class="td">
|
|
|
+ <div @click="handleView(item)">查看</div>
|
|
|
+ <div @click="handleClose(item)">关闭事件</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <eventDetails v-model="eventDetailsState.show" :title="eventDetailsState.title" :event-id="eventId" @update:model-value="getList"></eventDetails>
|
|
|
+ <EventEditDialog v-model="eventEditDialogState.show" :title="eventEditDialogState.title" :event-id="eventId" @update:model-value="getList" />
|
|
|
+ <CloseEventDialog
|
|
|
+ v-model="closeDialogState.show"
|
|
|
+ :data="closeDialogState.form"
|
|
|
+ :event-id="eventId"
|
|
|
+ @update:model-value="handleCloseEventDialog"
|
|
|
+ />
|
|
|
+ <div class="footer">
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ v-model:page="queryParams.page"
|
|
|
+ v-model:limit="queryParams.page_size"
|
|
|
+ :total="total"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, reactive, toRefs, onMounted } from 'vue';
|
|
|
+import { getEvent } from '@/api/duty/eventing';
|
|
|
+
|
|
|
+import EventEditDialog from '../eventing/EventEditDialog.vue';
|
|
|
+import CloseEventDialog from '../eventing/CloseEventDialog.vue';
|
|
|
+import eventDetails from '../eventing/eventDetails.vue';
|
|
|
+const proxy = getCurrentInstance()?.proxy;
|
|
|
+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 router = useRouter();
|
|
|
+const eventList = ref([]);
|
|
|
+const loading = ref(true);
|
|
|
+const showSearch = ref(true);
|
|
|
+const ids = ref([]);
|
|
|
+const single = ref(true);
|
|
|
+const multiple = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+const selectedRow = ref(null);
|
|
|
+const eventId = ref('');
|
|
|
+const queryFormRef = ref();
|
|
|
+
|
|
|
+const initFormData = {
|
|
|
+ event_id: '', // 事件标题
|
|
|
+ event_title: '', // 事件标题
|
|
|
+ event_type: '', // 事件类型
|
|
|
+ event_level: '', // 事件等级
|
|
|
+ event_status: '', // 事件状态
|
|
|
+ address: '', // 事件地点
|
|
|
+ longitude: '', // 经度
|
|
|
+ latitude: '', // 纬度
|
|
|
+ event_time: '', // 事发时间
|
|
|
+ report_time: '', // 上报时间
|
|
|
+ deaths: '',
|
|
|
+ injuries: '',
|
|
|
+ missing: '',
|
|
|
+ event_source: '', // 事件来源
|
|
|
+ event_description: '', // 事件描述
|
|
|
+ contact: '' // 联系方式
|
|
|
+};
|
|
|
+// 表单数据
|
|
|
+const data = reactive({
|
|
|
+ form: { ...initFormData },
|
|
|
+ queryParams: {
|
|
|
+ page: 1,
|
|
|
+ page_size: 9,
|
|
|
+ event_type: '',
|
|
|
+ event_level: '',
|
|
|
+ event_status: '',
|
|
|
+ event_time: '',
|
|
|
+ region_code: '',
|
|
|
+ keyword: ''
|
|
|
+ },
|
|
|
+ event_levelSelection: [],
|
|
|
+ event_statusSelection: [],
|
|
|
+ regionSelection: []
|
|
|
+});
|
|
|
+
|
|
|
+const { queryParams, form } = toRefs(data);
|
|
|
+const getList = () => {
|
|
|
+ loading.value = true;
|
|
|
+ getEvent(queryParams.value)
|
|
|
+ .then((res) => {
|
|
|
+ eventList.value = res.data;
|
|
|
+ total.value = res.total;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleQuery = () => {
|
|
|
+ queryParams.value.page = 1;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+// 重置查询条件
|
|
|
+const resetQuery = () => {
|
|
|
+ queryParams.value = { page: 1, page_size: 10, event_type: '', event_level: '', event_status: '', event_time: '', region_code: '', keyword: '' };
|
|
|
+ handleQuery();
|
|
|
+};
|
|
|
+
|
|
|
+const handleSelectionChange = (selection) => {
|
|
|
+ ids.value = selection.map((item) => item.eventId);
|
|
|
+ selectedRow.value = selection.length === 1 ? selection[0] : null;
|
|
|
+ single.value = selection.length != 1;
|
|
|
+ multiple.value = !selection.length;
|
|
|
+};
|
|
|
+
|
|
|
+const eventEditDialogState = reactive({
|
|
|
+ show: false,
|
|
|
+ title: ''
|
|
|
+});
|
|
|
+const eventDetailsState = reactive({
|
|
|
+ show: false,
|
|
|
+ title: ''
|
|
|
+});
|
|
|
+
|
|
|
+// const handleAdd = () => {
|
|
|
+// eventId.value = '';
|
|
|
+// eventEditDialogState.title = '新增事件';
|
|
|
+// eventEditDialogState.show = true;
|
|
|
+// };
|
|
|
+
|
|
|
+// 修改事件
|
|
|
+// const handleUpdate = (row) => {
|
|
|
+// if (row) {
|
|
|
+// eventId.value = row.event_id;
|
|
|
+// eventEditDialogState.title = '修改事件';
|
|
|
+// eventEditDialogState.show = true;
|
|
|
+// }
|
|
|
+// };
|
|
|
+//查看事件详情
|
|
|
+const handleView = (row) => {
|
|
|
+ // 查看事件详情逻辑
|
|
|
+ eventId.value = row.event_id;
|
|
|
+ eventDetailsState.title = '查看事件';
|
|
|
+ eventDetailsState.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+// const handleDelete = (row) => {
|
|
|
+// if (row) {
|
|
|
+// ElMessageBox.confirm('确认删除事件吗?', '提示', {
|
|
|
+// confirmButtonText: '确定',
|
|
|
+// cancelButtonText: '取消',
|
|
|
+// type: 'info'
|
|
|
+// }).then(() => {
|
|
|
+// eventList.value = eventList.value.filter((item) => item.eventId !== row.event_id);
|
|
|
+// deleteEvent({ eventId: row.event_id }).then((res) => {
|
|
|
+// proxy?.$modal.msgSuccess(res.msg);
|
|
|
+// setTimeout(() => {
|
|
|
+// getList();
|
|
|
+// }, 500);
|
|
|
+// });
|
|
|
+// });
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// 关闭事件
|
|
|
+const closeDialogState = reactive({
|
|
|
+ show: false,
|
|
|
+ form: {
|
|
|
+ eventId: '',
|
|
|
+ deaths: '',
|
|
|
+ injuries: '',
|
|
|
+ missing: '',
|
|
|
+ fileNames: []
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const handleClose = (row) => {
|
|
|
+ if (row) {
|
|
|
+ console.log(row);
|
|
|
+ closeDialogState.form.eventId = row.event_id;
|
|
|
+ closeDialogState.form.deaths = row.deaths;
|
|
|
+ closeDialogState.form.injuries = row.injuries;
|
|
|
+ closeDialogState.form.missing = row.missing;
|
|
|
+ closeDialogState.show = true;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleCloseEventDialog = (b) => {
|
|
|
+ console.log('handleCloseEventDialog', b);
|
|
|
+};
|
|
|
+const props = defineProps<{
|
|
|
+ modelValue?: boolean;
|
|
|
+ title?: string;
|
|
|
+ height?: string;
|
|
|
+}>();
|
|
|
+const emit = defineEmits(['update:modelValue']);
|
|
|
+
|
|
|
+let show = ref(false);
|
|
|
+
|
|
|
+// 监听props的modelValue变化
|
|
|
+watch(
|
|
|
+ () => props.modelValue,
|
|
|
+ (newValue) => {
|
|
|
+ if (newValue) {
|
|
|
+ getList();
|
|
|
+ }
|
|
|
+ show.value = newValue;
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+);
|
|
|
+watch(
|
|
|
+ show,
|
|
|
+ () => {
|
|
|
+ emit('update:modelValue', show.value);
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+);
|
|
|
+// 关闭弹窗
|
|
|
+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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.footer {
|
|
|
+ height: 64px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .pagination-container {
|
|
|
+ height: 64px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination__total) {
|
|
|
+ color: #a7ccdf;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination) {
|
|
|
+ .btn-next,
|
|
|
+ .btn-prev {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ .el-icon {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #a7ccdf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-prev:disabled,
|
|
|
+ .btn-next:disabled {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-pager li {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ line-height: 64px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #a7ccdf;
|
|
|
+ background-color: #0e3064;
|
|
|
+ border: 1px solid #0c57a7;
|
|
|
+ margin: 0 6px;
|
|
|
+ &:hover {
|
|
|
+ background-color: #038dff;
|
|
|
+ border: 1px solid #038dff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-pager li.is-active {
|
|
|
+ background-color: #038dff;
|
|
|
+ border: 1px solid #038dff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+</style>
|
