shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]平面图增加滚动条

tangshan
邵佳豪 4 years ago
parent
efe1e3c4cb
commit
10bd6a4b14
7 changed files with 69 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/app/ui/collection-tools-building/collection-tools.component.html
  2. 22
      src/app/ui/collection-tools-building/collection-tools.component.ts
  3. 3
      src/app/ui/collection-tools-building/panel.scss
  4. 12
      src/app/ui/collection-tools-plan/collection-tools.component.html
  5. 20
      src/app/ui/collection-tools-plan/collection-tools.component.ts
  6. 3
      src/app/ui/collection-tools-plan/panel.scss
  7. 12
      src/index.html

30
src/app/ui/collection-tools-building/collection-tools.component.html
Unescape View File

@ -88,19 +88,14 @@
<mat-icon>add</mat-icon>
</label>
</div>
<div [hidden]="!togglePlane" style="flex: 1;">
<div [hidden]="!togglePlane" style="flex: 1;max-height: 700px;overflow-y: auto;overflow-x: hidden;" class="sitePlanContentBox">
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index"
[ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}"
(click)='selectSitePlan(item,key)'>
(click)='selectSitePlan(item,key)' (mouseenter)="hoverSitePlan(item,key)">
<label class="overflowText" style="display:inline-block; max-width: 160px;">
<mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}
</label>
<a href="javascript:;" class="fireForce" *ngIf="isEditPattern && !pattern">
<img src="../../../assets/images/fire.png" *ngIf="item.fire && item.fire==2">
<img src="../../../assets/images/noFire.png" *ngIf="item.fire && item.fire==1">
<img src="../../../assets/images/force.png" *ngIf="item.force && item.force==2">
<img src="../../../assets/images/noForce.png" *ngIf="item.force && item.force==1">
</a>
<a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern && pattern"
title="替换底图">
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
@ -112,7 +107,7 @@
<img src="../../../assets/images/upload.jpg">
</a>
<!-- 右边定位操作栏 -->
<div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern"
<div id="rightOperate" class="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern"
(click)="$event.stopPropagation();">
<p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up
@ -561,23 +556,6 @@
</div>
</div>
<div id="bottomDiv" (mousewheel)="$event.stopPropagation()" class="bottomCss" *ngIf="!pattern">
<div class="dragDiv" (mousedown)="bottomDivMouseDown($event)"></div>
<div class="title">
<div (click)="details()" [ngClass]="{'detailsAndattentBtn': detailsAndattentBtn}">
节点详情
</div>
<div (click)="attent()" [ngClass]="{'detailsAndattentBtn': !detailsAndattentBtn}">
注意事项
</div>
</div>
<div class="body">
<textarea [disabled]="!isEditPattern" *ngIf="detailsAndattentBtn" name="" id="" rows="10"
[(ngModel)]="canvasData.selectPanelPointBaseData.description"></textarea>
<textarea [disabled]="!isEditPattern" *ngIf="!detailsAndattentBtn" name="" id="" rows="10"
[(ngModel)]="canvasData.selectPanelPointBaseData.notes"></textarea>
</div>
</div>
</div>
</div>

22
src/app/ui/collection-tools-building/collection-tools.component.ts
Unescape View File

@ -1728,6 +1728,28 @@ export class CollectionToolsBuildingComponent implements OnInit {
} //if
}
if (this.element.nativeElement.querySelector('#rightOperate')) {
setTimeout(() => {
this.element.nativeElement.querySelector('#rightOperate').style.position = 'fixed'
this.element.nativeElement.querySelector('#rightOperate').style.left = document.getElementsByClassName('sitePlanContentBox')[0].children[this.selectSitePlanIndex].getBoundingClientRect().left + document.getElementById("leftDiv").offsetWidth + 'px'
this.element.nativeElement.querySelector('#rightOperate').style.top = document.getElementsByClassName('sitePlanContentBox')[0].children[this.selectSitePlanIndex].getBoundingClientRect().top - 32 + 'px'
}, 0);
}
}
hoverSitePlan(item,key){
if(key == this.selectSitePlanIndex){
if (this.element.nativeElement.querySelector('#rightOperate')) {
setTimeout(() => {
this.element.nativeElement.querySelector('#rightOperate').style.position = 'fixed'
this.element.nativeElement.querySelector('#rightOperate').style.left = document.getElementsByClassName('sitePlanContentBox')[0].children[this.selectSitePlanIndex].getBoundingClientRect().left + document.getElementById("leftDiv").offsetWidth + 'px'
this.element.nativeElement.querySelector('#rightOperate').style.top = document.getElementsByClassName('sitePlanContentBox')[0].children[this.selectSitePlanIndex].getBoundingClientRect().top - 32 + 'px'
}, 0);
}
}
}
//新增平面图 楼层/区域

3
src/app/ui/collection-tools-building/panel.scss
Unescape View File

@ -129,9 +129,6 @@
#rightOperate{
width: 50px;
height: 100px;
position: absolute;
top: -32px;
right: -48px;
z-index: 99999;
border-radius: 0 100px 100px 0;
background-color: #F0F4F7;

