Ver Fonte

调整这几个页面,增加计算方法提示

wukai há 4 semanas atrás
pai
commit
7193326174

+ 108 - 5
src/views/calc/calcStop/ddStop.vue

@@ -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">斜率 &gt; 斜率阈值</span>:<span class="result-up-strong">明显上升</span></li>
+              <li><span class="highlight-negative">斜率 &lt; 负的斜率阈值</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">变异系数 &gt; 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>
@@ -111,14 +136,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">
@@ -819,4 +864,62 @@ onBeforeUnmount(() => {
   margin-right: 20px;
   margin-bottom: 10px;
 }
+
+.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>

+ 108 - 5
src/views/calc/calcStop/dsStop.vue

@@ -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">斜率 &gt; 斜率阈值</span>:<span class="result-up-strong">明显上升</span></li>
+              <li><span class="highlight-negative">斜率 &lt; 负的斜率阈值</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">变异系数 &gt; 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>

+ 108 - 5
src/views/calc/calcStop/gzStop.vue

@@ -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">斜率 &gt; 斜率阈值</span>:<span class="result-up-strong">明显上升</span></li>
+              <li><span class="highlight-negative">斜率 &lt; 负的斜率阈值</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">变异系数 &gt; 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>
@@ -111,14 +136,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">
@@ -819,4 +864,62 @@ onBeforeUnmount(() => {
   margin-right: 20px;
   margin-bottom: 10px;
 }
+
+.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>

+ 108 - 5
src/views/calc/calcStop/jtStop.vue

@@ -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">斜率 &gt; 斜率阈值</span>:<span class="result-up-strong">明显上升</span></li>
+              <li><span class="highlight-negative">斜率 &lt; 负的斜率阈值</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">变异系数 &gt; 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>
@@ -111,14 +136,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">
@@ -819,4 +864,62 @@ onBeforeUnmount(() => {
   margin-right: 20px;
   margin-bottom: 10px;
 }
+
+.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>