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

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

@@ -114,6 +114,9 @@
   </div>
   <!-- 头部操作栏 -->
   <div class="headerOperate">
+    <div class="logo">
+
+    </div>
     <div class="bigeditdeletebtn" (click)="checkedBuilding({name:'总平面图'},-1)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
       <span>总平面图</span>
     </div>
@@ -147,7 +150,6 @@
     <div class='functionalDomainContent' id="functionalDomainContent">
 
       
-      <!-- H5Canvas -->
       <div id="leftDiv" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true,'scenarioAssignment': !pattern}" style="user-select: none;">
         
         <!-- 平面图 -->
@@ -246,7 +248,7 @@
             </label>
           </div> -->
           <div class="planarGraphHeader">
-            <label class="overflowText">处置预案</label>
+            <!-- <label class="overflowText">处置预案</label> -->
           </div>
           <div [hidden]="!toggleHandlePlans">
 
@@ -289,19 +291,25 @@
       <!-- H5Canvas -->
       <div class="canvas" style="position: relative;" >
         <!-- 右侧楼层区域 -->
-        <!-- <div class="showRightStorey" *ngIf="!rightIsShow" title="打开楼层/区域"><mat-icon (click)='openRight()'>keyboard_arrow_left</mat-icon></div> -->
-        <div class="rightStorey" [ngClass]="{closeRight: !rightIsShow,openRight: rightIsShow}" cdkDragBoundary=".canvas" cdkDrag >
-            <div style="flex: 10%;" cdkDragHandle>
-                <!-- <label><mat-icon (click)='closeRight()' title="关闭楼层/区域">keyboard_arrow_right</mat-icon> 楼层/区域</label> -->
+        <div class="topStorey">
+            <!-- <div style="flex: 10%;">
                 <label>楼层/区域</label>
             </div>
             <div style="flex: 90%;border-top: 1px solid #30bbec;padding: 1px 0;">
                 <div *ngFor="let item of sitePlanData;let key = index" style="font-size: 14px;width: 100%;height: 35px;line-height: 35px;background-color: rgba(7,89,155,0.7);"><label>{{item.name}}</label></div>
+            </div> -->
+            <div class="titlename">
+
+            </div>
+            <div class="name">
+              <div *ngFor="let item of sitePlanData;let key = index"><label>{{item.name}}</label></div>
             </div>
         </div>
-        <!-- 右侧楼层区域 -->
 
-        <app-working-area #canvas [init]='this'></app-working-area>
+        <div class="canvasBox">
+          <app-working-area #canvas [init]='this'></app-working-area>
+        </div>
+        
 
         <!-- 下方 -->
         <div class="openbottombtn" *ngIf="!bottomIsShow" (click)="openedbottom()"><mat-icon> keyboard_arrow_up </mat-icon></div>
@@ -332,6 +340,9 @@
           <span (click)="rightSwitch(2)" [ngClass]="{selectedTitle: !isProperty}">
             消防要素
           </span>
+          <span class="segmentation">
+            |
+          </span>
         </div>
         <div style="width: 100%;height: 100%;">
            <!-- 属性 -->
@@ -429,7 +440,7 @@
                     <p style="width: 40%;display: inline-block;">{{item.PropertyName}}</p>
                     <span style="width: 26%;text-align:right;font-size: 13px;">{{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}}</span>
                
-                    <div style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 140px;margin: 6px auto;" class="swiper-container">
+                    <div style="position: relative;;width: 85%;border:1px solid rgb(208, 211, 214);height: 140px;margin: 6px auto;" class="swiper-container">
                       <div id="viewerjs" class="swiper-wrapper" [ngClass]="{'noImgCss': imagesArr.length == 0}">
                         <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"><img [src]="img.PropertyValue + '?x-oss-process=image/resize,m_fixed,h_140,w_140'" alt="" [attr.data-original]="img.PropertyValue"></div>
                       </div>
@@ -492,17 +503,21 @@
               <!-- 消防列表树写在这里 -->
               <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
                 
