Merge remote-tracking branch 'refs/remotes/origin/dev_New' into dev_tide_mi...

zouyu

8 天以前 1c0863efe062af3ebcdecb8c10568d779f5c8295

 src/views/equipmentManagement/kplMonitor/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,714 @@
<template>
  <div class="kpl-monitor-container">
    <!-- é¡µé¢å¤´éƒ¨ -->
    <div class="page-header">
      <div class="header-content">
        <h1>KPL监控分析</h1>
        <p>设备关键性能指标监控与维保策略优化</p>
      </div>
      <div class="time-range">
        <el-date-picker
          v-model="timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          @change="fetchKPLData"
        />
      </div>
    </div>

    <!-- å…³é”®æŒ‡æ ‡æ¦‚览 -->
    <div class="metrics-overview">
      <div class="metric-card mtbf-card">
        <div class="metric-icon">⏱️</div>
        <div class="metric-content">
          <div class="metric-title">MTBF</div>
          <div class="metric-subtitle">平均无故障时间</div>
          <div class="metric-value">{{ currentMTBF }}<span class="unit">小时</span></div>
          <div class="metric-trend" :class="mtbfTrendClass">
            <span class="trend-icon">{{ mtbfTrendText }}</span>
            <span class="trend-text">{{ Math.abs(mtbfChange) }}%</span>
          </div>
        </div>
      </div>

      <div class="metric-card mttr-card">
        <div class="metric-icon">🔧</div>
        <div class="metric-content">
          <div class="metric-title">MTTR</div>
          <div class="metric-subtitle">平均修复时间</div>
          <div class="metric-value">{{ currentMTTR }}<span class="unit">小时</span></div>
          <div class="metric-trend" :class="mttrTrendClass">
            <span class="trend-icon">{{ mttrTrendText }}</span>
            <span class="trend-text">{{ Math.abs(mttrChange) }}%</span>
          </div>
        </div>
      </div>

      <div class="metric-card availability-card">
        <div class="metric-icon">📊</div>
        <div class="metric-content">
          <div class="metric-title">设备可用率</div>
          <div class="metric-subtitle">运行效率指标</div>
          <div class="metric-value">{{ currentAvailability }}<span class="unit">%</span></div>
          <div class="metric-trend" :class="availabilityTrendClass">
            <span class="trend-icon">{{ availabilityTrendText }}</span>
            <span class="trend-text">{{ Math.abs(availabilityChange) }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- è¶‹åŠ¿åˆ†æžå›¾è¡¨ -->
    <div class="charts-section">
      <div class="chart-container">
        <div class="chart-header">
          <h3>MTBF & MTTR è¶‹åŠ¿åˆ†æž</h3>
          <div class="chart-legend">
            <span class="legend-item mtbf-legend">
              <span class="legend-color"></span>
              MTBF (平均无故障时间)
            </span>
            <span class="legend-item mttr-legend">
              <span class="legend-color"></span>
              MTTR (平均修复时间)
            </span>
          </div>
        </div>
        <div class="chart-wrapper">
          <div ref="trendChart" class="chart"></div>
        </div>
      </div>
    </div>

    <!-- ç»´ä¿ç­–略建议 -->
    <div class="recommendations-section">
      <div class="section-header">
        <h3>维保策略优化建议</h3>
        <p>基于当前指标分析，为您提供针对性的优化建议</p>
      </div>
      <div class="recommendations-grid">
        <div 
          v-for="(recommendation, index) in recommendations" 
          :key="index"
          class="recommendation-card"
        >
          <div class="recommendation-icon">{{ recommendation.icon }}</div>
          <div class="recommendation-content">
            <h4>{{ recommendation.title }}</h4>
            <p>{{ recommendation.description }}</p>
            <div class="recommendation-priority" :class="recommendation.priority">
              {{ recommendation.priorityText }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import * as echarts from 'echarts'

// ç”Ÿæˆæ¨¡æ‹Ÿæ•°æ®
const generateMockData = () => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const mtbfData = months.map(() => Math.floor(Math.random() * 200 + 300)) // 300-500小时
  const mttrData = months.map(() => Math.floor(Math.random() * 8 + 4)) // 4-12小时
  
  return {
    months,
    mtbfData,
    mttrData
  }
}

const timeRange = ref([
  new Date(new Date().getFullYear(), 0, 1).toISOString().split('T')[0],
  new Date().toISOString().split('T')[0]
])

const mockData = reactive(generateMockData())

// è®¡ç®—当前指标值
const currentMTBF = computed(() => mockData.mtbfData[mockData.mtbfData.length - 1])
const currentMTTR = computed(() => mockData.mttrData[mockData.mttrData.length - 1])
const currentAvailability = computed(() => 
  Math.round((currentMTBF.value / (currentMTBF.value + currentMTTR.value)) * 100)
)

// è®¡ç®—变化趋势
const mtbfChange = computed(() => {
  const current = currentMTBF.value
  const previous = mockData.mtbfData[mockData.mtbfData.length - 2] || current
  return Math.round(((current - previous) / previous) * 100)
})

const mttrChange = computed(() => {
  const current = currentMTTR.value
  const previous = mockData.mttrData[mockData.mttrData.length - 2] || current
  return Math.round(((current - previous) / previous) * 100)
})

const availabilityChange = computed(() => {
  const current = currentAvailability.value
  const previous = Math.round(
    (mockData.mtbfData[mockData.mtbfData.length - 2] / 
    (mockData.mtbfData[mockData.mtbfData.length - 2] + mockData.mttrData[mockData.mttrData.length - 2])) * 100
  ) || current
  return Math.round(((current - previous) / previous) * 100)
})

// è¶‹åŠ¿æ ·å¼å’Œæ–‡æœ¬
const mtbfTrendClass = computed(() => mtbfChange.value >= 0 ? 'trend-up' : 'trend-down')
const mttrTrendClass = computed(() => mttrChange.value <= 0 ? 'trend-up' : 'trend-down')
const availabilityTrendClass = computed(() => availabilityChange.value >= 0 ? 'trend-up' : 'trend-down')

const mtbfTrendText = computed(() => mtbfChange.value >= 0 ? '↗' : '↘')
const mttrTrendText = computed(() => mttrChange.value <= 0 ? '↗' : '↘')
const availabilityTrendText = computed(() => availabilityChange.value >= 0 ? '↗' : '↘')

// æ™ºèƒ½ç»´ä¿å»ºè®®
const recommendations = computed(() => {
  const suggestions = []
  
  // MTBF相关建议
  if (currentMTBF.value < 400) {
    suggestions.push({
      icon: '🔧',
      title: '提升MTBF',
      description: '当前MTBF较低，建议加强预防性维护，定期检查关键部件，延长设备无故障运行时间',
      priority: 'high',
      priorityText: '高优先级'
    })
  }
  
  // MTTR相关建议
  if (currentMTTR.value > 8) {
    suggestions.push({
      icon: '⚡',
      title: '优化MTTR',
      description: '当前MTTR较高，建议优化维修流程，提高维修人员技能，缩短故障修复时间',
      priority: 'high',
      priorityText: '高优先级'
    })
  }
  
  // å¯ç”¨çŽ‡ç›¸å…³å»ºè®®
  if (currentAvailability.value < 95) {
    suggestions.push({
      icon: '📈',
      title: '提升可用率',
      description: '设备可用率有待提升，建议优化维保计划安排，减少计划外停机时间',
      priority: 'medium',
      priorityText: '中优先级'
    })
  }
  
  // ç»¼åˆå»ºè®®
  if (currentMTBF.value >= 400 && currentMTTR.value <= 8 && currentAvailability.value >= 95) {
    suggestions.push({
      icon: '✅',
      title: '运行状况良好',
      description: '当前设备运行状况良好，各项指标均达到预期，建议继续保持现有维保策略',
      priority: 'low',
      priorityText: '低优先级'
    })
  }
  
  // é¢„防性建议
  suggestions.push({
    icon: '📋',
    title: '预防性维护',
    description: '建议建立设备健康档案，定期分析设备运行数据，提前识别潜在故障风险',
    priority: 'medium',
    priorityText: '中优先级'
  })
  
  return suggestions
})

// å›¾è¡¨å®žä¾‹
let trendChart = null

const initChart = () => {
  nextTick(() => {
    trendChart = echarts.init(document.querySelector('.chart'))
    trendChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        data: ['MTBF', 'MTTR'],
        top: 10
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: mockData.months,
        axisLine: {
          lineStyle: {
            color: '#e0e0e0'
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          name: 'MTBF (小时)',
          position: 'left',
          axisLine: {
            lineStyle: {
              color: '#1890ff'
            }
          },
          axisLabel: {
            formatter: '{value}h'
          }
        },
        {
          type: 'value',
          name: 'MTTR (小时)',
          position: 'right',
          axisLine: {
            lineStyle: {
              color: '#52c41a'
            }
          },
          axisLabel: {
            formatter: '{value}h'
          }
        }
      ],
      series: [
        {
          name: 'MTBF',
          type: 'line',
          yAxisIndex: 0,
          data: mockData.mtbfData,
          smooth: true,
          lineStyle: {
            color: '#1890ff',
            width: 3
          },
          itemStyle: {
            color: '#1890ff'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
              { offset: 1, color: 'rgba(24, 144, 255, 0.1)' }
            ])
          }
        },
        {
          name: 'MTTR',
          type: 'line',
          yAxisIndex: 1,
          data: mockData.mttrData,
          smooth: true,
          lineStyle: {
            color: '#52c41a',
            width: 3
          },
          itemStyle: {
            color: '#52c41a'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
              { offset: 1, color: 'rgba(82, 196, 26, 0.1)' }
            ])
          }
        }
      ]
    })
  })
}

