|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="device-detail-page">
|
|
|
<!-- 左侧流程图区域 -->
|
|
|
- <div class="diagram-section">
|
|
|
+ <div class="diagram-section" :style="{flex: (activeTab === 'compo' || activeTab === 'record') ? '0 0 30%' : '1'}">
|
|
|
<process-diagram
|
|
|
ref="processDiagram"
|
|
|
:selected-device="deviceInfo"
|
|
|
@@ -10,7 +10,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧设备信息区域 -->
|
|
|
- <div class="device-info-section">
|
|
|
+ <div class="device-info-section" :style="{width: (activeTab === 'compo' || activeTab === 'record') ? '70%' : '400px'}">
|
|
|
<div class="info-panel">
|
|
|
<div class="panel-header">
|
|
|
<h3>设备信息</h3>
|
|
|
@@ -19,77 +19,129 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
|
|
|
- <div class="panel-content" v-if="deviceInfo">
|
|
|
- <el-descriptions :column="1" border>
|
|
|
- <el-descriptions-item label="设备名称">
|
|
|
- {{ deviceInfo.devName }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="设备位号">
|
|
|
- {{ deviceInfo.devTag }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="装置">
|
|
|
- {{ deviceInfo.plant }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="位置">
|
|
|
- {{ deviceInfo.devLoc }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="设备类型">
|
|
|
- {{ deviceInfo.devType }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="设备描述">
|
|
|
- {{ deviceInfo.devDesc }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="区域">
|
|
|
- {{ deviceInfo.devArea }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="区域负责人">
|
|
|
- {{ deviceInfo.areaResponsibleName || deviceInfo.areaResponsible || '-' }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="备注">
|
|
|
- {{ deviceInfo.remarks }}
|
|
|
- </el-descriptions-item>
|
|
|
- </el-descriptions>
|
|
|
-
|
|
|
- <!-- 设备照片展示 -->
|
|
|
- <div class="device-photo-section" v-if="deviceInfo.devPhoto">
|
|
|
- <h4 class="photo-title">设备照片</h4>
|
|
|
- <div class="photo-container">
|
|
|
- <el-image
|
|
|
- :src="getPhotoUrl(deviceInfo.devPhoto)"
|
|
|
- :preview-src-list="[getPhotoUrl(deviceInfo.devPhoto)]"
|
|
|
- fit="contain"
|
|
|
- class="device-photo">
|
|
|
- <div slot="error" class="image-slot">
|
|
|
- <i class="el-icon-picture-outline"></i>
|
|
|
- <p>图片加载失败</p>
|
|
|
- </div>
|
|
|
- </el-image>
|
|
|
+ <el-tabs v-if="deviceInfo" class="panel-tabs" v-model="activeTab" @tab-click="handleTabClick">
|
|
|
+ <!-- 设备信息标签页 -->
|
|
|
+ <el-tab-pane label="设备信息" name="info">
|
|
|
+ <el-descriptions :column="1" border>
|
|
|
+ <el-descriptions-item label="设备名称">
|
|
|
+ {{ deviceInfo.devName }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="设备位号">
|
|
|
+ {{ deviceInfo.devTag }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="装置">
|
|
|
+ {{ deviceInfo.plant }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="位置">
|
|
|
+ {{ deviceInfo.devLoc }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="设备类型">
|
|
|
+ {{ deviceInfo.devType }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="设备描述">
|
|
|
+ {{ deviceInfo.devDesc }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="区域">
|
|
|
+ {{ deviceInfo.devArea }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="区域负责人">
|
|
|
+ {{ deviceInfo.areaResponsibleName || deviceInfo.areaResponsible || '-' }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="备注">
|
|
|
+ {{ deviceInfo.remarks }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <!-- 设备照片展示 -->
|
|
|
+ <div class="device-photo-section" v-if="deviceInfo.devPhoto">
|
|
|
+ <h4 class="photo-title">设备照片</h4>
|
|
|
+ <div class="photo-container">
|
|
|
+ <el-image
|
|
|
+ :src="getPhotoUrl(deviceInfo.devPhoto)"
|
|
|
+ :preview-src-list="[getPhotoUrl(deviceInfo.devPhoto)]"
|
|
|
+ fit="contain"
|
|
|
+ class="device-photo">
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <i class="el-icon-picture-outline"></i>
|
|
|
+ <p>图片加载失败</p>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </el-tab-pane>
|
|
|
|
|
|
- <!-- 关联部件列表 -->
|
|
|
- <div class="device-compo-section" v-if="deviceInfo.compoList && deviceInfo.compoList.length > 0">
|
|
|
- <h4 class="compo-title">关联部件列表 ({{ deviceInfo.compoList.length }})</h4>
|
|
|
+ <!-- 关联部件标签页 -->
|
|
|
+ <el-tab-pane label="关联部件" name="compo" v-if="deviceInfo.compoList && deviceInfo.compoList.length > 0">
|
|
|
<el-table :data="deviceInfo.compoList" border size="small" style="margin-top: 10px;">
|
|
|
- <el-table-column label="部件名称" prop="compoName" :show-overflow-tooltip="true"/>
|
|
|
- <el-table-column label="部件型号" prop="compoModel" :show-overflow-tooltip="true"/>
|
|
|
- <el-table-column label="测厚点" prop="thicknessPt" width="80" :show-overflow-tooltip="true"/>
|
|
|
- <el-table-column label="照片" align="center" width="70">
|
|
|
+ <el-table-column label="部件名称" align="center" prop="compoName" width="120" :show-overflow-tooltip="true"/>
|
|
|
+ <el-table-column label="检查频率" align="center" prop="inspFreq" width="110" :show-overflow-tooltip="true">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ translateFrequency(scope.row.inspFreq) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="检查内容" align="center" prop="inspContent" width="180" :show-overflow-tooltip="true"/>
|
|
|
+ <el-table-column label="上次检查日期" align="center" prop="lastInspDate" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.lastInspDate, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="维修频率" align="center" prop="fixFreq" width="110" :show-overflow-tooltip="true">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ translateFrequency(scope.row.fixFreq) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="维修内容" align="center" prop="fixContent" width="180" :show-overflow-tooltip="true"/>
|
|
|
+ <el-table-column label="上次维修日期" align="center" prop="lastFixDate" width="120">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- v-if="scope.row.compoPhoto"
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-picture"
|
|
|
- @click="handleViewCompoPhoto(scope.row.compoPhoto)">
|
|
|
- 查看
|
|
|
- </el-button>
|
|
|
- <span v-else>-</span>
|
|
|
+ <span>{{ parseTime(scope.row.lastFixDate, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="更换频率" align="center" prop="replaceFreq" width="110" :show-overflow-tooltip="true">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ translateFrequency(scope.row.replaceFreq) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="更换内容" align="center" prop="replaceContent" width="180" :show-overflow-tooltip="true"/>
|
|
|
+ <el-table-column label="上次更换日期" align="center" prop="lastReplaceDate" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.lastReplaceDate, '{y}-{m}-{d}') }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <!-- 维修记录标签页 -->
|
|
|
+ <el-tab-pane label="维修记录" name="record">
|
|
|
+ <el-table v-loading="maintRecordLoading" :data="maintRecordList" border size="small" :height="clientHeight" style="margin-top: 10px; width: 100%;">
|
|
|
+ <el-table-column label="部件名称" align="center" prop="compoName" width="120" :show-overflow-tooltip="true"/>
|
|
|
+ <el-table-column label="维修类型" align="center" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.maintType === '1'">检查</span>
|
|
|
+ <span v-else-if="scope.row.maintType === '2'">维修</span>
|
|
|
+ <span v-else-if="scope.row.maintType === '3'">更换</span>
|
|
|
+ <span v-else>{{ scope.row.maintType || '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="责任人" align="center" width="100" :show-overflow-tooltip="true">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ getStaffNameById(scope.row.responsible) || '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="检查内容" align="center" prop="inspectContent" width="150" :show-overflow-tooltip="true"/>
|
|
|
+ <el-table-column label="检查时间" align="center" prop="inspectTime" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.inspectTime, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="维修内容" align="center" prop="maintContent" width="150" :show-overflow-tooltip="true"/>
|
|
|
+ <el-table-column label="维修时间" align="center" prop="maintTime" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ parseTime(scope.row.maintTime, '{y}-{m}-{d}') }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
|
|
|
<div class="panel-content" v-else>
|
|
|
<el-empty description="请点击流程图中的设备查看详情"></el-empty>
|
|
|
@@ -102,6 +154,8 @@
|
|
|
<script>
|
|
|
import ProcessDiagram from './process-diagram.vue'
|
|
|
import { getRel_device } from "@/api/reliability/rel_device";
|
|
|
+import { listRel_maint_record } from "@/api/reliability/rel_maint_record";
|
|
|
+import { listStaffmgrAll } from "@/api/plant/staffmgr";
|
|
|
|
|
|
export default {
|
|
|
name: 'DeviceDetail',
|
|
|
@@ -111,7 +165,12 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
deviceInfo: null,
|
|
|
- deviceId: null
|
|
|
+ deviceId: null,
|
|
|
+ activeTab: 'info',
|
|
|
+ maintRecordList: [],
|
|
|
+ maintRecordLoading: false,
|
|
|
+ clientHeight: 0,
|
|
|
+ staffOptions: []
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -120,6 +179,14 @@ export default {
|
|
|
if (this.deviceId) {
|
|
|
this.loadDeviceInfo();
|
|
|
}
|
|
|
+ // 加载员工列表
|
|
|
+ this.loadStaffList();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 设置表格高度对应屏幕高度
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.clientHeight = document.body.clientHeight - 250;
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
// 加载设备信息
|
|
|
@@ -135,6 +202,9 @@ export default {
|
|
|
this.$refs.processDiagram.highlightDevice(this.deviceInfo.devTag || this.deviceInfo.devName);
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ // 同时加载维修记录
|
|
|
+ this.loadMaintRecords();
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('加载设备信息失败:', error);
|
|
|
@@ -183,7 +253,93 @@ export default {
|
|
|
center: true
|
|
|
}
|
|
|
);
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理 tab 切换
|
|
|
+ handleTabClick(tab) {
|
|
|
+ this.activeTab = tab.name;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载维修记录
|
|
|
+ async loadMaintRecords() {
|
|
|
+ try {
|
|
|
+ this.maintRecordLoading = true;
|
|
|
+ const response = await listRel_maint_record({
|
|
|
+ devId: this.deviceId,
|
|
|
+ recordStatus: '2', // 只查询已完成的维修记录
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000
|
|
|
+ });
|
|
|
+ this.maintRecordList = response.rows || [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载维修记录失败:', error);
|
|
|
+ this.$message.error('加载维修记录失败');
|
|
|
+ } finally {
|
|
|
+ this.maintRecordLoading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取维修状态标签类型
|
|
|
+ getRecordStatusTagType(status) {
|
|
|
+ const statusMap = {
|
|
|
+ '-1': 'danger', // 删除申请中
|
|
|
+ '0': 'info', // 新增申请中
|
|
|
+ '1': 'warning', // 待完成
|
|
|
+ '2': 'success' // 已完成
|
|
|
+ };
|
|
|
+ return statusMap[status] || 'info';
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取维修状态文本
|
|
|
+ getRecordStatusText(status) {
|
|
|
+ const statusMap = {
|
|
|
+ '-1': '删除申请中',
|
|
|
+ '0': '新增申请中',
|
|
|
+ '1': '待完成',
|
|
|
+ '2': '已完成'
|
|
|
+ };
|
|
|
+ return statusMap[status] || '-';
|
|
|
+ },
|
|
|
+
|
|
|
+ // 转换频率显示
|
|
|
+ translateFrequency(frequency) {
|
|
|
+ if (!frequency) return '-';
|
|
|
+
|
|
|
+ // 匹配数字和单位
|
|
|
+ const match = frequency.match(/^(\d+)([ym])$/);
|
|
|
+ if (match) {
|
|
|
+ const number = match[1];
|
|
|
+ const unit = match[2];
|
|
|
+
|
|
|
+ switch (unit) {
|
|
|
+ case 'y':
|
|
|
+ return `${number}年一次`;
|
|
|
+ case 'm':
|
|
|
+ return `${number}月一次`;
|
|
|
+ default:
|
|
|
+ return frequency;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return frequency;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载员工列表
|
|
|
+ loadStaffList() {
|
|
|
+ listStaffmgrAll().then(response => {
|
|
|
+ this.staffOptions = response.rows || response.data || [];
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('加载员工数据失败:', error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 根据员工ID获取姓名
|
|
|
+ getStaffNameById(staffid) {
|
|
|
+ if (!staffid) return '';
|
|
|
+ const staff = this.staffOptions.find(s => s.staffid === staffid);
|
|
|
+ return staff ? staff.name : '';
|
|
|
+ },
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -199,6 +355,7 @@ export default {
|
|
|
flex: 1;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
+ transition: flex 0.3s ease-in-out;
|
|
|
}
|
|
|
|
|
|
.device-info-section {
|
|
|
@@ -207,6 +364,7 @@ export default {
|
|
|
border-left: 1px solid #e5e7eb;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ transition: width 0.3s ease-in-out;
|
|
|
}
|
|
|
|
|
|
.info-panel {
|
|
|
@@ -237,6 +395,26 @@ export default {
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
+.panel-tabs {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.panel-tabs /deep/ .el-tabs__content {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.panel-tabs /deep/ .el-tab-pane {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.panel-tabs /deep/ .el-table {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
.device-photo-section {
|
|
|
margin-top: 20px;
|
|
|
padding-top: 20px;
|