Browse Source

应急预案完善

dev
陈鹏飞 3 years ago
parent
commit
ee836e78a6
  1. 4
      src/app/pages/left-domain/left-domain.component.html
  2. 14
      src/app/pages/plan/plan.component.html
  3. 8
      src/app/pages/plan/plan.component.scss
  4. 48
      src/app/pages/plan/plan.component.ts
  5. 2
      src/styles.scss

4
src/app/pages/left-domain/left-domain.component.html

@ -157,12 +157,12 @@
</div>
<!-- 处置预案 -->
<!-- 弹窗 -->
<nz-modal [(nzVisible)]="addDisposalPop || addNodePop" nzTitle="创建预案/节点" (nzOnCancel)="addDisposalPop = false; addNodePop = null;" (nzOnOk)="addDisposal(form.value)" [nzOkDisabled]='name.invalid'>
<nz-modal [(nzVisible)]="addDisposalPop || addNodePop" nzTitle="创建预案/节点" (nzOnCancel)="addDisposalPop = false; addNodePop = null;" (nzOnOk)="addDisposal(form.value)" [nzOkDisabled]='nodeName.invalid'>
<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 #name='ngModel' ngModel name="name" required/>
<input nz-input #nodeName='ngModel' ngModel name="name" required/>
</nz-form-control>
</nz-form-item>
</form>

14
src/app/pages/plan/plan.component.html

@ -144,7 +144,7 @@
<div class="pulicPlanDiv bottomPlanHeader">
<div class="planHeaderText">
<p><input type="text" [(ngModel)]="beforePlanNode.name" [disabled]="!editMode"></p>
<textarea [(ngModel)]="beforePlanNode.describe"></textarea>
<textarea [(ngModel)]="beforePlanNode.describe" [disabled]="!editMode"></textarea>
</div>
<div class="planHeaderImg"><a href="javascript:;" class="bottomPlanUpload"><input type="file"><img src="../../../assets/images/uploadImg.png"></a></div>
<div class="planHeaderVideo"><a href="javascript:;" class="bottomPlanUpload" style="width: 100px;"><input type="file"><img src="../../../assets/images/uploadVideo.png"></a></div>
@ -158,12 +158,14 @@
</ul>
</nz-dropdown-menu>
<label>
<nz-steps *ngIf="beforeEmergencyPlan.nodes && beforeEmergencyPlan.nodes.length">
<nz-step [nzIcon]="voidTemplate"></nz-step>
<nz-step [nzIcon]="iconTemplate" *ngFor="let item of beforeEmergencyPlan.nodes"></nz-step>
<ng-template #voidTemplate></ng-template>
<ng-template #iconTemplate><img src="../../../assets/images/stepIcon.png"></ng-template>
<nz-steps *ngIf="beforeEmergencyPlan.nodes && beforeEmergencyPlan.nodes.length" [nzCurrent]="nzCurrent" [nzProgressDot]="progressTemplate" (nzIndexChange)="changePlanNode($event)">
<nz-step *ngFor="let item of beforeEmergencyPlan.nodes;" title="{{item.name}}"></nz-step>
<nz-step></nz-step>
</nz-steps>
<ng-template #progressTemplate let-index="index">
<img src="../../../assets/images/stepIcon.png" style="margin-left: -100%;" *ngIf="index != beforeEmergencyPlan.nodes.length">
<i nz-icon nzType="play-circle" nzTheme="outline" *ngIf="index === nzCurrent && index != beforeEmergencyPlan.nodes.length"></i>
</ng-template>
</label>
<label>
<i nz-icon nzType="backward" nzTheme="outline" (click)="toLast()"></i>

8
src/app/pages/plan/plan.component.scss

