diff --git a/src/app/ui/collection-tools/collection-tools.component.html b/src/app/ui/collection-tools/collection-tools.component.html
index 22fe9b2..47af34f 100644
--- a/src/app/ui/collection-tools/collection-tools.component.html
+++ b/src/app/ui/collection-tools/collection-tools.component.html
@@ -1,6 +1,6 @@
 <div class="content">
   <!-- header头部 -->
-  <div class="header">
+  <div class="header" style="display: none;">
     <button mat-button (click)="toggle()">
       <mat-icon style="vertical-align: middle;">toc</mat-icon>
     </button>
@@ -47,7 +47,7 @@
   </div>
 
   <!-- 头部操作栏 -->
-  <div class="headerOperate">
+  <div class="headerOperate" style="display: none;">
     <button mat-button (click)="checkedBuilding({name:'总平面图'},-1)"
       [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
       <span>总平面图</span>
@@ -112,18 +112,46 @@
       </div>
     </div>
   </div>
-
+ <!-- 头部操作栏 -->
+ <div class="headerOperate">
+  <div class="bigeditdeletebtn" (click)="checkedBuilding({name:'总平面图'},-1)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
+    <span>总平面图</span>
+  </div>
+  <div class="bigeditdeletebtn" *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
+    <span>{{item.name}}</span>
+  </div>
+  <!-- <div class="bigTalkBox" style="position: absolute;right: 26px;">
+    <mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
+    <div class="talkBox" *ngIf="isOpenTalk">
+      <div class="btndiv"> 
+        <div>泵房</div>
+        <div>控制室</div>
+        
+      </div>
+      <div class="bottomDiv">
+        <div>
+          <mat-icon>settings_voice</mat-icon>
+        </div>
+        <div>
+          按住说话
+        </div>
+        <div>
+          <mat-icon>search</mat-icon>
+        </div>
+      </div>
+    </div>
+  </div> -->
+</div>
   <!--功能区 -->
   <div class="functionalDomain">
     <div class='functionalDomainContent' id="functionalDomainContent">
 
-      <!-- H5Canvas -->
-      <app-working-area #canvas [init]='this'></app-working-area>
+      
       <!-- H5Canvas -->
       <div id="leftDiv" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true,'scenarioAssignment': !pattern}" style="user-select: none;">
-        <div class="leftDragDiv"  (mousedown)="leftDivMouseDown($event)"></div>
+        
         <!-- 平面图 -->
-        <div class="planarGraph">
+        <div class="planarGraph" style="display: none;">
           <div class="planarGraphHeader" (click)='togglePlanarGraph()'>
             <mat-icon *ngIf="togglePlane">keyboard_arrow_up</mat-icon>
             <mat-icon *ngIf="!togglePlane">keyboard_arrow_down</mat-icon>
@@ -171,9 +199,10 @@
             </div>
           </div>
         </div>
+        <!-- 平面图 -->
 
         <!-- 素材库 -->
-        <div id="materialBank" *ngIf="isEditPattern" [ngClass]="{'selectEditMode': pattern}">
+        <div id="materialBank" *ngIf="isEditPattern" [ngClass]="{'selectEditMode': pattern}"  style="display: none;">
           <div class="planarGraphHeader" (click)='toggleMaterial()'>
             <mat-icon *ngIf="toggleMaterialBank">keyboard_arrow_up</mat-icon>
             <mat-icon *ngIf="!toggleMaterialBank">keyboard_arrow_down</mat-icon>
@@ -200,6 +229,7 @@
           </div>
         </div>
         <!-- 素材库 -->
+
         <!-- 处置预案 -->
         <div class="handlePlan" *ngIf="!pattern">
           <div class="planarGraphHeader" (click)='toggleHandlePlan()'>
@@ -249,207 +279,213 @@
 
       </div>
 
