feat: 初步完成设备状态模块、顶部栏、撑杆监测的表格部分

api.md

@@ -0,0 +1,47 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-03-11 14:18:06
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-03-11 14:22:31
+ * @FilePath: \5G-Loading-Bay-Web\api.md
+ * @Description: 接口备注文档
+-->
+
+# 系统接口文档
+
+## 一、登录模块（Login）
+
+### 1.1 用户登录接口
+- **接口地址**：/api/login  
+- **请求方式**：POST  
+- **请求参数**：  
+  | 参数名   | 类型   | 是否必填 | 说明         |  
+  |----------|--------|----------|--------------|  
+  | username | string | 是       | 用户账号     |  
+  | password | string | 是       | 登录密码     |  
+
+- **响应示例**：  
+```json
+{
+  "code": 200,
+  "message": "登录成功",
+  "data": {
+    "token": "xxx-xxx-xxx" // 登录成功返回的 token
+  }
+}
+
+### 1.2 用户登录接口
+- **接口地址**：/api/logout  
+- **请求方式**：POST  
+- **请求参数**：  
+  | 参数名   | 类型   | 是否必填 | 说明         |  
+  |----------|--------|----------|--------------|  
+  | token    | string | 是       | 登录成功返回的 token |  
+
+- **响应示例**：  
+```json
+{
+  "code": 200,
+}
+
+![alt text](微信图片_20250306134728.png)

mock/deviceStatus.ts

@@ -4,7 +4,7 @@
  * @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
+ * @Description: 设备状态
  */
 import { MockMethod } from "vite-plugin-mock";
 import { deviceStatusListData } from "./pools/deviceStatusData";

mock/poleMonitor.ts

@@ -0,0 +1,32 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-03-11 11:29:02
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-03-11 11:39:31
+ * @FilePath: \5G-Loading-Bay-Web\mock\poleMonitor.ts
+ * @Description: 撑杆监测
+ */
+import { MockMethod } from "vite-plugin-mock";
+import { poleMonitorListData } from "./pools/poleMonitorData";
+import { fetchCurrPageByList } from "./utils/apiMock";
+
+export default [
+  {
+    url: "/api/getPoleMonitorList",
+    method: "post",
+    response: req => {
+      const { page, pageSize } = req.body;
+      // console.log(req);
+      return {
+        ...fetchCurrPageByList({
+          ...poleMonitorListData,
+          data: {
+            ...poleMonitorListData.data,
+            page,
+            pageSize: pageSize || 10
+          }
+        })
+      };
+    }
+  }
+] as MockMethod[];

mock/pools/deviceStatusData.ts

@@ -35,7 +35,7 @@ function fetchList(): Record<string, any>[] {
       deviceGroup:
       deviceGroupArr[Math.floor(Math.random() * 3)] +
       (Math.floor(Math.random() * 3) + 1),
-      status: Math.floor(Math.random() * 6) + 1,
+      status: Math.floor(Math.random() * 3) + 1,
       remark: ""
     });
   }

mock/pools/poleMonitorData.ts

@@ -0,0 +1,44 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-03-11 11:30:09
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-03-11 13:36:53
+ * @FilePath: \5G-Loading-Bay-Web\mock\pools\poleMonitorData.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import Mock from 'mockjs';
+
+// // 定义模拟数据生成规则
+const mockData = Mock.mock({
+    // 生成 10 条数据，可以根据需要调整数量
+    'data|140': [
+        {
+            // 车号，生成随机的 4 位字母和数字组合
+            'carNo': /[A-Z0-9]{4}/,
+            // 车型，从预定义的数组中随机选择一个
+            'carType': () => Mock.Random.pick(['轿车', 'SUV', '客车', '货车']),
+            // 车厢号，生成 1 到 10 的随机整数
+            'carriageNo|1-10': 1,
+            // 告警类型，从预定义的数组中随机选择一个
+            'warnType': () => Mock.Random.pick(['超速告警', '碰撞告警', '低电量告警']),
+            // 故障类型，从预定义的数组中随机选择一个
+            'faultType': () => Mock.Random.pick(['电路故障', '机械故障', '传感器故障']),
+            // 等级，生成 1 到 3 的随机整数
+            'level|1-3': 1,
+            // 复核，随机生成 '是' 或 '否'
+            'review': () => Mock.Random.pick(['是', '否']),
+            // 时间，生成过去一个月内的随机日期和时间
+            'date': () => Mock.Random.date('yyyy-MM-dd') + ' ' + Mock.Random.time('HH:mm:ss')
+        }
+    ]
+});
+console.log(mockData, 'mockData');
+const currentData = mockData.data;
+export const poleMonitorListData = {
+  data: {
+    list: currentData,
+    total: currentData.length,
+    page: 1,
+    pageSize: 10
+  }
+};

package-lock.json

@@ -11,6 +11,7 @@
         "echarts": "^5.6.0",
         "postcss-scss": "^4.0.9",
         "sass": "^1.85.1",
