Add:大屏初版

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

@@ -36,11 +36,12 @@
         <div class="image-container">
           <img src="http://openwrt.waitclopeo.com:3004/auseft/car0.jpg" alt="Car Image" />
         </div>
-        <div class="image-container">
+        <!-- <div class="image-container"> -->
           <img
             src="https://img.jianbihua.com/sites/default/files/styles/photo640x425logofull/public/images/2019-11/20191115110304_360855.jpg"
             alt="Long Image"
           />
+          <app-data-v-t1 />
         </div>
         <div class="info-container">
           <div class="info-button">车牌号: 苏E8888</div>

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

@@ -247,6 +247,14 @@
   }
   
   .info-container {
+    display: flex;
+    // flex: 1; /* 同样的，让信息容器也占据等同的空间 */
+    flex-direction: column;
+    justify-content: space-around;
+    margin: 0 10px;
+  }
+
+  .model-container{
     display: flex;
     flex: 1; /* 同样的，让信息容器也占据等同的空间 */
     flex-direction: column;
@@ -254,6 +262,7 @@
     margin: 0 10px;
   }
   
+  
   .info-button {
     margin: 5px 0;
     padding: 10px;

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

@@ -11,6 +11,7 @@ import { MqttService } from 'ngx-mqtt';
 import { DataVCardComponent } from '../card/card.component';
 import { DataVLjCarInfoTableComponent } from '../lj-car-info-table/lj-car-info-table.component';
 import { DataVLjDashboardComponent } from '../lj-dashboard/lj-dashboard.component';
+import { DataVT1Component } from '../t1/t1.component';
 import { DataVTitleComponent } from '../title/title.component';
 import { AgGridComponentComponent } from '../workstation/ag-grid-component/ag-grid-component.component';
 import { GridButtonValueRenderer } from '../workstation/grid-button/grid-button';
@@ -21,6 +22,7 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/
   templateUrl: './second1.component.html',
   styleUrls: ['./second1.component.less'],
   imports: [
+    DataVT1Component,
     DataVLjCarInfoTableComponent,
     AgGridAngular,
     AgGridComponentComponent,
@@ -32,7 +34,8 @@ import { LjAgGridComponentComponent } from '../workstation/lj-ag-grid-component/
     DataVLjDashboardComponent,
     CommonModule,
     ...SHARED_IMPORTS,
-    DataVLjCarInfoTableComponent
+    DataVLjCarInfoTableComponent,
+    DataVT1Component
   ]
 })
 export class DataVSecond1Component implements OnInit {
@@ -40,7 +43,7 @@ export class DataVSecond1Component implements OnInit {
   private readonly modal = inject(ModalHelper);
   private readonly elementRef = inject(ElementRef);
   private readonly titleService = inject(TitleService);
-  public items = [1, 2, 3];
+  public items = [1];
 
   public chartDom = document.getElementById('main')!;
   // public myChart = echarts.init(this.chartDom);

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

@@ -1,5 +1,5 @@
 <!-- <div #Three style="background-color: red;"></div> -->
 
-<div style="display: flex; flex-direction: column; height: 100vh">
+<div style="width: 400vh; flex-direction: column; height: 200vh">
   <div #Three style="flex-grow: 1"></div>
 </div>

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

@@ -37,6 +37,8 @@ export class DataVT1Component implements OnInit {
     // 创建相机
     this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 20000);
     this.camera.position.set(2200, 300, -3100);
+    this.camera.fov = 60; // 调整视角大小
+    this.camera.updateProjectionMatrix(); // 更新相机的投影矩阵
 
     //创建场景
     this.scene = new THREE.Scene();
@@ -78,7 +80,9 @@ export class DataVT1Component implements OnInit {
 
     this.renderer = new THREE.WebGLRenderer({ antialias: true });
     this.renderer.setPixelRatio(window.devicePixelRatio);
-    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    // this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.setSize(400, 300); // 设置渲染器的宽度和高度
+
     this.renderer.shadowMap.enabled = true;
     this.container.nativeElement.appendChild(this.renderer.domElement);
 
@@ -96,8 +100,6 @@ export class DataVT1Component implements OnInit {
 
     //const axesHelper = new THREE.AxesHelper(1000);
     //this.scene.add(axesHelper);
-
-    window.addEventListener('resize', this.onWindowResize);
   }
 
   public render(): void {
@@ -107,9 +109,9 @@ export class DataVT1Component implements OnInit {
   }
 
   onWindowResize() {
-    this.camera.aspect = window.innerWidth / window.innerHeight;
-    this.camera.updateProjectionMatrix();
-    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    // this.camera.aspect = window.innerWidth / window.innerHeight;
+    // this.camera.updateProjectionMatrix();
+    // this.renderer.setSize(window.innerWidth, window.innerHeight);
   }
   animate = () => {
     requestAnimationFrame(this.animate);