[新增]头部和右侧布局

src/app/ui/collection-tools/collection-tools.component.html

@@ -2,29 +2,102 @@
 
   <!-- header头部 -->
   <div class="header">
-    <button (click)="drawer.toggle()">切换</button>
+    <button mat-button (click)="drawer.toggle()">
+      <mat-icon style="vertical-align: middle;">toc</mat-icon>
+    </button>
+
+    <span style="color: gray;margin-right: 10px;">图标大小</span>
+    <mat-form-field style="margin-top: 3px;">
+      <mat-select [(value)]="selected">
+        <mat-option value="option1">正常</mat-option>
+        <mat-option value="option2">放大2倍</mat-option>
+        <mat-option value="option3">放大4倍</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <button class="copytobutn" mat-button title="复制" style="margin:0 5px;">
+      <mat-icon>library_books</mat-icon>
+    </button>
+
+    <button class="copytobutn" mat-button title="粘贴">
+      <mat-icon>screen_share</mat-icon>
+    </button>
+
+    <span style="margin-right:20px;user-select: none;margin-left: 12px;" class="nameShow" (click)="basicInfoClick()">
+      基本信息名称
+      <mat-icon [ngClass]="{'icongray': !basicInfo}">visibility</mat-icon>
+    </span>
+    <span style="user-select: none;" class="nameShow" (click)="wantToWorkClick()"> 
+      想定作业名称
+      <mat-icon [ngClass]="{'icongray': !wantToWork}">visibility</mat-icon>
+    </span>
+
+    <span style="position: absolute;right: 20px;cursor: pointer;">
+      <mat-icon title="查看/编辑模式" (click)="lookpat()" *ngIf="isEditPat">tv</mat-icon>
+      <mat-icon title="查看/编辑模式" (click)="editpat()" *ngIf="!isEditPat">create</mat-icon>
+      <mat-icon *ngIf="isEditPat" style="margin-left: 8px;" title="保存" (click)="saveSite()">description</mat-icon>
+    </span>
   </div>
 
   <!-- 头部操作栏 -->
   <div class="headerOperate">
-    2
+    <button mat-button (click)="checkedBuilding({name:'总平面图'})" [ngClass]="{'buildingbtnchecked': '总平面图' == checkedBuildingDate}">
+      <span>总平面图</span>
+    </button>
+    <button mat-button *ngFor="let item of allBuildings" (click)="checkedBuilding(item)" class="bigeditdeletebtn" [ngClass]="{'buildingbtnchecked': item.name == checkedBuildingDate}">
+      <span>{{item.name}}</span>
+      <span class="editdeletebtn">
+        <mat-icon (click)="editBuilding($event,item)" style="font-size: 16px;vertical-align:sub;margin-left: 6px;color: rgb(26, 194, 26);">create</mat-icon>
+        <mat-icon (click)="deleteBuilding($event,item)" style="font-size: 17px;vertical-align:sub;color: rgb(224, 51, 51);">delete</mat-icon>
+      </span>
+    </button>
+    <button mat-button (click)="createBuilding()">
+      <span style="font-size: 24px;">+</span>
+    </button>
   </div>
 
   <!--功能区 -->
   <div class="functionalDomain">
-    <mat-drawer-container class='functionalDomainContent' [hasBackdrop]='false'>
-      <mat-drawer #drawer class='functionalDomainLeft'>
+    <mat-drawer-container class='functionalDomainContent' [hasBackdrop]='false' >
+      <mat-drawer #drawer class='functionalDomainLeft' opened>
 
       </mat-drawer>
 
       <mat-drawer-content class='functionalDomainRight'>
-        <div class="h5Unity">
+        <div class="h5Unity" id="h5Unity">
           <!-- H5Canvas -->
-          <app-working-area></app-working-area>
+          <!-- <app-working-area></app-working-area> -->
         </div>
 
         <div class="rightAttribute">
-
+          <!-- 属性 -->
+          <div class="property" style="height: 50%;">
+            <div class="title">
+              <div>
+                <span style="user-select: none">属性</span>
+              </div>
+            </div>
+            <!-- 平面图属性 -->
+            <div class="siteproperty" style="user-select: none;display: none;">
+              <p>面积(平方米)</p>
+              <div class="siteproperty_size">0</div>
+              <p>详情</p>
+              <div class="siteproperty_details">京中有善口技者，阿巴阿巴阿巴。 </div>
+            </div>
+            <!-- 素材属性 -->
+            <div class="assetsproperty">
+              <h3>实景图片</h3>
+              <p>宽度(像素)</p>
+              input
+            </div>
+          </div>
+          <!-- 消防要素 -->
+          <div class="firecategories" style="height: 50%;">
+            <div class="title">
+              <div>
+                <span style="user-select: none">消防要素</span>
+              </div>
+            </div>
+          </div>
         </div>
       </mat-drawer-content>
 

