From ed36047f6ce0b91dad25efc10c8a0e83dd533a68 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 20 三月 2026 17:15:37 +0800
Subject: [PATCH] change

---
 src/views/productionManagement/productionOrder/index.vue |  691 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 670 insertions(+), 21 deletions(-)

diff --git a/src/views/productionManagement/productionOrder/index.vue b/src/views/productionManagement/productionOrder/index.vue
index a306bff..3116256 100644
--- a/src/views/productionManagement/productionOrder/index.vue
+++ b/src/views/productionManagement/productionOrder/index.vue
@@ -3,6 +3,14 @@
     <div class="search_form">
       <el-form :model="searchForm"
                :inline="true">
+        <el-form-item label="璁㈠崟鍙�:">
+          <el-input v-model="searchForm.npsNo"
+                    placeholder="璇疯緭鍏�"
+                    clearable
+                    prefix-icon="Search"
+                    style="width: 160px;"
+                    @change="handleQuery" />
+        </el-form-item>
         <el-form-item label="浜у搧鍚嶇О:">
           <el-input v-model="searchForm.productName"
                     placeholder="璇疯緭鍏�"
@@ -10,6 +18,29 @@
                     prefix-icon="Search"
                     style="width: 160px;"
                     @change="handleQuery" />
+        </el-form-item>
+        <el-form-item label="浜у搧绫诲瀷:">
+          <el-select v-model="searchForm.strength"
+                     style="width: 200px;"
+                     placeholder="璇烽�夋嫨浜у搧绫诲瀷"
+                     clearable
+                     @change="handleQuery">
+            <el-option v-for="option in productTypeOptions2"
+                       :key="option.dictLabel"
+                       :label="option.dictLabel"
+                       :value="option.dictLabel" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="鍒涘缓鏃堕棿:">
+          <el-date-picker v-model="createTime"
+                          type="daterange"
+                          range-separator="鑷�"
+                          start-placeholder="寮�濮嬫棩鏈�"
+                          value-format="YYYY-MM-DD"
+                          format="YYYY-MM-DD"
+                          end-placeholder="缁撴潫鏃ユ湡"
+                          style="width: 300px;"
+                          @change="handleQuery" />
         </el-form-item>
         <el-form-item label="瑙勬牸:">
           <el-input v-model="searchForm.model"
@@ -35,13 +66,13 @@
                      @click="handleQuery">鎼滅储</el-button>
           <el-button type="primary"
                      @click="handleReset">閲嶇疆</el-button>
+          <el-button type="danger"
+                     @click="handleDelete">閫�鍥�</el-button>
+          <el-button @click="handleOut">瀵煎嚭</el-button>
         </el-form-item>
       </el-form>
-      <div>
-        <el-button type="danger"
-                   @click="handleDelete">閫�鍥�</el-button>
-        <el-button @click="handleOut">瀵煎嚭</el-button>
-      </div>
+      <!-- <div style="width:350px;text-align:right;">
+      </div> -->
     </div>
     <div class="table_list">
       <PIMTable rowKey="id"
@@ -58,6 +89,12 @@
           <el-progress :percentage="toProgressPercentage(row?.completionStatus)"
                        :color="progressColor(toProgressPercentage(row?.completionStatus))"
                        :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''" />
+        </template>
+        <template #quantity="{ row }">
+          {{ row.quantity || '-' }}<span style="color:rgb(63, 95, 211)"> 鍧�</span>
+        </template>
+        <template #completeQuantity="{ row }">
+          {{ row.completeQuantity || '-' }}<span style="color:rgb(42, 169, 146)"> 鏂�</span>
         </template>
       </PIMTable>
     </div>
@@ -89,6 +126,127 @@
     <new-product-order v-if="isShowNewModal"
                        v-model:visible="isShowNewModal"
                        @completed="handleQuery" />
