shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]在线制作预案页面布局

上海一张图
邵佳豪 4 years ago
parent
f6c1985fde
commit
073a85e74a
17 changed files with 1247 additions and 826 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/app/key-unit/basicinfo/basicinfo.component.html
  2. 2
      src/app/navigation/navigation.component.html
  3. 53
      src/app/navigation/navigation.component.ts
  4. 130
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
  5. 119
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
  6. 25
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.spec.ts
  7. 32
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
  8. 1
      src/app/plan-management/create-plan-online-three/create-plan-online-three.component.html
  9. 0
      src/app/plan-management/create-plan-online-three/create-plan-online-three.component.scss
  10. 25
      src/app/plan-management/create-plan-online-three/create-plan-online-three.component.spec.ts
  11. 15
      src/app/plan-management/create-plan-online-three/create-plan-online-three.component.ts
  12. 1065
      src/app/plan-management/entry-plan-look/entry-plan-look.component.ts
  13. 4
      src/app/plan-management/plan-management-routing.module.ts
  14. 8
      src/app/plan-management/plan-management.module.ts
  15. 400
      src/app/ui/plan-template/plan-template.component.html
  16. 185
      src/app/ui/plan-template/plan-template.component.scss
  17. 2
      src/styles.scss

7
src/app/key-unit/basicinfo/basicinfo.component.html
Unescape View File

@ -50,17 +50,16 @@
<span style="color: red;">*</span> <span style="color: red;">*</span>
<span>联系电话：</span> <span>联系电话：</span>
<mat-form-field> <mat-form-field>
<input matInput id="linkphone" name="linkphone" type='text' #linkphone="ngModel" <input type="number" matInput id="linkphone" name="linkphone" #linkphone="ngModel"
required required
pattern="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[35-8]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0135-9]\d{2}|66\d{2})\d{6}$"
[(ngModel)]="unitinfo.phone" (focus)="closeorganizationbox()"> [(ngModel)]="unitinfo.phone" (focus)="closeorganizationbox()">
</mat-form-field> </mat-form-field>
<div *ngIf="linkphone.invalid && (linkphone.dirty || linkphone.touched)" <!-- <div *ngIf="linkphone.invalid && (linkphone.dirty || linkphone.touched)"
class="alert-danger"> class="alert-danger">
<div *ngIf="linkphone.errors.pattern" class="alert-danger"> <div *ngIf="linkphone.errors.pattern" class="alert-danger">
电话号码格式不正确 电话号码格式不正确
</div> </div>
</div> </div> -->
</div> </div>
<div class="inputbox longinputbox"> <div class="inputbox longinputbox">
<span style="color: red;">*</span> <span style="color: red;">*</span>

2
src/app/navigation/navigation.component.html
Unescape View File

@ -1,6 +1,6 @@
<!-- <app-tabbar></app-tabbar> --> <!-- <app-tabbar></app-tabbar> -->
<mat-sidenav-container class="example-container" autosize [class.myapp-dark-theme]="darktheme"> <mat-sidenav-container class="example-container" autosize [class.myapp-dark-theme]="darktheme">
<mat-sidenav #drawer class="example-sidenav" mode="side" opened="true" color="primary" style="overflow-x: hidden;"> <mat-sidenav #drawer class="example-sidenav" mode="side" [opened]="navIsOpen" color="primary" style="overflow-x: hidden;">
<div class="biglogobox"> <div class="biglogobox">
<img src="../../assets/images/h130.png" alt=""> <img src="../../assets/images/h130.png" alt="">
</div> </div>

53
src/app/navigation/navigation.component.ts
Unescape View File