src/app/ui/collection-tools/collection-tools.component.scss

@@ -6,21 +6,65 @@
   padding: 3px;
   display: flex;
   flex-direction: column;
+  
+  mat-icon{
+    vertical-align: middle
+  }
+  .icongray{
+    color: #D9D0DC;
+  }
+  .buildingbtnchecked{
+    background-color: #34A6FD;
+    color: white;
+  }
 }
 
 //header头部
 .header {
+  position: relative;
   flex: 5%;
+  display: flex;
+  align-items:center;
   min-height: 40px;
   background-color: #fff;
+  .nameShow{
+    cursor: pointer;
+    user-select: none;
+  }
+  .copytobutn{
+    width: 33px;
+    min-width: 33px;
+    display: flex;
+    justify-content: center;
+  }
+  font-size: 15px;
+  span{
+    height: 24px;
+    line-height: 24px;
+  }
 }
 
 //头部操作栏
 .headerOperate {
   flex: 5%;
+  display: flex;
+  align-items:center;
   min-height: 40px;
   box-sizing: border-box;
   margin: 3px 0;
+  background-color: #ECF0F3;
+  button{
+    border: 0.5px solid rgb(208, 211, 214);
+    margin: 0 2px;
+  }
+  .editdeletebtn{
+    display: none;
+  }
+  .bigeditdeletebtn:hover{
+    .editdeletebtn{
+      display: inline-block;
+    }
+  }
 }
 
 //功能区
@@ -48,13 +92,54 @@
       flex: 100%;
     }
     .rightAttribute{
-      width: 13%;
-      height: 100%;
+      width: 12%;
+      height: 99.5%;
       position: absolute;
+      top: 0;
       right: 0;
       bottom: 0;
-      border: 1px solid #E6EAEE;
-      background-color: #E6EAEE;
+      border: 2px solid #464646;
+      .title{
+        height: 35px;
+        background-color: #464646;
+        div{
+          width: 50%;
+          height: 35px;
+          line-height: 35px;
+          background-color: #595959;
+          border-radius: 5px;
+          span{
+            color: white;
+            font-size: 14px;
+            font-weight: 400;
+            padding-left: 5px;
+          }
+        }
+      }
+      .property{
+        .siteproperty{
+          height: 100%;
+          p{
+            color: #9c9fa5;
+            padding-left: 5px;
+          }
+          .siteproperty_size{
+            background-color: #e3e3e3;
+            width: 93%;
+            margin: 0 auto;
+            border-radius: 3px;
+          }
+          .siteproperty_details{
+            background-color: #e3e3e3;
+            border-radius: 3px;
+            min-height: 21px;
+            max-height: 72%;
+            width: 93%;
+            margin: 0 auto;
+            overflow-y: auto;
+          }
+        }
+      }
     }
   }
 }

src/app/ui/collection-tools/collection-tools.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-collection-tools',
@@ -7,9 +10,210 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CollectionToolsComponent implements OnInit {
 
-  constructor() { }
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { }
+  selected = 'option1' //图标大小选择框
+  basicInfo:boolean = true //基本信息名称显隐
+  wantToWork:boolean = true //想定作业名称显隐
+  allBuildings //该单位所有建筑
+  checkedBuildingDate //当前点击选择的建筑
+  isEditPat:boolean =  true //当前是否是编辑模式
+  ngOnInit(): void {
+    this.checkedBuildingDate = "总平面图"
+    this.getAllBuildings()
+  }
+  //点击基本信息名称
+  basicInfoClick(){
+    this.basicInfo = !this.basicInfo
+  }
+  //点击想定作业名称
+  wantToWorkClick(){
+    this.wantToWork = !this.wantToWork
+  }
+  //进入编辑模式
+  editpat(){
+    this.isEditPat = true
+    let config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('进入编辑模式','确定',config);
+  }
+  //进入查看模式
+  lookpat(){
+    this.isEditPat = false
+    let config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('进入查看模式','确定',config);
+  }
+  //保存平面图
+  saveSite(){
+    
+  }
+  //获得所有的建筑物
+  getAllBuildings(){
+    this.http.get("/api/CompanyAccount/Buildings").subscribe(data=>{
+      this.allBuildings = data
+    })
+  }
+  //创建建筑
+  createBuilding(){
+    let data = this.allBuildings
+    let dialogRef = this.dialog.open(CreateBuilding,{data});
+    dialogRef.afterClosed().subscribe(data=>{
+      if (data == "创建成功") {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('创建成功','确定',config);
+        this.getAllBuildings()
+      }else if (data == "创建失败") {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('创建失败','确定',config);
+      }
+    });  
+  }
+  //选择建筑
+  checkedBuilding(item){
+    this.checkedBuildingDate = item.name
+  }
+  //编辑建筑
+  editBuilding(e,item){
+    e.stopPropagation();
+    let dialogRef = this.dialog.open(EditBuilding,{data: {item:item}});
+    dialogRef.afterClosed().subscribe(data=>{
+      if (data == "修改成功") {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('修改成功','确定',config);
+        this.getAllBuildings()
+      }else if (data == "修改失败") {
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('修改失败','确定',config);
+      }
+    });  
+  }
+  //删除建筑
+  deleteBuilding(e,item){
+    e.stopPropagation();
+    if(confirm("是否删除该建筑") == true){
+      this.http.delete(`/api/CompanyAccount/Buildings/${item.id}`).subscribe(data=>{
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('删除成功','确定',config);
+        this.getAllBuildings()
+      },err=>{
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('删除失败','确定',config);
+        this.getAllBuildings()
+      })
+    }
+  }
+  
+}
+
 
