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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/app/ui/collection-tools-building/collection-tools.component.html
  2. 44
      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> <mat-icon>add</mat-icon>
</label> </label>
</div> </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" <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index"
[ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" [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;"> <label class="overflowText" style="display:inline-block; max-width: 160px;">
<mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}} <mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}
</label> </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" <a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern && pattern"
title="替换底图"> title="替换底图">
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*"> <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
@ -112,7 +107,7 @@
<img src="../../../assets/images/upload.jpg"> <img src="../../../assets/images/upload.jpg">
</a> </a>
<!-- 右边定位操作栏 --> <!-- 右边定位操作栏 -->
<div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" <div id="rightOperate" class="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern"
(click)="$event.stopPropagation();"> (click)="$event.stopPropagation();">
<p class="functionButton"> <p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up <mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up
@ -561,23 +556,6 @@
</div> </div>
</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>
</div> </div>

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

@ -1728,6 +1728,28 @@ export class CollectionToolsBuildingComponent implements OnInit {
} //if } //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);
}
}
} }
//新增平面图 楼层/区域 //新增平面图 楼层/区域
@ -1957,13 +1979,13 @@ export class CollectionToolsBuildingComponent implements OnInit {
//保存建筑数据 //保存建筑数据
let CompanyData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData)); let CompanyData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData));
CompanyData.data = JSON.stringify(CompanyData.data) CompanyData.data = JSON.stringify(CompanyData.data)
this.http.post("/api/CompanyData", CompanyData, {params: {companyId: this.params.companyId}}).subscribe(data => { this.http.post("/api/CompanyData", CompanyData, { params: { companyId: this.params.companyId } }).subscribe(data => {
list.push(1) list.push(1)
if (list.length === 4) { this.updateCurrentFloor() } if (list.length === 4) { this.updateCurrentFloor() }
}) })
//批量保存单位毗邻 //批量保存单位毗邻
let CompanyAdjoins = this.canvasData.getCompanyAdjoinInfo() let CompanyAdjoins = this.canvasData.getCompanyAdjoinInfo()
this.http.post("/api/CompanyAdjoins/Batch", CompanyAdjoins, {params:{companyId: this.params.companyId}}).subscribe(data => { this.http.post("/api/CompanyAdjoins/Batch", CompanyAdjoins, { params: { companyId: this.params.companyId } }).subscribe(data => {
list.push(1) list.push(1)
if (list.length === 4) { this.updateCurrentFloor() } if (list.length === 4) { this.updateCurrentFloor() }
}, err => { }, err => {
@ -1978,13 +2000,13 @@ export class CollectionToolsBuildingComponent implements OnInit {
}) })
//批量保存单位重点部位 //批量保存单位重点部位
let CompanyImportantLocations = this.canvasData.getCompanyImportantLocations() let CompanyImportantLocations = this.canvasData.getCompanyImportantLocations()
this.http.post("/api/CompanyImportantLocations/Batch", CompanyImportantLocations, {params:{companyId: this.params.companyId}}).subscribe(data => { this.http.post("/api/CompanyImportantLocations/Batch", CompanyImportantLocations, { params: { companyId: this.params.companyId } }).subscribe(data => {
list.push(1) list.push(1)
if (list.length === 4) { this.updateCurrentFloor() } if (list.length === 4) { this.updateCurrentFloor() }
}) })
//批量保存单位消防设施素材 //批量保存单位消防设施素材
let CompanyFacilityAssets = this.canvasData.getAllCompanyFacilityAssetInfo() let CompanyFacilityAssets = this.canvasData.getAllCompanyFacilityAssetInfo()
this.http.post("/api/CompanyFacilityAssets/Batch", CompanyFacilityAssets, {params: {companyId: this.params.companyId}}).subscribe(data => { this.http.post("/api/CompanyFacilityAssets/Batch", CompanyFacilityAssets, { params: { companyId: this.params.companyId } }).subscribe(data => {
list.push(1) list.push(1)
if (list.length === 4) { this.updateCurrentFloor() } if (list.length === 4) { this.updateCurrentFloor() }
}) })
@ -2021,7 +2043,7 @@ export class CollectionToolsBuildingComponent implements OnInit {
//建筑数据 //建筑数据
let CompanyData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData)); let CompanyData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData));
CompanyData.data = JSON.stringify(CompanyData.data) CompanyData.data = JSON.stringify(CompanyData.data)
this.http.post("/api/BuildingData", CompanyData, {params: { companyId: this.params.companyId}}).subscribe(data => { this.http.post("/api/BuildingData", CompanyData, { params: { companyId: this.params.companyId } }).subscribe(data => {
list.push(1) list.push(1)
if (list.length === 4) { this.updateCurrentFloor() } if (list.length === 4) { this.updateCurrentFloor() }
}) })
@ -2065,9 +2087,9 @@ export class CollectionToolsBuildingComponent implements OnInit {
let planData = this.getSitePlanCompanyData() //获取 单位 数据 let planData = this.getSitePlanCompanyData() //获取 单位 数据
this.http.get('/api/SitePlans', { params: this.params }).subscribe(data => { this.http.get('/api/SitePlans', { params: this.params }).subscribe(data => {
this.sitePlanData = data this.sitePlanData = data
this.selectingSitePlan = this.sitePlanData[this.sitePlanData.length-1] || {} this.selectingSitePlan = this.sitePlanData[this.sitePlanData.length - 1] || {}
this.canvasData.selectStorey = this.sitePlanData[this.sitePlanData.length-1] || {} //服务中 存一份数据 this.canvasData.selectStorey = this.sitePlanData[this.sitePlanData.length - 1] || {} //服务中 存一份数据
this.selectSitePlanIndex = this.sitePlanData.length-1 this.selectSitePlanIndex = this.sitePlanData.length - 1
Promise.all([fireData, planData]).then((res) => { Promise.all([fireData, planData]).then((res) => {
this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据 this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据
@ -2081,9 +2103,9 @@ export class CollectionToolsBuildingComponent implements OnInit {
let planData = this.getBuildingData(params) //获取 建筑 数据 let planData = this.getBuildingData(params) //获取 建筑 数据
this.http.get('/api/BuildingAreas', { params }).subscribe(data => { this.http.get('/api/BuildingAreas', { params }).subscribe(data => {
this.sitePlanData = data this.sitePlanData = data
this.selectingSitePlan = this.sitePlanData[this.sitePlanData.length-1] || {} this.selectingSitePlan = this.sitePlanData[this.sitePlanData.length - 1] || {}
this.canvasData.selectStorey = this.sitePlanData[this.sitePlanData.length-1] || {} //服务中 存一份数据 this.canvasData.selectStorey = this.sitePlanData[this.sitePlanData.length - 1] || {} //服务中 存一份数据
this.selectSitePlanIndex = this.sitePlanData.length-1 this.selectSitePlanIndex = this.sitePlanData.length - 1
Promise.all([fireData, planData]).then((res) => { Promise.all([fireData, planData]).then((res) => {
this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据 this.getBuildingStorey(this.selectingSitePlan) //获取 建筑 楼层数据

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

@ -129,9 +129,6 @@
#rightOperate{ #rightOperate{
width: 50px; width: 50px;
height: 100px; height: 100px;
position: absolute;
top: -32px;
right: -48px;
z-index: 99999; z-index: 99999;
border-radius: 0 100px 100px 0; border-radius: 0 100px 100px 0;
background-color: #F0F4F7; 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> <mat-icon>add</mat-icon>
</label> </label>
</div> </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" <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index"
[ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" [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;"> <label class="overflowText" style="display:inline-block; max-width: 160px;">
<mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}} <mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}
</label> </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" <a href="javascript:;" class="a-upload"
*ngIf="selectSitePlanIndex==key && isEditPattern && pattern && !item.isGis" title="替换底图"> *ngIf="selectSitePlanIndex==key && isEditPattern && pattern && !item.isGis" title="替换底图">
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*"> <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
@ -96,7 +90,7 @@
<img src="../../../assets/images/upload.jpg"> <img src="../../../assets/images/upload.jpg">
</a> </a>
<!-- 右边定位操作栏 --> <!-- 右边定位操作栏 -->
<div id="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" <div id="rightOperate" class="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern"
(click)="$event.stopPropagation();"> (click)="$event.stopPropagation();">
<p class="functionButton"> <p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up <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 isGis: boolean
selectSitePlan(item, index) { selectSitePlan(item, index) {
console.log('点击楼层', item) // console.log('点击楼层', item)
if (item.isGis) { if (item.isGis) {
this.isGis = true this.isGis = true
} else { } else {
@ -1691,8 +1691,26 @@ export class CollectionToolsPlanComponent implements OnInit {
} //if } //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) { foundPanel(e) {
e.stopPropagation() e.stopPropagation()

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

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

12
src/index.html
Unescape View File

@ -23,13 +23,13 @@
</body> </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/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="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/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="https://webapi.amap.com/ui/1.1/main.js"></script> -->
<script src="/assets/html2canvas.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/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> </html>

Write Preview
Loading…
Cancel
Save