12
src/app/ui/collection-tools-plan/collection-tools.component.html
Unescape View File

@ -72,19 +72,13 @@
<mat-icon>add</mat-icon>
</label>
</div>
<div [hidden]="!togglePlane" style="flex: 1;">
<div [hidden]="!togglePlane" style="flex: 1;max-height: 700px;overflow-y: auto;overflow-x: hidden;" class="sitePlanContentBox">
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index"
[ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}"
(click)='selectSitePlan(item,key)'>
(click)='selectSitePlan(item,key)' (mouseenter)="hoverSitePlan(item,key)">
<label class="overflowText" style="display:inline-block; max-width: 160px;">
<mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}
</label>
<a href="javascript:;" class="fireForce" *ngIf="isEditPattern && !pattern">
<img src="../../../assets/images/fire.png" *ngIf="item.fire && item.fire==2">
<img src="../../../assets/images/noFire.png" *ngIf="item.fire && item.fire==1">
<img src="../../../assets/images/force.png" *ngIf="item.force && item.force==2">
<img src="../../../assets/images/noForce.png" *ngIf="item.force && item.force==1">
</a>
<a href="javascript:;" class="a-upload"
*ngIf="selectSitePlanIndex==key && isEditPattern && pattern && !item.isGis" title="替换底图">
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
@ -96,7 +90,7 @@
<img src="../../../assets/images/upload.jpg">
</a>
<!-- 右边定位操作栏 -->
<div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern"
<div id="rightOperate" class="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern"
(click)="$event.stopPropagation();">
<p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up

20
src/app/ui/collection-tools-plan/collection-tools.component.ts
Unescape View File

@ -1642,7 +1642,7 @@ export class CollectionToolsPlanComponent implements OnInit {
//点击选中 平面图 楼层/区域 时
isGis: boolean
selectSitePlan(item, index) {
console.log('点击楼层', item)
// console.log('点击楼层', item)
if (item.isGis) {
this.isGis = true
} else {
@ -1691,8 +1691,26 @@ export class CollectionToolsPlanComponent implements OnInit {
} //if
}
if (this.element.nativeElement.querySelector('#rightOperate')) {
setTimeout(() => {
this.element.nativeElement.querySelector('#rightOperate').style.position = 'fixed'
this.element.nativeElement.querySelector('#rightOperate').style.left = document.getElementsByClassName('sitePlanContentBox')[0].children[this.selectSitePlanIndex].getBoundingClientRect().left + document.getElementById("leftDiv").offsetWidth + 'px'
this.element.nativeElement.querySelector('#rightOperate').style.top = document.getElementsByClassName('sitePlanContentBox')[0].children[this.selectSitePlanIndex].getBoundingClientRect().top - 32 + 'px'
}, 0);
}
}
hoverSitePlan(item,key){
if(key == this.selectSitePlanIndex){
if (this.element.nativeElement.querySelector('#rightOperate')) {
setTimeout(() => {
this.element.nativeElement.querySelector('#rightOperate').style.position = 'fixed'
this.element.nativeElement.querySelector('#rightOperate').style.left = document.getElementsByClassName('sitePlanContentBox')[0].children[this.selectSitePlanIndex].getBoundingClientRect().left + document.getElementById("leftDiv").offsetWidth + 'px'
this.element.nativeElement.querySelector('#rightOperate').style.top = document.getElementsByClassName('sitePlanContentBox')[0].children[this.selectSitePlanIndex].getBoundingClientRect().top - 32 + 'px'
}, 0);
}
}
}
//新增平面图 楼层/区域
foundPanel(e) {
e.stopPropagation()

3
src/app/ui/collection-tools-plan/panel.scss
Unescape View File

@ -130,9 +130,6 @@
#rightOperate{
width: 50px;
height: 100px;
position: absolute;
top: -32px;
right: -48px;
z-index: 99999;
border-radius: 0 100px 100px 0;
background-color: #F0F4F7;

12
src/index.html
Unescape View File

@ -23,13 +23,13 @@
</body>
<!-- <script src="http://10.81.73.39:8000/webapi/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="http://10.81.73.39:8000/webapi/ui/1.1/main.js"></script> -->
<script src="https://webapi.amap.com/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
<script src="http://10.81.73.39:8000/webapi/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="http://10.81.73.39:8000/webapi/ui/1.1/main.js"></script>
<!-- <script src="https://webapi.amap.com/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script> -->
<script src="/assets/html2canvas.js"></script>
<script type="text/javascript" src="/assets/wordexport/jquery.js"></script>
<!-- <script type="text/javascript" src="/assets/wordexport/jquery.js"></script>
<script type="text/javascript" src="/assets/wordexport/FileSaver.js"></script>
<script type="text/javascript" src="/assets/wordexport/jquery.wordexport.js"></script>
<script type="text/javascript" src="/assets/wordexport/jquery.wordexport.js"></script> -->
</html>

Write Preview
Loading…
Cancel
Save