<template>
|
<view class="fault-analysis-page">
|
<!-- 页面头部 -->
|
<PageHeader title="故障分析追溯" @back="goBack" />
|
|
<!-- 统计概览 -->
|
<view class="overview-section">
|
<view class="section-item">
|
<view class="item-header">
|
<view class="item-left">
|
<view class="document-icon">
|
<up-icon name="file-text" size="16" color="#ffffff"></up-icon>
|
</view>
|
<text class="item-id">统计概览</text>
|
</view>
|
</view>
|
<up-divider></up-divider>
|
|
<view class="overview-content">
|
<view class="overview-item">
|
<view class="overview-number">{{ overviewData.totalFaults }}</view>
|
<view class="overview-label">故障总数</view>
|
</view>
|
<view class="overview-item">
|
<view class="overview-number">{{ overviewData.totalDowntime }}</view>
|
<view class="overview-label">总停机时长(h)</view>
|
</view>
|
<view class="overview-item">
|
<view class="overview-number">{{ overviewData.avgRepairTime }}</view>
|
<view class="overview-label">平均修复时间(h)</view>
|
</view>
|
<view class="overview-item">
|
<view class="overview-number">{{ overviewData.faultRate }}%</view>
|
<view class="overview-label">故障率</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 故障类型统计 -->
|
<view class="stat-section">
|
<view class="section-item">
|
<view class="item-header">
|
<view class="item-left">
|
<view class="document-icon">
|
<up-icon name="file-text" size="16" color="#ffffff"></up-icon>
|
</view>
|
<text class="item-id">故障类型统计</text>
|
</view>
|
</view>
|
<up-divider></up-divider>
|
|
<view class="item-details">
|
<view class="detail-row" v-for="(item, index) in faultTypeStats" :key="index">
|
<text class="detail-label">{{ item.name }}</text>
|
<text class="detail-value">{{ item.value }}次</text>
|
<text class="detail-value highlight">{{ item.percent }}%</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 根因分析统计 -->
|
<view class="stat-section">
|
<view class="section-item">
|
<view class="item-header">
|
<view class="item-left">
|
<view class="document-icon">
|
<up-icon name="search" size="16" color="#ffffff"></up-icon>
|
</view>
|
<text class="item-id">根因分析统计</text>
|
</view>
|
</view>
|
<up-divider></up-divider>
|
|
<view class="item-details">
|
<view class="detail-row" v-for="(item, index) in rootCauseStats" :key="index">
|
<text class="detail-label">{{ item.name }}</text>
|
<text class="detail-value">{{ item.value }}次</text>
|
<text class="detail-value highlight">{{ item.percent }}%</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 详细数据列表 -->
|
<view class="table-section">
|
<view class="section-item">
|
<view class="item-header">
|
<view class="item-left">
|
<view class="document-icon">
|
<up-icon name="list" size="16" color="#ffffff"></up-icon>
|
</view>
|
<text class="item-id">详细数据</text>
|
</view>
|
</view>
|
<up-divider></up-divider>
|
|
<view class="fault-list">
|
<view v-for="(item, index) in tableData" :key="index" class="fault-item">
|
<view class="item-details">
|
<view class="detail-row">
|
<text class="detail-label">设备名称</text>
|
<text class="detail-value">{{ item.equipmentName }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">故障类型</text>
|
<view class="detail-value">
|
<u-tag :type="getFaultTypeTagType(item.faultType)" size="small">
|
{{ item.faultType }}
|
</u-tag>
|
</view>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">根因</text>
|
<text class="detail-value">{{ item.rootCause }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">停机时长</text>
|
<text class="detail-value highlight">{{ item.downtime }}h</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">班组</text>
|
<text class="detail-value">{{ item.team }}</text>
|
</view>
|
<view class="detail-row">
|
<text class="detail-label">发生时间</text>
|
<text class="detail-value">{{ item.occurTime }}</text>
|
</view>
|
</view>
|
<up-divider v-if="index < tableData.length - 1"></up-divider>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import PageHeader from '@/components/PageHeader.vue'
|
|
// 统计概览数据
|
const overviewData = ref({
|
totalFaults: 156,
|
totalDowntime: 1248.5,
|
avgRepairTime: 8.0,
|
faultRate: 3.2
|
})
|
|
// 故障类型统计
|
const faultTypeStats = ref([
|
{ name: '机械故障', value: 45, percent: 28.8 },
|
{ name: '电气故障', value: 32, percent: 20.5 },
|
{ name: '液压故障', value: 28, percent: 17.9 },
|
{ name: '气动故障', value: 25, percent: 16.0 },
|
{ name: '其他故障', value: 26, percent: 16.7 }
|
])
|
|
// 根因分析统计
|
const rootCauseStats = ref([
|
{ name: '操作不当', value: 35, percent: 22.4 },
|
{ name: '设备老化', value: 28, percent: 17.9 },
|
{ name: '维护不足', value: 22, percent: 14.1 },
|
{ name: '环境因素', value: 18, percent: 11.5 },
|
{ name: '设计缺陷', value: 15, percent: 9.6 },
|
{ name: '其他原因', value: 38, percent: 24.4 }
|
])
|
|
// 表格数据
|
const tableData = ref([
|
{
|
equipmentName: '生产线A-01',
|
faultType: '机械故障',
|
rootCause: '轴承磨损',
|
downtime: 12.5,
|
team: '生产一班',
|
occurTime: '2024-01-15 14:30'
|
},
|
{
|
equipmentName: '检测设备B-02',
|
faultType: '电气故障',
|
rootCause: '电路短路',
|
downtime: 8.0,
|
team: '生产二班',
|
occurTime: '2024-01-16 09:15'
|
},
|
{
|
equipmentName: '辅助设备C-03',
|
faultType: '液压故障',
|
rootCause: '油管泄漏',
|
downtime: 6.5,
|
team: '维修班',
|
occurTime: '2024-01-17 16:45'
|
},
|
{
|
equipmentName: '生产线A-02',
|
faultType: '气动故障',
|
rootCause: '气压不足',
|
downtime: 4.0,
|
team: '生产一班',
|
occurTime: '2024-01-18 11:20'
|
},
|
{
|
equipmentName: '检测设备B-01',
|
faultType: '机械故障',
|
rootCause: '传动带断裂',
|
downtime: 15.0,
|
team: '生产二班',
|
occurTime: '2024-01-19 08:30'
|
}
|
])
|
|
// 方法
|
const goBack = () => {
|
uni.navigateBack()
|
}
|
|
const getFaultTypeTagType = (faultType) => {
|
const typeMap = {
|
'机械故障': 'error',
|
'电气故障': 'warning',
|
'液压故障': 'info',
|
'气动故障': 'success',
|
'其他故障': 'primary'
|
}
|
return typeMap[faultType] || 'primary'
|
}
|
|
// 生命周期
|
onMounted(() => {
|
console.log('故障分析页面已加载')
|
})
|
</script>
|
|
<style scoped>
|
.fault-analysis-page {
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
.overview-section,
|
.stat-section,
|
.table-section {
|
margin: 15px;
|
}
|
|
.section-item {
|
background: #ffffff;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
overflow: hidden;
|
}
|
|
.item-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 15px;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
}
|
|
.item-left {
|
display: flex;
|
align-items: center;
|
}
|
|
.document-icon {
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 0.2);
|
border-radius: 6px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 10px;
|
}
|
|
.item-id {
|
color: #ffffff;
|
font-size: 16px;
|
font-weight: 600;
|
}
|
|
.overview-content {
|
display: flex;
|
justify-content: space-around;
|
padding: 20px 15px;
|
}
|
|
.overview-item {
|
text-align: center;
|
flex: 1;
|
}
|
|
.overview-number {
|
font-size: 24px;
|
font-weight: bold;
|
color: #007aff;
|
margin-bottom: 5px;
|
}
|
|
.overview-label {
|
font-size: 12px;
|
color: #666;
|
}
|
|
.item-details {
|
padding: 15px;
|
}
|
|
.detail-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 12px 0;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.detail-row:last-child {
|
border-bottom: none;
|
}
|
|
.detail-label {
|
font-size: 14px;
|
color: #666;
|
min-width: 80px;
|
}
|
|
.detail-value {
|
font-size: 14px;
|
color: #333;
|
font-weight: 500;
|
text-align: right;
|
}
|
|
.detail-value.highlight {
|
color: #007aff;
|
font-weight: bold;
|
}
|
|
.fault-list {
|
padding: 15px;
|
}
|
|
.fault-item {
|
margin-bottom: 15px;
|
}
|
|
.fault-item:last-child {
|
margin-bottom: 0;
|
}
|
</style>
|