+      <!-- H5Canvas -->
+      <div class="canvas">
+        <app-working-area #canvas [init]='this'></app-working-area>
+      </div>
+      
+
       <div id="rightDiv" class="functionalDomainRight publicCss " [ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none;">
-        <!-- 右侧div鼠标拖动div -->
-        <div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;" (mousedown)="rightDivMouseDown($event)"></div>
-        <!-- 属性 -->
-        <div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 50%;background-color: white;" cdkDrag cdkDragBoundary=".functionalDomain">
-          <div cdkDragHandle class="title">
-            <div>
-              <span style="user-select: none">属性</span>
-            </div>
-          </div>
-          <!-- 平面图属性 -->
-          <div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
-            <p>面积(平方米)</p>
-            <div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
-            <p>详情</p>
-            <div class="siteproperty_size">
-              {{canvasData.selectStorey.details}}
+     
+        <div class="title">
+          <span (click)="rightSwitch(1)" [ngClass]="{selectedTitle: isProperty}">
+            属性
+          </span>
+          <span (click)="rightSwitch(2)" [ngClass]="{selectedTitle: !isProperty}">
+            消防要素
+          </span>
+        </div>
+        <div style="width: 100%;height: 100%;">
+           <!-- 属性 -->
+          <div *ngIf="isProperty" id="property" class="property" style="height: 94%;">
+            <!-- 平面图属性 -->
+            <div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute">
+              <p>面积(平方米)</p>
+              <div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
+              <p>详情</p>
+              <div class="siteproperty_size">
+                {{canvasData.selectStorey.details}}
+              </div>
             </div>
-          </div>
-          <!-- 素材属性 -->
-          <div class="assetsproperty" style="user-select: none"  *ngIf="isShowProperty && !isShowAttribute">
-            <h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
+            <!-- 素材属性 -->
+            <div class="assetsproperty" style="user-select: none"  *ngIf="isShowProperty && !isShowAttribute">
+              <h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
 
-            <div *ngIf="canvasAssetObj.InteractiveMode == 0">
-              <p>宽度(像素)</p>
-              <input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern">
-              <p>高度(像素)</p>
-              <input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern">
-              <p>角度</p>
-              <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
-                <input type="number" class="smallinput" [(ngModel)]="sliderValue"
-                  oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()" [disabled]="!isEditPattern">
-                <mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
-                  [(ngModel)]="sliderValue" (change)="assetAngleIunput()"  [disabled]="!isEditPattern"></mat-slider>
+              <div *ngIf="canvasAssetObj.InteractiveMode == 0">
+                <p>宽度(像素)</p>
+                <div class="siteproperty_size">{{assetWidth}}</div>
+                <p>高度(像素)</p>
+                <div class="siteproperty_size">{{assetHeight}}</div>
+                <p>角度</p>
+                <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
+                  <!-- <input type="number" class="smallinput" [(ngModel)]="sliderValue"
+                    oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()">
+                  <mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
+                    [(ngModel)]="sliderValue" (change)="assetAngleIunput()"></mat-slider> -->
+                    <div class="siteproperty_size">{{sliderValue}}</div>
+                </div>
               </div>
-            </div>
-            <!-- 如果是多点连线 -->
-            <div *ngIf="canvasAssetObj.InteractiveMode == 1">
-              <p>厚度</p>
-              <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
-                <input type="number" class="smallinput" [(ngModel)]="sliderValueThickness"
-                  oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()" [disabled]="!isEditPattern">
-                <mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
-                  [(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()"  [disabled]="!isEditPattern"></mat-slider>
+              <!-- 如果是多点连线 -->
+              <div *ngIf="canvasAssetObj.InteractiveMode == 1">
+                <p>厚度</p>
+                <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
+                  <!-- <input type="number" class="smallinput" [(ngModel)]="sliderValueThickness"
+                    oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()">
+                  <mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
+                    [(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()"></mat-slider> -->
+                    <div class="siteproperty_size">{{sliderValueThickness}}</div>
+                </div>
               </div>
-            </div>
 
-            <p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p>
-            <div>
-              <input class="input" [(ngModel)]="isHighLight" type="checkbox"  [disabled]="!isEditPattern">
-              <span style="font-size: 14px;">选中高亮</span>
-            </div>
-            <div class="colorBigDiv" *ngIf="canvasAssetObj.FillMode == 0">
-              <div class="colorBigTemplateDiv">
-                <span>颜色</span>
-                <div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
+              <!-- <p style="margin-top: 4px;margin-bottom: 0px;">是否高亮</p>
+              <div>
+                <input class="input" [(ngModel)]="isHighLight" type="checkbox">
+                <span style="font-size: 14px;">选中高亮</span>
+              </div> -->
+              <div *ngIf="canvasAssetObj.FillMode == 0" style="margin-top: 6px;">
+                <div class="colorBigTemplateDiv">
+                  <span style="
+                  font-size: 16px;
+                  color: #d0e0f4;
+                  padding-left: 7px;
+                  letter-spacing:3px;
+                  margin: 5px 0;">颜色</span>
+                  <div class="colorTemplateDiv" [style]="{'background-color':selectedcolor}">
 
+                  </div>
                 </div>
+                <!-- <div class="colorDiv"> 
+                  <ul>
+                      <li class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
+                  </ul>
+                </div> -->
+                <p>透明度</p>
+                <!-- <span style="color: #9c9fa5;font-size: 14px;">透明度</span> -->
+                <!-- <mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
+                  [(ngModel)]="colorDivSliderValue" (change)="colorDivSliderChange()"></mat-slider>
+                <span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span> -->
+                <div class="siteproperty_size">{{colorDivSliderValue}}%</div>
               </div>
-              <div class="colorDiv" *ngIf="isEditPattern"> 
-                <ul>
-                    <li (click)="selectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
-                </ul>
-              </div>
-              <span style="color: #9c9fa5;font-size: 14px;">透明度</span>
-              <mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
-                [(ngModel)]="colorDivSliderValue" (change)="colorDivSliderChange()"  [disabled]="!isEditPattern"></mat-slider>
-              <span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
-            </div>
-            <div *ngFor="let item of PropertyInfos;index as key ">
-              <!-- 单行文本 -->
-              <div *ngIf="item.PropertyType == 0">
-                <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
-                <input type="text" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)"  [disabled]="!isEditPattern">
-              </div>
-              <!-- 多行文本 -->
-              <div *ngIf="item.PropertyType == 1">
-                <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
-                <textarea class="textarea" name="" id=""  [value]="item.PropertyValue" (input)="assetInputChange(item,$event)"  [disabled]="!isEditPattern"></textarea>
-              </div>
-              <!-- 数值 -->
-              <div *ngIf="item.PropertyType == 2">
-                <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
-                <input type="number" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern">
-              </div>
-              <!-- 图片数量 -->
-              <div *ngIf="item.PropertyType == 4" style="height: 140px;">
-                <div style="position: relative;width: 100%;height: 21px;margin: 1px 0;">
-                  <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>
-                  <input  [disabled]="!isEditPattern" *ngIf="isImgNumCss" accept="image/*" (change)="selectFile($event)" type="file" style="width: 33%;position: absolute;right: 10px;top: 1px;opacity: 0;z-index: 100;cursor: pointer;height: 21px;">
-                  <div style="width: 33%;height: 21px;line-height: 21px;text-align: center;position: absolute;right: 10px;top: 1px;z-index: 99;border: 1px solid rgb(208, 211, 214);border-radius: 2px;font-size: 13px;cursor: pointer;" (click)="imgNumBeyond()">添加</div>
-                  
-                  
-                  <div style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 100px;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_100,w_100'" alt="" [attr.data-original]="img.PropertyValue"></div>
+              <div *ngFor="let item of PropertyInfos;index as key ">
+                <!-- 单行文本 -->
+                <div *ngIf="item.PropertyType == 0">
+                  <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
+                  <!-- <input type="text" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)"> -->
+                  <div class="siteproperty_size">{{item.PropertyValue}}</div>
+                </div>
+                <!-- 多行文本 -->
+                <div *ngIf="item.PropertyType == 1">
+                  <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
+                  <!-- <textarea class="textarea" name="" id=""  [value]="item.PropertyValue" (input)="assetInputChange(item,$event)"></textarea> -->
+                  <div class="siteproperty_size">{{item.PropertyValue}}</div>
+                </div>
+                <!-- 数值 -->
+                <div *ngIf="item.PropertyType == 2">
+                  <p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
+                  <div class="siteproperty_size">{{item.PropertyValue}}</div>
+                </div>
+                <!-- 图片数量 -->
+                <div *ngIf="item.PropertyType == 4" style="height: 140px;">
+                  <div style="position: relative;width: 100%;height: 21px;margin: 1px 0;">
+                    
+                    <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 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>
+                      <!-- 如果需要导航按钮 -->
+                      <div class="swiper-button-next"></div>
+                      <div class="swiper-button-prev"></div>
                     </div>
-                    <!-- 如果需要导航按钮 -->
-                    <div class="swiper-button-next"></div>
-                    <div class="swiper-button-prev"></div>
-                    <span style="position: absolute;right: 2px;top: 2px;cursor: pointer;z-index: 200;" *ngIf="isEditPattern">
-                      <mat-icon class="hoverred" (click)="deleteImg()">delete</mat-icon>
-                    </span>
                   </div>
                 </div>
-              </div>
-              <!-- 方向 -->
-              <div *ngIf="item.PropertyType == 5" class="selectDiv">
-                <p style="display: inline-block;">{{item.PropertyName}}</p>
-                <select (change)="direction(item,$event)"  [disabled]="!isEditPattern">
-                  <option value ="0" [selected]="item.PropertyValue ==0">东</option>
-                  <option value ="1" [selected]="item.PropertyValue ==1">西</option>
-                  <option value ="2" [selected]="item.PropertyValue ==2">南</option>
-                  <option value ="3" [selected]="item.PropertyValue ==3">北</option>
-                  <option value ="4" [selected]="item.PropertyValue ==4">东南</option>
-                  <option value ="5" [selected]="item.PropertyValue ==5">西南</option>
-                  <option value ="6" [selected]="item.PropertyValue ==6">东北</option>
-                  <option value ="7" [selected]="item.PropertyValue ==7">西北</option>
-                </select>
-              </div>
-              <!-- 布尔值 是1或否0 -->
-              <div *ngIf="item.PropertyType == 6">
-                <p>{{item.PropertyName}}</p>
-                <input  [disabled]="!isEditPattern" [checked]="item.PropertyValue == 1" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
-                <input  [disabled]="!isEditPattern" [checked]="item.PropertyValue == 0" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
-              </div>
-              <!-- 供给区域 -->
-              <div *ngIf="item.PropertyType == 7" class="selectDiv">
-                <p style="display: inline-block;">{{item.PropertyName}}</p>
-                <select (change)="supplyArea(item,$event)" [disabled]="!isEditPattern">
-                  <option value ="0" [selected]="item.PropertyValue ==0">全部</option>
-                  <option value ="1" [selected]="item.PropertyValue ==1">高区</option>
-                  <option value ="2" [selected]="item.PropertyValue ==2">中区</option>
-                  <option value ="3" [selected]="item.PropertyValue ==3">低区</option>
-                  <option value ="4" [selected]="item.PropertyValue ==4">高中区</option>
-                  <option value ="5" [selected]="item.PropertyValue ==5">高低区</option>
-                  <option value ="6" [selected]="item.PropertyValue ==6">中低区</option>
-                </select>
-              </div>
-              <!-- 供给类型 -->
-              <div *ngIf="item.PropertyType == 8" class="selectDiv">
-                <p style="display: inline-block;">{{item.PropertyName}}</p>
-                <select (change)="supplyType(item,$event)" value="4" [disabled]="!isEditPattern">
-                  <option value ="0" [selected]="item.PropertyValue ==0">消火栓</option>
-                  <option value ="1" [selected]="item.PropertyValue ==1">喷淋</option>
-                  <option value ="2" [selected]="item.PropertyValue ==2">水幕</option>
-                  <option value ="3" [selected]="item.PropertyValue ==3">泡沫</option>
-                  <option value ="4" [selected]="item.PropertyValue ==4">消防</option>
-                </select>
-              </div>
-          </div>
-        </div>
-        
-        </div>
-        <!-- 消防要素 -->
-        <div id="firecategories" class="firecategories" style="height: 50%;" cdkDrag cdkDragBoundary=".functionalDomain">
-          <!-- 素材属性div鼠标拖动div -->
-          <div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;" (mousedown)="firecategoriesDivMouseDown($event)"></div>
-          
-          <div cdkDragHandle class="title">
-            <div>
-              <span style="user-select: none">消防要素</span>
+                <!-- 方向 -->
+                <div *ngIf="item.PropertyType == 5">
+                  <p>{{item.PropertyName}}</p>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==0">东</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==1">西</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==2">南</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==3">北</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==4">东南</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==5">西南</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==6">东北</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==7">西北</div>
+  
+                </div>
+                <!-- 布尔值 是1或否0 -->
+                <div *ngIf="item.PropertyType == 6">
+                  <p>{{item.PropertyName}}</p>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==1">是</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==0">否</div>
+
+                  <!-- <input [checked]="item.PropertyValue == 1" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
+                  <input [checked]="item.PropertyValue == 0" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span> -->
+                </div>
+                <!-- 供给区域 -->
+                <div *ngIf="item.PropertyType == 7">
+                  <p style="display: inline-block;">{{item.PropertyName}}</p>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==0">全部</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==1">高区</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==2">中区</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==3">低区</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==4">高中区</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==5">高低区</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==6">中底区</div>
+                </div>
+                <!-- 供给类型 -->
+                <div *ngIf="item.PropertyType == 8">
+                  <p style="display: inline-block;">{{item.PropertyName}}</p>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==0">消火栓</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==1">喷淋</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==2">水幕</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==3">泡沫</div>
+                  <div class="siteproperty_size" *ngIf="item.PropertyValue ==4">消防</div>
+                </div>
+            </div>
             </div>
+          
           </div>
-
-          <div class="firecategoriesTree">
-            <!-- 消防列表树写在这里 -->
-            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" cdkDropList  [cdkDropListData]="dataSource" (cdkDropListDropped)="drop($event)">
+          <!-- 消防要素 -->
+          <div *ngIf="!isProperty" id="firecategories" class="firecategories" style="height:94%;">
+       
+            <div class="firecategoriesTree">
+              <!-- 消防列表树写在这里 -->
+              <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">
+                  <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>
+                </mat-tree-node>
               
-              <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *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>
-              </mat-tree-node>
-            
-            
-              <mat-tree-node cdkDrag cdkDragDisabled="false" [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"class="treeNode" >
-                <button mat-icon-button 
-                        matTreeNodeToggle
-                        [attr.aria-label]="'toggle ' + node.name">
-                  <mat-icon class="mat-icon-rtl-mirror">
-                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-                  </mat-icon>
-                </button>
-                <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
-                  {{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>
-              </mat-tree-node>
-             
-            </mat-tree>
+              
+                <mat-tree-node cdkDrag cdkDragDisabled="false" [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">
+                    <mat-icon class="mat-icon-rtl-mirror">
+                      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+                    </mat-icon>
+                  </button>
+                  <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
+                    {{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>
+                </mat-tree-node>
+              
+              </mat-tree>
+            </div>
           </div>
         </div>
       </div>
 
-      <div id="bottomDiv" class="bottomCss" *ngIf="!pattern">
+      <!-- <div id="bottomDiv" class="bottomCss" *ngIf="!pattern">
         <div class="dragDiv" (mousedown)="bottomDivMouseDown($event)"></div>
         <div class="title">
           <div (click)="details()" [ngClass]="{'detailsAndattentBtn': detailsAndattentBtn}">
@@ -463,7 +499,7 @@
           <textarea *ngIf="detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.description"></textarea>
           <textarea *ngIf="!detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.nodes"></textarea>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 
diff --git a/src/app/ui/collection-tools/collection-tools.component.scss b/src/app/ui/collection-tools/collection-tools.component.scss
index 9691f49..374f61a 100644
--- a/src/app/ui/collection-tools/collection-tools.component.scss
+++ b/src/app/ui/collection-tools/collection-tools.component.scss
@@ -12,8 +12,8 @@
   flex-direction: column;
 
   .buildingbtnchecked{
-    background-color: #34A6FD;
     color: white;
+    background-image: url("../../../assets/images/标签选中.png")!important;
   }
 }
 
@@ -63,38 +63,133 @@
   }
 }
 
-//头部操作栏
+// //头部操作栏
+// .headerOperate {
+//   img {
+//     width: 24px; 
+//     height: 24px;
+//     vertical-align: middle;
+//     margin-left: 1px;
+//   }
+//   span{
+//     font-size: 18px;
+//   }
+//   flex: 5%;
+//   display: flex;
+//   align-items:center;
+//   min-height: 40px;
+//   box-sizing: border-box;
+//   margin: 3px 0;
+//   background-color: white;
+//   button{
+//     border: 0.5px solid rgb(208, 211, 214);
+//     margin: 0 2px;
+//   }
+//   .editdeletebtn{
+//     display: none;
+//   }
+//   .bigeditdeletebtn:hover{
+//     .editdeletebtn{
+//       display: inline-block;
+//     }
+//   }
+// }
 .headerOperate {
-  img {
-    width: 24px; 
-    height: 24px;
-    vertical-align: middle;
-    margin-left: 1px;
-  }
+  position: relative;
   span{
     font-size: 18px;
   }
-  flex: 5%;
+  flex: 2%;
   display: flex;
   align-items:center;
   min-height: 40px;
   box-sizing: border-box;
   margin: 3px 0;
-  background-color: white;
-  button{
-    border: 0.5px solid rgb(208, 211, 214);
-    margin: 0 2px;
-  }
-  .editdeletebtn{
-    display: none;
+
+  .bigeditdeletebtn{
+    margin-right: 12px;
+    height: 80%;
+    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;
+    }
   }
   .bigeditdeletebtn:hover{
-    .editdeletebtn{
-      display: inline-block;
+    cursor: pointer; 
+    background-image: url("../../../assets/images/标签经过.png") ;
+  }
+  .bigTalkBox{
+    user-select: none;
+    .titleIcon{
+      font-size: 33px;
+      vertical-align: sub;
+      color: white;
+    }
+    .talkBox{
+      width: 309px;
+      height: 326px;  
+      border: 1px solid #30bbec;
+      background-color: #013a64;
+      opacity: .9 ;
+      position: absolute;
+      top: 32px;  
+      right:4px;
+      z-index: 2000;
+      .btndiv{
+        div{
+          border-radius: 18px;
+          width: 70px;
+          height: 30px;
+          text-align: center;
+          line-height: 30px;
+          display: inline-block;
+          font-size: 13px;
+          color: white;
+          cursor: pointer;
+          
+        }
+        div:nth-child(1){
+          background-color: #fe9400;
+          margin: 10px;
+        }
+        div:nth-child(2){
+          background-color: #f95e5a;
+        }
+      }
+      .bottomDiv{
+        position: absolute;
+        bottom:6px;
+        width: 100%;
+        height: 32px;
+        line-height: 32px;
+        display: flex;
+        color: white;
+        text-align: center;
+        div:nth-child(1){
+          flex: 1;
+        }
+        div:nth-child(2){
+          flex: 6;
+          color: #409eff;
+          background: url('../../../assets/images/输入框.png');
+          background-size: 100% 100%;
+        }
+        div:nth-child(3){
+          flex: 1;
+
+        }
+      }
     }
   }
 }
-
 //功能区
 // icon统一样式
 .mat-icon {
@@ -103,27 +198,25 @@
 }
 //左右两侧功能栏 统一样式
 .publicCss {
+  overflow: hidden;
   border-radius: 5px;
-  position: absolute;
-  height: 100%;
   top: 0;
 }
 .functionalDomain {
-  flex: 90%;
+  flex: 98%;
   .functionalDomainContent {
+    display: flex;
     position: relative;
     width: 100%;
     height: 100%;
   }
   .functionalDomainLeft {
-    background-color: #fff;
+    flex: 1;
     display: flex;
     flex-direction: column;
     margin-left: 0px;
     transition: margin-left 0.5s;
-    min-width: 235px;
     border: 1px solid #E6EAEE;
-    width: 235px;
     left: 0;
     z-index: 111;
     .leftDragDiv{
@@ -135,14 +228,19 @@
       cursor: e-resize;
     }
   }
+  .canvas{
+    flex: 5;
+  }
   .functionalDomainRight {
+    color: white;
+    // background-color: #113e5e;
     z-index: 1001;
     margin-right: 0px;
     transition:  margin-right 0.5s;
-    border: 1px solid #464646;
+    border: 1px solid #30bbec;
     width: 235px;
     right: 0;
-    
+    flex: 1;
   }
     //右边导航栏显示隐藏
   .togglePanel2 {
@@ -160,23 +258,23 @@
 //右边操作栏
 .title{
   width: 100%;
-  height: 35px;
-  background-color: #464646;
-  div{
-    width: 50%;
-    height: 35px;
-    line-height: 35px;
-    background-color: #595959;
-    border-radius: 5px;
-    span{
-      color: white;
-      font-size: 14px;
-      font-weight: 400;
-      padding-left: 5px;
-    }
+  height: 40px;
+  line-height: 40px;
+  border-bottom:2px solid #accbf2;
+  display: flex;
+  align-content: center;
+  span{
+    display: inline-block;
+    flex: 1;
+    text-align: center;
+  }
+  span:hover{
+    cursor: pointer;
   }
 }
-
+.selectedTitle{
+  background: #0c2d44;
+}
 
 //右侧属性
 .property{
@@ -186,15 +284,20 @@
     height: 100%;
     overflow-y: auto;
     p{
-      color: #9c9fa5;
-      padding-left: 5px;
+      color: #d0e0f4;
+      padding-left: 7px;
+      letter-spacing:3px;
+      margin: 5px 0;
     }
     .siteproperty_size{
-      background-color: #e3e3e3;
+      border-bottom:1px solid #d0e0f4;
       width: 93%;
       margin: 0 auto;
-      border-radius: 3px;
       min-height: 21px;
+      color: #2399f1;
+      padding-bottom: 5px;
+      font-size: 16px;
+      letter-spacing:2px;
     }
     .rightAttribute{
       width: 12%;
@@ -210,9 +313,21 @@
     overflow-y: auto;
     height: 100%;
     p{
-      color: #9c9fa5;
-      margin:1px 0 3px 8px;
-      font-size: 14px;
+
+      color: #d0e0f4;
+      padding-left: 7px;
+      letter-spacing:3px;
+      margin: 5px 0;
+    }
+    .siteproperty_size{
+      border-bottom:1px solid #d0e0f4;
+      width: 93%;
+      margin: 0 auto;
+      min-height: 21px;
+      color: #2399f1;
+      padding-bottom: 5px;
+      font-size: 16px;
+      letter-spacing:2px;
     }
     span{
       font-size: 15px;
@@ -268,21 +383,7 @@
     .colorBigDiv{
       width: 88%;
       margin-left: 8px;
-      .colorBigTemplateDiv{
-        span{
-          color: #9c9fa5;
-          font-size: 14px;
-          height: 26px;
-          line-height: 26px;
-        }
-        .colorTemplateDiv{
-          width: 65%;
-          height: 22px;
-          display: inline-block;
-          vertical-align: middle;
-          margin-left: 26px;
-        }
-      }
+      
       
       .colorDiv{
         .colorLi{
@@ -297,14 +398,28 @@
         }
       }
     }
-      
+    .colorBigTemplateDiv{
+      span{
+        color: #9c9fa5;
+        font-size: 14px;
+        height: 26px;
+        line-height: 26px;
+      }
+      .colorTemplateDiv{
+        width: 65%;
+        height: 22px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 26px;
+      }
+    }
   }
 }
 //右侧消防要素
 .firecategories{
   position: relative;
-  display: flex;
-  flex-flow: column;
+  // display: flex;
+  // flex-flow: column;
   .firecategoriesTree{
     overflow-y: auto;
     height: 100%;
@@ -314,6 +429,13 @@
     .isLookCss{
       position: absolute;
       right: 6px;
+      z-index: 1000;
+    }
+  }
+  .mat-tree{
+    background-color:transparent;
+    .mat-tree-node{
+      color: white!important;
     }
   }
 }
diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts
index 3d00c96..e0429f7 100644
--- a/src/app/ui/collection-tools/collection-tools.component.ts
+++ b/src/app/ui/collection-tools/collection-tools.component.ts
@@ -479,7 +479,7 @@ export class CollectionToolsComponent implements OnInit {
   }
 
   ngOnInit(): void {
-
+    // this.canvas.setNameVisible(this.basicInfo,1)
     let that = this
     window.setTimeout(()=>{
       document.getElementById("functionalDomainContent").oncontextmenu = function (event) {
@@ -494,7 +494,20 @@ export class CollectionToolsComponent implements OnInit {
     })
   }
 
-
+ //右侧属性和消防要素切换
+ isProperty = true
+ rightSwitch(type){
+   if(type == 1){
+     this.isProperty = true
+   }else{
+     this.isProperty = false
+   }
+ }
+ //打开说话框
+ isOpenTalk = false
+ openTalkDiv(){
+   this.isOpenTalk = !this.isOpenTalk
+ }
 
   ngAfterViewInit(): void {
     // 监听canvas组件选中素材事件
@@ -530,7 +543,7 @@ export class CollectionToolsComponent implements OnInit {
   }
 
   basicInfo:boolean = true //基本信息名称显隐
-  wantToWork:boolean = true //想定作业名称显隐
+  wantToWork:boolean = false //想定作业名称显隐
   //点击基本信息名称
   basicInfoClick(){
     this.basicInfo = !this.basicInfo
diff --git a/src/app/ui/collection-tools/panel.scss b/src/app/ui/collection-tools/panel.scss
index 857c3ff..e66d284 100644
--- a/src/app/ui/collection-tools/panel.scss
+++ b/src/app/ui/collection-tools/panel.scss
@@ -278,7 +278,7 @@
   justify-content: space-between; /* 水平居中 */
 }
 .functionalDomainContent {
-  width: 300px;
+  // width: 300px;
   height: 100%;
   textarea {
     border-radius: 5px;
diff --git a/src/app/ui/dangerous/dangerous.component.scss b/src/app/ui/dangerous/dangerous.component.scss
index 488243e..150b9c7 100644
--- a/src/app/ui/dangerous/dangerous.component.scss
+++ b/src/app/ui/dangerous/dangerous.component.scss
@@ -188,4 +188,5 @@
     z-index: 101;
     left: 6px;
     top: 0;
+    
 }
diff --git a/src/app/ui/plan/collection-tools.component.ts b/src/app/ui/plan/collection-tools.component.ts
index 233f1f6..63062ad 100644
--- a/src/app/ui/plan/collection-tools.component.ts
+++ b/src/app/ui/plan/collection-tools.component.ts
@@ -9,7 +9,7 @@ import {WorkingAreaComponent} from '../../working-area/working-area.component'
 import {CanvasShareDataService,GameMode} from '../../canvas-share-data.service' //引入服务
 import Viewer from 'viewerjs';
 @Component({
-  selector: 'app-collection-tools',
+  selector: 'plan',
   templateUrl: './collection-tools.component.html',
   styleUrls: ['./collection-tools.component.scss']
 })
diff --git a/src/app/ui/similar-plans/similar-plans.component.html b/src/app/ui/similar-plans/similar-plans.component.html
index 5863341..9eb0d56 100644
--- a/src/app/ui/similar-plans/similar-plans.component.html
+++ b/src/app/ui/similar-plans/similar-plans.component.html
@@ -1,4 +1,4 @@
-<div class="leisiTable">
+<!-- <div class="leisiTable">
     <table>
         <thead >
             <td style="width:40%;">单位名称</td>
@@ -10,4 +10,7 @@
         </thead>
         <tbody id="shujubody"></tbody>
     </table>
-</div>
+</div> -->
+<div style="width: 100%;height: 100%;">
+    <app-collection-tools></app-collection-tools>
+</div>
\ No newline at end of file
diff --git a/src/app/ui/similar-plans/similar-plans.component.ts b/src/app/ui/similar-plans/similar-plans.component.ts
index ff65ba0..41004a0 100644
--- a/src/app/ui/similar-plans/similar-plans.component.ts
+++ b/src/app/ui/similar-plans/similar-plans.component.ts
@@ -43,11 +43,13 @@ export class SimilarPlansComponent implements OnInit {
       else{
         res+='<td style="text-align:center;color:#28BC69">'+this.leisiYuan[i].xiangjin+'</td>'
       }
-      res+='<td style="text-align:center;"><a href="" style="color:#CC5D13">查看详情</a></td></tr>'
+      res+='<td style="text-align:center;"><span style="color:#CC5D13;cursor: pointer;(click)="openResponsePlans()">查看详情</span></td></tr>'
     }
     res+='</tbody>'
-    var shuju=document.getElementById('shujubody')
+    var shuju = document.getElementById('shujubody')
     shuju.innerHTML=res
   }
-
+  openResponsePlans(){
+    console.log(123)
+  }
 }