Bläddra i källkod
Merge branch 'master' of http://112.33.111.155:3000/yuhy/auseft.platform.datav
# Conflicts: # package-lock.json # package.json # src/app/app.config.ts # src/app/routes/data-v/workstation/workstation.component.html # src/app/routes/data-v/workstation/workstation.component.ts # src/styles.less # yarn.lockmaster
ocean2
1 år sedan
33 ändrade filer med 2089 tillägg och 1304 borttagningar
Unifierad Vy
Diff Options
-
+237 -12package-lock.json
-
+5 -3package.json
-
+6 -0src/app/app.config.ts
-
+8 -0src/app/core/utils/signalr.service.ts
-
+7 -7src/app/layout/basic/widgets/notify.component.ts
-
+11 -0src/app/routes/data-v/card/card.component.less
-
+15 -2src/app/routes/data-v/card/card.component.ts
-
+19 -8src/app/routes/data-v/navigation/navigation.component.ts
-
+3 -1src/app/routes/data-v/routes.ts
-
+1 -0src/app/routes/data-v/s1/chart-component/chart-component.component.css
-
+1 -0src/app/routes/data-v/s1/chart-component/chart-component.component.html
-
+120 -0src/app/routes/data-v/s1/chart-component/chart-component.component.ts
-
+14 -30src/app/routes/data-v/s1/s1.component.html
-
+25 -13src/app/routes/data-v/s1/s1.component.less
-
+314 -136src/app/routes/data-v/s1/s1.component.ts
-
+1 -0src/app/routes/data-v/threejs/threejs.component.html
-
+0 -0src/app/routes/data-v/threejs/threejs.component.less
-
+19 -0src/app/routes/data-v/threejs/threejs.component.ts
-
+13 -0src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html
-
+3 -0src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.less
-
+65 -0src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts
-
+94 -0src/app/routes/data-v/workstation/ag-grid-component/pagination-style/pagination.less
-
+17 -0src/app/routes/data-v/workstation/grid-button/grid-button.less
-
+38 -0src/app/routes/data-v/workstation/grid-button/grid-button.ts
-
+18 -14src/app/routes/data-v/workstation/workstation.component.html
-
+107 -19src/app/routes/data-v/workstation/workstation.component.less
-
+85 -237src/app/routes/data-v/workstation/workstation.component.ts
-
+5 -6src/app/routes/passport/login/login.component.html
-
+5 -1src/app/routes/passport/login/login.component.less
-
+32 -32src/styles.less
-
+1 -1src/styles/theme.less
-
+0 -1tsconfig.json
-
+800 -781yarn.lock
+ 237
- 12
package-lock.json
Visa fil
| @@ -16,6 +16,7 @@ | |||||
| "@angular/platform-browser": "^17.1.0", | "@angular/platform-browser": "^17.1.0", | ||||
| "@angular/platform-browser-dynamic": "^17.1.0", | "@angular/platform-browser-dynamic": "^17.1.0", | ||||
| "@angular/router": "^17.1.0", | "@angular/router": "^17.1.0", | ||||
| "@aspnet/signalr": "^1.0.27", | |||||
| "@delon/abc": "^17.1.0", | "@delon/abc": "^17.1.0", | ||||
| "@delon/acl": "^17.1.0", | "@delon/acl": "^17.1.0", | ||||
| "@delon/auth": "^17.1.0", | "@delon/auth": "^17.1.0", | ||||
| @@ -25,15 +26,16 @@ | |||||
| "@delon/mock": "^17.1.0", | "@delon/mock": "^17.1.0", | ||||
| "@delon/theme": "^17.1.0", | "@delon/theme": "^17.1.0", | ||||
| "@delon/util": "^17.1.0", | "@delon/util": "^17.1.0", | ||||
| "ag-grid-angular": "^31.1.1", | |||||
| "@microsoft/signalr": "^8.0.0", | |||||
| "@microsoft/signalr-protocol-msgpack": "^8.0.0", | |||||
| "@types/signalr": "^2.4.3", | |||||
| "ag-grid-angular": "^31.0.2", | |||||
| "echarts": "^5.5.0", | "echarts": "^5.5.0", | ||||
| "moment": "^2.30.1", | "moment": "^2.30.1", | ||||
| "mqtt": "^5.3.6", | "mqtt": "^5.3.6", | ||||
| "ng-alain": "^17.1.0", | "ng-alain": "^17.1.0", | ||||
| "ng-zorro-antd": "^17.1.0", | "ng-zorro-antd": "^17.1.0", | ||||
| "ng2-mqtt": "^0.1.2", | |||||
| "ngx-mqtt": "^17.0.0", | "ngx-mqtt": "^17.0.0", | ||||
| "paho-mqtt": "^1.1.0", | |||||
| "rxjs": "~7.8.0", | "rxjs": "~7.8.0", | ||||
| "screenfull": "^6.0.2", | "screenfull": "^6.0.2", | ||||
| "tslib": "^2.3.0", | "tslib": "^2.3.0", | ||||
| @@ -966,6 +968,12 @@ | |||||
| "tslib": "^2.0.3" | "tslib": "^2.0.3" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/@aspnet/signalr": { | |||||
| "version": "1.0.27", | |||||
| "resolved": "https://registry.npmmirror.com/@aspnet/signalr/-/signalr-1.0.27.tgz", | |||||
| "integrity": "sha512-utZvBF9snjdwIBpvcFa6htqFTVaTN50QIZUoiznKpYSZImew1a1Ci7VYmK8HODqwRqUtj0o5/xR1nzt8xex5sA==", | |||||
| "deprecated": "This package is no longer supported. Consider using @microsoft/signalr." | |||||
| }, | |||||
| "node_modules/@assemblyscript/loader": { | "node_modules/@assemblyscript/loader": { | ||||
| "version": "0.10.1", | "version": "0.10.1", | ||||
| "resolved": "https://registry.npmmirror.com/@assemblyscript/loader/-/loader-0.10.1.tgz", | "resolved": "https://registry.npmmirror.com/@assemblyscript/loader/-/loader-0.10.1.tgz", | ||||
| @@ -3628,6 +3636,74 @@ | |||||
| "node": ">= 0.4" | "node": ">= 0.4" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/@microsoft/signalr": { | |||||
| "version": "8.0.0", | |||||
| "resolved": "https://registry.npmmirror.com/@microsoft/signalr/-/signalr-8.0.0.tgz", | |||||
| "integrity": "sha512-K/wS/VmzRWePCGqGh8MU8OWbS1Zvu7DG7LSJS62fBB8rJUXwwj4axQtqrAAwKGUZHQF6CuteuQR9xMsVpM2JNA==", | |||||
| "dependencies": { | |||||
| "abort-controller": "^3.0.0", | |||||
| "eventsource": "^2.0.2", | |||||
| "fetch-cookie": "^2.0.3", | |||||
| "node-fetch": "^2.6.7", | |||||
| "ws": "^7.4.5" | |||||
| } | |||||
| }, | |||||
| "node_modules/@microsoft/signalr-protocol-msgpack": { | |||||
| "version": "8.0.0", | |||||
| "resolved": "https://registry.npmmirror.com/@microsoft/signalr-protocol-msgpack/-/signalr-protocol-msgpack-8.0.0.tgz", | |||||
| "integrity": "sha512-XtN5lUPVOtU96aqpB6z00o0TQayx5fmcf7CeQKDXF1flg8G96wtNCFXKb/p4sM/nvprjSmz0JiWQfc1TVXsa6Q==", | |||||
| "dependencies": { | |||||
| "@microsoft/signalr": ">=8.0.0", | |||||
| "@msgpack/msgpack": "^2.7.0" | |||||
| } | |||||
| }, | |||||
| "node_modules/@microsoft/signalr/node_modules/node-fetch": { | |||||
| "version": "2.7.0", | |||||
| "resolved": "https://registry.npmmirror.com/node-fetch/-/node-fetch-2.7.0.tgz", | |||||
| "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", | |||||
| "dependencies": { | |||||
| "whatwg-url": "^5.0.0" | |||||
| }, | |||||
| "engines": { | |||||
| "node": "4.x || >=6.0.0" | |||||
| }, | |||||
| "peerDependencies": { | |||||
| "encoding": "^0.1.0" | |||||
| }, | |||||
| "peerDependenciesMeta": { | |||||
| "encoding": { | |||||
| "optional": true | |||||
| } | |||||
| } | |||||
| }, | |||||
| "node_modules/@microsoft/signalr/node_modules/ws": { | |||||
| "version": "7.5.9", | |||||
| "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz", | |||||
| "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", | |||||
| "engines": { | |||||
| "node": ">=8.3.0" | |||||
| }, | |||||
| "peerDependencies": { | |||||
| "bufferutil": "^4.0.1", | |||||
| "utf-8-validate": "^5.0.2" | |||||
| }, | |||||
| "peerDependenciesMeta": { | |||||
| "bufferutil": { | |||||
| "optional": true | |||||
| }, | |||||
| "utf-8-validate": { | |||||
| "optional": true | |||||
| } | |||||
| } | |||||
| }, | |||||
| "node_modules/@msgpack/msgpack": { | |||||
| "version": "2.8.0", | |||||
| "resolved": "https://registry.npmmirror.com/@msgpack/msgpack/-/msgpack-2.8.0.tgz", | |||||
| "integrity": "sha512-h9u4u/jiIRKbq25PM+zymTyW6bhTzELvOoUd+AvYriWOAKpLGnIamaET3pnHYoI5iYphAHBI4ayx0MehR+VVPQ==", | |||||
| "engines": { | |||||
| "node": ">= 10" | |||||
| } | |||||
| }, | |||||
| "node_modules/@ng-util/lazy": { | "node_modules/@ng-util/lazy": { | ||||
| "version": "17.0.1", | "version": "17.0.1", | ||||
| "resolved": "https://registry.npmmirror.com/@ng-util/lazy/-/lazy-17.0.1.tgz", | "resolved": "https://registry.npmmirror.com/@ng-util/lazy/-/lazy-17.0.1.tgz", | ||||
| @@ -4592,6 +4668,14 @@ | |||||
| "integrity": "sha512-px7OMFO/ncXxixDe1zR13V1iycqWae0MxTaw62RpFlksUi5QuNWgQJFkTQjIOvrmutJbI7Fp2Y2N1F6D2R4G6w==", | "integrity": "sha512-px7OMFO/ncXxixDe1zR13V1iycqWae0MxTaw62RpFlksUi5QuNWgQJFkTQjIOvrmutJbI7Fp2Y2N1F6D2R4G6w==", | ||||
| "dev": true | "dev": true | ||||
| }, | }, | ||||
| "node_modules/@types/jquery": { | |||||
| "version": "3.5.29", | |||||
| "resolved": "https://registry.npmmirror.com/@types/jquery/-/jquery-3.5.29.tgz", | |||||
| "integrity": "sha512-oXQQC9X9MOPRrMhPHHOsXqeQDnWeCDT3PelUIg/Oy8FAbzSZtFHRjc7IpbfFVmpLtJ+UOoywpRsuO5Jxjybyeg==", | |||||
| "dependencies": { | |||||
| "@types/sizzle": "*" | |||||
| } | |||||
| }, | |||||
| "node_modules/@types/json-schema": { | "node_modules/@types/json-schema": { | ||||
| "version": "7.0.15", | "version": "7.0.15", | ||||
| "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz", | "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz", | ||||
| @@ -4718,6 +4802,19 @@ | |||||
| "@types/node": "*" | "@types/node": "*" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/@types/signalr": { | |||||
| "version": "2.4.3", | |||||
| "resolved": "https://registry.npmmirror.com/@types/signalr/-/signalr-2.4.3.tgz", | |||||
| "integrity": "sha512-W6C1wMRIIhJV9nsw19yhw4h9zlkLnJzsu9dYlH35aHUQblPsDF6UpCcAVu4Ljy4RS3c3uJyV88wf2M2SOWqqZg==", | |||||
| "dependencies": { | |||||
| "@types/jquery": "*" | |||||
| } | |||||
| }, | |||||
| "node_modules/@types/sizzle": { | |||||
| "version": "2.3.8", | |||||
| "resolved": "https://registry.npmmirror.com/@types/sizzle/-/sizzle-2.3.8.tgz", | |||||
| "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==" | |||||
| }, | |||||
| "node_modules/@types/sockjs": { | "node_modules/@types/sockjs": { | ||||
| "version": "0.3.36", | "version": "0.3.36", | ||||
| "resolved": "https://registry.npmmirror.com/@types/sockjs/-/sockjs-0.3.36.tgz", | "resolved": "https://registry.npmmirror.com/@types/sockjs/-/sockjs-0.3.36.tgz", | ||||
| @@ -6423,9 +6520,19 @@ | |||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/commist": { | "node_modules/commist": { | ||||
| <<<<<<< HEAD | |||||
| "version": "3.2.0", | "version": "3.2.0", | ||||
| "resolved": "https://registry.npmmirror.com/commist/-/commist-3.2.0.tgz", | "resolved": "https://registry.npmmirror.com/commist/-/commist-3.2.0.tgz", | ||||
| "integrity": "sha512-4PIMoPniho+LqXmpS5d3NuGYncG6XWlkBSVGiWycL22dd42OYdUGil2CWuzklaJoNxyxUSpO4MKIBU94viWNAw==" | "integrity": "sha512-4PIMoPniho+LqXmpS5d3NuGYncG6XWlkBSVGiWycL22dd42OYdUGil2CWuzklaJoNxyxUSpO4MKIBU94viWNAw==" | ||||
| ======= | |||||
| "version": "1.1.0", | |||||
| "resolved": "https://registry.npmmirror.com/commist/-/commist-1.1.0.tgz", | |||||
| "integrity": "sha512-rraC8NXWOEjhADbZe9QBNzLAN5Q3fsTPQtBV+fEVj6xKIgDgNiEVE6ZNfHpZOqfQ21YUzfVNUXLOEZquYvQPPg==", | |||||
| "dependencies": { | |||||
| "leven": "^2.1.0", | |||||
| "minimist": "^1.1.0" | |||||
| } | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| }, | }, | ||||
| "node_modules/common-path-prefix": { | "node_modules/common-path-prefix": { | ||||
| "version": "3.0.0", | "version": "3.0.0", | ||||
| @@ -7504,7 +7611,6 @@ | |||||
| "version": "0.1.13", | "version": "0.1.13", | ||||
| "resolved": "https://registry.npmmirror.com/encoding/-/encoding-0.1.13.tgz", | "resolved": "https://registry.npmmirror.com/encoding/-/encoding-0.1.13.tgz", | ||||
| "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", | "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", | ||||
| "dev": true, | |||||
| "optional": true, | "optional": true, | ||||
| "dependencies": { | "dependencies": { | ||||
| "iconv-lite": "^0.6.2" | "iconv-lite": "^0.6.2" | ||||
| @@ -7514,7 +7620,6 @@ | |||||
| "version": "0.6.3", | "version": "0.6.3", | ||||
| "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz", | "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz", | ||||
| "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", | "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", | ||||
| "dev": true, | |||||
| "optional": true, | "optional": true, | ||||
| "dependencies": { | "dependencies": { | ||||
| "safer-buffer": ">= 2.1.2 < 3.0.0" | "safer-buffer": ">= 2.1.2 < 3.0.0" | ||||
| @@ -8446,6 +8551,14 @@ | |||||
| "node": ">=0.8.x" | "node": ">=0.8.x" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/eventsource": { | |||||
| "version": "2.0.2", | |||||
| "resolved": "https://registry.npmmirror.com/eventsource/-/eventsource-2.0.2.tgz", | |||||
| "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==", | |||||
| "engines": { | |||||
| "node": ">=12.0.0" | |||||
| } | |||||
| }, | |||||
| "node_modules/execa": { | "node_modules/execa": { | ||||
| "version": "5.1.1", | "version": "5.1.1", | ||||
| "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz", | "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz", | ||||
| @@ -8739,6 +8852,15 @@ | |||||
| "node": "^12.20 || >= 14.13" | "node": "^12.20 || >= 14.13" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/fetch-cookie": { | |||||
| "version": "2.2.0", | |||||
| "resolved": "https://registry.npmmirror.com/fetch-cookie/-/fetch-cookie-2.2.0.tgz", | |||||
| "integrity": "sha512-h9AgfjURuCgA2+2ISl8GbavpUdR+WGAM2McW/ovn4tVccegp8ZqCKWSBR8uRdM8dDNlx5WdKRWxBYUwteLDCNQ==", | |||||
| "dependencies": { | |||||
| "set-cookie-parser": "^2.4.8", | |||||
| "tough-cookie": "^4.0.0" | |||||
| } | |||||
| }, | |||||
| "node_modules/figures": { | "node_modules/figures": { | ||||
| "version": "5.0.0", | "version": "5.0.0", | ||||
| "resolved": "https://registry.npmmirror.com/figures/-/figures-5.0.0.tgz", | "resolved": "https://registry.npmmirror.com/figures/-/figures-5.0.0.tgz", | ||||
| @@ -9440,9 +9562,19 @@ | |||||
| "dev": true | "dev": true | ||||
| }, | }, | ||||
| "node_modules/help-me": { | "node_modules/help-me": { | ||||
| <<<<<<< HEAD | |||||
| "version": "5.0.0", | "version": "5.0.0", | ||||
| "resolved": "https://registry.npmmirror.com/help-me/-/help-me-5.0.0.tgz", | "resolved": "https://registry.npmmirror.com/help-me/-/help-me-5.0.0.tgz", | ||||
| "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==" | "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==" | ||||
| ======= | |||||
| "version": "3.0.0", | |||||
| "resolved": "https://registry.npmmirror.com/help-me/-/help-me-3.0.0.tgz", | |||||
| "integrity": "sha512-hx73jClhyk910sidBB7ERlnhMlFsJJIBqSVMFDwPN8o2v9nmp5KgLq1Xz1Bf1fCMMZ6mPrX159iG0VLy/fPMtQ==", | |||||
| "dependencies": { | |||||
| "glob": "^7.1.6", | |||||
| "readable-stream": "^3.6.0" | |||||
| } | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| }, | }, | ||||
| "node_modules/hosted-git-info": { | "node_modules/hosted-git-info": { | ||||
| "version": "7.0.1", | "version": "7.0.1", | ||||
| @@ -12322,6 +12454,7 @@ | |||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/mqtt": { | "node_modules/mqtt": { | ||||
| <<<<<<< HEAD | |||||
| "version": "5.3.6", | "version": "5.3.6", | ||||
| "resolved": "https://registry.npmmirror.com/mqtt/-/mqtt-5.3.6.tgz", | "resolved": "https://registry.npmmirror.com/mqtt/-/mqtt-5.3.6.tgz", | ||||
| "integrity": "sha512-3XeyCdHRFf3zZdUUBt/pqprKPtUABc8O4ZGPGs2QPO4sPNTnJels8U2UtBtMt09QCgpUmw8gLTLy2R7verR7kQ==", | "integrity": "sha512-3XeyCdHRFf3zZdUUBt/pqprKPtUABc8O4ZGPGs2QPO4sPNTnJels8U2UtBtMt09QCgpUmw8gLTLy2R7verR7kQ==", | ||||
| @@ -12391,6 +12524,8 @@ | |||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/mqtt-browser/node_modules/mqtt": { | "node_modules/mqtt-browser/node_modules/mqtt": { | ||||
| ======= | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| "version": "4.3.7", | "version": "4.3.7", | ||||
| "resolved": "https://registry.npmmirror.com/mqtt/-/mqtt-4.3.7.tgz", | "resolved": "https://registry.npmmirror.com/mqtt/-/mqtt-4.3.7.tgz", | ||||
| "integrity": "sha512-ew3qwG/TJRorTz47eW46vZ5oBw5MEYbQZVaEji44j5lAUSQSqIEoul7Kua/BatBW0H0kKQcC9kwUHa1qzaWHSw==", | "integrity": "sha512-ew3qwG/TJRorTz47eW46vZ5oBw5MEYbQZVaEji44j5lAUSQSqIEoul7Kua/BatBW0H0kKQcC9kwUHa1qzaWHSw==", | ||||
| @@ -12422,7 +12557,19 @@ | |||||
| "node": ">=10.0.0" | "node": ">=10.0.0" | ||||
| } | } | ||||
| }, | }, | ||||
| <<<<<<< HEAD | |||||
| "node_modules/mqtt-browser/node_modules/mqtt-packet": { | "node_modules/mqtt-browser/node_modules/mqtt-packet": { | ||||
| ======= | |||||
| "node_modules/mqtt-browser": { | |||||
| "version": "4.3.7", | |||||
| "resolved": "https://registry.npmmirror.com/mqtt-browser/-/mqtt-browser-4.3.7.tgz", | |||||
| "integrity": "sha512-4pxHxa3avIILr2CXhTKlArVpATqfyTu4zr5u2PoUwzgw0GDr5dpzZ0pmPgZyOoQBVgrVDEboCzb/b1Q0yWOm7g==", | |||||
| "dependencies": { | |||||
| "mqtt": "4.3.7" | |||||
| } | |||||
| }, | |||||
| "node_modules/mqtt-packet": { | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| "version": "6.10.0", | "version": "6.10.0", | ||||
| "resolved": "https://registry.npmmirror.com/mqtt-packet/-/mqtt-packet-6.10.0.tgz", | "resolved": "https://registry.npmmirror.com/mqtt-packet/-/mqtt-packet-6.10.0.tgz", | ||||
| "integrity": "sha512-ja8+mFKIHdB1Tpl6vac+sktqy3gA8t9Mduom1BA75cI+R9AHnZOiaBQwpGiWnaVJLDGRdNhQmFaAqd7tkKSMGA==", | "integrity": "sha512-ja8+mFKIHdB1Tpl6vac+sktqy3gA8t9Mduom1BA75cI+R9AHnZOiaBQwpGiWnaVJLDGRdNhQmFaAqd7tkKSMGA==", | ||||
| @@ -12432,6 +12579,7 @@ | |||||
| "process-nextick-args": "^2.0.1" | "process-nextick-args": "^2.0.1" | ||||
| } | } | ||||
| }, | }, | ||||
| <<<<<<< HEAD | |||||
| "node_modules/mqtt-browser/node_modules/split2": { | "node_modules/mqtt-browser/node_modules/split2": { | ||||
| "version": "3.2.2", | "version": "3.2.2", | ||||
| "resolved": "https://registry.npmmirror.com/split2/-/split2-3.2.2.tgz", | "resolved": "https://registry.npmmirror.com/split2/-/split2-3.2.2.tgz", | ||||
| @@ -12441,6 +12589,20 @@ | |||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/mqtt-browser/node_modules/ws": { | "node_modules/mqtt-browser/node_modules/ws": { | ||||
| ======= | |||||
| "node_modules/mqtt/node_modules/lru-cache": { | |||||
| "version": "6.0.0", | |||||
| "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz", | |||||
| "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", | |||||
| "dependencies": { | |||||
| "yallist": "^4.0.0" | |||||
| }, | |||||
| "engines": { | |||||
| "node": ">=10" | |||||
| } | |||||
| }, | |||||
| "node_modules/mqtt/node_modules/ws": { | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| "version": "7.5.9", | "version": "7.5.9", | ||||
| "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz", | "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz", | ||||
| "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", | "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", | ||||
| @@ -12460,11 +12622,16 @@ | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| <<<<<<< HEAD | |||||
| "node_modules/mqtt-browser/node_modules/yallist": { | "node_modules/mqtt-browser/node_modules/yallist": { | ||||
| ======= | |||||
| "node_modules/mqtt/node_modules/yallist": { | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| "version": "4.0.0", | "version": "4.0.0", | ||||
| "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz", | "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz", | ||||
| "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" | "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" | ||||
| }, | }, | ||||
| <<<<<<< HEAD | |||||
| "node_modules/mqtt-packet": { | "node_modules/mqtt-packet": { | ||||
| "version": "9.0.0", | "version": "9.0.0", | ||||
| "resolved": "https://registry.npmmirror.com/mqtt-packet/-/mqtt-packet-9.0.0.tgz", | "resolved": "https://registry.npmmirror.com/mqtt-packet/-/mqtt-packet-9.0.0.tgz", | ||||
| @@ -12562,6 +12729,8 @@ | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| ======= | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| "node_modules/mrmime": { | "node_modules/mrmime": { | ||||
| "version": "2.0.0", | "version": "2.0.0", | ||||
| "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.0.tgz", | "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.0.tgz", | ||||
| @@ -13025,6 +13194,7 @@ | |||||
| "@angular/core": ">=14" | "@angular/core": ">=14" | ||||
| } | } | ||||
| }, | }, | ||||
| <<<<<<< HEAD | |||||
| "node_modules/ngx-mqtt/node_modules/mqtt-packet": { | "node_modules/ngx-mqtt/node_modules/mqtt-packet": { | ||||
| "version": "6.10.0", | "version": "6.10.0", | ||||
| "resolved": "https://registry.npmmirror.com/mqtt-packet/-/mqtt-packet-6.10.0.tgz", | "resolved": "https://registry.npmmirror.com/mqtt-packet/-/mqtt-packet-6.10.0.tgz", | ||||
| @@ -13035,6 +13205,8 @@ | |||||
| "process-nextick-args": "^2.0.1" | "process-nextick-args": "^2.0.1" | ||||
| } | } | ||||
| }, | }, | ||||
| ======= | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| "node_modules/ngx-tinymce": { | "node_modules/ngx-tinymce": { | ||||
| "version": "17.0.0", | "version": "17.0.0", | ||||
| "resolved": "https://registry.npmmirror.com/ngx-tinymce/-/ngx-tinymce-17.0.0.tgz", | "resolved": "https://registry.npmmirror.com/ngx-tinymce/-/ngx-tinymce-17.0.0.tgz", | ||||
| @@ -14729,6 +14901,14 @@ | |||||
| "dev": true, | "dev": true, | ||||
| "optional": true | "optional": true | ||||
| }, | }, | ||||
| <<<<<<< HEAD | |||||
| ======= | |||||
| "node_modules/psl": { | |||||
| "version": "1.9.0", | |||||
| "resolved": "https://registry.npmmirror.com/psl/-/psl-1.9.0.tgz", | |||||
| "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==" | |||||
| }, | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| "node_modules/pump": { | "node_modules/pump": { | ||||
| "version": "3.0.0", | "version": "3.0.0", | ||||
| "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz", | "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz", | ||||
| @@ -14767,6 +14947,11 @@ | |||||
| "node": ">=0.6" | "node": ">=0.6" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/querystringify": { | |||||
| "version": "2.2.0", | |||||
| "resolved": "https://registry.npmmirror.com/querystringify/-/querystringify-2.2.0.tgz", | |||||
| "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==" | |||||
| }, | |||||
| "node_modules/queue-microtask": { | "node_modules/queue-microtask": { | ||||
| "version": "1.2.3", | "version": "1.2.3", | ||||
| "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz", | "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz", | ||||
| @@ -15165,8 +15350,7 @@ | |||||
| "node_modules/requires-port": { | "node_modules/requires-port": { | ||||
| "version": "1.0.0", | "version": "1.0.0", | ||||
| "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz", | "resolved": "https://registry.npmmirror.com/requires-port/-/requires-port-1.0.0.tgz", | ||||
| "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", | |||||
| "dev": true | |||||
| "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" | |||||
| }, | }, | ||||
| "node_modules/resolve": { | "node_modules/resolve": { | ||||
| "version": "1.22.8", | "version": "1.22.8", | ||||
| @@ -15678,6 +15862,11 @@ | |||||
| "node": ">= 0.8.0" | "node": ">= 0.8.0" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/set-cookie-parser": { | |||||
| "version": "2.6.0", | |||||
| "resolved": "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz", | |||||
| "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==" | |||||
| }, | |||||
| "node_modules/set-function-length": { | "node_modules/set-function-length": { | ||||
| "version": "1.2.0", | "version": "1.2.0", | ||||
| "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.0.tgz", | "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.0.tgz", | ||||
| @@ -16267,11 +16456,19 @@ | |||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/split2": { | "node_modules/split2": { | ||||
| <<<<<<< HEAD | |||||
| "version": "4.2.0", | "version": "4.2.0", | ||||
| "resolved": "https://registry.npmmirror.com/split2/-/split2-4.2.0.tgz", | "resolved": "https://registry.npmmirror.com/split2/-/split2-4.2.0.tgz", | ||||
| "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==", | "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==", | ||||
| "engines": { | "engines": { | ||||
| "node": ">= 10.x" | "node": ">= 10.x" | ||||
| ======= | |||||
| "version": "3.2.2", | |||||
| "resolved": "https://registry.npmmirror.com/split2/-/split2-3.2.2.tgz", | |||||
| "integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==", | |||||
| "dependencies": { | |||||
| "readable-stream": "^3.0.0" | |||||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/sprintf-js": { | "node_modules/sprintf-js": { | ||||
| @@ -17420,11 +17617,32 @@ | |||||
| "topoquantize": "bin/topoquantize" | "topoquantize": "bin/topoquantize" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/tough-cookie": { | |||||
| "version": "4.1.3", | |||||
| "resolved": "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.3.tgz", | |||||
| "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==", | |||||
| "dependencies": { | |||||
| "psl": "^1.1.33", | |||||
| "punycode": "^2.1.1", | |||||
| "universalify": "^0.2.0", | |||||
| "url-parse": "^1.5.3" | |||||
| }, | |||||
| "engines": { | |||||
| "node": ">=6" | |||||
| } | |||||
| }, | |||||
| "node_modules/tough-cookie/node_modules/universalify": { | |||||
| "version": "0.2.0", | |||||
| "resolved": "https://registry.npmmirror.com/universalify/-/universalify-0.2.0.tgz", | |||||
| "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", | |||||
| "engines": { | |||||
| "node": ">= 4.0.0" | |||||
| } | |||||
| }, | |||||
| "node_modules/tr46": { | "node_modules/tr46": { | ||||
| "version": "0.0.3", | "version": "0.0.3", | ||||
| "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz", | "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz", | ||||
| "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", | |||||
| "dev": true | |||||
| "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" | |||||
| }, | }, | ||||
| "node_modules/tree-kill": { | "node_modules/tree-kill": { | ||||
| "version": "1.2.2", | "version": "1.2.2", | ||||
| @@ -17778,6 +17996,15 @@ | |||||
| "punycode": "^2.1.0" | "punycode": "^2.1.0" | ||||
| } | } | ||||
| }, | }, | ||||
| "node_modules/url-parse": { | |||||
| "version": "1.5.10", | |||||
| "resolved": "https://registry.npmmirror.com/url-parse/-/url-parse-1.5.10.tgz", | |||||
| "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", | |||||
| "dependencies": { | |||||
| "querystringify": "^2.1.1", | |||||
| "requires-port": "^1.0.0" | |||||
| } | |||||
| }, | |||||
| "node_modules/url-polyfill": { | "node_modules/url-polyfill": { | ||||
| "version": "1.1.12", | "version": "1.1.12", | ||||
| "resolved": "https://registry.npmmirror.com/url-polyfill/-/url-polyfill-1.1.12.tgz", | "resolved": "https://registry.npmmirror.com/url-polyfill/-/url-polyfill-1.1.12.tgz", | ||||
| @@ -17941,8 +18168,7 @@ | |||||
| "node_modules/webidl-conversions": { | "node_modules/webidl-conversions": { | ||||
| "version": "3.0.1", | "version": "3.0.1", | ||||
| "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz", | "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz", | ||||
| "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", | |||||
| "dev": true | |||||
| "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" | |||||
| }, | }, | ||||
| "node_modules/webpack": { | "node_modules/webpack": { | ||||
| "version": "5.89.0", | "version": "5.89.0", | ||||
| @@ -18218,7 +18444,6 @@ | |||||
| "version": "5.0.0", | "version": "5.0.0", | ||||
| "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz", | "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz", | ||||
| "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", | "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", | ||||
| "dev": true, | |||||
| "dependencies": { | "dependencies": { | ||||
| "tr46": "~0.0.3", | "tr46": "~0.0.3", | ||||
| "webidl-conversions": "^3.0.0" | "webidl-conversions": "^3.0.0" | ||||
+ 5
- 3
package.json
Visa fil
| @@ -29,6 +29,7 @@ | |||||
| "@angular/platform-browser": "^17.1.0", | "@angular/platform-browser": "^17.1.0", | ||||
| "@angular/platform-browser-dynamic": "^17.1.0", | "@angular/platform-browser-dynamic": "^17.1.0", | ||||
| "@angular/router": "^17.1.0", | "@angular/router": "^17.1.0", | ||||
| "@aspnet/signalr": "^1.0.27", | |||||
| "@delon/abc": "^17.1.0", | "@delon/abc": "^17.1.0", | ||||
| "@delon/acl": "^17.1.0", | "@delon/acl": "^17.1.0", | ||||
| "@delon/auth": "^17.1.0", | "@delon/auth": "^17.1.0", | ||||
| @@ -38,15 +39,16 @@ | |||||
| "@delon/mock": "^17.1.0", | "@delon/mock": "^17.1.0", | ||||
| "@delon/theme": "^17.1.0", | "@delon/theme": "^17.1.0", | ||||
| "@delon/util": "^17.1.0", | "@delon/util": "^17.1.0", | ||||
| "ag-grid-angular": "^31.1.1", | |||||
| "@microsoft/signalr": "^8.0.0", | |||||
| "@microsoft/signalr-protocol-msgpack": "^8.0.0", | |||||
| "@types/signalr": "^2.4.3", | |||||
| "ag-grid-angular": "^31.0.2", | |||||
| "echarts": "^5.5.0", | "echarts": "^5.5.0", | ||||
| "moment": "^2.30.1", | "moment": "^2.30.1", | ||||
| "mqtt": "^5.3.6", | "mqtt": "^5.3.6", | ||||
| "ng-alain": "^17.1.0", | "ng-alain": "^17.1.0", | ||||
| "ng-zorro-antd": "^17.1.0", | "ng-zorro-antd": "^17.1.0", | ||||
| "ng2-mqtt": "^0.1.2", | |||||
| "ngx-mqtt": "^17.0.0", | "ngx-mqtt": "^17.0.0", | ||||
| "paho-mqtt": "^1.1.0", | |||||
| "rxjs": "~7.8.0", | "rxjs": "~7.8.0", | ||||
| "screenfull": "^6.0.2", | "screenfull": "^6.0.2", | ||||
| "tslib": "^2.3.0", | "tslib": "^2.3.0", | ||||
+ 6
- 0
src/app/app.config.ts
Visa fil
| @@ -70,6 +70,12 @@ const providers: Array<Provider | EnvironmentProviders> = [ | |||||
| provideSFConfig({ | provideSFConfig({ | ||||
| widgets: [...SF_WIDGETS] | widgets: [...SF_WIDGETS] | ||||
| }), | }), | ||||
| { | |||||
| provide: MqttService, | |||||
| useFactory: () => { | |||||
| return new MqttService(MQTT_SERVICE_OPTIONS); | |||||
| } | |||||
| }, | |||||
| provideStartup(), | provideStartup(), | ||||
| { | { | ||||
| provide: MqttService, | provide: MqttService, | ||||
+ 8
- 0
src/app/core/utils/signalr.service.ts
Visa fil
| @@ -0,0 +1,8 @@ | |||||
| import { Injectable } from '@angular/core'; | |||||
| @Injectable({ | |||||
| providedIn: 'root' | |||||
| }) | |||||
| export class SignalrService { | |||||
| } | |||||
+ 7
- 7
src/app/layout/basic/widgets/notify.component.ts
Visa fil
| @@ -4,7 +4,7 @@ import { add, formatDistanceToNow, parse } from 'date-fns'; | |||||
| import { NzI18nService } from 'ng-zorro-antd/i18n'; | import { NzI18nService } from 'ng-zorro-antd/i18n'; | ||||
| import { NzMessageService } from 'ng-zorro-antd/message'; | import { NzMessageService } from 'ng-zorro-antd/message'; | ||||
| import { NoticeIconModule } from '@delon/abc/notice-icon'; | import { NoticeIconModule } from '@delon/abc/notice-icon'; | ||||
| import { SignalRService } from 'src/app/core/utils/signalR.service'; | |||||
| //import { SignalRService } from 'src/app/core/utils/signalR.service'; | |||||
| import { _HttpClient } from '@delon/theme'; | import { _HttpClient } from '@delon/theme'; | ||||
| @Component({ | @Component({ | ||||
| @@ -56,15 +56,15 @@ export class HeaderNotifyComponent { | |||||
| private msg: NzMessageService, | private msg: NzMessageService, | ||||
| private nzI18n: NzI18nService, | private nzI18n: NzI18nService, | ||||
| private cdr: ChangeDetectorRef, | private cdr: ChangeDetectorRef, | ||||
| private signalRService: SignalRService, | |||||
| //private signalRService: SignalRService, | |||||
| private httpClient: _HttpClient | private httpClient: _HttpClient | ||||
| ) { | ) { | ||||
| this.signalRService.startConnection(); | |||||
| //this.signalRService.startConnection(); | |||||
| this.signalRService.getReceivedMessage().subscribe(data => { | |||||
| this.count++; | |||||
| this.cdr.detectChanges(); | |||||
| }); | |||||
| // this.signalRService.getReceivedMessage().subscribe(data => { | |||||
| // this.count++; | |||||
| // this.cdr.detectChanges(); | |||||
| // }); | |||||
| } | } | ||||
| private updateNoticeData(notices: NoticeIconList[]): NoticeItem[] { | private updateNoticeData(notices: NoticeIconList[]): NoticeItem[] { | ||||
+ 11
- 0
src/app/routes/data-v/card/card.component.less
Visa fil
| @@ -9,9 +9,20 @@ | |||||
| margin-bottom: 0.5rem; | margin-bottom: 0.5rem; | ||||
| .card-content-title { | .card-content-title { | ||||
| display: flex; | |||||
| margin-bottom: 0.5rem; | margin-bottom: 0.5rem; | ||||
| font-size: 18px; | font-size: 18px; | ||||
| font-weight: 600; | font-weight: 600; | ||||
| color: #74FAFB; | color: #74FAFB; | ||||
| .card-content-l { | |||||
| align-self: flex-start; | |||||
| flex: 1; | |||||
| /* 占据剩余空间 */ | |||||
| } | |||||
| .card-content-r { | |||||
| align-self: flex-end; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
+ 15
- 2
src/app/routes/data-v/card/card.component.ts
Visa fil
| @@ -1,5 +1,8 @@ | |||||
| // parent.component.ts | // parent.component.ts | ||||
| import { CommonModule } from '@angular/common'; | |||||
| import { Component, Input } from '@angular/core'; | import { Component, Input } from '@angular/core'; | ||||
| import { SHARED_IMPORTS } from '@shared'; | |||||
| import { NzIconModule } from 'ng-zorro-antd/icon'; | |||||
| @Component({ | @Component({ | ||||
| selector: 'data-v-card', | selector: 'data-v-card', | ||||
| @@ -7,12 +10,22 @@ import { Component, Input } from '@angular/core'; | |||||
| template: ` | template: ` | ||||
| <div class="card-content"> | <div class="card-content"> | ||||
| <!-- <img src="assets/dashboard/dashboard_card_bg.jpg" style="width: 100%;" /> --> | <!-- <img src="assets/dashboard/dashboard_card_bg.jpg" style="width: 100%;" /> --> | ||||
| <div class="card-content-title">{{ title }}</div> | |||||
| <div class="card-content-title"> | |||||
| <div class="card-content-l">{{ title }}</div> | |||||
| <div *ngIf="showSetting" class="card-content-r"> | |||||
| <span nz-icon nzType="setting" nzTheme="outline"></span> | |||||
| </div> | |||||
| </div> | |||||
| <ng-content></ng-content> | <ng-content></ng-content> | ||||
| </div> | </div> | ||||
| `, | `, | ||||
| styleUrls: ['./card.component.less'] | |||||
| styleUrls: ['./card.component.less'], | |||||
| imports: [NzIconModule, CommonModule, ...SHARED_IMPORTS], | |||||
| }) | }) | ||||
| export class DataVCardComponent { | export class DataVCardComponent { | ||||
| @Input() showSetting = false; | |||||
| @Input() title: string = ''; | @Input() title: string = ''; | ||||
| } | } | ||||
+ 19
- 8
src/app/routes/data-v/navigation/navigation.component.ts
Visa fil
| @@ -28,11 +28,18 @@ export class DataVNavigationComponent implements OnInit { | |||||
| menuList: any = [ | menuList: any = [ | ||||
| { | { | ||||
| code: '01', | code: '01', | ||||
| text: '我的工作站' | |||||
| text: '我的工作站', | |||||
| url: '/' | |||||
| }, | }, | ||||
| { | { | ||||
| code: '02', | code: '02', | ||||
| text: '化验总览' | |||||
| text: '化验总览', | |||||
| url: '/data-v/s1' | |||||
| }, | |||||
| { | |||||
| code: '03', | |||||
| text: '3D', | |||||
| url: '/data-v/threejs' | |||||
| }, | }, | ||||
| { | { | ||||
| text: '...' | text: '...' | ||||
| @@ -54,12 +61,16 @@ export class DataVNavigationComponent implements OnInit { | |||||
| // 新的 navigate 方法 | // 新的 navigate 方法 | ||||
| navigate(menu: any) { | navigate(menu: any) { | ||||
| if (menu.code == '01') { | |||||
| // 你可能想根据菜单项来确定导航的路径 | |||||
| this.router.navigateByUrl('/'); // 将'/data-v/s1'替换为正确的路径 | |||||
| } else if (menu.code == '02') { | |||||
| // 你可能想根据菜单项来确定导航的路径 | |||||
| this.router.navigateByUrl('/data-v/s1'); // 将'/data-v/s1'替换为正确的路径 | |||||
| if (menu.url) { | |||||
| this.router.navigateByUrl(menu.url); | |||||
| } | } | ||||
| // if (menu.code == '01') { | |||||
| // // 你可能想根据菜单项来确定导航的路径 | |||||
| // this.router.navigateByUrl('/'); // 将'/data-v/s1'替换为正确的路径 | |||||
| // } else if (menu.code == '02') { | |||||
| // // 你可能想根据菜单项来确定导航的路径 | |||||
| // this.router.navigateByUrl('/data-v/s1'); // 将'/data-v/s1'替换为正确的路径 | |||||
| // } | |||||
| } | } | ||||
| } | } | ||||
+ 3
- 1
src/app/routes/data-v/routes.ts
Visa fil
| @@ -4,10 +4,12 @@ import { DataVUserComponent } from './user/user.component'; | |||||
| import { DataVDateComponent } from './date/date.component'; | import { DataVDateComponent } from './date/date.component'; | ||||
| import { DataVWorkstationComponent } from './workstation/workstation.component'; | import { DataVWorkstationComponent } from './workstation/workstation.component'; | ||||
| import { DataVS1Component } from './s1/s1.component'; | import { DataVS1Component } from './s1/s1.component'; | ||||
| import { DataVThreejsComponent } from './threejs/threejs.component'; | |||||
| export const routes: Routes = [ | export const routes: Routes = [ | ||||
| { | { | ||||
| path: 's1', | path: 's1', | ||||
| component: DataVS1Component | component: DataVS1Component | ||||
| } | } | ||||
| ]; | |||||
| , | |||||
| { path: 'threejs', component: DataVThreejsComponent }]; | |||||
+ 1
- 0
src/app/routes/data-v/s1/chart-component/chart-component.component.css
Visa fil
| @@ -0,0 +1 @@ | |||||
+ 1
- 0
src/app/routes/data-v/s1/chart-component/chart-component.component.html
Visa fil
| @@ -0,0 +1 @@ | |||||
| <div #chart style="width: 100%; height: 100%;"></div> | |||||
+ 120
- 0
src/app/routes/data-v/s1/chart-component/chart-component.component.ts
Visa fil
| @@ -0,0 +1,120 @@ | |||||
| import { Component, OnInit, AfterViewInit, OnDestroy, OnChanges, SimpleChanges, Input, ViewChild, ElementRef } from '@angular/core'; | |||||
| import * as echarts from 'echarts'; | |||||
| @Component({ | |||||
| selector: 'app-chart-component', | |||||
| standalone: true, | |||||
| templateUrl: './chart-component.component.html', | |||||
| styleUrls: ['./chart-component.component.css'] | |||||
| }) | |||||
| export class ChartComponentComponent implements OnInit, OnDestroy, OnChanges { | |||||
| @ViewChild('chart', { static: true }) | |||||
| chartContainer!: ElementRef; | |||||
| private chartInstance: echarts.ECharts | null = null; | |||||
| // 接收外部传入的配置项（例如：柱状图、折线图等配置） | |||||
| @Input() options: echarts.EChartsOption = {}; | |||||
| /** 默认样式 */ | |||||
| defaultTooltipOptions = { | |||||
| title: { | |||||
| textStyle: { | |||||
| color: "#ffffff" | |||||
| }, | |||||
| }, | |||||
| backgroundColor: "#100c2A", | |||||
| legend: { | |||||
| textStyle: { | |||||
| color: '#ffffff' | |||||
| }, | |||||
| }, | |||||
| tooltip: { | |||||
| trigger: 'item', | |||||
| borderColor: '#00eff8', | |||||
| backgroundColor: '#12192C', | |||||
| padding: [6, 14, 6, 14], | |||||
| textStyle: { | |||||
| fontSize: 14, | |||||
| color: '#74FAFB', | |||||
| }, | |||||
| position: 'top', | |||||
| axisPointer: { | |||||
| type: 'shadow' | |||||
| } | |||||
| }, | |||||
| grid: { | |||||
| left: '3%', | |||||
| right: '3%', | |||||
| bottom: '3%', | |||||
| containLabel: true | |||||
| }, | |||||
| toolbox: { | |||||
| show: false, | |||||
| feature: { | |||||
| dataView: { show: true, readOnly: false }, | |||||
| magicType: { show: true, type: ['line', 'bar'] }, | |||||
| restore: { show: true }, | |||||
| saveAsImage: { show: true } | |||||
| } | |||||
| }, | |||||
| calculable: true, | |||||
| xAxis: [ | |||||
| { | |||||
| type: 'category', | |||||
| // prettier-ignore | |||||
| data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] | |||||
| } | |||||
| ], | |||||
| yAxis: [ | |||||
| { | |||||
| type: 'value' | |||||
| } | |||||
| ], | |||||
| } | |||||
| constructor() { } | |||||
| ngOnInit(): void { | |||||
| console.log('ChartComponentComponent ngOnInit'); | |||||
| this.initEcharts(); | |||||
| } | |||||
| ngOnChanges(changes: SimpleChanges): void { | |||||
| if (changes['options'] && !changes['options'].isFirstChange()) { | |||||
| console.log('ChartComponentComponent ngOnChanges'); | |||||
| this.updateChartOptions(); | |||||
| } | |||||
| } | |||||
| ngOnDestroy(): void { | |||||
| if (this.chartInstance) { | |||||
| console.log('ChartComponentComponent ngOnInit'); | |||||
| this.chartInstance.dispose(); | |||||
| } | |||||
| } | |||||
| initEcharts(): void { | |||||
| const chartDom = this.chartContainer.nativeElement; | |||||
| this.chartInstance = echarts.init(chartDom); | |||||
| // 设置默认的tooltip配置，如果外部传入了tooltip则会覆盖这里的设置 | |||||
| // 合并默认和外部传入的配置项 | |||||
| const mergedOptions = { | |||||
| ...this.defaultTooltipOptions, | |||||
| ...this.options | |||||
| }; | |||||
| this.chartInstance.setOption(mergedOptions); | |||||
| } | |||||
| updateChartOptions(): void { | |||||
| if (this.chartInstance) { | |||||
| this.chartInstance.setOption(this.options); | |||||
| } | |||||
| } | |||||
| } | |||||
+ 14
- 30
src/app/routes/data-v/s1/s1.component.html
Visa fil
| @@ -4,14 +4,14 @@ | |||||
| <div nz-row style="justify-content: center;align-items: center;"> | <div nz-row style="justify-content: center;align-items: center;"> | ||||
| <div nz-col nzSpan="12"> | <div nz-col nzSpan="12"> | ||||
| <div class="centered-element"> | <div class="centered-element"> | ||||
| <div id="c1" style="width: 30rem; height: 10rem; margin-top: -3rem; margin-bottom: -2rem;"> | |||||
| <div id="c1" class="dashboard-container"> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="sys-status-title">系统健康度</div> | <div class="sys-status-title">系统健康度</div> | ||||
| </div> | </div> | ||||
| <div nz-col nzSpan="12"> | <div nz-col nzSpan="12"> | ||||
| <div class="centered-element"> | <div class="centered-element"> | ||||
| <div id="c2" style="width: 20rem; height: 10rem; margin-top: -3rem; margin-bottom: -2rem;"></div> | |||||
| <div id="c2" class="dashboard-container"></div> | |||||
| </div> | </div> | ||||
| <div class="sys-status-title">设备投运度</div> | <div class="sys-status-title">设备投运度</div> | ||||
| </div> | </div> | ||||
| @@ -31,26 +31,21 @@ | |||||
| <data-v-card title="" style="margin-top: 1rem;"> | <data-v-card title="" style="margin-top: 1rem;"> | ||||
| <!-- <div class="progress-display">完成样品数量/时长 16/8</div> --> | <!-- <div class="progress-display">完成样品数量/时长 16/8</div> --> | ||||
| <div class="progress-container"> | <div class="progress-container"> | ||||
| <span class="status-text" style="width: 8rem;">化验效率：</span> | |||||
| <nz-progress [nzPercent]="64" style="width: 100%; "></nz-progress> | |||||
| <span class="status-text">化验效率：</span> | |||||
| <nz-progress [nzPercent]="64" [nzStrokeColor]="'#74FAFB'" style="width: 100%; "></nz-progress> | |||||
| <span class="status-ext-text">（16/25）</span> | |||||
| </div> | </div> | ||||
| <!-- <div class="progress-display">完成样品数量/时长 16/8</div> --> | |||||
| <div class="progress-container"> | |||||
| <span class="status-text" style="width: 8rem;">完 成 率 ：</span> | |||||
| <nz-progress [nzPercent]="60" style="width: 100%;"></nz-progress> | |||||
| <div class="progress-container mt-sm"> | |||||
| <span class="status-text">完 成 率 ：</span> | |||||
| <nz-progress [nzPercent]="60" [nzStrokeColor]="'#74FAFB'" style="width: 100%;"></nz-progress> | |||||
| <span class="status-ext-text">（12/20）</span> | |||||
| </div> | </div> | ||||
| </data-v-card> | </data-v-card> | ||||
| </div> | </div> | ||||
| <div nz-col nzSpan="8"> | <div nz-col nzSpan="8"> | ||||
| <data-v-card title=""> | <data-v-card title=""> | ||||
| <!-- <nz-tabset> | |||||
| <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab> | |||||
| <nz-tab nzTitle="Tab 2">Content of Tab Pane 2</nz-tab> | |||||
| <nz-tab nzTitle="Tab 3">Content of Tab Pane 3</nz-tab> | |||||
| </nz-tabset> --> | |||||
| <div style="height: 34.6rem;"> | <div style="height: 34.6rem;"> | ||||
| <img src="assets/dashboard/dashboard_ws_demo1.png" style="width: 100%;" /> | <img src="assets/dashboard/dashboard_ws_demo1.png" style="width: 100%;" /> | ||||
| @@ -79,30 +74,19 @@ | |||||
| </div> | </div> | ||||
| <div nz-col nzSpan="8"> | <div nz-col nzSpan="8"> | ||||
| <data-v-card title="化验结果"> | |||||
| <data-v-card title="化验结果" [showSetting]="true"> | |||||
| <div class="centered-element"> | |||||
| <app-chart-component [options]="chart_options1" style="width: 26rem; height: 11rem;" /> | |||||
| </div> | |||||
| <div class="centered-element"> | <div class="centered-element"> | ||||
| <div id="d1" style="width: 26rem; height: 11rem;"> | <div id="d1" style="width: 26rem; height: 11rem;"> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="centered-element"> | <div class="centered-element"> | ||||
| <div id="d2" style="width: 26rem; height: 11rem; margin-top: 0.4rem;"> | <div id="d2" style="width: 26rem; height: 11rem; margin-top: 0.4rem;"> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- <div class="centered-element"> | |||||
| <div id="d3" style="width: 26rem; height: 12rem; margin-top: 1rem;"></div> | |||||
| </div> --> | |||||
| <!-- <div class="statistic-item-container"> | |||||
| <label nz-checkbox [ngModel]="'true'" class="white-color-theme">全水</label> | |||||
| <label nz-checkbox [ngModel]="'true'" class="white-color-theme">热值</label> | |||||
| <label nz-checkbox [ngModel]="'true'" class="white-color-theme">全硫</label> | |||||
| <label nz-checkbox [ngModel]="'false'" class="white-color-theme">内水</label> | |||||
| <label nz-checkbox [ngModel]="'false'" class="white-color-theme">灰分</label> | |||||
| <label nz-checkbox [ngModel]="'false'" class="white-color-theme">挥发分</label> | |||||
| <label nz-checkbox [ngModel]="'false'" class="white-color-theme">碳</label> | |||||
| <label nz-checkbox [ngModel]="'false'" class="white-color-theme">氢</label> | |||||
| <label nz-checkbox [ngModel]="'false'" class="white-color-theme">氮</label> | |||||
| </div> --> | |||||
| <div nz-row style="justify-content: center;align-items: center;margin-top: 0.4rem;"> | <div nz-row style="justify-content: center;align-items: center;margin-top: 0.4rem;"> | ||||
| <div nz-col nzSpan="12"> | <div nz-col nzSpan="12"> | ||||
+ 25
- 13
src/app/routes/data-v/s1/s1.component.less
Visa fil
| @@ -1,4 +1,11 @@ | |||||
| .s1-container {} | |||||
| /* stylelint-disable comment-empty-line-before */ | |||||
| .dashboard-container { | |||||
| width: 20rem; | |||||
| height: 10rem; | |||||
| margin-top: -3rem; | |||||
| margin-bottom: -2rem; | |||||
| } | |||||
| .sys-status-title { | .sys-status-title { | ||||
| font-size: 18px; | font-size: 18px; | ||||
| @@ -48,17 +55,26 @@ | |||||
| } | } | ||||
| } | } | ||||
| .status-text { | |||||
| margin-left: 6px; | |||||
| /* 调整文字与圆形之间的间距 */ | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| color: #74FAFB; | |||||
| } | |||||
| .progress-container { | .progress-container { | ||||
| display: flex; | display: flex; | ||||
| color: white; | color: white; | ||||
| .status-text { | |||||
| width: 8rem; | |||||
| margin-left: 6px; | |||||
| /* 调整文字与圆形之间的间距 */ | |||||
| font-size: 16px; | |||||
| font-weight: 600; | |||||
| color: #74FAFB; | |||||
| } | |||||
| .status-ext-text { | |||||
| margin-top: 3px; | |||||
| /* 将文本转换为行内块元素 */ | |||||
| font-size: 12px; | |||||
| } | |||||
| } | } | ||||
| .progress-display { | .progress-display { | ||||
| @@ -74,8 +90,4 @@ | |||||
| .white-color-theme { | .white-color-theme { | ||||
| color: #74FAFB; | color: #74FAFB; | ||||
| } | |||||
| .ant-progress-text { | |||||
| color: red; | |||||
| } | } | ||||
+ 314
- 136
src/app/routes/data-v/s1/s1.component.ts
Visa fil
| @@ -10,17 +10,108 @@ import { DataVTitleComponent } from '../title/title.component'; | |||||
| import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface | import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface | ||||
| import { NzProgressModule } from 'ng-zorro-antd/progress'; | import { NzProgressModule } from 'ng-zorro-antd/progress'; | ||||
| import { NzBadgeModule } from 'ng-zorro-antd/badge'; | import { NzBadgeModule } from 'ng-zorro-antd/badge'; | ||||
| import { Subscription } from 'rxjs'; | |||||
| import { IMqttMessage, MqttService } from 'ngx-mqtt'; | |||||
| import { ChartComponentComponent } from './chart-component/chart-component.component'; | |||||
| @Component({ | @Component({ | ||||
| selector: 'app-data-v-s1', | selector: 'app-data-v-s1', | ||||
| standalone: true, | standalone: true, | ||||
| imports: [NzBadgeModule, NzProgressModule, AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS], | |||||
| templateUrl: './s1.component.html', | templateUrl: './s1.component.html', | ||||
| styleUrls: ['./s1.component.less'] | |||||
| styleUrls: ['./s1.component.less'], | |||||
| imports: [NzBadgeModule, NzProgressModule, AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS, ChartComponentComponent] | |||||
| }) | }) | ||||
| export class DataVS1Component implements OnInit { | export class DataVS1Component implements OnInit { | ||||
| private readonly http = inject(_HttpClient); | private readonly http = inject(_HttpClient); | ||||
| private readonly modal = inject(ModalHelper); | private readonly modal = inject(ModalHelper); | ||||
| chart_options1 = {} | |||||
| c1OptionC: echarts.EChartsOption = { | |||||
| series: [ | |||||
| { | |||||
| type: 'gauge', | |||||
| startAngle: 180, | |||||
| endAngle: 0, | |||||
| center: ['50%', '75%'], | |||||
| radius: '90%', | |||||
| min: 0, | |||||
| max: 1, | |||||
| splitNumber: 8, | |||||
| axisLine: { | |||||
| lineStyle: { | |||||
| width: 6, | |||||
| color: [ | |||||
| [0.25, '#74FAFB'], | |||||
| [0.5, '#74FAFB'], | |||||
| [0.75, '#74FAFB'], | |||||
| [1, '#74FAFB'] | |||||
| ] | |||||
| } | |||||
| }, | |||||
| pointer: { | |||||
| icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', | |||||
| length: '12%', | |||||
| width: 20, | |||||
| offsetCenter: [0, '-60%'], | |||||
| itemStyle: { | |||||
| color: 'auto' | |||||
| } | |||||
| }, | |||||
| axisTick: { | |||||
| length: 12, | |||||
| lineStyle: { | |||||
| color: 'auto', | |||||
| width: 2 | |||||
| } | |||||
| }, | |||||
| splitLine: { | |||||
| length: 20, | |||||
| lineStyle: { | |||||
| color: 'auto', | |||||
| width: 5 | |||||
| } | |||||
| }, | |||||
| axisLabel: { | |||||
| color: '#464646', | |||||
| fontSize: 20, | |||||
| distance: -60, | |||||
| rotate: 'tangential', | |||||
| formatter: function (value: any) { | |||||
| if (value === 0.875) { | |||||
| return ''; | |||||
| } else if (value === 0.625) { | |||||
| return ''; | |||||
| } else if (value === 0.375) { | |||||
| return ''; | |||||
| } else if (value === 0.125) { | |||||
| return ''; | |||||
| } | |||||
| return ''; | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| offsetCenter: [0, '-10%'], | |||||
| fontSize: 20 | |||||
| }, | |||||
| detail: { | |||||
| fontSize: 30, | |||||
| offsetCenter: [0, '-5%'], | |||||
| valueAnimation: true, | |||||
| formatter: function (value: any) { | |||||
| return Math.round(value * 100) + ''; | |||||
| }, | |||||
| color: 'inherit' | |||||
| }, | |||||
| data: [ | |||||
| { | |||||
| value: 0.9, | |||||
| name: '' | |||||
| } | |||||
| ] | |||||
| } | |||||
| ] | |||||
| }; | |||||
| private c1Chart: any; | |||||
| rowData = [ | rowData = [ | ||||
| { | { | ||||
| @@ -139,96 +230,23 @@ export class DataVS1Component implements OnInit { | |||||
| { headerName: '等级', field: 'dqzt', flex: 1.5 } | { headerName: '等级', field: 'dqzt', flex: 1.5 } | ||||
| ]; | ]; | ||||
| private subscription: Subscription; | |||||
| constructor(private _mqttService: MqttService) { | |||||
| this.subscription = this._mqttService.observe('s1').subscribe((message: IMqttMessage) => { | |||||
| const messagePayload = JSON.parse(message.payload.toString()); | |||||
| console.log('Received message as object: ', messagePayload.msg); | |||||
| this.c1Chart.setOption(this.c1OptionC); | |||||
| }); | |||||
| } | |||||
| ngOnInit(): void { | ngOnInit(): void { | ||||
| var c1 = document.getElementById('c1')!; | var c1 = document.getElementById('c1')!; | ||||
| var c1Chart = echarts.init(c1); | |||||
| this.c1Chart = echarts.init(c1); | |||||
| var c2 = document.getElementById('c2')!; | var c2 = document.getElementById('c2')!; | ||||
| var c2Chart = echarts.init(c2); | var c2Chart = echarts.init(c2); | ||||
| let c1OptionC = { | |||||
| series: [ | |||||
| { | |||||
| type: 'gauge', | |||||
| startAngle: 180, | |||||
| endAngle: 0, | |||||
| center: ['50%', '75%'], | |||||
| radius: '90%', | |||||
| min: 0, | |||||
| max: 1, | |||||
| splitNumber: 8, | |||||
| axisLine: { | |||||
| lineStyle: { | |||||
| width: 6, | |||||
| color: [ | |||||
| [0.25, '#74FAFB'], | |||||
| [0.5, '#74FAFB'], | |||||
| [0.75, '#74FAFB'], | |||||
| [1, '#74FAFB'] | |||||
| ] | |||||
| } | |||||
| }, | |||||
| pointer: { | |||||
| icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', | |||||
| length: '12%', | |||||
| width: 20, | |||||
| offsetCenter: [0, '-60%'], | |||||
| itemStyle: { | |||||
| color: 'auto' | |||||
| } | |||||
| }, | |||||
| axisTick: { | |||||
| length: 12, | |||||
| lineStyle: { | |||||
| color: 'auto', | |||||
| width: 2 | |||||
| } | |||||
| }, | |||||
| splitLine: { | |||||
| length: 20, | |||||
| lineStyle: { | |||||
| color: 'auto', | |||||
| width: 5 | |||||
| } | |||||
| }, | |||||
| axisLabel: { | |||||
| color: '#464646', | |||||
| fontSize: 20, | |||||
| distance: -60, | |||||
| rotate: 'tangential', | |||||
| formatter: function (value: any) { | |||||
| if (value === 0.875) { | |||||
| return ''; | |||||
| } else if (value === 0.625) { | |||||
| return ''; | |||||
| } else if (value === 0.375) { | |||||
| return ''; | |||||
| } else if (value === 0.125) { | |||||
| return ''; | |||||
| } | |||||
| return ''; | |||||
| } | |||||
| }, | |||||
| title: { | |||||
| offsetCenter: [0, '-10%'], | |||||
| fontSize: 20 | |||||
| }, | |||||
| detail: { | |||||
| fontSize: 30, | |||||
| offsetCenter: [0, '-5%'], | |||||
| valueAnimation: true, | |||||
| formatter: function (value: any) { | |||||
| return Math.round(value * 100) + ''; | |||||
| }, | |||||
| color: 'inherit' | |||||
| }, | |||||
| data: [ | |||||
| { | |||||
| value: 0.9, | |||||
| name: '' | |||||
| } | |||||
| ] | |||||
| } | |||||
| ] | |||||
| }; | |||||
| let c2OptionC = { | let c2OptionC = { | ||||
| series: [ | series: [ | ||||
| @@ -316,40 +334,6 @@ export class DataVS1Component implements OnInit { | |||||
| ] | ] | ||||
| }; | }; | ||||
| // let c2OptionC = { | |||||
| // color: ['#74FAFB'], | |||||
| // startAngle: 180, | |||||
| // endAngle: 0, | |||||
| // grid: { | |||||
| // left: '3%', | |||||
| // right: '3%', | |||||
| // bottom: '3%', | |||||
| // containLabel: true | |||||
| // }, | |||||
| // tooltip: { | |||||
| // formatter: '{a} <br/>{b} : {c}%' | |||||
| // }, | |||||
| // series: [ | |||||
| // { | |||||
| // name: '系统健康度', | |||||
| // type: 'gauge', | |||||
| // progress: { | |||||
| // show: true | |||||
| // }, | |||||
| // detail: { | |||||
| // valueAnimation: true, | |||||
| // formatter: '{value}' | |||||
| // }, | |||||
| // data: [ | |||||
| // { | |||||
| // value: 97, | |||||
| // name: '百分比' | |||||
| // } | |||||
| // ] | |||||
| // } | |||||
| // ] | |||||
| // }; | |||||
| var d1 = document.getElementById('d1'); | var d1 = document.getElementById('d1'); | ||||
| var d1Chart = echarts.init(d1, 'dark'); | var d1Chart = echarts.init(d1, 'dark'); | ||||
| var d2 = document.getElementById('d2'); | var d2 = document.getElementById('d2'); | ||||
| @@ -357,6 +341,22 @@ export class DataVS1Component implements OnInit { | |||||
| // var d3 = document.getElementById('d3'); | // var d3 = document.getElementById('d3'); | ||||
| // var d3Chart = echarts.init(d3, 'dark'); | // var d3Chart = echarts.init(d3, 'dark'); | ||||
| var errorData = []; | |||||
| var categoryData = []; | |||||
| var barData = []; | |||||
| var dataCount = 100; | |||||
| for (var i = 0; i < dataCount; i++) { | |||||
| var val = Math.random() * 1000; | |||||
| categoryData.push('category' + i); | |||||
| errorData.push([ | |||||
| i, | |||||
| echarts.number.round(Math.max(0, val - Math.random() * 100)), | |||||
| echarts.number.round(val + Math.random() * 80) | |||||
| ]); | |||||
| barData.push(echarts.number.round(val, 2)); | |||||
| } | |||||
| var optionD1; | var optionD1; | ||||
| optionD1 = { | optionD1 = { | ||||
| title: { | title: { | ||||
| @@ -367,7 +367,7 @@ export class DataVS1Component implements OnInit { | |||||
| trigger: 'axis' | trigger: 'axis' | ||||
| }, | }, | ||||
| legend: { | legend: { | ||||
| data: ['超差样数量', '不合格样数量'] | |||||
| data: ['测量值', '上限值', '下限值',] | |||||
| }, | }, | ||||
| grid: { | grid: { | ||||
| left: '3%', | left: '3%', | ||||
| @@ -388,7 +388,6 @@ export class DataVS1Component implements OnInit { | |||||
| xAxis: [ | xAxis: [ | ||||
| { | { | ||||
| type: 'category', | type: 'category', | ||||
| // prettier-ignore | |||||
| data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] | data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] | ||||
| } | } | ||||
| ], | ], | ||||
| @@ -399,39 +398,211 @@ export class DataVS1Component implements OnInit { | |||||
| ], | ], | ||||
| series: [ | series: [ | ||||
| { | { | ||||
| name: '超差样数量', | |||||
| name: '测量值', | |||||
| type: 'line', | type: 'line', | ||||
| data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], | |||||
| data: [100, 155, 139, 199, 220, 160, 120, 182.2, 150, 155, 160, 180], | |||||
| markPoint: { | markPoint: { | ||||
| data: [ | data: [ | ||||
| { type: 'max', name: 'Max' }, | |||||
| { type: 'min', name: 'Min' } | |||||
| { name: 'Max', value: 220, xAxis: 4, yAxis: 220 }, | |||||
| { name: 'Min', value: 100, xAxis: 0, yAxis: 100 } | |||||
| ] | ] | ||||
| }, | |||||
| markLine: { | |||||
| data: [{ type: 'average', name: 'Avg' }] | |||||
| } | } | ||||
| }, | }, | ||||
| { | { | ||||
| name: '不合格样数量', | |||||
| type: 'bar', | |||||
| data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], | |||||
| type: 'custom', | |||||
| name: 'error', | |||||
| itemStyle: { | |||||
| borderWidth: 1.5 | |||||
| }, | |||||
| renderItem: function (_params: any, api: any) { | |||||
| var xValue = api.value(0); | |||||
| var highPoint = api.coord([xValue, api.value(1)]); | |||||
| var lowPoint = api.coord([xValue, api.value(2)]); | |||||
| var halfWidth = api.size([1, 0])[0] * 0.1; | |||||
| var style = api.style({ | |||||
| stroke: api.visual('color'), | |||||
| fill: undefined | |||||
| }); | |||||
| return { | |||||
| type: 'group', | |||||
| children: [ | |||||
| { | |||||
| type: 'line', | |||||
| transition: ['shape'], | |||||
| shape: { | |||||
| x1: highPoint[0] - halfWidth, | |||||
| y1: highPoint[1], | |||||
| x2: highPoint[0] + halfWidth, | |||||
| y2: highPoint[1] | |||||
| }, | |||||
| style: style | |||||
| }, | |||||
| { | |||||
| type: 'line', | |||||
| transition: ['shape'], | |||||
| shape: { | |||||
| x1: highPoint[0], | |||||
| y1: highPoint[1], | |||||
| x2: lowPoint[0], | |||||
| y2: lowPoint[1] | |||||
| }, | |||||
| style: style | |||||
| }, | |||||
| { | |||||
| type: 'line', | |||||
| transition: ['shape'], | |||||
| shape: { | |||||
| x1: lowPoint[0] - halfWidth, | |||||
| y1: lowPoint[1], | |||||
| x2: lowPoint[0] + halfWidth, | |||||
| y2: lowPoint[1] | |||||
| }, | |||||
| style: style | |||||
| } | |||||
| ] | |||||
| }; | |||||
| }, | |||||
| encode: { | |||||
| x: 0, | |||||
| y: [1, 2] | |||||
| }, | |||||
| data: errorData, | |||||
| z: 100 | |||||
| } | |||||
| ] | |||||
| }; | |||||
| this.chart_options1 = { | |||||
| title: { | |||||
| textStyle: { | |||||
| color: "#ffffff" | |||||
| }, | |||||
| text: '全水', | |||||
| subtext: '(kg/kg)', | |||||
| }, | |||||
| legend: { | |||||
| data: ['测量值', '上限值', '下限值',] | |||||
| }, | |||||
| calculable: true, | |||||
| xAxis: [ | |||||
| { | |||||
| axisLine: { | |||||
| lineStyle: { | |||||
| color: [ | |||||
| [0.25, '#74FAFB'], | |||||
| [0.5, '#74FAFB'], | |||||
| [0.75, '#74FAFB'], | |||||
| [1, '#74FAFB'] | |||||
| ] | |||||
| } | |||||
| }, | |||||
| position: 'bottom', | |||||
| type: 'category', | |||||
| data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] | |||||
| } | |||||
| ], | |||||
| yAxis: [ | |||||
| { | |||||
| type: 'value' | |||||
| } | |||||
| ], | |||||
| series: [ | |||||
| { | |||||
| name: '测量值', | |||||
| type: 'line', | |||||
| data: [100, 155, 139, 199, 220, 160, 120, 182.2, 150, 155, 160, 180], | |||||
| markPoint: { | markPoint: { | ||||
| data: [ | data: [ | ||||
| { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 }, | |||||
| { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 } | |||||
| { name: '最大值', value: 220, xAxis: 4, yAxis: 220 }, | |||||
| { name: '最小值', value: 100, xAxis: 0, yAxis: 100 } | |||||
| ] | ] | ||||
| }, | }, | ||||
| markLine: { | markLine: { | ||||
| data: [{ type: 'average', name: 'Avg' }] | |||||
| data: [{ type: 'average', name: '平均值' }] | |||||
| } | } | ||||
| }, | |||||
| { | |||||
| type: 'custom', | |||||
| name: 'error', | |||||
| itemStyle: { | |||||
| borderWidth: 1.5 | |||||
| }, | |||||
| renderItem: function (_params: any, api: any) { | |||||
| var xValue = api.value(0); | |||||
| var highPoint = api.coord([xValue, api.value(1)]); | |||||
| var lowPoint = api.coord([xValue, api.value(2)]); | |||||
| var halfWidth = api.size([1, 0])[0] * 0.1; | |||||
| var style = api.style({ | |||||
| stroke: api.visual('color'), | |||||
| fill: undefined | |||||
| }); | |||||
| return { | |||||
| type: 'group', | |||||
| children: [ | |||||
| { | |||||
| type: 'line', | |||||
| transition: ['shape'], | |||||
| shape: { | |||||
| x1: highPoint[0] - halfWidth, | |||||
| y1: highPoint[1], | |||||
| x2: highPoint[0] + halfWidth, | |||||
| y2: highPoint[1] | |||||
| }, | |||||
| style: style | |||||
| }, | |||||
| { | |||||
| type: 'line', | |||||
| transition: ['shape'], | |||||
| shape: { | |||||
| x1: highPoint[0], | |||||
| y1: highPoint[1], | |||||
| x2: lowPoint[0], | |||||
| y2: lowPoint[1] | |||||
| }, | |||||
| style: style | |||||
| }, | |||||
| { | |||||
| type: 'line', | |||||
| transition: ['shape'], | |||||
| shape: { | |||||
| x1: lowPoint[0] - halfWidth, | |||||
| y1: lowPoint[1], | |||||
| x2: lowPoint[0] + halfWidth, | |||||
| y2: lowPoint[1] | |||||
| }, | |||||
| style: style | |||||
| } | |||||
| ] | |||||
| }; | |||||
| }, | |||||
| encode: { | |||||
| x: 0, | |||||
| y: [1, 2] | |||||
| }, | |||||
| data: errorData, | |||||
| z: 100 | |||||
| } | } | ||||
| ] | ] | ||||
| }; | }; | ||||
| var optionD2; | var optionD2; | ||||
| optionD2 = { | optionD2 = { | ||||
| title: { | title: { | ||||
| text: '热值', | text: '热值', | ||||
| subtext: '(kg/kg)' | subtext: '(kg/kg)' | ||||
| }, | }, | ||||
| grid: { | |||||
| left: '3%', | |||||
| right: '3%', | |||||
| bottom: '3%', | |||||
| containLabel: true | |||||
| }, | |||||
| tooltip: { | tooltip: { | ||||
| trigger: 'axis' | trigger: 'axis' | ||||
| }, | }, | ||||
| @@ -554,9 +725,8 @@ export class DataVS1Component implements OnInit { | |||||
| optionD1 && d1Chart.setOption(optionD1); | optionD1 && d1Chart.setOption(optionD1); | ||||
| optionD2 && d2Chart.setOption(optionD2); | optionD2 && d2Chart.setOption(optionD2); | ||||
| // optionD3 && d3Chart.setOption(optionD3); | |||||
| c1Chart.setOption(c1OptionC); | |||||
| this.c1Chart.setOption(this.c1OptionC); | |||||
| c2Chart.setOption(c2OptionC); | c2Chart.setOption(c2OptionC); | ||||
| var r1 = document.getElementById('r1'); | var r1 = document.getElementById('r1'); | ||||
| @@ -661,4 +831,12 @@ export class DataVS1Component implements OnInit { | |||||
| } | } | ||||
| add(): void { } | add(): void { } | ||||
| public unsafePublish(topic: string, message: string): void { | |||||
| this._mqttService.unsafePublish(topic, message, { qos: 1, retain: true }); | |||||
| } | |||||
| ngOnDestroy(): void { | |||||
| this.subscription.unsubscribe(); | |||||
| } | |||||
| } | } | ||||
+ 1
- 0
src/app/routes/data-v/threejs/threejs.component.html
Visa fil
| @@ -0,0 +1 @@ | |||||
| <iframe src="http://112.33.111.160:8083/" width="100%" height="650px" style="border: 0;"></iframe> | |||||
+ 0
- 0
src/app/routes/data-v/threejs/threejs.component.less
Visa fil
+ 19
- 0
src/app/routes/data-v/threejs/threejs.component.ts
Visa fil
| @@ -0,0 +1,19 @@ | |||||
| import { Component, OnInit, ViewChild, inject } from '@angular/core'; | |||||
| import { STColumn, STComponent } from '@delon/abc/st'; | |||||
| import { SFSchema } from '@delon/form'; | |||||
| import { ModalHelper, _HttpClient } from '@delon/theme'; | |||||
| import { SHARED_IMPORTS } from '@shared'; | |||||
| @Component({ | |||||
| selector: 'app-data-v-threejs', | |||||
| standalone: true, | |||||
| imports: [...SHARED_IMPORTS], | |||||
| templateUrl: './threejs.component.html', | |||||
| styleUrls: ['./threejs.component.less'] | |||||
| }) | |||||
| export class DataVThreejsComponent implements OnInit { | |||||
| private readonly http = inject(_HttpClient); | |||||
| private readonly modal = inject(ModalHelper); | |||||
| ngOnInit(): void { } | |||||
| } | |||||
+ 13
- 0
src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.html
Visa fil
| @@ -0,0 +1,13 @@ | |||||
| <ag-grid-angular #myGrid [class]="gridThemeClass" [pagination]="true" [suppressPaginationPanel]="true" | |||||
| [suppressPaginationPanel]="true" [suppressScrollOnNewData]="true" [paginationPageSize]="pageSize" | |||||
| [defaultColDef]="defaultColDef" [rowData]="rowData" [columnDefs]="columnDefs"> | |||||
| </ag-grid-angular> | |||||
| <br /> | |||||
| <!-- 分页 --> | |||||
| <div class="grid-pagination"> | |||||
| <div class="page-total-style">共 {{ pageRowTotal }} 项数据</div> | |||||
| <nz-pagination [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="pageRowTotal" | |||||
| (nzPageSizeChange)="nzPageSizeChange($event)" (nzPageIndexChange)="nzPageIndexChange($event)" | |||||
| [className]="paginationThemeClass" nzShowSizeChanger /> | |||||
| </div> | |||||
+ 3
- 0
src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.less
Visa fil
| @@ -0,0 +1,3 @@ | |||||
| /* Core Grid CSS */ | |||||
| @import 'ag-grid-community/styles/ag-grid.css'; | |||||
| @import 'ag-grid-community/styles/ag-theme-quartz.css'; | |||||
+ 65
- 0
src/app/routes/data-v/workstation/ag-grid-component/ag-grid-component.component.ts
Visa fil
| @@ -0,0 +1,65 @@ | |||||
| import { Component, OnInit, ViewChild, Input } from '@angular/core'; | |||||
| import { AgGridAngular } from 'ag-grid-angular'; | |||||
| import { ColDef } from 'ag-grid-community'; | |||||
| import { | |||||
| GridApi, | |||||
| } from 'ag-grid-community'; | |||||
| import { NzPaginationModule } from 'ng-zorro-antd/pagination'; | |||||
| @Component({ | |||||
| selector: 'app-ag-grid-component', | |||||
| imports: [AgGridAngular, NzPaginationModule], | |||||
| standalone: true, | |||||
| templateUrl: './ag-grid-component.component.html', | |||||
| styleUrls: ["./pagination-style/pagination.less"] | |||||
| }) | |||||
| export class AgGridComponentComponent implements OnInit { | |||||
| @ViewChild('myGrid') grid!: AgGridAngular; | |||||
| /**每页数 */ | |||||
| public pageSize!: number; | |||||
| /**当前页 */ | |||||
| public pageIndex!: number; | |||||
| /**总数 */ | |||||
| public pageRowTotal!: number; | |||||
| //默认列配置 | |||||
| @Input() defaultColDef: ColDef = { | |||||
| width: 130, | |||||
| editable: false, | |||||
| }; | |||||
| /** 列头 */ | |||||
| @Input() columnDefs: ColDef[] = []; | |||||
| /**行数据 */ | |||||
| @Input() rowData: any[] = []; | |||||
| /**表格主题 */ | |||||
| @Input() gridThemeClass: string = "ag-theme-quartz" | |||||
| @Input() paginationThemeClass: string = "ag-theme-quartz" | |||||
| /** 构造函数 */ | |||||
| constructor() { } | |||||
| /**初始化 */ | |||||
| ngOnInit() { | |||||
| console.log('-----表格初始化-----'); | |||||
| this.pageSize = 10; | |||||
| this.pageIndex = 1; | |||||
| this.pageRowTotal = this.rowData.length; | |||||
| } | |||||
| //每页数 | |||||
| nzPageSizeChange(_pageSize: any) { | |||||
| this.pageSize = _pageSize; | |||||
| } | |||||
| //当前页 | |||||
| nzPageIndexChange(_pageIndex: any) { | |||||
| console.log("nzPageIndexChange" + _pageIndex) | |||||
| if (this.grid.api) { | |||||
| if (_pageIndex == 1) { | |||||
| /**去首页 */ | |||||
| this.grid.api.paginationGoToFirstPage(); | |||||
| } else { | |||||
| /** 页面跳转 */ | |||||
| this.grid.api.paginationGoToPage(_pageIndex); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 94
- 0
src/app/routes/data-v/workstation/ag-grid-component/pagination-style/pagination.less
Visa fil
| @@ -0,0 +1,94 @@ | |||||
| /* 分页器 */ | |||||
| .grid-pagination { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| height: 32px; | |||||
| } | |||||
| // 第几条 文字 | |||||
| .grid-pagination ::ng-deep .ant-select-selection-item, | |||||
| .ant-select-selector { | |||||
| color: #00eff8; | |||||
| border-color: #00eff8; | |||||
| border-width: 2px; | |||||
| } | |||||
| //总数 | |||||
| .grid-pagination ::ng-deep .page-total-style { | |||||
| font-size: medium; | |||||
| font-weight: 700; | |||||
| color: #00eff8; | |||||
| } | |||||
| //页面尺寸选中 | |||||
| ::ng-deep .ant-select-item-option { | |||||
| color: #00eff8 !important; | |||||
| } | |||||
| //页面尺寸每项 | |||||
| ::ng-deep .ant-select-item-option-active div { | |||||
| font-weight: 800 !important; | |||||
| color: #00eff8 !important; | |||||
| } | |||||
| //箭头 颜色 | |||||
| .grid-pagination::ng-deep .anticon { | |||||
| color: #00eff8; | |||||
| } | |||||
| //页面尺寸选择 | |||||
| .grid-pagination ::ng-deep .ant-select-selector { | |||||
| color: #00eff8; | |||||
| border-color: #00eff8; | |||||
| border-width: 2px; | |||||
| } | |||||
| //前 link | |||||
| .grid-pagination ::ng-deep .ant-pagination-prev .ant-pagination-item-link { | |||||
| color: #00eff8; | |||||
| border-color: transparent; | |||||
| } | |||||
| //中间的 item | |||||
| .grid-pagination ::ng-deep .ant-pagination-item { | |||||
| color: #00eff8; | |||||
| border-color: #00eff8; | |||||
| border-width: 2px; | |||||
| } | |||||
| // disable 样式 | |||||
| .grid-pagination ::ng-deep .ant-pagination-item a { | |||||
| color: #00eff8 !important; | |||||
| } | |||||
| .grid-pagination ::ng-deep .ant-pagination-item-active a { | |||||
| color: black !important; | |||||
| } | |||||
| //前后箭头 | |||||
| .grid-pagination ::ng-deep .ant-pagination-next button, | |||||
| .ant-pagination-prev button { | |||||
| color: #00eff8; | |||||
| border-color: transparent; | |||||
| } | |||||
| //鼠标放上去的样式 | |||||
| .grid-pagination ::ng-deep .ant-pagination-item-active:focus-visible, | |||||
| .ant-pagination-item-active:hover, | |||||
| .ant-pagination-next:hover button, | |||||
| .ant-pagination-prev:hover button { | |||||
| border-color: #00eff8; | |||||
| border-width: 2px; | |||||
| } | |||||
| //选中样式 | |||||
| .grid-pagination ::ng-deep .ant-pagination-item-active { | |||||
| font-weight: 500; | |||||
| background-color: #00eff8; | |||||
| border-color: #00eff8; | |||||
| border-width: 2px; | |||||
| } | |||||
+ 17
- 0
src/app/routes/data-v/workstation/grid-button/grid-button.less
Visa fil
| @@ -0,0 +1,17 @@ | |||||
| .ag-grid-button-style { | |||||
| cursor: pointer; | |||||
| display: inline-block; | |||||
| width: 90px; | |||||
| height: 90%; | |||||
| font-weight: 800; | |||||
| color: #74FAFB; | |||||
| text-align: center; | |||||
| background-color: transparent; | |||||
| border-color: #74FAFB; | |||||
| border-radius: 4px; | |||||
| } | |||||
| .ag-grid-button-style:hover { | |||||
| color: white; | |||||
| background-color: #74FAFB; | |||||
| } | |||||
+ 38
- 0
src/app/routes/data-v/workstation/grid-button/grid-button.ts
Visa fil
| @@ -0,0 +1,38 @@ | |||||
| import { Component } from '@angular/core'; | |||||
| import { ICellRendererAngularComp } from 'ag-grid-angular'; | |||||
| import { ICellRendererParams } from 'ag-grid-community'; | |||||
| @Component({ | |||||
| standalone: true, | |||||
| template: ` | |||||
| <span style="display: flex; justify-content: center; align-items: center; height: 100%;"> | |||||
| <button class="ag-grid-button-style" (click)="buttonClicked()">{{cellValue}}</button> | |||||
| </span> | |||||
| `, | |||||
| styleUrls: ['./grid-button.less'] | |||||
| }) | |||||
| export class GridButtonValueRenderer implements ICellRendererAngularComp { | |||||
| public cellValue!: string; | |||||
| public cellPath!: string; | |||||
| // gets called once before the renderer is used | |||||
| agInit(params: ICellRendererParams): void { | |||||
| this.cellValue = this.getValueToDisplay(params); | |||||
| } | |||||
| // gets called whenever the user gets the cell to refresh | |||||
| refresh(params: ICellRendererParams) { | |||||
| // set value into cell again | |||||
| this.cellValue = this.getValueToDisplay(params); | |||||
| return true; | |||||
| } | |||||
| buttonClicked() { | |||||
| alert(`点击了 ${this.cellValue}`); | |||||
| } | |||||
| getValueToDisplay(params: ICellRendererParams) { | |||||
| return params.valueFormatted ? params.valueFormatted : params.value; | |||||
| } | |||||
| } | |||||
+ 18
- 14
src/app/routes/data-v/workstation/workstation.component.html
Visa fil
| @@ -1,19 +1,23 @@ | |||||
| <div nz-row [nzGutter]="[8, 8]"> | |||||
| <data-v-card nz-col nzSpan="12" title="待办任务"> | |||||
| <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs1" class="ag-theme-datav"> | |||||
| </ag-grid-angular> | |||||
| <div nz-row [nzGutter]="[12, 12]"> | |||||
| <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="待办任务"> | |||||
| <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData" | |||||
| [columnDefs]="colDefs1" [gridThemeClass]="gridThemedClass"> | |||||
| </app-ag-grid-component> | |||||
| </data-v-card> | </data-v-card> | ||||
| <data-v-card nz-col nzSpan="12" title="已办任务"> | |||||
| <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs2" class="ag-theme-datav"> | |||||
| </ag-grid-angular> | |||||
| <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="已办任务"> | |||||
| <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData" | |||||
| [columnDefs]="colDefs2" gridThemeClass="ag-theme-quartz ag-theme-datav"> | |||||
| </app-ag-grid-component> | |||||
| </data-v-card> | </data-v-card> | ||||
| <data-v-card nz-col nzSpan="12" title="报警信息"> | |||||
| <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs3" class="ag-theme-datav" [pagination]="true" | |||||
| [paginationAutoPageSize]="true" [paginationPageSize]="10"> | |||||
| </ag-grid-angular> | |||||
| <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="报警信息"> | |||||
| <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData" | |||||
| [columnDefs]="colDefs3" gridThemeClass="ag-theme-quartz ag-theme-datav"> | |||||
| </app-ag-grid-component> | |||||
| </data-v-card> | </data-v-card> | ||||
| <data-v-card nz-col nzSpan="12" title="通知"> | |||||
| <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs4" class="ag-theme-datav"> | |||||
| </ag-grid-angular> | |||||
| <data-v-card nz-col nzSpan="24" nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" nzXXl="12" title="通知"> | |||||
| <app-ag-grid-component style="width: 100%;" [defaultColDef]="defaultColDef" [rowData]="rowData" | |||||
| [columnDefs]="colDefs4" gridThemeClass="ag-theme-quartz ag-theme-datav"> | |||||
| </app-ag-grid-component> | |||||
| </data-v-card> | </data-v-card> | ||||
| </div> | </div> | ||||
+ 107
- 19
src/app/routes/data-v/workstation/workstation.component.less
Visa fil
| @@ -16,14 +16,40 @@ | |||||
| // background-position: top;background-positionbackground-position | // background-position: top;background-positionbackground-position | ||||
| // } | // } | ||||
| .workstation-content-title { | |||||
| margin-bottom: 0.5rem; | |||||
| font-size: 18px; | |||||
| // .workstation-content-title { | |||||
| // margin-bottom: 0.5rem; | |||||
| // font-size: 18px; | |||||
| // font-weight: 600; | |||||
| // color: #94DDF3; | |||||
| // } | |||||
| /* 分页器 */ | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-row-selected .ag-ltr .ag-cell { | |||||
| color: red !important; | |||||
| } | |||||
| // 选中行样式 | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-ltr .ag-row-focus { | |||||
| font-weight: 600; | font-weight: 600; | ||||
| color: #94DDF3; | |||||
| color: red; | |||||
| .ag-cell-focus { | |||||
| border: #74FAFB; | |||||
| } | |||||
| .ag-grid-button-style { | |||||
| color: red; | |||||
| border-color: red; | |||||
| } | |||||
| } | } | ||||
| .ag-theme-datav { | |||||
| ::ng-deep .ag-theme-datav { | |||||
| --ag-border-color: #74FAFB; | --ag-border-color: #74FAFB; | ||||
| --ag-foreground-color: #74FAFB; | --ag-foreground-color: #74FAFB; | ||||
| --ag-background-color: #0A1632; | --ag-background-color: #0A1632; | ||||
| @@ -31,47 +57,109 @@ | |||||
| --ag-header-background-color: #0A1632; | --ag-header-background-color: #0A1632; | ||||
| --ag-odd-row-background-color: #0A1632; | --ag-odd-row-background-color: #0A1632; | ||||
| --ag-header-column-resize-handle-color: rgb(126 46 132); | --ag-header-column-resize-handle-color: rgb(126 46 132); | ||||
| --ag-font-size: 17px; | |||||
| --ag-font-size: 12px; | |||||
| --ag-font-family: monospace; | --ag-font-family: monospace; | ||||
| height: 14rem; | |||||
| height: 17rem; | |||||
| font-weight: 700; | |||||
| //竖线颜色 | |||||
| border-width: 3px; | |||||
| &:extend(.ag-theme-material); | |||||
| //标题间的 竖线 | |||||
| ::ng-deep .ag-header-cell-resize { | |||||
| --ag-header-column-resize-handle-color: #00eff8; | |||||
| } | |||||
| ::ng-deep .ag-header-row { | |||||
| font-size: 14px; | |||||
| font-weight: 700; | |||||
| } | |||||
| //外边框去掉圆角 | |||||
| ::ng-deep .ag-root-wrapper { | |||||
| border-radius: 0; | |||||
| } | |||||
| } | } | ||||
| /* 设置滚动条的宽度 */ | /* 设置滚动条的宽度 */ | ||||
| .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar { | |||||
| width: 12px; | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar { | |||||
| width: 12em; | |||||
| } | } | ||||
| /* 设置滚动条滑块的样式 */ | /* 设置滚动条滑块的样式 */ | ||||
| .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb { | |||||
| background-color: red; | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb { | |||||
| margin-left: 40px; | |||||
| background-color: #00eff8; | |||||
| /* 圆角 */ | /* 圆角 */ | ||||
| border: 2px solid orange; | |||||
| border: 2px solid #00eff8; | |||||
| /* 滚动条滑块的背景颜色 */ | /* 滚动条滑块的背景颜色 */ | ||||
| border-radius: 6px; | |||||
| /* 滚动条滑块的边框 */ | /* 滚动条滑块的边框 */ | ||||
| } | } | ||||
| /* 设置滚动条轨道的样式 */ | /* 设置滚动条轨道的样式 */ | ||||
| .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track { | |||||
| background-color: yellow; | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track { | |||||
| background-color: transparent; | |||||
| border-color: #00eff8; | |||||
| /* 滚动条轨道的背景颜色 */ | /* 滚动条轨道的背景颜色 */ | ||||
| } | } | ||||
| /* 设置滚动条滑块悬浮时的样式 */ | /* 设置滚动条滑块悬浮时的样式 */ | ||||
| .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover { | |||||
| background-color: darkred; | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover { | |||||
| margin-left: 40px; | |||||
| background-color: #00eff8; | |||||
| /* 滚动条滑块悬浮时的背景颜色 */ | /* 滚动条滑块悬浮时的背景颜色 */ | ||||
| } | } | ||||
| /* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */ | /* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */ | ||||
| .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active { | |||||
| background-color: #a00; | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active { | |||||
| background-color: #00eff8; | |||||
| /* 滚动条滑块激活时的背景颜色 */ | /* 滚动条滑块激活时的背景颜色 */ | ||||
| } | |||||
| //竖向 | |||||
| ::ng-deep .ag-body-vertical-scroll-viewport { | |||||
| scrollbar-color: auto; | |||||
| } | |||||
| //横向 | |||||
| ::ng-deep .ag-body-horizontal-scroll-viewport { | |||||
| scrollbar-color: auto; | |||||
| } | |||||
| /* 设置滚动条的宽度 */ | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar { | |||||
| height: 14em; | |||||
| color: #000; | |||||
| } | |||||
| /* 设置横向滚动条轨道的样式 */ | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track { | |||||
| background-color: transparent; | |||||
| border-color: #00eff8; | |||||
| } | |||||
| /* 设置横向滚动条滑块悬浮时的样式 */ | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover { | |||||
| background-color: #00eff8; | |||||
| } | |||||
| /* 设置横向滚动条滑块激活时的样式 */ | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:active { | |||||
| background-color: #00eff8; | |||||
| } | |||||
| /* 设置横向滚动条滑块的颜色 */ | |||||
| ::ng-deep .ag-theme-datav ::ng-deep .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb { | |||||
| background-color: #00eff8; | |||||
| } | } | ||||
+ 85
- 237
src/app/routes/data-v/workstation/workstation.component.ts
Visa fil
| @@ -1,20 +1,22 @@ | |||||
| import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; | import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core'; | ||||
| import { STColumn, STComponent } from '@delon/abc/st'; | |||||
| import { SFSchema } from '@delon/form'; | |||||
| import { ModalHelper, _HttpClient } from '@delon/theme'; | import { ModalHelper, _HttpClient } from '@delon/theme'; | ||||
| import { SHARED_IMPORTS } from '@shared'; | import { SHARED_IMPORTS } from '@shared'; | ||||
| import { AgGridAngular } from 'ag-grid-angular'; // AG Grid Component | |||||
| import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface | |||||
| import { AgGridAngular } from 'ag-grid-angular'; | |||||
| import { ColDef } from 'ag-grid-community'; | |||||
| import { | |||||
| GridApi, | |||||
| } from 'ag-grid-community'; | |||||
| import { NzPaginationModule } from 'ng-zorro-antd/pagination'; | |||||
| import { DataVCardComponent } from '../card/card.component'; | import { DataVCardComponent } from '../card/card.component'; | ||||
| import { DataVTitleComponent } from '../title/title.component'; | import { DataVTitleComponent } from '../title/title.component'; | ||||
| import { MqttModule, IMqttServiceOptions } from 'ngx-mqtt'; | |||||
| import mqtt from 'mqtt'; | |||||
| import { IMqttMessage, MqttService } from 'ngx-mqtt'; | |||||
| import { GridButtonValueRenderer } from './grid-button/grid-button'; | |||||
| import { AgGridComponentComponent } from './ag-grid-component/ag-grid-component.component'; | |||||
| import { MqttService } from 'ngx-mqtt'; | |||||
| @Component({ | @Component({ | ||||
| selector: 'app-data-v-workstation', | selector: 'app-data-v-workstation', | ||||
| standalone: true, | standalone: true, | ||||
| imports: [AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS], | |||||
| imports: [AgGridAngular, AgGridComponentComponent, NzPaginationModule, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS], | |||||
| templateUrl: './workstation.component.html', | templateUrl: './workstation.component.html', | ||||
| styleUrls: ['./workstation.component.less'] | styleUrls: ['./workstation.component.less'] | ||||
| }) | }) | ||||
| @@ -23,245 +25,82 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { | |||||
| private readonly modal = inject(ModalHelper); | private readonly modal = inject(ModalHelper); | ||||
| private readonly elementRef = inject(ElementRef); | private readonly elementRef = inject(ElementRef); | ||||
| private readonly topic = 'test/topic'; | |||||
| @ViewChild('myGrid') grid!: AgGridAngular; | |||||
| public defaultColDef: ColDef = { | |||||
| width: 170, | |||||
| editable: false, | |||||
| }; | |||||
| dataSet: any; | |||||
| public gridThemedClass: string = 'ag-theme-quartz ag-theme-datav'; | |||||
| //多模拟几行数据出来 | |||||
| rowData = [ | |||||
| { | |||||
| rwmc: '任务1', | |||||
| rwms: '任务描述1', | |||||
| kssj: '2024-1-1', | |||||
| jhwcsj: '2024-1-2', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点1', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警1', | |||||
| bjms: '报警描述1', | |||||
| bjsj: '2024-1-1', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| }, | |||||
| { | |||||
| rwmc: '任务2', | |||||
| rwms: '任务描述2', | |||||
| kssj: '2024-1-2', | |||||
| jhwcsj: '2024-1-3', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点2', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警2', | |||||
| bjms: '报警描述2', | |||||
| bjsj: '2024-1-2', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| }, | |||||
| { | |||||
| rwmc: '任务3', | |||||
| rwms: '任务描述3', | |||||
| kssj: '2024-1-3', | |||||
| jhwcsj: '2024-1-4', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点3', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警3', | |||||
| bjms: '报警描述3', | |||||
| bjsj: '2024-1-3', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| }, | |||||
| { | |||||
| rwmc: '任务4', | |||||
| rwms: '任务描述4', | |||||
| kssj: '2024-1-4', | |||||
| jhwcsj: '2024-1-5', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点4', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警4', | |||||
| bjms: '报警描述4', | |||||
| bjsj: '2024-1-4', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| }, | |||||
| { | |||||
| rwmc: '任务5', | |||||
| rwms: '任务描述5', | |||||
| kssj: '2024-1-5', | |||||
| jhwcsj: '2024-1-6', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点5', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警5', | |||||
| bjms: '报警描述5', | |||||
| bjsj: '2024-1-5', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| }, | |||||
| { | |||||
| rwmc: '任务1', | |||||
| rwms: '任务描述1', | |||||
| kssj: '2024-1-1', | |||||
| jhwcsj: '2024-1-2', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点1', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警1', | |||||
| bjms: '报警描述1', | |||||
| bjsj: '2024-1-1', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| }, | |||||
| { | |||||
| rwmc: '任务2', | |||||
| rwms: '任务描述2', | |||||
| kssj: '2024-1-2', | |||||
| jhwcsj: '2024-1-3', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点2', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警2', | |||||
| bjms: '报警描述2', | |||||
| bjsj: '2024-1-2', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| }, | |||||
| { | |||||
| rwmc: '任务3', | |||||
| rwms: '任务描述3', | |||||
| kssj: '2024-1-3', | |||||
| jhwcsj: '2024-1-4', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点3', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警3', | |||||
| bjms: '报警描述3', | |||||
| bjsj: '2024-1-3', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| }, | |||||
| { | |||||
| rwmc: '任务4', | |||||
| rwms: '任务描述4', | |||||
| kssj: '2024-1-4', | |||||
| jhwcsj: '2024-1-5', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点4', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警4', | |||||
| bjms: '报警描述4', | |||||
| bjsj: '2024-1-4', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| }, | |||||
| { | |||||
| rwmc: '任务5', | |||||
| rwms: '任务描述5', | |||||
| kssj: '2024-1-5', | |||||
| jhwcsj: '2024-1-6', | |||||
| sfcq: '否', | |||||
| dqzt: '正常', | |||||
| dqjd: '节点5', | |||||
| sjwcsj: '2024-1-2', | |||||
| bjmc: '报警5', | |||||
| bjms: '报警描述5', | |||||
| bjsj: '2024-1-5', | |||||
| gzyy: '-', | |||||
| clff: '-', | |||||
| tzsj: '2024-1-2', | |||||
| zycd: '一般', | |||||
| tzmc: '系统提示', | |||||
| tznr: '账户登录', | |||||
| fj: '-' | |||||
| } | |||||
| ]; | |||||
| rowData: object[] = []; | |||||
| colDefs1: ColDef[] = [ | colDefs1: ColDef[] = [ | ||||
| { headerName: '任务名称', field: 'rwmc', flex: 1 }, | |||||
| { headerName: '任务描述', field: 'rwms', flex: 2 }, | |||||
| { headerName: '开始时间', field: 'kssj', flex: 1 }, | |||||
| { headerName: '计划完成时间', field: 'jhwcsj', flex: 1.5 }, | |||||
| { headerName: '是否超期', field: 'sfcq', flex: 1 } | |||||
| { | |||||
| headerName: '序号', | |||||
| valueGetter: function (params: any) { | |||||
| return parseInt(params.node.id) + 1; | |||||
| }, | |||||
| width: 90, | |||||
| sortable: true, | |||||
| unSortIcon: true, field: "xh", | |||||
| }, | |||||
| { headerName: '任务名称', unSortIcon: true, field: "rwmc", }, | |||||
| { headerName: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 }, | |||||
| { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 }, | |||||
| { headerName: '计划完成时间', unSortIcon: true, field: "jhwcsj", minWidth: 170, flex: 1 }, | |||||
| { headerName: '超期', width: 80, field: "sfcq", }, | |||||
| { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, }, | |||||
| ]; | ]; | ||||
| colDefs2: ColDef[] = [ | colDefs2: ColDef[] = [ | ||||
| { headerName: '任务名称', field: 'rwmc', flex: 1 }, | |||||
| { headerName: '任务描述', field: 'rwms', flex: 1 }, | |||||
| { headerName: '开始时间', field: 'kssj', flex: 1 }, | |||||
| { headerName: '当前状态', field: 'dqzt', flex: 1 }, | |||||
| { headerName: '当前节点', field: 'dqjd', flex: 1 }, | |||||
| { headerName: '实际完成时间', field: 'sjwcsj', flex: 1 } | |||||
| { | |||||
| headerName: '序号', valueGetter: function (params: any) { | |||||
| return parseInt(params.node.id) + 1; | |||||
| }, width: 90, unSortIcon: true, field: "xh", | |||||
| }, | |||||
| { headerName: '任务名称', unSortIcon: true, field: "rwmc", }, | |||||
| { headerName: '任务描述', unSortIcon: true, field: "rwms", minWidth: 170, flex: 1 }, | |||||
| { headerName: '开始时间', unSortIcon: true, field: "kssj", minWidth: 170, flex: 1 }, | |||||
| { headerName: '当前状态', field: "dqzt", }, | |||||
| { headerName: '当前节点', field: "dqjd", }, | |||||
| { headerName: '实际完成时间', field: "sjwcsj", minWidth: 170, flex: 1 }, | |||||
| { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, }, | |||||
| ]; | ]; | ||||
| colDefs3: ColDef[] = [ | colDefs3: ColDef[] = [ | ||||
| { headerName: '报警名称', field: 'bjmc', flex: 1 }, | |||||
| { headerName: '报警描述', field: 'bjms', flex: 1 }, | |||||
| { headerName: '报警时间', field: 'bjsj', flex: 1 }, | |||||
| { headerName: '故障原因', field: 'gzyy', flex: 1.5 }, | |||||
| { headerName: '处理方法', field: 'clff', flex: 1 } | |||||
| { | |||||
| headerName: '序号', valueGetter: function (params: any) { | |||||
| return parseInt(params.node.id) + 1; | |||||
| }, width: 90, unSortIcon: true, field: "xh", | |||||
| }, | |||||
| { headerName: '报警名称', unSortIcon: true, field: "bjmc", }, | |||||
| { headerName: '报警等级', unSortIcon: true, field: "bjdg", }, | |||||
| { headerName: '报警描述', unSortIcon: true, field: "bjms", minWidth: 170, flex: 1 }, | |||||
| { headerName: '报警时间', unSortIcon: true, field: "bjsj", minWidth: 170, flex: 1 }, | |||||
| { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, }, | |||||
| { headerName: '故障原因', field: "gzyy", }, | |||||
| { headerName: '处理方法', field: "clff", }, | |||||
| { headerName: '注意事项', field: "clff", }, | |||||
| ]; | ]; | ||||
| // Column Definitions: Defines the columns to be displayed. | // Column Definitions: Defines the columns to be displayed. | ||||
| colDefs4: ColDef[] = [ | colDefs4: ColDef[] = [ | ||||
| { headerName: '通知时间', field: 'tzsj', flex: 1 }, | |||||
| { headerName: '重要程度', field: 'zycd', flex: 1 }, | |||||
| { headerName: '通知名称', field: 'tzmc', flex: 1 }, | |||||
| { headerName: '通知内容', field: 'tznr', flex: 1 }, | |||||
| { headerName: '附件', field: 'fj', flex: 1 } | |||||
| { | |||||
| headerName: '序号', valueGetter: function (params: any) { | |||||
| return parseInt(params.node.id) + 1; | |||||
| }, width: 90, unSortIcon: true, field: "xh", | |||||
| }, | |||||
| { headerName: '通知时间', unSortIcon: true, field: "tzsj", minWidth: 170, flex: 1 }, | |||||
| { headerName: '重要程度', unSortIcon: true, field: "zycd", }, | |||||
| { headerName: '通知名称', unSortIcon: true, field: "tzmc", }, | |||||
| { headerName: '通知内容', unSortIcon: true, field: "tznr", minWidth: 170, flex: 1 }, | |||||
| { headerName: '附件', field: "fj", }, | |||||
| { headerName: '操作', autoHeight: true, width: 110, field: "cz", cellRenderer: GridButtonValueRenderer, }, | |||||
| ]; | ]; | ||||
| client: any; | client: any; | ||||
| @@ -271,9 +110,16 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { | |||||
| } | } | ||||
| ngOnInit(): void { | ngOnInit(): void { | ||||
| this._mqttService.observe('test/topic').subscribe((message: IMqttMessage) => { | |||||
| console.log(message.payload.toString()); | |||||
| }); | |||||
| console.log('ngOnInit' + this.rowData.length); | |||||
| for (var i = 1; i < 30; i++) { | |||||
| this.rowData.push({ | |||||
| rwmc: '任务' + i, rwms: '任务描述' + i, kssj: '2024-1-' + i + ' 13:38:' + i * 11, jhwcsj: '2024-1-' + i + ' 13:38:' + i * 10, sfcq: '否', | |||||
| dqzt: "正常", dqjd: "节点" + i, sjwcsj: '2024-1-' + i + ' 13:38:' + i * 27, bjmc: "报警5", bjms: "报警描述5", bjsj: '2024-1-' + i + ' 13:38:' + i * 12, | |||||
| gzyy: "-", clff: "-", tzsj: '2024-1-' + i + ' 13:38:' + i * 19, zycd: "一般", tzmc: '系统提示', tznr: '账户登录', fj: "-", cz: "操作" | |||||
| }); | |||||
| } | |||||
| } | } | ||||
| ngAfterViewInit(): void { | ngAfterViewInit(): void { | ||||
| @@ -290,4 +136,6 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { | |||||
| // .createStatic(FormEditComponent, { i: { id: 0 } }) | // .createStatic(FormEditComponent, { i: { id: 0 } }) | ||||
| // .subscribe(() => this.st.reload()); | // .subscribe(() => this.st.reload()); | ||||
| } | } | ||||
| } | } | ||||
+ 5
- 6
src/app/routes/passport/login/login.component.html
Visa fil
| @@ -9,20 +9,19 @@ | |||||
| <nz-alert [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg" /> | <nz-alert [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg" /> | ||||
| } | } | ||||
| <nz-form-item> | <nz-form-item> | ||||
| <nz-form-control nzErrorTip="Please enter user, yunpai"> | |||||
| <nz-input-group nzSize="large" nzPrefixIcon="user"> | |||||
| <input nz-input formControlName="userName" placeholder="登录账户" /> | |||||
| <nz-form-control nzErrorTip="Please enter user, admin"> | |||||
| <nz-input-group nzSize="large" nzPrefixIcon="user" style="color: #515151;"> | |||||
| <input nz-input formControlName="userName" placeholder="登录账户" style="color: #515151;" /> | |||||
| </nz-input-group> | </nz-input-group> | ||||
| </nz-form-control> | </nz-form-control> | ||||
| </nz-form-item> | </nz-form-item> | ||||
| <nz-form-item> | <nz-form-item> | ||||
| <nz-form-control nzErrorTip="Please enter password, 1q2w3E*"> | <nz-form-control nzErrorTip="Please enter password, 1q2w3E*"> | ||||
| <nz-input-group nzSize="large" nzPrefixIcon="lock"> | |||||
| <input nz-input type="password" formControlName="password" placeholder="登录密码" /> | |||||
| <nz-input-group nzSize="large" nzPrefixIcon="lock" style="color: #515151;"> | |||||
| <input nz-input type="password" formControlName="password" placeholder="登录密码" style="color: #515151;" /> | |||||
| </nz-input-group> | </nz-input-group> | ||||
| </nz-form-control> | </nz-form-control> | ||||
| </nz-form-item> | </nz-form-item> | ||||
| <nz-form-item /> | |||||
| <nz-form-item> | <nz-form-item> | ||||
| <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock> 登录 </button> | <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock> 登录 </button> | ||||
| </nz-form-item> | </nz-form-item> | ||||
+ 5
- 1
src/app/routes/passport/login/login.component.less
Visa fil
| @@ -91,6 +91,10 @@ | |||||
| color: #515151; | color: #515151; | ||||
| vertical-align: middle; | vertical-align: middle; | ||||
| } | } | ||||
| .color-515151 { | |||||
| color: #515151; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| @@ -100,7 +104,7 @@ | |||||
| color: rgb(255 255 255 / 20%); | color: rgb(255 255 255 / 20%); | ||||
| &:hover { | &:hover { | ||||
| color: #fff; | |||||
| color: #515151; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
+ 32
- 32
src/styles.less
Visa fil
| @@ -6,39 +6,39 @@ | |||||
| @import './styles/index'; | @import './styles/index'; | ||||
| @import './styles/theme'; | @import './styles/theme'; | ||||
| @import 'ag-grid-community/styles/ag-grid.css'; | @import 'ag-grid-community/styles/ag-grid.css'; | ||||
| @import 'ag-grid-community/styles/ag-theme-material.css'; | |||||
| @import 'ag-grid-community/styles/ag-theme-quartz.css'; | @import 'ag-grid-community/styles/ag-theme-quartz.css'; | ||||
| @font-family: 'メイリオ', 'Helvetica Neue', helvetica, arial, sans-serif; | |||||
| .dis-flex { | .dis-flex { | ||||
| display: flex; | |||||
| flex: 1; | |||||
| } | |||||
| .mt10 { | |||||
| margin-top: 1rem; | |||||
| } | |||||
| .mr15 { | |||||
| margin-right: 1.5rem; | |||||
| } | |||||
| .w200 { | |||||
| width: 20rem; | |||||
| } | |||||
| .w260 { | |||||
| width: 26rem; | |||||
| } | |||||
| .w320 { | |||||
| width: 32rem; | |||||
| } | |||||
| .w400 { | |||||
| width: 40rem; | |||||
| } | |||||
| .w480 { | |||||
| width: 48rem; | |||||
| } | |||||
| display: flex; | |||||
| flex: 1; | |||||
| } | |||||
| .mt10 { | |||||
| margin-top: 1rem; | |||||
| } | |||||
| .mr15 { | |||||
| margin-right: 1.5rem; | |||||
| } | |||||
| .w200 { | |||||
| width: 20rem; | |||||
| } | |||||
| .w260 { | |||||
| width: 26rem; | |||||
| } | |||||
| .w320 { | |||||
| width: 32rem; | |||||
| } | |||||
| .w400 { | |||||
| width: 40rem; | |||||
| } | |||||
| .w480 { | |||||
| width: 48rem; | |||||
| } | |||||
+ 1
- 1
src/styles/theme.less
Visa fil
| @@ -2,7 +2,7 @@ | |||||
| // - `default` Default theme | // - `default` Default theme | ||||
| // - `dark` Import the official dark less style file | // - `dark` Import the official dark less style file | ||||
| // - `compact` Import the official compact less style file | // - `compact` Import the official compact less style file | ||||
| @import '@delon/theme/theme-default.less'; | |||||
| @import '@delon/theme/theme-dark.less'; | |||||
| // ==========The following is the custom theme variable area========== | // ==========The following is the custom theme variable area========== | ||||
| // The theme paraments can be generated at https://ng-alain.github.io/ng-alain/ | // The theme paraments can be generated at https://ng-alain.github.io/ng-alain/ | ||||
+ 0
- 1
tsconfig.json
Visa fil
| @@ -1,4 +1,3 @@ | |||||
| /* To learn more about this file see: https://angular.io/config/tsconfig. */ | |||||
| { | { | ||||
| "compileOnSave": false, | "compileOnSave": false, | ||||
| "compilerOptions": { | "compilerOptions": { | ||||