#feat 数据大屏 3D显示嵌入 ，主图dark调整

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

@@ -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;
+        }
     }
 }

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

@@ -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 = '';
 }

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

@@ -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'替换为正确的路径
+    // }
   }
 }

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

@@ -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 }];

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

@@ -31,14 +31,15 @@
     <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>
@@ -79,7 +80,7 @@
   </div>
 
   <div nz-col nzSpan="8">
-    <data-v-card title="化验结果">
+    <data-v-card title="化验结果" [showSetting]="true">
       <div class="centered-element">
         <div id="d1" style="width: 26rem; height: 11rem;">
         </div>
@@ -88,21 +89,6 @@
         <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">

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

@@ -48,17 +48,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 +83,4 @@
 
 .white-color-theme {
     color: #74FAFB;
-}
-
-.ant-progress-text {
-    color: red;
 }

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

@@ -367,7 +367,7 @@ export class DataVS1Component implements OnInit {
         trigger: 'axis'
       },
       legend: {
-        data: ['超差样数量', '不合格样数量']
+        data: ['测量值', '上限值', '下限值',]
       },
       grid: {
         left: '3%',
@@ -398,31 +398,45 @@ export class DataVS1Component implements OnInit {
         }
       ],
       series: [
+        // {
+        //   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],
+        //   markPoint: {
+        //     data: [
+        //       { type: 'max', name: 'Max' },
+        //       { type: 'min', name: 'Min' }
+        //     ]
+        //   }
+        // },
         {
-          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],
-          markPoint: {
-            data: [
-              { type: 'max', name: 'Max' },
-              { type: 'min', name: 'Min' }
-            ]
-          }
-        },
-        {
-          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],
+          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: 'Max', value: 220, xAxis: 4, yAxis: 220 },
+              { name: 'Min', value: 100, xAxis: 0, yAxis: 100 }
             ]
           },
           markLine: {
             data: [{ type: 'average', name: 'Avg' }]
           }
-        }
+        },
+        {
+          name: '上限值',
+          symbolSize: 5,
+          data: [200, 255, 239, 299, 200, 260, 220, 282.2, 250, 255, 260, 210
+          ],
+          type: 'scatter'
+        },
+        {
+          name: '下限值',
+          symbolSize: 5,
+          data: [50, 55, 39, 99, 120, 60, 20, 82.2, 50, 55, 60, 80
+          ],
+          type: 'scatter'
+        },
       ]
     };
 
@@ -432,6 +446,12 @@ export class DataVS1Component implements OnInit {
         text: '热值',
         subtext: '(kg/kg)'
       },
+      grid: {
+        left: '3%',
+        right: '3%',
+        bottom: '3%',
+        containLabel: true
+      },
       tooltip: {
         trigger: 'axis'
       },

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

@@ -0,0 +1 @@
+<iframe src="http://112.33.111.160:8083/" width="100%" height="650px" style="border: 0;"></iframe>

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

@@ -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 { }
+}

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

@@ -24,6 +24,7 @@
 }
 
 .ag-theme-datav {
+    // &:extend(.ag-theme-material);
     --ag-border-color: #74FAFB;
     --ag-foreground-color: #74FAFB;
     --ag-background-color: #0A1632;

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

@@ -48,6 +48,56 @@ export class DataVWorkstationComponent implements OnInit, AfterViewInit {
       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: "-"
+    },
+    {
+      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[] = [

src/styles.less

@@ -7,36 +7,38 @@
 @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';
+
 
 .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;
+}

src/styles/theme.less

@@ -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/