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: `
-
-