shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[修改]修改nzmodel组件

beijing
邵佳豪 2 years ago
parent
bfaf47b631
commit
53abdfa76f
5 changed files with 195 additions and 142 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 134
      src/app/pages/left-domain/left-domain.component.html
  2. 52
      src/app/pages/left-domain/left-domain.component.ts
  3. 85
      src/app/pages/plan/plan.component.html
  4. 21
      src/app/pages/plan/plan.component.ts
  5. 45
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html

134
src/app/pages/left-domain/left-domain.component.html
Unescape View File

@ -221,7 +221,8 @@
<p [title]="item.getPropertyData().VRUType" class="overflowP" id="orvrContent{{item.modelInfo.key}}">
<textarea nz-input nzAutosize id="orvrNum{{item.modelInfo.key}}" [disabled]="!editMode"
[(ngModel)]="item.getPropertyData().VRUType" (click)="stopBubbling($event)"
(input)="textInput(item)"></textarea></p>
(input)="textInput(item)"></textarea>
</p>
<p style="padding-left: 8px;" (click)="stopBubbling($event)">
<nz-select class="tableSelect" [nzBorderless]="true" [nzDisabled]="!editMode"
[(ngModel)]="item.getPropertyData().VRUType_2">
@ -237,7 +238,8 @@
<p [title]="item.getPropertyData().MonitoringDevice" class="overflowP" id="content{{item.modelInfo.key}}">
<textarea nz-input nzAutosize id="num{{item.modelInfo.key}}" [disabled]="!editMode"
[(ngModel)]="item.getPropertyData().MonitoringDevice" (click)="stopBubbling($event)"
(input)="textInput(item)"></textarea></p>
(input)="textInput(item)"></textarea>
</p>
</div>
</div>
<div class="propertyImage" id="orvrViewer{{item.getID()}}">
@ -314,73 +316,83 @@
</ng-container>
</nz-modal>
<nz-modal [(nzVisible)]="addDisposalPop || addNodePop" nzTitle="创建预案/节点"
(nzOnCancel)="addDisposalPop = false; addNodePop = null;" (nzOnOk)="addDisposal(form.value)">
<form nz-form #form='ngForm'>
<nz-form-item>
<nz-form-label [nzSpan]="6">预案/节点名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #nodeName='ngModel' ngModel name="name" />
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="addDisposalPop">
<nz-form-label [nzSpan]="6">选取模板</nz-form-label>
<nz-form-control>
<nz-select [(ngModel)]="selectMould" name="selectMould">
<nz-option nzValue="" nzLabel="无"></nz-option>
<nz-option [nzValue]="item.id" [nzLabel]="item.name" *ngFor="let item of allSandBoxTemplate"></nz-option>
</nz-select>
<button nz-button style="margin-top: 5px;" (click)="deleteMould(form.value)" *ngIf="userMode">删除模板</button>
</nz-form-control>
</nz-form-item>
</form>
(nzOnCancel)="addDisposalPop = false; addNodePop = null;" (nzOnOk)="addDisposal()">
<ng-container *nzModalContent>
<form nz-form #form='ngForm' [formGroup]="validateForm">
<nz-form-item>
<nz-form-label [nzSpan]="6">预案/节点名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input formControlName="name" ngModel name="name" />
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="addDisposalPop">
<nz-form-label [nzSpan]="6">选取模板</nz-form-label>
<nz-form-control>
<nz-select formControlName="selectMould" [(ngModel)]="selectMould" name="selectMould">
<nz-option nzValue="" nzLabel="无"></nz-option>
<nz-option [nzValue]="item.id" [nzLabel]="item.name" *ngFor="let item of allSandBoxTemplate">
</nz-option>
</nz-select>
<button nz-button style="margin-top: 5px;" (click)="deleteMould(form.value)"
*ngIf="userMode">删除模板</button>
</nz-form-control>
</nz-form-item>
</form>
</ng-container>
</nz-modal>
<nz-modal [(nzVisible)]="editSelectDisposal" nzTitle="编辑预案名称" [nzOkDisabled]='name.invalid'>
<form nz-form #editForm='ngForm'>
<nz-form-item>
<nz-form-label [nzSpan]="6">预案名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #name='ngModel' [(ngModel)]="editDisposalName" name="name" required />
</nz-form-control>
</nz-form-item>
</form>
<div *nzModalFooter>
<button nz-button nzType="primary" (click)="saveMould()" *ngIf="userMode">保存为模板</button>
<button nz-button nzType="default" (click)="editSelectDisposal = null;">取消</button>
<button nz-button nzType="primary" (click)="editDisposal(editForm.value)">确定</button>
</div>
<nz-modal [(nzVisible)]="editSelectDisposal" nzTitle="编辑预案名称">
<ng-container *nzModalContent>
<form nz-form #editForm='ngForm'>
<nz-form-item>
<nz-form-label [nzSpan]="6">预案名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #name='ngModel' [(ngModel)]="editDisposalName" name="name" required />
</nz-form-control>
</nz-form-item>
</form>
<div *nzModalFooter>
<button nz-button nzType="primary" (click)="saveMould()" *ngIf="userMode">保存为模板</button>
<button nz-button nzType="default" (click)="editSelectDisposal = null;">取消</button>
<button nz-button nzType="primary" (click)="editDisposal(editForm.value)">确定</button>
</div>
</ng-container>
</nz-modal>
<nz-modal [(nzVisible)]="saveDisposalDialog" nzTitle="处置节点保存" (nzOnCancel)="saveDisposalDialog = false;"
[nzFooter]="null">
<div class="submitBottom">
<div class="submitBottom" *nzModalContent>
<button (click)='saveNode(true)'>新建节点并保存</button><button (click)='saveNode(false)'>保存到已有节点</button>
</div>
</nz-modal>
<nz-modal [(nzVisible)]="saveType" [nzTitle]="saveType === 1? '新建节点并保存' : '保存到已有节点'" (nzOnCancel)="saveType = null;"
(nzOnOk)="saveDisposalNode(saveForm.value)">
<form nz-form #saveForm='ngForm'>
<nz-form-item *ngIf="saveType === 1">
<nz-form-label [nzSpan]="6">节点名称<span style="color: red;">*</span></nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #name='ngModel' ngModel name="name" required />
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="saveType === 1">
<nz-form-label [nzSpan]="6"><span>根</span>节点</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
<nz-select #root='ngModel' ngModel name="root" required>
<nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="saveType === 2">
<nz-form-label [nzSpan]="6">节点</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
<nz-select #node='ngModel' ngModel name="node" required>
<nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</form>
(nzOnOk)="saveDisposalNode()">
<ng-container *nzModalContent>
<form nz-form #saveForm='ngForm' [formGroup]="validateForm2">
<nz-form-item *ngIf="saveType === 1">
<nz-form-label [nzSpan]="6">节点名称<span style="color: red;">*</span></nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input formControlName="name" ngModel name="name" required />
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="saveType === 1">
<nz-form-label [nzSpan]="6"><span>根</span>节点</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
<nz-select formControlName="root" ngModel name="root" required>
<nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="saveType === 2">
<nz-form-label [nzSpan]="6">节点</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
<nz-select formControlName="node" ngModel name="node" required>
<nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</form>
</ng-container>
</nz-modal>
<!-- 弹窗 -->
</div>