-                <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" class="treeNode">
+                <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" class="treeNode">
                   <button mat-icon-button disabled></button>
                   <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
                     {{node.name}}      
                   </span> 
                   <span  *ngIf="node.isTemplate">({{node.children.length}})</span>
-                  <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
+                  <!-- <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span> -->
+                  <span class="isLookCss" (click)="clickLookItem(node)">
+                    <img *ngIf="node.isLook" src="../../../assets/images/show.png" alt="">
+                    <img *ngIf="!node.isLook" src="../../../assets/images/hide.png" alt="">
+                  </span>
                 </mat-tree-node>
               
               
-                <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"class="treeNode" >
+                <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"class="treeNode" >
                   <button mat-icon-button 
                           matTreeNodeToggle
                           [attr.aria-label]="'toggle ' + node.name">
@@ -514,7 +529,10 @@
                     {{node.name}}      
                   </span>   
                   <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
-                  <span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span>
+                  <span class="isLookCss" (click)="clickLookItem(node)">
+                    <img *ngIf="node.isLook" src="../../../assets/images/show.png" alt="">
+                    <img *ngIf="!node.isLook" src="../../../assets/images/hide.png" alt="">
+                  </span>
                 </mat-tree-node>
               
               </mat-tree>

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

@@ -10,10 +10,10 @@
   padding: 1px;
   display: flex;
   flex-direction: column;
-  background-color: rgba(11,75,118,0.9);
+  background-color: #0A264B;
   .buildingbtnchecked{
     color: white;
-    background-image: url("../../../assets/images/标签选中.png")!important;
+    background-image: url("../../../assets/images/selected.png")!important;
   }
 }
 
