[新建]熟悉路线界面搭建

src/app/key-unit/key-unit-routing.module.ts

@@ -1,3 +1,11 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-05 15:00:14
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-06 10:38:22
+ */
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import {KeyUnitManagementComponent} from './key-unit-management/key-unit-management.component'
@@ -6,6 +14,7 @@ import { ViewUnitDetailsComponent } from './view-unit-details/view-unit-details.
 import {MTokenK1Component} from '../m-token-k1/m-token-k1.component' //K1秘钥
 import { EditPlanInfoComponent } from './edit-plan-info/edit-plan-info.component';
 import { ViewUnitDetailsPlanComponent } from './view-unit-details-plan/view-unit-details-plan.component';
+import { from } from 'rxjs';
 
 
 

src/app/key-unit/key-unit.module.ts

@@ -75,7 +75,8 @@ import { ImagesData2, previewBigImg2 } from './fire-fighting-device-look/imagesd
 import { ImgsDataDetail2 } from './fire-fighting-device-look/addGrouping.component';
 import { LookMaster2 } from './basicinfo-look/lookmaster.component';
 // import { LookMaster2 } from './basicinfo-look/lookmaster.component';
-import { UiModule } from '../../app/ui/ui.module'
+import { UiModule } from '../../app/ui/ui.module';
+
 
 @NgModule({
   declarations: [KeyUnitManagementComponent, EditUnitInfoComponent, ViewUnitDetailsComponent,CreateUnit,BasicinfoComponent,LookMaster,AddHouseInfo, EditPlanInfoComponent,BasicinfoLookComponent, ViewUnitDetailsPlanComponent,FunctionDivisionComponent,addPartition,addPartitionAttribute,AllaroundComponent,ImgDetails,RealisticPictureComponent,previewImg,addRealPicture,editRealPicture,KeySiteComponent,KeyImgDetail,KeySiteImgs,UploadingCADComponent,readFile,editFile,KeySiteLookComponent,KeySiteImgs2,FunctionDivisionLookComponent,RealisticPictureLookComponent,previewImg3,UploadingCADLookComponent,FireFightingDeviceComponent,ImagesData,previewBigImg,ImgsDataDetail,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,previewBigImg2,LookMaster2,addPartitionAttribute2],

src/app/ui/know-route/know-route.component.html

@@ -0,0 +1,33 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-05 15:27:58
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-06 10:33:56
+-->
+<div class="box">
+    <div class="addbw">
+        <span>添加熟悉部位:</span>
+        <button (click)="addRoute($event)">消控室</button>
+        <button (click)="addRoute($event)">水泵房</button>
+        <button (click)="addRoute($event)">疏散楼梯</button>
+        <button (click)="addRoute($event)">各楼层</button>
+        <button (click)="addRoute($event)">楼层消火栓</button>
+        <button (click)="addRoute($event)">水泵结合器</button>
+        <button (click)="addRoute($event)">室外消防水源</button>
+    </div>
+    <div class="addRoute">
+        <span>添加路线:</span>
+        <input type="text" > <!-- [(ngModel)]="knowRoute" -->
+        <!-- <hr> -->
+        <span class="floot" [ngClass]="{'beijicolor': chooseid ==key}" (click)="knowroutwClick($event,key)" *ngFor="let item of knowRoute; let key=index">{{item.name+item.idnum}}</span>
+    </div>
+    <div class="bottomAll">
+        <div class="upload"></div>
+        <div class="remarks">
+            <span>备注：</span><br>
+            <textarea name="" id="" cols="50" rows="10"></textarea>
+        </div>
+    </div>
+</div>

src/app/ui/know-route/know-route.component.scss

@@ -0,0 +1,69 @@
+.box{
+    width: 100%;
+    height: 100%;
+    //添加熟悉部位
+    .addbw{
+        height: 0.488281rem;
+        width: 100%;
+        margin: 0.488281rem 0.097656rem;
+        button{
+            margin-left: 0.097656rem;
+        }
+    }
+    //添加路线
+    .addRoute{
+        width: 100%;
+        height: 1.464844rem;
+        margin: 0.488281rem 0.097656rem;
+        position:relative;
+        white-space: nowrap;
+        input{
+            width: 5.859375rem;
+            margin-left: 0.097656rem;
+            border-top: none;
+            border-left: none;
+            border-right: none;
+            font-size: 0.15625rem;
+            outline: none;
+            background-color: transparent;
+        }
+        hr{
+            width: 5.859375rem;
+            margin-left: 0.78125rem
+            
+        }
+        .floot{
+            width: 0.683594rem;
+            height: 0.195313rem;
+            right: 5.859375rem;
+            //z-index: 100;
+            position:relative;
+        }
+    }
+    span{
+        font-size: 0.15625rem;
+    }
+    //底部div
+    .bottomAll{
+        width: 100%;
+        height: 100%;
+        margin-top: 0.976563rem;
+        display: flex;
+        .upload{
+            width: 50%;
+            height: 50%;
+        }
+        .remarks{
+            width: 50%;
+            height: 50%;
+            input{
+                height: 0.488281rem;
+                width: 0.488281rem;
+            }
+        }
+    }
+    //熟悉路线选中样式
+    .beijicolor{
+        border: 1px solid #000000;
+    }
+}

src/app/ui/know-route/know-route.component.spec.ts

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

src/app/ui/know-route/know-route.component.ts

@@ -0,0 +1,42 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-11-05 15:27:58
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-11-06 10:30:10
+ */
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-know-route',
+  templateUrl: './know-route.component.html',
+  styleUrls: ['./know-route.component.scss']
+})
+export class KnowRouteComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  //判断选中路线的值
+  chooseid=-1
+  knowRoute=[
+    {name:``,idnum:""}
+    /* {name:`柳州支队`,idnum:"🠖"} */
+  ]
+
+  //熟悉部位点击事件
+  addRoute(event){
+    //console.log(event.target.innerHTML)
+    //this.knowRoute+=event.target.innerHTML+"🠖"
+    this.knowRoute.push({name:event.target.innerHTML,idnum:"🠖"})
+  }
+  //熟悉路线点击事件
+  knowroutwClick(event,key){
+    console.log(event)
+    this.chooseid=key
+    //event.target.style.border="1px solid #000000"
+  }
+
+}

