#

Junjie

22 小时以前 a42c95b399fc0d9162e714d5cd5156c53fff2cc6

 src/main/webapp/views/wrkAnalysis/wrkAnalysis.html

@@ -167,6 +167,35 @@
            background: rgba(245, 163, 74, 0.16);
            border-color: rgba(245, 163, 74, 0.18);
        }
        .export-mode {
            background: #ffffff;
        }
        .export-detail-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            font-size: 12px;
            color: #22364a;
            background: #ffffff;
        }
        .export-detail-table th,
        .export-detail-table td {
            border: 1px solid #dfe7f0;
            padding: 8px 6px;
            text-align: center;
            vertical-align: middle;
            word-break: break-all;
        }
        .export-detail-table th {
            background: #f5f8fc;
            font-weight: 700;
        }
        .export-section-title {
            margin: 0 0 10px;
            font-size: 16px;
            font-weight: 700;
            color: #22364a;
        }
        @media (max-width: 1460px) {
            .filter-grid,
            .summary-grid {
@@ -333,71 +362,122 @@
        </div>
    </section>

    <section class="panel">
    <section ref="analysisExportRoot" class="panel" :class="{ 'export-mode': exportingPdf }">
        <div class="panel-head">
            <div class="panel-title">分析结果</div>
            <el-button
                    data-html2canvas-ignore="true"
                    size="small"
                    type="primary"
                    plain
                    :disabled="!analysisReady"
                    :loading="exportingPdf"
                    @click="exportAnalysisPdf">导出PDF</el-button>
        </div>
        <div class="panel-body">
            <div v-if="analysis.summary.partialTaskCount > 0" class="quality-banner">
                当前结果中有 {{ analysis.summary.partialTaskCount }} 条历史任务缺少阶段采集，仅参与总耗时和故障统计。
            </div>

            <div v-if="!analysisReady" class="empty-shell">先从上方筛选任务或时间范围，然后执行分析。</div>
            <template v-else>
                <div class="summary-grid">
                    <div class="summary-card">
                        <div class="summary-label">任务数</div>
                        <div class="summary-value">{{ formatNumber(analysis.summary.taskCount) }}</div>
                        <div class="summary-sub">本次分析命中任务总数</div>
                <div ref="analysisVisualRoot">
                    <div v-if="analysis.summary.partialTaskCount > 0" class="quality-banner">
                        当前结果中有 {{ analysis.summary.partialTaskCount }} 条历史任务缺少阶段采集，仅参与总耗时和故障统计。
                    </div>
                    <div class="summary-card">
                        <div class="summary-label">平均总耗时</div>
                        <div class="summary-value">{{ formatDuration(analysis.summary.avgTotalDurationMs) }}</div>
                        <div class="summary-sub">创建到完成的平均耗时</div>
                    </div>
                    <div class="summary-card">
                        <div class="summary-label">平均站点耗时</div>
                        <div class="summary-value">{{ formatDuration(analysis.summary.avgStationDurationMs) }}</div>
                        <div class="summary-sub">仅统计完整阶段数据</div>
                    </div>
                    <div class="summary-card">
                        <div class="summary-label">平均堆垛机耗时</div>
                        <div class="summary-value">{{ formatDuration(analysis.summary.avgCraneDurationMs) }}</div>
                        <div class="summary-sub">仅统计完整阶段数据</div>
                    </div>
                    <div class="summary-card">
                        <div class="summary-label">故障任务数</div>
                        <div class="summary-value">{{ formatNumber(analysis.summary.faultTaskCount) }}</div>
                        <div class="summary-sub">出现设备故障的任务数</div>
                    </div>
                    <div class="summary-card">
                        <div class="summary-label">总故障耗时</div>
                        <div class="summary-value">{{ formatDuration(analysis.summary.faultDurationMs) }}</div>
                        <div class="summary-sub">单堆垛机 / 双工位 / RGV</div>
                    </div>
                </div>

                <div class="chart-grid" style="margin-top: 16px;">
                    <div class="chart-card">
                        <div class="chart-title">任务耗时对比</div>
                        <div ref="durationChart" class="chart-box"></div>
                    <div class="summary-grid">
                        <div class="summary-card">
                            <div class="summary-label">任务数</div>
                            <div class="summary-value">{{ formatNumber(analysis.summary.taskCount) }}</div>
                            <div class="summary-sub">本次分析命中任务总数</div>
                        </div>
                        <div class="summary-card">
                            <div class="summary-label">平均总耗时</div>
                            <div class="summary-value">{{ formatDuration(analysis.summary.avgTotalDurationMs) }}</div>
                            <div class="summary-sub">创建到完成的平均耗时</div>
                        </div>
                        <div class="summary-card">
                            <div class="summary-label">平均站点耗时</div>
                            <div class="summary-value">{{ formatDuration(analysis.summary.avgStationDurationMs) }}</div>
                            <div class="summary-sub">仅统计完整阶段数据</div>
                        </div>
                        <div class="summary-card">
                            <div class="summary-label">平均堆垛机耗时</div>
                            <div class="summary-value">{{ formatDuration(analysis.summary.avgCraneDurationMs) }}</div>
                            <div class="summary-sub">仅统计完整阶段数据</div>
                        </div>
                        <div class="summary-card">
                            <div class="summary-label">故障任务数</div>
                            <div class="summary-value">{{ formatNumber(analysis.summary.faultTaskCount) }}</div>
                            <div class="summary-sub">出现设备故障的任务数</div>
                        </div>
                        <div class="summary-card">
                            <div class="summary-label">总故障耗时</div>
                            <div class="summary-value">{{ formatDuration(analysis.summary.faultDurationMs) }}</div>
                            <div class="summary-sub">单堆垛机 / 双工位 / RGV</div>
                        </div>
                    </div>
                    <div class="chart-card">
                        <div class="chart-title">耗时趋势</div>
                        <div ref="trendChart" class="chart-box"></div>
                    </div>
                    <div class="chart-card">
                        <div class="chart-title">故障任务占比</div>
                        <div ref="faultPieChart" class="chart-box"></div>
                    </div>
                    <div class="chart-card">
                        <div class="chart-title">故障耗时分布</div>
                        <div ref="faultDurationChart" class="chart-box"></div>

                    <div class="chart-grid" style="margin-top: 16px;">
                        <div class="chart-card">
                            <div class="chart-title">任务耗时对比</div>
                            <div ref="durationChart" class="chart-box"></div>
                        </div>
                        <div class="chart-card">
                            <div class="chart-title">耗时趋势</div>
                            <div ref="trendChart" class="chart-box"></div>
                        </div>
                        <div class="chart-card">
                            <div class="chart-title">故障任务占比</div>
                            <div ref="faultPieChart" class="chart-box"></div>
                        </div>
                        <div class="chart-card">
                            <div class="chart-title">故障耗时分布</div>
                            <div ref="faultDurationChart" class="chart-box"></div>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 16px;">
                    <el-table :data="analysis.detail" border stripe size="mini" max-height="360" style="width: 100%;">
                    <div v-if="exportingPdf" ref="exportDetailRoot">
                        <div class="export-section-title">任务明细</div>
                        <table ref="exportDetailTable" class="export-detail-table">
                            <thead>
                            <tr>
                                <th>工作号</th>
                                <th>WMS任务号</th>
                                <th>任务类型</th>
                                <th>最终状态</th>
                                <th>源站</th>
                                <th>目标站</th>
                                <th>创建时间</th>
                                <th>完成时间</th>
                                <th>总耗时</th>
                                <th>站点耗时</th>
                                <th>堆垛机耗时</th>
                                <th>故障次数</th>
                                <th>故障耗时</th>
                                <th>数据完整性</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="row in analysis.detail" :key="'pdf-' + row.wrkNo">
                                <td>{{ row.wrkNo }}</td>
                                <td>{{ row.wmsWrkNo }}</td>
                                <td>{{ row.ioType$ }}</td>
                                <td>{{ row.finalWrkSts$ }}</td>
                                <td>{{ row.sourceStaNo }}</td>
                                <td>{{ row.staNo }}</td>
                                <td>{{ row.appeTime$ }}</td>
                                <td>{{ row.finishTime$ }}</td>
                                <td>{{ formatDuration(row.totalDurationMs) }}</td>
                                <td>{{ formatDuration(row.stationDurationMs) }}</td>
                                <td>{{ formatDuration(row.craneDurationMs) }}</td>
                                <td>{{ row.faultCount }}</td>
                                <td>{{ formatDuration(row.faultDurationMs) }}</td>
                                <td>{{ row.metricCompleteness === 'COMPLETE' ? 'COMPLETE' : 'PARTIAL' }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <el-table v-if="!exportingPdf" :data="analysis.detail" border stripe size="mini" max-height="360" style="width: 100%;">
                        <el-table-column prop="wrkNo" label="工作号" width="100" align="center"></el-table-column>
                        <el-table-column prop="wmsWrkNo" label="WMS任务号" min-width="150"></el-table-column>
                        <el-table-column prop="ioType$" label="任务类型" width="90" align="center"></el-table-column>
@@ -438,6 +518,8 @@
<script type="text/javascript" src="../../static/vue/js/vue.min.js"></script>
<script type="text/javascript" src="../../static/vue/element/element.js"></script>
<script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="../../static/js/wrkAnalysis/wrkAnalysis.js?v=20260322_01" charset="utf-8"></script>
<script type="text/javascript" src="../../static/lib/pdf/html2canvas.min.js"></script>
<script type="text/javascript" src="../../static/lib/pdf/jspdf.umd.min.js"></script>
<script type="text/javascript" src="../../static/js/wrkAnalysis/wrkAnalysis.js?v=20260322_03" charset="utf-8"></script>
</body>
</html>