From 98f7fd06abcd7eee6c2d35fa5527e03319b6bf93 Mon Sep 17 00:00:00 2001 From: ocean2 Date: Sun, 3 Mar 2024 20:57:47 +0800 Subject: [PATCH] =?UTF-8?q?#feat=20=20=E5=88=86=E6=9E=90=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- angular.json | 2 +- package-lock.json | 28 +- package.json | 1 + .../routes/data-v/card/card.component.less | 15 +- src/app/routes/data-v/card/card.component.ts | 15 +- src/app/routes/data-v/date/date.component.ts | 21 +- .../data-v/header/header.component.html | 6 + .../data-v/header/header.component.less | 23 + .../routes/data-v/header/header.component.ts | 30 + .../routes/data-v/home/home.component.html | 18 +- .../routes/data-v/home/home.component.less | 16 +- src/app/routes/data-v/home/home.component.ts | 14 +- .../navigation/navigation.component.less | 133 +- .../data-v/navigation/navigation.component.ts | 62 +- src/app/routes/data-v/routes.ts | 12 +- src/app/routes/data-v/s1/s1.component.html | 184 + src/app/routes/data-v/s1/s1.component.less | 84 + src/app/routes/data-v/s1/s1.component.ts | 387 +- .../routes/data-v/title/title.component.less | 14 +- .../workstation/workstation.component.html | 14 - .../workstation/workstation.component.less | 43 +- .../routes/passport/login/login.component.ts | 6 +- src/app/routes/routes.ts | 16 +- src/app/shared/shared.module.ts | 2 +- src/assets/dashboard/dashboard_menu.jpg | Bin 73587 -> 12821 bytes src/assets/dashboard/screen_header.png | Bin 3856 -> 0 bytes yarn.lock | 4224 ++++++++--------- 27 files changed, 2999 insertions(+), 2371 deletions(-) create mode 100644 src/app/routes/data-v/header/header.component.html create mode 100644 src/app/routes/data-v/header/header.component.less create mode 100644 src/app/routes/data-v/header/header.component.ts create mode 100644 src/app/routes/data-v/s1/s1.component.less delete mode 100644 src/assets/dashboard/screen_header.png diff --git a/angular.json b/angular.json index 4c409df..73a4f6c 100644 --- a/angular.json +++ b/angular.json @@ -62,7 +62,7 @@ "styles": [ "src/styles.less" ], - "scripts": [], + "scripts": [ "node_modules/echarts/dist/echarts.js"], "allowedCommonJsDependencies": [ "ajv", "ajv-formats", diff --git a/package-lock.json b/package-lock.json index 9398473..c79e057 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "@delon/theme": "^17.1.0", "@delon/util": "^17.1.0", "ag-grid-angular": "^31.0.2", + "echarts": "^5.5.0", "moment": "^2.30.1", "ng-alain": "^17.1.0", "ng-zorro-antd": "^17.1.0", @@ -56,7 +57,6 @@ "eslint-plugin-jsdoc": "~48.0.2", "eslint-plugin-prefer-arrow": "~1.2.3", "eslint-plugin-prettier": "~5.1.3", - "husky": "^8.0.3", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", @@ -7387,12 +7387,12 @@ "dev": true }, "node_modules/echarts": { - "version": "5.4.3", - "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz", - "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==", + "version": "5.5.0", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz", + "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==", "dependencies": { "tslib": "2.3.0", - "zrender": "5.4.4" + "zrender": "5.5.0" } }, "node_modules/echarts/node_modules/tslib": { @@ -9581,18 +9581,6 @@ "node": ">=10.17.0" } }, - "node_modules/husky": { - "version": "8.0.3", - "resolved": "https://registry.npmmirror.com/husky/-/husky-8.0.3.tgz", - "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", - "dev": true, - "bin": { - "husky": "lib/bin.js" - }, - "engines": { - "node": ">=14" - } - }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -18125,9 +18113,9 @@ } }, "node_modules/zrender": { - "version": "5.4.4", - "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz", - "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==", + "version": "5.5.0", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz", + "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==", "dependencies": { "tslib": "2.3.0" } diff --git a/package.json b/package.json index 45052a1..a8c072f 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@delon/theme": "^17.1.0", "@delon/util": "^17.1.0", "ag-grid-angular": "^31.0.2", + "echarts": "^5.5.0", "moment": "^2.30.1", "ng-alain": "^17.1.0", "ng-zorro-antd": "^17.1.0", diff --git a/src/app/routes/data-v/card/card.component.less b/src/app/routes/data-v/card/card.component.less index 626ed6e..8b62d0a 100644 --- a/src/app/routes/data-v/card/card.component.less +++ b/src/app/routes/data-v/card/card.component.less @@ -1,15 +1,16 @@ .card-content { - height: 18rem; + overflow: hidden; + //height: 18rem; padding: 1rem 1.5rem; + //position: relative; background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg'); - background-size: cover; - /* 背景图片尺寸适应 */ background-position: top; -} - + background-size: cover; + .card-content-title { + margin-bottom: 0.5rem; font-size: 18px; - color: #94DDF3; font-weight: 600; - margin-bottom: 0.5rem; + color: #74FAFB; +} } \ No newline at end of file diff --git a/src/app/routes/data-v/card/card.component.ts b/src/app/routes/data-v/card/card.component.ts index b8482b4..b3fb570 100644 --- a/src/app/routes/data-v/card/card.component.ts +++ b/src/app/routes/data-v/card/card.component.ts @@ -2,16 +2,17 @@ import { Component, Input } from '@angular/core'; @Component({ - selector: 'data-v-card', - standalone: true, - template: ` + selector: 'data-v-card', + standalone: true, + template: `
-
{{title}}
+ +
{{ title }}
`, - styleUrls: ['./card.component.less'] + styleUrls: ['./card.component.less'] }) export class DataVCardComponent { - @Input() title: string = ""; -} \ No newline at end of file + @Input() title: string = ''; +} diff --git a/src/app/routes/data-v/date/date.component.ts b/src/app/routes/data-v/date/date.component.ts index bd5944b..6335c06 100644 --- a/src/app/routes/data-v/date/date.component.ts +++ b/src/app/routes/data-v/date/date.component.ts @@ -1,3 +1,4 @@ +import { CommonModule } from '@angular/common'; import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { STColumn, STComponent } from '@delon/abc/st'; import { SFSchema } from '@delon/form'; @@ -7,10 +8,9 @@ import { SHARED_IMPORTS } from '@shared'; @Component({ selector: 'data-v-date', standalone: true, - imports: [...SHARED_IMPORTS], - template: ` -
- {{context}} + imports: [CommonModule, ...SHARED_IMPORTS], + template: `
+ {{ currentTime | date: 'yyyy-MM-dd HH:mm:ss' }}
`, styleUrls: ['./date.component.less'] }) @@ -18,13 +18,22 @@ export class DataVDateComponent implements OnInit { private readonly http = inject(_HttpClient); private readonly modal = inject(ModalHelper); - context: string = '2024-02-29 10:00'; + currentTime: any; - ngOnInit(): void { } + ngOnInit(): void { + this.updateCurrentTime(); + setInterval(() => { + this.updateCurrentTime(); + }, 1000); + } add(): void { // this.modal // .createStatic(FormEditComponent, { i: { id: 0 } }) // .subscribe(() => this.st.reload()); } + + updateCurrentTime() { + this.currentTime = new Date(); + } } diff --git a/src/app/routes/data-v/header/header.component.html b/src/app/routes/data-v/header/header.component.html new file mode 100644 index 0000000..547d227 --- /dev/null +++ b/src/app/routes/data-v/header/header.component.html @@ -0,0 +1,6 @@ +
+
+ + +
+
diff --git a/src/app/routes/data-v/header/header.component.less b/src/app/routes/data-v/header/header.component.less new file mode 100644 index 0000000..4e4293a --- /dev/null +++ b/src/app/routes/data-v/header/header.component.less @@ -0,0 +1,23 @@ +.header-container { + width: 100vw; + min-width: 1360px; + + /* 水平宽度占据整个视口宽度 */ + height: 10%; + + /* 垂直高度占据整个视口高度 */ + background-image: url('../../../../assets/dashboard/dashboard_bg_1.jpg'); + + /* 背景图片尺寸适应 */ + background-position: top; + background-size: cover; + + /* 图片居中显示 */ +} + +.data-v-sysinfo { + display: flex; + align-items: center; + justify-content: right; + text-align: right; +} \ No newline at end of file diff --git a/src/app/routes/data-v/header/header.component.ts b/src/app/routes/data-v/header/header.component.ts new file mode 100644 index 0000000..4956441 --- /dev/null +++ b/src/app/routes/data-v/header/header.component.ts @@ -0,0 +1,30 @@ +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'; +import { DataVUserComponent } from '../user/user.component'; +import { LayoutDefaultModule } from '@delon/theme/layout-default'; +import { DataVDateComponent } from '../date/date.component'; +import { DataVNavigationComponent } from '../navigation/navigation.component'; +import { RouterOutlet } from '@angular/router'; + +@Component({ + selector: 'app-data-v-header', + standalone: true, + imports: [DataVUserComponent, DataVDateComponent, DataVNavigationComponent, LayoutDefaultModule, RouterOutlet, ...SHARED_IMPORTS], + templateUrl: './header.component.html', + styleUrls: ['./header.component.less'] +}) +export class DataVHeaderComponent implements OnInit { + private readonly http = inject(_HttpClient); + private readonly modal = inject(ModalHelper); + + ngOnInit(): void {} + + add(): void { + // this.modal + // .createStatic(FormEditComponent, { i: { id: 0 } }) + // .subscribe(() => this.st.reload()); + } +} diff --git a/src/app/routes/data-v/home/home.component.html b/src/app/routes/data-v/home/home.component.html index 9143941..4462de0 100644 --- a/src/app/routes/data-v/home/home.component.html +++ b/src/app/routes/data-v/home/home.component.html @@ -1,15 +1,15 @@
-
+ + + -
- -
+ -
- -
+
+ +
-
\ No newline at end of file +
diff --git a/src/app/routes/data-v/home/home.component.less b/src/app/routes/data-v/home/home.component.less index df111b2..8a93954 100644 --- a/src/app/routes/data-v/home/home.component.less +++ b/src/app/routes/data-v/home/home.component.less @@ -1,18 +1,24 @@ .home-container { width: 100vw; + min-width: 1360px; + /* 水平宽度占据整个视口宽度 */ height: 100vh; + background-color: #040516; + /* 垂直高度占据整个视口高度 */ - background-image: url('../../../../assets/dashboard/dashboard_bg_1.jpg'); - background-size: cover; + //background-image: url('../../../../assets/dashboard/dashboard_bg_1.jpg'); + /* 背景图片尺寸适应 */ - background-position: top; + //background-position: top; + //background-size: cover; + /* 图片居中显示 */ } .data-v-sysinfo { - align-items: center; display: flex; - text-align: right; + align-items: center; justify-content: right; + text-align: right; } \ No newline at end of file diff --git a/src/app/routes/data-v/home/home.component.ts b/src/app/routes/data-v/home/home.component.ts index a167f95..b68faaf 100644 --- a/src/app/routes/data-v/home/home.component.ts +++ b/src/app/routes/data-v/home/home.component.ts @@ -8,11 +8,20 @@ import { LayoutDefaultModule } from '@delon/theme/layout-default'; import { DataVDateComponent } from '../date/date.component'; import { DataVNavigationComponent } from '../navigation/navigation.component'; import { RouterOutlet } from '@angular/router'; +import { DataVHeaderComponent } from '../header/header.component'; @Component({ selector: 'app-data-v-home', standalone: true, - imports: [DataVUserComponent, DataVDateComponent, DataVNavigationComponent, LayoutDefaultModule, RouterOutlet, ...SHARED_IMPORTS], + imports: [ + DataVHeaderComponent, + DataVUserComponent, + DataVDateComponent, + DataVNavigationComponent, + LayoutDefaultModule, + RouterOutlet, + ...SHARED_IMPORTS + ], templateUrl: './home.component.html', styleUrls: ['./home.component.less'] }) @@ -20,12 +29,11 @@ export class DataVHomeComponent implements OnInit { private readonly http = inject(_HttpClient); private readonly modal = inject(ModalHelper); - ngOnInit(): void { } + ngOnInit(): void {} add(): void { // this.modal // .createStatic(FormEditComponent, { i: { id: 0 } }) // .subscribe(() => this.st.reload()); } - } diff --git a/src/app/routes/data-v/navigation/navigation.component.less b/src/app/routes/data-v/navigation/navigation.component.less index 412ffc0..3281e2b 100644 --- a/src/app/routes/data-v/navigation/navigation.component.less +++ b/src/app/routes/data-v/navigation/navigation.component.less @@ -1,33 +1,114 @@ + + .navigation-container { - width: 100%; - margin-top: 2.5rem; - height: 4rem; - /* 水平宽度占据整个视口宽度 */ - background-image: url('../../../../assets/dashboard/dashboard_menu.jpg'); - background-size: cover; - /* 背景图片尺寸适应 */ - background-position: top; display: flex; flex-direction: row; - padding-left: 5rem; + width: 100%; + //height: 4rem; + //margin-top: 2.5rem; + padding-left: 2rem; } -.menu-image-container { - overflow: hidden; - position: relative; - text-align: center; -} +// .menu-image-container { +// position: relative;positionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionposition +// overflow: hidden;overflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflowoverflow +// text-align: center;text-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-aligntext-align +// } -.menu-image { - height: 1.6rem; // 保持图片纵横比 - background-size: cover; - margin-left: 0.5rem; -} +// .menu-image { +// height: 1.6rem;heightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheightheight // 保持图片纵横比 +// margin-left: 0.5rem;margin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-leftmargin-left +// background-size: cover;background-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-sizebackground-size +// } + +// .menu-title { +// position: absolute;positionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionpositionposition +// top: 20%;toptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptop +// left: 50%;leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft +// transform: translate(-50%, -50%);transformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransformtransform +// font-weight: 600;font-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weightfont-weight +// } + +ul { + display: inline-flex; + width: max-content; + margin-right: auto; + + li { + display: inline-flex; + + a { + clear: both; + display: block; + width: 100%; + margin-right: 1rem; + padding: 0.5rem 2rem; + font-weight: 600; + color: #74FAFB; + text-align: inherit; + white-space: nowrap; + background-color: #054254; + border: 0 solid red; + border-color: #74FAFB; + + &:hover, &:active, &.active{ + color: #000; + text-decoration: none; + background-color: #fff; + } + } + + .dropdown-menu { + color: #fff; + background-color: #337AB7; + } + } + + >.dropdown-submenu { + position: relative; + + .dropdown-menu { + position: absolute; + top: 2rem; + margin-top: 0; + margin-left: 0; + } + + &:hover>.dropdown-menu { + display: block; + } + + .dropdown-submenu { + position: relative; + + >a { + display: block; + + &::after { + content: "\f054"; + position: absolute; + right: .5rem; + } + } + + >.dropdown-menu { + top: 0; + bottom: unset; + left: 100%; + margin-top: 0; + margin-left: 0; + } + + &:hover>.dropdown-menu { + display: block; + } + } + } -.menu-title { - position: absolute; - top: 20%; - left: 50%; - transform: translate(-50%, -50%); - font-weight: 600; -} \ No newline at end of file + &.dev-mode { + a:hover, a:active, a.active{ + color: #fff; + background-color: #DC3545; + } + } + } \ No newline at end of file diff --git a/src/app/routes/data-v/navigation/navigation.component.ts b/src/app/routes/data-v/navigation/navigation.component.ts index 2085466..190df7f 100644 --- a/src/app/routes/data-v/navigation/navigation.component.ts +++ b/src/app/routes/data-v/navigation/navigation.component.ts @@ -1,3 +1,4 @@ +import { CommonModule } from '@angular/common'; import { Component, OnInit, ViewChild, inject } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { STColumn, STComponent } from '@delon/abc/st'; @@ -8,21 +9,39 @@ import { SHARED_IMPORTS } from '@shared'; @Component({ selector: 'data-v-navigation', standalone: true, - imports: [RouterOutlet, ...SHARED_IMPORTS], - template: ` -