事件详情

event-ui/src/views/event/eventProcess/index.vue

@@ -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>

src/main/java/com/sooka/sponest/event/eventProcess/service/impl/EventProcessServiceImpl.java

@@ -115,6 +115,7 @@ public class EventProcessServiceImpl extends BaseServiceImpl implements EventPro
         } else { // 确认 签收 办结 审核通过 归档
             eventDetail = eventProcessMapper.getProcessEventDetail(eventInfo);
         }
+        detailSetPath(eventDetail.getEventLogList());
         BeanUtils.copyProperties(eventDetail, eventInfoBO);
         return eventInfoBO;
     }

src/main/resources/mapper/event/eventProcess/EventProcessMapper.xml

@@ -74,9 +74,14 @@
     </resultMap>
 
     <!--  待确认事件详情日志  -->
-    <resultMap type="EventLog" id="selectEventLogListToUnconfirmed">
+    <resultMap type="EventLog" id="EventAttachUnconfirmedResult">
         <id property="id" column="id"/>
+        <result property="eventId" column="event_id"/>
         <result property="content" column="content"/>
+        <result property="operationType" column="operation_type"/>
+        <result property="operationSource" column="operation_source"/>
+        <result property="createBy" column="create_by"/>
+        <result property="createTime" column="create_time"/>
         <!-- 嵌套ATTACH集合 -->
         <collection
                 property="attachList"
@@ -87,7 +92,7 @@
     </resultMap>
 
     <!--  待确认事件详情日志  -->
-    <select id="selectEventLogListToUnconfirmed" resultMap="EventDetailUnconfirmedResult">
+    <select id="selectEventLogListToUnconfirmed" resultMap="EventAttachUnconfirmedResult">
         SELECT *
         FROM event_log
         WHERE event_id = #{eventId}
@@ -177,7 +182,12 @@
     <!--  确认事件详情日志  -->
     <resultMap type="EventLog" id="EventAttachProcessResult">
         <id property="id" column="id"/>
+        <result property="eventId" column="event_id"/>
         <result property="content" column="content"/>
+        <result property="operationType" column="operation_type"/>
+        <result property="operationSource" column="operation_source"/>
+        <result property="createBy" column="create_by"/>
+        <result property="createTime" column="create_time"/>
         <!-- 嵌套ATTACH集合 -->
         <collection
                 property="attachList"
@@ -363,7 +373,7 @@
     </select>
 
     <select id="getUnconfirmedEventDetail" resultMap="EventDetailUnconfirmedResult">
-        SELECT * FROM event_unconfirmed a
+        <include refid="selectUnconfirmedEventInfoVo"/>
         <where>
             <include refid="selectEventListWhere"/>
         </where>
@@ -381,7 +391,7 @@
     </select>
 
     <select id="getProcessEventDetail" resultMap="EventDetailProcessResult">
-        SELECT * FROM event_process a
+        <include refid="selectEventProcessInfoVo"/>
         <where>
             <include refid="selectEventListWhere"/>
         </where>
@@ -399,7 +409,7 @@
     </select>
 
     <select id="getUsualEventDetail" resultMap="EventDetailProcessResult">
-        SELECT * FROM event_usual a
+        <include refid="selectUsualEventInfoVo"/>
         <where>
             <include refid="selectEventListWhere"/>
         </where>