|
|
@@ -68,16 +68,41 @@
|
|
|
<!-- 双图表展示 -->
|
|
|
<el-row :gutter="15" style="margin-bottom: 20px;" v-if="statistics">
|
|
|
<!-- 趋势分析南丁格尔图 -->
|
|
|
- <el-col :span="12">
|
|
|
+ <el-col :span="8">
|
|
|
<el-card>
|
|
|
- <div ref="trendChartRef" style="width: 100%; height: 250px;"></div>
|
|
|
+ <div ref="trendChartRef" style="width: 100%; height: 300px;"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
|
|
|
<!-- 当月断纱趋势折线图 -->
|
|
|
<el-col :span="12">
|
|
|
<el-card>
|
|
|
- <div ref="deviceChartRef" style="width: 100%; height: 250px;"></div>
|
|
|
+ <div ref="deviceChartRef" style="width: 100%; height: 300px;"></div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 趋势分析计算说明 -->
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-card>
|
|
|
+ <div slot="header">
|
|
|
+ <span>趋势分析计算说明</span>
|
|
|
+ </div>
|
|
|
+ <div class="calculation-explanation">
|
|
|
+ <p><strong>趋势判断规则:</strong></p>
|
|
|
+ <ul>
|
|
|
+ <li><span class="highlight-positive">斜率 > 斜率阈值</span>:<span class="result-up-strong">明显上升</span></li>
|
|
|
+ <li><span class="highlight-negative">斜率 < 负的斜率阈值</span>:<span class="result-down-strong">明显下降</span></li>
|
|
|
+ <li><span class="highlight-neutral">斜率在阈值之间</span>:<span class="result-stable">平稳</span></li>
|
|
|
+ <li><span class="highlight-warning">变异系数 > CV阈值</span>:<span class="result-volatile">波动较大</span></li>
|
|
|
+ </ul>
|
|
|
+ <p><strong>关键参数说明:</strong></p>
|
|
|
+ <ul>
|
|
|
+ <li><span class="param-name">均值</span>:数据的平均值</li>
|
|
|
+ <li><span class="param-name">变异系数</span>:标准差/均值,反映数据离散程度</li>
|
|
|
+ <li><span class="param-name">斜率</span>:线性回归拟合直线的斜率</li>
|
|
|
+ <li><span class="param-name">阈值</span>:用于判断趋势显著性的临界值</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -99,14 +124,34 @@
|
|
|
<!-- <el-table-column label="ID" align="center" prop="id" />-->
|
|
|
<el-table-column label="机台号" align="center" prop="deviceId"/>
|
|
|
<el-table-column label="数据量" align="center" prop="dataNum"/>
|
|
|
+ <el-table-column label="均值" align="center" prop="mean">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ (scope.row.mean || 0).toFixed(4) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="变异系数" align="center" prop="coefficientOfVariation">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ (scope.row.coefficientOfVariation || 0).toFixed(4) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="斜率" align="center" prop="slope">
|
|
|
<template #default="scope">
|
|
|
- {{ (scope.row.slope).toFixed(2) }}
|
|
|
+ {{ (scope.row.slope || 0).toFixed(4) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="斜率阈值" align="center" prop="slopeThreshold">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ (scope.row.slopeThreshold || 0).toFixed(4) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="标准差" align="center" prop="stdDev" sortable>
|
|
|
<template #default="scope">
|
|
|
- {{ (scope.row.stdDev).toFixed(2) }}
|
|
|
+ {{ (scope.row.stdDev || 0).toFixed(4) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="CV阈值" align="center" prop="cvThreshold">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ (scope.row.cvThreshold || 0).toFixed(4) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="趋势分析" align="center" prop="result">
|
|
|
@@ -841,4 +886,62 @@ getList();
|
|
|
padding-top: 15px;
|
|
|
border-top: 1px solid #ebeef5;
|
|
|
}
|
|
|
+
|
|
|
+.calculation-explanation {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+.calculation-explanation ul {
|
|
|
+ padding-left: 20px;
|
|
|
+ margin: 8px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.calculation-explanation li {
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.highlight-positive {
|
|
|
+ color: #67c23a;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.highlight-negative {
|
|
|
+ color: #f56c6c;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.highlight-neutral {
|
|
|
+ color: #409eff;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.highlight-warning {
|
|
|
+ color: #e6a23c;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.result-up-strong {
|
|
|
+ color: #67c23a;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.result-down-strong {
|
|
|
+ color: #f56c6c;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.result-stable {
|
|
|
+ color: #409eff;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.result-volatile {
|
|
|
+ color: #e6a23c;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.param-name {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
</style>
|