质检接口地址变更，生产追溯页面开发

zhangwencui

2026-04-30 66da8813e69a1d4831bfedc4155c3d0330944940

质检接口地址变更，生产追溯页面开发

 src/api/basicData/productProcess.js

@@ -1,10 +1,10 @@
import request from '@/utils/request'
import request from "@/utils/request";

// å·¥åºåˆ—表分页查询
export function productProcessListPage(query) {
  return request({
    url: '/productProcess/listPage',
    method: 'get',
    params: query
  })
    url: "/technologyOperation/listPage",
    method: "get",
    params: query,
  });
}

 src/api/productionManagement/productionProcess.js

@@ -4,7 +4,7 @@
// åˆ†é¡µæŸ¥è¯¢
export function listPage(query) {
  return request({
    url: "/productProcess/listPage",
    url: "/technologyOperation/listPage",
    method: "get",
    params: query,
  });
@@ -53,7 +53,7 @@
// å¯¼å…¥æ•°æ®
export function importData(data) {
  return request({
    url: "/productProcess/importData",
    url: "/technologyOperation/importData",
    method: "post",
    data: data,
  });
@@ -62,7 +62,7 @@
// ä¸‹è½½æ¨¡æ¿
export function downloadTemplate() {
  return request({
    url: "/productProcess/downloadTemplate",
    url: "/technologyOperation/downloadTemplate",
    method: "post",
    responseType: "blob",
  });

 src/router/index.js

@@ -106,6 +106,19 @@
    name: "DeviceInfo",
    meta: { title: "设备信息", icon: "monitor" },
  },
  {
    path: "/productionTraceability",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "index",
        component: () => import("@/views/productionManagement/productionTraceability/index.vue"),
        name: "ProductionTraceability",
        meta: { title: "生产追溯", activeMenu: "/productionManagement/productionOrder" },
      },
    ],
  },
  // æ·»åŠ é¡¹ç›®è¯¦æƒ…页面路由配置
  {
    path: "/oaSystem/projectManagement/projectDetail",

 src/views/productionManagement/productionOrder/index.vue

@@ -384,6 +384,21 @@
            handlePrint(row);
          },
        },
        {
          name: "生产追溯",
          type: "text",
          color: "#409eff",
          clickFun: row => {
            router.push({
              path: "/productionTraceability/index",
              query: {
                npsNo: row.npsNo,
                productName: row.productName,
                model: row.model,
              },
            });
          },
        },
      ],
    },
  ]);

 src/views/productionManagement/productionTraceability/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,831 @@