+
+//创建建筑
+@Component({
+  selector: 'app-createBuilding',
+  templateUrl: './createBuilding.html',
+  styleUrls: ['./collection-tools.component.scss']
+})
+export class CreateBuilding {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<CreateBuilding>,@Inject(MAT_DIALOG_DATA) public data) { }
+
+  allBuildingType:any//所有的建筑类型
+  selected:any; //选中的建筑
   ngOnInit(): void {
+    this.getAllBuildingType()
   }
 
+  getAllBuildingType(){
+    this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{
+      this.allBuildingType = data
+    })
+  }
+
+  //创建建筑功能分区
+  onSubmit (e) {
+    let companyId = sessionStorage.getItem("companyId")
+    let lastBuildingOrder = this.data.length != 0 ? this.data[this.data.length - 1].order + 1 : 0
+    let data = 
+    {
+      id: "",
+      name: e.propertyName,
+      order: lastBuildingOrder ,
+      enabled: true,
+      companyId: companyId,
+      buildingTypes: [
+        {
+          id: e.buildingId,
+          name: ""
+        }
+      ]
+    }
+    this.http.post("/api/CompanyAccount/Buildings",data).subscribe(data=>{
+      this.dialogRef.close("创建成功");
+    },err=>{
+      this.dialogRef.close("创建失败");
+    })
+  }
 }
+
+//编辑建筑
+@Component({
+  selector: 'app-editBuilding',
+  templateUrl: './editBuilding.html',
+  styleUrls: ['./collection-tools.component.scss']
+})
+export class EditBuilding {
+
+  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<EditBuilding>,@Inject(MAT_DIALOG_DATA) public data) { }
+  
+  defaultName:String = this.data.item.name//默认建筑名称
+  defaultBuildingType:String = this.data.item.buildingTypes[0].id//默认建筑类型
+  allBuildingType:any//所有的建筑类型
+
+  ngOnInit(): void {
+    this.getAllBuildingType()
+  }
+
+  getAllBuildingType(){
+    this.http.get("/api/BuildingTypes/Simple").subscribe(data=>{
+      this.allBuildingType = data
+    })
+  }
+
+  //编辑建筑信息
+  onSubmit (e) {
+    let companyId = sessionStorage.getItem("companyId")
+    let data = 
+    {
+      id: this.data.item.id,
+      name: e.propertyName,
+      order: this.data.item.order,
+      enabled: true,
+      companyId: companyId,
+      buildingTypes: [
+        {
+          id: e.buildingId,
+          name: ""
+        }
+      ]
+    }
+    this.http.put(`/api/CompanyAccount/Buildings/${this.data.item.id}`,data).subscribe(data=>{
+      this.dialogRef.close("修改成功");
+    },err=>{
+      this.dialogRef.close("修改失败");
+    })
+  }
+}

src/app/ui/collection-tools/createBuilding.html