src/app/ui/ui.module.ts

@@ -95,8 +95,10 @@ import { CollectionToolsComponent, CreateBuilding, EditBuilding, ViewDetails } f
 import { WorkingAreaComponent } from '../working-area/working-area.component';
 import {leftFunctionalDomainComponent,editPlaneFigureComponent,addDisposalNodeComponent,editDisposalNodeComponent} from './collection-tools/leftFunctionalDomain'
 import { saveOneDialog, saveTwoDialog } from './collection-tools/save';
+import { KnowRouteComponent} from './know-route/know-route.component'
+  import { from } from 'rxjs';
 @NgModule({
-  declarations: [UiComponent, DateselectComponent, MenuComponent, CardComponent, ListComponent, GridComponent, StepperComponent, TabgroupComponent, ButtonComponent, BadgeComponent, ProgressComponent, SnackbarComponent,PersonaldataComponent, FooterComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,IsnoPipe,ConfirmpswDirective,DialogOverviewExampleDialog,CreateAuthority,CreateRole,TimePipe,CreateNewUser,EditNewUser,allRoles,EditRole,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, EnterpriseuserComponent,AddEnterpriserUser,addUnitAttributeComponent,editUnitAttribute,seeenterpriseuser,editenterpriseuser, FireFightingFacilitiesFormworkComponent,addFireFightingFacilitiesFormworkComponent,editFireFightingFacilitiesFormworkComponent,addBuiltInComponent,addBuiltInAttributeComponent,addOptionalComponent,addOptionalAttributeComponent,editBuiltInAttributeComponent,editOptionalAttributeComponent, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent],
+  declarations: [UiComponent, DateselectComponent, MenuComponent, CardComponent, ListComponent, GridComponent, StepperComponent, TabgroupComponent, ButtonComponent, BadgeComponent, ProgressComponent, SnackbarComponent,PersonaldataComponent, FooterComponent, UserdataComponent, ChangepasswordComponent, OrganizationComponent, UnittypeComponent, AuthorityComponent, RoleComponent, UsermanagementComponent,IsnoPipe,ConfirmpswDirective,DialogOverviewExampleDialog,CreateAuthority,CreateRole,TimePipe,CreateNewUser,EditNewUser,allRoles,EditRole,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, EnterpriseuserComponent,AddEnterpriserUser,addUnitAttributeComponent,editUnitAttribute,seeenterpriseuser,editenterpriseuser, FireFightingFacilitiesFormworkComponent,addFireFightingFacilitiesFormworkComponent,editFireFightingFacilitiesFormworkComponent,addBuiltInComponent,addBuiltInAttributeComponent,addOptionalComponent,addOptionalAttributeComponent,editBuiltInAttributeComponent,editOptionalAttributeComponent, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent,KnowRouteComponent],
 
   imports: [
     CommonModule,