成品检页面修改

zhangwencui

3 小时以前 3548f02fa8cf8848f49bddf5799f486f7e682ef7

 src/views/qualityManagement/finalInspection/components/ratioDialog.vue

@@ -4,86 +4,54 @@
               title="标准投入产出比例"
               width="1000px"
               @close="closeDialog">
      <!-- <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>生产订单信息</span>
          </div>
        </template>
        <div class="detail-info">
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">生产订单号：</span>
              <span class="info-value">{{ orderInfo.npsNo }}</span>
      <div class="ratio-cards">
        <el-card v-for="(item, index) in ratioData"
                 :key="index"
                 class="ratio-card">
          <template #header>
            <div class="card-header">
              <span>{{ item.productName }}<span v-if="item.model">-</span>{{ item.model || '' }}</span>
              <span class="material-code">{{ item.materialCode }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">产品名称：</span>
              <span class="info-value">{{ orderInfo.productName }}</span>
          </template>
          <div class="ratio-info">
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">实际投入量：</span>
                <span class="info-value">{{ item.actualInputQuantity }} {{ item.unit }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">实际产出量：</span>
                <span class="info-value">{{ item.actualOutputQuantity }} {{ item.unit }}</span>
              </div>
            </div>
            <div class="info-item">
              <span class="info-label">规格：</span>
              <span class="info-value">{{ orderInfo.model }}</span>
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">实际投入产出比例：</span>
                <span class="info-value actual-ratio">{{ item.actualInputOutputRatio }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">标准投入产出比例：</span>
                <span class="info-value standard-ratio">{{ item.standardInputOutputRatio }}</span>
              </div>
            </div>
            <div class="info-item">
              <span class="info-label">产品类型：</span>
              <span class="info-value">{{ orderInfo.strength }}</span>
            <div class="info-row">
              <div class="info-item">
                <span class="info-label">偏差率：</span>
                <span :class="['info-value', 'deviation-rate', item.deviationRate >= 0 ? 'positive' : 'negative']">
                  {{ item.deviationRate >= 0 ? '+' : '' }}{{ (item.deviationRate * 100).toFixed(2) }}%
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-card> -->
      <el-card class="detail-card"
               style="margin-top: 20px;">
        <template #header>
          <div class="card-header">
            <span>投入产出比例明细</span>
          </div>
        </template>
        <el-table :data="ratioData"
                  style="width: 100%">
          <el-table-column prop="materialCode"
                           label="产品编码"
                           width="120" />
          <el-table-column prop="productName"
                           label="产品名称"
                           width="150" />
          <el-table-column prop="model"
                           label="规格"
                           width="100" />
          <!-- <el-table-column prop="unit"
                           label="单位"
                           width="80" /> -->
          <el-table-column prop="actualInputQuantity"
                           label="实际投入量"
                           width="120">
            <template #default="scope">
              <span style="color: #409eff;">{{ scope.row.actualInputQuantity }}</span> {{ scope.row.unit }}
            </template>
          </el-table-column>
          <el-table-column prop="actualOutputQuantity"
                           label="实际产出量"
                           width="120">
            <template #default="scope">
              <span style="color: #409eff;">{{ scope.row.actualOutputQuantity }}</span> {{ scope.row.unit }}
            </template>
          </el-table-column>
          <el-table-column prop="standardInputOutputRatio"
                           label="标准投入产出比例"
                           width="150">
            <template #default="scope">
              <span style="color: #f68f00;">{{ scope.row.standardInputOutputRatio }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="deviationRate"
                           label="偏差率"
                           width="120">
            <template #default="scope">
              <span :style="{ color: scope.row.deviationRate >= 0 ? '#67c23a' : '#f56c6c' }">
                {{ scope.row.deviationRate >= 0 ? '+' : '' }}{{ scope.row.deviationRate.toFixed(2) }}%
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
          <img v-if="item.deviationRate < 0"
               src="@/assets/images/ratiodown.png"
               class="chart-image" />
          <img v-else
               src="@/assets/images/ratioup.png"
               class="chart-imageUp" />
        </el-card>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">关闭</el-button>
@@ -146,26 +114,54 @@
    font-size: 16px;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .material-code {
    font-size: 14px;
    font-weight: normal;
    color: #909399;
  }

  .detail-info {
    padding: 10px 0;
  }

  .ratio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
  }

  .ratio-card {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }

  .ratio-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
  }

  .info-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    margin-bottom: 12px;
  }

  .info-item {
    width: 25%;
    margin-bottom: 10px;
    width: 50%;
    margin-bottom: 8px;
  }

  .info-label {
    display: inline-block;
    width: 120px;
    width: 100%;
    font-weight: bold;
    color: #666;
  }
@@ -174,7 +170,46 @@
    color: #333;
  }

  .actual-ratio {
    color: #409eff;
    font-weight: bold;
  }

  .standard-ratio {
    color: #f68f00;
    font-weight: bold;
  }

  .deviation-rate {
    font-weight: bold;
  }

  .deviation-rate.positive {
    color: #67c23a;
  }

  .deviation-rate.negative {
    color: #f56c6c;
  }

  .dialog-footer {
    text-align: center;
  }
  .chart-image {
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 60px;
    height: 80px;
    opacity: 0.8;
  }
  .chart-imageUp {
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 60px;
    height: 80px;
    opacity: 0.8;
    transform: rotate(180deg);
  }
</style>