309 lines
7.6 KiB
Vue
309 lines
7.6 KiB
Vue
|
<template>
|
|||
|
|
<div class="report-container">
|
|||
|
|
<div class="tabs-header">
|
|||
|
|
<el-tabs v-model="activeTab" type="card">
|
|||
|
|
<el-tab-pane label="日" name="day" />
|
|||
|
|
<el-tab-pane label="月" name="month" />
|
|||
|
|
<el-tab-pane label="年" name="year" />
|
|||
|
|
</el-tabs>
|
|||
|
|
<el-date-picker v-model="selectedDate" type="date" placeholder="选择日期" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="summary-section">
|
|||
|
|
<h3 class="section-title">停机汇总</h3>
|
|||
|
|
<div class="summary-cards">
|
|||
|
|
<div class="summary-card">
|
|||
|
|
<div class="card-icon">⏱️</div>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<span class="card-label">停机时间</span>
|
|||
|
|
<span class="card-value highlight">{{ summaryData.stopTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-card">
|
|||
|
|
<div class="card-icon">🔄</div>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<span class="card-label">停机次数</span>
|
|||
|
|
<span class="card-value">{{ summaryData.stopCount }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-card">
|
|||
|
|
<div class="card-icon">📊</div>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<span class="card-label">作业率</span>
|
|||
|
|
<span class="card-value highlight">{{ summaryData.rate }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="charts-section">
|
|||
|
|
<div class="chart-panel">
|
|||
|
|
<h3 class="section-title">班组停机分布</h3>
|
|||
|
|
<div ref="teamChartRef" class="chart-content"></div>
|
|||
|
|
<div class="chart-legend">
|
|||
|
|
<span class="legend-item"><span class="legend-dot active"></span> 停机</span>
|
|||
|
|
<span class="legend-item"><span class="legend-dot inactive"></span> 正常</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-panel">
|
|||
|
|
<h3 class="section-title">停机类型分布</h3>
|
|||
|
|
<div ref="typeChartRef" class="chart-content"></div>
|
|||
|
|
<div class="chart-legend">
|
|||
|
|
<span class="legend-item"><span class="legend-dot type1"></span> 来料缺陷</span>
|
|||
|
|
<span class="legend-item"><span class="legend-dot type2"></span> 机械故障</span>
|
|||
|
|
<span class="legend-item"><span class="legend-dot type3"></span> 换辊</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="table-section">
|
|||
|
|
<h3 class="section-title">停机详情</h3>
|
|||
|
|
<el-table :data="stopData" border :height="300">
|
|||
|
|
<el-table-column prop="timeRange" label="时间范围" width="200" />
|
|||
|
|
<el-table-column prop="duration" label="持续时间" width="120" />
|
|||
|
|
<el-table-column prop="team" label="机组" width="100" />
|
|||
|
|
<el-table-column prop="remark" label="备注" width="300" />
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted, nextTick } from 'vue'
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
|
|||
|
|
const activeTab = ref('day')
|
|||
|
|
const selectedDate = ref('2026-05-14')
|
|||
|
|
|
|||
|
|
const summaryData = ref({
|
|||
|
|
stopTime: '60 min',
|
|||
|
|
stopCount: '4次',
|
|||
|
|
rate: '95.83%'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const stopData = ref([
|
|||
|
|
{ timeRange: '2026-05-14 13:22 - 2026-05-14 13:34', duration: '12min', team: 'MLL', remark: '带尾夹送断带' },
|
|||
|
|
{ timeRange: '2026-05-14 12:47 - 2026-05-14 12:54', duration: '7min', team: 'MLL', remark: '处理表面缺陷' },
|
|||
|
|
{ timeRange: '2026-05-14 10:27 - 2026-05-14 12:54', duration: '33min', team: 'MLL', remark: '开卷机故障' },
|
|||
|
|
{ timeRange: '2026-05-14 10:27 - 2026-05-14 11:00', duration: '33min', team: 'MLL', remark: '换1-4机架辊,修4机架弯辊阀' },
|
|||
|
|
{ timeRange: '2026-05-14 04:03 - 2026-05-14 04:11', duration: '8min', team: 'MLL', remark: '换辊' }
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const teamChartRef = ref(null)
|
|||
|
|
const typeChartRef = ref(null)
|
|||
|
|
|
|||
|
|
const initCharts = () => {
|
|||
|
|
if (teamChartRef.value) {
|
|||
|
|
const chart = echarts.init(teamChartRef.value)
|
|||
|
|
chart.setOption({
|
|||
|
|
tooltip: { trigger: 'item' },
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '班组停机',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['50%', '75%'],
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
data: [
|
|||
|
|
{ value: 1, name: '停机', itemStyle: { color: '#409eff' } },
|
|||
|
|
{ value: 0, name: '正常', itemStyle: { color: '#e4e7ed' } }
|
|||
|
|
],
|
|||
|
|
label: { show: false },
|
|||
|
|
emphasis: {
|
|||
|
|
label: { show: true, fontSize: 24, fontWeight: 'bold' }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (typeChartRef.value) {
|
|||
|
|
const chart = echarts.init(typeChartRef.value)
|
|||
|
|
chart.setOption({
|
|||
|
|
tooltip: { trigger: 'item' },
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '停机类型',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['50%', '75%'],
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
data: [
|
|||
|
|
{ value: 45, name: '来料缺陷', itemStyle: { color: '#409eff' } },
|
|||
|
|
{ value: 35, name: '机械故障', itemStyle: { color: '#67c23a' } },
|
|||
|
|
{ value: 20, name: '换辊', itemStyle: { color: '#e6a23c' } }
|
|||
|
|
],
|
|||
|
|
label: { show: false },
|
|||
|
|
emphasis: {
|
|||
|
|
label: { show: true, fontSize: 18, fontWeight: 'bold' }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
initCharts()
|
|||
|
|
window.addEventListener('resize', initCharts)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.report-container {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 20px;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabs-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
|
|||
|
|
:deep(.el-tabs) {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.el-tabs__header {
|
|||
|
|
margin: 0;
|
|||
|
|
border-bottom: 1px solid #e4e7ed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-tabs__item {
|
|||
|
|
padding: 0 20px;
|
|||
|
|
height: 40px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-tabs__item.is-active {
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-tabs__active-bar {
|
|||
|
|
background: #409eff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-section {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #303133;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
padding-left: 12px;
|
|||
|
|
border-left: 3px solid #409eff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-cards {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-card {
|
|||
|
|
flex: 1;
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #e4e7ed;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
|
|||
|
|
.card-icon {
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-content {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.card-label {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #909399;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-value {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #303133;
|
|||
|
|
|
|||
|
|
&.highlight {
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.charts-section {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-panel {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #e4e7ed;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-content {
|
|||
|
|
height: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-legend {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 24px;
|
|||
|
|
margin-top: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.legend-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.legend-dot {
|
|||
|
|
width: 12px;
|
|||
|
|
height: 12px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
|
|||
|
|
&.active { background: #409eff; }
|
|||
|
|
&.inactive { background: #e4e7ed; }
|
|||
|
|
&.type1 { background: #409eff; }
|
|||
|
|
&.type2 { background: #67c23a; }
|
|||
|
|
&.type3 { background: #e6a23c; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-section {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #e4e7ed;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 20px;
|
|||
|
|
|
|||
|
|
:deep(.el-table) {
|
|||
|
|
--el-table-header-text-color: #606266;
|
|||
|
|
--el-table-row-hover-bg-color: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|