From 5ecf5e8acca2a7c698fdc428603d6841edaba34e Mon Sep 17 00:00:00 2001
From: cpf <1105965053@qq.com>
Date: Thu, 6 Jan 2022 13:47:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E9=AB=98=E5=BA=A6=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../left-domain/left-domain.component.html    |  8 ++--
 .../left-domain/left-domain.component.scss    |  2 +-
 .../left-domain/left-domain.component.ts      | 45 +++++++++++--------
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/app/pages/left-domain/left-domain.component.html b/src/app/pages/left-domain/left-domain.component.html
index 555a440..f3045b3 100644
--- a/src/app/pages/left-domain/left-domain.component.html
+++ b/src/app/pages/left-domain/left-domain.component.html
@@ -67,14 +67,14 @@
             <p>品牌</p>
             <p>油枪数量</p>
             <p>油品品号</p>
-            <p class="overflowP">油枪编号</p>
+            <p class="overflowP" id="title{{item.modelInfo.key}}">油枪编号</p>
             <p>油泵类型</p>
           </div>
           <div class="tableContent"> 
             <p [title]="item.getPropertyData().brand"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().brand" (click)="stopBubbling($event)"></p>
             <p [title]="item.getPropertyData().oilGunNum"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNum" (click)="stopBubbling($event)"></p>
             <p [title]="item.getPropertyData().oilProductNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
-            <p [title]="item.getPropertyData().oilGunNo" class="overflowP"><textarea [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)" [ngStyle]="{'line-height': isLineFeed(item.getPropertyData().oilGunNo)? '48px' : '24px'}"></textarea></p>
+            <p [title]="item.getPropertyData().oilGunNo" class="overflowP" id="content{{item.modelInfo.key}}"><textarea nz-input nzAutosize id="num{{item.modelInfo.key}}" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)" (input)="textInput(item)"></textarea></p>
             <p style="padding-left: 8px;" (click)="stopBubbling($event)">
               <nz-select class="tableSelect" [nzBorderless]="true" [nzDisabled]="!editMode" [(ngModel)]="item.getPropertyData().oilPumpType">
                 <nz-option nzValue="zxb" nzLabel="自吸泵"></nz-option>
@@ -93,7 +93,7 @@
         <div class="table">
           <div class="tableHeader">
             <p>油品品号</p>
-            <p class="overflowP">油枪编号</p>
+            <p class="overflowP" id="title{{item.modelInfo.key}}">油枪编号</p>
             <p>油罐容积</p>
             <p>安全容积</p>
             <p>罐区</p>
@@ -101,7 +101,7 @@
           </div>
           <div class="tableContent">
             <p [title]="item.getPropertyData().oilProductNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
-            <p [title]="item.getPropertyData().oilGunNo" class="overflowP"><textarea [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)" [ngStyle]="{'line-height': isLineFeed(item.getPropertyData().oilGunNo)? '48px' : '24px'}"></textarea></p>
+            <p [title]="item.getPropertyData().oilGunNo" class="overflowP" id="content{{item.modelInfo.key}}"><textarea nz-input nzAutosize id="num{{item.modelInfo.key}}" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)" (input)="textInput(item)"></textarea></p>
             <p [title]="item.getPropertyData().oilTankVolume"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilTankVolume" (click)="stopBubbling($event)"></p>
             <p [title]="item.getPropertyData().safeVolume"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().safeVolume" (click)="stopBubbling($event)"></p>
             <p [title]="item.getPropertyData().tankFarm"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().tankFarm" (click)="stopBubbling($event)"></p>
diff --git a/src/app/pages/left-domain/left-domain.component.scss b/src/app/pages/left-domain/left-domain.component.scss
index bf5d098..0e4a27d 100644
--- a/src/app/pages/left-domain/left-domain.component.scss
+++ b/src/app/pages/left-domain/left-domain.component.scss
@@ -70,7 +70,7 @@
     border-bottom: none;
     display: flex;
     p{ height: 32px; line-height: 32px; margin: 0px; }
-    .overflowP{ height: 50px; line-height: 50px; textarea{ border: none; outline: none; resize: none; background-color: transparent; width: 100%; height: 100%; padding: 0; line-height: 24px; } }
+    .overflowP{ textarea{ border: none; border-radius: 0px; outline: none; resize: none; background-color: transparent; width: 100%; color: #fff; padding: 5px 0 0 0; } }
     .tableHeader{
       flex: 4;
       text-align: right;
diff --git a/src/app/pages/left-domain/left-domain.component.ts b/src/app/pages/left-domain/left-domain.component.ts
index b62e2f2..90e36ce 100644
--- a/src/app/pages/left-domain/left-domain.component.ts
+++ b/src/app/pages/left-domain/left-domain.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
 import { FacilityInfoInSceneWindow } from 'src/app/babylon/view/facilityinfoinscene-window/facilityinfoinscene-window';
 import { PlanComponent } from '../plan/plan.component';
@@ -25,7 +25,7 @@ import { MarkTemplate } from 'src/app/babylon/model/data/mark/mark-template-data
 })
 export class LeftDomainComponent implements OnInit {
 
-  constructor(private message: NzMessageService, private element: ElementRef, private http: HttpClient) { }
+  constructor(private message: NzMessageService, private element: ElementRef, private http: HttpClient, private cd: ChangeDetectorRef) { }
 
   ngOnInit(): void {
     this.editMode = PlanComponent.instance.editMode
@@ -87,7 +87,13 @@ export class LeftDomainComponent implements OnInit {
     })
     this.FacilityList = list
     this.selectFacilityId = null
-    if (this.beforeFence === 3) { //消防设施
+    if (this.beforeFence === 1 || this.beforeFence === 2) { //加油机/油罐设备
+      this.FacilityList.forEach(item => {
+        window.setTimeout(()=>{
+          this.textInput(item)
+        },0)
+      })
+    } else if (this.beforeFence === 3) { //消防设施
       this.handleTreeData(this.FacilityList)
     } else if (this.beforeFence === 5 || this.beforeFence === 6) { //初始化 Viewer
       let id: string = this.beforeFence === 5 ? "pipelineViewer" : "orvrViewer"
@@ -207,23 +213,26 @@ export class LeftDomainComponent implements OnInit {
     //编辑模式
   }
 
-  //是否换行
-  isLineFeed(str: string):boolean {
-    if (str) {
-      let strlen = 0; 
-      for (var i = 0;i < str.length; i++) {
-        if(str.charCodeAt(i) > 255) //如果是汉字，则字符串长度加2
-        strlen += 2;
-        else
-        strlen++;
-      }
-      if (strlen > 17) {
-        return false
-      } else {
-        return true
+  //监听textarea 输入事件
+  textInput(item: FacilityInfoUIItem) {
+    window.setTimeout(()=>{
+      let title: HTMLCanvasElement = this.element.nativeElement.querySelector(`#title${item.modelInfo.key}`)
+      let content: HTMLCanvasElement = this.element.nativeElement.querySelector(`#content${item.modelInfo.key}`)
+      if (title && content) {
+        title.style.height = this.getTextareaHeight(item)
+        title.style.lineHeight = this.getTextareaHeight(item)
+        content.style.height = this.getTextareaHeight(item)
       }
+    },0)
+  }
+
+  //获取textarea 高度
+  getTextareaHeight(item: FacilityInfoUIItem):string {
+    let html: HTMLCanvasElement = this.element.nativeElement.querySelector(`#num${item.modelInfo.key}`)
+    if (html) {
+      return `${html.getBoundingClientRect().height}px`
     } else {
-      return true
+      return `32px`
     }
   }