+        "swiper": "^11.2.5",
         "unplugin-auto-import": "^19.1.1",
         "vue": "^3.5.13"
       },
@@ -20,10 +21,12 @@
         "@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",
         "element-plus": "^2.9.5",
+        "mockjs": "^1.1.0",
         "pinia": "^3.0.1",
         "postcss": "^8.5.3",
         "tailwindcss": "^3.4.17",
@@ -46,6 +49,246 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.26.8",
+      "resolved": "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.26.8.tgz",
+      "integrity": "sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.26.9.tgz",
+      "integrity": "sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.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/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.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmmirror.com/@babel/generator/-/generator-7.26.9.tgz",
+      "integrity": "sha512-kEWdzjOAUMW4hAyrzJ0ZaTOu9OmpyDIQicIh0zg0EEcEkYXZb2TjtBhnHi2ViX7PKwZqF4xwqfAm299/QMP3lg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.26.9",
+        "@babel/types": "^7.26.9",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
+      "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz",
+      "integrity": "sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.26.5",
+        "@babel/helper-validator-option": "^7.25.9",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.26.9.tgz",
+      "integrity": "sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg==",
+      "dev": true,
+      "dependencies": {
+        "@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/helper-skip-transparent-expression-wrappers": "^7.25.9",
+        "@babel/traverse": "^7.26.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz",
+      "integrity": "sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz",
+      "integrity": "sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
+      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz",
+      "integrity": "sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.25.9",
+        "@babel/helper-optimise-call-expression": "^7.25.9",
+        "@babel/traverse": "^7.26.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz",
+      "integrity": "sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.25.9",
       "resolved": "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
@@ -62,6 +305,28 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.26.9.tgz",
+      "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.26.9",
+        "@babel/types": "^7.26.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.26.9",
       "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.26.9.tgz",
@@ -76,6 +341,87 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
+      "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
+      "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.26.8",
+      "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.8.tgz",
+      "integrity": "sha512-bME5J9AC8ChwA7aEPJ6zym3w7aObZULHhbNLU0bKUhKsAkylkzUdq+0kdymh9rzi8nlNFl2bmldFBCKNJBUpuw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.25.9",
+        "@babel/helper-create-class-features-plugin": "^7.25.9",
+        "@babel/helper-plugin-utils": "^7.26.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
+        "@babel/plugin-syntax-typescript": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.26.9.tgz",
+      "integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "@babel/parser": "^7.26.9",
+        "@babel/types": "^7.26.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.26.9.tgz",
+      "integrity": "sha512-ZYW7L+pL8ahU5fXmNbPF+iZFHCv5scFak7MZ9bwaRPLUhHh7QQEMjZUg0HevihoqCM5iSYHN61EyCoZvqC+bxg==",
+      "dev": true,
+      "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.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.26.9",
       "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.26.9.tgz",
@@ -1485,6 +1831,24 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vitejs/plugin-vue-jsx": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-4.1.1.tgz",
+      "integrity": "sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-typescript": "^7.25.9",
+        "@vue/babel-plugin-jsx": "^1.2.5"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0",
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@volar/language-core": {
       "version": "2.4.11",
       "resolved": "https://registry.npmmirror.com/@volar/language-core/-/language-core-2.4.11.tgz",
@@ -1511,6 +1875,56 @@
         "vscode-uri": "^3.0.8"
       }
     },
+    "node_modules/@vue/babel-helper-vue-transform-on": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.4.0.tgz",
+      "integrity": "sha512-mCokbouEQ/ocRce/FpKCRItGo+013tHg7tixg3DUNS+6bmIchPt66012kBMm476vyEIJPafrvOf4E5OYj3shSw==",
+      "dev": true
+    },
+    "node_modules/@vue/babel-plugin-jsx": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.4.0.tgz",
+      "integrity": "sha512-9zAHmwgMWlaN6qRKdrg1uKsBKHvnUU+Py+MOCTuYZBoZsopa90Di10QRjB+YPnVss0BZbG/H5XFwJY1fTxJWhA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-plugin-utils": "^7.26.5",
+        "@babel/plugin-syntax-jsx": "^7.25.9",
+        "@babel/template": "^7.26.9",
+        "@babel/traverse": "^7.26.9",
+        "@babel/types": "^7.26.9",
+        "@vue/babel-helper-vue-transform-on": "1.4.0",
+        "@vue/babel-plugin-resolve-type": "1.4.0",
+        "@vue/shared": "^3.5.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.4.0.tgz",
+      "integrity": "sha512-4xqDRRbQQEWHQyjlYSgZsWj44KfiF6D+ktCuXyZ8EnVDYV3pztmXJDf1HveAjUAXxAnR8daCQT51RneWWxtTyQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "@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"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
@@ -2055,7 +2469,6 @@
       "resolved": "https://registry.npmmirror.com/commander/-/commander-13.1.0.tgz",
       "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2095,6 +2508,12 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
     "node_modules/copy-anything": {
       "version": "3.0.5",
       "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-3.0.5.tgz",
@@ -2502,6 +2921,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmmirror.com/glob/-/glob-10.4.5.tgz",
@@ -2534,6 +2962,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -2685,6 +3122,30 @@
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-9.0.1.tgz",
       "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="
     },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.29.2",
       "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.29.2.tgz",