@ -1,13 +1,14 @@
import { Component, OnInit,Inject } from '@angular/core'; import { Component, OnInit, Inject } from '@angular/core';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import {FlatTreeControl} from '@angular/cdk/tree'; import { FlatTreeControl } from '@angular/cdk/tree';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import {FormControl} from '@angular/forms'; import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { TreeService } from '../http-interceptors/tree.service' import { TreeService } from '../http-interceptors/tree.service'
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import {CacheTokenService} from '../http-interceptors/cache-token.service'//引入服务 import { CacheTokenService } from '../http-interceptors/cache-token.service'//引入服务
import { Router,ActivatedRoute } from '@angular/router' import { Router, ActivatedRoute, ParamMap } from '@angular/router'
import { is } from 'date-fns/locale';
@ -17,25 +18,35 @@ import { Router,ActivatedRoute } from '@angular/router'
styleUrls: ['./navigation.component.scss'] styleUrls: ['./navigation.component.scss']
}) })
export class NavigationComponent implements OnInit { export class NavigationComponent implements OnInit {
constructor(public navmenus:CacheTokenService,private http: HttpClient,public dialog: MatDialog,private tree:TreeService,public snackBar: MatSnackBar,
private router:Router,private route:ActivatedRoute) { }
treedata:any constructor(public navmenus: CacheTokenService, private http: HttpClient, public dialog: MatDialog, private tree: TreeService, public snackBar: MatSnackBar,
isgrey:boolean private router: Router, private route: ActivatedRoute) { }
olddata:any
oldtreedata:any
ngOnInit () { treedata: any
this.http.get('/api/Account/NavMenus').subscribe((data:any)=>{ isgrey: boolean
olddata: any
oldtreedata: any
navIsOpen: any
ngOnInit() {
this.route.queryParamMap.subscribe((params: ParamMap) => {
if (params.get('navIsOpen') == 'false') {
this.navIsOpen = 'false'
} else {
this.navIsOpen = 'true'
}
});
this.http.get('/api/Account/NavMenus').subscribe((data: any) => {
this.olddata = data this.olddata = data
this.oldtreedata = data this.oldtreedata = data
let _data = this.tree.toTree(this.oldtreedata) let _data = this.tree.toTree(this.oldtreedata)
this.treedata = _data this.treedata = _data
}) })
} }
ngOnDestroy () { ngOnDestroy() {
} }
@ -44,11 +55,11 @@ export class NavigationComponent implements OnInit {
this.darktheme = dark; this.darktheme = dark;
} }
defaulttheme(){ defaulttheme() {
this.darktheme = false this.darktheme = false
} }
redtheme(){ redtheme() {
this.darktheme = true this.darktheme = true
} }

130
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
Unescape View File

@ -0,0 +1,130 @@
<div class="bigbox">
<div class="titlebox">
<div class="titleitembox">
<div class="item" [ngClass]="{'selectedItem': selectedItem == '封面'}" (click)="clickTitleItem('封面')">
1.封面
</div>
<div class="item" *ngFor="let item of planTemplateData;let key = index" (click)="clickTitleItem(item)" [ngClass]="{'selectedItem': selectedItem == item.groupName}">
{{key + 2}}.{{item.groupName}}
</div>
</div>
<div class="btnbox">
<button mat-stroked-button>
<mat-icon>visibility</mat-icon> 预览
</button>
<button mat-flat-button color="primary">
<mat-icon>save</mat-icon> 提交
</button>
</div>
</div>
<div class="contentbox">
<div class="leftbox">
</div>
<div class="mainbox">
<!-- 封面 -->
<div class="cover" *ngIf="selectedItem == '封面'">
<p class="planNum">
预案编号: <input type="text" name="" id="">
</p>
<h1>民航大厦</h1>
<ul>
<li>
<div>
对象名称：
</div>
<div>
民航大厦
</div>
</li>
<li>
<div>
单位性质：
</div>
<div>
高层公共建筑
</div>
</li>
<li>
<div>
*预案级别：
</div>
<div>
V级
</div>
</li>
<li>
<div>
*灾害类型：
</div>
<div>
<select ngModel="0">
<option value="0">火灾</option>
<option value="1">抢险救援</option>
<option value="2">其他</option>
</select>
</div>
</li>
<li>
<div>
防火级别：
</div>
<div>
二级+
</div>
</li>
<li>
<div>
防火管辖：
</div>
<div>
上海市某某区某消防大队
</div>
</li>
<li>
<div>
灭火责任队站：
</div>
<div>
上海市某某区某消防救援大队
</div>
</li>
<li>
<div>
制作人职务/姓名：
</div>
<div>
<input type="text" style="width: 160px;margin-right: 10px;">
<input type="text" style="width: 50px;">
</div>
</li>
<li>
<div>
审核人职务/姓名：
</div>
<div>
</div>
</li>
<li>
<div>
审核时间：
</div>
<div>
</div>
</li>
</ul>
</div>
<!-- 模板页面 -->
<div *ngFor="let item of planTemplateData;let key = index">
<div *ngIf="selectedItem == item.groupName">
<p>{{item.groupName}}</p>
</div>
</div>
</div>
<div class="rightbox">
</div>
</div>
</div>

119
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
Unescape View File

@ -0,0 +1,119 @@
.bigbox {
width: 100%;
height: 100%;
transform: translate(0, 0);
background: #f2f4f5;
.titlebox {
width: 100%;
height: 50px;
background-color: white;
position: fixed;
top: 8px;
display: flex;
justify-content: center;
align-items: center;
.titleitembox {
display: flex;
.item {
cursor: pointer;
height: 36px;
line-height: 36px;
background: #e8e9e9;
border-radius: 40px;
color: #8b8c8c;
margin: 0 3px;
text-align: center;
box-sizing: border-box;
padding: 0 10px;
font-size: 14px;
}
.item:hover {
background: #e8f4fe;
color: #2196f3;
}
.selectedItem {
background: #e8f4fe;
color: #2196f3;
}
}
.btnbox {
position: absolute;
right: 24px;
top: 7px;
button {
margin-left: 10px;
mat-icon {
font-size: 21px;
width: 22px;
height: 22px;
}
}
}
}
.contentbox {
height: 100%;
box-sizing: border-box;
padding-top: 66px;
overflow-y: auto;
.leftbox {
position: fixed;
width: 14%;
height: 85%;
background-color: white;
top: 66px;
}
.mainbox {
background-color: white;
width: 745px;
margin: 0 auto;
min-height: 97%;
box-sizing: border-box;
padding: 10px 10px 0;
.cover {
width: 100%;
input,
select {
border: 1px solid #ebebeb;
border-radius: 4px;
height: 28px;
line-height: 28px;
}
p {
height: 28px;
line-height: 28px;
}
h1 {
font-size: 46px;
color: #2196f3;
text-align: center;
font-weight: 600;
height: 230px;
display: flex;
justify-content: center;
align-items: center;
}
li {
width: 100%;
display: flex;
div {
height: 38px;
line-height: 38px;
nz-select {
width: 150px;
height: 33px;
}
}
div:first-child {
width: 45%;
text-align: right;
}
div:last-child {
width: 55%;
text-align: left;
}
}
}
}
}
}

25
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.spec.ts
Unescape View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CreatePlanOnlineFiveComponent } from './create-plan-online-five.component';
describe('CreatePlanOnlineFiveComponent', () => {
let component: CreatePlanOnlineFiveComponent;
let fixture: ComponentFixture<CreatePlanOnlineFiveComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CreatePlanOnlineFiveComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CreatePlanOnlineFiveComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

32
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
Unescape View File

@ -0,0 +1,32 @@
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-create-plan-online-five',
templateUrl: './create-plan-online-five.component.html',
styleUrls: ['./create-plan-online-five.component.scss']
})
export class CreatePlanOnlineFiveComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.getTemplateData()
}
selectedItem:string = '封面'
clickTitleItem(item){
item == '封面' ? this.selectedItem = '封面' : this.selectedItem = item.groupName
}
planTemplateData: any
//获得模板信息
getTemplateData() {
this.http.get('/api/PlanTemplate').subscribe(data => {
this.planTemplateData = JSON.parse(data[2].data).filter(item =>
item.completed == true
)
console.log(this.planTemplateData)
})
}
}

