新增计算表格列宽方法

表格改为列宽自适应

package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "rd_mes_front_hmi",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rd_mes_front_hmi",
-      "version": "0.0.0",
+      "version": "0.0.1",
       "dependencies": {
         "ant-design-vue": "^4.2.6",
         "axios": "^1.10.0",
+        "file-saver": "^2.0.5",
         "pinia": "^3.0.3",
         "unplugin-vue-components": "^28.7.0",
         "vue": "^3.5.13",
@@ -18,6 +19,7 @@
       "devDependencies": {
         "@iconify-json/lucide": "^1.2.66",
         "@types/event-source-polyfill": "^1.0.5",
+        "@types/file-saver": "^2.0.7",
         "@types/js-cookie": "^3.0.6",
         "@types/node": "^24.0.3",
         "@vitejs/plugin-vue": "^5.2.3",
@@ -935,6 +937,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/js-cookie": {
       "version": "3.0.6",
       "resolved": "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.6.tgz",
@@ -1644,6 +1653,12 @@
         }
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "ant-design-vue": "^4.2.6",
     "axios": "^1.10.0",
+    "file-saver": "^2.0.5",
     "pinia": "^3.0.3",
     "unplugin-vue-components": "^28.7.0",
     "vue": "^3.5.13",
@@ -19,6 +20,7 @@
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.66",
     "@types/event-source-polyfill": "^1.0.5",
+    "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^24.0.3",
     "@vitejs/plugin-vue": "^5.2.3",

src/api/common/model.d.ts

@@ -4,4 +4,5 @@ export interface ApiResponse<T = any> {
   data?: T;
   rows?: T[];
   total?: number;
+  token?: string;
 }

src/api/line1/data/index.ts

@@ -0,0 +1,30 @@
+import request from '@/api/request';
+import type { ExportParams, QueryParams } from "./model";
+
+// 获取 L1 数据
+export function getL1Data(params: QueryParams) {
+  return request({
+    url: "/jinghua/l1OneData/list",
+    method: "get",
+    params,
+  });
+}
+
+// 获取 报警记录 数据
+export function getAlarmRecords(params: QueryParams) {
+  return request({
+    url: '/jinghua/alarmRecord/list',
+    method: 'get',
+    params
+  })
+}
+
+// 导出数据
+export function exportData(data: ExportParams) {
+  return request({
+    url: "/jinghua/l1OneData/export",
+    method: "post",
+    data,
+    responseType: "blob",
+  });
+}

src/api/line1/data/model.d.ts

@@ -0,0 +1,14 @@
+export interface QueryParams {
+  pageNum?: number;
+  pageSize?: number;
+  orderByColumn?: string;
+  isAsc?: string;
+  qrCode?: string;
+  createTimeBegin?: string;
+  createTimeEnd?: string;
+}
+
+export interface ExportParams {
+  createTimeBegin?: string;
+  createTimeEnd?: string;
+}

src/api/line2/data/index.ts

@@ -1,4 +1,4 @@
-import request from '../request';
+import request from '@/api/request';
 import type { QueryParams } from './model';
 
 // 获取 L1 数据

src/api/request.ts

@@ -1,8 +1,8 @@
 import axios from 'axios';
 import router from '@/router';
-import { getToken } from '@/utils/auth';
+import { getToken, removeToken } from '@/utils/auth';
 import { Modal, notification } from 'ant-design-vue';
-import type { AxiosRequestConfig } from "axios";
+import type { AxiosInstance, AxiosRequestConfig } from "axios";
 import type { ApiResponse } from "@/api/common/model";
 
 const errCodeMap: { [key: string]: string } = {
@@ -12,7 +12,7 @@ const errCodeMap: { [key: string]: string } = {
 };
 
 // 创建axios实例
-const service = axios.create({
+const service: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
   timeout: 10000,
 });
@@ -37,33 +37,39 @@ service.interceptors.request.use(
 // 响应拦截器
 service.interceptors.response.use(
   response => {
-    // console.log(response);
+    if (response.config.responseType === "blob") {
+      return response.data;
+    }
+
     const code = response.data.code || 200;
     const data = response.data;
 
     switch (code) {
       case 200:
-        return data ?? response;
+        return data;
       case 401:
         Modal.error({
-          title: '系统提示',
+          title: "系统提示",
-          content: '登录状态已过期，请重新登录',
+          content: "登录状态已过期，请重新登录",
           onOk: () => {
-            router.push('/login')
+            removeToken();
-          }
+            router.replace('/login');
-        })
+          },
+        });
         return Promise.reject(data);
       default:
-        const errMsg = errCodeMap[code] || data.msg || errCodeMap['default'];
         notification.error({
-          message: '请求错误',
+          message: "请求错误",
-          description: errMsg,
+          description: errCodeMap[code] || data?.msg || errCodeMap.default,
         });
         return Promise.reject(data);
     }
   },
-  error => {
+  (error) => {
-    error.message = error.code === "ECONNABORTED" ? '请求超时，请稍后重试' : error.message;
+    error.message =
+      error.code === "ECONNABORTED"
+        ? "请求超时，请稍后重试"
+        : error.message || "网络异常";
 
     // 网络/服务器错误统一处理
     notification.error({
@@ -80,4 +86,3 @@ function request<T = any>(config: AxiosRequestConfig): Promise<ApiResponse<T>> {
 }
 
 export default request;
-// export default service;

src/components/LmsStatus/data.ts

@@ -0,0 +1,11 @@
+export const actions = {
+  'line2': [
+    { title: "L1 数据", path: "/line2/L1-data" },
+    { title: "L4 数据", path: "/line2/L4-data" },
+    { title: "报警记录", path: "/line2/alarm-records" },
+  ],
+  'line1': [
+    { title: "L1 数据", path: "/line1/L1-data" },
+    { title: "报警记录", path: "/line1/alarm-records" },
+  ],
+};

src/components/LmsStatus/index.vue

@@ -20,9 +20,7 @@
       </template>
     </a-row>
     <div class="actions">
-      <a-button size="large" @click="redirectTo('L1-data')">L1 数据</a-button>
+      <a-button v-for="act in actions[props.type as keyof typeof actions]" size="large" @click="redirectTo(act.path)">{{ act.title }}</a-button>
-      <a-button size="large" @click="redirectTo('L4-data')">L4 数据</a-button>
-      <a-button size="large" @click="redirectTo('alarm-records')">报警记录</a-button>
     </div>
   </a-modal>
 </template>
@@ -33,6 +31,14 @@ import { useRouter } from 'vue-router';
 import { useDialog } from '@/utils/useDialog';
 import { fetchLmsWorkMode, updateLmsWorkMode } from '@/api/lms';
 import { message } from 'ant-design-vue';
+import { actions } from './data';
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: true
+  }
+})
 
 // useDialog管理弹窗状态
 const { visible: dialogVisible, show, hide } = useDialog();
@@ -77,8 +83,8 @@ async function initLmsStatus() {
 
 
 const router = useRouter();
-function redirectTo(type: string) {
+function redirectTo(path: string) {
-  router.push(`/${type}`);
+  router.push(path);
 }
 
 // 初始化 LMS 状态

src/components/MesStatus/index.vue

@@ -19,6 +19,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useDialog } from '@/utils/useDialog';
+import { useUserStore } from '@/store';
+
+const userStore = useUserStore();
 
 // useDialog管理弹窗状态
 const { visible: dialogVisible, show, hide } = useDialog();
@@ -29,7 +32,7 @@ const modalTitle = ref('MES 登录状态');
 const modalItems = ref([
   { label: 'MES 服务器', value: '192.168.1.100:8080'},
   { label: '登录状态', value: mesStatus.value},
-  { label: '用户名', value: 'admin'},
+  { label: '用户名', value: userStore.username},
   { label: '连接时间', value: '2024-01-15 09:30:25'},
   { label: '最后活动', value: '2024-01-15 14:25:30'}
 ]);

src/components/SettingsModal/index.vue

@@ -11,13 +11,19 @@
         <a-col :span="16" class="modal-value">{{ item.value }}</a-col>
       </template>
     </a-row>
+    <div class="actions">
+      <a-button size="large" @click="handleLogout">退出登录</a-button>
+    </div>
   </a-modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { useDialog } from '@/utils/useDialog';
 import { useRealTime } from '@/utils/dateUtils';
+import { Modal } from 'ant-design-vue';
+import { removeToken } from '@/utils/auth';
 
 // 实时时间
 const { currentTime } = useRealTime('HH:mm:ss');
@@ -38,6 +44,21 @@ const modalItems = ref([
   { label: '内存使用', value: '2.1GB / 8GB' }
 ]);
 
+const router = useRouter();
+const handleLogout = () => {
+  Modal.confirm({
+    title: '提示',
+    content: '确认退出登录？',
+    onOk() {
+      removeToken();
+      return router.push(`/login`);
+    },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onCancel() {},
+  });
+  
+}
+
 defineExpose({
   show,
   hide
@@ -73,4 +94,15 @@ defineExpose({
     color: $text-light;
   }
 }
+
+.actions {
+  margin: 20px 0 10px;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+
+  .ant-btn {
+    flex: 1;
+  }
+}
 </style>

src/router/index.ts

@@ -1,41 +1,63 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import { getToken } from "@/utils/auth";
+
+const whiteList = ["/login"];
 
 const routes = [
-	{
+  {
-		path: '/',
+    path: "/",
-		name: 'Index',
+    name: "Index",
-		component: () => import('@/views/index.vue')
+    component: () => import("@/views/Line2/index.vue"),
-	},
+  },
-	{
+  {
-		path: '/lms',
+    path: "/lms",
-		name: 'Lms',
+    name: "Lms",
-		component: () => import('@/views/lms/index.vue')
+    component: () => import("@/views/Line1/index.vue"),
-	},
+  },
-	{
+  {
-		path: '/login',
+    path: "/login",
-		name: 'Login',
+    name: "Login",
-		component: () => import('@/views/login.vue')
+    component: () => import("@/views/login.vue"),
-	},
+  },
-	{
+  {
-		path: '/package-station',
+    path: "/package-station",
-		name: 'PackageStation',
+    name: "PackageStation",
-		component: () => import('@/views/package-station/index.vue')
+    component: () => import("@/views/package-station/index.vue"),
-	},
+  },
-	{
+  // 一号线
-		path: '/L1-data',
+  {
-		name: 'L1Data',
+    path: "/line1",
-		component: () => import('@/views/L1-data-list/index.vue')
+    name: "Line1",
-	},
+    children: [
-	{
+      {
-		path: '/L4-data',
+        path: "L1-data",
-		name: 'L4Data',
+        name: "Line1L1Data",
-		component: () => import('@/views/L4-data-list/index.vue')
+        component: () => import("@/views/Line1/L1-data-list/index.vue"),
-	},
+      },
-	{
+      {
-		path: '/alarm-records',
+        path: "alarm-records",
-		name: 'AlarmRecords',
+        name: "Line1AlarmRecords",
-		component: () => import('@/views/alarm-records/index.vue')
+        component: () => import("@/views/Line1/alarm-records/index.vue"),
-	}
+      },
+    ],
+  },
+  // 二号线
+  {
+    path: "/line2",
+    name: "Line2",
+    children: [
+      {
+        path: "L1-data",
+        name: "Line2L1Data",
+        component: () => import("@/views/Line2/L1-data-list/index.vue"),
+      },
+      {
+        path: "L4-data",
+        name: "Line2L4Data",
+        component: () => import("@/views/Line2/L4-data-list/index.vue"),
+      },
+    ],
+  },
 ];
 
 const router = createRouter({
@@ -43,4 +65,29 @@ const router = createRouter({
 	routes
 });
 
+router.beforeEach(async (to, from, next) => {
+  const token = getToken();
+  // 已登录，访问 login → 跳首页
+  if (token && to.path === "/login") {
+    return next("/lms");
+  }
+	
+  // 白名单放行
+	if (whiteList.includes(to.path)) {
+    return next();
+	}
+
+  // 未登录，访问受保护路由
+  if (!token) {
+    return next({
+      path: "/login",
+      query: { redirect: to.fullPath },
+    });
+  }
+
+  // 已登录，正常访问
+  next();
+});
+
+
 export default router;

src/store/auth.ts

@@ -0,0 +1,67 @@
+import Cookies from 'js-cookie';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useRoute, useRouter } from "vue-router";
+import { message } from 'ant-design-vue';
+
+import { useUserStore } from './user';
+import { login } from '@/api/system';
+import { TokenKey as TOKEN_KEY } from "@/utils/auth";
+import type { LoginInfo } from '@/api/system/model';
+
+export const useAuthStore = defineStore('auth', () => {
+  const route = useRoute();
+  const router = useRouter();
+  const userStore = useUserStore();
+
+  const loginLoading = ref(false);
+  const token = ref(Cookies.get(TOKEN_KEY) || null);
+
+  function setToken(newToken: string) {
+    token.value = newToken;
+    Cookies.set(TOKEN_KEY, newToken);
+  }
+
+  function clearToken() {
+    token.value = null;
+    Cookies.remove(TOKEN_KEY);
+  }
+
+  async function authLogin(params: LoginInfo) {
+    try {
+      loginLoading.value = true;
+      const res = await login(params);
+      if (res.code === 200) {
+        setToken(res.token as string);
+        await userStore.fetchUserInfo();
+        message.success('登录成功');
+        const redirect = route.query.redirect || "/lms";
+        router.replace(redirect as string);
+        return res;
+      } else {
+        // 抛出错误，让调用方处理
+        throw new Error(res.msg || '登录失败');
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      loginLoading.value = false;
+    }
+  }
+
+  async function logout() {
+    // 在实际应用中，这里可以调用后端的退出登录接口
+    // await doLogoutApi(); 
+    clearToken();
+    userStore.clearUserInfo();
+    await router.push('/login');
+    message.success('已成功退出');
+  }
+
+  return {
+    token,
+    loginLoading,
+    authLogin,
+    logout,
+  };
+});

src/store/index.ts

@@ -0,0 +1,2 @@
+export * from './auth';
+export * from './user';

src/store/user.ts

@@ -1,30 +1,22 @@
 import { defineStore } from 'pinia';
+import Cookies from 'js-cookie';
 
-export interface UserInfo {
+const USERNAME_KEY = 'username';
-  username: string;
-  [key: string]: any;
-}
 
 export const useUserStore = defineStore('user', {
   state: () => ({
-    token: localStorage.getItem('token') || '',
+    username: Cookies.get(USERNAME_KEY) || null,
-    userInfo: null as UserInfo | null,
   }),
-  getters: {
-    isLogin: (state) => !!state.token,
-  },
   actions: {
-    setToken(token: string) {
+    async fetchUserInfo() {
-      this.token = token;
+      // Simulate API call
-      localStorage.setItem('token', token);
+      const fetchedUsername = 'mock_user'; 
+      this.username = fetchedUsername;
+      Cookies.set(USERNAME_KEY, fetchedUsername);
     },
-    setUserInfo(userInfo: UserInfo) {
+    clearUserInfo() {
-      this.userInfo = userInfo;
+      this.username = null;
-    },
+      Cookies.remove(USERNAME_KEY);
-    reset() {
-      this.token = '';
-      this.userInfo = null;
-      localStorage.removeItem('token');
     },
   },
 });

src/types/sselog.ts

@@ -0,0 +1,6 @@
+interface sseLog {
+  code: number,
+  message: string,
+  data: any,
+  timestamp: number
+}

src/utils/auth.ts

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie';
 
-const TokenKey = 'Admin-Token'
+export const TokenKey = 'Admin-Token'
 
 export function getToken() {
   return Cookies.get(TokenKey)

src/utils/download.ts

@@ -0,0 +1,17 @@
+import { saveAs } from "file-saver";
+
+export async function download(data: Blob, fileName: string) {
+  // 1️⃣ 后端返回的是错误 JSON
+  if (data.type.includes("application/json")) {
+    const text = await data.text();
+    const err = JSON.parse(text);
+    throw new Error(err.msg || "导出失败");
+  }
+
+  // 2️⃣ 正常下载
+  const blob = new Blob([data], {
+    type: data.type || "application/octet-stream",
+  });
+
+  saveAs(blob, fileName);
+}

src/utils/table.ts

@@ -0,0 +1,32 @@
+/**
+ * 计算字符串“字数”
+ * 中文 / 全角字符：1
+ * 英文 / 数字 / 半角符号：0.5
+ */
+export function calcTextLength(text: string): number {
+  let length = 0;
+
+  for (const char of text) {
+    // charCode > 255 基本可以认为是中文或全角字符
+    if (char.charCodeAt(0) > 255) {
+      length += 1;
+    } else {
+      length += 0.5;
+    }
+  }
+
+  return length;
+}
+
+/**
+ * 根据文本计算列宽
+ */
+export function calcColumnWidth(
+  text: string,
+  unitWidth = 24,
+  minWidth = 50,
+  maxWidth = 150
+) {
+  const width = calcTextLength(text) * unitWidth;
+  return Math.min(Math.max(width, minWidth), maxWidth);
+}

src/views/Line1/L1-data-list/data.ts

@@ -0,0 +1,54 @@
+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> = {
+  flag: "标志位",
+  processFlag: "加工标志",
+  qualifiedFlag: "良品标志",
+  barcode: "二维码",
+  pressure1: "压力1",
+  height1: "高度1",
+  value19Dcr: "数値19#Dcr",
+  value39LcrLs: "数値39#LcrLs",
+  value49LcrQ: "数値49#LcrQ",
+  value79IrR: "数値79#IrR",
+  value89IrI: "数値89#IrI",
+  skeletonCcdCheck: "骨架Ccd检查结果",
+  assemblyCcdCheck: "组立Ccd检查结果",
+  reserve1: "补充字段1",
+  reserve2: "补充字段2",
+  recordTime: "记录数据的时间",
+  createTime: "创建时间",
+  createBy: "创建人",
+  updateTime: "修改时间",
+  updateBy: "修改人",
+} as const;
+
+// 导出完整的列配置
+export const columns: TableColumnsType = [
+  INDEX_COLUMN,
+  ...Object.entries(fields).map(([key, title]) => ({
+    key,
+    title,
+    ellipsis: true,
+  })),
+  ACTION_COLUMN,
+];

src/views/Line1/L1-data-list/index.vue

@@ -0,0 +1,267 @@
+<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" 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-button @click="handleExport">
+              <template #icon>
+                <i-lucide-save />
+              </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" table-layout="fixed" :scroll="{ x: 'max-content'}">
+        <template #bodyCell="{ column, record, index }">
+          <template v-if="column.key === 'index'">{{ index + 1 }}</template>
+          <template v-else-if="['createTime', 'updateTime', 'recordTime'].includes(column.key as string)">
+            <span>{{ formatDateTime(record[column.key as string]) }}</span>
+          </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="['createTime', 'updateTime', 'recordTime'].includes(key)">
+            <span>{{ formatDateTime(value) }}</span>
+          </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, exportData } from "@/api/line1/data";
+import type { QueryParams } from "@/api/line1/data/model";
+import type { L1Data } from "./types";
+import type { Dayjs } from "dayjs";
+import { download } from "@/utils/download";
+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 handleExport = async () => {
+  try {
+    let params = {}
+    if (formData.dateRange && formData.dateRange.length === 2) { 
+      params = {
+        createTimeBegin : formData.dateRange[0].format("YYYY-MM-DD HH:mm:ss"),
+        createTimeEnd : formData.dateRange[1].format("YYYY-MM-DD HH:mm:ss"),
+      }
+    }
+    const blob = await exportData(params)
+
+    download(blob as any, "导出数据.xlsx")
+    
+    message.success("导出成功")
+  } catch (err: any) {
+    message.error(err.message)
+  }
+};
+
+// 表格变化处理（分页、排序等）
+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">
+.l1-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;
+}
+
+.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>

src/views/Line1/L1-data-list/types.ts

@@ -0,0 +1,67 @@
+export interface L1Data {
+  /** 主键 */
+  id: number;
+
+  /** 标志位 */
+  flag: number;
+
+  /** 加工标志 */
+  processFlag: number;
+
+  /** 良品标志 */
+  qualifiedFlag: number;
+
+  /** 二维码 */
+  barcode: string;
+
+  /** 压力1 */
+  pressure1: number;
+
+  /** 高度1 */
+  height1: number;
+
+  /** 数値19#DCR */
+  value19Dcr: number;
+
+  /** 数値39#LCR LS */
+  value39LcrLs: number;
+
+  /** 数値49#LCR Q */
+  value49LcrQ: number;
+
+  /** 数値79#IR R */
+  value79IrR: number;
+
+  /** 数値89#IR I */
+  value89IrI: number;
+
+  /** 骨架CCD检查结果 */
+  skeletonCcdCheck: number;
+
+  /** 组立CCD检查结果 */
+  assemblyCcdCheck: number;
+
+  /** 补充字段1 */
+  reserve1: string;
+
+  /** 补充字段2 */
+  reserve2: string;
+
+  /** 记录数据的时间 */
+  recordTime: string;
+
+  /** 逻辑删除 */
+  DelFlag: number;
+
+  /** 创建时间 */
+  createTime: string;
+
+  /** 创建人 */
+  createBy: string;
+
+  /** 修改时间 */
+  updateTime: string;
+
+  /** 修改人 */
+  updateBy: string;
+}

src/views/Line1/alarm-records/index.vue

@@ -33,7 +33,7 @@
     <!-- 数据表格 -->
     <div class="table-section">
       <a-table :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination"
-        @change="handleTableChange" row-key="alarmId" size="middle" :scroll="{ x: 1200 }">
+        @change="handleTableChange" row-key="alarmId" size="middle" :scroll="{ x: 'max-content'}">
         <template #bodyCell="{ column, record, index }">
           <template v-if="column.key === 'index'">{{ index + 1 }}</template>
           <template v-else-if="['alarmDatetime', 'updateTime', 'createTime'].includes(column.key as string)">
@@ -73,8 +73,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { message } from "ant-design-vue";
-import { getAlarmRecords } from "@/api/data";
+import { getAlarmRecords } from "@/api/line1/data";
-import type { QueryParams } from "@/api/data/model";
+import type { QueryParams } from "@/api/line1/data/model";
 import type { AlarmRecord } from "./types";
 import type { Dayjs } from "dayjs";
 import { columns } from "./data";

src/views/Line1/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, reactive, nextTick } from 'vue';
+import { ref, onMounted, reactive } from 'vue';
 import { useRealTime } from '@/utils/dateUtils';
 import { checkOrderNumberApi, addProcessInfoApi } from '@/api/detect';
 import type { Rule } from 'ant-design-vue/es/form';
@@ -140,7 +140,7 @@ const handlePackagePass = () => {
 // SSE事件处理函数
 const handleL1Event = (data: any) => {
   // L1_EVENT放到自动包装日志区
-  addPackageLog(`L1事件: ${data.message}`);
+  addDetectionLog(`L1事件: ${data.message}`);
 };
 
 const handleL4Event = (data: any) => {
@@ -280,11 +280,6 @@ onMounted(() => {
 
   // SSE连接逻辑已迁移到SseStatus组件中
 });
-
-// 清理事件监听
-onBeforeUnmount(() => {
-  // SSE断开连接逻辑已迁移到SseStatus组件中
-});
 </script>
 
 <template>
@@ -314,7 +309,7 @@ onBeforeUnmount(() => {
           :on-sse-message="handleSseMessage" />
 
         <!-- LMS 状态 -->
-        <LmsStatus />
+        <LmsStatus type="line1" />
       </div>
       <SettingsModal />
       <!-- <div class="right-info" @click="showSettings">
@@ -499,7 +494,7 @@ onBeforeUnmount(() => {
             </a-col>
           </a-row>
         </a-form>
-        <ExecutionResult title="执行结果" :logs="packageLogs" @clear="clearPackageLogs" />
+        <ExecutionResult title="报警信息" :logs="packageLogs" @clear="clearPackageLogs" />
       </div>
     </div>
 

src/views/Line2/L1-data-list/index.vue

@@ -33,7 +33,7 @@
     <!-- 数据表格 -->
     <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 }">
+        @change="handleTableChange" row-key="id" size="middle" :scroll="{ x: 'max-content'}">
         <template #bodyCell="{ column, record, index }">
           <template v-if="column.key === 'index'">{{ index + 1 }}</template>
           <template v-else-if="column.key === 'createTime'">
@@ -126,8 +126,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { message } from "ant-design-vue";
-import { getL1Data } from "@/api/data";
+import { getL1Data } from "@/api/line2/data";
-import type { QueryParams } from "@/api/data/model";
+import type { QueryParams } from "@/api/line2/data/model";
 import type { L1Data } from "./types";
 import type { Dayjs } from "dayjs";
 import { columns } from "./data";

src/views/Line2/L4-data-list/index.vue

@@ -33,7 +33,7 @@
     <!-- 数据表格 -->
     <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 }">
+        @change="handleTableChange" row-key="id" size="middle" :scroll="{ x: 'max-content'}">
         <template #bodyCell="{ column, record, index }">
           <template v-if="column.key === 'index'">{{ index + 1 }}</template>
           <template v-if="column.key === 'createTime'">
@@ -133,12 +133,11 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue';
 import { message } from 'ant-design-vue';
-import { getL4Data } from '@/api/data';
+import { getL4Data } from '@/api/line2/data';
 import { columns } from './data';
-import type { QueryParams } from '@/api/data/model';
+import type { QueryParams } from '@/api/line2/data/model';
 import type { L4Data } from './types';
 import type { Dayjs } from 'dayjs';
-import { idText } from 'typescript';
 
 type DateRangeType = [Dayjs, Dayjs] | undefined;
 

src/views/Line2/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, reactive, nextTick } from 'vue';
+import { ref, onMounted, reactive } from 'vue';
 import { useRealTime } from '@/utils/dateUtils';
 import { checkOrderNumberApi, addProcessInfoApi } from '@/api/detect';
 import type { Rule } from 'ant-design-vue/es/form';
@@ -276,13 +276,6 @@ onMounted(() => {
   // 设置当前日期
   const now = new Date();
   currentDate.value = `${now.getFullYear()}年${String(now.getMonth() + 1).padStart(2, '0')}月${String(now.getDate()).padStart(2, '0')}日`;
-
-  // SSE连接逻辑已迁移到SseStatus组件中
-});
-
-// 清理事件监听
-onBeforeUnmount(() => {
-  // SSE断开连接逻辑已迁移到SseStatus组件中
 });
 </script>
 
@@ -317,7 +310,7 @@ onBeforeUnmount(() => {
         />
 
         <!-- LMS 状态 -->
-        <LmsStatus />
+        <LmsStatus type="line2" />
       </div>
       <SettingsModal />
       <!-- <div class="right-info" @click="showSettings">

src/views/login.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
-import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
-import { login, getCaptcha } from '@/api/system'
+import { getCaptcha } from '@/api/system'
 import type { LoginInfo } from '@/api/system/model'
-import type { Rule } from 'ant-design-vue/es/form';
+import type { Rule } from 'ant-design-vue/es/form'
-import { setToken } from '@/utils/auth';
+import { useAuthStore } from '@/store'
+import { storeToRefs } from 'pinia'
 
-const router = useRouter()
+const authStore = useAuthStore()
+const { loginLoading } = storeToRefs(authStore)
 
 // 表单数据
 const formData = reactive<LoginInfo>({
@@ -19,11 +20,11 @@ const formData = reactive<LoginInfo>({
 
 // 验证码图片
 const captchaImg = ref('')
-const loading = ref(false)
 const captchaLoading = ref(false)
+const loadCaptchaFail = ref(false)
 
 // 表单验证规则
-const rules: Record<string, Rule[]> = {
+const rules: Record<string, Rule[]> = reactive({
   username: [
     { required: true, message: '请输入用户名', trigger: 'change' }
   ],
@@ -33,13 +34,15 @@ const rules: Record<string, Rule[]> = {
   code: [
     { required: true, message: '请输入验证码', trigger: 'change' }
   ]
-}
+})
 
 // 获取验证码
 const refreshCaptcha = async () => {
   try {
+    captchaImg.value = ''
     captchaLoading.value = true
     await getCaptcha().then((res: any) => {
+      loadCaptchaFail.value = false;
       if (res.captchaOnOff) {
         captchaImg.value = "data:image/gif;base64," + res.img
         rules.code[0].required = true;
@@ -49,7 +52,8 @@ const refreshCaptcha = async () => {
       formData.uuid = res.uuid
       formData.code = '' // 清空验证码输入
     })
-  } catch (error) {
+  } catch (error: any) {
+    loadCaptchaFail.value = true;
     message.error('获取验证码失败')
     console.error('获取验证码失败:', error)
   } finally {
@@ -60,27 +64,10 @@ const refreshCaptcha = async () => {
 // 登录处理
 const handleLogin = async () => {
   try {
-    loading.value = true
+    await authStore.authLogin(formData);
-    await login(formData).then(async (res: any) => {
-      if (res.code === 200) {
-        message.success('登录成功')
-        setToken(res.token)
-        // 可以在这里保存用户信息到store
-        // 跳转到主页
-        router.push('/')
-      } else {
-        message.error(res.msg || '登录失败')
-        // 登录失败后重新获取验证码
-        await refreshCaptcha()
-      }
-    }) 
   } catch (error: any) {
-    message.error(error.message || error.msg || '登录失败，请检查网络连接')
+    message.error(error.message || '登录失败');
-    console.error('登录失败:', error)
+    await refreshCaptcha();
-    // 登录失败后重新获取验证码
-    await refreshCaptcha()
-  } finally {
-    loading.value = false
   }
 }
 
@@ -158,9 +145,12 @@ refreshCaptcha()
                 alt="验证码"
                 class="captcha-image"
               />
-              <div v-else class="captcha-loading">
+              <div v-else-if="captchaLoading" class="captcha-loading">
                 <i-lucide-loader class="loading-icon" />
               </div>
+              <div v-else-if="!captchaLoading && loadCaptchaFail" class="captcha-loading">
+                获取失败
+              </div>
               <div class="captcha-refresh-hint">
                 <i-lucide-refresh-cw class="refresh-icon" />
                 点击刷新
@@ -175,11 +165,11 @@ refreshCaptcha()
             type="primary"
             html-type="submit"
             size="large"
-            :loading="loading"
+            :loading="loginLoading"
             class="login-button"
             block
           >
-            {{ loading ? '登录中...' : '登录' }}
+            {{ loginLoading ? '登录中...' : '登录' }}
           </a-button>
         </a-form-item>
       </a-form>