feat: 标题栏、底部栏、表格初始化

2 months ago · 655c1b84d8
parent 05b35e1046
commit 655c1b84d8
61 changed files with 1938 additions and 865 deletions
--- a/mock/deviceStatus.ts
+++ b/mock/deviceStatus.ts
@ -0,0 +1,32 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-03-07 14:57:20
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-03-07 15:10:10
+ * @FilePath: \5G-Loading-Bay-Web\mock\deviceStatus.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { MockMethod } from "vite-plugin-mock";
+import { deviceStatusListData } from "./pools/deviceStatusData";
+import { fetchCurrPageByList } from "./utils/apiMock";
+
+export default [
+  {
+    url: "/api/getDeviceStatusList",
+    method: "post",
+    response: req => {
+      const { page, pageSize } = req.body;
+      // console.log(req);
+      return {
+        ...fetchCurrPageByList({
+          ...deviceStatusListData,
+          data: {
+            ...deviceStatusListData.data,
+            page,
+            pageSize: pageSize || 10
+          }
+        })
+      };
+    }
+  }
+] as MockMethod[];
--- a/mock/pools/deviceStatusData.ts
+++ b/mock/pools/deviceStatusData.ts
@ -0,0 +1,58 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-02-22 13:38:04
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-03-07 15:07:28
+ * @FilePath: \General-AI-Platform-Web-Client\mock\pools\deviceStatusData.ts
+ * @Description: 设备状态数据
+ */
+import { generateRandomDateTimeByYear } from "../utils/mockMoment";
+function fetchList(): Record<string, any>[] {
+  const currList: Record<string, any>[] = [];
+  const nameArr = [
+    "摄像模组表面缺陷检测设备",
+    "镜片表面缺陷检测设备",
+    "中板表面缺陷检测设备",
+    "Logo表面缺陷检测设备",
+    "手机电池表面缺陷检测设备",
+    "部件表面缺陷检测设备",
+    "边距缺陷检测设备",
+    "成品组装缺陷检测设备",
+    "金属工件表面缺陷检测设备",
+    "管材表面缺陷检测设备"
+  ];
+
+  const codeArr = ["MSRF", "RL0F", "TLOC", "E1AIS", "CRM"];
+  const deviceGroupArr = ["立杆", "东西货区", "送料区"];
+
+  for (let i = 0; i < 35; i++) {
+    currList.push({
+      id: i,
+      createTime: generateRandomDateTimeByYear(2023),
+      updateTime: "2023-10-17T02:35:41.14308Z",
+      name: nameArr[Math.floor(Math.random() * 3)],
+      code: codeArr[Math.floor(Math.random() * 4)] + "-" + i,
+      deviceGroup:
+      deviceGroupArr[Math.floor(Math.random() * 3)] +
+      (Math.floor(Math.random() * 3) + 1),
+      status: Math.floor(Math.random() * 6) + 1,
+      remark: ""
+    });
+  }
+  return currList;
+}
+
+// 缺陷从EXL里选几个就好了
+// 告警代码MSRF-0 RL0F HTFIF-02 TLOC-1 E1AIS-05
+// 设备组：核心检测组001 无尘总装组005 送料监测线02
+
+const currentData = fetchList();
+
+export const deviceStatusListData = {
+  data: {
+    list: currentData,
+    total: currentData.length,
+    page: 1,
+    pageSize: 10
+  }
+};
--- a/mock/typing.ts
+++ b/mock/typing.ts
@ -0,0 +1,17 @@
+/**成功返回数据结构 */
+export interface successMockApiProps {
+  code: number; // 0 成功
+  success: boolean; // true 成功
+  data: any; // mock业务层数据
+  msg: string | undefined; // 成功提示
+  isMock: boolean; // true 标识当前是模拟数据
+}
+
+/**失败返回数据结构 */
+export interface failMockApiProps {
+  code?: number; // 7 失败
+  success: boolean; // false 失败
+  data: any; // mock业务层数据
+  msg: string | undefined; // 成功提示
+  isMock: boolean; // true 标识当前是模拟数据
+}
--- a/mock/utils/apiMock.ts
+++ b/mock/utils/apiMock.ts
@ -0,0 +1,51 @@
+import { failMockApiProps, successMockApiProps } from "../typing";
+export function fetchMockSuccessFullByOther({
+  data,
+  msg
+}): successMockApiProps {
+  // return {
+  //   code: 0, // 0 成功
+  //   success: true, // true 成功
+  //   data: data || null, // mock业务层数据
+  //   msg: msg | "ok", // 成功提示
+  //   isMock: true // true 标识当前是模拟数据
+  // } as successMockApiProps;
+  const result: successMockApiProps = {
+    code: 0, // 0 成功
+    success: true, // true 成功
+    data: data || null, // mock业务层数据
+    msg: msg as string | "ok", // 成功提示
+    isMock: true // true 标识当前是模拟数据
+  };
+  return result;
+}
+
+export function fetchMockFailFullByOther({ data, msg }): failMockApiProps {
+  // return {
+  //   code: 599, // 0 成功
+  //   success: true, // true 成功
+  //   data: data || null, // mock业务层数据
+  //   msg: msg | "fail", // 成功提示
+  //   isMock: true // true 标识当前是模拟数据
+  // } as failMockApiProps;
+  const result: failMockApiProps = {
+    code: 599, // 0 成功
+    success: false, // true 成功
+    data: data || null, // mock业务层数据
+    msg: msg as string | "fail", // 成功提示
+    isMock: true // true 标识当前是模拟数据
+  };
+  return result;
+}
+
+// 分页展示
+export function fetchCurrPageByList({ data }): successMockApiProps {
+  // console.log("fetchCurrPageByList_data", data);
+  const { page, pageSize } = data;
+  const prevPage = page - 1;
+  const currPageData = {
+    ...data,
+    list: data.list.slice(prevPage * pageSize, page * pageSize)
+  };
+  return fetchMockSuccessFullByOther({ data: currPageData });
+}
--- a/mock/utils/mockMoment.ts
+++ b/mock/utils/mockMoment.ts
@ -0,0 +1,38 @@
+export function generateRandomDateTimeByYear(year) {
+  // 生成随机月份（1-12）
+  const month = Math.floor(Math.random() * 12) + 1;
+
+  // 生成随机日期（1-31）
+  const day = Math.floor(Math.random() * 31) + 1;
+
+  // 生成随机小时（0-23）
+  const hour = Math.floor(Math.random() * 24);
+
+  // 生成随机分钟（0-59）
+  const minute = Math.floor(Math.random() * 60);
+
+  // 生成随机秒钟（0-59）
+  const second = Math.floor(Math.random() * 60);
+
+  // 返回随机日期和时间的字符串
+  return `${year}-${month < 10 ? "0" : ""}${month}-${
+    day < 10 ? "0" : ""
+  }${day} ${hour < 10 ? "0" : ""}${hour}:${minute < 10 ? "0" : ""}${minute}:${
+    second < 10 ? "0" : ""
+  }${second}`;
+}
+
+export function generateRandomMoment(date = new Date(), type = "HH:mm:ss") {
+  // 生成随机小时（0-23）
+  const hour = Math.floor(Math.random() * 24);
+
+  // 生成随机分钟（0-59）
+  const minute = Math.floor(Math.random() * 60);
+
+  // 生成随机秒钟（0-59）
+  const second = Math.floor(Math.random() * 60);
+  // 返回随机日期和时间的字符串
+  return `${hour < 10 ? "0" : ""}${hour}:${minute < 10 ? "0" : ""}${minute}:${
+    second < 10 ? "0" : ""
+  }${second}`;
+}
--- a/package.json
+++ b/package.json
@ -22,6 +22,7 @@
    "@tailwindcss/postcss": "^4.0.10",
    "@types/echarts": "^5.0.0",
    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
    "@vue/tsconfig": "^0.7.0",
    "autoprefixer": "^10.4.20",
    "cross-env": "^7.0.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -39,6 +39,9 @@ importers:
      '@vitejs/plugin-vue':
        specifier: ^5.2.1
        version: 5.2.1(vite@6.2.0(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.85.1)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^4.1.1
+        version: 4.1.1(vite@6.2.0(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.85.1)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
      '@vue/tsconfig':
        specifier: ^0.7.0
        version: 0.7.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
@ -82,6 +85,72 @@ packages:
    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
    engines: {node: '>=10'}

+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.26.8':
+    resolution: {integrity: sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.26.9':
+    resolution: {integrity: sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.26.9':
+    resolution: {integrity: sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.25.9':
+    resolution: {integrity: sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.26.5':
+    resolution: {integrity: sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.26.9':
+    resolution: {integrity: sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    resolution: {integrity: sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.25.9':
+    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.25.9':
+    resolution: {integrity: sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.26.5':
+    resolution: {integrity: sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.26.5':
+    resolution: {integrity: sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
+    resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/helper-string-parser@7.25.9':
    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
    engines: {node: '>=6.9.0'}
@ -90,11 +159,45 @@ packages:
    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
    engines: {node: '>=6.9.0'}

+  '@babel/helper-validator-option@7.25.9':
+    resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.26.9':
+    resolution: {integrity: sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/parser@7.26.9':
    resolution: {integrity: sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==}
    engines: {node: '>=6.0.0'}
    hasBin: true

+  '@babel/plugin-syntax-jsx@7.25.9':
+    resolution: {integrity: sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.25.9':
+    resolution: {integrity: sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.26.8':
+    resolution: {integrity: sha512-bME5J9AC8ChwA7aEPJ6zym3w7aObZULHhbNLU0bKUhKsAkylkzUdq+0kdymh9rzi8nlNFl2bmldFBCKNJBUpuw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/template@7.26.9':
+    resolution: {integrity: sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.26.9':
+    resolution: {integrity: sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==}
+    engines: {node: '>=6.9.0'}
+
  '@babel/types@7.26.9':
    resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
    engines: {node: '>=6.9.0'}
@ -602,6 +705,13 @@ packages:
  '@types/web-bluetooth@0.0.16':
    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}

+  '@vitejs/plugin-vue-jsx@4.1.1':
+    resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.0.0
+
  '@vitejs/plugin-vue@5.2.1':
    resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==}
    engines: {node: ^18.0.0 || >=20.0.0}
@ -618,6 +728,22 @@ packages:
  '@volar/typescript@2.4.11':
    resolution: {integrity: sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==}

+  '@vue/babel-helper-vue-transform-on@1.3.0':
+    resolution: {integrity: sha512-vrNyYNQcz1gfc87uuN+Z+On9fFOBQTYRlTUEDovpeCmjuwH83lAm6YM0VBvTx6eRTHg3SU5jP2CD+kSXY30PGg==}
+
+  '@vue/babel-plugin-jsx@1.3.0':
+    resolution: {integrity: sha512-ODZSs93FCxLMOiMFAGJXe7QMJp1tk8hkMbk84OcHOTVwYU2cFwFu1z7jjrRv44wCCfPNkflqn6hnexVprb+G7A==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@1.3.0':
+    resolution: {integrity: sha512-3SmusE11QKNKtnVfbsKegUEArpf1fXE85Dzi/Q6lvaz3MA3tmL8BXyq/vA7GJeZ183XeNpLIZHrHDdUh9V348A==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
  '@vue/compiler-core@3.5.13':
    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}

@ -802,6 +928,9 @@ packages:
    resolution: {integrity: sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==}
    engines: {node: '>= 0.10.0'}

+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
  copy-anything@3.0.5:
    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
    engines: {node: '>=12.13'}
@ -959,6 +1088,10 @@ packages:
  function-bind@1.1.2:
    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}

+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
  glob-parent@5.1.2:
    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
    engines: {node: '>= 6'}
@ -971,6 +1104,10 @@ packages:
    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
    hasBin: true

+  globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+
  graceful-fs@4.2.11:
    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}

@ -1030,9 +1167,22 @@ packages:
    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
    hasBin: true

+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
  js-tokens@9.0.1:
    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}

+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
  lightningcss-darwin-arm64@1.29.2:
    resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
    engines: {node: '>= 12.0.0'}
@ -1132,6 +1282,9 @@ packages:
  lru-cache@10.4.3:
    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}

+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
  magic-string@0.30.17:
    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}

@ -1370,6 +1523,10 @@ packages:
  scule@1.3.0:
    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}

+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
  shebang-command@2.0.0:
    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
    engines: {node: '>=8'}
@ -1605,6 +1762,9 @@ packages:
    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
    engines: {node: '>=12'}

+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
  yaml@2.7.0:
    resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
    engines: {node: '>= 14'}
@ -1617,14 +1777,171 @@ snapshots:

  '@alloc/quick-lru@5.2.0': {}

+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@babel/code-frame@7.26.2':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.26.8': {}
+
+  '@babel/core@7.26.9':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.9
+      '@babel/helper-compilation-targets': 7.26.5
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9)
+      '@babel/helpers': 7.26.9
+      '@babel/parser': 7.26.9
+      '@babel/template': 7.26.9
+      '@babel/traverse': 7.26.9
+      '@babel/types': 7.26.9
+      convert-source-map: 2.0.0
+      debug: 4.4.0
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.26.9':
+    dependencies:
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.25.9':
+    dependencies:
+      '@babel/types': 7.26.9
+
+  '@babel/helper-compilation-targets@7.26.5':
+    dependencies:
+      '@babel/compat-data': 7.26.8
+      '@babel/helper-validator-option': 7.25.9
+      browserslist: 4.24.4
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.26.9(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/helper-replace-supers': 7.26.5(@babel/core@7.26.9)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/traverse': 7.26.9
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.26.9
+      '@babel/types': 7.26.9
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.26.9
+      '@babel/types': 7.26.9
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.26.9
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.25.9':
+    dependencies:
+      '@babel/types': 7.26.9
+
+  '@babel/helper-plugin-utils@7.26.5': {}
+
+  '@babel/helper-replace-supers@7.26.5(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/traverse': 7.26.9
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.26.9
+      '@babel/types': 7.26.9
+    transitivePeerDependencies:
+      - supports-color
+
  '@babel/helper-string-parser@7.25.9': {}

  '@babel/helper-validator-identifier@7.25.9': {}

+  '@babel/helper-validator-option@7.25.9': {}
+
+  '@babel/helpers@7.26.9':
+    dependencies:
+      '@babel/template': 7.26.9
+      '@babel/types': 7.26.9
+
  '@babel/parser@7.26.9':
    dependencies:
      '@babel/types': 7.26.9

+  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/helper-plugin-utils': 7.26.5
+
+  '@babel/plugin-transform-typescript@7.26.8(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-create-class-features-plugin': 7.26.9(@babel/core@7.26.9)
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.9)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/template@7.26.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.9
+      '@babel/types': 7.26.9
+
+  '@babel/traverse@7.26.9':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.9
+      '@babel/parser': 7.26.9
+      '@babel/template': 7.26.9
+      '@babel/types': 7.26.9
+      debug: 4.4.0
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
  '@babel/types@7.26.9':
    dependencies:
      '@babel/helper-string-parser': 7.25.9
@ -1964,6 +2281,16 @@ snapshots:

  '@types/web-bluetooth@0.0.16': {}

+  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.2.0(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.85.1)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@babel/core': 7.26.9
+      '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
+      '@vue/babel-plugin-jsx': 1.3.0(@babel/core@7.26.9)
+      vite: 6.2.0(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.85.1)(yaml@2.7.0)
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - supports-color
+
  '@vitejs/plugin-vue@5.2.1(vite@6.2.0(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.85.1)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
    dependencies:
      vite: 6.2.0(jiti@2.4.2)(lightningcss@1.29.2)(sass@1.85.1)(yaml@2.7.0)
@ -1981,6 +2308,35 @@ snapshots:
      path-browserify: 1.0.1
      vscode-uri: 3.1.0

+  '@vue/babel-helper-vue-transform-on@1.3.0': {}
+
+  '@vue/babel-plugin-jsx@1.3.0(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.9)
+      '@babel/template': 7.26.9
+      '@babel/traverse': 7.26.9
+      '@babel/types': 7.26.9
+      '@vue/babel-helper-vue-transform-on': 1.3.0
+      '@vue/babel-plugin-resolve-type': 1.3.0(@babel/core@7.26.9)
+      '@vue/shared': 3.5.13
+    optionalDependencies:
+      '@babel/core': 7.26.9
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.3.0(@babel/core@7.26.9)':
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      '@babel/core': 7.26.9
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.26.5
+      '@babel/parser': 7.26.9
+      '@vue/compiler-sfc': 3.5.13
+    transitivePeerDependencies:
+      - supports-color
+
  '@vue/compiler-core@3.5.13':
    dependencies:
      '@babel/parser': 7.26.9
@ -2201,6 +2557,8 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  convert-source-map@2.0.0: {}
+
  copy-anything@3.0.5:
    dependencies:
      is-what: 4.1.16
@ -2371,6 +2729,8 @@ snapshots:

  function-bind@1.1.2: {}

+  gensync@1.0.0-beta.2: {}
+
  glob-parent@5.1.2:
    dependencies:
      is-glob: 4.0.3
@ -2388,6 +2748,8 @@ snapshots:
      package-json-from-dist: 1.0.1
      path-scurry: 1.11.1

+  globals@11.12.0: {}
+
  graceful-fs@4.2.11: {}

  hasown@2.0.2:
@ -2432,8 +2794,14 @@ snapshots:

  jiti@2.4.2: {}

+  js-tokens@4.0.0: {}
+
  js-tokens@9.0.1: {}

+  jsesc@3.1.0: {}
+
+  json5@2.2.3: {}
+
  lightningcss-darwin-arm64@1.29.2:
    optional: true

@ -2503,6 +2871,10 @@ snapshots:

  lru-cache@10.4.3: {}

+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
  magic-string@0.30.17:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.0
@ -2724,6 +3096,8 @@ snapshots:

  scule@1.3.0: {}

+  semver@6.3.1: {}
+
  shebang-command@2.0.0:
    dependencies:
      shebang-regex: 3.0.0
@ -2956,6 +3330,8 @@ snapshots:
      string-width: 5.1.2
      strip-ansi: 7.1.0

+  yallist@3.1.1: {}
+
  yaml@2.7.0: {}

  zrender@5.6.1:
--- a/src/App.vue
+++ b/src/App.vue
@ -137,7 +137,7 @@ html, body, #app {
    
    /* 大屏页面特殊处理 */
    .router-view-container {
-      background: #030409; /* 深色背景 */
+      background: #08104C; /* 深色背景 */
      color: #fff;
    }
  }
--- a/src/api/alarm.ts
+++ b/src/api/alarm.ts
@ -0,0 +1,2 @@
+
+
--- a/src/assets/common/bgAlarmTable.svg
+++ b/src/assets/common/bgAlarmTable.svg
@ -1,33 +0,0 @@
-<svg width="1859" height="767" viewBox="0 0 1859 767" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_iii_9388_53122)">
-<path d="M2 749.13V3H1842.77L1858 21.6778V749.13L1844.24 766H15.76L2 749.13Z" fill="#00183E" fill-opacity="0.9"/>
-</g>
-<path d="M2 749.13V3H1842.77L1858 21.6778V749.13L1844.24 766H15.76L2 749.13Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="1.5"/>
-<path d="M1833 12.88L1835.88 10L1845 19.12L1842.12 22L1833 12.88Z" fill="white"/>
-<path d="M1804 3H1842.86L1858 20.6882V50" stroke="#2ABAF0" stroke-width="2"/>
-<path d="M2 37V2H74" stroke="#2CCAFF" stroke-width="3"/>
-<defs>
-<filter id="filter0_iii_9388_53122" x="1.25" y="-1.75" width="1857.5" height="772.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9388_53122"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_9388_53122" result="effect2_innerShadow_9388_53122"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="effect2_innerShadow_9388_53122" result="effect3_innerShadow_9388_53122"/>
-</filter>
-</defs>
-</svg>
--- a/src/assets/common/bgFooter.svg
+++ b/src/assets/common/bgFooter.svg
--- a/src/assets/common/bgNav.svg
+++ b/src/assets/common/bgNav.svg
--- a/src/assets/common/bgTitle.svg
+++ b/src/assets/common/bgTitle.svg
@ -1,30 +0,0 @@
-<svg width="430" height="50" viewBox="0 0 430 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_8677_100865)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H448.786V50H0V0Z" fill="url(#paint0_linear_8677_100865)"/>
-<line y1="49.5" x2="8" y2="49.5" stroke="#3656C8"/>
-<line x1="10" y1="49.5" x2="18" y2="49.5" stroke="#3656C8" stroke-opacity="0.6"/>
-<line x1="20" y1="49.5" x2="28" y2="49.5" stroke="#3656C8" stroke-opacity="0.2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H448.786V2H0V0Z" fill="url(#paint1_linear_8677_100865)"/>
-<rect y="17" width="2" height="16" fill="#3656C8"/>
-</g>
-<path opacity="0.3" d="M402.464 49.0007H34L34.7086 50C35.042 49.9963 402.909 49.9364 402.874 49.9963L406 46.0029C406 45.9993 405.479 45 405.479 45L402.464 49.0007Z" fill="#3656C8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M202.476 49H227.524V50H202.476V49Z" fill="url(#paint2_linear_8677_100865)"/>
-<defs>
-<linearGradient id="paint0_linear_8677_100865" x1="0" y1="33.7505" x2="448.786" y2="33.7505" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3252C6" stop-opacity="0"/>
-<stop stop-color="#3252C6" stop-opacity="0.4"/>
-<stop offset="1" stop-color="#3252C6" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_8677_100865" x1="-2.08574e-06" y1="1.00164" x2="448.786" y2="1.00164" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3656C8"/>
-<stop offset="1" stop-color="#2994FC" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_8677_100865" x1="215" y1="49" x2="215" y2="50" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEF643"/>
-<stop offset="1" stop-color="#FFA217"/>
-</linearGradient>
-<clipPath id="clip0_8677_100865">
-<rect width="430" height="50" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/assets/common/dataScreenbg.png
+++ b/src/assets/common/dataScreenbg.png
--- a/src/assets/common/homeDefectBg.svg
+++ b/src/assets/common/homeDefectBg.svg
@ -1,64 +0,0 @@
-<svg width="433" height="605" viewBox="0 0 433 605" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_iii_8677_100884)">
-<path d="M2 587.13V2H416.766L432 20.6778V587.13L418.24 604H15.76L2 587.13Z" fill="#00183E" fill-opacity="0.9"/>
-</g>
-<path d="M2 587.13V2H416.766L432 20.6778V587.13L418.24 604H15.76L2 587.13Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="1.5"/>
-<path d="M413 27.88L415.88 25L425 34.12L422.12 37L413 27.88Z" fill="white"/>
-<path d="M378 2H416.86L432 19.6882V49" stroke="#2ABAF0" stroke-width="2"/>
-<g clip-path="url(#clip0_8677_100884)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H451.786V50H3V0Z" fill="url(#paint0_linear_8677_100884)"/>
-<line x1="3" y1="49.5" x2="11" y2="49.5" stroke="#3656C8"/>
-<line x1="13" y1="49.5" x2="21" y2="49.5" stroke="#3656C8" stroke-opacity="0.6"/>
-<line x1="23" y1="49.5" x2="31" y2="49.5" stroke="#3656C8" stroke-opacity="0.2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H451.786V2H3V0Z" fill="url(#paint1_linear_8677_100884)"/>
-<rect x="3" y="17" width="2" height="16" fill="#3656C8"/>
-</g>
-<path opacity="0.3" d="M405.464 49.0007H37L37.7086 50C38.042 49.9963 405.909 49.9364 405.874 49.9963L409 46.0029C409 45.9993 408.479 45 408.479 45L405.464 49.0007Z" fill="#3656C8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M205.476 49H230.524V50H205.476V49Z" fill="url(#paint2_linear_8677_100884)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M405.528 47H421.554L418.027 50H402L405.528 47Z" fill="url(#paint3_linear_8677_100884)"/>
-<path d="M2 37V2H74" stroke="#2CCAFF" stroke-width="3"/>
-<defs>
-<filter id="filter0_iii_8677_100884" x="1.25" y="-2.75" width="431.5" height="611.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_8677_100884"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_8677_100884" result="effect2_innerShadow_8677_100884"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="effect2_innerShadow_8677_100884" result="effect3_innerShadow_8677_100884"/>
-</filter>
-<linearGradient id="paint0_linear_8677_100884" x1="3" y1="33.7505" x2="451.786" y2="33.7505" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3252C6" stop-opacity="0"/>
-<stop stop-color="#3252C6" stop-opacity="0.4"/>
-<stop offset="1" stop-color="#3252C6" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_8677_100884" x1="3" y1="1.00164" x2="451.786" y2="1.00164" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3656C8"/>
-<stop offset="1" stop-color="#2994FC" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_8677_100884" x1="218" y1="49" x2="218" y2="50" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEF643"/>
-<stop offset="1" stop-color="#FFA217"/>
-</linearGradient>
-<linearGradient id="paint3_linear_8677_100884" x1="411.777" y1="47" x2="411.777" y2="50" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEF643"/>
-<stop offset="1" stop-color="#FFA217"/>
-</linearGradient>
-<clipPath id="clip0_8677_100884">
-<rect width="430" height="50" fill="white" transform="translate(3)"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/assets/common/homeSmallBg.svg
+++ b/src/assets/common/homeSmallBg.svg
@ -1,64 +0,0 @@
-<svg width="433" height="292" viewBox="0 0 433 292" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_iii_8677_100860)">
-<path d="M2 274.13V3H416.766L432 21.6778V274.13L418.24 291H15.76L2 274.13Z" fill="#00183E" fill-opacity="0.9"/>
-</g>
-<path d="M2 274.13V3H416.766L432 21.6778V274.13L418.24 291H15.76L2 274.13Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="1.5"/>
-<path d="M413 12.88L415.88 10L425 19.12L422.12 22L413 12.88Z" fill="white"/>
-<path d="M378 3H416.86L432 20.6882V50" stroke="#2ABAF0" stroke-width="2"/>
-<g clip-path="url(#clip0_8677_100860)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V51H3V1Z" fill="url(#paint0_linear_8677_100860)"/>
-<line x1="3" y1="50.5" x2="11" y2="50.5" stroke="#3656C8"/>
-<line x1="13" y1="50.5" x2="21" y2="50.5" stroke="#3656C8" stroke-opacity="0.6"/>
-<line x1="23" y1="50.5" x2="31" y2="50.5" stroke="#3656C8" stroke-opacity="0.2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V3H3V1Z" fill="url(#paint1_linear_8677_100860)"/>
-<rect x="3" y="18" width="2" height="16" fill="#3656C8"/>
-</g>
-<path opacity="0.3" d="M405.464 50.0007H37L37.7086 51C38.042 50.9963 405.909 50.9364 405.874 50.9963L409 47.0029C409 46.9993 408.479 46 408.479 46L405.464 50.0007Z" fill="#3656C8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M205.476 50H230.524V51H205.476V50Z" fill="url(#paint2_linear_8677_100860)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M405.528 48H421.554L418.027 51H402L405.528 48Z" fill="url(#paint3_linear_8677_100860)"/>
-<path d="M2 37V2H74" stroke="#2CCAFF" stroke-width="3"/>
-<defs>
-<filter id="filter0_iii_8677_100860" x="1.25" y="-1.75" width="431.5" height="297.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_8677_100860"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_8677_100860" result="effect2_innerShadow_8677_100860"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="effect2_innerShadow_8677_100860" result="effect3_innerShadow_8677_100860"/>
-</filter>
-<linearGradient id="paint0_linear_8677_100860" x1="3" y1="34.7505" x2="451.786" y2="34.7505" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3252C6" stop-opacity="0"/>
-<stop stop-color="#3252C6" stop-opacity="0.4"/>
-<stop offset="1" stop-color="#3252C6" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_8677_100860" x1="3" y1="2.00164" x2="451.786" y2="2.00164" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3656C8"/>
-<stop offset="1" stop-color="#2994FC" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_8677_100860" x1="218" y1="50" x2="218" y2="51" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEF643"/>
-<stop offset="1" stop-color="#FFA217"/>
-</linearGradient>
-<linearGradient id="paint3_linear_8677_100860" x1="411.777" y1="48" x2="411.777" y2="51" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEF643"/>
-<stop offset="1" stop-color="#FFA217"/>
-</linearGradient>
-<clipPath id="clip0_8677_100860">
-<rect width="430" height="50" fill="white" transform="translate(3 1)"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/assets/common/infoIcon.svg
+++ b/src/assets/common/infoIcon.svg
@ -1,27 +0,0 @@
-<svg width="42" height="34" viewBox="0 0 42 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_9562_48030)">
-<path d="M37.9737 32.8229H3.3414L0.651367 30.6782V24.4139L2.15286 23.2867L2.1779 10.4887L0.651367 9.26178V3.0673L3.3414 0.932617H37.9737L40.6512 3.0673V30.6782L37.9737 32.8229Z" fill="#009DFF" fill-opacity="0.1"/>
-</g>
-<path opacity="0.6" d="M38.3223 33H3.69003L1 30.848V24.562L2.50149 23.431L2.52654 10.589L1 9.35782V3.14202L3.69003 1H38.3223L40.9999 3.14202V30.848L38.3223 33Z" stroke="#27ACFF" stroke-width="0.58" stroke-miterlimit="10"/>
-<path d="M15 24V14C15 10.134 18.134 7 22 7C25.866 7 29 10.134 29 14V24M12 24H32H12Z" fill="#009DFF"/>
-<path d="M15 24V14C15 10.134 18.134 7 22 7C25.866 7 29 10.134 29 14V24M12 24H32" stroke="#009DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M22 27C23.3807 27 24.5 25.8807 24.5 24.5V24H19.5V24.5C19.5 25.8807 20.6193 27 22 27Z" fill="#009DFF" stroke="#009DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<filter id="filter0_ii_9562_48030" x="0.651367" y="-1.06738" width="40" height="35.8904" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0361115 0 0 0 0 0.4795 0 0 0 0 1 0 0 0 0.4 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_9562_48030"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-2"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0352941 0 0 0 0 0.478431 0 0 0 0 1 0 0 0 0.4 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_9562_48030" result="effect2_innerShadow_9562_48030"/>
-</filter>
-</defs>
-</svg>
--- a/src/assets/common/logo.svg
+++ b/src/assets/common/logo.svg
--- a/src/assets/common/subTitleIcon.svg
+++ b/src/assets/common/subTitleIcon.svg
@ -1,3 +0,0 @@
-<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 22V0H6.31579L12 11L6.31579 22H0Z" fill="#2DE6FF"/>
-</svg>
--- a/src/assets/common/tipIcon.svg
+++ b/src/assets/common/tipIcon.svg
@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 22C14.7614 22 17.2614 20.8807 19.0711 19.0711C20.8807 17.2614 22 14.7614 22 12C22 9.2386 20.8807 6.7386 19.0711 4.92893C17.2614 3.11929 14.7614 2 12 2C9.2386 2 6.7386 3.11929 4.92893 4.92893C3.11929 6.7386 2 9.2386 2 12C2 14.7614 3.11929 17.2614 4.92893 19.0711C6.7386 20.8807 9.2386 22 12 22Z" stroke="#FAAD14" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M12 14.3125V12.3125C13.6568 12.3125 15 10.9693 15 9.3125C15 7.65565 13.6568 6.3125 12 6.3125C10.3432 6.3125 9 7.65565 9 9.3125" stroke="#FAAD14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18.8125C12.6904 18.8125 13.25 18.2529 13.25 17.5625C13.25 16.8722 12.6904 16.3125 12 16.3125C11.3097 16.3125 10.75 16.8722 10.75 17.5625C10.75 18.2529 11.3097 18.8125 12 18.8125Z" fill="#FAAD14"/>
-</svg>
--- a/src/assets/common/title.svg
+++ b/src/assets/common/title.svg
@ -1,71 +0,0 @@
-<svg width="368" height="37" viewBox="0 0 368 37" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_9562_48043)">
-<path d="M359.521 11.6994C353.262 12.1634 346.859 12.4507 340.312 12.5611C339.538 12.5611 338.93 12.4175 338.487 12.1303C338.067 11.8431 337.857 11.4453 337.857 10.9371C337.857 10.2743 338.244 9.58933 339.018 8.88229C342.535 5.54591 345.377 2.58514 347.545 0H351.857C349.225 3.31429 346.262 6.46286 342.966 9.44571C347.058 9.42362 352.09 9.18057 358.062 8.71657L355.242 2.91657H358.758L364 13.224H360.284L359.521 11.6994ZM359.853 28.2046H338.023L339.25 18.4274C339.472 16.4168 340.555 15.4114 342.502 15.4114H358.36C360.13 15.4114 361.014 16.2069 361.014 17.7977C361.014 18.0629 361.003 18.2617 360.981 18.3943L359.853 28.2046ZM341.805 25.1554H356.668L357.498 18.328H342.668L341.805 25.1554Z" fill="url(#paint0_linear_9562_48043)"/>
-<path d="M316.856 28.7681H313.373L314.733 17.8309H302.955L303.32 14.6492H315.131L316.358 4.70637H305.609L305.974 1.65723H330.658L330.293 4.70637H319.809L318.581 14.6492H330.558L330.226 17.8309H318.183L316.856 28.7681ZM307.998 6.1978H311.15L312.245 13.1247H308.927L307.998 6.1978ZM325.25 13.1909H321.965L324.653 6.26408H327.937L325.25 13.1909Z" fill="url(#paint1_linear_9562_48043)"/>
-<path d="M295.623 26.0502C295.534 26.9561 295.291 27.6189 294.893 28.0387C294.495 28.4806 293.931 28.7016 293.201 28.7016C293.046 28.7016 292.792 28.6795 292.438 28.6353C291.089 28.4143 289.894 28.0829 288.855 27.641L289.319 24.4924C290.049 24.7797 290.967 25.078 292.073 25.3873L292.405 25.4536C292.537 25.4536 292.626 25.4204 292.67 25.3542C292.714 25.2658 292.758 25.1111 292.803 24.8902L295.656 0.463867H298.675L295.623 26.0502ZM271.669 0.894725L276.911 3.87758L276.513 7.09244L271.271 4.10958L271.669 0.894725ZM286.134 1.29244C286.997 1.29244 287.627 1.4692 288.025 1.82272C288.446 2.15415 288.656 2.71758 288.656 3.51301C288.656 3.77815 288.645 3.98806 288.622 4.14272L286.864 19.1564H284.276L286.101 3.97701H280.461L278.703 19.1564H276.082L277.906 3.94387C278.017 2.94958 278.293 2.26463 278.736 1.88901C279.178 1.4913 279.886 1.29244 280.859 1.29244H286.134ZM290.613 3.14844H293.466L291.243 21.4433H288.357L290.613 3.14844ZM283.414 14.3839C283.259 15.798 283.027 17.1016 282.717 18.2947C283.248 19.0681 284.066 20.3385 285.172 22.1062C285.637 22.8795 286.389 24.1942 287.428 26.0502L284.873 27.177C284.785 27.0223 284.685 26.8456 284.575 26.6467C284.486 26.4479 284.376 26.2269 284.243 25.9839C283.248 24.0837 282.407 22.537 281.722 21.3439C281.169 22.7138 280.505 23.9842 279.731 25.1553C278.957 26.3043 278.061 27.4532 277.044 28.6022L274.522 27.4422C276.336 25.6303 277.729 23.7633 278.703 21.841C279.786 19.7199 280.516 17.201 280.892 14.2844L281.821 5.79987H284.376L283.414 14.3839ZM269.944 7.7553L275.319 10.7713L274.954 14.0193L269.48 10.9702L269.944 7.7553ZM275.65 16.5382C274.965 18.814 274.29 20.913 273.627 22.8353C272.875 25.0227 272.178 26.8345 271.536 28.2707H268.285C270.055 24.0063 271.47 20.0955 272.532 16.5382H275.65Z" fill="url(#paint2_linear_9562_48043)"/>
-<path d="M240.55 15.047C239.643 16.7483 238.526 18.5049 237.199 20.3167L234.777 18.8916C237.387 15.4668 239.554 11.9868 241.279 8.45155H237.199L237.597 5.53498H241.744L242.407 0.0664062H245.493L244.829 5.53498H248.014L247.649 8.45155H244.464L244.332 9.61155C245.88 12.4397 247.063 14.8039 247.882 16.7041L245.46 18.0298L245.128 17.1018C244.597 15.6656 244.155 14.5498 243.801 13.7544L241.976 28.5693H238.891L240.55 15.047ZM265.664 11.9647L262.579 12.495L258.963 3.67898H254.152L249.341 12.6275L246.057 11.6664L251.697 1.95555C251.962 1.51364 252.25 1.20431 252.56 1.02755C252.869 0.828691 253.223 0.729263 253.621 0.729263H259.493C259.869 0.729263 260.234 0.828691 260.588 1.02755C260.964 1.22641 261.241 1.52469 261.418 1.92241L265.664 11.9647ZM251.564 9.18069H260.688L260.356 11.8984H251.232L251.564 9.18069ZM252.858 13.8538H255.711L257.304 22.9018C258.432 20.4051 259.571 17.4222 260.721 13.9533H263.939L261.749 19.7533C261.219 21.1453 260.478 22.935 259.527 25.1224H264.238L263.906 28.0058H245.161L245.493 25.1224H256.308L257.271 23.0013H254.351L252.858 13.8538ZM249.375 23.1007L247.815 13.9533H250.668L252.327 23.1007H249.375Z" fill="url(#paint3_linear_9562_48043)"/>
-<path d="M215.103 8.45185C212.802 8.84956 209.894 9.18099 206.377 9.44614C205.846 9.49033 205.382 9.42404 204.984 9.24728C204.586 9.07052 204.309 8.82747 204.154 8.51814C204.044 8.29718 203.988 8.07623 203.988 7.85528C203.988 7.36918 204.232 6.84995 204.718 6.29756C205.913 4.94975 207.439 2.92804 209.297 0.232422H212.979C212.227 1.42557 211.409 2.61871 210.524 3.81185C209.861 4.69566 209.12 5.59052 208.301 6.49642C210.602 6.34175 212.648 6.08766 214.439 5.73414L213.709 2.51928H216.562L218.42 10.0096H215.468L215.103 8.45185ZM230.696 5.03814C228.816 5.72309 226.139 6.3749 222.667 6.99356L222.468 8.94899C222.446 9.01528 222.435 9.10366 222.435 9.21414C222.435 9.63395 222.722 9.84385 223.297 9.84385H225.454C227.555 9.84385 229.501 9.40195 231.293 8.51814L230.862 11.7993C229.424 12.44 227.489 12.7604 225.056 12.7604H221.937C221.008 12.7604 220.322 12.5726 219.88 12.197C219.46 11.7993 219.25 11.2248 219.25 10.4736C219.25 10.2305 219.261 10.0317 219.283 9.87699L220.278 0.298707H223.364L222.966 4.17642C225 3.77871 227.688 3.06061 231.027 2.02214L230.696 5.03814ZM213.046 22.9021H206.576L205.979 28.6027H203.026L204.586 13.4233C204.696 12.4511 204.962 11.7551 205.382 11.3353C205.824 10.9155 206.51 10.7056 207.439 10.7056H214.505C216.12 10.7056 216.927 11.4347 216.927 12.893C216.927 13.1581 216.916 13.357 216.894 13.4896L215.799 25.7524C215.667 26.813 215.379 27.5642 214.937 28.0061C214.517 28.448 213.842 28.669 212.913 28.669C212.294 28.669 211.619 28.6138 210.889 28.5033C210.159 28.4149 209.606 28.2934 209.23 28.1387L209.463 25.3216C210.657 25.6309 211.542 25.7856 212.117 25.7856C212.382 25.7856 212.559 25.7303 212.648 25.6199C212.758 25.5094 212.836 25.2663 212.88 24.8907L213.046 22.9021ZM213.875 13.4896H207.572L207.339 15.5444H213.676L213.875 13.4896ZM229.501 19.3559C228.506 19.7094 227.245 20.0629 225.719 20.4164C223.972 20.8141 222.512 21.1124 221.34 21.3113L220.975 24.5924C220.864 25.1669 221.13 25.4541 221.771 25.4541H223.994C224.967 25.4541 225.996 25.3437 227.079 25.1227C228.185 24.8797 229.181 24.5372 230.065 24.0953L229.634 27.4096C228.904 27.7189 227.997 27.9619 226.914 28.1387C225.83 28.3155 224.724 28.4039 223.596 28.4039H220.444C219.515 28.4039 218.83 28.205 218.387 27.8073C217.967 27.4317 217.757 26.8682 217.757 26.117C217.757 25.8519 217.768 25.6419 217.79 25.4873L219.051 13.9536H222.136L221.638 18.3616C224.669 17.765 227.4 17.08 229.833 16.3067L229.501 19.3559ZM213.444 18.1959H207.074L206.842 20.2507H213.278L213.444 18.1959Z" fill="url(#paint4_linear_9562_48043)"/>
-<path d="M173.4 4.60697C173.046 4.60697 172.77 4.54069 172.571 4.40812C172.372 4.25345 172.272 4.05459 172.272 3.81154C172.272 3.63478 172.35 3.39173 172.504 3.0824L173.898 0.331543H177.116L176.353 2.02183H185.078L184.68 4.60697H180.765C180.655 5.24773 180.467 6.01002 180.201 6.89383H185.145L184.813 9.51212H179.306C181.097 10.4622 182.911 11.6222 184.747 12.9921L182.623 14.8481C181.274 13.8538 180.411 13.202 180.035 12.8927C179.261 12.3403 178.542 11.8542 177.879 11.4344C176.508 13.2462 174.716 14.8039 172.504 16.1075L169.983 14.2515C171.332 13.5003 172.471 12.7491 173.4 11.9978C174.329 11.2466 175.103 10.418 175.722 9.51212H170.879L171.21 6.89383H177.083C177.37 6.14259 177.58 5.38031 177.713 4.60697H173.4ZM196.723 13.887H185.211L186.439 4.0104C186.527 3.30335 186.792 2.75097 187.235 2.35326C187.677 1.95554 188.252 1.75669 188.96 1.75669H195.662C196.392 1.75669 196.978 2.01078 197.42 2.51897C197.862 3.00507 198.028 3.59059 197.918 4.27554L196.723 13.887ZM188.562 11.2355H194.036L194.766 4.40812H189.391L188.562 11.2355ZM193.372 28.5361H172.538L173.964 17.5327C174.053 16.8698 174.34 16.3285 174.827 15.9087C175.335 15.4889 175.944 15.279 176.651 15.279H192.244C192.974 15.279 193.549 15.4668 193.97 15.8424C194.39 16.218 194.6 16.7373 194.6 17.4001C194.6 17.6211 194.589 17.7868 194.567 17.8973L193.372 28.5361ZM191.349 18.063H177.05L176.718 20.5818H191.05L191.349 18.063ZM176.087 25.7521H190.486L190.751 23.2333H176.386L176.087 25.7521Z" fill="url(#paint5_linear_9562_48043)"/>
-<path d="M163.845 24.0617L163.513 27.1771H136.773L137.138 24.0617H147.92L150.176 5.76686H139.759L140.124 2.68457H163.812L163.447 5.76686H153.726L151.47 24.0617H163.845Z" fill="url(#paint6_linear_9562_48043)"/>
-<path d="M121.18 0.198975C120.892 2.45269 120.472 4.69536 119.919 6.92697C121.114 10.9925 122.717 14.6824 124.73 17.9967C126.743 21.2889 129.176 24.2938 132.029 27.0115L128.346 28.5361C126.311 26.4592 124.409 24.0066 122.64 21.1784C120.893 18.3502 119.422 15.3342 118.227 12.1304C115.617 18.6927 111.614 24.1834 106.217 28.6024L102.634 27.111C106.815 23.6199 110.143 19.7091 112.62 15.3784C115.23 10.7384 116.845 5.67859 117.464 0.198975H121.18Z" fill="url(#paint7_linear_9562_48043)"/>
-<path d="M87.705 4.90523C87.3953 6.96008 87.0967 8.79399 86.8092 10.4069C86.8092 10.3407 86.765 10.5506 86.6765 11.0367H98.5206L98.1224 14.2847H86.8756C88.269 16.9803 89.8946 19.3666 91.7525 21.4435C93.6104 23.5205 95.7337 25.4428 98.1224 27.2104L94.7052 29.0001C90.3702 25.3323 87.0304 21.2447 84.6859 16.7372C83.4915 19.1235 81.9101 21.322 79.9416 23.3327C77.9953 25.3212 75.6508 27.2104 72.9082 29.0001L69.8228 27.1772C73.1404 24.9456 75.7724 22.8024 77.7188 20.7475C79.6873 18.7148 81.1581 16.5605 82.1313 14.2847H71.8134L72.1451 11.0367H83.1598L83.2925 10.3738C83.6021 8.67246 83.8675 7.15894 84.0887 5.83323C84.1772 5.36923 84.2325 5.05989 84.2546 4.90523H74.2352L74.567 1.65723H97.4257L97.0276 4.90523H87.705Z" fill="url(#paint8_linear_9562_48043)"/>
-<path d="M53.9971 5.96614H57.1821L57.8788 0.232422H61.0969L60.4002 5.96614H65.8412L65.5094 8.98214H60.0353L59.3386 14.8816H64.7463L64.3814 17.8644H59.0068L58.111 25.2553H65.5094L65.1445 28.3044H48.1248L48.4566 25.2553H54.8265L55.7223 17.8644H50.4804L50.8453 14.8816H56.0872L56.8171 8.98214H51.8406C51.3762 8.98214 51.0112 8.88271 50.7458 8.68385C50.5025 8.48499 50.3809 8.2088 50.3809 7.85528C50.3809 7.67852 50.414 7.47966 50.4804 7.25871L52.2719 1.85642H55.2578L53.9971 5.96614ZM47.1959 25.653C47.0632 26.6915 46.7757 27.4096 46.3333 27.8073C45.9131 28.2271 45.2716 28.4039 44.4091 28.3376C43.2589 28.2492 42.1199 28.0503 40.9919 27.741L41.39 24.9901C42.0756 25.189 42.8719 25.3658 43.7787 25.5204L43.9778 25.5536C44.1105 25.5536 44.1989 25.5094 44.2432 25.421C44.2874 25.3105 44.3427 25.1227 44.4091 24.8576L45.1389 18.5604H41.1577C40.8923 20.5711 40.5274 22.4271 40.0629 24.1284C39.4436 26.2054 38.8686 27.7079 38.3377 28.6359L35.6836 27.6084C36.8558 25.2 37.7074 22.1619 38.2382 18.4941L40.1624 3.44728C40.273 2.58556 40.5274 1.95585 40.9255 1.55813C41.3457 1.13833 41.965 0.928421 42.7834 0.928421H47.6604C48.4787 0.928421 49.0648 1.08309 49.4187 1.39242C49.7947 1.70175 49.9827 2.22099 49.9827 2.95014C49.9827 3.1048 49.9606 3.38099 49.9164 3.77871L47.1959 25.653ZM46.8973 3.81185H43.1483L42.518 8.35242H46.3665L46.8973 3.81185ZM46.0347 11.1364H42.153L41.5227 15.8096H45.4707L46.0347 11.1364Z" fill="url(#paint9_linear_9562_48043)"/>
-<path d="M22.977 0.331543H26.2947L25.9298 3.04926H32.731L32.3329 6.0984H25.5648L25.2331 8.78297H21.9486L22.2803 6.0984H15.1805L14.8488 8.78297H11.5643L11.896 6.0984H5.39342L5.79154 3.04926H12.261L12.6259 0.331543H15.9436L15.5787 3.04926H22.6453L22.977 0.331543ZM19.1286 7.78869L18.7304 10.9041H24.6691C25.598 10.9041 26.2726 11.0919 26.6928 11.4675C27.1131 11.8211 27.3232 12.3845 27.3232 13.1578C27.3232 13.4451 27.3121 13.666 27.29 13.8207C27.2679 14.2847 27.1352 15.4668 26.8919 17.367C26.7592 18.4717 26.527 20.1178 26.1952 22.3053C25.9298 24.1392 25.7418 25.2992 25.6312 25.7853C25.41 26.7795 25.0893 27.4645 24.6691 27.8401C24.2488 28.2378 23.5853 28.4367 22.6785 28.4367C21.661 28.4367 20.4003 28.271 18.8963 27.9395C17.6798 27.6744 16.8062 27.3982 16.2754 27.111L16.6071 24.1281C17.1158 24.327 17.8789 24.5479 18.8963 24.791C20.0686 25.1445 21.0307 25.3213 21.7827 25.3213C22.026 25.3213 22.1919 25.2771 22.2803 25.1887C22.3688 25.0782 22.4462 24.8794 22.5126 24.5921C22.5789 24.2828 22.7338 23.2774 22.977 21.5761L23.2756 19.3555L23.5742 17.1018C23.7733 15.6435 23.8949 14.583 23.9392 13.9201H18.1996C16.8947 19.2893 13.7208 24.3049 8.67791 28.967L5.45977 27.6081C8.09179 25.1555 10.1709 22.8355 11.697 20.6481C13.2452 18.4386 14.3179 16.1959 14.9151 13.9201H6.62096L6.95272 10.9041H15.4791L15.9436 7.78869H19.1286ZM31.3044 15.5441L32.2002 23.4984H29.2143L28.3848 15.5441H31.3044ZM10.3367 15.8424L7.25131 23.0675H4L7.21814 15.8424H10.3367Z" fill="url(#paint10_linear_9562_48043)"/>
-</g>
-<defs>
-<filter id="filter0_d_9562_48043" x="0" y="0" width="368" height="37" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9562_48043"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9562_48043" result="shape"/>
-</filter>
-<linearGradient id="paint0_linear_9562_48043" x1="350.929" y1="0" x2="350.929" y2="28.2046" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint1_linear_9562_48043" x1="316.806" y1="1.65723" x2="316.806" y2="28.7681" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint2_linear_9562_48043" x1="283.48" y1="0.463867" x2="283.48" y2="28.7016" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint3_linear_9562_48043" x1="250.221" y1="0.0664062" x2="250.221" y2="28.5693" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint4_linear_9562_48043" x1="217.16" y1="0.232422" x2="217.16" y2="28.669" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint5_linear_9562_48043" x1="183.967" y1="0.331543" x2="183.967" y2="28.5361" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint6_linear_9562_48043" x1="150.309" y1="2.68457" x2="150.309" y2="27.1771" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint7_linear_9562_48043" x1="117.332" y1="0.198975" x2="117.332" y2="28.6024" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint8_linear_9562_48043" x1="84.1717" y1="1.65723" x2="84.1717" y2="29.0001" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint9_linear_9562_48043" x1="50.7624" y1="0.232422" x2="50.7624" y2="28.6359" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-<linearGradient id="paint10_linear_9562_48043" x1="18.3655" y1="0.331543" x2="18.3655" y2="28.967" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#A6CDF6"/>
-</linearGradient>
-</defs>
-</svg>
--- a/src/assets/common/warn_icon.png
+++ b/src/assets/common/warn_icon.png
--- a/src/assets/footer/menu0.png
+++ b/src/assets/footer/menu0.png
--- a/src/assets/footer/menu1.png
+++ b/src/assets/footer/menu1.png
--- a/src/assets/footer/menu2.png
+++ b/src/assets/footer/menu2.png
--- a/src/assets/footer/menu3.png
+++ b/src/assets/footer/menu3.png
--- a/src/assets/header/before_icon.png
+++ b/src/assets/header/before_icon.png
--- a/src/assets/header/bg_1855.png
+++ b/src/assets/header/bg_1855.png
--- a/src/assets/header/bg_450.png
+++ b/src/assets/header/bg_450.png
--- a/src/assets/header/bg_800.png
+++ b/src/assets/header/bg_800.png
--- a/src/assets/header/bg_918.png
+++ b/src/assets/header/bg_918.png
--- a/src/assets/header/title0.png
+++ b/src/assets/header/title0.png
--- a/src/assets/header/title1.png
+++ b/src/assets/header/title1.png
--- a/src/assets/header/title2.png
+++ b/src/assets/header/title2.png
--- a/src/assets/header/title3.png
+++ b/src/assets/header/title3.png
--- a/src/assets/header/title4.png
+++ b/src/assets/header/title4.png
--- a/src/assets/header/title5.png
+++ b/src/assets/header/title5.png
--- a/src/assets/header/title6.png
+++ b/src/assets/header/title6.png
--- a/src/components/ContentHeader.vue
+++ b/src/components/ContentHeader.vue
@ -2,12 +2,62 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:52:40
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-06 17:14:46
+ * @LastEditTime: 2025-03-07 14:19:16
 * @FilePath: \vite-ai\data-dashboard\src\components\contentHeader.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-    <div class="ContentHeader">
-        <!-- 标题组件 -->
+    <div class="flex items-center justify-between content_header_wrap"
+        :style="{ 'background-image': `url(${bgImageUrl})`, 'background-size': 'cover', 'background-repeat': 'no-repeat', 'background-position': 'left bottom' }">
+        <!-- 左侧标题区域 -->
+        <div class="flex items-center left-section pl-[23px]">
+            <img src="@/assets/header/before_icon.png" class="w-[14px] h-[14px]">
+            <div class="text-lg font-medium text-white">
+                <slot name="title"></slot>
+            </div>
+        </div>
+        <!-- 右侧内容 -->
+        <div>
+            <slot name="extra"></slot>
+        </div>
    </div>
-</template>
+</template>
+
+<script lang="ts" setup>
+// import { computed } from 'vue';
+import Bg1855 from '@/assets/header/bg_1855.png';
+import Bg918 from '@/assets/header/bg_918.png';
+import Bg800 from '@/assets/header/bg_800.png';
+import Bg450 from '@/assets/header/bg_450.png';
+// 定义组件 props
+const props = withDefaults(defineProps<{
+    bgLayout: number; // 背景样式 1855 918 800 450 
+}>(), {
+    bgLayout: 1855,
+});
+
+// 计算是否显示右侧内容
+const bgImageUrl = computed(() => {
+    switch (Number(props.bgLayout)) {
+        case 1855:
+            return Bg1855;
+        case 918:
+            return Bg918;
+        case 800:
+            return Bg800;
+        case 450:
+            return Bg450;
+        default:
+            return Bg1855;
+
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.content_header_wrap {
+    height: 54px;
+    border-top: 1px solid;
+    border-image: linear-gradient(90deg, rgba(25, 61, 72, 0), rgba(67, 215, 226, 1), rgba(29, 65, 76, 0)) 1 1;
+}
+</style>
--- a/src/components/CustomTable/index.ts
+++ b/src/components/CustomTable/index.ts
@ -0,0 +1,3 @@
+import baseTable from "./src/baseTable";
+
+export const BaseTable = baseTable;
--- a/src/components/CustomTable/src/baseAction.vue
+++ b/src/components/CustomTable/src/baseAction.vue
--- a/src/components/CustomTable/src/baseColumn.vue
+++ b/src/components/CustomTable/src/baseColumn.vue
@ -0,0 +1,104 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-18 14:27:25
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-02-21 15:08:35
+ * @FilePath: \General-AI-Platform-Web-Client\src\components\CustomTable\src\column.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <el-dialog v-model="dialogVisible" :width="600" title="自定义列">
+    <!-- footer -->
+    <template #footer>
+      <el-row type="flex" justify="center">
+        <el-button @click="handleCancel"> 取消 </el-button>
+        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
+      </el-row>
+    </template>
+
+    <!-- body -->
+    <div class="x-custom-column">
+      <template v-for="item in items" :key="item.prop || item.type">
+        <el-checkbox
+          v-if="!item.type"
+          v-model="item.show"
+          :label="item.label"
+          size="large"
+        />
+      </template>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue";
+
+interface ModalProps {
+  visible: boolean;
+  columns: XTableColumn[];
+}
+
+type XCustomColumn = XTableColumn & {
+  show: boolean;
+};
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  visible: false
+});
+
+const emit = defineEmits<{
+  (e: "update:visible", value: boolean): void;
+  (e: "visibleChange", value: boolean): void;
+  (e: "change", value: XTableColumn[]): void;
+}>();
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: val => {
+    emit("update:visible", val);
+    emit("visibleChange", val);
+  }
+});
+
+const items = ref<XCustomColumn[]>([]);
+
+watch(
+  () => props.visible,
+  value => {
+    if (value) {
+      items.value = props.columns.map(i => ({
+        ...i,
+        show: !i.hidden
+      }));
+    }
+  }
+);
+
+function handleConfirm() {
+  const data = items.value.map(i => {
+    const { show, ...rest } = i;
+    return {
+      ...rest,
+      hidden: !show
+    };
+  });
+  emit("change", data);
+  dialogVisible.value = false;
+}
+
+function handleCancel() {
+  dialogVisible.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.x-custom-column {
+  min-height: 100px;
+  padding: 10px;
+
+  .el-checkbox {
+    width: 18%;
+    margin-right: 10px;
+  }
+}
+</style>
--- a/src/components/CustomTable/src/baseTable.scss
+++ b/src/components/CustomTable/src/baseTable.scss
@ -0,0 +1,47 @@
+.baseTable_wrap {
+  .baseTable_box {
+    position: relative;
+
+    .el-table__body {
+      border-collapse: separate !important;
+      /* 让边框独立，而不是合并 */
+      border-spacing: 0 8px;
+      /* 设置行与行之间的间距，可以根据需要调整值 */
+      width: 100%;
+
+      /* 表格宽度占据父容器的100% */
+      tr {
+        & > td:nth-child(1) {
+          border-left: 1px solid #dcdcdc;
+          border-radius: 4px 0 0 4px;
+        }
+
+        & > td:last-child {
+          border-right: 1px solid #dcdcdc !important;
+          border-radius: 0 4px 4px 0;
+        }
+      }
+    }
+
+    .el-table__header > thead {
+      th {
+        background-color: rgba(21, 77, 221, 0.1) !important;
+      }
+    }
+
+    &.el-table td.el-table__cell {
+      border-top: 1px solid #dcdcdc;
+      border-bottom: 1px solid #dcdcdc;
+    }
+  }
+}
+
+.pagination_box {
+  margin-top: 50px;
+  width: 100%;
+  // position: fixed;
+  // bottom: 100px;
+  // right: 40px;
+  background-color: white;
+  z-index: 9;
+}
--- a/src/components/CustomTable/src/baseTable.tsx
+++ b/src/components/CustomTable/src/baseTable.tsx
@ -0,0 +1,488 @@
+import { ElLoading, ElPagination, ElTable, ElTableColumn } from "element-plus";
+import BaseColumn from "./baseColumn.vue";
+import { isUndefined } from "@/utils/is";
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  reactive,
+  type PropType
+} from "vue";
+import "./baseTable.scss";
+
+function getDefaultSort(attrs: Record<string, any>): any {
+  return attrs["default-sort"] || attrs.defaultSort;
+}
+
+export default defineComponent({
+  name: "XTable",
+  directives: {
+    loading: ElLoading.directive
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * 表格的列描述信息
+     */
+    columns: {
+      type: Array as PropType<XTableColumn[]>,
+      required: true
+    },
+
+    /**
+     * 表格的数据
+     */
+    dataSource: {
+      type: Array as PropType<XTableData[]>,
+      required: true
+    },
+
+    /**
+     * loading
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * 最大高度，包含分页高度
+     */
+    maxHeight: {
+      type: [Number, String] as PropType<number | "auto">,
+      default: "auto"
+    },
+
+    /**
+     * 是否显示分页
+     * 为 always 时，将一直显示
+     * 为 false 时，总是不显示
+     * 为 true 时，只有有数据时才显示
+     */
+    pageable: {
+      type: [Boolean, String] as PropType<boolean | "always">,
+      default: true,
+      validator(value: boolean | "always") {
+        return ["always", true, false].includes(value);
+      }
+    },
+
+    /**
+     * 分页布局
+     */
+    pagerLayout: {
+      type: String,
+      default: "total, sizes, prev, pager, next, jumper",
+      validator(value: string) {
+        return value
+          .split(",")
+          .map(item => item.trim())
+          .every(item =>
+            ["total", "sizes", "prev", "pager", "next", "jumper"].includes(item)
+          );
+      }
+    },
+
+    /**
+     * 总条数
+     */
+    total: {
+      type: Number,
+      default: 0
+    },
+
+    /**
+     * 每页显示数量
+     */
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+
+    /**
+     * 页码
+     */
+    page: {
+      type: Number,
+      default: 1
+    },
+
+    /**
+     * 分页选择器的选项设置
+     */
+    pageSizes: {
+      type: Array as PropType<number[]>,
+      default() {
+        return [10, 20, 30, 50];
+      }
+    },
+
+    /**
+     * 行数据的 Key
+     */
+    rowKey: {
+      type: [Function, String] as PropType<
+        (row: XTableData) => string | string
+      >,
+      default: "id"
+    },
+
+    /**
+     * 打开自定义列
+     */
+    visibleColumn: {
+      type: Boolean,
+      default: undefined
+    },
+
+    /**
+     * 固定分页器
+     */
+    isFixedPagination: {
+      type: Boolean,
+      default: true
+    }
+
+    // handleDel: {
+    //   type: Function,
+    //   default: () => {}
+    // }
+    // customActions: {
+    //   type: Function,
+    //   default: () => {}
+    // }
+  },
+  emits: ["change", "columnChange", "update:visibleColumn", "actions"],
+  setup(props, { slots, attrs, emit }) {
+    const nonPropsAttrs = attrs;
+    const { prop: sortBy, order: sortOrder } = getDefaultSort(attrs) || {};
+    const tableState = reactive<XTableState>({
+      tid: 0,
+      sortBy,
+      sortOrder
+    });
+
+    const showPagination = computed(() => {
+      if (props.pageable === "always") return true;
+      return props.pageable && props.dataSource.length > 0;
+    });
+
+    const mHeight = computed(() => {
+      if (props.maxHeight === "auto") {
+        return "auto";
+      }
+      return showPagination.value ? props.maxHeight - 44 : props.maxHeight;
+    });
+
+    /**
+     * 获取插槽
+     */
+    function getSlot(column: XTableColumn, suffix?: string) {
+      const name = column.prop || column.type;
+      if (name) {
+        const key = suffix ? `${name}-${suffix}` : name;
+        return slots[key];
+      }
+    }
+
+    /**
+     * 改变表格列的排序和分页
+     */
+    function onChange(data: XTableChangeData) {
+      emit("change", data);
+    }
+
+    /**
+     * 改变页数
+     */
+    function handlePageNumChange(page: number) {
+      const { sortBy, sortOrder } = tableState;
+      const { pageSize } = props;
+      onChange({
+        page,
+        pageSize,
+        prop: sortBy,
+        order: sortOrder,
+        type: "number"
+      });
+    }
+
+    /**
+     * 改变每页显示的条数
+     */
+    function handlePageSizeChange(pageSize: number) {
+      const { sortBy, sortOrder } = tableState;
+      nextTick(() => {
+        // 下拉框溢出可能导致溢出 body 出现滚动条
+        // 加个延迟，等下拉隐藏
+        onChange({
+          page: 1,
+          pageSize,
+          prop: sortBy,
+          order: sortOrder,
+          type: "size"
+        });
+      });
+    }
+
+    /**
+     * 排序
+     */
+    function handleTableSortChange({ prop, order }: XTableSort) {
+      const { pageSize } = props;
+      onChange({ page: 1, pageSize, prop, order, type: "sort" });
+    }
+
+    /**
+     * 自定义列回调
+     */
+    function handleColumnChange(cols: XTableColumn[]) {
+      emit("columnChange", cols);
+    }
+
+    /**
+     * 自定义列隐藏
+     */
+    function handleVisibleChange(val: boolean) {
+      emit("update:visibleColumn", val);
+    }
+
+    /**
+     * 获取表格列的属性
+     */
+    function getColumnProps(column: XTableColumn) {
+      const col = { ...column };
+      Reflect.deleteProperty(col, "children");
+      Reflect.deleteProperty(col, "hidden");
+      col.key = column.key || column.prop || column.type;
+      col.showOverflowTooltip = col.showOverflowTooltip ?? true;
+      col.showOverflowTooltip =
+        column.prop === "action" ? false : column.showOverflowTooltip;
+      return col;
+    }
+
+    /**
+     * 渲染特殊列
+     */
+    function renderTypeColumn(column: XTableColumn) {
+      if (column.type === "expand") {
+        return (
+          <ElTableColumn {...getColumnProps(column)}>
+            {{
+              default: (scope: Record<string, any>) => {
+                const slot = getSlot(column);
+                return slot?.(scope);
+              }
+            }}
+          </ElTableColumn>
+        );
+      }
+      if (column.type === "action") {
+        return (
+          <ElTableColumn {...getColumnProps(column)}>
+            {{
+              default: ({ row }: { row: Record<string, any> }) => {
+                return (
+                  <div>
+                    {slots.actionBar && <div>{slots.actionBar({ row })}</div>}
+                    {/* <ul>
+                      <li
+                        class="flex items-center"
+                        style={{ fontSize: "14px", color: "#E80D0D" }}
+                        onClick={() => handleDel(row)}
+                      >
+                        <i class="iconfont icon-shanchu pr-[8px]"></i>
+                        <el-button type="text">
+                          <span
+                            style={{
+                              fontSize: "14px",
+                              color: "#E80D0D"
+                            }}
+                          >
+                            删除
+                          </span>
+                        </el-button>
+                      </li>
+                    </ul> */}
+                  </div>
+                );
+              }
+            }}
+          </ElTableColumn>
+        );
+      }
+      return <ElTableColumn {...getColumnProps(column)} />;
+    }
+
+    /**操作按钮事件 */
+
+    // function handleDel(row) {
+    //   console.log(row, "handleDel");
+    //   emit("actions", {
+    //     type: "delete",
+    //     data: { ...row }
+    //   });
+    // }
+
+    /**
+     * 渲染普通列
+     */
+    function renderBaseColumn(column: XTableColumn) {
+      const columnSlots: {
+        default?: (scope: Record<string, any>) => any;
+        header?: (scope: Record<string, any>) => any;
+      } = {};
+      const slot = getSlot(column);
+      const headerSlot = getSlot(column, "header");
+
+      if (slot) {
+        columnSlots.default = scope => slot(scope);
+      }
+
+      if (headerSlot) {
+        columnSlots.header = scope => headerSlot(scope);
+      }
+
+      return (
+        <ElTableColumn {...getColumnProps(column)}>{columnSlots}</ElTableColumn>
+      );
+    }
+
+    /**
+     * 渲染列
+     */
+    function renderTableColumn(column: XTableColumn) {
+      if (column.hidden) return;
+      if (column.type) {
+        return renderTypeColumn(column);
+      }
+      return renderBaseColumn(column);
+    }
+
+    /**
+     * 渲染多级列
+     */
+    function renderColumnChildren(
+      column: XTableColumn,
+      children: Required<XTableColumn>["children"]
+    ) {
+      if (column.hidden) return;
+      return (
+        <ElTableColumn {...getColumnProps(column)}>
+          {children.map(column => renderTableColumn(column))}
+        </ElTableColumn>
+      );
+    }
+
+    /**
+     * 渲染分页
+     */
+    function renderPagination() {
+      const paginationProps = {
+        size: "small",
+        background: false,
+        total: props.total,
+        layout: props.pagerLayout,
+        pageSize: props.pageSize,
+        pageSizes: props.pageSizes,
+        currentPage: props.page,
+        onSizeChange: handlePageSizeChange,
+        onCurrentChange: handlePageNumChange
+      };
+
+      return (
+        <div
+          class={[
+            "x-table-pagination pagination_wrap",
+            props.isFixedPagination
+              ? "fixed_pagination"
+              : "noneFixed_pagination"
+          ]}
+        >
+          <ElPagination {...paginationProps} />
+        </div>
+      );
+    }
+
+    /**
+     * 渲染自定义列
+     */
+    function renderCustomColumn() {
+      const customColumnProps = {
+        columns: props.columns,
+        visible: props.visibleColumn,
+        onChange: handleColumnChange,
+        onVisibleChange: handleVisibleChange
+      };
+
+      return <BaseColumn {...customColumnProps} />;
+    }
+
+    return () => {
+      const tableProps = {
+        ref: "elTableRef",
+        ...nonPropsAttrs,
+        maxHeight: mHeight.value,
+        data: props.dataSource,
+        rowKey: props.rowKey,
+        onSortChange: handleTableSortChange
+      };
+
+      const extraSlots: {
+        append?: () => any;
+        empty?: () => any;
+      } = {};
+
+      if (slots.append) {
+        extraSlots.append = () => slots.append?.();
+      }
+
+      if (slots.empty) {
+        extraSlots.empty = () => slots.empty?.();
+      }
+
+      return (
+        <div class="x-table baseTable_wrap">
+          <ElTable
+            class="baseTable_box"
+            {...tableProps}
+            v-loading={props.loading}
+            v-slots={extraSlots}
+          >
+            {props.columns.map(column => {
+              if (Array.isArray(column.children)) {
+                return renderColumnChildren(column, column.children);
+              }
+              return renderTableColumn(column);
+            })}
+            {/* 使用插槽引入操作栏的内容 */}
+            {/* <ElTableColumn label="操作">
+              {{
+                default: ({ row }: { row: Record<string, any> }) => {
+                  return extraSlots.customActions?.({
+                    row
+                  });
+                }
+              }}
+            </ElTableColumn> */}
+            {/* <ElTableColumn label="操作">
+      <template #default="scope">
+        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+          >Edit</el-button
+        >
+        <el-button
+          size="small"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)"
+          >Delete</el-button>
+        >
+      </template>
+    </ElTableColumn> */}
+          </ElTable>
+          {showPagination.value && renderPagination()}
+          {!isUndefined(props.visibleColumn) && renderCustomColumn()}
+        </div>
+      );
+    };
+  }
+});
--- a/src/components/CustomTable/src/type.d.ts
+++ b/src/components/CustomTable/src/type.d.ts
@ -0,0 +1,42 @@
+import type ElTable from "element-plus/lib/components/table";
+import type { ElTableColumn } from "element-plus/lib/components/table";
+
+export {};
+
+type ElTableType = InstanceType<typeof ElTable>;
+type ElTableProps = ElTableType["$props"];
+type ElTableColumnProps = InstanceType<typeof ElTableColumn>["$props"];
+type ElTableSort = Pick<
+  Required<ElTableProps>["defaultSort"],
+  "prop" | "order"
+>;
+
+type ElTableAction = {
+  type: "delete" | "update" | string; // 操作类型
+  confirmType?: "popup" | "modal"; // 确认组件
+};
+
+declare global {
+  type XTableSort = ElTableSort;
+
+  interface XTableColumn extends ElTableColumnProps {
+    children?: XTableColumn[];
+    hidden?: boolean;
+  }
+
+  interface XTableData {
+    [key: string]: any;
+  }
+
+  interface XTableState {
+    tid: number;
+    sortBy?: XTableSort["prop"];
+    sortOrder?: XTableSort["order"];
+  }
+
+  interface XTableChangeData extends Partial<XTableSort> {
+    type: "size" | "number" | "sort";
+    pageNum: number;
+    pageSize: number;
+  }
+}
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -2,17 +2,19 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:00:26
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-06 15:51:05
+ * @LastEditTime: 2025-03-07 14:16:20
 * @FilePath: \vite-ai\data-dashboard\src\views\dashboard\components\footer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
    <div class="footer-box">
        <ul class="nav-list">
-            <li v-for="item in navList" :key="item.path" :class="{ active: isActive(item.fullPath) }">
+            <li v-for="(item, index) in navList" :key="item.path" :class="{ active: isActive(item.fullPath) }">
                <router-link :to="item.fullPath" class="nav-item">
-                    <div class="nav-icon"></div>
-                    <div>{{ item?.meta?.title }}</div>
+                    <div :class="`nav-icon-${index}`">
+
+                    </div>
+                    <div class="mt-[12px]">{{ item?.meta?.title }}</div>
                </router-link>
            </li>
        </ul>
@ -28,7 +30,7 @@ const route = useRoute();

 // 判断当前路由是否匹配
 const isActive = (path: string) => {
-    console.log(route.path,  "isActive", path);
+    console.log(route.path, "isActive", path);
    return route.path.startsWith(path) || route.path === path;
 };
 </script>
@ -36,11 +38,16 @@ const isActive = (path: string) => {
 <style scoped lang="scss">
 .footer-box {
    margin-top: 30px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding-bottom: 20px;
+    font-size: 18px;

    .nav-list {
        display: flex;
        justify-content: center;
-        gap: 40px;
+        gap: 64px;
        padding: 0;

        .nav-item {
@ -48,6 +55,22 @@ const isActive = (path: string) => {
            cursor: pointer;
            transition: color 0.3s;

+            // 定义一个循环，从 1 到 4
+            @for $i from 0 through 3 {
+
+                // 生成动态类名，如 .menu-icon-1、.menu-icon-2 等
+                .nav-icon-#{$i} {
+                    // 动态设置背景图片，引用对应的图标
+                    background-image: url('@/assets/footer/menu#{$i}.png');
+                    // 其他背景样式设置
+                    background-repeat: no-repeat;
+                    background-size: cover;
+                    // 这里可以根据实际情况设置宽度和高度
+                    width: 96px;
+                    height: 96px;
+                }
+            }
+
            .nav-icon {
                width: 40px;
                height: 40px;
@ -55,16 +78,17 @@ const isActive = (path: string) => {
                background-size: 80%;
                margin-bottom: 5px;
            }
+
+
        }

-        .active {
-            color: #42a5f5;
+        &>li {
+            color: #fff;
+            opacity: 0.6;
+        }

-            .nav-icon {
-                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>'), linear-gradient(45deg, #42a5f5, #1976d2);
-                background-blend-mode: multiply;
-                filter: drop-shadow(0 0 5px #42a5f5);
-            }
+        .active {
+            opacity: 1;
        }
    }
 }
--- a/src/components/IsAction/index.ts
+++ b/src/components/IsAction/index.ts
@ -0,0 +1,10 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-08-14 17:19:37
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-08-20 15:32:48
+ * @FilePath: \General-AI-Platform-Web-Client\src\components\Action\index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import isAction from "./src/isAction";
+export const IsAction = isAction;
--- a/src/components/IsAction/src/isAction.scss
+++ b/src/components/IsAction/src/isAction.scss
@ -0,0 +1,16 @@
+.action_model_wrap {
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 40px 24px 14px;
+  }
+  .model_content_box {
+    .icon_box {
+      img {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+}
--- a/src/components/IsAction/src/isAction.tsx
+++ b/src/components/IsAction/src/isAction.tsx
@ -0,0 +1,84 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-08-20 15:31:30
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-03-07 14:39:58
+ * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isAction.tsx
+ * @Description: 是否操作行为
+ */
+import { defineComponent, PropType } from "vue";
+import { ElDialog, ElButton } from "element-plus";
+import warnIcon from "@/assets/common/warn_icon.png";
+import "./isAction.scss";
+export default defineComponent({
+  name: "IsDelete",
+  props: {
+    title: {
+      type: String as PropType<string>,
+      default: "提示"
+    },
+    message: {
+      type: String as PropType<string>,
+      default: "确定要操作吗？"
+    },
+    visible: {
+      type: Boolean as PropType<boolean>
+      // required: true
+    }
+  },
+  emits: ["update:visible", "confirm"],
+  setup(props, { emit }) {
+    const { visible } = toRefs(props);
+    const localVisible = ref<boolean>(visible.value);
+    const handleConfirm = () => {
+      emit("confirm");
+      // visible.value = false;
+      // emit("update:visible", false);
+    };
+
+    const handleCancel = () => {
+      // localVisible.value = false;
+      emit("update:visible", false);
+    };
+
+    const handleClose = () => {
+      // localVisible.value = false;
+      emit("update:visible", false);
+      // done();
+    };
+
+    watch(visible, newVal => {
+      localVisible.value = newVal;
+    });
+
+    return () => (
+      <ElDialog
+        className="action_model_wrap el-dialog"
+        visible={localVisible.value}
+        width="560px"
+        before-close={handleClose}
+        show-close={false}
+        v-slots={{
+          footer: () => (
+            <>
+              <ElButton onClick={handleCancel}>取消</ElButton>
+              <ElButton type="primary" onClick={handleConfirm}>
+                确认
+              </ElButton>
+            </>
+          )
+        }}
+      >
+        <div className="model_content_box">
+          <div className="flex items-center pr-[12px] icon_box">
+            <img src={warnIcon} />
+            <span className="hf-1 pl-[12px]">{props.title}</span>
+          </div>
+          <div className="pl-[36px] pt-[14px]">
+            <span className="pf-1" v-html={props.message}></span>
+          </div>
+        </div>
+      </ElDialog>
+    );
+  }
+});
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:42:11
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-06 17:29:16
+ * @LastEditTime: 2025-03-07 13:52:19
 * @FilePath: \vite-ai\data-dashboard\src\components\Navbar.vue
 * @Description: 标题栏
 -->
@ -97,8 +97,8 @@ onMounted(() => {
      <div class="bg_logo" />
    </div>
    <div class="flex">
-      <div class="center_title" />
-      <h1>5G铁路货车装卸作业智能监控平台</h1>
+      <!-- <div class="center_title" /> -->
+      <h1 class="center_title">5G铁路货车装卸作业智能监控平台</h1>
    </div>

    <div class="flex items-center justify-end right">
@ -117,7 +117,7 @@ onMounted(() => {
  background-size: cover;
  width: 100%;
  height: 64px;
-
+  line-height: 64px;
  .left {
    width: 30vw;
    padding-left: 24px;
@ -130,11 +130,13 @@ onMounted(() => {
  }

  .center_title {
-    margin-top: 19px;
+    // margin-top: 19px;
    // background: url("@/assets/dataScreen/common/title.svg") no-repeat center center;
-    width: 370px;
-    height: 36px;
-    line-height: 2;
+    width: 670px;
+    text-align: center;
+    // height: 36px;
+    font-size: 32px;
+    // line-height: 2;
  }

  .right {
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 13:56:12
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-06 16:59:33
+ * @LastEditTime: 2025-03-07 10:40:22
 * @FilePath: \vite-ai\data-dashboard\src\views\dashboard\home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@ -12,7 +12,7 @@
        <header>
            <NavbarComp />
        </header>
-        <main class="app-main">
+        <main class="app-main px-[32px]">
            <router-view v-slot="{ Component, route }">
                <transition name="fade">
                    <component :is="Component" :key="route.path" />
@ -34,7 +34,7 @@ import FooterComp from '@/components/Footer.vue'
 .data-screen {
    background: #002a5c;
    color: white;
-    padding: 20px;
    font-family: 'Arial', sans-serif;
+    
 }
 </style>
--- a/src/main.ts
+++ b/src/main.ts
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 11:27:03
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-06 16:54:29
+ * @LastEditTime: 2025-03-07 14:29:52
 * @FilePath: \vite-ai\data-dashboard\src\main.ts
 * @Description: 入口文件
 */
@ -20,6 +20,12 @@ import { registerErrorHandler } from '@/utils/error' // 全局错误处理
 const app = createApp(App)
 const pinia = createPinia()

+// ================== DataV ==================
+// // 引入 DataV
+// import DataV from '@jiaminghi/data-view';
+// // 引入 DataV 的 CSS 样式
+// import '@jiaminghi/data-view/lib/data-view.min.css';
+
 // ================== Element Plus 完整引入方案 ==================
 import ElementPlus from 'element-plus'
 import "@/styles/tailwind.scss";
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@ -0,0 +1,15 @@
+// 标题背景
+.bg_title {
+  background-size: contain;
+  background-repeat: no-repeat;
+  height: 14px;
+  margin-left: 8px;
+}
+// 标题图
+@for $i from 0 through 6 {
+  // 生成动态类名
+  .bg_title_#{$i} {
+    // 动态设置背景图片，引用对应的图标
+    background-image: url("@/assets/header/title#{$i}.png");
+  }
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -74,3 +74,4 @@ textarea {
 // .flex {
 //   display: flex;
 // }
+@import url("./common.scss");
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@ -0,0 +1,57 @@
+const { toString } = Object.prototype;
+
+export function is(val: unknown, type: string): boolean {
+  return toString.call(val) === `[object ${type}]`;
+}
+
+export function isString(val: any): val is string {
+  return is(val, "String");
+}
+
+export function isNumber(val: any): val is number {
+  return is(val, "Number");
+}
+
+export function isBoolean(val: any): val is boolean {
+  return is(val, "Boolean");
+}
+
+export function isObject(val: any): val is Record<string, any> {
+  return val !== null && is(val, "Object");
+}
+
+export function isEmptyObject(val: any): val is boolean {
+  return isObject(val) && Object.keys(val).length === 0;
+}
+
+export function isArray(val: any): val is any[] {
+  return val && Array.isArray(val);
+}
+
+export function isNull(val: any): val is null {
+  return is(val, "Null");
+}
+
+export function isUndefined(val: any): val is undefined {
+  return is(val, "Undefined");
+}
+
+export function isFunction(val: any): val is (...args: any[]) => any {
+  return typeof val === "function";
+}
+
+export function isFile(val: any): val is File {
+  return is(val, "File");
+}
+
+export function isBlob(val: any): val is Blob {
+  return is(val, "Blob");
+}
+
+export function isRegExp(val: any) {
+  return is(val, "RegExp");
+}
+
+export function isExternal(val: any) {
+  return /^(https?:|mailto:|tel:)/.test(val);
+}
--- a/src/views/dashboard/DataOverview.scss
+++ b/src/views/dashboard/DataOverview.scss
@ -0,0 +1,80 @@
+.data-overview-wrap {
+  background: #002a5c;
+  color: white;
+  font-family: "Arial", sans-serif;
+  .grid-container {
+    display: flex;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    margin-bottom: 20px;
+    width: 100%;
+    .grid-item {
+      background: rgba(74, 126, 191, 0.1);
+      border-radius: 8px;
+      width: 50%;
+
+      &>li{
+        width: 50%;
+      }
+      .module-header {
+        color: #4a7ebf;
+        margin-bottom: 15px;
+      }
+      .chart-container {
+        height: 300px;
+      }
+    }
+  }
+  .device-info {
+    .total-device {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+
+      .device-icon {
+        width: 40px;
+        height: 40px;
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>')
+          no-repeat center;
+        background-size: 80%;
+      }
+
+      .device-count {
+        margin-left: 15px;
+
+        .count-number {
+          font-size: 24px;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .device-list {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+
+      .device-card {
+        background: rgba(74, 126, 191, 0.1);
+        padding: 10px;
+        border-radius: 4px;
+
+        .status-bar {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+
+  .monitor-images {
+    display: flex;
+    gap: 10px;
+    margin-top: 15px;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
--- a/src/views/dashboard/DataOverview.vue
+++ b/src/views/dashboard/DataOverview.vue
@ -3,13 +3,32 @@
        <!-- 检测总量汇总 -->
        <div class="grid-container">
            <div class="grid-item">
-                <div class="module-header">检测总量汇总</div>
+                <div class="module-header">
+                    <ContentHeader bgLayout="918">
+                        <template #title>
+                            <div class="w-[200px] bg_title bg_title_0">
+                            </div>
+                        </template>
+                        <template #extra>
+                            <div></div>
+                        </template>
+                    </ContentHeader>
+                </div>
                <div class="chart-container" id="totalChart"></div>
            </div>
-
            <!-- 设备信息 -->
            <div class="grid-item">
-                <div class="module-header">设备信息</div>
+                <div class="module-header">
+                    <ContentHeader bgLayout="918">
+                        <template #title>
+                            <div class="w-[200px] bg_title bg_title_1">
+                            </div>
+                        </template>
+                        <template #extra>
+                            <div></div>
+                        </template>
+                    </ContentHeader>
+                </div>
                <div class="device-info">
                    <div class="total-device">
                        <div class="device-icon"></div>
@ -50,29 +69,66 @@

        <!-- 中部检测模块 -->
        <div class="grid-container">
+            <ul class="flex grid-item">
+                <li>
+                    <div class="module-header">
+                        <ContentHeader bgLayout="450">
+                            <template #title>
+                                <div class="w-[200px] bg_title bg_title_2">
+                                </div>
+                            </template>
+                            <template #extra>
+                                <div>
+
+                                </div>
+                            </template>
+                        </ContentHeader>
+                    </div>
+                    <div class="chart-container" id="bodyChart"></div>
+                </li>
+                <li>
+                    <div class="module-header">
+                        <ContentHeader bgLayout="450">
+                            <template #title>
+                                <div class="w-[200px] bg_title bg_title_3">
+                                </div>
+                            </template>
+                            <template #extra>
+                            </template>
+                        </ContentHeader>
+                    </div>
+                    <div class="chart-container" id="poleChart"></div>
+
+                </li>
+
+            </ul>
+
            <div class="grid-item">
-                <div class="module-header">车体检测</div>
-                <div class="chart-container" id="bodyChart"></div>
-            </div>
-            <div class="grid-item">
-                <div class="module-header">撑杆检测</div>
-                <div class="chart-container" id="poleChart"></div>
-            </div>
-            <div class="grid-item">
-                <div class="module-header">实时监控画面</div>
+                <div class="module-header">
+                    <ContentHeader bgLayout="918">
+                        <template #title>
+                            <div class="w-[200px] bg_title bg_title_4">
+                            </div>
+                        </template>
+                        <template #extra>
+                            <div></div>
+                        </template>
+                    </ContentHeader>
+                </div>
                <div class="monitor-images">
                    <img src="https://picsum.photos/300/200?random=1" alt="监控画面">
                    <img src="https://picsum.photos/300/200?random=2" alt="监控画面">
                </div>
            </div>
        </div>
-      
+

    </div>
 </template>

 <script lang="ts" setup>
 import * as echarts from 'echarts';
+import ContentHeader from '@/components/ContentHeader.vue';

 onMounted(() => {
    // 初始化检测总量汇总图表
@ -135,84 +191,5 @@ onMounted(() => {
 </script>

 <style scoped lang="scss">
-.data-overview-wrap {
-    background: #002a5c;
-    color: white;
-    padding: 20px;
-    font-family: 'Arial', sans-serif;
-    .grid-container {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 20px;
-        margin: 20px 0;
-
-        .grid-item {
-            background: rgba(74, 126, 191, 0.1);
-            border-radius: 8px;
-            padding: 15px;
-
-            .module-header {
-                color: #4a7ebf;
-                margin-bottom: 15px;
-            }
-
-            .chart-container {
-                height: 300px;
-            }
-        }
-    }
-
-    .device-info {
-        .total-device {
-            display: flex;
-            align-items: center;
-            margin-bottom: 15px;
-
-            .device-icon {
-                width: 40px;
-                height: 40px;
-                background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>') no-repeat center;
-                background-size: 80%;
-            }
-
-            .device-count {
-                margin-left: 15px;
-
-                .count-number {
-                    font-size: 24px;
-                    font-weight: bold;
-                }
-            }
-        }
-
-        .device-list {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
-
-            .device-card {
-                background: rgba(74, 126, 191, 0.1);
-                padding: 10px;
-                border-radius: 4px;
-
-                .status-bar {
-                    margin-top: 5px;
-                }
-            }
-        }
-    }
-
-    .monitor-images {
-        display: flex;
-        gap: 10px;
-        margin-top: 15px;
-
-        img {
-            width: 100%;
-            height: auto;
-        }
-    }
-
-
-}
+@import url('./DataOverview.scss');
 </style>
--- a/src/views/dashboard/DeviceStatus.vue
+++ b/src/views/dashboard/DeviceStatus.vue
@ -2,10 +2,220 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:15:47
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-06 15:15:53
+ * @LastEditTime: 2025-03-07 15:22:33
 * @FilePath: \vite-ai\data-dashboard\src\views\dashboard\DeviceStatus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-    设备状态
-</template>
+    <div class="alarm_table" v-loading="dataLoading" :element-loading-svg="svg"
+        element-loading-svg-view-box="-10, -10, 50, 50">
+        <template v-if="pagination.total > 0">
+            <BaseTable class="ds_table" :total="pagination.total" :pageSize="pagination.pageSize" :dataSource="listData"
+                :isFixedPagination="false" :columns="columns" :page="pagination.currentPage"
+                @change="handleTableChange">
+                <template v-slot:actionBar="{ row }">
+                    <ul class="table_action_box">
+                        <li class="flex items-center" @click="openHistory(row)">
+                            <el-button text>
+                                <i class="iconfont icon-shanchu pr-[8px]"
+                                    :style="{ fontSize: '14px', color: '#E80D0D' }" />
+                                <span :style="{
+                                    fontSize: '14px',
+                                    color: '#E80D0D'
+                                }">
+                                    删除
+                                </span>
+                            </el-button>
+                        </li>
+                    </ul>
+                </template>
+            </BaseTable>
+        </template>
+    </div>
+
+</template>
+
+
+<script setup lang="ts">
+import { BaseTable } from "@/components/CustomTable";
+
+defineOptions({
+    name: "DeviceStatusIndex"
+});
+const alarmLevelStatusEnum: Record<string, any>[] = [
+    {
+        color: "rgba(232, 13, 13, 1)",
+        value: "1",
+        label: "紧急",
+        isDelete: false,
+        icon: "ArrowUpOutlined",
+        id: "1"
+    },
+    {
+        color: "rgba(255, 136, 0, 1)",
+        value: "2",
+        label: "较高",
+        isDelete: false,
+        id: "2"
+    },
+    {
+        color: "rgba(68, 139, 245, 1)",
+        value: "3",
+        label: "一般",
+        isDelete: false,
+        id: "3"
+    },
+    {
+        color: "rgba(179, 214, 0, 1)",
+        value: "4",
+        label: "低",
+        isDelete: true,
+        id: "4"
+    },
+    {
+        color: "rgba(81, 177, 6, 1)",
+        value: "5",
+        label: "较低",
+        isDelete: true,
+        id: "5"
+    },
+    {
+        color: "rgba(43, 183, 136, 1)",
+        value: "6",
+        label: "非常低",
+        isDelete: true,
+        id: "6"
+    }
+];
+
+const deleteModel = reactive<{
+    isShowDelete: boolean;
+}>({
+    isShowDelete: false
+});
+
+const currentRow = ref<Record<string, any>>({});
+
+
+
+const columns = [
+    {
+        label: "设备名称",
+        property: "name"
+    },
+    {
+        label: "设备代码",
+        property: "code"
+    },
+    {
+        label: "设备状态",
+        property: "status",
+        formatter: val => {
+            console.log(val);
+            const currentLevelObj =
+                alarmLevelStatusEnum[Number(val?.status) - 1];
+            return h(
+                "div",
+                {
+                    style: {
+                        fontSize: "14px",
+                        color: currentLevelObj.color
+                    }
+                },
+                [
+                    h("i", {
+                        class: `iconfont pr-[8px] ${currentLevelObj.value === "1"
+                            ? "icon-xiangshangjiantouquan"
+                            : "icon-xiala"
+                            }`
+                    }),
+                    h(
+                        "span",
+                        {
+                            fontSize: "14px"
+                        },
+                        currentLevelObj.label
+                    )
+                ]
+            );
+        }
+    },
+    // TODO 需要封装操作按钮
+    {
+      type: "action",
+      label: "操作"
+    }
+];
+
+const svg = `
+        <path class="path" d="
+          M 30 15
+          L 28 17
+          M 25.61 25.61
+          A 15 15, 0, 0, 1, 15 30
+          A 15 15, 0, 1, 1, 27.99 7.5
+          L 15 15
+        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
+      `;
+
+const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
+
+const listData = ref([]);
+
+// const searchValue = ref("");
+
+const formData = reactive({
+    warning_name: "",
+    status: ""
+});
+
+const dataLoading = ref(true);
+
+const getList = async () => {
+    const { currentPage, pageSize } = pagination.value;
+
+    const res = await fetch('/api/getDeviceStatusList', {
+        method: 'POST',
+        body: JSON.stringify({ ...formData, page: currentPage, pageSize })
+    })
+    const {data} = await res.json()
+    console.log(data,'getList_data')
+    // if (data.code === 200) {
+    //     userStore.login(data.data.token)
+    //     router.push('/dashboard')
+    // }
+
+    //   const { data } = await getWarnList({
+    //     ...formData,
+    //     page: currentPage,
+    //     pageSize
+    //   });
+    listData.value = data.list;
+    console.log(data.list);
+    pagination.value = {
+        ...pagination.value,
+        total: data.total
+    };
+    dataLoading.value = false;
+};
+
+function handleTableChange(record) {
+    console.log("handleTableChange_record", record);
+    pagination.value = {
+        ...pagination.value,
+        currentPage: record.page,
+        pageSize: record.pageSize
+    };
+    getList();
+}
+/**操作栏事件 */
+function openHistory(row) {
+    console.log(row, "openHistory");
+    currentRow.value = row;
+    deleteModel.isShowDelete = true;
+}
+
+onMounted(() => {
+    getList();
+});
+</script>
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 13:56:27
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-06 17:22:49
+ * @LastEditTime: 2025-03-07 15:12:33
 * @FilePath: \vite-ai\data-dashboard\src\views\login\login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,21 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "strict": true,
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": ["ESNext", "DOM"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 11:27:03
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-06 17:11:57
+ * @LastEditTime: 2025-03-07 14:35:23
 * @FilePath: \vite-ai\data-dashboard\vite.config.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */