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

main
donghao 2 months ago
parent 6cb7776c78
commit cde289a2d7

@ -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)

@ -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";

@ -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[];

@ -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: ""
});
}

@ -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
}
};

497
package-lock.json generated

@ -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",

@ -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",

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 194 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 855 B

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 915 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 711 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 420 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 468 B

@ -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;
/* 让边框独立,而不是合并 */
border-spacing: 0 8px;
/* 设置行与行之间的间距,可以根据需要调整值 */
width: 100%;
/* 表格宽度占据父容器的100% */
background: linear-gradient(90deg, #082050 0%, #02102a 100%);
tr {
& > td:nth-child(1) {
border-left: 1px solid #dcdcdc;
border-radius: 4px 0 0 4px;
color: #fff;
background: linear-gradient(90deg, #082050 0%, #02102a 100%);
&:nth-child(odd) {
background: linear-gradient(90deg, #082050 0%, #02102a 100%);
}
& > td:last-child {
border-right: 1px solid #dcdcdc !important;
border-radius: 0 4px 4px 0;
&:nth-child(even) {
background: linear-gradient(90deg, #102d65 0%, #081736 100%);
}
&: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 {

@ -485,4 +485,4 @@ export default defineComponent({
);
};
}
});
});

@ -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;
width: 670px;
background: url("@/assets/common/nav_title.png") no-repeat;
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;
}
}
}

@ -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 { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
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 pinia = createPinia()
// ================== 初始化核心配置 ==================
const app = createApp(App);
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/theme-chalk/dark/css-vars.css' // 暗黑主题
import "element-plus/dist/index.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,38 +48,39 @@ 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', // 全局组件尺寸
zIndex: 3000 // 全局z-index
})
.use(ElementPlus, {
locale: zhCn,
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 }) => {
showDesignHelper(1920, 1080) // 根据设计稿尺寸显示辅助线
})
import("@/utils/screen-helper").then(({ showDesignHelper }) => {
showDesignHelper(1920, 1080); // 根据设计稿尺寸显示辅助线
});
}
// ================== 挂载主应用 ==================
app.mount('#app')
app.mount("#app");
// ================== 生产环境性能监控 ==================
// if (import.meta.env.PROD) {
// import('@/utils/performance').then(({ initPerformance }) => {
// initPerformance()
// })
// }
// }

@ -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;

@ -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");
},

@ -1,3 +1,4 @@
@import url('./fonts.scss');
@import url('./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 {

@ -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;
}

@ -4,11 +4,10 @@
gap: 12px;
margin: 10px 0;
.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;
}
}
.el-scrollbar__view{
height: 650px !important;
}
.device-status-content-box{
.el-scrollbar__view {
background: transparent !important;
height: 640px;
}
.el-table__inner-wrapper{
background-color: #002a5c !important;
}
.el-table__body-wrapper, .el-scrollbar__wrap, .el-scrollbar{
background: transparent !important;
}
}

@ -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">
<el-select v-model="formData.name" placeholder="设备名称" class="custom-select">
<el-option label="设备A" value="deviceA"></el-option>
<el-option label="设备B" value="deviceB"></el-option>
</el-select>
<!-- <el-select v-model="deviceId" placeholder="设备ID" class="query-select">
<el-option label="ID-001" value="id001"></el-option>
<el-option label="ID-002" value="id002"></el-option>
</el-select> -->
<el-button type="primary" @click="handleQuery" class="query-btn">
<i class="el-icon-search"></i> 查询
</el-button>
<el-button @click="handleReset" class="reset-btn">
<i class="el-icon-refresh-right"></i> 重置
</el-button>
</div>
<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="true" :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 class="px-[16px] device-status-content-box">
<div class="device-status-search-box">
<el-select v-model="formData.name" placeholder="设备名称" class="custom-select">
<el-option label="设备A" value="deviceA"></el-option>
<el-option label="设备B" value="deviceB"></el-option>
</el-select>
<el-select v-model="formData.deviceId" placeholder="设备ID" class="custom-select">
<el-option label="ID-001" value="id001"></el-option>
<el-option label="ID-002" value="id002"></el-option>
</el-select>
<el-button type="primary" @click="handleQuery" class="query-btn">
<i class="el-icon-search"></i> 查询
</el-button>
<el-button @click="handleReset" class="reset-btn">
<i class="el-icon-refresh-right"></i> 重置
</el-button>
</div>
<div class="bg-transparent baseTable_wrap" v-loading="dataLoading" :element-loading-svg="svg"
element-loading-svg-view-box="-10, -10, 50, 50">
<template v-if="pagination.total > 0">
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true" :columns="columns"
:page="pagination.currentPage" @change="handleTableChange">
<template v-slot:actionBar="{ row }">
<ul class="flex table_action_box">
<li class="flex items-center mr-[16px]" @click="openCurrent(row)">
<el-button text>
<span :style="{
fontSize: '14px',
color: '#37DBFF'
}">
即时视频
</span>
</el-button>
</li>
<li class="flex items-center" @click="openHistory(row)">
<el-button text>
<span :style="{
fontSize: '14px',
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: "紧急",
isDelete: false,
icon: "ArrowUpOutlined",
label: "在线",
isDelete: true,
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", {
class: `iconfont pr-[8px] ${currentLevelObj.value === "1"
? "icon-xiangshangjiantouquan"
: "icon-xiala"
}`
h('img', {
// 使 @ assets/common
src: currentLevelObj.icon,
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();
});

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

@ -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">
: 35cm : 52cm : 28cm 体积: 50960cm 重量: 58kg
</div>
<div class="image-info">
: 35cm : 52cm : 28cm 体积: 50960cm 重量: 58kg
</div>
</div>
<!-- 缩略图区域 -->
@ -63,12 +63,16 @@
</div>
</div>
<!-- 右侧表格区域 -->
<div class="right-panel">
<el-table
:data="tableData"
stripe
class="custom-table"
>
<div class="right-panel w-[934px]">
<div class="bg-transparent baseTable_wrap">
<template v-if="pagination.total > 0">
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
: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>
<el-table-column prop="date" label="时间" width="120"></el-table-column>
</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',
carriageNo: 'all',
faultType: 'all'
trainNo: 'all',
carriageNo: 'all',
faultType: 'all'
});
//
const tableData = ref([
{ carNo: 'CA1001', carType: 'C64', carriageNo: '101', warnType: '车辆损坏', faultType: '搭扣未搭', level: '1', review: '是', time: '2025-02-05 14:33' },
// ...
]);
</script>
<style scoped lang="scss">
.pole-monitor-warp {
.pole-monitor-main{
display: flex;
justify-content: space-between;
const currentRow = ref<Record<string, any>>({});
const columns = [
{
label: "车号",
property: "carNo",
width: 100,
},
{
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>

@ -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;

@ -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">

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 398 KiB

Loading…
Cancel
Save