@@ -0,0 +1,28 @@
+<div mat-dialog-title>新增建筑</div>
+<div>
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+
+        <div mat-dialog-content>
+            <mat-form-field>
+                  <input type="text" matInput ngModel
+                  required name="propertyName" placeholder="建筑名称" autocomplete="off">
+            </mat-form-field>
+        </div>
+        <div mat-dialog-content>
+            <mat-form-field>
+                <mat-select [(value)]="selected" required ngModel name="buildingId" placeholder="建筑类型">
+                    <mat-option *ngFor="let item of allBuildingType" [value]="item.id">
+                    {{item.name}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>  
+        <div mat-dialog-actions>
+            <button mat-raised-button color="primary" type="submit" 
+            [disabled]="!form.form.valid">
+                确定
+            </button>
+            <button mat-raised-button mat-dialog-close>取消</button>
+        </div>
+    </form>
+</div>

src/app/ui/collection-tools/editBuilding.html

@@ -0,0 +1,23 @@
+<div mat-dialog-title>编辑建筑</div>
+<div>
+    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
+        <div mat-dialog-content>
+            <mat-form-field>
+                <input type="text" matInput [(ngModel)]="defaultName" required name="propertyName" placeholder="建筑名称" autocomplete="off">
+            </mat-form-field>
+        </div>
+        <div mat-dialog-content>
+            <mat-form-field>
+                <mat-select required [(ngModel)]="defaultBuildingType" name="buildingId" placeholder="建筑类型">
+                    <mat-option *ngFor="let item of allBuildingType" [value]="item.id">
+                        {{item.name}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>  
+        <div mat-dialog-actions>
+            <button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button>
+            <button mat-raised-button mat-dialog-close>取消</button>
+        </div>
+    </form>
+</div>

src/app/ui/ui.module.ts

@@ -95,11 +95,11 @@ import { ImgsDataDetail } from './fire-fighting-device/addGrouping.component';
 import { KeySiteImgs } from './key-site/keysiteimgs.component';
 import { KeyImgDetail } from './key-site/keyimgdetail.component';
 import { LookMaster } from './basicinfo/lookmaster.component';
-import { CollectionToolsComponent } from './collection-tools/collection-tools.component';
+import { CollectionToolsComponent, CreateBuilding, EditBuilding } from './collection-tools/collection-tools.component';
 import { WorkingAreaComponent } from '../working-area/working-area.component';
 
 @NgModule({
-  declarations: [UiComponent, CardComponent, StepperComponent, TabgroupComponent, ProgressComponent, SnackbarComponent, PersonaldataComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent, IsnoPipe, ConfirmpswDirective, DialogOverviewExampleDialog, CreateAuthority, CreateRole, EditRole, TimePipe, CreateNewUser, EditNewUser, allRoles, SharePower, CreateOrganization, EditOrganization, seeInformation, EditUser, editorialUnit, FireProtectionElementsComponent, Establish, EditingFireControl, FireFightingTemplateComponent, NavmenusComponent, CreateMenus, EditMenus, NewFireFighting, EditFireClassification, MaterialBankComponent, UnitInformationComponent, AddMatLibrary, EditMatLibrary, attributeComponent, AddOriginalCopy, addAttributeComponent, editAttribute, EditOriginalCopy, SelectOriginalCopy, EditUnitInfo, AddUnitInfo, AddGroups, EditGroup, BasicinfoComponent, PlanComponent, AllaroundComponent, FireFightingDeviceComponent, KeySiteComponent, FunctionDivisionComponent, RealisticPictureComponent, UploadingCADComponent, AddHouseInfo, ImgDetails, ImagesData, ImgsDataDetail, KeySiteImgs, KeyImgDetail, addPartition, addPartitionAttribute, previewImg, addRealPicture, editRealPicture, readFile, editFile, LookMaster, previewBigImg, CollectionToolsComponent, WorkingAreaComponent
+  declarations: [UiComponent, CardComponent, StepperComponent, TabgroupComponent, ProgressComponent, SnackbarComponent, PersonaldataComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent, IsnoPipe, ConfirmpswDirective, DialogOverviewExampleDialog, CreateAuthority, CreateRole, EditRole, TimePipe, CreateNewUser, EditNewUser, allRoles, SharePower, CreateOrganization, EditOrganization, seeInformation, EditUser, editorialUnit, FireProtectionElementsComponent, Establish, EditingFireControl, FireFightingTemplateComponent, NavmenusComponent, CreateMenus, EditMenus, NewFireFighting, EditFireClassification, MaterialBankComponent, UnitInformationComponent, AddMatLibrary, EditMatLibrary, attributeComponent, AddOriginalCopy, addAttributeComponent, editAttribute, EditOriginalCopy, SelectOriginalCopy, EditUnitInfo, AddUnitInfo, AddGroups, EditGroup, BasicinfoComponent, PlanComponent, AllaroundComponent, FireFightingDeviceComponent, KeySiteComponent, FunctionDivisionComponent, RealisticPictureComponent, UploadingCADComponent, AddHouseInfo, ImgDetails, ImagesData, ImgsDataDetail, KeySiteImgs, KeyImgDetail, addPartition, addPartitionAttribute, previewImg, addRealPicture, editRealPicture, readFile, editFile, LookMaster, previewBigImg, CollectionToolsComponent, WorkingAreaComponent,CreateBuilding,EditBuilding
   ],
 
   imports: [

src/assets/icon/material-icons.css

@@ -0,0 +1,37 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(./MaterialIcons-Regular.woff2) format('woff2'),
+       url(./MaterialIcons-Regular.woff) format('woff'),
+       url(./MaterialIcons-Regular.ttf) format('truetype');
+       
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

src/index.html

@@ -6,7 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
+  <link href='./assets/icon/material-icons.css' rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>