@@ -95,6 +95,7 @@
 //   }
 // }
 .headerOperate {
+  min-height: 55px;
   position: relative;
   span{
     font-size: 18px;
@@ -102,29 +103,36 @@
   flex: 2%;
   display: flex;
   align-items:center;
-  min-height: 40px;
   box-sizing: border-box;
-  margin: 3px 0;
-
+  background: url("../../../assets/images/top.png");
+  background-size: 100% 100%;
+  .logo{
+    width: 16px;
+    height: 100%;
+    // background: url("../../../assets/images/智能实战指挥平台.png") no-repeat center;
+  }
   .bigeditdeletebtn{
     margin-right: 12px;
-    height: 80%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     // align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/
     justify-content: center;
     user-select: none;
-    background-image: url("../../../assets/images/标签正常.png") ;
     background-size:100% 100%;
     color: white;
     span{
       padding: 0 13px;
       padding-right: 18px;
+      font-size: 20px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #FFFFFF;
     }
   }
   .bigeditdeletebtn:hover{
     cursor: pointer; 
-    background-image: url("../../../assets/images/标签经过.png") ;
+    // background-image: url("../../../assets/images/标签经过.png") ;
   }
   .bigTalkBox{
     user-select: none;
@@ -204,6 +212,7 @@
 }
 .functionalDomain {
   flex: 98%;
+  width: 100%;
   overflow: hidden;
   .functionalDomainContent {
     display: flex;
@@ -218,9 +227,12 @@
     flex-direction: column;
     margin-left: 0px;
     transition: margin-left 0.5s;
-    border: 1px solid #30bbec;
     left: 0;
     z-index: 111;
+    background: url('../../../assets/images/leftlist.png');
+    background-size: 100% 100%;
+    margin: 10px;
+    min-width: 200px;
     .leftDragDiv{
       position: absolute;
       right: 0;
@@ -231,127 +243,124 @@
     }
   }
   .canvas{
+    background: url('../../../assets/images/frame.png');
+    background-size: 100% 100%;
     flex: 5;
+    margin: 10px 0;
+    display: flex;
+    flex-direction: column;
     .closebottombtn{
       width: 30px;  
       vertical-align: sub;
     }
+    //上面 楼层UI
+    .topStorey {
+      flex: 6%;
+      width: 100%;
+      height: 48px;
+      line-height: 48px;
+      color: #fff;
+      div {
+        text-align: center; 
+        float: left;
+      }
+      .titlename{
+        width: 150px;
+        height: 48px;
+        background: url('../../../assets/images/楼层区域.png') no-repeat center;
+      }
+      .name{ 
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+      }
+    }
+    .canvasBox{
+      flex: 94%;
+      padding: 20px;
+    }
     .openbottombtn{
       width: 30px;
       color: white;
       text-align: center;
       height: 30px; 
       line-height: 30px;
-      vertical-align: sub;
       position: absolute;
-      left: 5px;
-      bottom: 5px;
-      background-color:rgba(2, 44, 73, 0.9);
+      left: 0;
+      bottom: 0px;
+      background: url('../../../assets/images/形状4.png');
+      background-size: 100% 100%;
     }
     //打开时
     .openBottom{
-      margin-bottom: 0;
-      transition: margin-bottom 1s;
+      height: 150px;
+      transition: height 1s;
+      
     }
     //关闭
     .closeBottom{
-      margin-bottom: -300px!important;
-      transition: margin-bottom 1s;
-    }
-    //右侧 楼层UI
-    .rightStorey {
-      width: 100px;
-      height: 250px;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      margin-top: -200px;
-      z-index: 9999;
-      display: flex;
-      flex-direction: column;
-      background-color:rgba(2, 44, 73, 0.9);
-      color: #fff;
-      font-weight: 300;
-      >div {text-align: center; line-height: 25px;}
-    }
-    .showRightStorey {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      margin-top: -13px;
-      z-index: 9999;
-      width: 26px;
-      height: 26px;
-      line-height: 26px;
-      text-align: center;
-      background-color:rgba(2, 44, 73, 0.9);
-      color: #fff;
-    }
-    //打开关闭右侧 楼层
-    .openRight {
-      margin-right: 0px;
-      transition: margin-right 0.5s;
-    }
-    .closeRight {
-      margin-right: -300px;
-      transition: margin-right 0.5s;
+      height: 0px!important;
+      transition: height 1s;
     }
+    
     .canvasbottomCss{
-      margin-bottom: 0;
-      transition: margin-bottom 0.5s;
+      overflow: hidden;
+      transition: height 0.5s;
       position: absolute;
       bottom: 0;
       width: 100%;
-      height: 200px;
+      height: 150px;
       display: flex;
       flex-direction: column;
       .title{
-        border-bottom: 1px solid #30bbec;
         flex: 1;
         div{
           cursor: pointer;
-          background-color: rgba(2, 44, 73, 0.9);
+          background: url('../../../assets/images/形状4.png');
+          background-size: 100% 100%;
           width: 120px;
           height: 30px;
-          line-height: 35px;
+          line-height: 30px;
           text-align: center;
           margin-right: 10px;
           color: white;
-          font-style: italic;
           font-size:18px;
-          
         }
         .closebottombtn{
           width: 30px;  
           vertical-align: sub;
+          background: url('../../../assets/images/形状6.png');
+          background-size: 100% 100%;
         }
         .detailsAndattentBtn{
-          background-color: #ed863b;
+          background: url('../../../assets/images/形状5.png');
+          background-size: 100% 100%;
         }
       }
       .body{
         flex: 10;
-        background-color:rgba(2, 44, 73, 0.9);
+        background-color:rgba(0,19,43,0.7);
+        border: 1px solid #84B9FF;
         div{
-          color: #d0e0f4;
+          color: white;
           font-size: 16px;
           letter-spacing:5px;
-          margin: 5px 0 0 8px;
+          margin: 12px 15px;
         }
       }
      
     }
   }
   .functionalDomainRight {
+    overflow-x: hidden;
     color: white;
-    // background-color: #113e5e;
-    z-index: 1001;
-    margin-right: 0px;
+    margin: 10px;
     transition:  margin-right 0.5s;
-    border: 1px solid #30bbec;
-    width: 235px;
-    right: 0;
     flex: 1;
+    background: url('../../../assets/images/rightlist.png');
+    background-size: 100% 100%;
+    min-width: 200px;
   }
     //右边导航栏显示隐藏
   .togglePanel2 {
@@ -369,40 +378,66 @@
 //右边操作栏
 .title{
   width: 100%;
-  height: 40px;
-  line-height: 40px;
-  border-bottom:2px solid #accbf2;
+  height: 48px;
+  line-height: 48px;
   display: flex;
   align-content: center;
+  position: relative;
+  .segmentation{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0 auto;
+    color: #84B9FF;
+    font-size: 18px;
+    font-weight: 100;
+    width: 0px;
+  }
   span{
     display: inline-block;
     flex: 1;
     text-align: center;
+    font-size: 18px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #FFFFFF;
+    opacity: 0.6;
+  }
+  .selectedTitle{
+    font-size: 18px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    background: linear-gradient(0deg, #82B0E0 0%, #FFFFFF 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    opacity: 1;
   }
   span:hover{
     cursor: pointer;
   }
 }
-.selectedTitle{
-  background: #0c2d44;
-}
+
 
 //右侧属性
 .property{
   display: flex;
   flex-flow: column;
   .siteproperty{
+    margin-top: 10px;
     height: 100%;
     overflow-y: auto;
     p{
-      color: #d0e0f4;
-      padding-left: 7px;
+      color: #fff;
+      text-indent:20px;
       letter-spacing:3px;
-      margin: 5px 0;
+      margin:8px 0;
     }
     .siteproperty_size{
       border-bottom:1px solid #d0e0f4;
-      width: 93%;
+      width: 85%;
       margin: 0 auto;
       min-height: 21px;
       color: #2399f1;
@@ -423,16 +458,15 @@
   .assetsproperty{
     overflow-y: auto;
     height: 100%;
+    margin-top: 10px;
     p{
-
-      color: #d0e0f4;
-      padding-left: 7px;
+      color: #fff;
+      text-indent:20px;
       letter-spacing:3px;
-      margin: 5px 0;
+      margin: 8px 0;
     }
     .siteproperty_size{
-      border-bottom:1px solid #d0e0f4;
-      width: 93%;
+      width:85%;
       margin: 0 auto;
       min-height: 21px;
       color: #2399f1;
@@ -539,8 +573,13 @@
     }
     .isLookCss{
       position: absolute;
-      right: 6px;
+      right: 9px;
+      top: 3px;
       z-index: 1000;
+      img{
+        width: 18px;
+        height: 14px;
+      }
     }
   }
   .mat-tree{
@@ -558,8 +597,7 @@ div:focus {
 
 //没有图片时显示无图片背景图
 .noImgCss{
-  background: url(../../../assets/images/noImg.png) ;
-  background-size: 100% 100%;/*按比例缩放*/
+  background: url(../../../assets/images/pic.png) white no-repeat center;
 }
 .input{
   width: 18px;
@@ -575,12 +613,8 @@ div:focus {
   min-height: 0;
   height: 32px;
   line-height: 32px;
-  font-size: 13px;
   cursor: pointer;
 }
-.treeNode:hover{
-  background-color: #ccebf8;
-}
 .isLookPattern{
   display: none;
 }
@@ -589,7 +623,7 @@ div:focus {
   white-space: nowrap;
   text-overflow: ellipsis;
   display: inline-block;
-  width: 65px;
+  width: 80px;
 }
 
 .bigBox{

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

@@ -86,9 +86,12 @@ export class CollectionToolsComponent implements OnInit {
     setTimeout(() => {
       obj.PropertyInfos.forEach(item => {
         if(item.PropertyType == 4){
-          this.gallery = new Viewer(document.getElementById('viewerjs'),{
-            url: 'data-original'
-          });
+          if(document.getElementById('viewerjs')){
+            this.gallery = new Viewer(document.getElementById('viewerjs'),{
+              url: 'data-original'
+            });
+          }
+          
         }
       })
     }, 0);
@@ -522,6 +525,13 @@ export class CollectionToolsComponent implements OnInit {
  rightSwitch(type){
    if(type == 1){
      this.isProperty = true
+     setTimeout(() => {
+      this.gallery = new Viewer(document.getElementById('viewerjs'),{
+        url: 'data-original'
+      });
+      this.gallery.update()
+     }, 0);
+     
    }else{
      this.isProperty = false
    }
@@ -903,7 +913,7 @@ export class CollectionToolsComponent implements OnInit {
   //创建建筑
   createBuilding(){
     let data = {
-      allBuildings:this.allBuildings,
+      allBuildings :this.allBuildings,
       companyId :this.params.companyId
     }
     let dialogRef = this.dialog.open(CreateBuilding,{data});
@@ -1172,6 +1182,7 @@ export class CollectionToolsComponent implements OnInit {
     for(let key in storeyData.data){ //筛选数据 没有匹配全部放入到   其他   数组
       let noMatch = this.allFireElements.find( every=> every.id===storeyData.data[key].FireElementId )
       if (!noMatch) {
+        storeyData.data[key].isLook = true
         this.allFireElements[this.allFireElements.length-1].children.push(storeyData.data[key])
       }
     }
@@ -1270,6 +1281,7 @@ export class CollectionToolsComponent implements OnInit {
           order: 999,
           parentId: null,
           tag: "INPUT",
+          isLook : true,
           isLookPattern : true
         }
         this.allFireElements.push(other)

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

@@ -7,16 +7,9 @@
 //平面图 素材库 公共样式 头部
 .planarGraphHeader{
   width: 100%;
-  text-align: center;
-  height: 40px;
-  line-height: 40px;
-  min-height: 40px;
-  cursor: pointer;
-  text-align: center;
-  font-style: italic;
-  font-size: 20px;
-  color: white;
-  border-bottom:2px solid #accbf2;
+  height: 48px;
+  min-height: 48px;
+  background: url('../../../assets/images/处置预案.png') no-repeat center;
 }
 //平面图头部字体图标样式
 .hover {
@@ -255,8 +248,8 @@
   background-color: #4DA5FA;
 }
 //选中 处置节点时
-.selectanelPoint {
-  background-color: #0c2d44;
+.selectanelPoint {  
+  background: #4FB5FF;
 }
 
 
@@ -290,8 +283,10 @@
   background-color:transparent;
   .mat-tree-node{
     color: white;
+    margin: 0 3px;
+    font-size: 16px;
   }
-  .mat-tree-node:hover{
-    background-color: #0c2d44;
+  .mat-tree-node:hover{  
+    background: #4FB5FF;
   }
 }

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

@@ -7,7 +7,6 @@ import { CanvasShareDataService, GameMode } from '../canvas-share-data.service';
 import {CacheTokenService} from '../http-interceptors/cache-token.service'; // 引入自动登录 获取token服务
 import * as ObjectID from 'bson-objectid';
 import { Router } from '@angular/router';
-import { isThisSecond } from 'date-fns';
 import { Charm } from './charm';
 
 
@@ -19,7 +18,8 @@ import { Charm } from './charm';
 
 export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit {
 
-  constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService, public token: CacheTokenService, private router: Router, ) {
+  constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService,
+              public token: CacheTokenService, private router: Router) {
     super();
   }
 
@@ -134,6 +134,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public verificationURL = '/plan'; // 验证url地址是否为验证页面
   public verificationURLTwo = '/similarPlans'; // 验证url地址是否为验证页面
   count = 0;
+  clumn = 1;
   isLogin() {
     const token = sessionStorage.getItem('token'); // 判断 是否登录状态
     if (token) {
@@ -1611,7 +1612,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
 
 
     carButton.setParent(this.app.stage);
-    carButton.position.set(25, this.count * 65);
+    if (this.count >= 12) {
+      this.count = 0;
+      this.clumn +=3;
+    }
+    carButton.position.set(this.clumn * 25, this.count * 65);
     this.count++;
   }
   /**