1
src/app/plan-management/create-plan-online-three/create-plan-online-three.component.html
Unescape View File

@ -0,0 +1 @@
<p>create-plan-online-three works!</p>

0
src/app/plan-management/create-plan-online-three/create-plan-online-three.component.scss
Unescape View File

25
src/app/plan-management/create-plan-online-three/create-plan-online-three.component.spec.ts
Unescape View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CreatePlanOnlineThreeComponent } from './create-plan-online-three.component';
describe('CreatePlanOnlineThreeComponent', () => {
let component: CreatePlanOnlineThreeComponent;
let fixture: ComponentFixture<CreatePlanOnlineThreeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CreatePlanOnlineThreeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CreatePlanOnlineThreeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/plan-management/create-plan-online-three/create-plan-online-three.component.ts
Unescape View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-create-plan-online-three',
templateUrl: './create-plan-online-three.component.html',
styleUrls: ['./create-plan-online-three.component.scss']
})
export class CreatePlanOnlineThreeComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

1065
src/app/plan-management/entry-plan-look/entry-plan-look.component.ts
View File

File diff suppressed because it is too large Load Diff

4
src/app/plan-management/plan-management-routing.module.ts
Unescape View File

@ -19,6 +19,7 @@ import { TypePlanComponent } from './type-plan/type-plan.component'
import { MaintainUpComponent } from './maintain-up/maintain-up.component' import { MaintainUpComponent } from './maintain-up/maintain-up.component'
import { from } from 'rxjs'; import { from } from 'rxjs';
import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component'; import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component';
import { CreatePlanOnlineFiveComponent } from './create-plan-online-five/create-plan-online-five.component';
const routes: Routes = [ const routes: Routes = [
{ path: 'entryPlan', component: EntryPlanComponent}, { path: 'entryPlan', component: EntryPlanComponent},
@ -32,7 +33,8 @@ const routes: Routes = [
{ path: 'MeetPlan',component:MeetPlanComponent},//应急预案 { path: 'MeetPlan',component:MeetPlanComponent},//应急预案
{ path: 'typePlan',component:TypePlanComponent},//类型预案 { path: 'typePlan',component:TypePlanComponent},//类型预案
{ path: 'maintainup',component:MaintainUpComponent},//维护更新 { path: 'maintainup',component:MaintainUpComponent},//维护更新
{ path: 'reinforceplan',component:ReinforcePlanComponent}//增援预案 { path: 'reinforceplan',component:ReinforcePlanComponent},//增援预案
{ path: 'createplanonlinefive',component:CreatePlanOnlineFiveComponent},//在线编制五级预案
]; ];
@NgModule({ @NgModule({

8
src/app/plan-management/plan-management.module.ts
Unescape View File

@ -63,14 +63,14 @@ import { typeAuditResult } from './type-plan/type-plan.component';
import { MaintainUpComponent } from './maintain-up/maintain-up.component' import { MaintainUpComponent } from './maintain-up/maintain-up.component'
import { GkPsViewer } from './pass-plan/pass-plan.component' import { GkPsViewer } from './pass-plan/pass-plan.component'
import { GkhtmlPsViewer } from './open-plan/open-plan.component'; import { GkhtmlPsViewer } from './open-plan/open-plan.component';
import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component' import { ReinforcePlanComponent } from './reinforce-plan/reinforce-plan.component';
import { CreatePlanOnlineFiveComponent } from './create-plan-online-five/create-plan-online-five.component';
import { CreatePlanOnlineThreeComponent } from './create-plan-online-three/create-plan-online-three.component'
@NgModule({ @NgModule({
declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent, AddPlanone, PlanType, AuditSatus, PlanLevel, DownloadFile, AuditResult, ChangeName, declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent, AddPlanone, PlanType, AuditSatus, PlanLevel, DownloadFile, AuditResult, ChangeName,
WebLookComponent, OnetwoEntryPlanComponent, newunitComponent, MeetPlanComponent, newunitMeet, TypePlanComponent, newunitType, PsViewer, onetwoAuditResult, meetAuditResult, WebLookComponent, OnetwoEntryPlanComponent, newunitComponent, MeetPlanComponent, newunitMeet, TypePlanComponent, newunitType, PsViewer, onetwoAuditResult, meetAuditResult,
typeAuditResult, MaintainUpComponent, GkPsViewer, GkhtmlPsViewer, UnitInfo, ReinforcePlanComponent, state, ImgDetails], typeAuditResult, MaintainUpComponent, GkPsViewer, GkhtmlPsViewer, UnitInfo, ReinforcePlanComponent, state, ImgDetails, CreatePlanOnlineFiveComponent, CreatePlanOnlineThreeComponent],
imports: [ imports: [
CommonModule, CommonModule,
PlanManagementRoutingModule, PlanManagementRoutingModule,

400
src/app/ui/plan-template/plan-template.component.html
Unescape View File

@ -7,83 +7,98 @@
* @LastEditTime: 2021-06-09 16:29:26 * @LastEditTime: 2021-06-09 16:29:26
--> -->
<div class="box"> <div class="box">
<div class="boxleft"> <div class="boxleft">
<div class="lefthead"> <div class="lefthead">
<div class="leftheadone"> <div class="leftheadone">
<span>预案列表</span> <span>预案列表</span>
</div> </div>
<div class="leftheadtwo" (click)='addKeyunit()'> <div class="leftheadtwo" (click)='addKeyunit()'>
<img src="../../../assets/images/add.png"> <img src="../../../assets/images/add.png">
<span>新增</span> <span>新增</span>
</div> </div>
</div>
<div class="leftbox">
<div class="leftbody"
[ngClass]="{'selectedTr':item.buildingTypeId==buildingTypeId&&item.planCategory==planCategory}"
*ngFor="let item of newleftTabledata;let i=index" (click)='planClick(item)'>
<div class="bodyname">
<span>{{item.unitname}}</span>
</div> </div>
<div class="leftbox"> <div class="bodycz">
<div class="leftbody" [ngClass]="{'selectedTr':item.buildingTypeId==buildingTypeId&&item.planCategory==planCategory}" *ngFor="let item of newleftTabledata;let i=index" (click)='planClick(item)'> <span>{{item.planCategory==3?'Ⅲ级':item.planCategory==4?'Ⅳ级':'Ⅴ级'}}</span>
<div class="bodyname"> <span style="margin-left: 5px;" (click)='upPlan(item,i,"copy")'>复制</span>
<span>{{item.unitname}}</span> <img
</div> [src]="item.buildingTypeId == buildingTypeId&&item.planCategory==planCategory? '../../../assets/images/update.png':'../../../assets/images/updatehui.png'"
<div class="bodycz"> (click)='upPlan(item,i,"edit")'>
<span>{{item.planCategory==3?'Ⅲ级':item.planCategory==4?'Ⅳ级':'Ⅴ级'}}</span> <img
<span style="margin-left: 5px;" (click)='upPlan(item,i,"copy")'>复制</span> [src]="item.buildingTypeId == buildingTypeId&&item.planCategory==planCategory? '../../../assets/images/deleteblue.png':'../../../assets/images/deletehui.png'"
<img [src]="item.buildingTypeId == buildingTypeId&&item.planCategory==planCategory? '../../../assets/images/update.png':'../../../assets/images/updatehui.png'" (click)='upPlan(item,i,"edit")'> (click)='deletePlan(item.id,i)'>
<img [src]="item.buildingTypeId == buildingTypeId&&item.planCategory==planCategory? '../../../assets/images/deleteblue.png':'../../../assets/images/deletehui.png'" (click)='deletePlan(item.id,i)'>
</div>
</div>
</div> </div>
</div>
</div> </div>
<div class="boxright"> </div>
<div class="righthead"> <div class="boxright">
<div class="rightheadone"> <div class="righthead">
<span>{{unitName}}</span> <div class="rightheadone">
</div> <span>{{unitName}}</span>
<div class="rightheadtwo"> </div>
<button mat-raised-button color="primary" (click)='addGroupClick()' style="margin-left: 60%;">新增分组</button> <div class="rightheadtwo">
<button mat-raised-button color="primary" style="margin-left: 10px;" (click)='save()'>保存</button> <button mat-raised-button color="primary" style="margin-left: 10px;" (click)='save()'>保存</button>
</div> <button mat-raised-button color="primary" (click)='addGroupClick()'>新增分组</button>
</div> </div>
<div class="rightbody"> </div>
<mat-accordion *ngFor="let item of group;let zi=index;TrackBy:trackByFn" multi> <div class="rightbody">
<!-- 基本信息 --> <mat-accordion *ngFor="let item of group;let zi=index;TrackBy:trackByFn" multi>
<mat-expansion-panel expanded (opened)='groupPanle=true' *ngIf="item.completed" style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;" [disabled]='groupPanle==true'> <!-- 基本信息 -->
<mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead"> <mat-expansion-panel expanded (opened)='groupPanle=true' *ngIf="item.completed"
<mat-panel-title class="paneltitle"> style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;" [disabled]='groupPanle==true'>
<div class="groupName"> <mat-expansion-panel-header collapsedHeight='40px' expandedHeight='40px' class="panelhead">
<span>{{item.groupName}}</span> <mat-panel-title class="paneltitle">
</div> <div class="groupName">
<span>{{item.groupName}}</span>
<div class="addinfo" (click)='addAttribute(item.groupName)'> </div>
<img src="../../../assets/images/update.png" style="height: 15px;margin-top: 4px;">
<span style="margin-left: 2px;">编辑</span> <div class="addinfo" (click)='addAttribute(item.groupName)'>
<img src="../../../assets/images/update.png" style="height: 15px;margin-top: 4px;">
<span style="margin-left: 2px;">编辑</span>
</div>
<div class="delinfo" (click)='deleteGroup(item.groupName)'>
<img src="../../../assets/images/deleteblue.png"
style="margin-left: 20px;height: 15px;margin-top: 4px;">
<span style="margin-left: 2px;">删除</span>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<!--单位概况-->
<div class="accordingin" *ngIf="item.groupName=='单位概况'">
<mat-accordion *ngFor="let element of item.attribute">
<mat-expansion-panel expanded *ngIf="element.completed" expanded
style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;height: 100%;" [disabled]='groupPanle==true'>
<mat-expansion-panel-header collapsedHeight='50px' expandedHeight='50px' class="panelhead"
style="background-color: #FFFFFF;">
<mat-panel-title style="font-size: 16px;color:#000000;" class="paneltitle">
<div class="dwgk" *ngIf="item.groupName=='单位概况'">
<div class="attname" *ngIf="item.groupName=='单位概况'">
<span>{{element.surveyName}}</span>
</div> </div>
<div class="delinfo" (click)='deleteGroup(item.groupName)'> <div class="caozuo">
<img src="../../../assets/images/deleteblue.png" style="margin-left: 20px;height: 15px;margin-top: 4px;"> <button mat-raised-button color="#ECF6FF"
<span style="margin-left: 2px;">删除</span> (click)='delAttribute(item.groupName,element.surveyName)'><img
src="../../../assets/images/deletehui.png"> 删除</button>
<button mat-raised-button color="primary" style="margin-right: 10px;"
(click)='addAttInfo(element.surveyName)'
*ngIf="item.groupName=='单位概况'&&(element.surveyName=='单位基本信息'||element.surveyName=='建筑信息'||element.surveyName=='进攻通道'||element.surveyName=='消防设施')"><img
src="../../../assets/images/addbai.png"> 编辑</button>
</div> </div>
</div>
</mat-panel-title>
</mat-expansion-panel-header> </mat-panel-title>
<!--单位概况--> </mat-expansion-panel-header>
<div class="accordingin" *ngIf="item.groupName=='单位概况'"> <!--单位概况:单位基本信息,建筑信息 -->
<mat-accordion *ngFor="let element of item.attribute"> <div class="table"
<mat-expansion-panel expanded *ngIf="element.completed" expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;height: 100%;" [disabled]='groupPanle==true'> *ngIf="item.groupName=='单位概况'&&(element.surveyName=='单位基本信息'||element.surveyName=='建筑信息')">
<mat-expansion-panel-header collapsedHeight='50px' expandedHeight='50px' class="panelhead" style="background-color: #FFFFFF;"> <!-- <table mat-table [dataSource]='element.attinf' class="mat-elevation-z8">
<mat-panel-title style="font-size: 16px;color:#000000;" class="paneltitle">
<div class="dwgk" *ngIf="item.groupName=='单位概况'">
<div class="attname" *ngIf="item.groupName=='单位概况'">
<span>{{element.surveyName}}</span>
</div>
<div class="caozuo">
<button mat-raised-button color="#ECF6FF" (click)='delAttribute(item.groupName,element.surveyName)'><img src="../../../assets/images/deletehui.png"> 删除</button>
<button mat-raised-button color="primary" style="margin-right: 10px;" (click)='addAttInfo(element.surveyName)'
*ngIf="item.groupName=='单位概况'&&(element.surveyName=='单位基本信息'||element.surveyName=='建筑信息'||element.surveyName=='进攻通道'||element.surveyName=='消防设施')"><img src="../../../assets/images/addbai.png"> 编辑</button>
</div>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<!--单位概况:单位基本信息,建筑信息 -->
<div class="table" *ngIf="item.groupName=='单位概况'&&(element.surveyName=='单位基本信息'||element.surveyName=='建筑信息')">
<!-- <table mat-table [dataSource]='element.attinf' class="mat-elevation-z8">
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef style="width: 20%;">名称</th> <th mat-header-cell *matHeaderCellDef style="width: 20%;">名称</th>
<td mat-cell *matCellDef="let attinf">{{attinf.addAttinfName}}</td> <td mat-cell *matCellDef="let attinf">{{attinf.addAttinfName}}</td>
@ -115,6 +130,49 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> --> </table> -->
<table cellspacing="0" cellpadding="0">
<thead>
<th style="width: 30%;">名称</th>
<th style="width: 30%;">类型</th>
<th style="width: 30%;">操作</th>
</thead>
<tbody>
<tr *ngFor="let attinf of element.attinf">
<td *ngIf="attinf.completed" style="width: 30%;">{{attinf.propertyName}}</td>
<td *ngIf="attinf.completed" style="width: 30%;">
{{attinf.propertyType==0?'单行文本':attinf.propertyType==1?'多行文本':'数值'}}</td>
<td *ngIf="attinf.completed" style="width: 30%;"><span
style="color: #FF5D4A;margin-left: 4px;cursor: pointer;"
(click)='delAttInfo(item.groupName,element.surveyName,attinf.propertyName)'> 删除</span></td>
</tr>
</tbody>
</table>
</div>
<!-- 单位概况消防设施-->
<div class="accordingin" *ngIf="item.groupName=='单位概况'&&(element.surveyName=='消防设施')">
<mat-accordion *ngFor="let attinf of element.attinf;let i = index">
<mat-expansion-panel *ngIf="attinf.completed" expanded
style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;height: 100%;"
[disabled]='groupPanle==true'>
<mat-expansion-panel-header collapsedHeight='50px' expandedHeight='50px' class="panelhead"
style="background-color: #FFD91D;">
<mat-panel-title class="paneltitle">
<div class="dwgk">
<div class="attname">
<span style="float: right;color: #B99A00;">{{attinf.name}}</span>
</div>
<div class="caozuo">
<button mat-raised-button color="#ECF6FF"
(click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img
src="../../../assets/images/deletehui.png"> 删除</button>
<button mat-raised-button color="primary" style="margin-right: 10px;"
(click)='fileAdd(attinf.facilityItems,i)'><img src="../../../assets/images/addbai.png">
编辑</button>
</div>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="table" *ngIf="item.groupName=='单位概况'&&(element.surveyName=='消防设施')">
<table cellspacing="0" cellpadding="0"> <table cellspacing="0" cellpadding="0">
<thead> <thead>
<th style="width: 30%;">名称</th> <th style="width: 30%;">名称</th>
@ -122,119 +180,101 @@
<th style="width: 30%;">操作</th> <th style="width: 30%;">操作</th>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let attinf of element.attinf" > <tr *ngFor="let facilityItems of attinf.facilityItems;let f=index">
<td *ngIf="attinf.completed" style="width: 30%;">{{attinf.propertyName}}</td> <td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">
<td *ngIf="attinf.completed" style="width: 30%;">{{attinf.propertyType==0?'单行文本':attinf.propertyType==1?'多行文本':'数值'}}</td> {{facilityItems.name}}</td>
<td *ngIf="attinf.completed" style="width: 30%;"><span style="color: #FF5D4A;margin-left: 4px;cursor: pointer;"(click)='delAttInfo(item.groupName,element.surveyName,attinf.propertyName)' > 删除</span></td> <td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">
文本类型</td>
<td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">
<span style="color: #FF5D4A;margin-left: 4px;cursor: pointer;" (click)='fileDel(i,f)'>
删除</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<!-- 单位概况消防设施-->
<div class="accordingin"*ngIf="item.groupName=='单位概况'&&(element.surveyName=='消防设施')">
<mat-accordion *ngFor="let attinf of element.attinf;let i = index">
<mat-expansion-panel *ngIf="attinf.completed" expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;height: 100%;" [disabled]='groupPanle==true'>
<mat-expansion-panel-header collapsedHeight='50px' expandedHeight='50px' class="panelhead" style="background-color: #FFD91D;">
<mat-panel-title class="paneltitle" >
<div class="dwgk">
<div class="attname" >
<span style="float: right;color: #B99A00;">{{attinf.name}}</span>
</div>
<div class="caozuo">
<button mat-raised-button color="#ECF6FF" (click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img src="../../../assets/images/deletehui.png"> 删除</button>
<button mat-raised-button color="primary" style="margin-right: 10px;" (click)='fileAdd(attinf.facilityItems,i)'><img src="../../../assets/images/addbai.png"> 编辑</button>
</div>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="table" *ngIf="item.groupName=='单位概况'&&(element.surveyName=='消防设施')">
<table cellspacing="0" cellpadding="0">
<thead>
<th style="width: 30%;">名称</th>
<th style="width: 30%;">类型</th>
<th style="width: 30%;">操作</th>
</thead>
<tbody>
<tr *ngFor="let facilityItems of attinf.facilityItems;let f=index" >
<td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">{{facilityItems.name}}</td>
<td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;">文本类型</td>
<td *ngIf="facilityItems.completed!=null&&facilityItems.completed" style="width: 30%;"><span style="color: #FF5D4A;margin-left: 4px;cursor: pointer;"(click)='fileDel(i,f)' > 删除</span></td>
</tr>
</tbody>
</table>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
<!--进攻通道-->
<div *ngIf="item.groupName=='单位概况'&&(element.surveyName=='进攻通道')">
<div class="attack" *ngFor="let attackitem of element.attinf;let i=index">
<div class="attackLeft">
<div class="attackleftHead">
<input type="text" [(ngModel)]='attackitem.head' placeholder="请输入内容" >
</div>
<div class="attackleftTable">
<table>
<thead>
<th *ngFor="let item of attackitem.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text" [(ngModel)]='attackitem.tableth[tablethi]' placeholder="请输入内容"></th>
</thead>
</table>
</div>
</div>
<div class="attackRight">
<div class="rightButton">
<button mat-raised-button color="primary" (click)='attackAdd(element.surveyName,i,8)'><img src="../../../assets/images/addbai.png"> 新增</button>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;" (click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img src="../../../assets/images/deletehui.png" > 删除</button>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
<!--灾情设定及其他-->
<div class="disaster" *ngIf="item.groupName!='单位概况'">
<div class="attack" *ngFor="let element of item.attribute;let attributei=index">
<div class="attackLeft">
<div class="attackleftHead">
<input type="text" placeholder="请输入内容" [(ngModel)]="element.headName">
</div>
<div class="attackleftTable">
<!--表格类型-->
<table *ngIf="element.level==1">
<thead>
<th *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text" placeholder="请输入内容" [(ngModel)]="element.tableth[tablethi]"></th>
</thead>
</table>
<!--文本区域-->
<textarea *ngIf="element.level==3" [(ngModel)]="element.tableth"></textarea>
<!--输入框-->
<div class="inputtext" *ngIf="element.level==2">
<div class="inputj" style="height: 100%;width: 100%;" *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn">
<div style="height: 100%;width: 100%;" *ngFor="let itemthj of element.tableth[tablethi];let tablethj=index;TrackBy:trackByFn">
<input type="text" placeholder="请输入内容" style="background-color: #E8E9E9;width: 40%;" [(ngModel)]="itemthj.head">
<input type="text" placeholder="请输入内容" style="width: 60%;" [(ngModel)]="itemthj.body">
</div>
</div>
</div>
<!--树形图-->
<div style="height: 500px;width: 100%;" *ngIf="element.level==4">
<tree-diagram [data]="element.tableth" [(ngModel)]="element.tableth"></tree-diagram>
</div>
</div>
</div> </div>
<div class="attackRight"> </mat-expansion-panel>
<div class="rightButton"> </mat-accordion>
<button mat-raised-button color="primary"(click)='attackAdd(item.groupName,attributei,element.level)'*ngIf="element.level==1" ><img src="../../../assets/images/addbai.png"> 新增</button> </div>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;" (click)='delDisaster(item.groupName,attributei)'><img src="../../../assets/images/deletehui.png" > 删除</button> <!--进攻通道-->
</div> <div *ngIf="item.groupName=='单位概况'&&(element.surveyName=='进攻通道')">
<div class="attack" *ngFor="let attackitem of element.attinf;let i=index">
<div class="attackLeft">
<div class="attackleftHead">
<input type="text" [(ngModel)]='attackitem.head' placeholder="请输入内容">
</div>
<div class="attackleftTable">
<table>
<thead>
<th *ngFor="let item of attackitem.tableth;let tablethi=index;TrackBy:trackByFn"><input
type="text" [(ngModel)]='attackitem.tableth[tablethi]' placeholder="请输入内容"></th>
</thead>
</table>
</div>
</div>
<div class="attackRight">
<div class="rightButton">
<button mat-raised-button color="primary" (click)='attackAdd(element.surveyName,i,8)'><img
src="../../../assets/images/addbai.png"> 新增</button>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
(click)='delattAndfileOne(item.groupName,element.surveyName,i)'><img
src="../../../assets/images/deletehui.png"> 删除</button>
</div> </div>
</div> </div>
</div> </div>
</mat-expansion-panel> </div>
</mat-accordion> </mat-expansion-panel>
</div> </mat-accordion>
</div>
<!--灾情设定及其他-->
<div class="disaster" *ngIf="item.groupName!='单位概况'">
<div class="attack" *ngFor="let element of item.attribute;let attributei=index">
<div class="attackLeft">
<div class="attackleftHead">
<input type="text" placeholder="请输入内容" [(ngModel)]="element.headName">
</div>
<div class="attackleftTable">
<!--表格类型-->
<table *ngIf="element.level==1">
<thead>
<th *ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn"><input type="text"
placeholder="请输入内容" [(ngModel)]="element.tableth[tablethi]"></th>
</thead>
</table>
<!--文本区域-->
<textarea *ngIf="element.level==3" [(ngModel)]="element.tableth"></textarea>
<!--输入框-->
<div class="inputtext" *ngIf="element.level==2">
<div class="inputj" style="height: 100%;width: 100%;"
*ngFor="let itemth of element.tableth;let tablethi=index;TrackBy:trackByFn">
<div style="height: 100%;width: 100%;"
*ngFor="let itemthj of element.tableth[tablethi];let tablethj=index;TrackBy:trackByFn">
<input type="text" placeholder="请输入内容" style="background-color: #E8E9E9;width: 40%;"
[(ngModel)]="itemthj.head">
<input type="text" placeholder="请输入内容" style="width: 60%;" [(ngModel)]="itemthj.body">
</div>
</div>
</div>
<!--树形图-->
<div style="height: 500px;width: 100%;" *ngIf="element.level==4">
<tree-diagram [data]="element.tableth" [(ngModel)]="element.tableth"></tree-diagram>
</div>
</div>
</div>
<div class="attackRight">
<div class="rightButton">
<button mat-raised-button color="primary" (click)='attackAdd(item.groupName,attributei,element.level)'
*ngIf="element.level==1"><img src="../../../assets/images/addbai.png"> 新增</button>
<button mat-raised-button color="#ECF6FF" style="margin-left: 10px;"
(click)='delDisaster(item.groupName,attributei)'><img src="../../../assets/images/deletehui.png">
删除</button>
</div>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div> </div>
</div> </div>
</div>

185
src/app/ui/plan-template/plan-template.component.scss
Unescape View File

@ -6,89 +6,98 @@
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2021-06-08 15:03:02 * @LastEditTime: 2021-06-08 15:03:02
*/ */
.box{ .box {
height: 97%; height: 100%;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
background-color: #F7F8FA; box-sizing: border-box;
background-color: #f7f8fa;
display: flex; display: flex;
.boxleft{ .boxleft {
width: 20%; width: 20%;
height: 100%; height: 100%;
background-color: #FFFFFF; background-color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.lefthead{ .lefthead {
height: 50px; height: 50px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #F7F8FA; border-bottom: 1px solid #f7f8fa;
span{ span {
font-size: 16px; font-size: 16px;
} }
.leftheadone{ .leftheadone {
width: 60%; width: 60%;
height: 100%; height: 100%;
span{ overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
span {
margin: 10px 10px; margin: 10px 10px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
} }
} }
.leftheadtwo{ .leftheadtwo {
width: 30%; width: 30%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
img{ overflow-x: auto;
img {
position: relative; position: relative;
top: 2px; top: 2px;
} }
span{ span {
margin-left: 2px; margin-left: 2px;
//margin: 10px 10px; //margin: 10px 10px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
color: #2196F3; color: #2196f3;
} }
} }
} }
.leftbox{ .leftbox {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.selectedTr{ .selectedTr {
background-color: #E1F1FF; background-color: #e1f1ff;
span{ span {
color: #2196F3; color: #2196f3;
} }
} }
.leftbody{ .leftbody {
width: 100%; width: 100%;
height: 40px; height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
.bodyname{ .bodyname {
height: 40px; height: 40px;
width: 60%; width: 60%;
span{ overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
span {
font-size: 16px; font-size: 16px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
margin-left: 10px; margin-left: 10px;
} }
} }
.bodycz{ .bodycz {
height: 40px; height: 40px;
width: 40%; width: 40%;
img{ overflow-y: auto;
img {
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
} }
span{ span {
color: #B2BEC7; color: #b2bec7;
font-size: 16px; font-size: 16px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
@ -98,91 +107,92 @@
} }
} }
} }
.boxright{ .boxright {
margin-left: 10px; margin-left: 10px;
height: 100%; height: 100%;
width: 78%; width: 80%;
background-color: #FFFFFF; background-color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.righthead{ .righthead {
height: 50px; height: 50px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #F7F8FA; border-bottom: 1px solid #f7f8fa;
span{ span {
font-size: 16px; font-size: 16px;
} }
.rightheadone{ .rightheadone {
width: 50%; width: 50%;
height: 100%; height: 100%;
span{ span {
margin: 10px 10px; margin: 10px 10px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
} }
} }
.rightheadtwo{ .rightheadtwo {
width: 50%; width: 50%;
height: 100%; height: 100%;
button{ button {
//margin-left: 70%; float: right;
margin-top: 5px; margin-top: 5px;
margin-right: 15px;
} }
} }
} }
.rightbody{ .rightbody {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
.panelhead{ .panelhead {
background-color: #E1F1FF; background-color: #e1f1ff;
height: 50px; height: 50px;
.paneltitle{ .paneltitle {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
color: #2196F3; color: #2196f3;
display: flex; display: flex;
//justify-content: space-around; //justify-content: space-around;
.groupName{ .groupName {
width: 100px; width: 100px;
} }
.addinfo{ .addinfo {
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
width: 75px; width: 75px;
margin-left: 75%; margin-left: 75%;
span{ span {
position: relative; position: relative;
bottom: 2px; bottom: 2px;
} }
} }
.delinfo{ .delinfo {
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
width: 75px; width: 75px;
span{ span {
position: relative; position: relative;
bottom: 2px; bottom: 2px;
} }
} }
.dwgk{ .dwgk {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
.attname{ .attname {
height: 100%; height: 100%;
width: 40%; width: 40%;
span{ span {
font-size: 16px; font-size: 16px;
line-height: 50px; line-height: 50px;
height: 50px; height: 50px;
} }
} }
.caozuo{ .caozuo {
height: 100%; height: 100%;
width: 60%; width: 60%;
button{ button {
font-size: 16px; font-size: 16px;
width: 80px; width: 80px;
height: 34px; height: 34px;
@ -190,48 +200,47 @@
float: right; float: right;
margin-top: 8px; margin-top: 8px;
} }
img{ img {
position: relative; position: relative;
bottom: 2px; bottom: 2px;
} }
} }
} }
} }
} }
.table{ .table {
width: 100%; width: 100%;
table{ table {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
th{ th {
height: 40px; height: 40px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
background-color: #F7F8FA; background-color: #f7f8fa;
} }
td{ td {
height: 40px; height: 40px;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
} }
} }
} }
.attack{ .attack {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.attackLeft{ .attackLeft {
width: 70%; width: 70%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.attackleftHead{ .attackleftHead {
width: 100%; width: 100%;
height: 40px; height: 40px;
background-color: #FFD91D; background-color: #ffd91d;
input{ input {
background-color: #FFD91D; background-color: #ffd91d;
color: #B99A00; color: #b99a00;
text-align: center; text-align: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -240,18 +249,18 @@
outline: none; outline: none;
} }
} }
.attackleftTable{ .attackleftTable {
width: 100%; width: 100%;
thead,table{ thead,
table {
width: 100%; width: 100%;
} }
th{ th {
background-color: #E8E9E9; background-color: #e8e9e9;
height: 40px; height: 40px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
input{ input {
//background-color: #FFFFFF; //background-color: #FFFFFF;
text-align: center; text-align: center;
height: 100%; height: 100%;
@ -261,22 +270,22 @@
outline: none; outline: none;
} }
} }
textarea{ textarea {
width: 100%; width: 100%;
} }
.inputtext{ .inputtext {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
input{ input {
//width: 100%; //width: 100%;
height: 40px; height: 40px;
font-size: 16px; font-size: 16px;
border: none; border: none;
outline: none; outline: none;
} }
.inputj{ .inputj {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -284,9 +293,9 @@
} }
} }
} }
.attackRight{ .attackRight {
width: 30%; width: 30%;
.rightButton{ .rightButton {
margin-top: 20px; margin-top: 20px;
margin-left: 40%; margin-left: 40%;
} }
@ -306,24 +315,24 @@
.example-tree-invisible { .example-tree-invisible {
display: none; display: none;
} }
.example-tree ul, .example-tree ul,
.example-tree li { .example-tree li {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
list-style-type: none; list-style-type: none;
} }
/* /*
* This padding sets alignment of the nested nodes. * This padding sets alignment of the nested nodes.
*/ */
.example-tree .mat-nested-tree-node div[role=group] { .example-tree .mat-nested-tree-node div[role="group"] {
padding-left: 40px; padding-left: 40px;
} }
/* /*
* Padding for leaf nodes. * Padding for leaf nodes.
* Leaf nodes need to have padding so as to align with other non-leaf nodes * Leaf nodes need to have padding so as to align with other non-leaf nodes
* under the same parent. * under the same parent.
*/ */
.example-tree div[role=group] > .mat-tree-node { .example-tree div[role="group"] > .mat-tree-node {
padding-left: 40px; padding-left: 40px;
} }

2
src/styles.scss
Unescape View File

@ -1,7 +1,7 @@
@import './app/theme.scss'; @import './app/theme.scss';
@import "./app/ngZorroTree.css"; /* 引入组件样式 */ @import "./app/ngZorroTree.css"; /* 引入组件样式 */
// @import "~ng-zorro-antd/select/style/index.min.css"; /* 引入组件样式 */
@font-face @font-face
{ {
font-family: Regular; font-family: Regular;

Write Preview
Loading…
Cancel
Save