|
|
@@ -0,0 +1,488 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container gzjc-page">
|
|
|
+ <!-- 搜索区 -->
|
|
|
+ <div class="filter-panel">
|
|
|
+ <div class="filter-form">
|
|
|
+ <el-select v-model="filters.eventStatus" placeholder="事件状态" clearable style="width:140px">
|
|
|
+ <el-option label="处理中" value="处理中" />
|
|
|
+ <el-option label="已解除" value="已解除" />
|
|
|
+ <el-option label="已关闭" value="已关闭" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="filters.category" placeholder="事件类别" clearable style="width:140px">
|
|
|
+ <el-option label="管道泄漏" value="管道泄漏" />
|
|
|
+ <el-option label="塌陷" value="塌陷" />
|
|
|
+ <el-option label="积水" value="积水" />
|
|
|
+ <el-option label="设备故障" value="设备故障" />
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="filters.dateRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ style="width:260px"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ <el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <div class="table-panel">
|
|
|
+ <el-table :data="pagedList" border stripe style="width:100%">
|
|
|
+ <el-table-column prop="eventNo" label="事件编号" width="140" />
|
|
|
+ <el-table-column prop="category" label="事件类别" width="110" />
|
|
|
+ <el-table-column prop="level" label="事件等级" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="levelTagType(row.level)" size="small">{{ row.level }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="当前状态" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="statusTagType(row.status)" size="small">{{ row.status }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="lastVisitTime" label="最近回访时间" width="150" />
|
|
|
+ <el-table-column prop="nextVisitTime" label="下次回访时间" width="150" />
|
|
|
+ <el-table-column prop="handler" label="负责人" width="100" />
|
|
|
+ <el-table-column label="操作" width="220" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button v-if="row.status === '处理中'" type="primary" link size="small" @click="handleTrack(row)">跟踪</el-button>
|
|
|
+ <el-button v-if="row.status === '处理中'" type="primary" link size="small" @click="handleClose(row)">解除</el-button>
|
|
|
+ <el-button v-if="row.status === '已解除'" type="primary" link size="small" @click="handleClose(row)">关闭</el-button>
|
|
|
+ <el-button type="primary" link size="small" @click="handleDetail(row)">详情</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination-wrap">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="pagination.page"
|
|
|
+ v-model:page-size="pagination.pageSize"
|
|
|
+ :page-sizes="[10, 20, 50]"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="filteredList.length"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 跟踪弹窗 -->
|
|
|
+ <el-dialog v-model="trackVisible" title="事件跟踪" width="700px" :close-on-click-modal="false">
|
|
|
+ <div v-if="currentRow">
|
|
|
+ <div class="section-title">事件进展时间线</div>
|
|
|
+ <el-timeline>
|
|
|
+ <el-timeline-item
|
|
|
+ v-for="(item, index) in currentRow.timeline"
|
|
|
+ :key="index"
|
|
|
+ :type="item.type"
|
|
|
+ :timestamp="item.time"
|
|
|
+ >
|
|
|
+ <div style="font-weight:600">{{ item.title }}</div>
|
|
|
+ <div style="color:#606266;font-size:13px">{{ item.content }}</div>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+
|
|
|
+ <div class="section-title">新增跟踪记录</div>
|
|
|
+ <el-form :model="trackForm" :rules="trackRules" ref="trackFormRef" label-width="120px">
|
|
|
+ <el-form-item label="跟踪内容" prop="content">
|
|
|
+ <el-input v-model="trackForm.content" type="textarea" :rows="3" placeholder="请输入跟踪内容" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="当前态势评估" prop="assessment">
|
|
|
+ <el-radio-group v-model="trackForm.assessment">
|
|
|
+ <el-radio label="趋于平稳">趋于平稳</el-radio>
|
|
|
+ <el-radio label="仍在发展">仍在发展</el-radio>
|
|
|
+ <el-radio label="明显恶化">明显恶化</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否需要升级" prop="needUpgrade">
|
|
|
+ <el-radio-group v-model="trackForm.needUpgrade">
|
|
|
+ <el-radio label="否">否</el-radio>
|
|
|
+ <el-radio label="是">是</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="下次回访时间" prop="nextVisitTime">
|
|
|
+ <el-date-picker v-model="trackForm.nextVisitTime" type="datetime" placeholder="选择日期时间" style="width:100%" value-format="YYYY-MM-DD HH:mm:ss" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="trackVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmTrack">保存跟踪记录</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 解除/关闭弹窗 -->
|
|
|
+ <el-dialog v-model="closeVisible" :title="closeTitle" width="500px" :close-on-click-modal="false">
|
|
|
+ <el-form :model="closeForm" :rules="closeRules" ref="closeFormRef" label-width="100px">
|
|
|
+ <el-form-item label="事件编号">{{ closeForm.eventNo }}</el-form-item>
|
|
|
+ <el-form-item label="事件摘要">{{ closeForm.summary }}</el-form-item>
|
|
|
+ <el-form-item label="解除原因" prop="reason">
|
|
|
+ <el-select v-model="closeForm.reason" placeholder="请选择" style="width:100%">
|
|
|
+ <el-option label="事件不存在" value="事件不存在" />
|
|
|
+ <el-option label="处置完成" value="处置完成" />
|
|
|
+ <el-option label="误报" value="误报" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="解除说明" prop="remark">
|
|
|
+ <el-input v-model="closeForm.remark" type="textarea" :rows="4" placeholder="请输入解除说明" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="closeVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmClose">确认</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 详情弹窗 -->
|
|
|
+ <el-dialog v-model="detailVisible" title="事件详情" width="600px" :close-on-click-modal="false">
|
|
|
+ <div v-if="currentRow" class="detail-content">
|
|
|
+ <el-form label-width="100px" size="default">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="事件编号">{{ currentRow.eventNo }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="事件类别">{{ currentRow.category }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="事件等级">{{ currentRow.level }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="当前状态">
|
|
|
+ <el-tag :type="statusTagType(currentRow.status)" size="small">{{ currentRow.status }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="负责人">{{ currentRow.handler }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="发生地点">{{ currentRow.location }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="事件描述">
|
|
|
+ <div class="desc-text">{{ currentRow.description }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="最近回访">{{ currentRow.lastVisitTime || '-' }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="下次回访">{{ currentRow.nextVisitTime || '-' }}</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div class="section-title">处置时间线</div>
|
|
|
+ <el-timeline>
|
|
|
+ <el-timeline-item
|
|
|
+ v-for="(item, index) in currentRow.timeline"
|
|
|
+ :key="index"
|
|
|
+ :type="item.type"
|
|
|
+ :timestamp="item.time"
|
|
|
+ >
|
|
|
+ <div style="font-weight:600">{{ item.title }}</div>
|
|
|
+ <div style="color:#606266;font-size:13px">{{ item.content }}</div>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="detailVisible = false">关闭</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="Gzjc">
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+
|
|
|
+// ==================== mock 数据 ====================
|
|
|
+const eventList = ref([
|
|
|
+ { eventNo: 'EVT20250613003', category: '积水', level: '一般', status: '处理中', lastVisitTime: '2025-06-13 10:00:00', nextVisitTime: '2025-06-13 16:00:00', handler: '张三', location: '科技大道中段', description: '路面积水严重，影响通行', timeline: [
|
|
|
+ { time: '2025-06-13 07:55', title: '事件接报', content: '视频监控发现积水', type: 'primary' },
|
|
|
+ { time: '2025-06-13 08:10', title: '事件核实', content: '核实积水深度约10cm', type: 'success' },
|
|
|
+ { time: '2025-06-13 08:30', title: '事件转接', content: '转接至排水管理部', type: 'warning' },
|
|
|
+ { time: '2025-06-13 10:00', title: '跟踪记录', content: '已安排疏通车前往，预计2小时完成', type: 'primary' }
|
|
|
+ ] },
|
|
|
+ { eventNo: 'EVT20250613004', category: '管道泄漏', level: '重大', status: '处理中', lastVisitTime: '2025-06-13 08:00:00', nextVisitTime: '2025-06-13 12:00:00', handler: '李四', location: '和平路步行街', description: '燃气管道疑似泄漏', timeline: [
|
|
|
+ { time: '2025-06-12 16:30', title: '事件接报', content: '市应急办转发', type: 'primary' },
|
|
|
+ { time: '2025-06-12 17:00', title: '事件核实', content: '已现场确认微泄漏', type: 'success' },
|
|
|
+ { time: '2025-06-12 17:30', title: '事件转接', content: '转接至市政部门', type: 'warning' },
|
|
|
+ { time: '2025-06-13 08:00', title: '跟踪记录', content: '已关闭阀门，正在抢修', type: 'primary' }
|
|
|
+ ] },
|
|
|
+ { eventNo: 'EVT20250613007', category: '积水', level: '一般', status: '已解除', lastVisitTime: '2025-06-13 09:30:00', nextVisitTime: '-', handler: '王五', location: '太湖路与松江路交叉口', description: '路口积水深度约15cm', timeline: [
|
|
|
+ { time: '2025-06-13 06:45', title: '事件接报', content: '交警监控共享平台发现', type: 'primary' },
|
|
|
+ { time: '2025-06-13 07:00', title: '事件核实', content: '积水属实，排水口堵塞', type: 'success' },
|
|
|
+ { time: '2025-06-13 07:30', title: '事件转接', content: '转接至排水管理部', type: 'warning' },
|
|
|
+ { time: '2025-06-13 09:00', title: '跟踪记录', content: '排水口已疏通，积水消退', type: 'primary' },
|
|
|
+ { time: '2025-06-13 09:30', title: '事件解除', content: '解除原因：处置完成', type: 'success' }
|
|
|
+ ] },
|
|
|
+ { eventNo: 'EVT20250613010', category: '设备故障', level: '一般', status: '处理中', lastVisitTime: '2025-06-13 15:30:00', nextVisitTime: '2025-06-14 09:00:00', handler: '赵六', location: '新华路88号大厦', description: '地下室排水泵故障', timeline: [
|
|
|
+ { time: '2025-06-13 14:35', title: '事件接报', content: '物业反映排水泵故障', type: 'primary' },
|
|
|
+ { time: '2025-06-13 15:00', title: '事件核实', content: '排水泵电机烧毁', type: 'success' },
|
|
|
+ { time: '2025-06-13 15:30', title: '跟踪记录', content: '已联系供应商备货更换', type: 'primary' }
|
|
|
+ ] },
|
|
|
+ { eventNo: 'EVT20250613011', category: '塌陷', level: '较大', status: '处理中', lastVisitTime: '2025-06-13 11:00:00', nextVisitTime: '2025-06-13 17:00:00', handler: '孙七', location: '人民路与建设路交叉口', description: '路面塌陷面积约2平方米', timeline: [
|
|
|
+ { time: '2025-06-13 08:35', title: '事件接报', content: '巡查上报', type: 'primary' },
|
|
|
+ { time: '2025-06-13 08:50', title: '事件核实', content: '塌陷属实，已设围挡', type: 'success' },
|
|
|
+ { time: '2025-06-13 09:00', title: '事件转接', content: '转接至管网维护部', type: 'warning' },
|
|
|
+ { time: '2025-06-13 11:00', title: '跟踪记录', content: '已安排施工队，预计3天修复', type: 'primary' }
|
|
|
+ ] },
|
|
|
+ { eventNo: 'EVT20250613012', category: '设备故障', level: '较大', status: '处理中', lastVisitTime: '-', nextVisitTime: '2025-06-13 22:00:00', handler: '周八', location: '珠江路工业园A区', description: '消防设施压力异常', timeline: [
|
|
|
+ { time: '2025-06-12 20:30', title: '事件接报', content: '省厅转发', type: 'primary' },
|
|
|
+ { time: '2025-06-12 21:00', title: '事件核实', content: '压力传感器故障', type: 'success' }
|
|
|
+ ] },
|
|
|
+ { eventNo: 'EVT20250613013', category: '积水', level: '较大', status: '已关闭', lastVisitTime: '2025-06-13 14:00:00', nextVisitTime: '-', handler: '吴九', location: '黄河路56号小区', description: '小区内污水外溢', timeline: [
|
|
|
+ { time: '2025-06-13 11:25', title: '事件接报', content: '市民热线反映', type: 'primary' },
|
|
|
+ { time: '2025-06-13 11:45', title: '事件核实', content: '污水外溢属实', type: 'success' },
|
|
|
+ { time: '2025-06-13 12:00', title: '事件转接', content: '转接至排水管理部', type: 'warning' },
|
|
|
+ { time: '2025-06-13 14:00', title: '跟踪记录', content: '化粪池已清掏，外溢停止', type: 'primary' },
|
|
|
+ { time: '2025-06-13 14:30', title: '事件解除', content: '解除原因：处置完成', type: 'success' },
|
|
|
+ { time: '2025-06-13 15:00', title: '事件关闭', content: '事件已归档', type: 'info' }
|
|
|
+ ] },
|
|
|
+ { eventNo: 'EVT20250613014', category: '塌陷', level: '一般', status: '处理中', lastVisitTime: '-', nextVisitTime: '2025-06-13 18:00:00', handler: '郑十', location: '中山路与解放路交叉口', description: '路灯杆倾斜', timeline: [
|
|
|
+ { time: '2025-06-13 13:05', title: '事件接报', content: '巡查上报', type: 'primary' },
|
|
|
+ { time: '2025-06-13 13:20', title: '事件核实', content: '灯杆倾斜约15度', type: 'success' }
|
|
|
+ ] },
|
|
|
+ { eventNo: 'EVT20250613015', category: '管道泄漏', level: '较大', status: '已解除', lastVisitTime: '2025-06-13 13:00:00', nextVisitTime: '-', handler: '刘一', location: '长江路北侧辅道', description: '供水管道破裂', timeline: [
|
|
|
+ { time: '2025-06-13 10:05', title: '事件接报', content: '巡查上报', type: 'primary' },
|
|
|
+ { time: '2025-06-13 10:20', title: '事件核实', content: 'DN300管道破裂', type: 'success' },
|
|
|
+ { time: '2025-06-13 10:30', title: '事件转接', content: '转接至市政部门', type: 'warning' },
|
|
|
+ { time: '2025-06-13 12:00', title: '跟踪记录', content: '管道已修复，恢复供水', type: 'primary' },
|
|
|
+ { time: '2025-06-13 13:00', title: '事件解除', content: '解除原因：处置完成', type: 'success' }
|
|
|
+ ] },
|
|
|
+ { eventNo: 'EVT20250613016', category: '设备故障', level: '重大', status: '处理中', lastVisitTime: '2025-06-13 10:00:00', nextVisitTime: '2025-06-13 16:00:00', handler: '陈二', location: '幸福路123号门前', description: '排水井盖缺失', timeline: [
|
|
|
+ { time: '2025-06-13 09:15', title: '事件接报', content: '市民热线反映', type: 'primary' },
|
|
|
+ { time: '2025-06-13 09:30', title: '事件核实', content: '井盖缺失，已设警示', type: 'success' },
|
|
|
+ { time: '2025-06-13 10:00', title: '跟踪记录', content: '已联系仓库调配备用井盖', type: 'primary' }
|
|
|
+ ] }
|
|
|
+])
|
|
|
+
|
|
|
+// ==================== 搜索筛选 ====================
|
|
|
+const filters = ref({ eventStatus: '', category: '', dateRange: null })
|
|
|
+
|
|
|
+const filteredList = computed(() => {
|
|
|
+ let list = eventList.value
|
|
|
+ if (filters.value.eventStatus) {
|
|
|
+ list = list.filter(o => o.status === filters.value.eventStatus)
|
|
|
+ }
|
|
|
+ if (filters.value.category) {
|
|
|
+ list = list.filter(o => o.category === filters.value.category)
|
|
|
+ }
|
|
|
+ if (filters.value.dateRange && filters.value.dateRange.length === 2) {
|
|
|
+ const [start, end] = filters.value.dateRange
|
|
|
+ list = list.filter(o => {
|
|
|
+ const t = o.timeline[0] && o.timeline[0].time ? o.timeline[0].time : ''
|
|
|
+ return t >= start && t <= end + ' 23:59:59'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return list
|
|
|
+})
|
|
|
+
|
|
|
+function handleSearch() {
|
|
|
+ pagination.value.page = 1
|
|
|
+}
|
|
|
+
|
|
|
+function handleReset() {
|
|
|
+ filters.value = { eventStatus: '', category: '', dateRange: null }
|
|
|
+ pagination.value.page = 1
|
|
|
+}
|
|
|
+
|
|
|
+// ==================== 分页 ====================
|
|
|
+const pagination = ref({ page: 1, pageSize: 10 })
|
|
|
+
|
|
|
+const pagedList = computed(() => {
|
|
|
+ const start = (pagination.value.page - 1) * pagination.value.pageSize
|
|
|
+ return filteredList.value.slice(start, start + pagination.value.pageSize)
|
|
|
+})
|
|
|
+
|
|
|
+function handleSizeChange(val) {
|
|
|
+ pagination.value.pageSize = val
|
|
|
+ pagination.value.page = 1
|
|
|
+}
|
|
|
+
|
|
|
+function handleCurrentChange(val) {
|
|
|
+ pagination.value.page = val
|
|
|
+}
|
|
|
+
|
|
|
+// ==================== 标签样式 ====================
|
|
|
+function statusTagType(status) {
|
|
|
+ if (status === '处理中') return 'primary'
|
|
|
+ if (status === '已解除') return 'warning'
|
|
|
+ if (status === '已关闭') return 'success'
|
|
|
+ return 'info'
|
|
|
+}
|
|
|
+
|
|
|
+function levelTagType(level) {
|
|
|
+ if (level === '特别重大') return 'danger'
|
|
|
+ if (level === '重大') return 'danger'
|
|
|
+ if (level === '较大') return 'warning'
|
|
|
+ return 'info'
|
|
|
+}
|
|
|
+
|
|
|
+// ==================== 跟踪 ====================
|
|
|
+const trackVisible = ref(false)
|
|
|
+const trackFormRef = ref(null)
|
|
|
+const trackForm = ref({ eventNo: '', content: '', assessment: '趋于平稳', needUpgrade: '否', nextVisitTime: '' })
|
|
|
+const trackRules = {
|
|
|
+ content: [{ required: true, message: '请输入跟踪内容', trigger: 'blur' }],
|
|
|
+ assessment: [{ required: true, message: '请选择态势评估', trigger: 'change' }],
|
|
|
+ needUpgrade: [{ required: true, message: '请选择是否升级', trigger: 'change' }],
|
|
|
+ nextVisitTime: [{ required: true, message: '请选择下次回访时间', trigger: 'change' }]
|
|
|
+}
|
|
|
+
|
|
|
+function handleTrack(row) {
|
|
|
+ currentRow.value = row
|
|
|
+ trackForm.value = { eventNo: row.eventNo, content: '', assessment: '趋于平稳', needUpgrade: '否', nextVisitTime: '' }
|
|
|
+ trackVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function confirmTrack() {
|
|
|
+ trackFormRef.value.validate(valid => {
|
|
|
+ if (!valid) return
|
|
|
+ const idx = eventList.value.findIndex(o => o.eventNo === trackForm.value.eventNo)
|
|
|
+ if (idx > -1) {
|
|
|
+ eventList.value[idx].timeline.push({
|
|
|
+ time: new Date().toLocaleString(),
|
|
|
+ title: '跟踪记录',
|
|
|
+ content: trackForm.value.content + '（态势：' + trackForm.value.assessment + '，升级：' + trackForm.value.needUpgrade + '）',
|
|
|
+ type: 'primary'
|
|
|
+ })
|
|
|
+ eventList.value[idx].lastVisitTime = new Date().toLocaleString()
|
|
|
+ eventList.value[idx].nextVisitTime = trackForm.value.nextVisitTime
|
|
|
+ }
|
|
|
+ trackVisible.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// ==================== 解除/关闭 ====================
|
|
|
+const closeVisible = ref(false)
|
|
|
+const closeFormRef = ref(null)
|
|
|
+const closeForm = ref({ eventNo: '', summary: '', reason: '', remark: '' })
|
|
|
+const closeRules = {
|
|
|
+ reason: [{ required: true, message: '请选择解除原因', trigger: 'change' }],
|
|
|
+ remark: [{ required: true, message: '请输入解除说明', trigger: 'blur' }]
|
|
|
+}
|
|
|
+const closeTitle = ref('事件解除')
|
|
|
+
|
|
|
+function handleClose(row) {
|
|
|
+ currentRow.value = row
|
|
|
+ closeTitle.value = row.status === '处理中' ? '事件解除' : '事件关闭'
|
|
|
+ closeForm.value = { eventNo: row.eventNo, summary: row.description, reason: '', remark: '' }
|
|
|
+ closeVisible.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function confirmClose() {
|
|
|
+ closeFormRef.value.validate(valid => {
|
|
|
+ if (!valid) return
|
|
|
+ const idx = eventList.value.findIndex(o => o.eventNo === closeForm.value.eventNo)
|
|
|
+ if (idx > -1) {
|
|
|
+ if (eventList.value[idx].status === '处理中') {
|
|
|
+ eventList.value[idx].status = '已解除'
|
|
|
+ eventList.value[idx].timeline.push({
|
|
|
+ time: new Date().toLocaleString(),
|
|
|
+ title: '事件解除',
|
|
|
+ content: '解除原因：' + closeForm.value.reason + '；' + closeForm.value.remark,
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ eventList.value[idx].nextVisitTime = '-'
|
|
|
+ } else if (eventList.value[idx].status === '已解除') {
|
|
|
+ eventList.value[idx].status = '已关闭'
|
|
|
+ eventList.value[idx].timeline.push({
|
|
|
+ time: new Date().toLocaleString(),
|
|
|
+ title: '事件关闭',
|
|
|
+ content: '事件已归档：' + closeForm.value.remark,
|
|
|
+ type: 'info'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ closeVisible.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// ==================== 详情 ====================
|
|
|
+const detailVisible = ref(false)
|
|
|
+const currentRow = ref(null)
|
|
|
+
|
|
|
+function handleDetail(row) {
|
|
|
+ currentRow.value = row
|
|
|
+ detailVisible.value = true
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.gzjc-page {
|
|
|
+ padding: 16px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ min-height: calc(100vh - 84px);
|
|
|
+}
|
|
|
+
|
|
|
+.filter-panel {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 12px 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-form {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.table-panel {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-wrap {
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-content {
|
|
|
+ padding: 0 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding-left: 8px;
|
|
|
+ border-left: 3px solid #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.desc-text {
|
|
|
+ background: #f5f7fa;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 1.6;
|
|
|
+ max-height: 120px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-form-item__label) {
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-form-item__content) {
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+</style>
|
