zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ems): 优化故障记录页面功能和样式

Browse Source 
- 添加故障记录详情抽屉，展示故障记录的详细信息
- 实现表格行右击菜单功能，支持查看、修改和删除记录
- 优化表格样式，增加自动计算处置时长功能
- 添加全局权限控制，根据用户权限显示不同操作按钮
- 增加响应式设计，优化小屏显示效果
boardTest
zch 3 weeks ago
parent cea8b8704b
commit aeb33d851b
1 changed files with 296 additions and 37 deletions
Show Stats Download Patch File Download Diff File

307
src/views/ems/info/dailyFaultRecord/index.vue
Unescape Escape View File

@ -89,6 +89,15 @@
</el-form-item>
</el-form> -->
<!-- 操作提示 -->
<!-- <el-alert
title="提示：可以在表格行上右击查看详细信息，或点击操作列的详情按钮"
type="info"
:closable="false"
show-icon
style="margin-bottom: 10px;"
/> -->
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
@ -145,21 +154,35 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="dailyFaultRecordList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="dailyFaultRecordList"
@selection-change="handleSelectionChange"
@row-contextmenu="handleRowContextMenu"
class="fault-record-table"
tooltip-effect="dark"
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键，自增ID" align="center" prop="id" v-if="columns[0].visible"/>
<el-table-column label="日期" align="center" prop="date" v-if="columns[1].visible"/>
<el-table-column label="位置" align="center" prop="location" v-if="columns[2].visible"/>
<el-table-column label="当日值班长" align="center" prop="dailyDutySupervisor" v-if="columns[3].visible"/>
<el-table-column label="天达当日值班长" align="center" prop="tendaDailyDutySupervisor" v-if="columns[4].visible"/>
<el-table-column label="故障情况" align="center" prop="faultSituation" v-if="columns[5].visible"/>
<el-table-column label="处置措施" align="center" prop="handlingMeasures" v-if="columns[6].visible"/>
<el-table-column label="故障情况" align="center" prop="faultSituation" v-if="columns[5].visible" show-overflow-tooltip/>
<el-table-column label="处置措施" align="center" prop="handlingMeasures" v-if="columns[6].visible" show-overflow-tooltip/>
<el-table-column label="故障类型" align="center" prop="faultType" v-if="columns[7].visible"/>
<el-table-column label="故障发生时间" align="center" prop="faultOccurrenceTime" v-if="columns[8].visible"/>
<el-table-column label="处置完毕时间" align="center" prop="handlingCompletionTime" v-if="columns[9].visible"/>
<el-table-column label="处置时长" align="center" prop="handlingDuration" v-if="columns[10].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="handleViewDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@ -233,7 +256,7 @@
/>
</el-form-item>
<el-form-item label="处置时长" prop="handlingDuration">
<el-input v-model="form.handlingDuration" placeholder="自动计算" disabled />
<el-input v-model="form.handlingDuration" placeholder="由系统自动计算" disabled />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -271,11 +294,84 @@
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
<!-- 详情抽屉 -->
<el-drawer
title="故障记录详情"
:visible.sync="detailDrawer"
direction="rtl"
size="500px"
:before-close="handleDetailClose"
>
<div class="detail-content" v-if="currentRecord">
<el-descriptions :column="1" border>
<el-descriptions-item label="记录ID">
<span>{{ currentRecord.id }}</span>
</el-descriptions-item>
<el-descriptions-item label="日期">
<span>{{ currentRecord.date }}</span>
</el-descriptions-item>
<el-descriptions-item label="位置">
<span>{{ currentRecord.location || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="当日值班长">
<span>{{ currentRecord.dailyDutySupervisor || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="天达当日值班长">
<span>{{ currentRecord.tendaDailyDutySupervisor || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障类型">
<span>{{ currentRecord.faultType || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障发生时间">
<span>{{ currentRecord.faultOccurrenceTime || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="处置完毕时间">
<span>{{ currentRecord.handlingCompletionTime || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="处置时长">
<span>{{ currentRecord.handlingDuration || '暂无' }}</span>
</el-descriptions-item>
<el-descriptions-item label="故障情况">
<div class="detail-text-content">
{{ currentRecord.faultSituation || '暂无' }}
</div>
</el-descriptions-item>
<el-descriptions-item label="处置措施">
<div class="detail-text-content">
{{ currentRecord.handlingMeasures || '暂无' }}
</div>
</el-descriptions-item>
</el-descriptions>
</div>
</el-drawer>
<!-- 右击菜单 -->
<ul
v-show="contextMenuVisible"
:style="contextMenuStyle"
class="context-menu"
@click.stop
>
<li @click="handleViewDetail(contextMenuRow)">
<i class="el-icon-view"></i>
查看详情
</li>
<li @click="handleUpdate(contextMenuRow)" v-if="checkPermission(['ems/info:dailyFaultRecord:edit'])">
<i class="el-icon-edit"></i>
修改记录
</li>
<li @click="handleDelete(contextMenuRow)" v-if="checkPermission(['ems/info:dailyFaultRecord:remove'])">
<i class="el-icon-delete"></i>
删除记录
</li>
</ul>
</div>
</template>
<script>
import { listDailyFaultRecord, getDailyFaultRecord, delDailyFaultRecord, addDailyFaultRecord, updateDailyFaultRecord } from "@/api/ems/info/dailyFaultRecord";
import { checkPermi } from "@/utils/permission";
export default {
name: "DailyFaultRecord",
@ -342,7 +438,19 @@
updateSupport: false,
isUploading: false,
headers: {}
}
},
// 详情抽屉相关
detailDrawer: false,
currentRecord: null,
// 右击菜单相关
contextMenuVisible: false,
contextMenuStyle: {
position: 'fixed',
zIndex: 1000,
left: '0px',
top: '0px'
},
contextMenuRow: null
};
},
created() {
@ -350,13 +458,13 @@
this.upload.url = process.env.VUE_APP_BASE_API + "/ems/info/dailyFaultRecord/importData";
this.upload.headers = { Authorization: "Bearer " + this.$store.getters.token };
},
watch: {
'form.faultOccurrenceTime'(newVal) {
this.calculateHandlingDuration();
},
'form.handlingCompletionTime'(newVal) {
this.calculateHandlingDuration();
mounted() {
// 添加全局点击事件监听，用于隐藏右击菜单
document.addEventListener('click', this.hideContextMenu);
},
beforeDestroy() {
// 移除全局点击事件监听
document.removeEventListener('click', this.hideContextMenu);
},
methods: {
/** 查询日常故障记录列表 */
@ -484,21 +592,172 @@
submitFileForm() {
this.$refs.upload.submit();
},
calculateHandlingDuration() {
if (this.form.faultOccurrenceTime && this.form.handlingCompletionTime) {
const startTime = new Date(`2023-01-01T${this.form.faultOccurrenceTime}`);
const endTime = new Date(`2023-01-01T${this.form.handlingCompletionTime}`);
if (!isNaN(startTime.getTime()) && !isNaN(endTime.getTime()) && endTime > startTime) {
const durationMs = endTime - startTime;
const durationSeconds = Math.floor(durationMs / 1000);
this.form.handlingDuration = `${durationSeconds} 秒`;
} else {
this.form.handlingDuration = '无效时间';
/** 查看详情 */
handleViewDetail(row) {
this.currentRecord = row;
this.detailDrawer = true;
this.hideContextMenu();
},
/** 关闭详情抽屉 */
handleDetailClose() {
this.currentRecord = null;
this.detailDrawer = false;
},
/** 处理行右击事件 */
handleRowContextMenu(row, column, event) {
event.preventDefault();
this.contextMenuRow = row;
// 设置右击菜单位置，考虑边界情况
this.$nextTick(() => {
const menuWidth = 120; // 菜单宽度
const menuHeight = 120; // 菜单高度
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
let left = event.clientX;
let top = event.clientY;
// 防止菜单超出右边界
if (left + menuWidth > windowWidth) {
left = windowWidth - menuWidth - 10;
}
} else {
this.form.handlingDuration = '';
// 防止菜单超出下边界
if (top + menuHeight > windowHeight) {
top = windowHeight - menuHeight - 10;
}
this.contextMenuStyle.left = left + 'px';
this.contextMenuStyle.top = top + 'px';
this.contextMenuVisible = true;
});
},
/** 隐藏右击菜单 */
hideContextMenu() {
this.contextMenuVisible = false;
this.contextMenuRow = null;
},
/** 检查权限 */
checkPermission(permissions) {
return checkPermi(permissions);
},
}
};
</script>
<style scoped>
/* 右击菜单样式 */
.context-menu {
position: fixed;
z-index: 1000;
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 5px 0;
margin: 0;
list-style: none;
min-width: 120px;
}
.context-menu li {
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
color: #606266;
display: flex;
align-items: center;
transition: background-color 0.3s;
}
.context-menu li:hover {
background-color: #f5f7fa;
color: #409eff;
}
.context-menu li i {
margin-right: 8px;
font-size: 14px;
}
/* 详情内容样式 */
.detail-content {
padding: 20px;
}
.detail-text-content {
max-height: 200px;
overflow-y: auto;
word-wrap: break-word;
word-break: break-all;
line-height: 1.6;
padding: 8px;
background-color: #f8f9fa;
border-radius: 4px;
border: 1px solid #e9ecef;
}
/* 表格行悬停效果 */
.fault-record-table .el-table__row {
transition: background-color 0.3s;
}
.fault-record-table .el-table__row:hover {
cursor: context-menu;
background-color: #f0f9ff !important;
}
/* 表格样式优化 */
.fault-record-table {
border-radius: 4px;
overflow: hidden;
}
.fault-record-table .el-table__header-wrapper {
border-radius: 4px 4px 0 0;
}
/* 描述列表样式优化 */
.detail-content .el-descriptions {
margin-top: 0;
}
.detail-content .el-descriptions-item__label {
font-weight: 600;
color: #303133;
width: 90px;
}
.detail-content .el-descriptions-item__content {
color: #606266;
}
/* 响应式设计 */
@media (max-width: 768px) {
.context-menu {
min-width: 100px;
font-size: 12px;
}
.context-menu li {
padding: 6px 12px;
}
.detail-content {
padding: 15px;
}
.detail-content .el-descriptions-item__label {
width: 80px;
font-size: 13px;
}
}
/* 打印样式 */
@media print {
.context-menu {
display: none !important;
}
}
</style>

Write Preview
Loading…
Cancel
Save