+    <!-- 鏉ユ簮鏁版嵁寮圭獥 -->
+    <el-dialog v-model="sourceDataDialogVisible"
+               title="鏉ユ簮鏁版嵁"
+               width="1000px">
+      <div class="applyno-summary1">
+        <div class="summary-item">
+          <span class="summary-label">浜у搧鍚嶇О锛�</span>
+          <span class="summary-value">
+            <el-tag type="primary">{{ sourceRowData.productName || '-' }}</el-tag>
+          </span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">浜у搧瑙勬牸锛�</span>
+          <span class="summary-value">{{ sourceRowData.model || '-' }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">鐗╂枡缂栫爜锛�</span>
+          <span class="summary-value">{{ sourceRowData.materialCode || '-' }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">寮哄害锛�</span>
+          <span class="summary-value">{{ sourceRowData.strength || '-' }}</span>
+        </div>
+      </div>
+      <div class="source-data-container">
+        <!-- 宸︿晶applyNo鍒楄〃 -->
+        <div class="applyno-list">
+          <div class="list-header">鐢宠鍗曞垪琛�</div>
+          <div class="list-body">
+            <div v-for="(item, index) in sourceTableData"
+                 :key="item.applyNo || index"
+                 class="applyno-item"
+                 :class="{ active: selectedApplyNo === item.applyNo }"
+                 @click="selectApplyNo(item)">
+              <div class="applyno-text">{{ item.applyNo }}</div>
+              <div class="applyno-info">{{ item.customerName }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- 鍙充晶璇︾粏淇℃伅 -->
+        <div class="detail-info">
+          <div v-if="selectedSourceData && selectedSourceData.items && selectedSourceData.items.length > 0">
+            <div v-for="item in selectedSourceData.items"
+                 :key="item.id"
+                 class="source-data-card">
+              <!-- <div class="card-header">
+                <div class="data-source-tag">
+                </div>
+                <div class="card-title">浜у搧鏄庣粏</div>
+              </div> -->
+              <div class="card-body">
+                <div class="info-grid">
+                  <div class="info-item">
+                    <div class="info-label">鏁版嵁鏉ユ簮</div>
+                    <div class="info-value">
+                      <el-tag :type="item.dataSourceType == 1 ? 'primary' : 'warning'">
+                        {{ item.dataSourceType == 1 ? '閽夐拤鍚屾' : '鎵嬪姩鏂板' }}
+                      </el-tag>
+                    </div>
+                  </div>
+                  <div class="info-item">
+                    <div class="info-label">鍧楁暟</div>
+                    <div class="info-value">{{ item.quantity || '-' }}<span style="color:rgb(63, 95, 211)"> 鍧�</span></div>
+                  </div>
+                  <div class="info-item">
+                    <div class="info-label">鏂规暟</div>
+                    <div class="info-value">{{ item.volume || '-' }}<span style="color:rgba(27, 104, 90, 0.76)"> 鏂�</span></div>
+                  </div>
+                  <div class="info-item">
+                    <div class="info-label">涓嬪彂鐘舵��</div>
+                    <div class="info-value">
+                      <el-tag :type="{
+                        0: 'warning',
+                        1: 'primary',
+                        2: 'info'
+                      }[item.status] || 'info'">
+                        {{ item.status == 0 ? '寰呬笅鍙�' : item.status == 1 ? '閮ㄥ垎涓嬪彂' : '宸蹭笅鍙�' }}
+                      </el-tag>
+                    </div>
+                  </div>
+                  <div class="info-item">
+                    <div class="info-label">宸蹭笅鍙戞柟鏁�</div>
+                    <div class="info-value">{{ item.assignedQuantity ? `${item.assignedQuantity}` : 0 }}<span style="color:rgba(214, 134, 22, 0.76)"> 鏂�</span></div>
+                  </div>
+                  <div class="info-item">
+                    <div class="info-label">灏哄</div>
+                    <div class="info-value">{{ item.length || '-' }}mm 脳 {{ item.width || '-' }}mm 脳 {{ item.height || '-' }}mm</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="info-label">璁″垝寮�濮嬫棩鏈�</div>
+                    <div class="info-value">{{ item.startDate ? dayjs(item.startDate).format('YYYY-MM-DD') : '' }}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="info-label">璁″垝缁撴潫鏃ユ湡</div>
+                    <div class="info-value">{{ item.endDate ? dayjs(item.endDate).format('YYYY-MM-DD') : '' }}</div>
+                  </div>
+                  <!-- <div class="info-item">
+                    <div class="info-label">寮哄害</div>
+                    <div class="info-value">{{ item.strength || '' }}</div>
+                  </div> -->
+                </div>
+                <div class="remarks-section">
+                  <div class="info-item full-width">
+                    <div class="info-label">澶囨敞 1</div>
+                    <div class="info-value">{{ item.remarkOne || '-' }}</div>
+                  </div>
+                  <div class="info-item full-width">
+                    <div class="info-label">澶囨敞 2</div>
+                    <div class="info-value">{{ item.remarkTwo || '-' }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else
+               class="empty-state">
+            <el-empty :description="selectedSourceData ? '璇ョ敵璇峰崟鏆傛棤鏁版嵁' : '璇烽�夋嫨涓�涓敵璇峰崟'" />
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -104,6 +262,8 @@
     bindingRoute,
     listProcessBom,
     delProductOrder,
+    revokeProductOrder,
+    getProductOrderSource,
   } from "@/api/productionManagement/productionOrder.js";
   import { listPage } from "@/api/productionManagement/processRoute.js";
   import { listMain as getOrderProcessRouteMain } from "@/api/productionManagement/productProcessRoute.js";
@@ -117,6 +277,11 @@
 
   const router = useRouter();
   const isShowNewModal = ref(false);
+  const sourceDataDialogVisible = ref(false);
+  const sourceTableData = ref([]);
+  const selectedApplyNo = ref("");
+  const selectedSourceData = ref(null);
+  const sourceRowData = ref(null);
 
   const tableColumn = ref([
     {
@@ -153,11 +318,18 @@
       label: "浜у搧鍚嶇О",
       prop: "productName",
       width: "120px",
+      dataType: "tag",
     },
     {
       label: "瑙勬牸",
       prop: "model",
       width: "120px",
+    },
+    {
+      label: "寮哄害",
+      prop: "strength",
+      width: "120px",
+      dataType: "tag",
     },
     {
       label: "鐗╂枡缂栫爜",
@@ -168,14 +340,23 @@
       label: "宸ヨ壓璺嚎缂栧彿",
       prop: "processRouteCode",
       width: "200px",
+      className: "status-cell",
     },
     {
       label: "闇�姹傛暟閲�",
       prop: "quantity",
+      dataType: "slot",
+      align: "right",
+      slot: "quantity",
+      width: 120,
     },
     {
       label: "瀹屾垚鏁伴噺",
       prop: "completeQuantity",
+      dataType: "slot",
+      align: "right",
+      slot: "completeQuantity",
+      width: 120,
     },
     {
       dataType: "slot",
@@ -200,6 +381,12 @@
       label: "浜や粯鏃ユ湡",
       prop: "planCompleteTime",
       formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
+      width: 120,
+    },
+    {
+      label: "鍒涘缓鏃堕棿",
+      prop: "createTime",
+      formatData: val => (val ? dayjs(val).format("YYYY-MM-DD HH:mm:ss") : ""),
       width: 120,
     },
 
@@ -259,6 +446,156 @@
   });
   const selectedRows = ref([]);
 
+  // 鏉ユ簮鏁版嵁寮圭獥鐩稿叧
+  const sourceTableColumn = ref([
+    {
+      label: "鏁版嵁鏉ユ簮",
+      width: "100px",
+      prop: "dataSourceType",
+      dataType: "tag",
+      formatType: params => {
+        const typeMap = {
+          2: "warning",
+          1: "primary",
+        };
+        return typeMap[params] || "info";
+      },
+      formatData: cell => (cell == 1 ? "閽夐拤鍚屾" : "鎵嬪姩鏂板"),
+    },
+    {
+      label: "鐢宠鍗曠紪鍙�",
+      prop: "applyNo",
+      width: "150px",
+    },
+    {
+      label: "瀹㈡埛鍚嶇О",
+      prop: "customerName",
+      width: "150px",
+    },
+    {
+      label: "浜у搧鍚嶇О",
+      prop: "productName",
+      width: "200px",
+      dataType: "tag",
+      formatType: params => {
+        return "primary";
+      },
+    },
+    {
+      label: "浜у搧瑙勬牸",
+      prop: "model",
+      width: "150px",
+      className: "spec-cell",
+    },
+    {
+      label: "鐗╂枡缂栫爜",
+      prop: "materialCode",
+      width: "150px",
+    },
+    {
+      label: "鍧楁暟",
+      prop: "quantity",
+      align: "right",
+      dataType: "slot",
+      slot: "quantity",
+    },
+    {
+      label: "鏂规暟",
+      prop: "volume",
+      width: "150px",
+      align: "right",
+      dataType: "slot",
+      slot: "volume",
+      className: "volume-cell",
+    },
+    {
+      label: "涓嬪彂鐘舵��",
+      prop: "status",
+      width: "150px",
+      className: "status-cell",
+      dataType: "tag",
+      formatType: params => {
+        const typeMap = {
+          0: "warning",
+          1: "primary",
+          2: "info",
+        };
+        return typeMap[params] || "info";
+      },
+      formatData: cell => {
+        const statusMap = {
+          0: "寰呬笅鍙�",
+          1: "閮ㄥ垎涓嬪彂",
+          2: "宸蹭笅鍙�",
+        };
+        return statusMap[cell] || "";
+      },
+    },
+    {
+      label: "宸蹭笅鍙戞柟鏁�",
+      prop: "assignedQuantity",
+      width: "150px",
+      className: "spec-cell",
+      formatData: cell => (cell ? `${cell}鏂筦 : 0),
+    },
+    {
+      label: "闀�",
+      prop: "length",
+      className: "dimension-cell",
+      formatData: cell => (cell ? `${cell}mm` : ""),
+    },
+    {
+      label: "瀹�",
+      prop: "width",
+      className: "dimension-cell",
+      formatData: cell => (cell ? `${cell}mm` : ""),
+    },
+    {
+      label: "楂�",
+      prop: "height",
+      className: "dimension-cell",
+      formatData: cell => (cell ? `${cell}mm` : ""),
+    },
+    {
+      label: "璁″垝寮�濮嬫棩鏈�",
+      prop: "startDate",
+      width: "150px",
+      className: "date-cell",
+      formatData: cell => (cell ? dayjs(cell).format("YYYY-MM-DD") : ""),
+    },
+    {
+      label: "璁″垝缁撴潫鏃ユ湡",
+      prop: "endDate",
+      width: "150px",
+      className: "date-cell",
+      formatData: cell => (cell ? dayjs(cell).format("YYYY-MM-DD") : ""),
+    },
+    {
+      label: "寮哄害",
+      prop: "strength",
+      formatData: cell => {
+        if (!cell) return "";
+        return cell;
+      },
+    },
+    {
+      label: "澶囨敞 1",
+      width: "150px",
+      prop: "remarkOne",
+    },
+    {
+      label: "澶囨敞 2",
+      width: "150px",
+      prop: "remarkTwo",
+    },
+  ]);
+  const sourceTableLoading = ref(false);
+  const sourcePage = reactive({
+    current: 1,
+    size: 100,
+    total: 0,
+  });
+
   const data = reactive({
     searchForm: {
       customerName: "",
@@ -266,6 +603,11 @@
       projectName: "",
       productName: "",
       model: "",
+      dictCode: null,
+      startTime: null,
+      endTime: null,
+      strength: null,
+      status: "",
     },
   });
   const { searchForm } = toRefs(data);
@@ -388,7 +730,11 @@
       productName: "",
       model: "",
       status: "",
+      strength: null,
+      startTime: null,
+      endTime: null,
     };
+    createTime.value = [];
     handleQuery();
   };
   // 鏌ヨ鍒楄〃
@@ -412,11 +758,25 @@
     }
     handleQuery();
   };
+  const createTime = ref([]);
   const getList = () => {
     tableLoading.value = true;
     // 鏋勯�犱竴涓柊鐨勫璞★紝涓嶅寘鍚玡ntryDate瀛楁
     const params = { ...searchForm.value, ...page };
     params.entryDate = undefined;
+    params.startTime =
+      createTime.value.length > 0
+        ? dayjs(createTime.value[0]).format("YYYY-MM-DD HH:mm:ss")
+        : undefined;
+    params.endTime =
+      createTime.value.length > 0
+        ? dayjs(createTime.value[1])
+            .hour(23)
+            .minute(59)
+            .second(59)
+            .format("YYYY-MM-DD HH:mm:ss")
+        : undefined;
+
     productOrderListPage(params)
       .then(res => {
         tableLoading.value = false;
@@ -474,21 +834,66 @@
     });
   };
 
+  // 閫夋嫨鐢宠鍗�
+  const selectApplyNo = item => {
+    selectedApplyNo.value = item.applyNo;
+    selectedSourceData.value = item;
+  };
+
   // 鏌ョ湅鏉ユ簮鐢熶骇璁″垝鏁版嵁
   const showSourceData = row => {
-    // 杩欓噷闇�瑕佹牴鎹疄闄呯殑API鍜岃矾鐢辫繘琛岃皟鏁�
-    // 鍋囪鐢熶骇璁㈠崟涓湁鐢熶骇璁″垝ID瀛楁锛屾瘮濡俻roductionPlanId
-    if (row.productionPlanId) {
-      // 璺宠浆鍒扮敓浜ц鍒掕鎯呴〉闈�
-      router.push({
-        path: "/productionManagement/productionPlan",
-        query: {
-          id: row.productionPlanId,
-        },
+    // 瀛樺偍鐐瑰嚮鏉ユ簮鎸夐挳鏃朵紶閫掔殑row鍙傛暟
+    sourceRowData.value = row;
+    // 璋冪敤API鑾峰彇鏉ユ簮鏁版嵁
+    getProductOrderSource(row.id)
+      .then(res => {
+        if (res.code === 200) {
+          // 澶勭悊鎺ュ彛杩斿洖鐨勬暟鎹紝璋冩暣涓烘垜浠渶瑕佺殑鏍煎紡
+          sourceTableData.value = res.data.map(item => {
+            return {
+              applyNo: item.applyNo,
+              customerName: item.productPlans[0]?.customerName || "",
+              items: item.productPlans.map(plan => {
+                return {
+                  id: plan.id,
+                  dataSourceType: plan.dataSourceType,
+                  productName: plan.productName,
+                  model: plan.model,
+                  materialCode: plan.materialCode,
+                  quantity: plan.quantity,
+                  volume: plan.volume,
+                  status: plan.status,
+                  assignedQuantity: plan.assignedQuantity,
+                  length: plan.length,
+                  width: plan.width,
+                  height: plan.height,
+                  startDate: plan.startDate,
+                  endDate: plan.endDate,
+                  strength: plan.strength,
+                  remarkOne: plan.remarkOne,
+                  remarkTwo: plan.remarkTwo,
+                };
+              }),
+            };
+          });
+          sourcePage.total = sourceTableData.value.length;
+          // 榛樿閫夋嫨绗竴涓敵璇峰崟
+          if (sourceTableData.value.length > 0) {
+            selectApplyNo(sourceTableData.value[0]);
+          } else {
+            selectedApplyNo.value = "";
+            selectedSourceData.value = null;
+          }
+          // 鎵撳紑寮圭獥
+          sourceDataDialogVisible.value = true;
+        } else {
+          proxy.$modal.msgError(res.msg || "鑾峰彇鏉ユ簮鏁版嵁澶辫触");
+        }
+      })
+      .catch(err => {
+        proxy.$modal.msgError("鑾峰彇鏉ユ簮鏁版嵁澶辫触");
+        console.error(err);
       });
-    } else {
-      proxy.$modal.msgWarning("褰撳墠璁㈠崟娌℃湁鍏宠仈鐨勭敓浜ц鍒�");
-    }
   };
 
   // 琛ㄦ牸閫夋嫨鏁版嵁
@@ -496,13 +901,13 @@
     selectedRows.value = selection;
   };
   const handleDeleteSolo = row => {
-    ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚��鍥烇紝鏄惁纭閫�鍥烇紵", "瀵煎嚭", {
+    ElMessageBox.confirm("閫変腑鐨勫唴瀹瑰皢琚垹闄わ紝鏄惁纭鍒犻櫎锛�", "瀵煎嚭", {
       confirmButtonText: "纭",
       cancelButtonText: "鍙栨秷",
       type: "warning",
     })
       .then(() => {
-        delProductOrder([row.id]).then(res => {
+        delProductOrder(row.id).then(res => {
           proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
           getList();
         });
@@ -526,8 +931,8 @@
       type: "warning",
     })
       .then(() => {
-        delProductOrder(ids).then(res => {
-          proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+        revokeProductOrder(ids).then(res => {
+          proxy.$modal.msgSuccess("閫�鍥炴垚鍔�");
           getList();
         });
       })
@@ -556,8 +961,22 @@
   };
 
   const handleConfirmRoute = () => {};
+  const productTypeOptions2 = ref([]);
+  // 鑾峰彇浜у搧绫诲瀷瀛楀吀
+  const getProductTypeOptions = () => {
+    getDicts("block_strength")
+      .then(res => {
+        if (res.code === 200) {
+          productTypeOptions2.value = res.data;
+        }
+      })
+      .catch(err => {
+        console.error("鑾峰彇浜у搧绫诲瀷瀛楀吀澶辫触锛�", err);
+      });
+  };
 
   onMounted(() => {
+    getProductTypeOptions();
     getList();
   });
 </script>
@@ -583,3 +1002,233 @@
     background-color: #f4defa;
   }
 </style>
+<style lang="scss">
+  .status-cell {
+    font-weight: 600;
+    color: #409eff;
+    font-family: "Courier New", monospace;
+    text-shadow: 0 1px 2px rgba(64, 158, 255, 0.2);
+  }
+
+  .source-data-container {
+    display: flex;
+    gap: 20px;
+    height: 500px;
+
+    .applyno-list {
+      width: 250px;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+
+      .list-header {
+        padding: 12px 16px;
+        background: #f5f7fa;
+        border-bottom: 1px solid #e4e7ed;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      .list-body {
+        height: calc(100% - 48px);
+        overflow-y: auto;
+
+        .applyno-item {
+          padding: 12px 16px;
+          border-bottom: 1px solid #f0f2f5;
+          cursor: pointer;
+          transition: all 0.3s;
+
+          &:hover {
+            background: #f5f7fa;
+          }
+
+          &.active {
+            background: #ecf5ff;
+            border-left: 4px solid #409eff;
+          }
+
+          .applyno-text {
+            font-weight: 600;
+            color: #303133;
+            font-family: "Courier New", monospace;
+            margin-bottom: 4px;
+          }
+
+          .applyno-info {
+            font-size: 12px;
+            color: #909399;
+          }
+        }
+      }
+    }
+
+    .detail-info {
+      flex: 1;
+      background: #fff;
+      border-radius: 8px;
+      // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+
+      .applyno-summary {
+        padding: 16px 20px;
+        background: #f5f7fa;
+        border-bottom: 1px solid #e4e7ed;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
+
+        .summary-item {
+          display: flex;
+          align-items: center;
+
+          .summary-label {
+            font-size: 13px;
+            color: #909399;
+            margin-right: 8px;
+            font-weight: 500;
+          }
+
+          .summary-value {
+            font-size: 14px;
+            color: #303133;
+            font-weight: 500;
+          }
+        }
+      }
+
+      .empty-state {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .source-data-card {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        margin-top: 20px;
+        margin-right: 20px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 16px 20px;
+          background: #f5f7fa;
+          border-bottom: 1px solid #e4e7ed;
+
+          .data-source-tag {
+            flex-shrink: 0;
+          }
+
+          .card-title {
+            font-weight: 600;
+            color: #303133;
+            font-size: 14px;
+          }
+        }
+
+        .card-body {
+          flex: 1;
+          padding: 20px;
+          overflow-y: auto;
+          background-color: #f5f7fa;
+
+          .info-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 16px;
+            margin-bottom: 20px;
+
+            .info-item {
+              display: flex;
+              flex-direction: column;
+
+              .info-label {
+                font-size: 12px;
+                color: #909399;
+                margin-bottom: 4px;
+                font-weight: 500;
+              }
+
+              .info-value {
+                font-size: 14px;
+                color: #303133;
+                font-weight: 500;
+              }
+            }
+
+            .info-item.full-width {
+              grid-column: 1 / -1;
+            }
+          }
+
+          .remarks-section {
+            display: flex;
+            // flex-direction: column;
+            gap: 12px;
+            border-top: 1px solid #e4e7ed;
+            padding-top: 16px;
+
+            .info-item {
+              display: flex;
+              width: 50%;
+              flex-direction: column;
+
+              .info-label {
+                font-size: 12px;
+                color: #909399;
+                margin-bottom: 4px;
+                font-weight: 500;
+              }
+
+              .info-value {
+                font-size: 14px;
+                color: #303133;
+                line-height: 1.5;
+                padding: 8px;
+                background: #f9fafc;
+                border-radius: 4px;
+                border: 1px solid #ecf5ff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .applyno-summary1 {
+    padding: 16px 20px;
+    background: #f5f7fa;
+    border-bottom: 1px solid #e4e7ed;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    .summary-item {
+      display: flex;
+      align-items: center;
+      margin-right: 20px;
+
+      .summary-label {
+        font-size: 13px;
+        color: #909399;
+        margin-right: 8px;
+        font-weight: 500;
+      }
+
+      .summary-value {
+        font-size: 14px;
+        color: #303133;
+        font-weight: 500;
+      }
+    }
+  }
+</style>

--
Gitblit v1.9.3