Browse Source

动态高度输入框完善

dev
陈鹏飞 3 years ago
parent
commit
5ecf5e8acc
  1. 8
      src/app/pages/left-domain/left-domain.component.html
  2. 2
      src/app/pages/left-domain/left-domain.component.scss
  3. 45
      src/app/pages/left-domain/left-domain.component.ts

8
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>

2
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;

45
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`
}
}

Loading…
Cancel
Save