完善类型配置，新增L1, L4数据展示界面

2025-09-26 10:44:15 +08:00
parent 614e5ad34e
commit db87adf26a
33 changed files with 1294 additions and 309 deletions
--- a/src/views/L1-data-list/data.ts
+++ b/src/views/L1-data-list/data.ts
@@ -0,0 +1,48 @@
+import type { TableColumnType, TableColumnsType } from "ant-design-vue";
+
+const INDEX_COLUMN: TableColumnType = {
+  key: "index",
+  title: "序号",
+  width: 60,
+  fixed: true,
+  align: "center",
+} as const;
+
+// 定义操作列配置
+const ACTION_COLUMN: TableColumnType = {
+  key: "action",
+  title: "操作",
+  width: 120,
+  ellipsis: true,
+  fixed: "right",
+  align: "center",
+} as const;
+
+// 使用 Record 类型确保键值对的安全性
+export const fields: Record<string, string> = {
+  productStatus: "产品状态",
+  goodFlag: "良品标记",
+  processMemory: "加工记忆",
+  functionSw: "功能SW",
+  axisNumber: "轴号",
+  plugTerminalPressure: "插端子压力值",
+  plugTerminalHeight: "插端子高度值",
+  resistance: "电阻值",
+  inductorLs: "电感LS值",
+  inductorQ: "电感Q值",
+  pressureResistanceR: "耐压R值",
+  pressureResistanceI: "耐压I值",
+  visualResult: "视觉结果",
+  createTime: "创建时间",
+} as const;
+
+// 导出完整的列配置
+export const columns: TableColumnsType = [
+  INDEX_COLUMN,
+  ...Object.entries(fields).map(([key, title]) => ({
+    key,
+    title,
+    ellipsis: true,
+  })),
+  ACTION_COLUMN,
+];
--- a/src/views/L1-data-list/index.vue
+++ b/src/views/L1-data-list/index.vue
@@ -0,0 +1,347 @@
+<template>
+  <div class="l1-data-container">
+    <div class="page-header">
+      <h1 class="page-title">L1数据列表</h1>
+    </div>
+
+    <!-- 筛选区域 -->
+    <div class="filter-section">
+      <a-form layout="inline" :model="formData">
+        <a-form-item label="日期范围">
+          <a-range-picker v-model:value="formData.dateRange" :placeholder="['开始日期', '结束日期']"
+            format="YYYY-MM-DD hh:mm:ss" class="date-range-picker" show-time />
+        </a-form-item>
+        <a-form-item>
+          <a-space>
+            <a-button type="primary" @click="handleSearch" :loading="loading">
+              <template #icon>
+                <i-lucide-search />
+              </template>
+              搜索
+            </a-button>
+            <a-button @click="handleReset">
+              <template #icon>
+                <i-lucide-refresh-cw />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <!-- 数据表格 -->
+    <div class="table-section">
+      <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
+        @change="handleTableChange" row-key="id" size="middle" :scroll="{ x: 1200 }">
+        <template #bodyCell="{ column, record, index }">
+          <template v-if="column.key === 'index'">{{ index + 1 }}</template>
+          <template v-else-if="column.key === 'createTime'">
+            <span>{{ formatDateTime(record.createTime) }}</span>
+          </template>
+          <!-- <template v-else-if="column.key === 'productStatus'">
+            <a-tag :color="record.productStatus === 1 ? 'success' : 'default'">
+              {{ record.productStatus === 1 ? '有' : '无' }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'goodFlag'">
+            <a-tag :color="record.goodFlag === 1 ? 'success' : 'error'">
+              {{ record.goodFlag === 1 ? '良品' : '不良品' }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'processMemory'">
+            <a-tag :color="record.processMemory === 1 ? 'success' : 'default'">
+              {{ record.processMemory === 1 ? '已加工' : '未开工' }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'functionSw'">
+            <a-tag :color="record.functionSw === 1 ? 'success' : 'default'">
+              {{ record.functionSw === 1 ? '有效' : '无效' }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'visualResult'">
+            <a-tag :color="record.visualResult === 1 ? 'success' : 'error'">
+              {{ record.visualResult === 1 ? 'OK' : 'NG' }}
+            </a-tag>
+          </template> -->
+          <template v-else-if="column.key === 'action'">
+            <a-button type="link" size="small" @click="handleView(record as L1Data)">
+              查看详情
+            </a-button>
+          </template>
+          <template v-else>
+            {{ record[column.key as string] }}
+          </template>
+        </template>
+      </a-table>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <a-modal v-model:open="detailVisible" title="详情信息" :footer="null" width="800px">
+      <div v-if="selectedRecord" class="detail-content">
+        <a-descriptions :column="2" bordered>
+          <a-descriptions-item
+            v-for="(value, key) in selectedRecord"
+            :key="key"
+            :label="columns.find((col) => col.key === key)?.title || key"
+          >
+            <template v-if="key === 'createTime'">
+              {{ formatDateTime(value) }}
+            </template>
+            <!-- <template v-else-if="key === 'productStatus'">
+                <a-tag :color="selectedRecord.productStatus === 1 ? 'success' : 'default'">
+                  {{ selectedRecord.productStatus === 1 ? '有' : '无' }}
+                </a-tag>
+            </template>
+            <template v-else-if="key === 'goodFlag'">
+              <a-tag :color="selectedRecord.goodFlag === 1 ? 'success' : 'error'">
+                {{ selectedRecord.goodFlag === 1 ? '良品' : '不良品' }}
+              </a-tag>
+            </template>
+            <template v-else-if="key === 'processMemory'">
+              <a-tag :color="selectedRecord.processMemory === 1 ? 'success' : 'default'">
+                {{ selectedRecord.processMemory === 1 ? '已加工' : '未开工' }}
+              </a-tag>
+            </template>
+            <template v-else-if="key === 'functionSw'">
+              <a-tag :color="selectedRecord.functionSw === 1 ? 'success' : 'default'">
+                {{ selectedRecord.functionSw === 1 ? '有效' : '无效' }}
+              </a-tag>
+            </template>
+            <template v-else-if="key === 'visualResult'">
+              <a-tag :color="selectedRecord.visualResult === 1 ? 'success' : 'error'">
+                {{ selectedRecord.visualResult === 1 ? 'OK' : 'NG' }}
+              </a-tag>
+            </template> -->
+            <template v-else>
+              {{ value }}
+            </template>
+          </a-descriptions-item>
+        </a-descriptions>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { message } from "ant-design-vue";
+import { getL1Data } from "@/api/data";
+import type { QueryParams } from "@/api/data/model";
+import type { L1Data } from "./types";
+import type { Dayjs } from "dayjs";
+import { columns } from "./data";
+
+type DateRangeType = [Dayjs, Dayjs] | undefined;
+
+// 响应式数据
+const loading = ref(false);
+const tableData = ref<L1Data[]>([]);
+const formData = reactive<{ dateRange: DateRangeType }>({
+  dateRange: undefined,
+});
+const detailVisible = ref(false);
+const selectedRecord = ref<L1Data | null>(null);
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条`,
+  pageSizeOptions: ["10", "20", "50", "100"],
+});
+
+// 获取数据
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    const params: QueryParams = {
+      pageNum: pagination.current,
+      pageSize: pagination.pageSize,
+    };
+
+    // 添加日期范围筛选
+    if (formData.dateRange && formData.dateRange.length === 2) {
+      params.createTimeBegin = formData.dateRange[0].format("YYYY-MM-DD hh:mm:ss");
+      params.createTimeEnd = formData.dateRange[1].format("YYYY-MM-DD hh:mm:ss");
+    }
+
+    const res = await getL1Data(params);
+
+    if (res.code === 200) {
+      tableData.value = res.rows || [];
+      pagination.total = res.total || 0;
+    } else {
+      message.error(res.msg || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取L1数据失败:", error);
+    message.error("获取数据失败，请稍后重试");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 搜索处理
+const handleSearch = () => {
+  pagination.current = 1;
+  fetchData();
+};
+
+// 重置处理
+const handleReset = () => {
+  formData.dateRange = undefined;
+  pagination.current = 1;
+  fetchData();
+};
+
+// 表格变化处理（分页、排序等）
+const handleTableChange = (pag: any, filters: any, sorter: any) => {
+  pagination.current = pag.current;
+  pagination.pageSize = pag.pageSize;
+
+  // 处理排序
+  if (sorter.field) {
+    // 这里可以根据需要添加排序逻辑
+  }
+
+  fetchData();
+};
+
+// 查看详情
+const handleView = (record: L1Data) => {
+  selectedRecord.value = record;
+  detailVisible.value = true;
+};
+
+// 格式化日期时间
+const formatDateTime = (dateTime: string | number) => {
+  if (!dateTime) return null;
+  return new Date(dateTime).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+};
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/assets/styles/variables" as *;
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.l1-data-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: $spacing-lg;
+
+  .page-header {
+    margin-bottom: $spacing-lg;
+    flex-shrink: 0;
+
+    .page-title {
+      font-size: $title-font-size;
+      color: $text-dark;
+      margin: 0;
+      font-weight: 600;
+    }
+  }
+
+  .filter-section {
+    background: $bg-light;
+    padding: $spacing-lg;
+    border-radius: $border-radius-lg;
+    margin-bottom: $spacing-lg;
+    flex-shrink: 0;
+
+    .filter-label {
+      font-weight: 500;
+      color: $text-dark;
+      font-size: $content-font-size;
+    }
+  }
+
+  .table-section {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    :deep(.ant-table-wrapper) {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .ant-spin-container,
+      .ant-table {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .ant-table-container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .ant-table-body {
+        overflow-y: auto !important;
+      }
+    }
+  }
+
+  .detail-content {
+    .ant-descriptions {
+      margin-top: $spacing-md;
+    }
+  }
+}
+
+:deep(.ant-btn-primary) {
+  background: $primary-color;
+  border-color: $primary-color;
+
+  &:hover {
+    background: $primary-light;
+    border-color: $primary-light;
+  }
+}
+
+@media (max-width: 768px) {
+  .l1-data-container {
+    padding: $spacing-md;
+
+    .filter-section {
+      .ant-row {
+        flex-direction: column;
+        gap: $spacing-md;
+
+        .ant-col {
+          width: 100% !important;
+        }
+      }
+
+      .date-range-picker {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/L1-data-list/types.ts
+++ b/src/views/L1-data-list/types.ts
@@ -0,0 +1,58 @@
+export interface L1Data {
+  /** 加工信息ID */
+  processInfoId: number;
+
+  /** 产品状态: 0-无, 1-有 */
+  productStatus: 0 | 1;
+
+  /** 良品标记: 0-不良品, 1-良品 */
+  goodFlag: 0 | 1;
+
+  /** 加工记忆: 0-未开工, 1-已加工 */
+  processMemory: 0 | 1;
+
+  /** 功能SW: 0-无效, 1-有效 */
+  functionSw: 0 | 1;
+
+  /** 轴号 */
+  axisNumber: number;
+
+  /** 上骨架时间: 年, 00~99 */
+  loadSkeletonYear: number;
+
+  /** 上骨架时间: 月日, 0101~1231 */
+  loadSkeletonMonthDay: number;
+
+  /** 上骨架时间: 时分, 0000~2459 */
+  loadSkeletonHourMin: number;
+
+  /** 上骨架时间: 秒, 00~59 */
+  loadSkeletonSecond: number;
+
+  /** 插端子压力值 */
+  plugTerminalPressure: number;
+
+  /** 插端子高度值 */
+  plugTerminalHeight: number;
+
+  /** 电阻值 */
+  resistance: number;
+
+  /** 电感LS值 */
+  inductorLs: number;
+
+  /** 电感Q值 */
+  inductorQ: number;
+
+  /** 耐压R值 */
+  pressureResistanceR: number;
+
+  /** 耐压I值 */
+  pressureResistanceI: number;
+
+  /** 视觉结果: 0-NG, 1-OK */
+  visualResult: 0 | 1;
+
+  /** 创建时间 */
+  createTime: string; // ISO 8601 格式，如 "2025-09-23T12:34:56"
+}
--- a/src/views/L4-data-list/data.ts
+++ b/src/views/L4-data-list/data.ts
@@ -0,0 +1,69 @@
+import type { TableColumnType, TableColumnsType } from "ant-design-vue";
+
+const INDEX_COLUMN: TableColumnType = {
+  key: "index",
+  title: "序号",
+  width: 60,
+  fixed: true,
+  align: "center",
+} as const;
+
+// 定义操作列配置
+const ACTION_COLUMN: TableColumnType = {
+  key: "action",
+  title: "操作",
+  width: 120,
+  ellipsis: true,
+  fixed: "right",
+  align: "center",
+} as const;
+
+// 使用 Record 类型确保键值对的安全性
+export const fields: Record<string, string> = {
+  processInfoId: "加工信息ID",
+  pltNo: "PLT No",
+  processF1: "加工F1",
+  processF2: "加工F2",
+  goodProductF1: "良品F1",
+  goodProductF2: "良品F2",
+  electricalResult: "电气检测结果",
+  engraveResult: "印字检测结果",
+  qrCode: "二维码",
+  qrCodeLevel: "二维码等级",
+  pressure15Riveting: "压力1_5#_铆接",
+  height15Riveting: "高度1_5#_铆接",
+  pressure25Magnet1: "压力2_5#_磁石1",
+  height25Magnet1: "高度2_5#_磁石1",
+  pressure36Magnet2: "压力3_6#_磁石2",
+  height36Magnet2: "高度3_6#_磁石2",
+  torque47AxisInsert: "扭矩4_7#_轴旋入",
+  height47AxisInsert: "高度4_7#_轴旋入",
+  pressure58LowerCase: "压力5_8#_下壳装入",
+  height58LowerCase: "高度5_8#_下壳装入",
+  pressure69UpperCase: "压力6_9#_上壳装入",
+  height69UpperCase: "高度6_9#_上壳装入",
+  height79HeightCheck: "高度7_9#_高度检测",
+  pressure79Laser: "压力7_9#_激光",
+  height89Laser: "高度8_9#_激光",
+  value19DcrUpper: "数値1_9#_DCR(上)",
+  value29DcrLower: "数値2_9#_DCR(下)",
+  value39LcrUpperLs: "数値3_9#_LCR(上)LS",
+  value49LcrLowerQ: "数値4_9#_LCR(下)Q",
+  value59LcrLowerLs: "数値5_9#_LCR(下)LS",
+  value69LcrLowerQ: "数値6_9#_LCR(下)Q",
+  value79IrR: "数値7_9#_IR R",
+  value89IrI: "数値8_9#_IR I",
+  createTime: "创建时间"
+} as const;
+
+// 导出完整的列配置
+export const columns: TableColumnsType = [
+  INDEX_COLUMN,
+  ...Object.entries(fields).map(([key, title]) => ({
+    key,
+    title,
+    width: 150,
+    ellipsis: true,
+  })),
+  ACTION_COLUMN,
+];
--- a/src/views/L4-data-list/index.vue
+++ b/src/views/L4-data-list/index.vue
@@ -0,0 +1,336 @@
+<template>
+  <div class="l4-data-container">
+    <div class="page-header">
+      <h1 class="page-title">L4数据列表</h1>
+    </div>
+
+    <!-- 筛选区域 -->
+    <div class="filter-section">
+      <a-form layout="inline" :model="formData">
+        <a-form-item label="日期范围">
+          <a-range-picker
+            v-model:value="formData.dateRange"
+            :placeholder="['开始日期', '结束日期']"
+            format="YYYY-MM-DD hh:mm:ss"
+            class="date-range-picker"
+            show-time
+          />
+        </a-form-item>
+        <a-form-item>
+          <a-space>
+            <a-button type="primary" @click="handleSearch" :loading="loading">
+              <template #icon>
+                <i-lucide-search />
+              </template>
+              搜索
+            </a-button>
+            <a-button @click="handleReset">
+              <template #icon>
+                <i-lucide-refresh-cw />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-form-item>
+      </a-form>
+    </div>
+
+    <!-- 数据表格 -->
+    <div class="table-section">
+      <a-table
+        :columns="columns"
+        :data-source="tableData"
+        :loading="loading"
+        :pagination="pagination"
+        @change="handleTableChange"
+        row-key="id"
+        size="middle"
+        :scroll="{ x: 1200 }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'createTime'">
+            {{ formatDateTime(record.createTime) }}
+          </template>
+          <!-- <template v-else-if="column.key === 'processF1'">
+            <a-tag :color="record.processF1 === 1 ? 'green' : 'red'">
+              {{ record.processF1 === 1 ? '已加工' : '未加工' }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'processF2'">
+            <a-tag :color="record.processF2 === 1 ? 'green' : 'red'">
+              {{ record.processF2 === 1 ? '已加工' : '未加工' }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'goodProductF1'">
+            <a-tag :color="record.goodProductF1 === 1 ? 'green' : 'red'">
+              {{ record.goodProductF1 === 1 ? '良品' : '不良品' }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'goodProductF2'">
+            <a-tag :color="record.goodProductF2 === 1 ? 'green' : 'red'">
+              {{ record.goodProductF2 === 1 ? '良品' : '不良品' }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'electricalResult'">
+            <a-tag :color="getElectricalResultColor(record.electricalResult)">
+              {{ getElectricalResultText(record.electricalResult) }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'engraveResult'">
+            <a-tag :color="record.engraveResult === 0 ? 'green' : 'red'">
+              {{ record.engraveResult === 0 ? '良品' : '不良品' }}
+            </a-tag>
+          </template> -->
+          <template v-else-if="column.key === 'action'">
+            <a-button type="link" size="small" @click="handleView(record as L4Data)">
+              查看详情
+            </a-button>
+          </template>
+        </template>
+      </a-table>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <a-modal
+      v-model:open="detailModalVisible"
+      title="L4数据详情"
+      width="800px"
+      :footer="null"
+    >
+      <div v-if="selectedRecord" class="detail-content">
+        <a-descriptions :column="2" bordered>
+          <a-descriptions-item
+            v-for="(value, key) in selectedRecord"
+            :key="key"
+            :label="columns.find((col) => col.key === key)?.title || key"
+          >
+            <template v-if="key === 'createTime'">
+              {{ formatDateTime(value) }}
+            </template>
+            <!-- <template v-else-if="key === 'processF1'">
+              <a-tag :color="value === 1 ? 'green' : 'red'">
+                {{ value === 1 ? '已加工' : '未加工' }}
+              </a-tag>
+            </template>
+            <template v-else-if="key === 'processF2'">
+              <a-tag :color="value === 1 ? 'green' : 'red'">
+                {{ value === 1 ? '已加工' : '未加工' }}
+              </a-tag>
+            </template>
+            <template v-else-if="key === 'goodProductF1'">
+              <a-tag :color="value === 1 ? 'green' : 'red'">
+                {{ value === 1 ? '良品' : '不良品' }}
+              </a-tag>
+            </template>
+            <template v-else-if="key === 'goodProductF2'">
+              <a-tag :color="value === 1 ? 'green' : 'red'">
+                {{ value === 1 ? '良品' : '不良品' }}
+              </a-tag>
+            </template>
+            <template v-else-if="key === 'electricalResult'">
+              <a-tag :color="getElectricalResultColor(value)">
+                {{ getElectricalResultText(value) }}
+              </a-tag>
+            </template>
+            <template v-else-if="key === 'engraveResult'">
+              <a-tag :color="value === 0 ? 'green' : 'red'">
+                {{ value === 0 ? '良品' : '不良品' }}
+              </a-tag>
+            </template> -->
+            <template v-else>
+              {{ value }}
+            </template>
+          </a-descriptions-item>
+        </a-descriptions>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue';
+import { message } from 'ant-design-vue';
+import { getL4Data } from '@/api/data';
+import { columns } from './data';
+import type { QueryParams } from '@/api/data/model';
+import type { L4Data } from './types';
+import type { Dayjs } from 'dayjs';
+
+type DateRangeType = [Dayjs, Dayjs] | undefined;
+
+// 响应式数据
+const loading = ref(false);
+const tableData = ref<L4Data[]>([]);
+const detailModalVisible = ref(false);
+const selectedRecord = ref<L4Data | null>(null);
+
+// 筛选参数
+const formData = reactive<{ dateRange: DateRangeType }>({
+  dateRange: undefined,
+});
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number, range: [number, number]) =>
+    `共 ${total} 条记录，当前显示第 ${range[0]}-${range[1]} 条`,
+});
+
+// 电气检测结果颜色
+const getElectricalResultColor = (result: number) => {
+  switch (result) {
+    case 7: return 'green';
+    case 0: return 'red';
+    case 1: return 'orange';
+    case 3: return 'purple';
+    default: return 'default';
+  }
+};
+
+// 电气检测结果文本
+const getElectricalResultText = (result: number) => {
+  switch (result) {
+    case 0: return 'DCR不良';
+    case 1: return 'LCR不良';
+    case 3: return 'IR不良';
+    case 7: return '良品';
+    default: return '未知';
+  }
+};
+
+// 获取数据
+const fetchData = async () => {
+  loading.value = true;
+  try {
+    const params: QueryParams = {
+      pageNum: pagination.current,
+      pageSize: pagination.pageSize,
+    };
+
+    // 添加日期范围筛选
+    if (formData.dateRange && formData.dateRange.length === 2) {
+      params.createTimeBegin = formData.dateRange[0].format("YYYY-MM-DD hh:mm:ss");
+      params.createTimeEnd = formData.dateRange[1].format("YYYY-MM-DD hh:mm:ss");
+    }
+
+    const response = await getL4Data(params);
+
+    if (response.code === 200) {
+      tableData.value = response.rows || [];
+      pagination.total = response.total || 0;
+    } else {
+      message.error(response.msg || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取L4数据失败:", error);
+    message.error("获取数据失败，请稍后重试");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 搜索处理
+const handleSearch = () => {
+  pagination.current = 1;
+  fetchData();
+};
+
+// 重置处理
+const handleReset = () => {
+  formData.dateRange = undefined;
+  pagination.current = 1;
+  fetchData();
+};
+
+// 表格变化处理（分页、排序等）
+const handleTableChange = (paginationInfo: any) => {
+  pagination.current = paginationInfo.current;
+  pagination.pageSize = paginationInfo.pageSize;
+  fetchData();
+};
+
+// 查看详情
+const handleView = (record: L4Data) => {
+  selectedRecord.value = record;
+  detailModalVisible.value = true;
+};
+
+// 日期时间格式化
+const formatDateTime = (dateTime: string | number) => {
+  if (!dateTime) return '-';
+  return new Date(dateTime).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+};
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<style scoped>
+.l4-data-container {
+  padding: 20px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.page-header {
+  margin-bottom: 20px;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.filter-section {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+}
+
+.date-range-picker {
+  width: 300px;
+}
+
+.table-section {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.detail-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+:deep(.ant-table-thead > tr > th) {
+  background: #f8fafc;
+  font-weight: 600;
+}
+
+:deep(.ant-table-tbody > tr:hover > td) {
+  background: #f0f9ff;
+}
+
+:deep(.ant-descriptions-item-label) {
+  font-weight: 600;
+  background: #f8fafc;
+}
+</style>
--- a/src/views/L4-data-list/types.ts
+++ b/src/views/L4-data-list/types.ts
@@ -0,0 +1,106 @@
+export interface L4Data {
+  /** 加工信息ID */
+  processInfoId: number;
+
+  /** PLT No */
+  pltNo: number;
+
+  /** 加工F1, 0：未加工 */
+  processF1: 0 | 1;
+
+  /** 加工F2, 1：已加工 */
+  processF2: 0 | 1;
+
+  /** 良品F1, 0：不良品 */
+  goodProductF1: 0 | 1;
+
+  /** 良品F2, 1：良品 */
+  goodProductF2: 0 | 1;
+
+  /**
+   * 电气检测结果
+   * 0-DCR不良, 1-LCR不良, 3-IR不良, 7-良品
+   */
+  electricalResult: 0 | 1 | 3 | 7;
+
+  /** 印字检测结果, 0-良品, 1-不良品 */
+  engraveResult: 0 | 1;
+
+  /** 二维码 */
+  qrCode: string;
+
+  /** 二维码等级 */
+  qrCodeLevel: string;
+
+  /** 压力1_5#_铆接 */
+  pressure15Riveting: number;
+
+  /** 高度1_5#_铆接 */
+  height15Riveting: number;
+
+  /** 压力2_5#_磁石1 */
+  pressure25Magnet1: number;
+
+  /** 高度2_5#_磁石1 */
+  height25Magnet1: number;
+
+  /** 压力3_6#_磁石2 */
+  pressure36Magnet2: number;
+
+  /** 高度3_6#_磁石2 */
+  height36Magnet2: number;
+
+  /** 扭矩4_7#_轴旋入 */
+  torque47AxisInsert: number;
+
+  /** 高度4_7#_轴旋入 */
+  height47AxisInsert: number;
+
+  /** 压力5_8#_下壳装入 */
+  pressure58LowerCase: number;
+
+  /** 高度5_8#_下壳装入 */
+  height58LowerCase: number;
+
+  /** 压力6_9#_上壳装入 */
+  pressure69UpperCase: number;
+
+  /** 高度6_9#_上壳装入 */
+  height69UpperCase: number;
+
+  /** 高度7_9#_高度检测 */
+  height79HeightCheck: number;
+
+  /** 压力7_9#_激光 */
+  pressure79Laser: number;
+
+  /** 高度8_9#_激光 */
+  height89Laser: number;
+
+  /** 数値1_9#_DCR(上) */
+  value19DcrUpper: number;
+
+  /** 数値2_9#_DCR(下) */
+  value29DcrLower: number;
+
+  /** 数値3_9#_LCR(上)LS */
+  value39LcrUpperLs: number;
+
+  /** 数値4_9#_LCR(下)Q */
+  value49LcrLowerQ: number;
+
+  /** 数値5_9#_LCR(下)LS */
+  value59LcrLowerLs: number;
+
+  /** 数値6_9#_LCR(下)Q */
+  value69LcrLowerQ: number;
+
+  /** 数値7_9#_IR R */
+  value79IrR: number;
+
+  /** 数値8_9#_IR I */
+  value89IrI: number;
+
+  /** 创建时间 (ISO 8601) */
+  createTime: string;
+}
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, onBeforeUnmount, reactive, nextTick } from 'vue';
 import { useRealTime } from '@/utils/dateUtils';
 import { checkOrderNumberApi, addProcessInfoApi } from '@/api/detect';
 import type { Rule } from 'ant-design-vue/es/form';
+import { message } from 'ant-design-vue';

 // 检测设备表单规则
 const rules: Record<string, Rule[]> = {
@@ -44,23 +45,9 @@ const detectFormRef = ref();
 const packageFormRef = ref();

 // 执行结果日志
-const executionLogs = ref([
-  '14:25:32 - 开始检测流程 SN-A538-09-2023-00018',
-  '14:25:33 - 读取产品参数完成',
-  '14:25:36 - 尺寸检测: 通过 (0.15mm)',
-  '14:25:36 - 电压检测: 通过 (3.25V)',
-  '14:25:37 - 精度检测: 通过 (98.7%)',
-  '14:25:38 - 检测结果: 合格'
-]);
+const executionLogs = ref<string[]>([]);

-const packageLogs = ref([
-  '14:25:45 - 包装流程: SN-A538-09-2023-00018',
-  '14:25:46 - 读取产品标签完成',
-  '14:25:49 - 包装材料准备完成',
-  '14:25:52 - 产品包装完成',
-  '14:25:53 - 更新库存: 已包装 (18/25)',
-  '14:25:54 - 包装结果: 正常'
-]);
+const packageLogs = ref<string[]>([]);

 // 滚动到检测设备日志底部的函数
 const scrollToExecutionBottom = () => {
@@ -262,6 +249,7 @@ const saveDetectingEdit = () => {
      fixtureCode: detectForm.fixtureCode
    }).then(res => {
      console.log(res)
+      message.success('保存成功');
    })
  }).catch(() => {
    console.log('检测设备表单验证失败');
@@ -350,6 +338,9 @@ onBeforeUnmount(() => {
          :on-mes-event="handleMESEvent"
          :on-sse-message="handleSseMessage"
        />
+
+        <!-- LMS 状态 -->
+        <LmsStatus />
      </div>
      <SettingsModal />
      <!-- <div class="right-info" @click="showSettings">
@@ -569,7 +560,7 @@ onBeforeUnmount(() => {
 </template>

 <style scoped lang="scss">
-@import '@/assets/styles/_variables.scss';
+@use "@/assets/styles/variables" as *;

 .hmi-container {
  width: 100vw;