@@ -3100,7 +3561,6 @@
       "resolved": "https://registry.npmmirror.com/mockjs/-/mockjs-1.1.0.tgz",
       "integrity": "sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "commander": "*"
       },
@@ -3719,6 +4179,15 @@
       "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
     },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3940,6 +4409,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.2.5.tgz",
+      "integrity": "sha512-nG0kbIyBfeE2BPFt9nPUX03qUBF75o6+enzjIT/DfCmbh8ORlwhc4eZz1+4H/yseAgb3H+OoEYzmb64i0tYNnQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.17.tgz",
@@ -4559,6 +5046,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
+    },
     "node_modules/yaml": {
       "version": "2.7.0",
       "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.7.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
     "element-plus": "^2.9.5",
+    "mockjs": "^1.1.0",
     "pinia": "^3.0.1",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.17",

src/api/alarm.ts

@@ -1,2 +0,0 @@
-
-

src/api/dashboard.ts

@@ -0,0 +1 @@
+// 接口层

src/components/CustomTable/src/baseTable.scss

@@ -1,39 +1,117 @@
 .baseTable_wrap {
+  /* 去掉表格整体边框 */
+  .el-table {
+    border: none !important;
+  }
+  /* 去掉表头下边框 */
+  .el-table__header-wrapper thead th {
+    border-bottom: none !important;
+  }
+  /* 去掉单元格边框 */
+  .el-table td,
+  .el-table th.is-leaf {
+    border-bottom: none !important;
+  }
+  /* 去掉纵向分割线 */
+  .el-table--border::after,
+  .el-table--group::after,
+  .el-table::before {
+    display: none;
+  }
+  .el-table--border,
+  .el-table--group {
+    border-right: none !important;
+    border-bottom: none !important;
+  }
+  .el-table td,
+  .el-table th {
+    border-right: none !important;
+  }
+
+  .el-scrollbar__view {
+    background: transparent !important;
+  }
   .baseTable_box {
-    position: relative;
 
     .el-table__body {
-      border-collapse: separate !important;
+      background: linear-gradient(90deg, #082050 0%, #02102a 100%);
-      /* 让边框独立，而不是合并 */
-      border-spacing: 0 8px;
-      /* 设置行与行之间的间距，可以根据需要调整值 */
-      width: 100%;
-
-      /* 表格宽度占据父容器的100% */
       tr {
-        & > td:nth-child(1) {
+        color: #fff;
-          border-left: 1px solid #dcdcdc;
+        background: linear-gradient(90deg, #082050 0%, #02102a 100%);
-          border-radius: 4px 0 0 4px;
+        &:nth-child(odd) {
+          background: linear-gradient(90deg, #082050 0%, #02102a 100%);
         }
-
+        &:nth-child(even) {
-        & > td:last-child {
+          background: linear-gradient(90deg, #102d65 0%, #081736 100%);
-          border-right: 1px solid #dcdcdc !important;
+        }
-          border-radius: 0 4px 4px 0;
+        &:hover td {
+          background-color: transparent;
         }
       }
     }
 
     .el-table__header > thead {
+      background-color: #104284 !important;
+      tr {
+        background-color: #104284 !important;
+      }
       th {
-        background-color: rgba(21, 77, 221, 0.1) !important;
+        background-color: #104284 !important;
       }
     }
-
-    &.el-table td.el-table__cell {
-      border-top: 1px solid #dcdcdc;
-      border-bottom: 1px solid #dcdcdc;
-    }
   }
+  // .baseTable_box {
+  //   position: relative;
+  //   &.el-table td.el-table__cell,
+  //   &.el-table th.el-table__cell.is-leaf {
+  //     border-bottom: none !important;
+  //     border-left: none !important;
+  //   }
+  //   .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  //     background-color: transparent;
+  //   }
+  //   .el-table__body {
+  //     // border-collapse: collapse !important;
+  //     /* 让边框独立，而不是合并 */
+  //     // border-spacing: -1px;
+  //     /* 设置行与行之间的间距，可以根据需要调整值 */
+  //     // width: 100%;
+
+  //     /* 表格宽度占据父容器的100% */
+  //     tr {
+  //       & > td:nth-child(1) {
+  //         // border-left: 1px solid #dcdcdc;
+  //         // border-radius: 4px 0 0 4px;
+  //         border-left: none !important;
+  //         border-right: none !important;
+  //       }
+
+  //       & > td:nth-child(2n) {
+  //         // border-left: 1px solid #dcdcdc;
+  //         // border-radius: 4px 0 0 4px;
+  //       }
+  //       & > td {
+  //         border-left: none !important;
+  //         border-right: none !important;
+  //       }
+  //       color: #fff;
+  //       &:nth-child(odd) {
+  //         background: linear-gradient(90deg, #082050 0%, #02102a 100%);
+  //       }
+  //       &:nth-child(even) {
+  //         background: linear-gradient(90deg, #102d65 0%, #081736 100%);
+  //       }
+  //       &:hover {
+  //         background-color: transparent;
+  //       }
+  //     }
+  //   }
+
+  //   &.el-table td.el-table__cell {
+  //     border-bottom: none;
+  //     border-top: none;
+  //   }
+  // }
 }
 
 .pagination_box {

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-07 13:52:19
+ * @LastEditTime: 2025-03-11 14:24:17
  * @FilePath: \vite-ai\data-dashboard\src\components\Navbar.vue
  * @Description: 标题栏
 -->
@@ -94,11 +94,10 @@ onMounted(() => {
 <template>
   <div class="flex justify-between h-full align-middle Navbar_wrap">
     <div class="flex items-center left">
-      <div class="bg_logo" />
     </div>
     <div class="flex">
       <!-- <div class="center_title" /> -->
-      <h1 class="center_title">5G铁路货车装卸作业智能监控平台</h1>
+      <h1 class="center_title"></h1>
     </div>
 
     <div class="flex items-center justify-end right">
@@ -113,40 +112,33 @@ onMounted(() => {
 <style lang="scss" scoped>
 .Navbar_wrap {
   // bgNav
-  // background: url("@/assets/dataScreen/common/bgNav.svg") no-repeat;
+  background: url("@/assets/common/bg_nav.png") no-repeat;
   background-size: cover;
+  background-repeat: no-repeat;
   width: 100%;
   height: 64px;
   line-height: 64px;
+
   .left {
     width: 30vw;
-    padding-left: 24px;
-
-    .bg_logo {
-      // background: url("@/assets/dataScreen/common/logo.svg") no-repeat;
-      width: 111px;
-      height: 36px;
-    }
   }
-
   .center_title {
     // margin-top: 19px;
-    // background: url("@/assets/dataScreen/common/title.svg") no-repeat center center;
+    background: url("@/assets/common/nav_title.png") no-repeat;
-    width: 670px;
+    background-size: contain;
+    background-position: center;
+    width: 547px;
     text-align: center;
-    // height: 36px;
     font-size: 32px;
-    // line-height: 2;
   }
-
   .right {
     width: 30vw;
-
     .date_box {
+      // TODO 引入特殊字体
       color: #009dff;
       font-size: 16px;
       margin-right: 15px;
-
+      font-family: DingTalk JinBuTi;
       &>span {
         padding-left: 5px;
       }
@@ -158,7 +150,7 @@ onMounted(() => {
       height: 32px;
       // border: 1px solid #009dff;
       opacity: 0.6;
-      margin-right: 15px;
+      margin-right: 24px;
     }
   }
 }

src/main.ts

@@ -2,23 +2,23 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-03-06 11:27:03
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-07 14:29:52
+ * @LastEditTime: 2025-03-11 11:11:49
  * @FilePath: \vite-ai\data-dashboard\src\main.ts
  * @Description: 入口文件
  */
 // src/main.ts
 
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import { createPinia } from 'pinia'
+import { createPinia } from "pinia";
-import App from './App.vue'
+import App from "./App.vue";
-import router from './router'
+import router from "./router";
 // import { mockServer } from './mock' // Mock服务初始化
 // import { registerGlobalDirectives } from '@/directives' // 全局指令注册
-import { registerErrorHandler } from '@/utils/error' // 全局错误处理
+import { registerErrorHandler } from "@/utils/error"; // 全局错误处理
 
 // ================== 初始化核心配置 ==================
-const app = createApp(App)
+const app = createApp(App);
-const pinia = createPinia()
+const pinia = createPinia();
 
 // ================== DataV ==================
 // // 引入 DataV
@@ -27,18 +27,18 @@ const pinia = createPinia()
 // import '@jiaminghi/data-view/lib/data-view.min.css';
 
 // ================== Element Plus 完整引入方案 ==================
-import ElementPlus from 'element-plus'
+import ElementPlus from "element-plus";
 import "@/styles/tailwind.scss";
-import 'element-plus/dist/index.css'
+import "element-plus/dist/index.css";
-import 'element-plus/theme-chalk/dark/css-vars.css' // 暗黑主题
+import "element-plus/theme-chalk/dark/css-vars.css"; // 暗黑主题
-
+import zhCn from "@/plugins/zhCnElement"; // 引入中文语言包
 // ================== 自动导入配置检查 ==================
 // 确保vite.config.ts中已配置以下内容：
 // AutoImport({ resolvers: [ElementPlusResolver()] })
 // Components({ resolvers: [ElementPlusResolver()] })
 
 // ================== 全局样式导入 ==================
-import '@/styles/index.scss' // 主样式文件
+import "@/styles/index.scss"; // 主样式文件
 
 // import 'virtual:svg-icons-register' // SVG图标注册（如果使用vite-plugin-svg-icons）
 
@@ -48,34 +48,35 @@ import '@/styles/index.scss' // 主样式文件
 // }
 
 // ================== 全局配置 ==================
-app.config.globalProperties.$version = import.meta.env.VITE_APP_VERSION // 注入版本信息
+app.config.globalProperties.$version = import.meta.env.VITE_APP_VERSION; // 注入版本信息
 
 // ================== 插件安装顺序 ==================
 app
   .use(pinia) // 优先安装Pinia
   .use(router) // 其次安装路由
   .use(ElementPlus, {
-    size: 'large', // 全局组件尺寸
+    locale: zhCn,
-    zIndex: 3000 // 全局z-index
+    size: "large", // 全局组件尺寸
-  }) 
+    zIndex: 3000, // 全局z-index
+  });
 
 // ================== 全局注册 ==================
 // registerGlobalDirectives(app) // 注册自定义指令（如权限指令v-permission）
 // registerGlobalComponents(app) // 注册全局组件（如有）
 
 // ================== 错误处理 ==================
-registerErrorHandler(app) // 注册全局错误处理
+registerErrorHandler(app); // 注册全局错误处理
 
 // ================== 大屏适配初始化 ==================
-if (import.meta.env.MODE === 'development') {
+if (import.meta.env.MODE === "development") {
   // 开发环境显示适配基准线
-  import('@/utils/screen-helper').then(({ showDesignHelper }) => {
+  import("@/utils/screen-helper").then(({ showDesignHelper }) => {
-    showDesignHelper(1920, 1080) // 根据设计稿尺寸显示辅助线
+    showDesignHelper(1920, 1080); // 根据设计稿尺寸显示辅助线
-  })
+  });
 }
 
 // ================== 挂载主应用 ==================
-app.mount('#app')
+app.mount("#app");
 
 // ================== 生产环境性能监控 ==================
 // if (import.meta.env.PROD) {

src/plugins/zhCnElement.ts

@@ -0,0 +1,19 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-03-11 11:09:39
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-03-11 11:11:22
+ * @FilePath: \5G-Loading-Bay-Web\src\plugins\zhCn.ts
+ * @Description: element-plus 中文
+ */
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+
+// 自定义分页器文案
+ zhCn.el.pagination = {
+  goto: "前往",
+  pageClassifier: "页",
+  pagesize: "条/页",
+  total: "共 {total} 条",
+};
+
+export default zhCn;

src/stores/user.ts

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-03-06 17:57:05
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-10 13:48:21
+ * @LastEditTime: 2025-03-10 13:51:54
  * @FilePath: \5G-Loading-Bay-Web\src\stores\user.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -16,14 +16,14 @@
  */
 import { defineStore } from "pinia";
 import router, { resetRouter } from "@/router";
-import { setLocal, removeLocal} from "@/utils/local";
+import { getLocal, setLocal, removeLocal} from "@/utils/local";
 interface UserState {
   token: string | null;
 }
 
 export const useUserStore = defineStore("user", {
   state: (): UserState => ({
-    token: localStorage.getItem("token"),
+    token: getLocal("token"),
   }),
   actions: {
     login(
@@ -38,7 +38,7 @@ export const useUserStore = defineStore("user", {
     },
     logout() {
       this.token = null;
-      localStorage.removeItem("token");
+      removeLocal("token");
       resetRouter();
       router.replace("/login");
     },

src/styles/common.scss

@@ -1,3 +1,4 @@
+@import url('./fonts.scss');
 @import url('./element-plus.scss');
 
 // 标题背景

src/styles/element-plus.scss

@@ -46,6 +46,19 @@
   }
 }
 
+.el-select {
+  background-color: #032B5C; /* 自定义背景色 */
+  border: none; /* 可选：去掉边框 */
+}
+
+/* 修改下拉菜单背景色 */
+.el-select-dropdown {
+  background-color: #032B5C; /* 下拉菜单背景 */
+  border: none; /* 可选：去掉下拉框边框 */
+  border: 1px solid #032B5C;
+  box-shadow: none; /* 可选：去掉阴影 */
+}
+
 .el-select__dropdown {
   background: #002a5c; /* 下拉面板背景 */
   .el-select__item {

src/styles/fonts.scss

@@ -0,0 +1,7 @@
+// src/assets/fonts.scss
+@font-face {
+    font-family: 'DingTalk JinBuTi'; // 自定义字体名称
+    src: url('@/assets/fonts/DingTalk JinBuTi.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}

src/views/dashboard/DeviceStatus.scss

@@ -6,9 +6,8 @@
 
 
 
-
   .query-btn {
-    background: linear-gradient( 180deg, #2589FF 0%, #46A9ED 100%);
+    background: linear-gradient(180deg, #2589ff 0%, #46a9ed 100%);
     border: 1px solid #42a5f5;
     border-radius: 2px;
     color: white;
@@ -19,15 +18,22 @@
   .reset-btn {
     background: transparent;
     border-radius: 2px;
-    border: 1px solid #088BD6;
+    border: 1px solid #088bd6;
     color: white;
     box-shadow: none;
     margin-left: 0;
   }
 }
 
-
+.device-status-content-box{
-
+  .el-scrollbar__view {
-  .el-scrollbar__view{
+    background: transparent !important;
-    height: 650px !important;
+    height: 640px;
   }
+  .el-table__inner-wrapper{
+    background-color: #002a5c !important;
+  }
+  .el-table__body-wrapper, .el-scrollbar__wrap, .el-scrollbar{
+    background: transparent !important;
+  }
+}

src/views/dashboard/DeviceStatus.vue

@@ -2,12 +2,12 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-03-06 15:15:47
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-07 17:35:35
+ * @LastEditTime: 2025-03-11 13:48:20
  * @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>
-    <div class="device-status-header">
+    <div class="device-status-header mt-[32px]">
         <ContentHeader bgLayout="1855">
             <template #title>
                 <div class="w-[200px] bg_title bg_title_6">
@@ -15,101 +15,97 @@
             </template>
         </ContentHeader>
     </div>
-    <div class="device-status-search-box">
+    <div class="px-[16px] device-status-content-box">
-        <el-select v-model="formData.name" placeholder="设备名称" class="custom-select">
+        <div class="device-status-search-box">
-            <el-option label="设备A" value="deviceA"></el-option>
+            <el-select v-model="formData.name" placeholder="设备名称" class="custom-select">
-            <el-option label="设备B" value="deviceB"></el-option>
+                <el-option label="设备A" value="deviceA"></el-option>
-        </el-select>
+                <el-option label="设备B" value="deviceB"></el-option>
-        <!-- <el-select v-model="deviceId" placeholder="设备ID" class="query-select">
+            </el-select>
-            <el-option label="ID-001" value="id001"></el-option>
+            <el-select v-model="formData.deviceId" placeholder="设备ID" class="custom-select">
-            <el-option label="ID-002" value="id002"></el-option>
+                <el-option label="ID-001" value="id001"></el-option>
-        </el-select> -->
+                <el-option label="ID-002" value="id002"></el-option>
-        <el-button type="primary" @click="handleQuery" class="query-btn">
+            </el-select>
-            <i class="el-icon-search"></i> 查询
+            <el-button type="primary" @click="handleQuery" class="query-btn">
-        </el-button>
+                <i class="el-icon-search"></i> 查询
-        <el-button @click="handleReset" class="reset-btn">
+            </el-button>
-            <i class="el-icon-refresh-right"></i> 重置
+            <el-button @click="handleReset" class="reset-btn">
-        </el-button>
+                <i class="el-icon-refresh-right"></i> 重置
-    </div>
+            </el-button>
-    <div class="alarm_table" v-loading="dataLoading" :element-loading-svg="svg"
+        </div>
-        element-loading-svg-view-box="-10, -10, 50, 50">
+        <div class="bg-transparent baseTable_wrap" v-loading="dataLoading" :element-loading-svg="svg"
-        <template v-if="pagination.total > 0">
+            element-loading-svg-view-box="-10, -10, 50, 50">
-            <BaseTable class="ds_table" :total="pagination.total" :pageSize="pagination.pageSize" :dataSource="listData"
+            <template v-if="pagination.total > 0">
-                :isFixedPagination="true" :columns="columns" :page="pagination.currentPage"
+                <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
-                @change="handleTableChange">
+                    :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true" :columns="columns"
-                <template v-slot:actionBar="{ row }">
+                    :page="pagination.currentPage" @change="handleTableChange">
-                    <ul class="table_action_box">
+                    <template v-slot:actionBar="{ row }">
-                        <li class="flex items-center" @click="openHistory(row)">
+                        <ul class="flex table_action_box">
-                            <el-button text>
+                            <li class="flex items-center mr-[16px]" @click="openCurrent(row)">
-                                <i class="iconfont icon-shanchu pr-[8px]"
+                                <el-button text>
-                                    :style="{ fontSize: '14px', color: '#E80D0D' }" />
+                                    <span :style="{
-                                <span :style="{
+                                        fontSize: '14px',
-                                    fontSize: '14px',
+                                        color: '#37DBFF'
-                                    color: '#E80D0D'
+                                    }">
-                                }">
+                                        即时视频
-                                    删除
+                                    </span>
-                                </span>
+                                </el-button>
-                            </el-button>
+                            </li>
-                        </li>
+                            <li class="flex items-center" @click="openHistory(row)">
-                    </ul>
+                                <el-button text>
-                </template>
+                                    <span :style="{
-            </BaseTable>
+                                        fontSize: '14px',
-        </template>
+                                        color: '#37DBFF'
+                                    }">
+                                        历史视频
+                                    </span>
+                                </el-button>
+                            </li>
+                        </ul>
+                    </template>
+                </BaseTable>
+            </template>
+        </div>
     </div>
 
+
 </template>
 
 
 <script setup lang="ts">
 import { BaseTable } from "@/components/CustomTable";
 import ContentHeader from '@/components/ContentHeader.vue';
+import onLineIcon from '@/assets/common/online_icon.png';
+import outLineIcon from '@/assets/common/outline_icon.png';
+import errorIcon from '@/assets/common/error_icon.png';
 
 defineOptions({
     name: "DeviceStatusIndex"
 });
 const alarmLevelStatusEnum: Record<string, any>[] = [
     {
-        color: "rgba(232, 13, 13, 1)",
+        color: "#52C41A",
         value: "1",
-        label: "紧急",
+        label: "在线",
-        isDelete: false,
+        isDelete: true,
-        icon: "ArrowUpOutlined",
+        icon: onLineIcon,
         id: "1"
     },
     {
-        color: "rgba(255, 136, 0, 1)",
+        color: "#999999",
         value: "2",
-        label: "较高",
+        label: "离线",
         isDelete: false,
+        icon: outLineIcon,
+
         id: "2"
     },
     {
-        color: "rgba(68, 139, 245, 1)",
+        color: "#E80D0D",
         value: "3",
-        label: "一般",
+        label: "故障",
         isDelete: false,
+        icon: errorIcon,
         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"
     }
 ];
 
@@ -132,6 +128,10 @@ const columns = [
         label: "设备代码",
         property: "code"
     },
+    {
+        label: "设备位置",
+        property: "deviceGroup"
+    },
     {
         label: "设备状态",
         property: "status",
@@ -139,25 +139,32 @@ const columns = [
             console.log(val);
             const currentLevelObj =
                 alarmLevelStatusEnum[Number(val?.status) - 1];
+
             return h(
                 "div",
                 {
                     style: {
                         fontSize: "14px",
+                        display: "flex",
+                        alignItems: "center",
+                        lineHeight: "20px",
                         color: currentLevelObj.color
                     }
                 },
                 [
-                    h("i", {
+                    h('img', {
-                        class: `iconfont pr-[8px] ${currentLevelObj.value === "1"
+                        // 使用 @ 别名引用 assets/common 目录下的图片
-                            ? "icon-xiangshangjiantouquan"
+                        src: currentLevelObj.icon,
-                            : "icon-xiala"
+                        style: {
-                            }`
+                            width: '20px',
+                            height: '20px',
+                            marginRight: "12px"
+                        }
                     }),
                     h(
                         "span",
                         {
-                            fontSize: "14px"
+                            fontSize: "14px",
                         },
                         currentLevelObj.label
                     )
@@ -215,14 +222,13 @@ const getList = async () => {
 
 // 查询方法
 const handleQuery = () => {
-    console.log('查询参数：', { deviceName: deviceName.value, deviceId: deviceId.value });
     getList()
 };
 
 // 重置方法
 const handleReset = () => {
     formData.name = '';
-    // deviceId.value = '';
+    formData.deviceId = '';
 };
 
 function handleTableChange(record) {
@@ -234,12 +240,18 @@ function handleTableChange(record) {
     };
     getList();
 }
-/**操作栏事件 */
+/**打开视频 */
+function openCurrent(row) {
+    console.log(row, "openCurrent");
+    currentRow.value = row;
+}
+
 function openHistory(row) {
     console.log(row, "openHistory");
     currentRow.value = row;
 }
 
+
 onMounted(() => {
     getList();
 });

src/views/dashboard/PoleMonitor.scss

@@ -0,0 +1,5 @@
+.pole-monitor-wrap {
+ .search-section{
+    padding: 16px 0;
+ }
+}

src/views/dashboard/PoleMonitor.vue

@@ -2,12 +2,12 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-03-06 15:15:01
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-06 15:15:26
+ * @LastEditTime: 2025-03-11 13:46:36
  * @FilePath: \vite-ai\data-dashboard\src\views\dashboard\PoleMonitor.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-    <div class="pole-monitor-warp">
+    <div class="pole-monitor-wrap">
         <div class="module-header">
             <ContentHeader bgLayout="1855">
                 <template #title>
@@ -46,15 +46,15 @@
             </el-row>
         </div>
         <!-- 主体内容区域 -->
-        <div class="pole-monitor-main">
+        <div class="flex justify-between pole-monitor-main">
             <!-- 左侧视频与缩略图区域 -->
             <div class="left-panel">
                 <!-- 主图显示 -->
                 <div class="main-image">
                     <img src="https://picsum.photos/300/200?random=1" alt="监控画面">
-                <div class="image-info">
+                    <div class="image-info">
-                    长: 35cm 宽: 52cm 高: 28cm 体积: 50960cm 重量: 58kg
+                        长: 35cm 宽: 52cm 高: 28cm 体积: 50960cm 重量: 58kg
-                </div>
+                    </div>
                 </div>
 
                 <!-- 缩略图区域 -->
@@ -63,12 +63,16 @@
                 </div>
             </div>
             <!-- 右侧表格区域 -->
-            <div class="right-panel">
+            <div class="right-panel w-[934px]">
-                <el-table 
+                <div class="bg-transparent baseTable_wrap">
-                    :data="tableData" 
+                    <template v-if="pagination.total > 0">
-                    stripe 
+                        <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
-                    class="custom-table"
+                            :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
-                >
+                            :columns="columns" :page="pagination.currentPage" @change="handleTableChange">
+                        </BaseTable>
+                    </template>
+                </div>
+                <!-- <el-table :data="tableData" stripe class="custom-table">
                     <el-table-column prop="carNo" label="车号" width="80"></el-table-column>
                     <el-table-column prop="carType" label="车型" width="60"></el-table-column>
                     <el-table-column prop="carriageNo" label="车厢号" width="80"></el-table-column>
@@ -76,33 +80,126 @@
                     <el-table-column prop="faultType" label="故障类型" width="120"></el-table-column>
                     <el-table-column prop="level" label="等级" width="60"></el-table-column>
                     <el-table-column prop="review" label="复核" width="60"></el-table-column>
-                    <el-table-column prop="time" label="时间" width="120"></el-table-column>
+                    <el-table-column prop="date" label="时间" width="120"></el-table-column>
-                </el-table>
+                </el-table> -->
             </div>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
 import ContentHeader from '@/components/ContentHeader.vue';
-import { ref } from 'vue';
+import { BaseTable } from "@/components/CustomTable";
+
+defineOptions({
+    name: "PoleMonitorIndex"
+});
 // 搜索表单
 const searchForm = ref({
-  trainNo: 'all',
+    trainNo: 'all',
-  carriageNo: 'all',
+    carriageNo: 'all',
-  faultType: 'all'
+    faultType: 'all'
 });
 
-// 模拟数据
+
-const tableData = ref([
+
-  { carNo: 'CA1001', carType: 'C64', carriageNo: '101', warnType: '车辆损坏', faultType: '搭扣未搭', level: '1', review: '是', time: '2025-02-05 14:33' },
+const currentRow = ref<Record<string, any>>({});
-  // 其他数据...
+const columns = [
-]);
+    {
-</script>
+        label: "车号",
-<style scoped lang="scss">
+        property: "carNo",
-.pole-monitor-warp {
+        width: 100,
-    .pole-monitor-main{
+    },
-        display: flex;
+    {
-        justify-content: space-between;
+        label: "车型",
+        property: "carType",
+        width: 100,
+    },
+    {
+        label: "车厢号",
+        property: "carriageNo",
+        width: 100,
+    },
+    {
+        label: "告警类型",
+        property: "warnType",
+        width: 120,
+    },
+    {
+        label: "故障类型",
+        property: "faultType",
+        width: 120,
+    },
+    {
+        label: "等级",
+        property: "level",
+        width: 80,
+    },
+    {
+        label: "复核",
+        property: "review",
+        width: 80,
+    },
+    {
+        label: "时间",
+        property: "date"
     }
+]
+
+const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
+
+const listData = ref([]);
+
+// const searchValue = ref("");
+
+const formData = reactive({
+    name: "",
+    status: ""
+});
+
+const dataLoading = ref(true);
+
+const getList = async () => {
+    const { currentPage, pageSize } = pagination.value;
+    const res = await fetch('/api/getPoleMonitorList', {
+        method: 'POST',
+        body: JSON.stringify({ ...formData, page: currentPage, pageSize })
+    })
+    const { data } = await res.json()
+    console.log(data, 'getList_data')
+    listData.value = data.list;
+    console.log(data.list);
+    pagination.value = {
+        ...pagination.value,
+        total: data.total
+    };
+    dataLoading.value = false;
+};
+
+// 查询方法
+const handleQuery = () => {
+    getList()
+};
+
+// 重置方法
+const handleReset = () => {
+    formData.name = '';
+    // deviceId.value = '';
+};
+
+function handleTableChange(record) {
+    console.log("handleTableChange_record", record);
+    pagination.value = {
+        ...pagination.value,
+        currentPage: record.page,
+        pageSize: record.pageSize
+    };
+    getList();
 }
+
+onMounted(() => {
+    getList();
+});
+</script>
+<style lang="scss">
+@import url('./PoleMonitor.scss');
 </style>

src/views/login/Login.scss

@@ -5,10 +5,7 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  //   background-image: url('https://via.placeholder.com/1920x1080?text=铁路货车背景图');
   background-image: url("@/assets/login/big_bg.png");
- 
-
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;

src/views/login/Login.vue

@@ -1,11 +1,3 @@
-<!--
- * @Author: donghao donghao@supervision.ltd
- * @Date: 2025-03-06 13:56:27
- * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-10 13:50:05
- * @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
--->
 <template>
     <div class="login-container">
         <div class="bg-login-title">

vite.config.ts

@@ -31,8 +31,9 @@ export default defineConfig(({ mode }) => {
     plugins: [
       vue(),
       viteMockServe({
-        mockPath: 'mock',
+        mockPath: 'mock', // 模拟数据文件存放的目录
-        localEnabled: env.VITE_MOCK_ENABLED === 'true'
+        localEnabled: env.VITE_MOCK_ENABLED === 'true',
+        rodEnabled: false, // 生产环境是否开启 mock 功能
       }),
       AutoImport({
         imports: ["vue"],