const fetchKPLData = () => {
  // æ¨¡æ‹Ÿæ•°æ®åˆ·æ–°
  Object.assign(mockData, generateMockData())
  
  // é‡æ–°æ¸²æŸ“图表
  if (trendChart) {
    trendChart.setOption({
      xAxis: {
        data: mockData.months
      },
      series: [
        {
          data: mockData.mtbfData
        },
        {
          data: mockData.mttrData
        }
      ]
    })
  }
}

onMounted(() => {
  initChart()
  
  // ç›‘听窗口大小变化，重新调整图表大小
  window.addEventListener('resize', () => {
    if (trendChart) trendChart.resize()
  })
})
</script>

<style scoped>
.kpl-monitor-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* é¡µé¢å¤´éƒ¨ */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 28px;
  font-weight: 700;
}

.header-content p {
  margin: 0;
  color: #6b7280;
  font-size: 16px;
}

.time-range {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* æŒ‡æ ‡æ¦‚览 */
.metrics-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.metric-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.metric-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mtbf-card .metric-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.mttr-card .metric-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.availability-card .metric-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.metric-content {
  flex: 1;
}

.metric-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.metric-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}

.metric-value {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.unit {
  font-size: 16px;
  font-weight: 500;
  color: #6b7280;
  margin-left: 4px;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
}

.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.trend-icon {
  font-size: 16px;
}

/* å›¾è¡¨åŒºåŸŸ */
.charts-section {
  margin-bottom: 24px;
}

.chart-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chart-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-header h3 {
  margin: 0;
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
}

.chart-legend {
  display: flex;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.mtbf-legend .legend-color {
  background: #1890ff;
}

.mttr-legend .legend-color {
  background: #52c41a;
}

.chart-wrapper {
  padding: 20px;
  height: 400px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* å»ºè®®åŒºåŸŸ */
.recommendations-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.section-header h3 {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 20px;
  font-weight: 600;
}

.section-header p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  padding: 24px;
}

.recommendation-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recommendation-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.recommendation-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: white;
  flex-shrink: 0;
}

.recommendation-content {
  flex: 1;
}

.recommendation-content h4 {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
}

.recommendation-content p {
  margin: 0 0 12px 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}

.recommendation-priority {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.priority.high {
  background: #fef2f2;
  color: #dc2626;
}

.priority.medium {
  background: #fffbeb;
  color: #d97706;
}

.priority.low {
  background: #f0fdf4;
  color: #16a34a;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .kpl-monitor-container {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .metrics-overview {
    grid-template-columns: 1fr;
  }
  
  .recommendations-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-wrapper {
    height: 300px;
  }
  
  .chart-legend {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .metric-card {
    flex-direction: column;
    text-align: center;
  }
  
  .recommendation-card {
    flex-direction: column;
    text-align: center;
  }
}
</style>