feat(dms): 添加设备巡检状态查看功能

- 在工单列表操作列添加查看设备巡检状态按钮
- 实现设备巡检状态弹窗展示已完成、待巡检、巡检中、异常等统计信息
- 集成设备明细表格展示设备名称、巡检步骤、巡检状态等详细信息
- 添加巡检状态筛选功能支持按状态过滤设备列表
- 新增 API 接口获取巡检实例详情列表数据
- 优化表格样式和标签颜色显示提升用户体验
master
zangch@mesnac.com 3 weeks ago
parent 11b1649d12
commit aa9e1dc4ed

@ -59,6 +59,8 @@ export interface DmsInspectInstanceDetailVO {
*/
remark: string;
machineName?: string;
}
export interface DmsInspectInstanceDetailForm extends BaseEntity {
@ -122,6 +124,8 @@ export interface DmsInspectInstanceDetailForm extends BaseEntity {
*/
remark?: string;
machineName?: string;
}
export interface DmsInspectInstanceDetailQuery extends PageQuery {
@ -185,6 +189,8 @@ export interface DmsInspectInstanceDetailQuery extends PageQuery {
*
*/
params?: any;
machineName?: string;
}

@ -127,18 +127,21 @@
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" v-if="columns[12].visible"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
<template #default="scope">
<!-- <el-tooltip content="修改" placement="top">-->
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['dms:dmsBillsInspectInstance:edit']"></el-button>-->
<!-- </el-tooltip>-->
<!-- <el-tooltip content="删除" placement="top">-->
<!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['dms:dmsBillsInspectInstance:remove']"></el-button>-->
<!-- </el-tooltip>-->
<!-- <el-tooltip content="修改" placement="top">-->
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['dms:dmsBillsInspectInstance:edit']"></el-button>-->
<!-- </el-tooltip>-->
<!-- <el-tooltip content="删除" placement="top">-->
<!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['dms:dmsBillsInspectInstance:remove']"></el-button>-->
<!-- </el-tooltip>-->
<!-- 查看设备按钮 -->
<el-tooltip content="查看设备巡检状态" placement="top">
<el-button link type="primary" icon="List" @click="handleViewDevices(scope.row)"></el-button>
</el-tooltip>
<!-- 启动工单按钮 -->
<el-tooltip content="启动工单" placement="top" v-if="!scope.row.wfDefinitionId">
<el-button link type="success" icon="View" @click="handleStartWorkflow(scope.row)">
</el-button>
<el-button link type="success" icon="View" @click="handleStartWorkflow(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
@ -153,6 +156,98 @@
:task-variables="taskVariables"
@submit-callback="submitCallback" />
<!-- 设备巡检状态弹窗 -->
<el-dialog
v-model="detailDialogVisible"
:title="`设备巡检状态 - ${currentInspectInstance?.billsInspectCode || ''}`"
width="90%"
append-to-body
>
<el-card shadow="never" class="detail-summary-card">
<div class="detail-summary">
<el-tag type="success" size="large" effect="dark">
已完成: {{ completedCount }}
</el-tag>
<el-tag type="warning" size="large" effect="dark" class="ml-2">
待巡检: {{ pendingCount }}
</el-tag>
<el-tag type="primary" size="large" effect="dark" class="ml-2">
巡检中: {{ inspectingCount }}
</el-tag>
<el-tag size="large" effect="dark" class="ml-2">
总计: {{ totalCount }}
</el-tag>
<el-tag type="danger" size="large" effect="dark" class="ml-2" v-if="abnormalCount > 0">
异常: {{ abnormalCount }}
</el-tag>
</div>
</el-card>
<el-card shadow="never" class="mt-3">
<el-form :inline="true">
<el-form-item label="巡检状态">
<el-select v-model="detailStatusFilter" placeholder="全部" clearable style="width: 150px">
<el-option label="全部" value="" />
<el-option
v-for="dict in dms_inspect_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-form>
<el-table
v-loading="detailLoading"
:data="filteredDetailList"
border
stripe
height="400"
style="width: 100%"
>
<el-table-column type="index" label="序号" width="60" align="center" fixed />
<!-- <el-table-column label="设备编号" prop="machineCode" width="140" align="center" fixed />-->
<el-table-column label="设备名称" prop="machineName" min-width="180" align="center" />
<el-table-column label="巡检步骤" prop="lineStep" width="90" align="center" />
<el-table-column label="巡检状态" width="100" align="center">
<template #default="{ row }">
<dict-tag :options="dms_inspect_status" :value="row.instanceDetailStatus" />
</template>
</el-table-column>
<!-- <el-table-column label="设备状态" width="90" align="center">
<template #default="{ row }">
<dict-tag :options="inspect_status" :value="row.inspectStatus" v-if="row.instanceDetailStatus === '3'" />
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>-->
<el-table-column label="巡检标准" prop="inspectStandard" min-width="200" align="center" show-overflow-tooltip />
<el-table-column label="巡检描述" prop="inspectDesc" min-width="200" align="center" show-overflow-tooltip />
<!-- <el-table-column label="巡检开始时间" prop="beginTime" width="160" align="center">
<template #default="{ row }">
<span v-if="row.beginTime">
{{ parseTime(row.beginTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
</span>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>
<el-table-column label="巡检结束时间" prop="endTime" width="160" align="center">
<template #default="{ row }">
<span v-if="row.endTime">
{{ parseTime(row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
</span>
<span v-else class="text-gray-400">-</span>
</template>
</el-table-column>-->
<el-table-column label="备注" prop="remark" min-width="150" align="center" show-overflow-tooltip />
</el-table>
</el-card>
<template #footer>
<div class="dialog-footer">
<el-button @click="detailDialogVisible = false"> </el-button>
</div>
</template>
</el-dialog>
<!-- 添加或修改点巡检工单对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="dmsBillsInspectInstanceFormRef" :model="form" :rules="rules" label-width="120px">
@ -240,12 +335,14 @@
<script setup name="DmsBillsInspectInstance" lang="ts">
import { listDmsBillsInspectInstance, getDmsBillsInspectInstance, delDmsBillsInspectInstance, addDmsBillsInspectInstance, updateDmsBillsInspectInstance, updateWfDefinitionIdById } from '@/api/dms/dmsBillsInspectInstance';
import { DmsBillsInspectInstanceVO, DmsBillsInspectInstanceQuery, DmsBillsInspectInstanceForm } from '@/api/dms/dmsBillsInspectInstance/types';
import { getDmsInspectInstanceDetailList } from '@/api/dms/dmsInspectInstanceDetail';
import type { DmsInspectInstanceDetailVO } from '@/api/dms/dmsInspectInstanceDetail/types';
import { useRouter } from 'vue-router';
import { startWorkFlow } from '@/api/workflow/task'
import SubmitVerify from '@/components/Process/submitVerify.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { inspect_type, dms_inspect_status } = toRefs<any>(proxy?.useDict('inspect_type', 'dms_inspect_status'));
const { inspect_type, dms_inspect_status, inspect_status } = toRefs<any>(proxy?.useDict('inspect_type', 'dms_inspect_status', 'inspect_status'));
const dmsBillsInspectInstanceList = ref<DmsBillsInspectInstanceVO[]>([]);
const buttonLoading = ref(false);
@ -256,6 +353,12 @@ const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const detailLoading = ref(false);
const detailList = ref<DmsInspectInstanceDetailVO[]>([]);
const detailDialogVisible = ref(false);
const currentInspectInstance = ref<DmsBillsInspectInstanceVO | null>(null);
const detailStatusFilter = ref('');
const queryFormRef = ref<ElFormInstance>();
const dmsBillsInspectInstanceFormRef = ref<ElFormInstance>();
@ -336,6 +439,27 @@ const getList = async () => {
loading.value = false;
}
/**
* 查看设备巡检状态
*/
const handleViewDevices = async (row: DmsBillsInspectInstanceVO) => {
currentInspectInstance.value = row;
detailDialogVisible.value = true;
detailStatusFilter.value = '';
try {
detailLoading.value = true;
const res = await getDmsInspectInstanceDetailList({ inspectInstanceId: row.inspectInstanceId });
detailList.value = res.data || [];
} catch (error) {
console.error('加载设备明细失败:', error);
proxy?.$modal.msgError('加载设备明细失败');
detailList.value = [];
} finally {
detailLoading.value = false;
}
};
/** 取消按钮 */
const cancel = () => {
reset();
@ -486,6 +610,33 @@ const handleWorkflowProgress = (row: DmsBillsInspectInstanceVO) => {
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
const taskVariables = ref<any>({});
const filteredDetailList = computed(() => {
if (!detailStatusFilter.value) {
return detailList.value;
}
return detailList.value.filter(item => item.instanceDetailStatus === detailStatusFilter.value);
});
const completedCount = computed(() => {
return detailList.value.filter(d => d.instanceDetailStatus === '3').length;
});
const pendingCount = computed(() => {
return detailList.value.filter(d => d.instanceDetailStatus === '1').length;
});
const inspectingCount = computed(() => {
return detailList.value.filter(d => d.instanceDetailStatus === '2').length;
});
const abnormalCount = computed(() => {
return detailList.value.filter(d => d.instanceDetailStatus === '3' && d.inspectStatus === '0').length;
});
const totalCount = computed(() => {
return detailList.value.length;
});
// -
const submitCallback = async () => {
try {
@ -502,3 +653,58 @@ onMounted(() => {
getList();
});
</script>
<style scoped>
.detail-summary-card {
margin-bottom: 16px;
}
.detail-summary {
display: flex;
align-items: center;
padding: 12px 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
color: white;
}
.detail-summary .el-tag {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
font-weight: 600;
padding: 8px 16px;
}
.detail-summary .el-tag--success {
background: rgba(103, 194, 58, 0.3);
border-color: rgba(103, 194, 58, 0.5);
}
.detail-summary .el-tag--warning {
background: rgba(230, 162, 60, 0.3);
border-color: rgba(230, 162, 60, 0.5);
}
.detail-summary .el-tag--primary {
background: rgba(64, 158, 255, 0.3);
border-color: rgba(64, 158, 255, 0.5);
}
.detail-summary .el-tag--danger {
background: rgba(245, 108, 108, 0.3);
border-color: rgba(245, 108, 108, 0.5);
}
.ml-2 {
margin-left: 12px;
}
.mt-3 {
margin-top: 16px;
}
.text-gray-400 {
color: #9CA3AF;
}
</style>

Loading…
Cancel
Save