[完善] H5采集工具页面搭建初步完成

proxy.config.json

@@ -1,6 +1,6 @@
 {
     "/api": {
-      "target": "http://39.106.78.171:8088",
+      "target": "http://121.37.20.190:8008",
       "secure": false,
       "changeOrigin": true
     }

src/app/navigation/navigation.component.html

@@ -10,6 +10,7 @@
                 <li [routerLink]="['/datacollection/basicinfo']" routerLinkActive="router-link-active">基本信息</li>
                 <!-- plan -->
                 <li [routerLink]="['/datacollection/plan']" routerLinkActive="router-link-active">平面图</li>
+                <li [routerLink]="['/datacollection/collectionTools']" routerLinkActive="router-link-active">H5平面图</li>
                 <!-- allaround -->
                 <li [routerLink]="['/datacollection/allaround']" routerLinkActive="router-link-active">四周毗邻</li>
                 <!-- fire-fighting-device -->

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

@@ -0,0 +1,34 @@
+<div class="content">
+
+  <!-- header头部 -->
+  <div class="header">
+    <button (click)="drawer.toggle()">切换</button>
+  </div>
+
+  <!-- 头部操作栏 -->
+  <div class="headerOperate">
+    2
+  </div>
+
+  <!--功能区 -->
+  <div class="functionalDomain">
+    <mat-drawer-container class='functionalDomainContent' [hasBackdrop]='false'>
+      <mat-drawer #drawer class='functionalDomainLeft'>
+
+      </mat-drawer>
+
+      <mat-drawer-content class='functionalDomainRight'>
+        <div class="h5Unity">
+          <!-- H5Canvas -->
+
+        </div>
+
+        <div class="rightAttribute">
+
+        </div>
+      </mat-drawer-content>
+
+    </mat-drawer-container>
+  </div>
+
+</div>

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

@@ -0,0 +1,60 @@
+.content {
+  width: 100%;
+  height: 93%;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 3px;
+  display: flex;
+  flex-direction: column;
+}
+
+//header头部
+.header {
+  flex: 5%;
+  min-height: 40px;
+  background-color: #fff;
+}
+
+//头部操作栏
+.headerOperate {
+  flex: 5%;
+  min-height: 40px;
+  box-sizing: border-box;
+  margin: 3px 0;
+}
+
+//功能区
+.mat-drawer:not(.mat-drawer-side) {
+  box-shadow: none;
+  border: 1px solid #E6EAEE;
+  background-color: #E6EAEE;
+}
+.functionalDomain {
+  flex: 90%;
+  .functionalDomainContent {
+    width: 100%;
+    height: 100%;
+  }
+  .functionalDomainLeft {
+    width: 13%;
+    height: 100%;
+  }
+  .functionalDomainRight {
+    background-color: #fff;
+    height: 100%;
+    display: flex;
+    position: relative;
+    .h5Unity {
+      flex: 100%;
+    }
+    .rightAttribute{
+      width: 13%;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      border: 1px solid #E6EAEE;
+      background-color: #E6EAEE;
+    }
+  }
+}

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

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

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

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

src/app/ui/ui-routing.module.ts

@@ -9,6 +9,7 @@ import { KeySiteComponent } from './key-site/key-site.component';
 import { FunctionDivisionComponent } from './function-division/function-division.component';
 import { RealisticPictureComponent } from './realistic-picture/realistic-picture.component';
 import { UploadingCADComponent } from './uploading-cad/uploading-cad.component';
+import {CollectionToolsComponent} from './collection-tools/collection-tools.component'
 
 const routes: Routes = [
     { path: '', component:UserdataComponent },
@@ -21,7 +22,7 @@ const routes: Routes = [
     { path: 'function-division', component:FunctionDivisionComponent },
     { path: 'realistic-picture', component:RealisticPictureComponent },
     { path: 'uploadingCAD', component:UploadingCADComponent },
-
+    { path: 'collectionTools', component:CollectionToolsComponent },
 ];
 
 @NgModule({

src/app/ui/ui.module.ts

@@ -95,9 +95,10 @@ 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';
 
 @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
+  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
   ],
 
   imports: [

src/styles.scss

@@ -57,6 +57,9 @@ table td.mat-footer-cell:last-of-type{
   height: 100%;
   overflow-y: auto;
 }
+.mat-drawer-backdrop.mat-drawer-shown{
+  background-color: #fff;
+}
 .mat-content { //可展开面板垂直居中
   align-items: center;
 }