#feat 首页我的工作站页面搭建完成

src/app/routes/data-v/card/card.component.less

@@ -0,0 +1,15 @@
+.card-content {
+    height: 18rem;
+    padding: 1rem 1.5rem;
+    background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg');
+    background-size: cover;
+    /* 背景图片尺寸适应 */
+    background-position: top;
+}
+
+.card-content-title {
+    font-size: 18px;
+    color: #94DDF3;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}

src/app/routes/data-v/card/card.component.ts

@@ -0,0 +1,17 @@
+// parent.component.ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'data-v-card',
+    standalone: true,
+    template: `
+    <div class="card-content">
+      <div class="card-content-title">{{title}}</div>
+      <ng-content></ng-content>
+    </div>
+  `,
+    styleUrls: ['./card.component.less']
+})
+export class DataVCardComponent {
+    @Input() title: string = "";
+}

src/app/routes/data-v/home/home.component.html

@@ -8,7 +8,7 @@
         <data-v-navigation></data-v-navigation>
     </div>
 
-    <div>
+    <div style="margin: 1rem;">
         <router-outlet />
     </div>
 

src/app/routes/data-v/navigation/navigation.component.ts

@@ -6,10 +6,10 @@ import { ModalHelper, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
 
 @Component({
-    selector: 'data-v-navigation',
-    standalone: true,
-    imports: [RouterOutlet, ...SHARED_IMPORTS],
-    template: `
+  selector: 'data-v-navigation',
+  standalone: true,
+  imports: [RouterOutlet, ...SHARED_IMPORTS],
+  template: `
   <div class="navigation-container">
     <div class="menu-image-container">
         <img src="{{imageUrl}}" class="menu-image"/>
@@ -19,20 +19,24 @@ import { SHARED_IMPORTS } from '@shared';
         <img src="{{imageUrl}}" class="menu-image"/>
         <div class="menu-title">{{title}}</div>
     </div>
+    <div class="menu-image-container">
+        <img src="{{imageUrl}}" class="menu-image"/>
+        <div class="menu-title">{{title}}</div>
+    </div>
   </div>`,
-    styleUrls: ['./navigation.component.less']
+  styleUrls: ['./navigation.component.less']
 })
 export class DataVNavigationComponent implements OnInit {
-    private readonly http = inject(_HttpClient);
-    private readonly modal = inject(ModalHelper);
+  private readonly http = inject(_HttpClient);
+  private readonly modal = inject(ModalHelper);
 
-    imageUrl: string = 'assets/dashboard/menu_btn_l.png';
-    title: string = 'Label';
+  imageUrl: string = 'assets/dashboard/menu_btn_l.png';
+  title: string = 'Label';
 
-    context: string = '2024-02-29 10:00';
+  context: string = '2024-02-29 10:00';
 
-    ngOnInit(): void { }
+  ngOnInit(): void { }
 
-    add(): void {
-    }
+  add(): void {
+  }
 }

src/app/routes/data-v/title/title.component.less

@@ -0,0 +1,18 @@
+.title-container {
+    width: 100%;
+    height: 2rem;
+    // /* 水平宽度占据整个视口宽度 */
+    // background-image: url('../../../../assets/dashboard/dashboard_workstation.jpg');
+    // background-size: cover;
+    // /* 背景图片尺寸适应 */
+    // background-position: top;
+}
+
+img {
+    width: 100%;
+    /* 图片宽度占满父容器 */
+    height: auto;
+    /* 高度自适应，保持宽高比 */
+    display: block;
+    /* 将图片显示为块级元素 */
+}

src/app/routes/data-v/title/title.component.ts

@@ -0,0 +1,17 @@
+// parent.component.ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'data-v-title',
+    standalone: true,
+    template: `
+    <div class="title-container">
+      <img src="assets/dashboard/dashboard_workstation.jpg"/>
+      <div class="title-content-title">{{title}}</div>
+    </div>
+  `,
+    styleUrls: ['./title.component.less']
+})
+export class DataVTitleComponent {
+    @Input() title: string = "123";
+}

src/app/routes/data-v/workstation/workstation.component.html

@@ -1,27 +1,32 @@
-<div class="workstation-header">
-</div>
-
-<div nz-row>
-  <div class="workstation-content" nz-col nzSpan="12">
-    <div class="workstation-content-title">待办任务</div>
-    <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs" class="ag-theme-datav">
+<data-v-title></data-v-title>
+<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>
-  <div class="workstation-content" nz-col nzSpan="12">
-    <div class="workstation-content-title">已办任务</div>
-    <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs" class="ag-theme-datav">
+  </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>
-  </div>
+  </data-v-card>
+  <data-v-card nz-col nzSpan="12" title="报警信息">
+    <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs3" class="ag-theme-datav">
+    </ag-grid-angular>
+  </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>
 </div>
-<div nz-row>
-  <div class="workstation-content" nz-col nzSpan="12">
+<div nz-row [nzGutter]="16">
+
+</div>
+<!-- <div class="workstation-content" nz-col nzSpan="12">
     <div class="workstation-content-title">报警信息</div>
-    <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs" class="ag-theme-datav">
+    <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs3" class="ag-theme-datav">
     </ag-grid-angular>
   </div>
   <div class="workstation-content" nz-col nzSpan="12">
     <div class="workstation-content-title">通知</div>
-    <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs" class="ag-theme-datav">
+    <ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs4" class="ag-theme-datav">
     </ag-grid-angular>
-  </div>
-</div>
+  </div> -->

src/app/routes/data-v/workstation/workstation.component.less

@@ -1,21 +1,20 @@
-.workstation-header {
-    width: 100%;
-    height: 3rem;
-    /* 水平宽度占据整个视口宽度 */
-    background-image: url('../../../../assets/dashboard/dashboard_workstation.jpg');
-    background-size: cover;
-    /* 背景图片尺寸适应 */
-    background-position: top;
-}
-
-.workstation-content {
-    height: 18rem;
-    padding: 1rem 1.5rem;
-    background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg');
-    background-size: cover;
-    /* 背景图片尺寸适应 */
-    background-position: top;
-}
+// .workstation-header {
+//     width: 100%;
+//     height: 3rem;
+//     /* 水平宽度占据整个视口宽度 */
+//     background-image: url('../../../../assets/dashboard/dashboard_workstation.jpg');
+//     background-size: cover;
+//     /* 背景图片尺寸适应 */
+//     background-position: top;
+// }
+// .workstation-content {
+//     height: 18rem;
+//     padding: 1rem 1.5rem;
+//     background-image: url('../../../../assets/dashboard/dashboard_card_bg.jpg');
+//     background-size: cover;
+//     /* 背景图片尺寸适应 */
+//     background-position: top;
+// }
 
 .workstation-content-title {
     font-size: 18px;
@@ -37,7 +36,35 @@
     height: 14rem;
 }
 
-.inner-box {
-    background: #0092ff;
-    padding: 8px 0;
+/* 设置滚动条的宽度 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
+    width: 12px;
+}
+
+/* 设置滚动条滑块的样式 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
+    background-color: red;
+    /* 滚动条滑块的背景颜色 */
+    border-radius: 6px;
+    /* 圆角 */
+    border: 2px solid orange;
+    /* 滚动条滑块的边框 */
+}
+
+/* 设置滚动条轨道的样式 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
+    background-color: yellow;
+    /* 滚动条轨道的背景颜色 */
+}
+
+/* 设置滚动条滑块悬浮时的样式 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
+    background-color: darkred;
+    /* 滚动条滑块悬浮时的背景颜色 */
+}
+
+/* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active {
+    background-color: #a00;
+    /* 滚动条滑块激活时的背景颜色 */
 }

src/app/routes/data-v/workstation/workstation.component.ts

@@ -1,55 +1,99 @@
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { STColumn, STComponent } from '@delon/abc/st';
 import { SFSchema } from '@delon/form';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { SHARED_IMPORTS } from '@shared';
 import { AgGridAngular } from 'ag-grid-angular'; // AG Grid Component
 import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
+import { DataVCardComponent } from '../card/card.component';
+import { DataVTitleComponent } from '../title/title.component';
 
 @Component({
   selector: 'app-data-v-workstation',
   standalone: true,
-  imports: [AgGridAngular, ...SHARED_IMPORTS],
+  imports: [AgGridAngular, DataVCardComponent, DataVTitleComponent, ...SHARED_IMPORTS],
   templateUrl: './workstation.component.html',
   styleUrls: ['./workstation.component.less']
 })
-export class DataVWorkstationComponent implements OnInit {
+export class DataVWorkstationComponent implements OnInit, AfterViewInit {
   private readonly http = inject(_HttpClient);
   private readonly modal = inject(ModalHelper);
+  private readonly elementRef = inject(ElementRef);
 
-  // Row Data: The data to be displayed.
   rowData = [
-    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
-    { make: "Ford", model: "F-Series", price: 33850, electric: false },
-    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
-    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
-    { make: "Ford", model: "F-Series", price: 33850, electric: false },
-    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
-    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
-    { make: "Ford", model: "F-Series", price: 33850, electric: false },
-    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
-    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
-    { make: "Ford", model: "F-Series", price: 33850, electric: false },
-    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
-    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
-    { make: "Ford", model: "F-Series", price: 33850, electric: false },
-    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
-    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
-    { make: "Ford", model: "F-Series", price: 33850, electric: false },
-    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
+    {
+      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: "-"
+    },
+  ];
+
+  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 },
+  ];
+
+  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 },
+  ];
+
+  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 },
   ];
 
   // Column Definitions: Defines the columns to be displayed.
-  colDefs: ColDef[] = [
-    { field: "make" },
-    { field: "model" },
-    { field: "price" },
-    { field: "electric" }
+  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 }
   ];
 
   ngOnInit(): void {
   }
 
+  ngAfterViewInit(): void {
+    // 获取 ag-grid 元素
+    const gridDiv = this.elementRef.nativeElement.querySelector('.ag-theme-datav');
+    // 获取 ag-grid 内部滚动容器元素
+    const scrollContainer = gridDiv.querySelector('.ag-body-viewport');
+    // 获取滚动条元素
+    const scrollBar = gridDiv.querySelector('.ag-scroller');
+  }
+
   add(): void {
     // this.modal
     //   .createStatic(FormEditComponent, { i: { id: 0 } })

src/styles/index.less

@@ -1 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
+
+/* 修改滚动条宽度、背景色和滑块颜色 */
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+}
+
+/* 鼠标悬停时滚动条滑块颜色 */
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}

src/styles/theme.less

@@ -12,4 +12,56 @@
 @primary-color: #13C2C2;
 @alain-default-header-bg: #13C2C2;
 @alain-default-aside-nav-text-hover-color: #13C2C2;
-@alain-default-aside-nav-selected-text-color: #13C2C2;
+@alain-default-aside-nav-selected-text-color: #13C2C2;
+
+
+/* 设置滚动条的宽度 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
+    width: 12px;
+}
+
+/* 设置滚动条滑块的样式 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
+    background-color: red;
+    /* 滚动条滑块的背景颜色 */
+    border-radius: 6px;
+    /* 圆角 */
+    border: 2px solid orange;
+    /* 滚动条滑块的边框 */
+}
+
+/* 设置滚动条轨道的样式 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
+    background-color: yellow;
+    /* 滚动条轨道的背景颜色 */
+}
+
+/* 设置滚动条滑块悬浮时的样式 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
+    background-color: darkred;
+    /* 滚动条滑块悬浮时的背景颜色 */
+}
+
+/* 设置滚动条滑块激活（即正在拖动滑块）时的样式 */
+.ag-theme-datav ::ng-deep .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:active {
+    background-color: #a00;
+    /* 滚动条滑块激活时的背景颜色 */
+}
+
+/* 修改滚动条宽度、背景色和滑块颜色 */
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+}
+
+/* 鼠标悬停时滚动条滑块颜色 */
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}