@ -332,6 +332,7 @@
flex: 1;
font-size: 14px;
p{ margin: 0; height: 20px; line-height: 18px; }
input{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
textarea{ width: 100%; height: 50px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; }
}
.planHeaderImg{ width: 100px; height: 100%; text-align: center; }
@ -359,7 +360,12 @@
border: 1px solid rgba(35, 217, 255, 0.4);
}
}
label:nth-child(2){ flex: 1; overflow: hidden; img{ height: 35px; width: auto; vertical-align: top; } }
label:nth-child(2){
flex: 1;
overflow: hidden;
.anticon{ font-size: 16px; color: #23D9FF; }
img{ height: 35px; width: auto; vertical-align: top; }
}
label:last-child{
width: 15%;
height: 100%;

48
src/app/pages/plan/plan.component.ts

@ -119,6 +119,9 @@ export class PlanComponent implements OnInit {
let fenceType: JYZInfoMoudleType = this.getFenceType(type)
this.isShowNature = false //隐藏属性栏
if (this.selectFence != type) {
if (this.selectFence === 7) { //初始化 应急预案模块
this.initializePlan()
}
this.isShowChildComponent && this.leftDomain && type != 4 ? this.leftDomain.initComponent(type) : null; //手动初始化子组件
this.selectFence = type
this.isShowChildComponent = true
@ -127,6 +130,9 @@ export class PlanComponent implements OnInit {
this.selectFence = -1
this.isShowChildComponent = false
buildingWindow.changeJYZInfoModel(fenceType, false)
if (type === 7) { //初始化 应急预案模块
this.initializePlan()
}
}
}
@ -319,18 +325,54 @@ export class PlanComponent implements OnInit {
allMarkPlanData: AllMarkPlanData; //处置预案节点 数据
beforeEmergencyPlan: MarkPlanData = new MarkPlanData(-99, "请选择节点"); //当前选择 应急预案
beforePlanNode: MarkNodeData = new MarkNodeData(-99, "请选择节点"); //当前选择 预案节点
nzCurrent: number = -1; //当前选择 预案节点Index
isSuspend: boolean = false; //是否暂停 自动切换节点
timer: any; //定时器
//选中 子组件预案节点
//初始化 应急预案模块
initializePlan() {
this.beforeEmergencyPlan = new MarkPlanData(-99, "请选择节点")
this.beforePlanNode = new MarkNodeData(-99, "请选择节点")
this.isSuspend = false //初始化暂停状态
window.clearTimeout(this.timer) //清除定时器
}
//选中 底部一级节点 开启自动播放
selectChildNode(item: MarkPlanData) {
if (this.isShowChildComponent && this.leftDomain) {
if (this.isShowChildComponent && this.leftDomain && this.beforeEmergencyPlan != item) {
if (item.nodes.length) {
this.leftDomain.selectNode(item, item.nodes[0])
this.nzCurrent = 0
this.beforeEmergencyPlan = item
this.beforePlanNode = item.nodes[0]
this.leftDomain.selectPlanId = item.id
this.leftDomain.selectNodeId = item.nodes[0].id
MarkWindow.instance.selectMarkNode(item.id, item.nodes[0].id)
this.autoPlay()
} else {
this.message.info('暂无数据节点');
}
}
}
//自动播放-切换接点
autoPlay() {
let time: number = MarkWindow.instance.currentMarkNodeInfo.getShowTime()
console.log(time,777)
}
//切换预案节点
changePlanNode(event){
if (event === this.beforeEmergencyPlan.nodes.length) {
return
}
this.nzCurrent = event
this.beforePlanNode = this.beforeEmergencyPlan.nodes[event]
this.leftDomain.selectPlanId = this.beforeEmergencyPlan.id
this.leftDomain.selectNodeId = this.beforePlanNode.id
MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id)
console.log(event)
}
//切换预案节点 上一个
toLast() {

2
src/styles.scss

@ -136,6 +136,8 @@ h1 {
.ant-collapse-arrow{ left: 5px; } //可展开面板
}
.ant-steps-dot .ant-steps-item-tail, .ant-steps-dot.ant-steps-small .ant-steps-item-tail{ top: 15px; } //步骤条
//滚动条样式
::-webkit-scrollbar {
width: 5px;

Loading…
Cancel
Save