<template>
  <div class="app-container">
    <el-card style="height:82vh;overflow:auto;">
      <template #header>
        <div class="card-header">
          <el-form :inline="true"
                   :model="searchForm"
                   class="search-form">
            <el-form-item label="生产订单号">
              <el-select v-model="selectedNpsNo"
                         filterable
                         remote
                         reserve-keyword
                         placeholder="请输入生产订单号"
                         :loading="npsNoLoading"
                         :remote-method="handleNpsNoSearch"
                         @change="handleSearch"
                         style="width: 400px;">
                <el-option v-for="option in npsNoOptions"
                           :key="option.id"
                           :label="option.npsNo + '-' + option.productName + '-' + option.model"
                           :value="option.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleBack">返回</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!-- åŸºç¡€ä¿¡æ¯ -->
      <div v-if="rowData.productionOrderDto"
           class="detail-section">
        <h3 class="section-title">基础信息</h3>
        <el-descriptions :column="3"
                         border>
          <el-descriptions-item label="生产订单号">{{ rowData.productionOrderDto?.npsNo || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品名称">{{ rowData.productionOrderDto?.productName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品规格">{{ rowData.productionOrderDto?.model || '-' }}</el-descriptions-item>
          <el-descriptions-item label="物料编码">{{ rowData.productionOrderDto?.materialCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="计划数量">{{ rowData.productionOrderDto?.quantity || 0 }} <span class="unit">{{ rowData.productionOrderDto?.unit || '-' }}</span></el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(rowData.productionOrderDto?.status)">
              {{ getStatusText(rowData.productionOrderDto?.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="客户名称">{{ rowData.productionOrderDto?.customerName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="开始日期">{{ rowData.productionOrderDto?.startTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="完成进度">
            <el-progress :percentage="rowData.productionOrderDto?.completionStatus"
                         :color="customColors(rowData.productionOrderDto?.completionStatus)"
                         :status="rowData.productionOrderDto?.completionStatus === 100 ? 'success' : ''"
                         style="width: 120px;" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-empty v-else
                description="请搜索生产订单号" />
      <!-- ç”Ÿäº§æŠ¥å·¥è®°å½• -->
      <div v-if="rowData.productionRecords && rowData.productionRecords.length > 0"
           class="progress-container">
        <div class="progress-section">
          <h3 class="section-title">工单信息</h3>
          <div class="order-item">
            <el-table :data="rowData.productionRecords"
                      border
                      style="width: 100%">
              <el-table-column prop="productNo"
                               label="工单编号"
                               align="center">
              </el-table-column>
              <el-table-column prop="productName"
                               label="产品名称"
                               align="center" />
              <el-table-column prop="model"
                               label="规格"
                               align="center" />
              <el-table-column prop="processName"
                               label="工序名称"
                               align="center" />
              <el-table-column prop="requiredQuantity"
                               label="需求数量"
                               align="center" />
              <el-table-column prop="completedQuantity"
                               label="完成数量"
                               align="center" />
              <el-table-column label="详情"
                               align="center"
                               width="200">
                <template #default="{ row }">
                  <el-link @click="handleClickStep(row)"
                           type="primary">报工记录</el-link>
                  <el-link @click="handleClickQuality(row)"
                           style="margin-left:20px"
                           type="primary">质检信息</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-empty v-else-if="rowData.productionOrderDto"
                description="暂无报工记录" />
    </el-card>
    <!-- ç”Ÿäº§æŠ¥å·¥è¯¦æƒ…弹窗 -->
    <el-dialog v-model="detailDialogVisible"
               title="生产报工详情"
               width="1000px"
               :close-on-click-modal="false"
               custom-class="custom-dialog">
      <div class="detail-container">
        <!-- åŸºç¡€ä¿¡æ¯ -->
        <div class="detail-section">
          <h3 class="section-title">基础信息</h3>
          <el-descriptions :column="3"
                           border>
            <el-descriptions-item label="生产工单号">{{ detailData.npsNo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="班组">
              <el-tag :type="detailData.schedule === '白班' ? 'primary' : 'warning'">{{ detailData.schedule || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="产品编码">{{ detailData.materialCode || '-' }}</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{ detailData.productName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="规格">{{ detailData.model || '-' }}</el-descriptions-item>
            <el-descriptions-item label="合格数量"><span class="num2">{{ detailData.qualifiedQuantity || 0 }}</span> <span class="unit">{{ detailData.unit || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="不合格数量"><span class="num3">{{ detailData.unqualifiedQuantity || 0 }}</span> <span class="unit">{{ detailData.unit || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="总数量"><span class="num1">{{ detailData.quantity || 0 }}</span> <span class="unit">{{ detailData.unit || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ detailData.reportingTime || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="detail-section">
          <h3 class="section-title">报工明细</h3>
          <el-table :data="[detailData]"
                    border
                    style="width: 100%">
            <el-table-column label="报工单号"
                             prop="productNo"
                             align="center" />
            <el-table-column label="产出数量"
                             prop="qualifiedQuantity"
                             align="center" />
            <el-table-column label="报废数量"
                             prop="unqualifiedQuantity"
                             align="center" />
            <el-table-column label="创建时间"
                             prop="reportingTime"
                             align="center" />
            <el-table-column label="操作"
                             align="center"
                             width="200">
              <template #default="{ row }">
                <el-button type="primary"
                           link
                           @click="showInput(row.id)">查看投入</el-button>
                <el-button type="primary"
                           link
                           @click="showParamDetail(row.productionOperationParamList)">参数详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- æŠ•å…¥æ¨¡æ€æ¡† -->
    <input-modal v-if="isShowInput"
                 v-model:visible="isShowInput"
                 :production-product-main-id="isShowingId" />
    <!-- å‚数详情弹窗 -->
    <el-dialog v-model="paramDetailVisible"
               title="参数详情"
               width="600px">
      <div v-if="currentParams && currentParams.length > 0"
           class="param-detail-list">
        <el-descriptions :column="1"
                         border>
          <el-descriptions-item v-for="param in currentParams"
                                :key="param.id"
                                :label="param.paramName">
            {{ param.inputValue }}
            <span v-if="param.unit && param.unit !== '/'"
                  class="unit-text">({{ param.unit }})</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-empty v-else
                description="暂无参数数据" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="paramDetailVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- è´¨æ£€ä¿¡æ¯å¼¹çª— -->
    <el-dialog v-model="qualityDialogVisible"
               title="质检详情"
               width="1000px"
               :close-on-click-modal="false"
               custom-class="custom-dialog">
      <div class="detail-container">
        <div v-for="(record, index) in qualityRecords"
             :key="record.id"
             class="quality-record-block">
          <div class="detail-section">
            <h3 class="section-title">检测记录 {{ index + 1 }} - {{ record.checkTime }}</h3>
            <el-descriptions :column="3"
                             border>
              <el-descriptions-item label="检测日期">{{ record.checkTime || '-' }}</el-descriptions-item>
              <el-descriptions-item label="生产工单号">{{ record.workOrderNo || '-' }}</el-descriptions-item>
              <el-descriptions-item label="工序">{{ record.process || '-' }}</el-descriptions-item>
              <el-descriptions-item label="检验员">{{ record.checkName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="产品名称">{{ record.productName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="规格型号">{{ record.model || '-' }}</el-descriptions-item>
              <el-descriptions-item label="数量">{{ record.quantity || 0 }} {{ record.unit || '-' }}</el-descriptions-item>
              <el-descriptions-item label="检测单位">{{ record.checkCompany || '-' }}</el-descriptions-item>
              <el-descriptions-item label="检测结果">
                <el-tag :type="record.checkResult === '合格' ? 'success' : 'danger'">
                  {{ record.checkResult || '-' }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <h4 class="sub-section-title">检验指标列表</h4>
            <el-table :data="record.inspectItems"
                      border
                      style="width: 100%">
              <el-table-column label="序号"
                               type="index"
                               width="60"
                               align="center" />
              <el-table-column label="指标"
                               prop="itemName"
                               align="center" />
              <el-table-column label="单位"
                               prop="unit"
                               align="center" />
              <el-table-column label="标准值"
                               prop="standardValue"
                               align="center" />
              <el-table-column label="内控值"
                               prop="controlValue"
                               align="center" />
              <el-table-column label="实际值"
                               prop="actualValue"
                               align="center" />
            </el-table>
          </div>
          <!-- <div class="detail-section">

          </div> -->
          <el-divider v-if="index < qualityRecords.length - 1" />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="qualityDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import InputModal from "@/views/productionManagement/productionReporting/Input.vue";

  const route = useRoute();
  const router = useRouter();

  // æœç´¢ç›¸å…³
  const searchForm = reactive({
    npsNo: "",
  });
  const selectedNpsNo = ref(null);
  const npsNoLoading = ref(false);
  const npsNoOptions = ref([
    {
      id: 1,
      npsNo: "PO20240301001",
      productName: "精密液压缸",
      model: "HG-100/50-500",
      materialCode: "MAT-2024-001",
      quantity: 500,
      unit: "件",
      status: 1,
      customerName: "重工机械有限公司",
      startTime: "2024-03-01",
      completionStatus: 65,
    },
    {
      id: 2,
      npsNo: "PO20240301002",
      productName: "工业伺服电机",
      model: "SV-400W-3000",
      materialCode: "MAT-2024-002",
      quantity: 200,
      unit: "台",
      status: 2,
      customerName: "自动化设备科技公司",
      startTime: "2024-03-02",
      completionStatus: 100,
    },
    {
      id: 3,
      npsNo: "PO20240301003",
      productName: "高压密封圈",
      model: "SR-80-5",
      materialCode: "MAT-2024-003",
      quantity: 5000,
      unit: "个",
      status: 0,
      customerName: "密封系统配件厂",
      startTime: "2024-03-05",
      completionStatus: 0,
    },
  ]);

  // è¯¦æƒ…数据
  const rowData = reactive({
    productionOrderDto: null,
    productionRecords: [],
  });

  // æŠ¥å·¥è¯¦æƒ…弹窗
  const detailDialogVisible = ref(false);
  const detailData = ref({});

  // æŠ•å…¥æ¨¡æ€æ¡†
  const isShowInput = ref(false);
  const isShowingId = ref(0);
  const showInput = id => {
    isShowInput.value = true;
    isShowingId.value = id;
  };

  // å‚数详情弹窗
  const paramDetailVisible = ref(false);
  const currentParams = ref([]);
  const showParamDetail = params => {
    currentParams.value = params || [];
    paramDetailVisible.value = true;
  };

  // è´¨æ£€ä¿¡æ¯å¼¹çª—
  const qualityDialogVisible = ref(false);
  const qualityRecords = ref([]);

  // çŠ¶æ€å¤„理
  const getStatusType = status => {
    const typeMap = { 0: "info", 1: "primary", 2: "success" };
    return typeMap[status] || "info";
  };
  const getStatusText = status => {
    const statusMap = { 0: "未开始", 1: "生产中", 2: "已完成" };
    return statusMap[status] || "未知";
  };
  const customColors = percentage => {
    if (percentage < 30) return "#f56c6c";
    if (percentage < 70) return "#e6a23c";
    return "#67c23a";
  };

  // æ¨¡æ‹Ÿæœç´¢æ–¹æ³•
  const handleNpsNoSearch = query => {
    if (query) {
      npsNoLoading.value = true;
      setTimeout(() => {
        npsNoLoading.value = false;
      }, 300);
    }
  };

  const handleSearch = id => {
    const selected = npsNoOptions.value.find(item => item.id === id);
    if (selected) {
      rowData.productionOrderDto = selected;
      rowData.productionRecords = [
        {
          id: 1001,
          productNo: "MO-2024-001-01",
          productName: selected.productName,
          model: selected.model,
          processName: "毛坯加工",
          requiredQuantity: selected.quantity,
          completedQuantity: Math.floor(selected.quantity * 0.4),
          qualifiedQuantity: Math.floor(selected.quantity * 0.4) - 2,
          unqualifiedQuantity: 2,
          reportingTime: "2024-03-01 10:00:00",
          schedule: "白班",
          postName: "张三",
          unit: selected.unit,
        },
        {
          id: 1002,
          productNo: "MO-2024-001-02",
          productName: selected.productName,
          model: selected.model,
          processName: "精加工",
          requiredQuantity: Math.floor(selected.quantity * 0.4),
          completedQuantity: Math.floor(selected.quantity * 0.25),
          qualifiedQuantity: Math.floor(selected.quantity * 0.25),
          unqualifiedQuantity: 0,
          reportingTime: "2024-03-01 16:00:00",
          schedule: "白班",
          postName: "李四",
          unit: selected.unit,
        },
      ];
    }
  };

  const handleBack = () => {
    router.back();
  };

  const handleClickStep = row => {
    detailData.value = {
      id: row.id || Math.floor(Math.random() * 1000),
      productNo: row.productNo,
      npsNo: rowData.productionOrderDto.npsNo,
      schedule: row.schedule,
      postName: row.postName,
      materialCode: rowData.productionOrderDto.materialCode,
      productName: row.productName,
      model: row.model,
      qualifiedQuantity: row.qualifiedQuantity,
      unqualifiedQuantity: row.unqualifiedQuantity || 0,
      quantity: row.completedQuantity,
      unit: row.unit,
      reportingTime: row.reportingTime,
      productionOperationParamList: [
        { id: 1, paramName: "主轴转速", inputValue: "2400", unit: "rpm" },
        { id: 2, paramName: "进给速度", inputValue: "120", unit: "mm/min" },
        { id: 3, paramName: "切削深度", inputValue: "0.5", unit: "mm" },
        { id: 4, paramName: "冷却液压力", inputValue: "0.6", unit: "Mpa" },
      ],
    };
    detailDialogVisible.value = true;
  };

  const handleClickQuality = row => {
    qualityRecords.value = [
      {
        id: 2001,
        checkTime: "2024-03-01 11:30:00",
        workOrderNo: row.productNo,
        process: row.processName,
        checkName: "质量部-王建国",
        productName: row.productName,
        model: row.model,
        unit: row.unit,
        quantity: row.completedQuantity,
        checkCompany: "内部实验室",
        checkResult: "合格",
        inspectItems: [
          {
            id: 1,
            itemName: "外径尺寸",
            unit: "mm",
            standardValue: "100.00±0.05",
            controlValue: "100.00±0.03",
            actualValue: "100.01",
            result: "合格",
          },
          {
            id: 2,
            itemName: "内径尺寸",
            unit: "mm",
            standardValue: "50.00+0.02/-0",
            controlValue: "50.00+0.01/-0",
            actualValue: "50.01",
            result: "合格",
          },
          {
            id: 3,
            itemName: "表面粗糙度",
            unit: "Ra",
            standardValue: "≤1.6",
            controlValue: "≤1.2",
            actualValue: "0.8",
            result: "合格",
          },
        ],
      },
      {
        id: 2001,
        checkTime: "2024-03-01 11:30:00",
        workOrderNo: row.productNo,
        process: row.processName,
        checkName: "质量部-王建国",
        productName: row.productName,
        model: row.model,
        unit: row.unit,
        quantity: row.completedQuantity,
        checkCompany: "内部实验室",
        checkResult: "合格",
        inspectItems: [
          {
            id: 1,
            itemName: "外径尺寸",
            unit: "mm",
            standardValue: "100.00±0.05",
            controlValue: "100.00±0.03",
            actualValue: "100.01",
            result: "合格",
          },
          {
            id: 2,
            itemName: "内径尺寸",
            unit: "mm",
            standardValue: "50.00+0.02/-0",
            controlValue: "50.00+0.01/-0",
            actualValue: "50.01",
            result: "合格",
          },
          {
            id: 3,
            itemName: "表面粗糙度",
            unit: "Ra",
            standardValue: "≤1.6",
            controlValue: "≤1.2",
            actualValue: "0.8",
            result: "合格",
          },
        ],
      },
    ];
    qualityDialogVisible.value = true;
  };

  onMounted(() => {
    if (route.query.npsNo) {
      const npsNo = route.query.npsNo;
      const found = npsNoOptions.value.find(item => item.npsNo === npsNo);
      if (found) {
        selectedNpsNo.value = found.id;
        handleSearch(found.id);
      } else {
        // å¦‚果没找到，创建一个临时的
        const mockItem = {
          id: Date.now(),
          npsNo: npsNo,
          productName: route.query.productName || "精密液压缸",
          model: route.query.model || "HG-100/50-500",
          materialCode: "MAT-2024-MOCK",
          quantity: 100,
          unit: "件",
          status: 1,
          customerName: "模拟客户",
          startTime: "2024-03-01",
          completionStatus: 50,
        };
        npsNoOptions.value.push(mockItem);
        selectedNpsNo.value = mockItem.id;
        handleSearch(mockItem.id);
      }
    }
  });
</script>

<style scoped>
  .app-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }

  .search-form {
    width: 100%;
  }

  .search-form .el-form-item {
    margin-right: 10px;
  }

  .detail-section {
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

  .detail-section:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1a1a1a;
    border-bottom: 2px solid #409eff;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #409eff;
    margin-right: 8px;
    border-radius: 2px;
  }

  .sub-section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #303133;
    display: flex;
    align-items: center;
  }

  .sub-section-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 12px;
    background-color: #67c23a;
    margin-right: 8px;
    border-radius: 2px;
  }

  .unit {
    font-size: 12px;
    color: #909399;
    margin-left: 4px;
  }

  :deep(.el-descriptions) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-descriptions__row:nth-child(odd)) {
    background-color: #f9f9f9;
  }

  :deep(.el-descriptions__label) {
    font-weight: 500;
    color: #606266;
    background-color: #f5f7fa;
  }

  :deep(.el-descriptions__content) {
    color: #303133;
    font-weight: 500;
  }

  .progress-container {
    display: flex;
    gap: 24px;
  }

  .progress-section {
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    flex: 1;
    transition: all 0.3s ease;
    width: 100%;
  }

  .progress-section:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }

  .order-item {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-table) {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-table th) {
    background-color: #f5f7fa !important;
    font-weight: 600;
    color: #606266;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 10px;
  }

  :deep(.el-tag) {
    border-radius: 12px;
    padding: 2px 10px;
  }

  /* å¼¹çª—样式 */
  .detail-container {
    max-height: 600px;
    overflow-y: auto;
    padding: 0 16px;
  }

  .process-item {
    margin-bottom: 24px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .process-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
  }

  .process-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
  }

  .process-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #409eff;
    margin-right: 8px;
    border-radius: 2px;
  }

  .process-info {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #606266;
  }

  .process-label {
    padding: 4px 12px;
    background-color: #ecf5ff;
    border-radius: 4px;
    color: #409eff;
    font-weight: 500;
  }

  .process-details {
    margin-bottom: 20px;
  }

  .num1 {
    color: #1107cc;
    font-weight: 600;
  }

  .num2 {
    color: #0fcf25;
    font-weight: 600;
  }

  .num3 {
    color: #d31818;
    font-weight: 600;
  }

  .dialog-footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #ebeef5;
  }

  .dialog-footer .el-button {
    min-width: 100px;
    padding: 8px 20px;
  }

  /* è‡ªå®šä¹‰å¯¹è¯æ¡†æ ·å¼ */
  :deep(.custom-dialog) {
    border-radius: 12px;
    overflow: hidden;
  }

  :deep(.custom-dialog .el-dialog__header) {
    background-color: #f5f7fa;
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  :deep(.custom-dialog .el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
  }

  :deep(.custom-dialog .el-dialog__body) {
    padding: 20px;
  }

  .unit-text {
    margin-left: 5px;
    color: #909399;
    font-size: 12px;
  }

  .param-detail-list {
    padding: 10px;
  }
</style>