|
|
@@ -57,46 +57,105 @@
|
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
|
|
|
- <el-button size="mini" type="text" icon="el-icon-document">事件日志</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="selectCompositeEventList"/>
|
|
|
|
|
|
<!-- 事件详情对话框 -->
|
|
|
- <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
|
|
|
- <el-form ref="form" :model="form" label-width="80px">
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="事件标题" prop="eventName">
|
|
|
- <el-input v-model="form.eventName" readonly/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="事件描述" prop="eventDescription">
|
|
|
- <el-input v-model="form.eventDescription" type="textarea" readonly :rows="3" resize="none"/>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
|
|
|
-
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
|
|
|
-
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- </el-form>
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- 左侧：事件详情 -->
|
|
|
+ <el-col :span="14">
|
|
|
+ <el-form ref="form" :model="form" label-width="80px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="事件标题" prop="eventName">
|
|
|
+ <el-input v-model="form.eventName" readonly/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="上报者" prop="reporter">
|
|
|
+ <el-input v-model="form.reporter" readonly/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="上报时间" prop="reportTime">
|
|
|
+ <el-input v-model="form.reportTime" readonly/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="事件分类" prop="eventTypeName">
|
|
|
+ <el-input v-model="form.eventTypeName" readonly/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="事件状态" prop="eventStatus">
|
|
|
+ <dict-tag :options="dict.type.event_status" :value="form.eventStatus"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="经度" prop="longitude">
|
|
|
+ <el-input v-model="form.longitude" readonly/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="纬度" prop="latitude">
|
|
|
+ <el-input v-model="form.latitude" readonly/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="具体位置" prop="address">
|
|
|
+ <el-input v-model="form.address" readonly/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="事件描述" prop="eventDescription">
|
|
|
+ <el-input v-model="form.eventDescription" type="textarea" readonly :rows="4" resize="none"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ <!-- 右侧：事件日志 -->
|
|
|
+ <el-col :span="10" style="height: 100%;">
|
|
|
+ <div class="log-container">
|
|
|
+ <div class="log-scroll">
|
|
|
+ <el-timeline>
|
|
|
+ <el-timeline-item v-for="(log, index) in eventLogList" :key="index" :timestamp="log.createTime" placement="top">
|
|
|
+ <el-card class="log-card">
|
|
|
+ <h4>
|
|
|
+ <dict-tag :options="dict.type.event_log_type" :value="log.operationType"/>
|
|
|
+ </h4>
|
|
|
+ <p>{{ log.content }}</p>
|
|
|
+ <!-- 图片附件展示 -->
|
|
|
+ <div v-if="log.attachList && log.attachList.length > 0" class="log-attachments">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col v-for="(attach, idx) in log.attachList" :key="idx" :span="8">
|
|
|
+ <el-image :src="attach.path" :preview-src-list="[attach.path]" :lazy="true" fit="cover"
|
|
|
+ style="width: 100%; height: 100px; border-radius: 4px;"/>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
- <el-button @click="cancel">取 消</el-button>
|
|
|
+ <el-button>关 闭</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
@@ -109,7 +168,7 @@ import {getEventTypeTree} from "@/api/event/eventType/eventType";
|
|
|
export default {
|
|
|
name: "eventProcess",
|
|
|
components: {},
|
|
|
- dicts: ['reporting_source', 'event_status'],
|
|
|
+ dicts: ['reporting_source', 'event_status', 'event_log_type'],
|
|
|
data() {
|
|
|
return {
|
|
|
// 总条数
|
|
|
@@ -137,8 +196,8 @@ export default {
|
|
|
reportTimeEnd: null,
|
|
|
reportSource: null,
|
|
|
},
|
|
|
- // 表单参数
|
|
|
- form: {},
|
|
|
+ form: {}, // 事件表单
|
|
|
+ eventLogList: [], // 事件日志
|
|
|
compositeEventList: [],
|
|
|
eventTypeOptions: [], // 事件类型树形数据源
|
|
|
props: {
|
|
|
@@ -175,13 +234,19 @@ export default {
|
|
|
},
|
|
|
/** 查询数据详情 */
|
|
|
handleDetail(row) {
|
|
|
- this.queryParams.eventId = row.eventId;
|
|
|
- this.queryParams.eventStatus = row.eventStatus;
|
|
|
- getCompositeEventDetail(this.queryParams).then(response => {
|
|
|
+ const param = {
|
|
|
+ ...this.queryParams,
|
|
|
+ eventId: row.eventId,
|
|
|
+ eventStatus: row.eventStatus,
|
|
|
+ }
|
|
|
+ getCompositeEventDetail(param).then(response => {
|
|
|
console.log(response.data)
|
|
|
- this.form = response.data;
|
|
|
+ const { data } = response;
|
|
|
+ // 设置事件基本信息
|
|
|
+ this.form = data;
|
|
|
+ // 设置事件日志列表
|
|
|
+ this.eventLogList = data.eventLogList || [];
|
|
|
this.open = true;
|
|
|
-
|
|
|
});
|
|
|
},
|
|
|
/** 获取事件类型数据源 */
|
|
|
@@ -232,3 +297,42 @@ export default {
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+/* 日志区域容器 */
|
|
|
+.log-container {
|
|
|
+ padding-left: 15px;
|
|
|
+ border-left: 1px solid #eee;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 日志滚动区域 */
|
|
|
+.log-scroll {
|
|
|
+ max-height: 400px; /* 控制最大高度 */
|
|
|
+ overflow-y: auto; /* 超出显示滚动条 */
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 可选：美化滚动条样式（仅支持 Webkit 浏览器） */
|
|
|
+.log-scroll::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+}
|
|
|
+.log-scroll::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #ddd;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.log-card h4 {
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.log-card p {
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+</style>
|
limeng