52
src/app/pages/left-domain/left-domain.component.ts
Unescape View File

@ -17,7 +17,7 @@ import { ObjectsService } from 'src/app/service/objects.service';
import Viewer from 'viewerjs';
import { HttpClient } from '@angular/common/http';
import { MarkTemplate } from 'src/app/babylon/model/data/mark/mark-template-data';
import { FormGroup } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-left-domain',
@ -26,13 +26,20 @@ import { FormGroup } from '@angular/forms';
})
export class LeftDomainComponent implements OnInit {
constructor(private message: NzMessageService, private element: ElementRef, private http: HttpClient, private cd: ChangeDetectorRef) { }
constructor(private message: NzMessageService, private element: ElementRef, private http: HttpClient, private cd: ChangeDetectorRef, private fb: FormBuilder) { }
validateForm!: FormGroup;
validateForm2!: FormGroup;
ngOnInit(): void {
// this.validateForm = this.fb.group({
// name: [null, [Validators.required]],
// modelType: [null, [Validators.required]]
// });
this.validateForm = this.fb.group({
name: [null, [Validators.required]],
selectMould: [null]
});
this.validateForm2 = this.fb.group({
name: [null, [Validators.required]],
root: [null, [Validators.required]],
node: [null, [Validators.required]]
});
this.editMode = PlanComponent.instance.editMode
this.initComponent()
@ -97,9 +104,9 @@ export class LeftDomainComponent implements OnInit {
this.selectFacilityId = null
if (this.beforeFence === 1 || this.beforeFence === 2 || this.beforeFence === 6 || this.beforeFence === 7) { //加油机/油罐设备/油气回收/阀门
this.FacilityList.forEach(item => {
window.setTimeout(()=>{
window.setTimeout(() => {
this.textInput(item)
},0)
}, 0)
if (this.beforeFence === 2) {
item.getPropertyData().oilTankType = this.setNewData(item.getPropertyData().oilTankType)
item.getPropertyData().oilPumpType = this.setNewData(item.getPropertyData().oilPumpType)
@ -131,12 +138,12 @@ export class LeftDomainComponent implements OnInit {
}
})
}
}
//处理 油罐罐区/油气回收 select框老数据
setNewData(e: string):string {
if(e === "scg") {
setNewData(e: string): string {
if (e === "scg") {
e = "双层罐"
} else if (e === "dcg") {
e = "单层罐+防渗罐池"
@ -260,7 +267,7 @@ export class LeftDomainComponent implements OnInit {
//监听textarea 输入事件
textInput(item: FacilityInfoUIItem) {
window.setTimeout(()=>{
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) {
@ -277,11 +284,11 @@ export class LeftDomainComponent implements OnInit {
orvrContent.style.height = `${this.element.nativeElement.querySelector(`#orvrNum${item.modelInfo.key}`).getBoundingClientRect().height}px` || `32px`
}
}
},0)
}, 0)
}
//获取textarea 高度
getTextareaHeight(item: FacilityInfoUIItem):string {
getTextareaHeight(item: FacilityInfoUIItem): string {
let html: HTMLCanvasElement = this.element.nativeElement.querySelector(`#num${item.modelInfo.key}`)
if (html) {
return `${html.getBoundingClientRect().height}px`
@ -296,10 +303,10 @@ export class LeftDomainComponent implements OnInit {
this.FacilityList.forEach(item => {
item.getType().includes(type) ? num = num + 1 : null
})
let unit = type === 'XF_MHQ'? '具' : ConfigManager.getFacilityNumUnit(FacilityType[type])
let unit = type === 'XF_MHQ' ? '具' : ConfigManager.getFacilityNumUnit(FacilityType[type])
let facilityNum = `${num}${unit}`
if (type === FacilityType.XF_XFS) {
facilityNum = `${num*2}${unit}`
facilityNum = `${num * 2}${unit}`
}
return facilityNum
}
@ -331,10 +338,10 @@ export class LeftDomainComponent implements OnInit {
addNodePop: number = null; //显示/隐藏 创建节点 父节点ID
//创建预案/节点
addDisposal(e) {
addDisposal() {
let e = this.validateForm.value
if (this.addDisposalPop) { //创建预案
if (e.selectMould) {
@ -489,7 +496,14 @@ export class LeftDomainComponent implements OnInit {
}
//保存-3
saveDisposalNode(e) {
saveDisposalNode() {
if (!this.validateForm2.valid) {
this.message.create('warning', '请填写完整！');
return
}
let e = this.validateForm2.value
if (this.saveType === 1) { //新建节点并保存
if (!e.name || !e.root) {
this.message.info('请完善表单')

85
src/app/pages/plan/plan.component.html
Unescape View File

@ -330,50 +330,57 @@
<!-- 新增/编辑左侧建筑弹窗 -->
<!-- 应急预案设备任务弹窗 -->
<nz-modal nzClassName="taskDialog" [(nzVisible)]="contingencyPlanTask" nzTitle="设备任务栏"
(nzOnCancel)="contingencyPlanTask = null;" (nzOnOk)="submitTaskForm(taskForm.value)"
[nzOkDisabled]='companyName.invalid'>
<form nz-form #taskForm='ngForm'>
<nz-form-item>
<nz-form-label [nzSpan]="6">名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #companyName='ngModel' [(ngModel)]="taskDialog.institution" name="companyName" required />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">任务</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #taskName='ngModel' [(ngModel)]="taskDialog.task" name="taskName" autocomplete="off"
nz-dropdown [nzDropdownMenu]="taskList" />
<nz-dropdown-menu #taskList="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item *ngFor="let item of allTaskList" (click)="taskDialog.task = item.taskName;">
{{item.taskName}}</li>
</ul>
</nz-dropdown-menu>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">备注</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<textarea nz-input #description='ngModel' [(ngModel)]="taskDialog.description"
name="description"></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">主角</nz-form-label>
<nz-form-control [nzSpan]="18">
<label nz-checkbox [(ngModel)]="taskDialog.isMainCharacter" name="isMainCharacter"></label>
</nz-form-control>
</nz-form-item>
</form>
(nzOnCancel)="contingencyPlanTask = null;" (nzOnOk)="submitTaskForm()">
<ng-container *nzModalContent>
<form nz-form #taskForm='ngForm' [formGroup]="validateForm2">
<nz-form-item>
<nz-form-label [nzSpan]="6">名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input formControlName="companyName" [(ngModel)]="taskDialog.institution" name="companyName"
required />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">任务</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input formControlName="taskName" [(ngModel)]="taskDialog.task" name="taskName"
autocomplete="off" nz-dropdown [nzDropdownMenu]="taskList" />
<nz-dropdown-menu #taskList="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item *ngFor="let item of allTaskList" (click)="taskDialog.task = item.taskName;">
{{item.taskName}}</li>
</ul>
</nz-dropdown-menu>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">备注</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<textarea nz-input formControlName="description" [(ngModel)]="taskDialog.description"
name="description"></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">主角</nz-form-label>
<nz-form-control [nzSpan]="18">
<label nz-checkbox formControlName="isMainCharacter" [(ngModel)]="taskDialog.isMainCharacter"
name="isMainCharacter"></label>
</nz-form-control>
</nz-form-item>
</form>
</ng-container>
</nz-modal>
<!-- 应急预案设备任务弹窗 -->
<!-- 全景图/视频弹窗 -->
<nz-modal nzClassName="videoDialog" [(nzVisible)]="videoDialogType.url" nzFooter="null"
(nzOnCancel)="closePanorama()" nzWidth="90%">
<video [src]="videoDialogType.url" controls="controls" autoplay style="width: 100%; height: 100%;"
*ngIf="videoDialogType.isVideo"></video>
<canvas id="panorama" [hidden]="videoDialogType.isVideo"></canvas>
<ng-container *nzModalContent>
<video [src]="videoDialogType.url" controls="controls" autoplay style="width: 100%; height: 100%;"
*ngIf="videoDialogType.isVideo"></video>
<canvas id="panorama" [hidden]="videoDialogType.isVideo"></canvas>
</ng-container>
</nz-modal>
<!-- 全景图/视频弹窗 -->
</div>

21
src/app/pages/plan/plan.component.ts
Unescape View File

@ -58,12 +58,18 @@ export class PlanComponent implements OnInit {
private lasteUpdateTime = 0;//上次更新的时间（毫秒）
validateForm!: FormGroup;
validateForm2!: FormGroup;
ngOnInit(): void {
this.validateForm = this.fb.group({
name: [null, [Validators.required]],
modelType: [null, [Validators.required]]
});
this.validateForm2 = this.fb.group({
companyName: [null, [Validators.required]],
taskName: [null],
description: [null],
isMainCharacter: [null],
});
PlanComponent.instance = this;
ServeManager.Init(this.buildingBISrv, this.objectsSrv);
@ -343,7 +349,7 @@ export class PlanComponent implements OnInit {
//创建/编辑建筑
addModelBuilding() {
if(!this.validateForm.valid){
if (!this.validateForm.valid) {
this.message.create('warning', '请填写完整！');
return
}
@ -746,7 +752,16 @@ export class PlanComponent implements OnInit {
}
//提交 设备任务窗口表单
submitTaskForm(e) {
submitTaskForm() {
if (!this.validateForm2.valid) {
this.message.create('warning', '请填写完整！');
return
}
let e = this.validateForm2.value
this.contingencyPlanTask.property.institution = e.companyName
this.contingencyPlanTask.property.description = e.description
this.contingencyPlanTask.property.task = e.taskName

45
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
Unescape View File

@ -49,8 +49,8 @@
<div class="title">
<span>处置内容</span>
<ng-container *ngIf="!data.positive; else elseTemplate">
<span *ngIf="data.appealStatus == 5"
style="color: #4BFFD4;">申诉成功 ( 处理人 : {{data.handleUserName}}&nbsp; 处理时间 : {{data.lastModificationTime |
<span *ngIf="data.appealStatus == 5" style="color: #4BFFD4;">申诉成功 ( 处理人 : {{data.handleUserName}}&nbsp;
处理时间 : {{data.lastModificationTime |
date:"yyyy-MM-dd HH:mm:ss"}} ) </span>
<span style="color: #4BFFD4;cursor: default;">已进行误报处置</span>
</ng-container>
@ -63,25 +63,30 @@
style="color: #FF4B65;cursor: pointer;margin-right: 20px;" (click)="appeal()">申诉</span>
<nz-modal [(nzVisible)]="isAppeal" nzTitle="申诉原因" (nzOnOk)="handleOk()"
(nzOnCancel)="handleCancel()">
<textarea nz-input rows="2" placeholder="请输入申诉原因" name="appeal"
[(ngModel)]="appealValue"></textarea>
<div class="appealUploadbox">
<div class="title">
上传附件:
</div>
<div class="btn">
<button nz-button [nzLoading]="isLoadingSave">
<span nz-icon nzType="upload"></span>上传
</button>
<input type="file" name="" id="" (change)="filechange($event)" *ngIf="!isLoadingSave">
<ul>
<li *ngFor="let item of fileList;let key = index">
<span class="filename" (click)="lookfile(item)">{{item | fileName}}</span>
<span (click)="delete(fileList,key)">x</span>
</li>
</ul>
<ng-container *nzModalContent>
<textarea nz-input rows="2" placeholder="请输入申诉原因" name="appeal"
[(ngModel)]="appealValue"></textarea>
<div class="appealUploadbox">
<div class="title">
上传附件:
</div>
<div class="btn">
<button nz-button [nzLoading]="isLoadingSave">
<span nz-icon nzType="upload"></span>上传
</button>
<input type="file" name="" id="" (change)="filechange($event)"
*ngIf="!isLoadingSave">
<ul>
<li *ngFor="let item of fileList;let key = index">
<span class="filename" (click)="lookfile(item)">{{item | fileName}}</span>
<span (click)="delete(fileList,key)">x</span>
</li>
</ul>
</div>
</div>
</div>
</ng-container>
</nz-modal>
<span
*ngIf="isMisinformation && (data.appealStatus == 0 || data.appealStatus == 3 || data.appealStatus == 4)"

Write Preview
Loading…
Cancel
Save