diff --git a/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.html b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.html
new file mode 100644
index 0000000..e356437
--- /dev/null
+++ b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.html
@@ -0,0 +1,13 @@
+
diff --git a/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less
new file mode 100644
index 0000000..81af53d
--- /dev/null
+++ b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.less
@@ -0,0 +1,104 @@
+.card-top-content {
+ display: grid;
+ grid-template-columns: auto auto;
+ align-items: start;
+ justify-content: space-between;
+ margin-bottom: 10px;
+
+
+}
+
+/* 对于按钮和图标的容器 */
+.buttons-container {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end; /* 使按钮组靠右对齐 */
+ }
+
+ .card-button, span[nz-icon] {
+ margin-left: 0.5rem; /* 为按钮和图标添加一些间隔 */
+ }
+
+.card-button {
+ cursor: pointer;
+ width: 72px;
+ height: 40px;
+ font-size: 24px;
+ line-height: 20px;
+ color: rgb(0 239 248 / 100%);
+text-align: center;
+background-color: rgb(33 48 105 / 100%);
+ border: none; /* 假设你不想要边框 */
+border-radius: 3px;
+ }
+
+.card-content {
+ overflow: hidden;
+ height: 350px;
+ margin-bottom: 0.5rem;
+ padding: 1rem 1.5rem;
+ padding: 1rem;
+
+ /* 调整内边距以适应内容 */
+ //position: relative;
+ background-image: url('../../../../../assets/dashboard/dashboard_card_bg.jpg');
+ background-repeat: no-repeat;
+
+ /* 防止背景图片重复 */
+ background-position: center;
+ // background-position: top;
+ background-size: 100% 100%;
+
+ .card-content-title {
+ display: flex;
+ flex-grow: 1; /* 允许标题占据多余空间 */
+ align-items: center;
+
+ /* 确保子元素垂直居中 */
+ justify-content: space-between;
+ width: fit-content;
+ height: fit-content;
+ margin-bottom: 0.5rem;
+ padding: 5px 20px 0;
+
+ /* 文本的内边距 */
+
+ /* 根据需要调整字体大小
+ font-weight: bold; /* 字体加粗 */
+ padding: 5px 20px;
+
+ /* 根据实际情况调整这里的内边距 */
+ font-size: 28px;
+ font-weight: 600;
+ line-height: 22px;
+
+ /* 字体颜色 */
+ color: #74FAFB;
+ color: rgb(0 239 248 / 100%);
+ text-align: center;
+
+ /* 文本居中对齐 */
+ background-color: #19426E;
+
+ /* 设置背景颜色为深蓝色 */
+ border: 1px solid #1f6f97;
+
+ /* 设置边框颜色 */
+ border-radius: 10px 10px 0 0;
+
+ /* 上面是圆角,下面是直角 */
+ box-shadow: inset 0 0 10px #1f6f97;
+
+ /* 内阴影效果 */
+ .card-content-l {
+ flex: 1;
+ align-self: flex-start;
+
+ /* 占据剩余空间 */
+ }
+
+ .card-content-r {
+ align-self: flex-end;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.ts b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.ts
new file mode 100644
index 0000000..b9b67de
--- /dev/null
+++ b/src/app/routes/data-v/lj-dashboard/lj-board-title/lj-board-title.component.ts
@@ -0,0 +1,30 @@
+// parent.component.ts
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { SHARED_IMPORTS } from '@shared';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+@Component({
+ selector: 'lj-data-v-board-title',
+ standalone: true,
+ templateUrl: './lj-board-title.component.html',
+ styleUrls: ['./lj-board-title.component.less'],
+ imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS]
+})
+export class LJDataVBoardTitleComponent {
+ @Input() showSetting = false;
+ @Input() showEditButton: boolean = false;
+ @Input()
+ optionsList: Array<{ label: string; checked: boolean }> = [];
+ // 定义输出事件
+ @Output() onCheckedItemsChange = new EventEmitter>();
+ @Input() title: string = '';
+ getCheckedItems() {
+ return this.optionsList.filter(option => option.checked);
+ }
+
+ onCheckChange() {
+ const checkedItems = this.getCheckedItems();
+ this.onCheckedItemsChange.emit(checkedItems);
+ }
+}
diff --git a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html
index aaf3ebd..b5ce63a 100644
--- a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html
+++ b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.html
@@ -1,6 +1,6 @@
-
+
-
+
diff --git a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.ts b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.ts
index 0d9b63d..50be3e3 100644
--- a/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.ts
+++ b/src/app/routes/data-v/lj-dashboard/lj-dashboard.component.ts
@@ -3,6 +3,7 @@ import { AgGridAngular } from 'ag-grid-angular';
import { ColDef, GridApi } from 'ag-grid-community';
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { LJDataVBoardTitleComponent } from './lj-board-title/lj-board-title.component';
import { LJDataVCardComponent } from '../lj-card/lj-card.component';
import { TableColumn, DataVLjTableComponent } from '../lj-table/lj-table.component';
import { DataVLjTextDashboardComponent } from '../lj-text-dashboard/lj-text-dashboard.component';
@@ -11,7 +12,14 @@ import { DataVLjTextDashboardComponent } from '../lj-text-dashboard/lj-text-dash
selector: 'app-data-v-lj-dashboard',
standalone: true,
templateUrl: './lj-dashboard.component.html',
- imports: [AgGridAngular, NzPaginationModule, LJDataVCardComponent, DataVLjTableComponent, DataVLjTextDashboardComponent]
+ imports: [
+ AgGridAngular,
+ NzPaginationModule,
+ LJDataVCardComponent,
+ DataVLjTableComponent,
+ DataVLjTextDashboardComponent,
+ LJDataVBoardTitleComponent
+ ]
})
export class DataVLjDashboardComponent implements OnInit {
[x: string]: any;
diff --git a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css
index e257242..a00d86e 100644
--- a/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css
+++ b/src/app/routes/data-v/lj-text-dashboard/lj-text-dashboard.component.css
@@ -29,7 +29,29 @@
background-size: contain; /* 或者可以使用 'contain' 根据你的需要 */
border-width: 0;
}
-
+
+ @media (min-width:0){
+
+ .chart-button {font-size:12px;}
+}
+
+
+@media (min-width: 360px){
+
+ .chart-button {font-size:14px;}
+}
+
+
+@media (min-width: 920px){
+
+ .chart-button {font-size:18px;}
+}
+
+@media (min-width: 1920px){
+
+ .chart-button {font-size:26px;}
+}
+
.chart-container {
width: 10rem;
height: 10rem;