[完善]引入图片查看插件，修改素材icon点击bug

angular.json

@@ -29,7 +29,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/viewerjs/dist/viewer.css"
             ],
             "scripts": [
               "node_modules/echarts/dist/echarts.js",

package.json

@@ -24,6 +24,7 @@
     "@angular/router": "~9.0.0",
     "@types/cesium": "^1.59.5",
     "angular-calendar": "^0.28.2",
+    "bson-objectid": "^1.3.1",
     "cesium": "^1.64.0",
     "e-ngx-cesium": "^6.3.2",
     "echarts": "^4.6.0",
@@ -32,13 +33,12 @@
     "ng2-file-upload": "^1.4.0",
     "ngx-echarts": "^4.2.2",
     "ngx-perfect-scrollbar": "^8.0.0",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.10.0",
-    "viewerjs": "^1.6.2",
-    "swiper": "^5.3.7",
     "pixi-filters": "^3.1.1",
     "pixi.js": "^5.3.2",
-    "bson-objectid": "^1.3.1",
+    "rxjs": "~6.5.4",
+    "swiper": "^5.3.7",
+    "tslib": "^1.10.0",
+    "viewerjs": "^1.9.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {

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

@@ -103,8 +103,9 @@
             <label class="overflowText" style="font-weight: 550;">消防设施</label>
           </div>
           <div [hidden]="!togglePlane">
+
             <!-- 消防列表树 -->
-            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" cdkDropList [cdkDropListData]="dataSource">
+            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
 
               <mat-tree-node   [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" class="treeNode">
                 <button mat-icon-button disabled></button>
@@ -126,7 +127,7 @@
                 <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
                   {{node.name}}      
                 </span>   
-                <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</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>
               </mat-tree-node>
 

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

@@ -1,4 +1,7 @@
 @import './panel.scss';
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
 .content {
   width: 100%;
   height: 100%;

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

@@ -1134,15 +1134,15 @@ export class CollectionToolsComponent implements OnInit {
 
   //处理 tree 数据结构
   handleTreeData (storeyData) {
-
+    //storeyData为当前楼层拥有的消防设施
     this.storeyData = storeyData
     let data = this.allFireElements //所有消防要素模板
     let treeData = [] //tree型 处理完成后的数据
+
     data.forEach(element => {
       element.isTemplate = true //添加模板标识
       element.isLook = true //添加是否可见标识
-      element.name!='其他'? element.children = [] : null
-
+      element.name != '其他' ? element.children = [] : null
       if(storeyData){
         for(let key in storeyData.data){
           storeyData.data[key].isLookPattern = true
@@ -1161,8 +1161,6 @@ export class CollectionToolsComponent implements OnInit {
                 }
               })
             }
-            //
-
             element.children.push(storeyData.data[key])
           }
         }
@@ -1172,7 +1170,9 @@ export class CollectionToolsComponent implements OnInit {
     data.forEach(element => {
       if (!element.parentId) { treeData.push(element) }
     });
+
     this.dataSource.data = treeData
+
     this.treeControl.expandAll()
     
   }
@@ -1203,7 +1203,7 @@ export class CollectionToolsComponent implements OnInit {
     this.canvas.setHighlight(iconHighLightArr)
   }
 
-  //点击数节点的显示隐藏icon
+  //点击树节点的显示隐藏icon
   clickLookItem(node){
 
     //修改真实素材islook属性
@@ -1214,9 +1214,16 @@ export class CollectionToolsComponent implements OnInit {
     }
     
     //所有消防要素模板变化islook值
+    if(node.isTemplate && node.name == "其他"){
+      this.allFireElements.forEach(item=>{
+        if(item.name == "其他"){
+          item.isLook = !item.isLook
+        }
+      })
+    }
     if(node.isTemplate){
       this.allFireElements.forEach(item=>{
-        if(item.id == node.id || item.name == "其他"){
+        if(item.id == node.id){
           item.isLook = !item.isLook
         }
       })
@@ -1270,6 +1277,7 @@ export class CollectionToolsComponent implements OnInit {
       iconVisibleArr.push(node.id)
     }
     this.canvas.setIconVisible(iconVisibleArr,!node.isLook)
+
   }
 
   //计算 可视区域内宽度, 是否缩放背景图