Kaynağa Gözat
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 yıl önce
33 değiştirilmiş dosya ile 2089 ekleme ve 1304 silme
Görünümü Böl
Diff Seçenekleri
-
+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
Dosyayı Görüntüle
| @@ -16,6 +16,7 @@ | |||
| "@angular/platform-browser": "^17.1.0", | |||
| "@angular/platform-browser-dynamic": "^17.1.0", | |||
| "@angular/router": "^17.1.0", | |||
| "@aspnet/signalr": "^1.0.27", | |||
| "@delon/abc": "^17.1.0", | |||
| "@delon/acl": "^17.1.0", | |||
| "@delon/auth": "^17.1.0", | |||
| @@ -25,15 +26,16 @@ | |||
| "@delon/mock": "^17.1.0", | |||
| "@delon/theme": "^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", | |||
| "moment": "^2.30.1", | |||
| "mqtt": "^5.3.6", | |||
| "ng-alain": "^17.1.0", | |||
| "ng-zorro-antd": "^17.1.0", | |||
| "ng2-mqtt": "^0.1.2", | |||
| "ngx-mqtt": "^17.0.0", | |||
| "paho-mqtt": "^1.1.0", | |||
| "rxjs": "~7.8.0", | |||
| "screenfull": "^6.0.2", | |||
| "tslib": "^2.3.0", | |||
| @@ -966,6 +968,12 @@ | |||
| "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": { | |||
| "version": "0.10.1", | |||
| "resolved": "https://registry.npmmirror.com/@assemblyscript/loader/-/loader-0.10.1.tgz", | |||
| @@ -3628,6 +3636,74 @@ | |||
| "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": { | |||
| "version": "17.0.1", | |||
| "resolved": "https://registry.npmmirror.com/@ng-util/lazy/-/lazy-17.0.1.tgz", | |||
| @@ -4592,6 +4668,14 @@ | |||
| "integrity": "sha512-px7OMFO/ncXxixDe1zR13V1iycqWae0MxTaw62RpFlksUi5QuNWgQJFkTQjIOvrmutJbI7Fp2Y2N1F6D2R4G6w==", | |||
| "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": { | |||
| "version": "7.0.15", | |||
| "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz", | |||
| @@ -4718,6 +4802,19 @@ | |||
| "@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": { | |||
| "version": "0.3.36", | |||
| "resolved": "https://registry.npmmirror.com/@types/sockjs/-/sockjs-0.3.36.tgz", | |||
| @@ -6423,9 +6520,19 @@ | |||
| } | |||
| }, | |||
| "node_modules/commist": { | |||
| <<<<<<< HEAD | |||
| "version": "3.2.0", | |||
| "resolved": "https://registry.npmmirror.com/commist/-/commist-3.2.0.tgz", | |||
| "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": { | |||
| "version": "3.0.0", | |||
| @@ -7504,7 +7611,6 @@ | |||
| "version": "0.1.13", | |||
| "resolved": "https://registry.npmmirror.com/encoding/-/encoding-0.1.13.tgz", | |||
| "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", | |||
| "dev": true, | |||
| "optional": true, | |||
| "dependencies": { | |||
| "iconv-lite": "^0.6.2" | |||
| @@ -7514,7 +7620,6 @@ | |||
| "version": "0.6.3", | |||
| "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz", | |||
| "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", | |||
| "dev": true, | |||
| "optional": true, | |||
| "dependencies": { | |||
| "safer-buffer": ">= 2.1.2 < 3.0.0" | |||
| @@ -8446,6 +8551,14 @@ | |||
| "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": { | |||
| "version": "5.1.1", | |||
| "resolved": "https://registry.npmmirror.com/execa/-/execa-5.1.1.tgz", | |||
| @@ -8739,6 +8852,15 @@ | |||
| "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": { | |||
| "version": "5.0.0", | |||
| "resolved": "https://registry.npmmirror.com/figures/-/figures-5.0.0.tgz", | |||
| @@ -9440,9 +9562,19 @@ | |||
| "dev": true | |||
| }, | |||
| "node_modules/help-me": { | |||
| <<<<<<< HEAD | |||
| "version": "5.0.0", | |||
| "resolved": "https://registry.npmmirror.com/help-me/-/help-me-5.0.0.tgz", | |||
| "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": { | |||
| "version": "7.0.1", | |||
| @@ -12322,6 +12454,7 @@ | |||
| } | |||
| }, | |||
| "node_modules/mqtt": { | |||
| <<<<<<< HEAD | |||
| "version": "5.3.6", | |||
| "resolved": "https://registry.npmmirror.com/mqtt/-/mqtt-5.3.6.tgz", | |||
| "integrity": "sha512-3XeyCdHRFf3zZdUUBt/pqprKPtUABc8O4ZGPGs2QPO4sPNTnJels8U2UtBtMt09QCgpUmw8gLTLy2R7verR7kQ==", | |||
| @@ -12391,6 +12524,8 @@ | |||
| } | |||
| }, | |||
| "node_modules/mqtt-browser/node_modules/mqtt": { | |||
| ======= | |||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||
| "version": "4.3.7", | |||
| "resolved": "https://registry.npmmirror.com/mqtt/-/mqtt-4.3.7.tgz", | |||
| "integrity": "sha512-ew3qwG/TJRorTz47eW46vZ5oBw5MEYbQZVaEji44j5lAUSQSqIEoul7Kua/BatBW0H0kKQcC9kwUHa1qzaWHSw==", | |||
| @@ -12422,7 +12557,19 @@ | |||
| "node": ">=10.0.0" | |||
| } | |||
| }, | |||
| <<<<<<< HEAD | |||
| "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", | |||
| "resolved": "https://registry.npmmirror.com/mqtt-packet/-/mqtt-packet-6.10.0.tgz", | |||
| "integrity": "sha512-ja8+mFKIHdB1Tpl6vac+sktqy3gA8t9Mduom1BA75cI+R9AHnZOiaBQwpGiWnaVJLDGRdNhQmFaAqd7tkKSMGA==", | |||
| @@ -12432,6 +12579,7 @@ | |||
| "process-nextick-args": "^2.0.1" | |||
| } | |||
| }, | |||
| <<<<<<< HEAD | |||
| "node_modules/mqtt-browser/node_modules/split2": { | |||
| "version": "3.2.2", | |||
| "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/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", | |||
| "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz", | |||
| "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", | |||
| @@ -12460,11 +12622,16 @@ | |||
| } | |||
| } | |||
| }, | |||
| <<<<<<< HEAD | |||
| "node_modules/mqtt-browser/node_modules/yallist": { | |||
| ======= | |||
| "node_modules/mqtt/node_modules/yallist": { | |||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||
| "version": "4.0.0", | |||
| "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz", | |||
| "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" | |||
| }, | |||
| <<<<<<< HEAD | |||
| "node_modules/mqtt-packet": { | |||
| "version": "9.0.0", | |||
| "resolved": "https://registry.npmmirror.com/mqtt-packet/-/mqtt-packet-9.0.0.tgz", | |||
| @@ -12562,6 +12729,8 @@ | |||
| } | |||
| } | |||
| }, | |||
| ======= | |||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||
| "node_modules/mrmime": { | |||
| "version": "2.0.0", | |||
| "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.0.tgz", | |||
| @@ -13025,6 +13194,7 @@ | |||
| "@angular/core": ">=14" | |||
| } | |||
| }, | |||
| <<<<<<< HEAD | |||
| "node_modules/ngx-mqtt/node_modules/mqtt-packet": { | |||
| "version": "6.10.0", | |||
| "resolved": "https://registry.npmmirror.com/mqtt-packet/-/mqtt-packet-6.10.0.tgz", | |||
| @@ -13035,6 +13205,8 @@ | |||
| "process-nextick-args": "^2.0.1" | |||
| } | |||
| }, | |||
| ======= | |||
| >>>>>>> 07392068e4c1d071d1ed635fc443e330c42494d3 | |||
| "node_modules/ngx-tinymce": { | |||
| "version": "17.0.0", | |||
| "resolved": "https://registry.npmmirror.com/ngx-tinymce/-/ngx-tinymce-17.0.0.tgz", | |||
| @@ -14729,6 +14901,14 @@ | |||
| "dev": 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": { | |||
| "version": "3.0.0", | |||
| "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz", | |||
| @@ -14767,6 +14947,11 @@ | |||
| "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": { | |||
| "version": "1.2.3", | |||
| "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz", | |||
| @@ -15165,8 +15350,7 @@ | |||
| "node_modules/requires-port": { | |||
| "version": "1.0.0", | |||
| "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": { | |||
| "version": "1.22.8", | |||
| @@ -15678,6 +15862,11 @@ | |||
| "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": { | |||
| "version": "1.2.0", | |||
| "resolved": "https://registry.npmmirror.com/set-function-length/-/set-function-length-1.2.0.tgz", | |||
| @@ -16267,11 +16456,19 @@ | |||
| } | |||
| }, | |||
| "node_modules/split2": { | |||
| <<<<<<< HEAD | |||
| "version": "4.2.0", | |||
| "resolved": "https://registry.npmmirror.com/split2/-/split2-4.2.0.tgz", | |||
| "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==", | |||
| "engines": { | |||
| "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": { | |||
| @@ -17420,11 +17617,32 @@ | |||
| "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": { | |||
| "version": "0.0.3", | |||
| "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": { | |||
| "version": "1.2.2", | |||
| @@ -17778,6 +17996,15 @@ | |||
| "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": { | |||
| "version": "1.1.12", | |||
| "resolved": "https://registry.npmmirror.com/url-polyfill/-/url-polyfill-1.1.12.tgz", | |||
| @@ -17941,8 +18168,7 @@ | |||
| "node_modules/webidl-conversions": { | |||
| "version": "3.0.1", | |||
| "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": { | |||
| "version": "5.89.0", | |||
| @@ -18218,7 +18444,6 @@ | |||
| "version": "5.0.0", | |||
| "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz", | |||
| "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", | |||
| "dev": true, | |||
| "dependencies": { | |||
| "tr46": "~0.0.3", | |||
| "webidl-conversions": "^3.0.0" | |||
+ 5
- 3
package.json
Dosyayı Görüntüle
| @@ -29,6 +29,7 @@ | |||
| "@angular/platform-browser": "^17.1.0", | |||
| "@angular/platform-browser-dynamic": "^17.1.0", | |||
| "@angular/router": "^17.1.0", | |||
| "@aspnet/signalr": "^1.0.27", | |||
| "@delon/abc": "^17.1.0", | |||
| "@delon/acl": "^17.1.0", | |||
| "@delon/auth": "^17.1.0", | |||
| @@ -38,15 +39,16 @@ | |||
| "@delon/mock": "^17.1.0", | |||
| "@delon/theme": "^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", | |||
| "moment": "^2.30.1", | |||
| "mqtt": "^5.3.6", | |||
| "ng-alain": "^17.1.0", | |||
| "ng-zorro-antd": "^17.1.0", | |||
| "ng2-mqtt": "^0.1.2", | |||
| "ngx-mqtt": "^17.0.0", | |||
| "paho-mqtt": "^1.1.0", | |||
| "rxjs": "~7.8.0", | |||
| "screenfull": "^6.0.2", | |||
| "tslib": "^2.3.0", | |||
+ 6
- 0
src/app/app.config.ts
Dosyayı Görüntüle
| @@ -70,6 +70,12 @@ const providers: Array<Provider | EnvironmentProviders> = [ | |||
| provideSFConfig({ | |||
| widgets: [...SF_WIDGETS] | |||
| }), | |||
| { | |||
| provide: MqttService, | |||
| useFactory: () => { | |||
| return new MqttService(MQTT_SERVICE_OPTIONS); | |||
| } | |||
| }, | |||
| provideStartup(), | |||
| { | |||
| provide: MqttService, | |||
+ 8
- 0
src/app/core/utils/signalr.service.ts
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -4,7 +4,7 @@ import { add, formatDistanceToNow, parse } from 'date-fns'; | |||
| import { NzI18nService } from 'ng-zorro-antd/i18n'; | |||
| import { NzMessageService } from 'ng-zorro-antd/message'; | |||
| 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'; | |||
| @Component({ | |||
| @@ -56,15 +56,15 @@ export class HeaderNotifyComponent { | |||
| private msg: NzMessageService, | |||
| private nzI18n: NzI18nService, | |||
| private cdr: ChangeDetectorRef, | |||
| private signalRService: SignalRService, | |||
| //private signalRService: SignalRService, | |||
| 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[] { | |||
+ 11
- 0
src/app/routes/data-v/card/card.component.less
Dosyayı Görüntüle
| @@ -9,9 +9,20 @@ | |||
| margin-bottom: 0.5rem; | |||
| .card-content-title { | |||
| display: flex; | |||
| margin-bottom: 0.5rem; | |||
| font-size: 18px; | |||
| font-weight: 600; | |||
| 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
Dosyayı Görüntüle
| @@ -1,5 +1,8 @@ | |||
| // parent.component.ts | |||
| import { CommonModule } from '@angular/common'; | |||
| import { Component, Input } from '@angular/core'; | |||
| import { SHARED_IMPORTS } from '@shared'; | |||
| import { NzIconModule } from 'ng-zorro-antd/icon'; | |||
| @Component({ | |||
| selector: 'data-v-card', | |||
| @@ -7,12 +10,22 @@ import { Component, Input } from '@angular/core'; | |||
| template: ` | |||
| <div class="card-content"> | |||
| <!-- <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> | |||
| </div> | |||
| `, | |||
| styleUrls: ['./card.component.less'] | |||
| styleUrls: ['./card.component.less'], | |||
| imports: [NzIconModule, CommonModule, ...SHARED_IMPORTS], | |||
| }) | |||
| export class DataVCardComponent { | |||
| @Input() showSetting = false; | |||
| @Input() title: string = ''; | |||
| } | |||
+ 19
- 8
src/app/routes/data-v/navigation/navigation.component.ts
Dosyayı Görüntüle
| @@ -28,11 +28,18 @@ export class DataVNavigationComponent implements OnInit { | |||
| menuList: any = [ | |||
| { | |||
| code: '01', | |||
| text: '我的工作站' | |||
| text: '我的工作站', | |||
| url: '/' | |||
| }, | |||
| { | |||
| code: '02', | |||
| text: '化验总览' | |||
| text: '化验总览', | |||
| url: '/data-v/s1' | |||
| }, | |||
| { | |||
| code: '03', | |||
| text: '3D', | |||
| url: '/data-v/threejs' | |||
| }, | |||
| { | |||
| text: '...' | |||
| @@ -54,12 +61,16 @@ export class DataVNavigationComponent implements OnInit { | |||
| // 新的 navigate 方法 | |||
| 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
Dosyayı Görüntüle
| @@ -4,10 +4,12 @@ import { DataVUserComponent } from './user/user.component'; | |||
| import { DataVDateComponent } from './date/date.component'; | |||
| import { DataVWorkstationComponent } from './workstation/workstation.component'; | |||
| import { DataVS1Component } from './s1/s1.component'; | |||
| import { DataVThreejsComponent } from './threejs/threejs.component'; | |||
| export const routes: Routes = [ | |||
| { | |||
| path: 's1', | |||
| component: DataVS1Component | |||
| } | |||
| ]; | |||
| , | |||
| { path: 'threejs', component: DataVThreejsComponent }]; | |||
+ 1
- 0
src/app/routes/data-v/s1/chart-component/chart-component.component.css
Dosyayı Görüntüle
| @@ -0,0 +1 @@ | |||
+ 1
- 0
src/app/routes/data-v/s1/chart-component/chart-component.component.html
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -4,14 +4,14 @@ | |||
| <div nz-row style="justify-content: center;align-items: center;"> | |||
| <div nz-col nzSpan="12"> | |||
| <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 class="sys-status-title">系统健康度</div> | |||
| </div> | |||
| <div nz-col nzSpan="12"> | |||
| <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 class="sys-status-title">设备投运度</div> | |||
| </div> | |||
| @@ -31,26 +31,21 @@ | |||
| <data-v-card title="" style="margin-top: 1rem;"> | |||
| <!-- <div class="progress-display">完成样品数量/时长 16/8</div> --> | |||
| <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 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> | |||
| </data-v-card> | |||
| </div> | |||
| <div nz-col nzSpan="8"> | |||
| <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;"> | |||
| <img src="assets/dashboard/dashboard_ws_demo1.png" style="width: 100%;" /> | |||
| @@ -79,30 +74,19 @@ | |||
| </div> | |||
| <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 id="d1" style="width: 26rem; height: 11rem;"> | |||
| </div> | |||
| </div> | |||
| <div class="centered-element"> | |||
| <div id="d2" style="width: 26rem; height: 11rem; margin-top: 0.4rem;"> | |||
| </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-col nzSpan="12"> | |||
+ 25
- 13
src/app/routes/data-v/s1/s1.component.less
Dosyayı Görüntüle
| @@ -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 { | |||
| font-size: 18px; | |||
| @@ -48,17 +55,26 @@ | |||
| } | |||
| } | |||
| .status-text { | |||
| margin-left: 6px; | |||
| /* 调整文字与圆形之间的间距 */ | |||
| font-size: 16px; | |||
| font-weight: 600; | |||
| color: #74FAFB; | |||
| } | |||
| .progress-container { | |||
| display: flex; | |||
| 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 { | |||
| @@ -74,8 +90,4 @@ | |||
| .white-color-theme { | |||
| color: #74FAFB; | |||
| } | |||
| .ant-progress-text { | |||
| color: red; | |||
| } | |||
+ 314
- 136
src/app/routes/data-v/s1/s1.component.ts
Dosyayı Görüntüle
| @@ -10,17 +10,108 @@ import { DataVTitleComponent } from '../title/title.component'; | |||
| import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface | |||
| import { NzProgressModule } from 'ng-zorro-antd/progress'; | |||
| 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({ | |||
| selector: 'app-data-v-s1', | |||
| standalone: true, | |||
| imports: [NzBadgeModule, NzProgressModule, AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS], | |||
| 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 { | |||
| private readonly http = inject(_HttpClient); | |||
| 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 = [ | |||
| { | |||
| @@ -139,96 +230,23 @@ export class DataVS1Component implements OnInit { | |||
| { 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 { | |||
| var c1 = document.getElementById('c1')!; | |||
| var c1Chart = echarts.init(c1); | |||
| this.c1Chart = echarts.init(c1); | |||
| var c2 = document.getElementById('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 = { | |||
| 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 d1Chart = echarts.init(d1, 'dark'); | |||
| var d2 = document.getElementById('d2'); | |||
| @@ -357,6 +341,22 @@ export class DataVS1Component implements OnInit { | |||
| // var d3 = document.getElementById('d3'); | |||
| // 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; | |||
| optionD1 = { | |||
| title: { | |||
| @@ -367,7 +367,7 @@ export class DataVS1Component implements OnInit { | |||
| trigger: 'axis' | |||
| }, | |||
| legend: { | |||
| data: ['超差样数量', '不合格样数量'] | |||
| data: ['测量值', '上限值', '下限值',] | |||
| }, | |||
| grid: { | |||
| left: '3%', | |||
| @@ -388,7 +388,6 @@ export class DataVS1Component implements OnInit { | |||
| xAxis: [ | |||
| { | |||
| type: 'category', | |||
| // prettier-ignore | |||
| data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] | |||
| } | |||
| ], | |||
| @@ -399,39 +398,211 @@ export class DataVS1Component implements OnInit { | |||
| ], | |||
| series: [ | |||
| { | |||
| name: '超差样数量', | |||
| name: '测量值', | |||
| 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: { | |||
| 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: { | |||
| 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: { | |||
| 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; | |||
| optionD2 = { | |||
| title: { | |||
| text: '热值', | |||
| subtext: '(kg/kg)' | |||
| }, | |||
| grid: { | |||
| left: '3%', | |||
| right: '3%', | |||
| bottom: '3%', | |||
| containLabel: true | |||
| }, | |||
| tooltip: { | |||
| trigger: 'axis' | |||
| }, | |||
| @@ -554,9 +725,8 @@ export class DataVS1Component implements OnInit { | |||
| optionD1 && d1Chart.setOption(optionD1); | |||
| optionD2 && d2Chart.setOption(optionD2); | |||
| // optionD3 && d3Chart.setOption(optionD3); | |||
| c1Chart.setOption(c1OptionC); | |||
| this.c1Chart.setOption(this.c1OptionC); | |||
| c2Chart.setOption(c2OptionC); | |||
| var r1 = document.getElementById('r1'); | |||
| @@ -661,4 +831,12 @@ export class DataVS1Component implements OnInit { | |||
| } | |||
| 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
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
+ 19
- 0
src/app/routes/data-v/threejs/threejs.component.ts
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -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
Dosyayı Görüntüle
| @@ -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 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 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 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> | |||
| </div> | |||
+ 107
- 19
src/app/routes/data-v/workstation/workstation.component.less
Dosyayı Görüntüle
| @@ -16,14 +16,40 @@ | |||
| // 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; | |||
| 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-foreground-color: #74FAFB; | |||
| --ag-background-color: #0A1632; | |||
| @@ -31,47 +57,109 @@ | |||
| --ag-header-background-color: #0A1632; | |||
| --ag-odd-row-background-color: #0A1632; | |||
| --ag-header-column-resize-handle-color: rgb(126 46 132); | |||
| --ag-font-size: 17px; | |||
| --ag-font-size: 12px; | |||
| --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
Dosyayı Görüntüle
| @@ -1,20 +1,22 @@ | |||
| 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 { 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 { 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({ | |||
| selector: 'app-data-v-workstation', | |||
| standalone: true, | |||
| imports: [AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS], | |||
| imports: [AgGridAngular, AgGridComponentComponent, NzPaginationModule, DataVCardComponent, GridButtonValueRenderer, DataVTitleComponent, ...SHARED_IMPORTS], | |||
| templateUrl: './workstation.component.html', | |||
| styleUrls: ['./workstation.component.less'] | |||
| }) | |||
| @@ -23,245 +25,82 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { | |||
| private readonly modal = inject(ModalHelper); | |||
| 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[] = [ | |||
| { 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[] = [ | |||
| { 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[] = [ | |||
| { 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. | |||
| 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; | |||
| @@ -271,9 +110,16 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { | |||
| } | |||
| 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 { | |||
| @@ -290,4 +136,6 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit { | |||
| // .createStatic(FormEditComponent, { i: { id: 0 } }) | |||
| // .subscribe(() => this.st.reload()); | |||
| } | |||
| } | |||
+ 5
- 6
src/app/routes/passport/login/login.component.html
Dosyayı Görüntüle
| @@ -9,20 +9,19 @@ | |||
| <nz-alert [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg" /> | |||
| } | |||
| <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-form-control> | |||
| </nz-form-item> | |||
| <nz-form-item> | |||
| <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-form-control> | |||
| </nz-form-item> | |||
| <nz-form-item /> | |||
| <nz-form-item> | |||
| <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock> 登录 </button> | |||
| </nz-form-item> | |||
+ 5
- 1
src/app/routes/passport/login/login.component.less
Dosyayı Görüntüle
| @@ -91,6 +91,10 @@ | |||
| color: #515151; | |||
| vertical-align: middle; | |||
| } | |||
| .color-515151 { | |||
| color: #515151; | |||
| } | |||
| } | |||
| } | |||
| @@ -100,7 +104,7 @@ | |||
| color: rgb(255 255 255 / 20%); | |||
| &:hover { | |||
| color: #fff; | |||
| color: #515151; | |||
| } | |||
| } | |||
| } | |||
+ 32
- 32
src/styles.less
Dosyayı Görüntüle
| @@ -6,39 +6,39 @@ | |||
| @import './styles/index'; | |||
| @import './styles/theme'; | |||
| @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'; | |||
| @font-family: 'メイリオ', 'Helvetica Neue', helvetica, arial, sans-serif; | |||
| .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
Dosyayı Görüntüle
| @@ -2,7 +2,7 @@ | |||
| // - `default` Default theme | |||
| // - `dark` Import the official dark 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 theme paraments can be generated at https://ng-alain.github.io/ng-alain/ | |||
+ 0
- 1
tsconfig.json
Dosyayı Görüntüle
| @@ -1,4 +1,3 @@ | |||
| /* To learn more about this file see: https://angular.io/config/tsconfig. */ | |||
| { | |||
| "compileOnSave": false, | |||
| "compilerOptions": { | |||