Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/TheCommandPlatform-Anxin into master

package.json

@@ -25,6 +25,7 @@
     "@types/cesium": "^1.59.5",
     "@types/swiper": "^5.3.0",
     "angular-calendar": "^0.28.2",
+    "bson-objectid": "^1.3.1",
     "cesium": "^1.64.0",
     "date-fns": "^2.9.0",
     "e-ngx-cesium": "^6.3.2",
@@ -34,14 +35,13 @@
     "ngx-countdown": "^9.0.1",
     "ngx-echarts": "^4.2.2",
     "ngx-perfect-scrollbar": "^8.0.0",
+    "pixi-filters": "^3.1.1",
+    "pixi.js": "^5.3.2",
     "rxjs": "~6.5.4",
     "swiper": "^5.3.7",
     "tslib": "^1.10.0",
     "viewerjs": "^1.6.2",
-    "zone.js": "~0.10.2",
+    "zone.js": "~0.10.2"
-    "pixi-filters": "^3.1.1",
-    "pixi.js": "^5.3.2",
-    "bson-objectid": "^1.3.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.900.1",

src/app/app-routing.module.ts

@@ -11,29 +11,28 @@ import {MTokenK1Component} from './m-token-k1/m-token-k1.component' //K1秘钥
 
 
 
-
 const routes: Routes = [
-  {path:'',redirectTo:'login',pathMatch:'full'},
+  {path:'',redirectTo:'ui/collectionTools',pathMatch:'full',},
   {
     path:'',
     component:NavigationComponent,
-    canActivate: [AuthGuard],//守卫验证
+    // canActivate: [AuthGuard],//守卫验证
     children:[
       {path:'ui',loadChildren:() => import('./ui/ui.module').then(m => m.UiModule)},
-      {path:'home',loadChildren:() => import('./pages/pages.module').then(m => m.PagesModule)},
+      // {path:'home',loadChildren:() => import('./pages/pages.module').then(m => m.PagesModule)},
-      {path:'visualization',component: HomeComponent},
+      // {path:'visualization',component: HomeComponent},
-      {path:'gis',loadChildren:() => import('./gis-management/gis-management.module').then(m => m.GISManagementModule)}
+      // {path:'gis',loadChildren:() => import('./gis-management/gis-management.module').then(m => m.GISManagementModule)}
     ]
   },
-  {path:'login',
+  // {path:'login',
-  component:LoginComponent},
+  // component:LoginComponent},
 
-  {path:'getNoMToken',
+  // {path:'getNoMToken',
-  component:MTokenK1Component, canActivate: [AuthGuard],}, //K1秘钥验证失败是跳转页面
+  // component:MTokenK1Component, canActivate: [AuthGuard],}, //K1秘钥验证失败是跳转页面
 
-  {path:'lockscreen',
+  // {path:'lockscreen',
-  component:LockscreenComponent,
+  // component:LockscreenComponent,
-  canActivate: [AuthGuard]}//守卫验证
+  // canActivate: [AuthGuard]}//守卫验证
 ];
 
 @NgModule({

src/app/gis-management/gis-management-routing.module.ts

@@ -1,10 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { GisLabelingComponent } from './gis-labeling/gis-labeling.component';
-
 
 const routes: Routes = [
-  { path: '', component: GisLabelingComponent },
 ];
 
 @NgModule({

src/app/http-interceptors/base-interceptor.ts

@@ -24,7 +24,7 @@ export class BaseInterceptor implements HttpInterceptor {
     });
     if(!req.cancelToken) {
       /*获取token*/
-      let token = sessionStorage.getItem("token")
+      let token = sessionStorage.getItem("token") || ''
       /*此处设置额外请求头，token令牌*/
       newReq.headers =
       newReq.headers.set('Authorization', `Bearer ${token}`)
@@ -47,7 +47,6 @@ export class BaseInterceptor implements HttpInterceptor {
       this.token.delete()
       sessionStorage.clear()
       window.localStorage.clear()
-      this.router.navigate(['/login'])
       const config = new MatSnackBarConfig();
       config.verticalPosition = 'top';
       config.duration = 3000

src/app/http-interceptors/cache-token.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http'
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 
 @Injectable({
   providedIn: 'root'
@@ -7,7 +8,36 @@ import { HttpClient } from '@angular/common/http'
 
 export class CacheTokenService {
 
-  constructor(private http:HttpClient) { }
+  constructor(private http:HttpClient,public snackBar: MatSnackBar) { }
+
+  //登录
+  loginData = {name: 'superadmin', password: 'anxin119'} //登录账号信息
+  
+  login () {
+    return new Promise ((resolve,reject)=>{
+      sessionStorage.setItem("buildingTypeId",'5e7c9027a3050b1a840ed4b8'); //建筑类型
+      sessionStorage.setItem("planId",'5f52fd529e91f4410005eac5'); //预案ID
+      sessionStorage.setItem("companyId",'5e9964caa760a059e84512e9'); //单位ID
+      this.http.post('/api/Account/SignIn',this.loginData).subscribe((data:any)=>{
+        sessionStorage.setItem("level",data.level);
+        sessionStorage.setItem("token",data.token);
+        sessionStorage.setItem("refreshToken",data.refreshToken);
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('自动登录成功','确定',config);
+        this.startUp()
+        resolve('success')
+      },(err) => { //捕获错误
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open(err,'确定',config);
+      })
+    })
+  }
+  //登录
+
   public timer;
 
   //刷新token令牌定时器

src/app/m-token-k1/m-token-k1.component.ts

@@ -58,7 +58,6 @@ export class MTokenK1Component implements OnInit {
             config.verticalPosition = 'top';
             config.duration = 5000
             this.snackBar.open('密钥错误,不为本公司发放密钥','确定',config);
-            this.router.navigate(['/getNoMToken'])
             return false
           }
         } else { //密码验证失败
@@ -66,7 +65,6 @@ export class MTokenK1Component implements OnInit {
           config.verticalPosition = 'top';
           config.duration = 5000
           this.snackBar.open('密钥密码错误,请使用初始密码','确定',config);
-          this.router.navigate(['/getNoMToken'])
           return false
         }
   
@@ -75,7 +73,6 @@ export class MTokenK1Component implements OnInit {
         config.verticalPosition = 'top';
         config.duration = 5000
         this.snackBar.open('密钥未插入','确定',config);
-        this.router.navigate(['/getNoMToken'])
         return false
       }
 
@@ -84,7 +81,6 @@ export class MTokenK1Component implements OnInit {
       config.verticalPosition = 'top';
       config.duration = 5000
       this.snackBar.open('请检查您密钥是否插入或者驱动是否已启动','确定',config);
-      this.router.navigate(['/getNoMToken'])
       return false
     }
 

src/app/navigation/navigation.component.html

@@ -1,68 +1,15 @@
-<!-- <app-tabbar></app-tabbar> -->
+<div class="content">
-<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;">
-        <div class="biglogobox">
-            <img src="../../assets/images/biglogo.png" alt="">
-        </div>
-        <div class="navbox">
-            <mat-accordion multi>
-              <div *ngFor="let item of treedata">
-                <mat-expansion-panel   *ngIf="item.children">
-                  <mat-expansion-panel-header>
-                    <mat-panel-title>
-                      <mat-icon style="vertical-align: top;font-size: 20px;" *ngIf="!item.parentId">{{item.icon}}</mat-icon>{{item.name}}
-                    </mat-panel-title>
-                  </mat-expansion-panel-header>
 
-                  <ul>
+  <header>
-                    <li *ngFor="let i of item.children">
+    <div class="title">着火单位: 高科技创业园</div>
-                      <div *ngIf="i.children">
+    <div class="router">
-  
+      <div class="routerText" *ngFor="let item of routers" routerLink= {{item.url}} routerLinkActive="routerLinkActive">{{item.name}}</div>
-                          <mat-expansion-panel>
+    </div>
-                            <mat-expansion-panel-header style="height: 48px;padding-left: 52px;">
+  </header>
-                              <mat-panel-title class="superdiv">
-                                  {{i.name}}
-                              </mat-panel-title>
-                            </mat-expansion-panel-header>
-                            <ul>
-                              <li style="padding-left: 66px;" *ngFor="let n of i.children" routerLink={{n.url}} routerLinkActive="router-link-active"> {{n.name}}</li>
-                            </ul>
-                        </mat-expansion-panel>
-                      </div>
-                      
-                      <div class="commondiv" *ngIf="!i.children" routerLink= {{i.url}} routerLinkActive="router-link-active">
-        
-                          {{i.name}}
-                      </div>
-            
-                    </li>
-                  </ul>
-            
-                </mat-expansion-panel>
-                <mat-expansion-panel   *ngIf="!item.children" disabled routerLink={{item.url}} routerLinkActive="router-link-active">
-                  <mat-expansion-panel-header>
-                    <mat-panel-title style="color: white;"> 
-                      <mat-icon style="vertical-align: top;font-size: 20px;" *ngIf="!item.parentId">{{item.icon}}</mat-icon>{{item.name}}
-                    </mat-panel-title>
-                  </mat-expansion-panel-header>
-                </mat-expansion-panel>
-              
-              </div>
-            </mat-accordion>
-            <div routerLink= "/ui/collectionTools" routerLinkActive="router-link-active">
-              H5编制工具
-            </div>
-        </div>
-    </mat-sidenav>
 
-    <button type="button" mat-button (click)="drawer.toggle()" class="shownav">
+  <div class="center">
-        <mat-icon style="color:white;">menu</mat-icon>
+    <router-outlet></router-outlet>
-    </button>
+  </div>
 
-    <div class="example-sidenav-content">
+</div>
-        <app-tabbar (toggleDarkTheme)="switchTheme($event)" (defaulttheme)="defaulttheme()" (redtheme)="redtheme()"></app-tabbar>
-        <router-outlet></router-outlet>
-    </div>
 
-</mat-sidenav-container>
-<!-- <app-footer [class.myapp-dark-theme]="darktheme"></app-footer> -->

src/app/navigation/navigation.component.scss

@@ -1,131 +1,58 @@
-
+.content {
-.example-container {
     width: 100%;
-    height:100%;
-    border: 1px solid rgba(0, 0, 0, 0.5);
-  }
-mat-accordion{
     height: 100%;
+    box-sizing: border-box;
+    padding: 5px 25px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
-mat-sidenav{
-    box-shadow: 2px 0px 5px #888888;
-    color: white;
-    background-color: #3c4252;
-    width: 240px;
-    overflow-x: hidden;
 
-    ul{
+//头部
+header {
+    width: 100%;
+    height: 80px;
+    border: 1px solid #30bbec;
+    border-top: none;;
+    .title {
         width: 100%;
-        
+        height: 25px;
-        li{
+        line-height: 25px;
-            line-height: 48px;
+        text-align: center;
-            cursor: pointer;
+        font-size: 18px;
-            background-color: #3c4252;
+        font-weight: 550;
-            color: white;
+        color: red;
-            font-size: 15px;
+    }
-            .commondiv{
+    .router{
-                padding-left: 52px;
+        width: 100%;
-            }
+        height: 55px;
+        outline: none;
+        .routerText {
+            display: inline-block;
+            margin: 7px 15px;
+            width: 150px;
+            height: 37px;
+            line-height: 37px;
+            font-size: 20px;
+            text-align: center;
+            border-top-left-radius: 15px;
+            border-bottom-right-radius: 15px;
+            cursor:pointer;
+            outline: none;
+            border: 2px solid #999;
+            color: #999;
         }
-
     }
-      
 }
 
-    .shownav{
+//路由选中样式
-        position: absolute;
+.routerLinkActive {
-        top: 13px;
+    background-color: rgba(240,136,14,0.3);
-        z-index: 200;
+    outline: none;
-
-    }
-    .mat-accordion .mat-expansion-panel:first-of-type {
-        border-top-right-radius:0px;
-        border-top-left-radius:0px;
-    }
-    .mat-accordion .mat-expansion-panel:last-of-type {
-        border-bottom-right-radius: 0px;
-        border-bottom-left-radius: 0px;
-    }
-    .mat-expansion-panel{
-        border-radius: 0px;
-    }
-    .mat-expansion-panel-spacing {
-        margin: 0px;
-    }
-
-   .navbox{
-        position: absolute;
-        left: 0px;
-        top: 153px;
-        right: -18px;
-        bottom: 0px;
-        overflow-y: scroll;
-   }
-   mat-sidenav-container.myapp-dark-theme{
-       background-color: #fafafa;
-       color: black;
-       cursor: pointer;
-       mat-panel-title{
-           color: black!important;
-          line-height: 24px;
-       }
-       
-       ul li{
-           background-color: white;
-           color: black;
-       }
-       .biglogobox{
-            background-color: #d50000;
-        }
-        color: black;
-   }
-
-   .biglogobox{
-       width: 250px;
-       background-color: #42a5f5;
-       padding-top: 15px;
-       display: block;
-       text-align: center;
-       line-height:40px;
-       position: relative;
-       color: #FFF;
-       font-size: 2em;
-       margin: 0 auto;
-       margin-bottom: 100px;
-       img{
-           margin-right: 11px;
-       }
-   }
-   mat-panel-title mat-icon{
-       color: #afb2bb;
-       font-size: 24px;
-       line-height: 24px;
-       margin-right: 5px;
-   }
-    mat-expansion-panel{
-        background-color: #3c4252;
-        mat-panel-title{
-            color: white;
-            cursor: pointer;
-            line-height: 24px;
-        }
-    }
-
-    .mat-expansion-indicator::after {
-        color: white;
-    }
-
-.example-container .navbox .router-link-active {
-    background-color: rgba(225,225,225,.5);
-    border:0
-}
-.example-sidenav-content{
-    height: 100%;
-    overflow: hidden;
 }
-.disabledclass{
-    mat-panel-title{
-        color: white;
-    }
 
+//中间区域
+.center {
+    flex: 1;
+    overflow: hidden;
 }

src/app/navigation/navigation.component.ts

@@ -21,40 +21,24 @@ 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
+  //路由配置
-  isgrey:boolean
+  routers:any = [
-  olddata:any
+    {name:'平面图', url: '/ui/collectionTools'},
-  oldtreedata:any
+    {name:'处置要点', url: '/ui/disposalNode'},
+    {name:'危化品', url: '/ui/dangerous'},
+    {name:'类似预案', url: '/ui/similarPlans'},
+    {name:'真实战例', url: '/ui/realCases'},
+    {name:'预案辅助', url: '/ui/planAssistance'}
+  ]
 
   ngOnInit () {
-    this.http.get('/api/Account/NavMenus').subscribe((data:any)=>{
-      this.olddata = data
-      this.oldtreedata = data
-      let _data = this.tree.toTree(this.oldtreedata) 
-      this.treedata = _data
-    })
-  }
-  
-  ngOnDestroy () {
  
   }
   
-  darktheme = false;
+  ngOnDestroy () {
-  switchTheme(dark) {
-    this.darktheme = dark;
-  }
 
-  defaulttheme(){
-    this.darktheme = false
   }
 
-  redtheme(){
-    this.darktheme = true
-  }
-  toGis(){
-    // console.log(123)
-    window.open(`http://39.106.78.171:8000`);
-  }
 
 
 }

src/app/pages/lockscreen/lockscreen.component.ts

@@ -14,9 +14,6 @@ export class LockscreenComponent implements OnInit {
   }
 
   open(){
-    if(this.password == "12345678"){
-      this.router.navigate(['/ui/enterpriseuser'])
-    }
   }
 
 

src/app/pages/login/login.component.ts

@@ -24,38 +24,7 @@ export class LoginComponent implements OnInit {
   errmsg :string = ''
 
   onSubmit(e){
-    this.http.post('/api/Account/SignIn',{
-      name: e.name,
-      password: e.password}).subscribe( (data: Data) => { 
-        sessionStorage.setItem("level",data.level);
-        sessionStorage.setItem("token",data.token);
-        sessionStorage.setItem("refreshToken",data.refreshToken);
-        // this.router.navigate([`/home`])
-        this.http.get('/api/Account/NavMenus').subscribe((data:any)=>{
   
-          let isHave = data.find(item=>{ return item.url == "/home"})
-          
-          if (isHave)  {
-            this.router.navigate([`/home`])
-          } else {
-            data.forEach(item => {
-              if(item.url){
-                this.router.navigate([`/home`])
-                return  
-              } 
-            });
-          }
-
-        })
-        if(e.notlogin){ //7天免登录时
-          localStorage.setItem("isnologin","true")
-          localStorage.setItem("token",data.token)
-          localStorage.setItem("refreshToken",data.refreshToken) }
-        //调用服务中的function刷新token
-        this.token.startUp()
-      },
-      (err) => {this.errmsg = err}
-    )
   }
 
   //7天免登录自动登录
@@ -71,7 +40,6 @@ export class LoginComponent implements OnInit {
           sessionStorage.setItem("token",data.token);
           sessionStorage.setItem("refreshToken",data.refreshToken);
           this.token.startUp()
-          this.router.navigate(['/ui/userdata'])
           this.snackBar.open('已自动登录', '确定', {duration: 3000});
       })
     } //if

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

@@ -1,16 +1,7 @@
 import { Routes, RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { PagesComponent } from './pages.component';
-import { PersonaldataComponent } from './personaldata/personaldata.component';
-import { HomeComponent } from './home/home.component';
-import { Home2Component } from './home2/home2.component';
-import { HomedetailComponent } from './homedetail/homedetail.component';
-
 
 const routes: Routes = [
-    { path: '', component: HomeComponent},
-    { path: '2', component: Home2Component},
-    { path: 'detail', component: HomedetailComponent},
 
 ];
 

src/app/pages/register/register.component.ts

@@ -13,7 +13,6 @@ export class RegisterComponent implements OnInit {
   }
 
   onSubmit(e){
-    // console.log(e)
   }
 
 }

src/app/tabbar/tabbar.component.ts

@@ -36,26 +36,10 @@ export class TabbarComponent implements OnInit {
     planName:any = null
     routerEventsListener //监测路由变化
     ngOnInit() {
-      this.grade = this.route.snapshot.queryParams.grade
+
-      this.routerEventsListener = this.router.events.pipe(
-        filter(event => event instanceof NavigationEnd)
-      ).subscribe((e) => {
-          this.title = "数字化预案编制管理平台"
-          this.planName = null
-          this.grade = null
-      });
-      this.getUserInfo()
-      if(this.router.url.indexOf("editunitinfo") != -1 || this.router.url.indexOf("viewunitinfoplan") != -1){//如果url地址是从录入预案跳转
-        this.title = sessionStorage.getItem("companyName")
-        this.planName = sessionStorage.getItem("planName")
-      }
-      if(this.router.url.indexOf("editplaninfo") != -1 || this.router.url.indexOf("viewunitinfo") != -1){//如果url地址是从重点单位跳转
-        this.title = sessionStorage.getItem("companyName")
-      }
     }
 
     ngOnDestroy(){
-      this.routerEventsListener.unsubscribe()
     }
 
 
@@ -131,7 +115,6 @@ export class TabbarComponent implements OnInit {
             this.token.delete()
             sessionStorage.clear()
             window.localStorage.clear()
-            this.router.navigate(['/login'])
             const config = new MatSnackBarConfig();
             config.verticalPosition = 'bottom';
             config.duration = 3000

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

@@ -4,7 +4,7 @@
 }
 .content {
   width: 100%;
-  height: 93%;
+  height: 100%;
   overflow: hidden;
   box-sizing: border-box;
   padding: 1px;

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

@@ -8,6 +8,7 @@ import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
 import {FlatTreeControl} from '@angular/cdk/tree';
 import {WorkingAreaComponent} from '../../working-area/working-area.component'
 import {CanvasShareDataService,GameMode} from '../../canvas-share-data.service' //引入服务
+import {CacheTokenService} from '../../http-interceptors/cache-token.service'
 import Viewer from 'viewerjs';
 import { saveOneDialog } from './save';
 @Component({
@@ -19,7 +20,7 @@ export class CollectionToolsComponent implements OnInit {
 
   @ViewChild('canvas',{static: true}) canvas:WorkingAreaComponent; //父组件中获得子组件的引用
 
-  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService) { }
+  constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService,public token: CacheTokenService) { }
   // tree配置
   private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
     return {
@@ -479,10 +480,6 @@ export class CollectionToolsComponent implements OnInit {
 
   ngOnInit(): void {
 
-    this.getAllLibrary()
-    this.getAllBuildings()
-    this.getAllFirePlan()
-
     let that = this
     window.setTimeout(()=>{
       document.getElementById("functionalDomainContent").oncontextmenu = function (event) {

src/app/ui/dangerous/dangerous.component.html

@@ -0,0 +1 @@
+<p>dangerous works!</p>

src/app/ui/dangerous/dangerous.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FooterComponent } from './footer.component';
+import { DangerousComponent } from './dangerous.component';
 
-describe('FooterComponent', () => {
+describe('DangerousComponent', () => {
-  let component: FooterComponent;
+  let component: DangerousComponent;
-  let fixture: ComponentFixture<FooterComponent>;
+  let fixture: ComponentFixture<DangerousComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FooterComponent ]
+      declarations: [ DangerousComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FooterComponent);
+    fixture = TestBed.createComponent(DangerousComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/ui/dangerous/dangerous.component.ts

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

src/app/ui/disposal-node/disposal-node.component.html

@@ -0,0 +1 @@
+<p>disposal-node works!</p>

src/app/ui/disposal-node/disposal-node.component.spec.ts

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

src/app/ui/disposal-node/disposal-node.component.ts

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

src/app/ui/footer/footer.component.html

@@ -1,6 +0,0 @@
-<mat-toolbar class="footer" color="primary">
-    <div>
-        <span>Copyright 2020. All Rights Reserved By Anxin</span>
-    </div>
-</mat-toolbar>
-    

src/app/ui/footer/footer.component.scss

@@ -1,15 +0,0 @@
-
-.footer{
-    position: fixed;
-    bottom: 0;
-    height: 46px;
-    width: 100%;
-    z-index: 100;
-    span{
-        font-size: 16px;
-        color: white;
-        position: absolute;
-        right: 80px;
-        top: 8px;
-    }
-}

src/app/ui/footer/footer.component.ts

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

src/app/ui/plan-assistance/plan-assistance.component.html

@@ -0,0 +1 @@
+<p>plan-assistance works!</p>

src/app/ui/plan-assistance/plan-assistance.component.spec.ts

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

src/app/ui/plan-assistance/plan-assistance.component.ts

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

src/app/ui/real-cases/real-cases.component.html

@@ -0,0 +1 @@
+<p>real-cases works!</p>

src/app/ui/real-cases/real-cases.component.spec.ts

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

src/app/ui/real-cases/real-cases.component.ts

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

src/app/ui/similar-plans/similar-plans.component.html

@@ -0,0 +1 @@
+<p>similar-plans works!</p>

src/app/ui/similar-plans/similar-plans.component.spec.ts

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

src/app/ui/similar-plans/similar-plans.component.ts

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

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

@@ -1,17 +1,24 @@
 import { Routes, RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { UiComponent } from './ui.component';
-import { PersonaldataComponent } from '../pages/personaldata/personaldata.component';
 import { CollectionToolsComponent } from './collection-tools/collection-tools.component';
 import { planComponent } from './plan/collection-tools.component';
+import { DisposalNodeComponent } from './disposal-node/disposal-node.component';
+import { DangerousComponent } from './dangerous/dangerous.component';
+import { PlanAssistanceComponent } from './plan-assistance/plan-assistance.component';
+import { RealCasesComponent } from './real-cases/real-cases.component';
+import { SimilarPlansComponent } from './similar-plans/similar-plans.component';
 
 
 
 const routes: Routes = [
-    { path: '', component: UiComponent},
-    { path: 'person', component:PersonaldataComponent },
     { path: 'collectionTools', component:CollectionToolsComponent },
-    { path: 'plan', component:planComponent }
+    { path: 'plan', component:planComponent },
+    { path: 'collectionTools', component:CollectionToolsComponent},
+    { path: 'dangerous', component:DangerousComponent},
+    { path: 'disposalNode', component:DisposalNodeComponent},
+    { path: 'planAssistance', component:PlanAssistanceComponent},
+    { path: 'realCases', component:RealCasesComponent},
+    { path: 'similarPlans', component:SimilarPlansComponent},
 ];
 
 @NgModule({

src/app/ui/ui.component.html

@@ -1 +1 @@
-<p>ui works!</p>
+

src/app/ui/ui.module.ts

@@ -47,7 +47,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { PersonaldataComponent } from '../pages/personaldata/personaldata.component';
-import { FooterComponent } from './footer/footer.component';
 import { ChangepasswordComponent } from './changepassword/changepassword.component';
 import { IsnoPipe } from '../pipes/boolean.pipe';
 import {ConfirmpswDirective} from './changepassword/equal-validator.directive'
@@ -58,8 +57,15 @@ 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 { planComponent } from './plan/collection-tools.component';
+import { DisposalNodeComponent } from './disposal-node/disposal-node.component';
+import { DangerousComponent } from './dangerous/dangerous.component';
+import { SimilarPlansComponent } from './similar-plans/similar-plans.component';
+import { RealCasesComponent } from './real-cases/real-cases.component';
+import { PlanAssistanceComponent } from './plan-assistance/plan-assistance.component';
+
+
 @NgModule({
-  declarations: [UiComponent,PersonaldataComponent, FooterComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent,planComponent],
+  declarations: [UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe, CollectionToolsComponent,WorkingAreaComponent,CreateBuilding,EditBuilding,leftFunctionalDomainComponent,editPlaneFigureComponent,ViewDetails,saveOneDialog,saveTwoDialog,addDisposalNodeComponent,editDisposalNodeComponent, DisposalNodeComponent, DangerousComponent, SimilarPlansComponent, RealCasesComponent, PlanAssistanceComponent,planComponent],
 
   imports: [
     CommonModule,
@@ -114,7 +120,6 @@ import { planComponent } from './plan/collection-tools.component';
 
 
   exports:[
-    FooterComponent,
     CollectionToolsComponent
   ]
 })

src/app/working-area/working-area.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, ElementRef, ViewChild, AfterViewInit,Input } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core';
 import * as PIXI from 'pixi.js';
 import { EventEmitter } from 'events';
 import { EventManager } from '@angular/platform-browser';
 import { OutlineFilter } from 'pixi-filters';
 import { CanvasShareDataService, GameMode } from '../canvas-share-data.service';
+import {CacheTokenService} from '../http-interceptors/cache-token.service' //引入自动登录 获取token服务
 import * as ObjectID from 'bson-objectid';
 
 
@@ -15,15 +16,16 @@ import * as ObjectID from 'bson-objectid';
 
 export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit {
 
-  constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) {
+  constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService, public token: CacheTokenService) {
     super();
   }
 
   @ViewChild('content')
   content: ElementRef;
-  //父组件
+  /**
-  @Input( ) init:any;
+   * 父组件
-  //父组件
+   */
+  @Input( ) init: any;
   /**
    * pixijs 程序
    */
@@ -84,7 +86,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 拷贝素材数据
    */
   public copyData: any[] = [];
-
+  /**
+   * 确认绘制按钮
+   */
   private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.jpg');
   /**
    * 框选工具图形
@@ -98,9 +102,33 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 最终鼠标位置
    */
   private finalScreenMousePos: PIXI.Point = new PIXI.Point();
-  // 根据ID 找到图标
+  /**
+   * 允许编辑
+   */
+  public allowEdit = false;
 
   // 根据ID 找到数据
+
+  //是否登录
+  isLogin () {
+    let token = sessionStorage.getItem('token') // 判断 是否登录状态
+    if (token) {
+      this.init.getAllLibrary()
+      this.init.getAllBuildings()
+      this.init.getAllFirePlan()
+      this.init.getSitePlan() //调用父组件 初始化方法
+    } else {
+      this.token.login().then(res=>{
+        this.init.params.companyId = sessionStorage.getItem('companyId')
+        this.init.getAllLibrary()
+        this.init.getAllBuildings()
+        this.init.getAllFirePlan()
+        this.init.getSitePlan() //调用父组件 初始化方法
+      })
+    }
+  }
+  //是否登录
+
   ngOnInit(): void {
     this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
       if (event.keyCode === 17) {
@@ -140,6 +168,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     });
     setTimeout(() => {
       this.createCanvas();
+      this.loadDemoScene();
     }, 0);
   }
 
@@ -199,7 +228,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       backgroundColor: 0xE9FAFF
     });
     this.content.nativeElement.appendChild(this.app.view);
-    this.init.getSitePlan() //调用父组件 初始化方法
+    this.isLogin()
 
     this.createBackgroundImage();
     // this.createPreviewSinglePointIcon();
@@ -346,6 +375,41 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       }
     });
   }
+  /**
+   * 加载测试界面
+   */
+  public loadDemoScene() {
+    this.backgroundImage.texture = PIXI.Texture.from('./assets/images/demo.jpg');
+    setTimeout(() => {
+      const assetData = {
+        TemplateId: null,
+        FloorId: null,
+        Angle: 0,
+        Color: 0,
+        Enabled: true,
+        FillMode: 0,
+        FireElementId: 0,
+        FixedSize: true,
+        Height: 32,
+        Width: 32,
+        Id: ObjectID.default.generate(),
+        ImageUrl: './assets/images/泡沫消防车.png',
+        InteractiveMode: 0,
+        MultiPoint: null,
+        Point: new PIXI.Point(5295 - (this.backgroundImage.texture.width / 2), 4067 - (this.backgroundImage.texture.height / 2)),
+        Name: '',
+        PropertyInfos: null,
+        Border: null,
+        DrawMode: null,
+        Thickness: 0,
+        IsFromBuilding: false,
+        GameMode: 0
+      };
+      const single = new SinglePointIcon(assetData, this);
+    }, 100);
+
+    // this.backgroundImage.anchor.set(0);
+  }
   /**
    *
    * @param id 图标ID
@@ -905,7 +969,7 @@ export class SinglePointIcon extends PIXI.Container {
 
   private text = new PIXI.Text(this.assetData.Name
     + '\r\n'
-    + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+    + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
   private image = PIXI.Sprite.from(this.assetData.ImageUrl);
   constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
     super();
@@ -925,38 +989,36 @@ export class SinglePointIcon extends PIXI.Container {
     this.image.anchor.set(0.5);
     this.image.interactive = true;
     this.image
-     .on('mousedown', event => {
+      .on('mousedown', event => {
-       event.stopPropagation();
+        event.stopPropagation();
-       console.log(this.assetData);
+        this.workingArea.selection.selectOne(this);
-       event.currentTarget.parent.data = event.data;
+        if (this.workingArea.allowEdit) {
-       event.currentTarget.parent.alpha = 0.5;
+          event.currentTarget.parent.data = event.data;
-       event.currentTarget.parent.dragging = true;
+          event.currentTarget.parent.alpha = 0.5;
-
+          event.currentTarget.parent.dragging = true;
-       this.workingArea.selection.selectOne(this);
+        }
      })
      .on('mouseup', event => {
-       event.currentTarget.parent.alpha = 1;
+       if (event.currentTarget.parent.dragging) {
-       event.currentTarget.parent.dragging = false;
+         event.currentTarget.parent.alpha = 1;
-       event.currentTarget.parent.data = null;
+         event.currentTarget.parent.dragging = false;
+         event.currentTarget.parent.data = null;
+       }
      })
-     .on('mouseupoutside', event => {
+      .on('mouseupoutside', event => {
-       event.currentTarget.parent.alpha = 1;
+        if (event.currentTarget.parent.dragging) {
-       event.currentTarget.parent.dragging = false;
+          event.currentTarget.parent.alpha = 1;
-       event.currentTarget.parent.data = null;
+          event.currentTarget.parent.dragging = false;
+          event.currentTarget.parent.data = null;
+        }
      })
      .on('mousemove', event => {
        if (event.currentTarget.parent.dragging) {
          const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
          event.currentTarget.parent.x = newPosition.x;
          event.currentTarget.parent.y = newPosition.y;
-
-        //  this.text.x = newPosition.x;
-        //  this.text.y = newPosition.y - 32;
-
          this.assetData.Point = new PIXI.Point(this.x, this.y);
          this.workingArea.canvasData.isChange = true;
-         // console.log(this.workingArea.canvasData.originaleveryStoreyData);
-         // console.log(this.workingArea.canvasData.originaleveryStoreyData.data[this.assetData.Id].Point);
        }
      })
      .on('rightclick', event => {
@@ -993,7 +1055,7 @@ export class SinglePointIcon extends PIXI.Container {
     this.image.angle = this.assetData.Angle;
     this.text.text = this.assetData.Name
       + '\r\n'
-      + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+      + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
     this.text.x = this.image.x;
     this.text.y = this.image.y - this.image.height / 2;
   }
@@ -1024,7 +1086,7 @@ export class MultipointIcon extends PIXI.Container {
 
   private text = new PIXI.Text(this.assetData.Name
     + '\r\n'
-    + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+    + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
   /**
    *
    * @param texture 图片素材
@@ -1079,19 +1141,25 @@ export class MultipointIcon extends PIXI.Container {
       item.interactive = true;
       item.on('mousedown', event => {
         event.stopPropagation();
-        event.currentTarget.data = event.data;
+        if (this.workingArea.allowEdit) {
-        event.currentTarget.alpha = 0.5;
+          event.currentTarget.data = event.data;
-        event.currentTarget.dragging = true;
+          event.currentTarget.alpha = 0.5;
+          event.currentTarget.dragging = true;
+        }
       })
         .on('mouseup', event => {
-          event.currentTarget.alpha = 1;
+          if (event.currentTarget.dragging) {
-          event.currentTarget.dragging = false;
+            event.currentTarget.alpha = 1;
-          event.currentTarget.data = null;
+            event.currentTarget.dragging = false;
+            event.currentTarget.data = null;
+          }
         })
         .on('mouseupoutside', event => {
-          event.currentTarget.alpha = 1;
+          if (event.currentTarget.dragging) {
-          event.currentTarget.dragging = false;
+            event.currentTarget.alpha = 1;
-          event.currentTarget.data = null;
+            event.currentTarget.dragging = false;
+            event.currentTarget.data = null;
+          }
         })
         .on('mousemove', event => {
           if (event.currentTarget.dragging) {
@@ -1169,25 +1237,30 @@ export class MultipointIcon extends PIXI.Container {
       item.interactive = true;
       item.on('mousedown', event => {
         event.stopPropagation();
-        event.currentTarget.parent.data = event.data;
-        event.currentTarget.parent.alpha = 0.5;
-        event.currentTarget.parent.dragging = true;
-
-        event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
-        event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
-        event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
-
         this.workingArea.selection.selectOne(this);
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.parent.data = event.data;
+          event.currentTarget.parent.alpha = 0.5;
+          event.currentTarget.parent.dragging = true;
+
+          event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
+          event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
+          event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
+        }
       })
         .on('mouseup', event => {
-          event.currentTarget.parent.alpha = 1;
+          if (event.currentTarget.parent.dragging) {
-          event.currentTarget.parent.dragging = false;
+            event.currentTarget.parent.alpha = 1;
-          event.currentTarget.parent.data = null;
+            event.currentTarget.parent.dragging = false;
+            event.currentTarget.parent.data = null;
+          }
         })
         .on('mouseupoutside', event => {
-          event.currentTarget.parent.alpha = 1;
+          if (event.currentTarget.parent.dragging) {
-          event.currentTarget.parent.dragging = false;
+            event.currentTarget.parent.alpha = 1;
-          event.currentTarget.parent.data = null;
+            event.currentTarget.parent.dragging = false;
+            event.currentTarget.parent.data = null;
+          }
         })
         .on('mousemove', event => {
           if (event.currentTarget.parent.dragging) {
@@ -1197,11 +1270,10 @@ export class MultipointIcon extends PIXI.Container {
 
             this.assetData.Point = new PIXI.Point(this.x, this.y);
             this.workingArea.canvasData.isChange = true;
-            // console.log(this.workingArea.canvasData.originaleveryStoreyData.data[this.assetData.Id].Point);
           }
         })
         .on('rightclick', event => {
-          // this.workingArea.selection.deselectAll();
+
         });
     });
   }
@@ -1304,22 +1376,25 @@ export class PolygonIcon extends PIXI.Container {
       item.zIndex = 1;
       item.on('mousedown', event => {
         event.stopPropagation();
-        event.currentTarget.data = event.data;
+        if (this.workingArea.allowEdit) {
-        event.currentTarget.alpha = 0.5;
+          event.currentTarget.data = event.data;
-        event.currentTarget.dragging = true;
+          event.currentTarget.alpha = 0.5;
-
+          event.currentTarget.dragging = true;
-        // console.log(item.zIndex);
+        }
-        // console.log(this.polygonLineGraphics.zIndex);
       })
         .on('mouseup', event => {
-          event.currentTarget.alpha = 1;
+          if (event.currentTarget.dragging) {
-          event.currentTarget.dragging = false;
+            event.currentTarget.alpha = 1;
-          event.currentTarget.data = null;
+            event.currentTarget.dragging = false;
+            event.currentTarget.data = null;
+          }
         })
         .on('mouseupoutside', event => {
-          event.currentTarget.alpha = 1;
+          if (event.currentTarget.dragging) {
-          event.currentTarget.dragging = false;
+            event.currentTarget.alpha = 1;
-          event.currentTarget.data = null;
+            event.currentTarget.dragging = false;
+            event.currentTarget.data = null;
+          }
         })
         .on('mousemove', event => {
           if (event.currentTarget.dragging) {
@@ -1349,41 +1424,47 @@ export class PolygonIcon extends PIXI.Container {
     });
     // 添加选中事件
     this.polygonGraphics.interactive = true;
-    this.polygonGraphics.on('mousedown', event => {
+    this.polygonGraphics
+      .on('mousedown', event => {
         event.stopPropagation();
-        event.currentTarget.parent.data = event.data;
-        event.currentTarget.parent.alpha = 0.5;
-        event.currentTarget.parent.dragging = true;
-
-        event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
-        event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
-        event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
-
         this.workingArea.selection.selectOne(this);
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.parent.data = event.data;
+          event.currentTarget.parent.alpha = 0.5;
+          event.currentTarget.parent.dragging = true;
+
+          event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent);
+          event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x;
+          event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y;
+        }
       })
-        .on('mouseup', event => {
+      .on('mouseup', event => {
+        if (event.currentTarget.parent.dragging) {
           event.currentTarget.parent.alpha = 1;
           event.currentTarget.parent.dragging = false;
           event.currentTarget.parent.data = null;
-        })
+        }
-        .on('mouseupoutside', event => {
+      })
+      .on('mouseupoutside', event => {
+        if (event.currentTarget.parent.dragging) {
           event.currentTarget.parent.alpha = 1;
           event.currentTarget.parent.dragging = false;
           event.currentTarget.parent.data = null;
-        })
+        }
-        .on('mousemove', event => {
+      })
-          if (event.currentTarget.parent.dragging) {
+      .on('mousemove', event => {
-            const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
+        if (event.currentTarget.parent.dragging) {
-            event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
+          const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
-            event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
+          event.currentTarget.parent.x = newPosition.x - event.currentTarget.parent.dragPoint.x;
+          event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y;
 
-            this.assetData.Point = new PIXI.Point(this.x, this.y);
+          this.assetData.Point = new PIXI.Point(this.x, this.y);
-            this.workingArea.canvasData.isChange = true;
+          this.workingArea.canvasData.isChange = true;
-          }
+        }
-        })
+      })
-        .on('rightclick', event => {
+      .on('rightclick', event => {
-          // this.workingArea.selection.deselectAll();
+        // this.workingArea.selection.deselectAll();
-        });
+      });
     // 缩放
     this.workingArea.on('backgroundScale', data => {
       const scale = 1 / data;
@@ -1602,3 +1683,117 @@ export class PropertyInfo {
    */
   public PropertyValue: string;
 }
+/**
+ * demo图标
+ */
+export class DemoIcon extends PIXI.Container {
+  style = new PIXI.TextStyle({
+    fontFamily: 'Arial',
+    fontSize: 18,
+    fontStyle: 'normal',
+    fontWeight: 'bold',
+    fill: ['#000000'],
+    stroke: '#ffffff',
+    strokeThickness: 3,
+    dropShadow: true,
+    dropShadowColor: '#000000',
+    dropShadowBlur: 3,
+    dropShadowAngle: Math.PI / 6,
+    dropShadowDistance: 1,
+    wordWrap: false,
+    wordWrapWidth: 100,
+  });
+
+  private text = new PIXI.Text(this.assetData.Name
+    + '\r\n'
+    + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+  private image = PIXI.Sprite.from(this.assetData.ImageUrl);
+  constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+    super();
+    this.workingArea.backgroundImage.addChild(this);
+    this.x = this.assetData.Point.x;
+    this.y = this.assetData.Point.y;
+    this.name = this.assetData.Id;
+
+    this.image.angle = this.assetData.Angle;
+
+    this.image.x = 0;
+    this.image.y = 0;
+    this.image.width = this.assetData.Width;
+    this.image.height = this.assetData.Height;
+
+    this.image.alpha = 1;
+    this.image.anchor.set(0.5);
+    this.image.interactive = true;
+    this.image
+      .on('mousedown', event => {
+        event.stopPropagation();
+        this.workingArea.selection.selectOne(this);
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.parent.data = event.data;
+          event.currentTarget.parent.alpha = 0.5;
+          event.currentTarget.parent.dragging = true;
+        }
+      })
+      .on('mouseup', event => {
+        if (event.currentTarget.parent.dragging) {
+          event.currentTarget.parent.alpha = 1;
+          event.currentTarget.parent.dragging = false;
+          event.currentTarget.parent.data = null;
+        }
+      })
+      .on('mouseupoutside', event => {
+        if (event.currentTarget.parent.dragging) {
+          event.currentTarget.parent.alpha = 1;
+          event.currentTarget.parent.dragging = false;
+          event.currentTarget.parent.data = null;
+        }
+      })
+      .on('mousemove', event => {
+        if (event.currentTarget.parent.dragging) {
+          const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
+          event.currentTarget.parent.x = newPosition.x;
+          event.currentTarget.parent.y = newPosition.y;
+          this.assetData.Point = new PIXI.Point(this.x, this.y);
+          this.workingArea.canvasData.isChange = true;
+        }
+      })
+      .on('rightclick', event => {
+
+      })
+      .on('mouseover', event => {
+
+      });
+
+    this.workingArea.on('backgroundScale', data => {
+      if (this.assetData.FixedSize) {
+        const scale = 1 / data;
+        this.scale.set(scale);
+      }
+    });
+
+    this.text.x = this.image.x;
+    this.text.y = this.image.y - this.image.height / 2;
+    this.text.anchor.set(0.5, 1);
+
+    this.addChild(this.text);
+    this.addChild(this.image);
+  }
+  // 设置名称
+  public setNameVisible(value: boolean, mode: GameMode) {
+    if (this.assetData.GameMode === mode) {
+      this.text.visible = value;
+    }
+  }
+  // 刷新
+  public refresh() {
+    this.image.width = this.assetData.Width;
+    this.image.height = this.assetData.Height;
+    this.image.angle = this.assetData.Angle;
+    this.text.text = this.assetData.Name
+      + '\r\n'
+      + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+    this.text.x = this.image.x;
+    this.text.y = this.image.y - this.image.height / 2;
+  }
+}

src/index.html

@@ -2,13 +2,11 @@
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8">
-  <title>数字化预案编制管理平台</title>
+  <title>实战指挥预案</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href='/assets/icon/material-icons.css' rel="stylesheet">
-  <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
-  <!-- <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/> -->
 </head>
 <body>
   <app-root></app-root>