From dc5f3e8e878061c6830a0aa3f4d75c059514961a Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Thu, 28 Jan 2021 11:14:04 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=AE=8C=E5=96=84=E5=8D=95?= =?UTF-8?q?=E4=BD=8D=E4=BF=A1=E6=81=AFtab=E4=B8=AD=E5=91=A8=E8=BE=B9?= =?UTF-8?q?=E6=B0=B4=E6=BA=90=E9=A1=B5=E9=9D=A2=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=88=90=E5=8A=9F=E5=90=8E=E8=B7=B3=E8=BD=AC?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/key-unit/key-unit.module.ts | 4 +- src/app/key-unit/water-road/edittext.html | 14 - .../water-road/water-road.component.ts | 243 +++++++++++------- src/app/pages/login/login.component.ts | 16 +- .../collection-tools.component.ts | 24 +- 5 files changed, 172 insertions(+), 129 deletions(-) delete mode 100644 src/app/key-unit/water-road/edittext.html diff --git a/src/app/key-unit/key-unit.module.ts b/src/app/key-unit/key-unit.module.ts index 62fe4e4..c70c21c 100644 --- a/src/app/key-unit/key-unit.module.ts +++ b/src/app/key-unit/key-unit.module.ts @@ -80,14 +80,14 @@ import { ActualCombatDrillComponent } from './actual-combat-drill/actual-combat- import { SixFamiliarListComponent } from './six-familiar-list/six-familiar-list.component' import { TrainingRecordinfoComponent } from './training-recordinfo/training-recordinfo.component'; import { RouterGISComponent } from './router-gis/router-gis.component'; -import { EditText, WaterRoadComponent } from './water-road/water-road.component'; +import { WaterRoadComponent } from './water-road/water-road.component'; import { PhotoofthesceneComponent } from './photoofthescene/photoofthescene.component'; import { KnowRouteComponent } from './know-route/know-route.component'; import { FindProblemComponent } from './find-problem/find-problem.component'; import { upname } from './key-unit-management/key-unit-management.component' @NgModule({ - declarations: [KeyUnitManagementComponent, EditUnitInfoComponent, ViewUnitDetailsComponent,CreateUnit,BasicinfoComponent,LookMaster,AddHouseInfo, EditPlanInfoComponent,BasicinfoLookComponent, ViewUnitDetailsPlanComponent,FunctionDivisionComponent,addPartition,addPartitionAttribute,AllaroundComponent,ImgDetails,RealisticPictureComponent,previewImg,addRealPicture,editRealPicture,KeySiteComponent,KeyImgDetail,KeySiteImgs,UploadingCADComponent,readFile,editFile,KeySiteLookComponent,KeySiteImgs2,FunctionDivisionLookComponent,RealisticPictureLookComponent,previewImg3,UploadingCADLookComponent,FireFightingDeviceComponent,ImagesData,previewBigImg,ImgsDataDetail,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,previewBigImg2,LookMaster2,addPartitionAttribute2, SixFamiliarityComponent, ActualCombatDrillComponent,routerMapComponent, SixFamiliarListComponent,TrainingRecordinfoComponent,RouterGISComponent,WaterRoadComponent,EditText,PhotoofthesceneComponent,KnowRouteComponent,FindProblemComponent,upname], + declarations: [KeyUnitManagementComponent, EditUnitInfoComponent, ViewUnitDetailsComponent,CreateUnit,BasicinfoComponent,LookMaster,AddHouseInfo, EditPlanInfoComponent,BasicinfoLookComponent, ViewUnitDetailsPlanComponent,FunctionDivisionComponent,addPartition,addPartitionAttribute,AllaroundComponent,ImgDetails,RealisticPictureComponent,previewImg,addRealPicture,editRealPicture,KeySiteComponent,KeyImgDetail,KeySiteImgs,UploadingCADComponent,readFile,editFile,KeySiteLookComponent,KeySiteImgs2,FunctionDivisionLookComponent,RealisticPictureLookComponent,previewImg3,UploadingCADLookComponent,FireFightingDeviceComponent,ImagesData,previewBigImg,ImgsDataDetail,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,previewBigImg2,LookMaster2,addPartitionAttribute2, SixFamiliarityComponent, ActualCombatDrillComponent,routerMapComponent, SixFamiliarListComponent,TrainingRecordinfoComponent,RouterGISComponent,WaterRoadComponent,PhotoofthesceneComponent,KnowRouteComponent,FindProblemComponent,upname], exports:[ViewUnitDetailsPlanComponent], imports: [ CommonModule, diff --git a/src/app/key-unit/water-road/edittext.html b/src/app/key-unit/water-road/edittext.html deleted file mode 100644 index 823d445..0000000 --- a/src/app/key-unit/water-road/edittext.html +++ /dev/null @@ -1,14 +0,0 @@ -
-
- 说明: - 水源情况主要包括消火栓位置、管径、外观完好情况、停车取水位置试水情况，消防水池位置、容量、停车取水位置、取水测试情况，取消码头位置、水位、停车取水位置等；道路情况主要包括道路长度、宽度、起始点、沿线重点单位、立交、桥梁、涵洞及其通车能力。 - 【该项主要在道路水源熟悉时填写】 -
-
- -
-
-
确认
-
取消
-
-
\ No newline at end of file diff --git a/src/app/key-unit/water-road/water-road.component.ts b/src/app/key-unit/water-road/water-road.component.ts index 1f66ece..a1b8c38 100644 --- a/src/app/key-unit/water-road/water-road.component.ts +++ b/src/app/key-unit/water-road/water-road.component.ts @@ -1,7 +1,9 @@ +import { HttpClient } from '@angular/common/http'; import { Component, ElementRef, Inject, OnInit, Renderer2 } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { ActivatedRoute } from '@angular/router'; declare var AMap: any; @Component({ @@ -11,17 +13,28 @@ declare var AMap: any; }) export class WaterRoadComponent implements OnInit { - constructor(public renderer2: Renderer2,public snackBar: MatSnackBar,public dialog: MatDialog,private fb: FormBuilder) { } + constructor(private http: HttpClient,public renderer2: Renderer2,public snackBar: MatSnackBar,public dialog: MatDialog,private fb: FormBuilder,private route:ActivatedRoute) { } + + //获得单位信息 + unitData:any + + async getUnitData(){ + await new Promise((resolve, reject) =>{ + this.http.get(`/api/Companies/${this.route.snapshot.queryParams.id}`).subscribe(data => { + this.unitData = data + resolve(data) + }) + }) + } map:any //地图 - markers:any = [{_position: [121.472644,31.231706]}] //当前单位坐标 watertForm:FormGroup //gis右上角水源表单 waterList = [ - {id:'0',name:'消火栓',selected:false}, - {id:'1',name:'消防水池',selected:false}, - {id:'2',name:'天然水源',selected:false}, + {id:'0',name:'消火栓',selected:true}, + {id:'1',name:'消防水池',selected:true}, + {id:'2',name:'天然水源',selected:true}, ] - waterAreaDefault:any = '0' //默认水源范围 + waterAreaDefault:any = '5000' //默认水源范围 selectedWaterList:any = [] //选择提交的水源 //地图范围圆圈---水源 circleofwater = new AMap.Circle({ @@ -32,11 +45,11 @@ export class WaterRoadComponent implements OnInit { strokeStyle: 'dashed', strokeDasharray: [10, 10], // 线样式还支持 'dashed' - fillColor: '#ee2200', + fillColor: '#1791fc', zIndex: 50, }) - ngOnInit(): void { + async ngOnInit(): Promise { this.watertForm = this.fb.group({ waters:this.waterUnits(), allSelectedWater:new FormControl(), @@ -51,9 +64,10 @@ export class WaterRoadComponent implements OnInit { }) this.waterList.forEach(item => { if(item.selected){ - this.selectedWaterList.push(item.name) + this.selectedWaterList.push(item.id) } }) + await this.getUnitData() setTimeout(() => { this.creatMap() }, 0); @@ -75,69 +89,127 @@ export class WaterRoadComponent implements OnInit { //水源提交 waterSubmit(value){ - if(this.markers.length == 0){ - const config = new MatSnackBarConfig(); + if(!this.unitMarker){ + let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 - this.snackBar.open('请先选择一个单位','确定',config); + this.snackBar.open('请前往基本信息标注单位坐标','确定',config); }else{ - this.createwaterMarker() this.circleofwater.setRadius(Number(this.waterAreaDefault)) - this.circleofwater.setCenter(this.markers[0]._position) + this.circleofwater.setCenter(this.unitMarker._position) this.circleofwater.setMap(this.map) + + let Distance + let lnglat = new AMap.LngLat(this.unitData.location.x, this.unitData.location.y) // lng, lat 替换成传入的坐标 + + //如果选择当前的视野范围算出查询半径 if(this.waterAreaDefault == '0'){ this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds())/2) + Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.unitData.location.y) + }else{ + Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.unitData.location.y) } + this.getWaterData(Distance) } } - waterIconList = []; //展示的水源图标 - - //循环渲染出所有水源markers - createwaterMarker(){ - this.waterIconList.forEach((element,index) => { this.map.remove(element) }); //先删除所有标点 - this.waterIconList = [] - let waterType = this.selectedWaterList //筛选出展示的 水源类型 - if (waterType.length) { - let x = JSON.parse( JSON.stringify(this.markers[0]._position[0]) ) //中心标注的 坐标 - let y = JSON.parse( JSON.stringify(this.markers[0]._position[1]) ) //中心标注的 坐标 - let positonList = [0.015, -0.035, 0.045, 0.061, -0.013, 0.029] - // 创建一个 Icon - let startIcon = new AMap.Icon({ - image: '../../../assets/images/fireHydrant.png', - imageSize: new AMap.Size(20, 20), - }); - positonList.forEach((item,index)=>{ - let marker = new AMap.Marker({ - map: this.map, - position: index%2==0? JSON.parse( JSON.stringify([x+item,y-item]) ) : JSON.parse( JSON.stringify([x-item,y+item]) ), - icon: startIcon, - }); - this.waterIconList.push(marker) - }) - positonList.forEach((item,index)=>{ - let marker = new AMap.Marker({ - map: this.map, - position: index%2==0? JSON.parse( JSON.stringify([x+item,y+item]) ) : JSON.parse( JSON.stringify([x-item,y-item]) ), - icon: startIcon, - }); - this.waterIconList.push(marker) - }) - } else { - const config = new MatSnackBarConfig(); + //获得水源列表 + getWaterData(Distance){ + if(this.selectedWaterList.length == 0){ + let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('请选择水源类型','确定',config); + }else{ + let paramsdata:any = { + PageSize:99999, + Lon : this.unitData.location.x, + Lat : this.unitData.location.y, + Distance : Distance, + WaterSourceTypes :this.selectedWaterList + } + console.log('paramsdata',paramsdata) + this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => { + console.log('所有水源',data) + this.createwaterMarker(data.items) + }) } + + } + + + //循环渲染出所有水源markers + waterCluster:any //水源聚合实例 + createwaterMarker(list){ + let waterMarkerArrcluster = [] + this.waterCluster ? this.waterCluster.setData([]) : null + list.forEach((item) => { + let image + if(item.waterSourceType == 0){//消火栓 + image = '/assets/waterMarkers/市政消火栓.png' + }else if(item.waterSourceType == 1){//消防水池 + image = '/assets/waterMarkers/方形储水池.png' + }else if(item.waterSourceType == 2){//天然水源 + image = '/assets/waterMarkers/天然水源.png' + } + // 用于点集合的数组 + waterMarkerArrcluster.push({ + lnglat : [item.location.x,item.location.y], + image : image, + data : item + }) + }) + this.map.plugin(["AMap.MarkerClusterer"],() => { + var gridSize = 60 + var count = waterMarkerArrcluster.length; + var _renderClusterMarker = function (context) { + var factor = Math.pow(context.count / count, 1 / 18); + var div = document.createElement('div'); + var Hue = 180 - factor * 180; + var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; + var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; + var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; + var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; + div.style.backgroundColor = bgColor; + var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); + div.style.width = div.style.height = size + 'px'; + div.style.border = 'solid 1px ' + borderColor; + div.style.borderRadius = size / 2 + 'px'; + div.style.boxShadow = '0 0 5px ' + shadowColor; + div.innerHTML = context.count; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); + context.marker.setContent(div) + }; + var _renderMarker = (context)=> { + var content = ``; + var offset = new AMap.Pixel(-12.5, -12.5); + context.marker.setContent(content) + context.marker.setOffset(offset) + } + this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 + renderMarker: _renderMarker, // 自定义非聚合点样式 + }); + this.waterCluster.on('click',(e)=>{ + if(e.clusterData.length == 1){ + + } + }) + }); + } //取消显示水源 resetWater(){ - this.waterIconList.forEach((element,index) => { this.map.remove(element) }); //先删除所有标点 - this.waterIconList = [] this.watertForm.reset() this.watertForm.controls.areaWater.setValue('0') this.map.remove(this.circleofwater) + this.waterCluster.setData([]) } //计算两地距离 @@ -158,56 +230,35 @@ export class WaterRoadComponent implements OnInit { } //地图初始化 + unitMarker:any//单位标点 + newPositionMarkerContent:any = + '
' + + ' ' + + '
' creatMap(){ - let that = this - var layer = new AMap.createDefaultLayer({ - zooms:[3,20], //可见级别 - visible:true, //是否可见 - opacity:1, //透明度 - zIndex:0, //叠加层级 - resizeEnable: true //是否监控地图容器尺寸变化, - }) - that.map = new AMap.Map('center',{ - layers:[layer], //当只想显示标准图层时layers属性可缺省, + this.map = new AMap.Map('center',{ + zoom: 13, //初始地图级别 }); - that.map.setCity('上海市'); + if(this.unitData.location && this.unitData.location.x){ + this.map.setCenter([this.unitData.location.x,this.unitData.location.y]); + this.unitMarker = new AMap.Marker({ + position: [this.unitData.location.x,this.unitData.location.y], + content: this.newPositionMarkerContent, + offset: new AMap.Pixel(-10, -13) + }) + // 将 markers 添加到地图 + this.map.add(this.unitMarker); + this.waterSubmit(1) + }else{ + this.map.setCity('上海市'); + let config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请先前往基本信息标注单位位置','确定',config); + } + } } - -//编辑水源道路情况 -@Component({ - selector: 'app-editBuilding', - templateUrl: './edittext.html', - styleUrls: ['./water-road.component.scss'] -}) -export class EditText { - - constructor(public snackBar: MatSnackBar,public dialog: MatDialog,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) { } - textcontant:any = localStorage.getItem(sessionStorage.getItem("companyId") + "waterroad") || ""//输入内容 - iseditsix = true - ngOnInit(): void { - if(sessionStorage.getItem("six") == "look"){ - this.iseditsix = false - }else if(sessionStorage.getItem("six") == "edit"){ - this.iseditsix = true - } - } - - - //确定 - ok(){ - localStorage.setItem(sessionStorage.getItem("companyId") + "waterroad",this.textcontant) - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('保存成功','确定',config); - this.dialogRef.close(); - } - //取消 - cancel(){ - this.dialogRef.close(); - } -} \ No newline at end of file diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts index 2f7db1f..413b796 100644 --- a/src/app/pages/login/login.component.ts +++ b/src/app/pages/login/login.component.ts @@ -32,17 +32,23 @@ export class LoginComponent implements OnInit { sessionStorage.setItem("refreshToken",data.refreshToken); this.http.get('/api/Account/NavMenus').subscribe((data:any)=>{ - let isHave = data.find(item=>{ return item.url == "/home"}) - + let isHave = data.find(item=>{ return item.url == "/statisticanalysis/home"}) + let isHaveGis = data.find(item=>{ return item.url == "/gis"}) if (isHave) { - this.router.navigate([`/home`]) - } else { + this.router.navigate([`/statisticanalysis/home`]) + } else if(isHaveGis){ + this.router.navigate([`/gis`]) + } else if(data.length != 0){ data.forEach(item => { if(item.url){ this.router.navigate([`/keyUnit`]) return } }); + }else{ + this.snackBar.open('该用户角色未分配任何菜单', '确定', { + duration: 3000 + }); } }) @@ -70,7 +76,7 @@ export class LoginComponent implements OnInit { sessionStorage.setItem("token",data.token); sessionStorage.setItem("refreshToken",data.refreshToken); this.token.startUp() - this.router.navigate(['/ui/userdata']) + this.router.navigate(['/keyUnit']) this.snackBar.open('已自动登录', '确定', {duration: 3000}); }) } //if diff --git a/src/app/ui/collection-tools-plan/collection-tools.component.ts b/src/app/ui/collection-tools-plan/collection-tools.component.ts index c591b0f..f797fd0 100644 --- a/src/app/ui/collection-tools-plan/collection-tools.component.ts +++ b/src/app/ui/collection-tools-plan/collection-tools.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Inject, ViewChild,ElementRef,Renderer2, ViewContainerRef } from '@angular/core'; +import { Component, OnInit, Inject, ViewChild,ElementRef,Renderer2, ViewContainerRef, NgZone } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; @@ -27,7 +27,7 @@ export class CollectionToolsPlanComponent implements OnInit { @ViewChild('canvas',{static: true}) canvas:WorkingAreaComponent; //父组件中获得子组件的引用 - constructor(private maskLayerService:MaskLayerService,private tabbarService: TabbarAndScoreService,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService,private router:Router,private route:ActivatedRoute) { } + constructor(public _ngZone:NgZone,private maskLayerService:MaskLayerService,private tabbarService: TabbarAndScoreService,private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private element: ElementRef,public canvasData: CanvasShareDataService,private router:Router,private route:ActivatedRoute) { } @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; // tree配置 private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数 @@ -770,16 +770,17 @@ export class CollectionToolsPlanComponent implements OnInit { //多选状态动态属性素材input框值改变 multipleAssetInputChange(i,e){ e.stopPropagation() - this.multipleAssetData.forEach(item=>{ - // console.log(item) - item.assetData.PropertyInfos.forEach(element => { - if(element.PropertyName == i.PropertyName){ - element.PropertyValue = i.PropertyValue - this.canvas.refreshIcon(item.assetData.Id) - this.canvasData.isChange = true - } + setTimeout(() => { + this.multipleAssetData.forEach(item=>{ + item.assetData.PropertyInfos.forEach(element => { + if(element.PropertyName == i.PropertyName){ + element.PropertyValue = i.PropertyValue + this.canvas.refreshIcon(item.assetData.Id) + this.canvasData.isChange = true + } + }) }) - }) + }, 0); } //多选状态动态属性素材radio框值改变 multipleAssetRadioChange(i,value){ @@ -799,7 +800,6 @@ export class CollectionToolsPlanComponent implements OnInit { multipleSupplyArea(i,e){ e.stopPropagation() this.multipleAssetData.forEach(item=>{ - // console.log(item) item.assetData.PropertyInfos.forEach(element => { if(element.PropertyName == i.PropertyName){ element.PropertyValue = i.PropertyValue