From 44cc75e6486657a765bb1a843d3f19275fd89768 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 17 Aug 2022 10:10:24 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E6=A0=87=E7=BB=98=E5=9C=B0?= =?UTF-8?q?=E7=90=86=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../unit-details/unit-details.component.html | 229 ++++++++------ .../unit-details/unit-details.component.scss | 193 +++++++++--- .../unit-details/unit-details.component.ts | 293 ++++++++++++++++-- .../home/basic-info/unit/unit.component.ts | 2 +- src/assets/images/close.png | Bin 0 -> 521 bytes src/assets/images/newposition.png | Bin 0 -> 1426 bytes src/assets/images/ok.png | Bin 0 -> 561 bytes src/assets/images/oldposition.png | Bin 0 -> 1197 bytes src/index.html | 1 + src/styles.scss | 62 +++- 10 files changed, 601 insertions(+), 179 deletions(-) create mode 100644 src/assets/images/close.png create mode 100644 src/assets/images/newposition.png create mode 100644 src/assets/images/ok.png create mode 100644 src/assets/images/oldposition.png diff --git a/src/app/home/basic-info/unit-details/unit-details.component.html b/src/app/home/basic-info/unit-details/unit-details.component.html index bfc9306..59e47a9 100644 --- a/src/app/home/basic-info/unit-details/unit-details.component.html +++ b/src/app/home/basic-info/unit-details/unit-details.component.html @@ -1,7 +1,7 @@
- +
@@ -55,11 +55,12 @@ 所属救援站 + [nzExpandedIcon]="multiExpandedIconTpl" [nzDropdownClassName]="'maxHeightTreeSelect'" + [nzAllowClear]="false"> - + 所属大队 + [nzExpandedIcon]="multiExpandedIconTpl" [nzDropdownClassName]="'maxHeightTreeSelect'" + [nzAllowClear]="false"> - + --> - 单位类型 - + 单位类型 + @@ -104,12 +106,49 @@
-
+
+ +
+ +
+ +
+
+ + 经度 : + +
+ {{markerPosition.x || '暂未标注'}} +
+
+
+ + 纬度 : + +
+ {{markerPosition.y || '暂未标注'}} +
+
+
+ + 位置 +
+
+
-
+
- - + + - - + + - - + + - + @@ -661,7 +878,7 @@ export class UnitDetailsComponent implements OnInit { @@ -678,7 +895,7 @@ export class UnitDetailsComponent implements OnInit { @@ -720,7 +937,7 @@ export class UnitDetailsComponent implements OnInit { @@ -774,7 +991,7 @@ export class UnitDetailsComponent implements OnInit { ` const fileData = asBlob(htmlString).then((data: any) => { - saveAs(data, this.datas.basicInfo.name+'基本信息.docx') // 保存为docx文件 + saveAs(data, this.datas.basicInfo.name + '基本信息.docx') // 保存为docx文件 }) } @@ -796,7 +1013,7 @@ export class UnitDetailsComponent implements OnInit { } } } - + for (const key in this.datas) { if (Object.prototype.hasOwnProperty.call(this.datas, key)) { const element = this.datas[key]; @@ -825,9 +1042,12 @@ export class UnitDetailsComponent implements OnInit { } } } - let num4=(num+num2+num3-1)/56 - this.integrity = Math.floor(num4*100)/100 - console.log(num,num2,num3,num4); + let num4 = (num + num2 + num3 - 1) / 57 + this.integrity = Math.floor(num4 * 100) / 100 + console.log(num, num2, num3, num4); + this.datas.basicInfo.positionCoordinates = { + x: this.markerPosition.x, y: this.markerPosition.y + } let body = { id: this.id, companyName: this.datas.basicInfo.name, @@ -839,14 +1059,14 @@ export class UnitDetailsComponent implements OnInit { useNature: this.datas.basicInfo.nature, buildingTypeId: this.validateForm.value.buildingTypeId, integrity: this.integrity, - data:JSON.stringify(this.datas) + data: JSON.stringify(this.datas) } - this.http.patch('/api/Companies/' + this.id, body).subscribe(data => { - console.log(data); - - this.message.create('success', '保存成功！'); - this.getCompanies() - + this.http.patch('/api/Companies/' + this.id, body).subscribe(data => { + console.log(data); + + this.message.create('success', '保存成功！'); + this.getCompanies() + }) } BuildingTypes @@ -858,11 +1078,10 @@ export class UnitDetailsComponent implements OnInit { }) } getCompanies() { - this.http.get('/api/Companies/' + this.id).subscribe((data: any) => { console.log(data); - if(data.data){ - this.datas=JSON.parse(data.data) + if (data.data) { + this.datas = JSON.parse(data.data) } this.datas.basicInfo.name = data.companyName this.datas.basicInfo.addr = data.address @@ -876,6 +1095,14 @@ export class UnitDetailsComponent implements OnInit { buildingTypeId: data.buildingTypeId }) + + if (this.datas.basicInfo.positionCoordinates && (this.datas.basicInfo.positionCoordinates.x != 0 && this.datas.basicInfo.positionCoordinates.y != 0)) {//已标注 + this.isMapLabel = true + this.markerPosition = this.datas.basicInfo.positionCoordinates + } else {//未标注 + this.isMapLabel = false + } + this.labelGis() }) } nodes: any = [] diff --git a/src/app/home/basic-info/unit/unit.component.ts b/src/app/home/basic-info/unit/unit.component.ts index b4b26dd..3ed6c28 100644 --- a/src/app/home/basic-info/unit/unit.component.ts +++ b/src/app/home/basic-info/unit/unit.component.ts @@ -146,7 +146,7 @@ export class UnitComponent implements OnInit { } } - let integrity: number = num / 56 + let integrity: number = num / 57 let body = { companyName: instance.validateForm.value.unitname, directorName: instance.validateForm.value.person, diff --git a/src/assets/images/close.png b/src/assets/images/close.png new file mode 100644 index 0000000000000000000000000000000000000000..c33434e15b7e4463fd5b38ba5b9d2be791771102 GIT binary patch literal 521 zcmV+k0`~ohP)U1r1`v$#cO75(5C9m!|{DF(5sr8{s3%F1Z7`VIlJ5*sl5Si zly>g{8{w;}HMiUk5A2lqFMo?Hp?8i_CyS5ObE`{Pr7D`!GDb)~_)Ytl;HCKYIhh-0iD+km5 z@#!!L2U+#hWgFoS$cczq5*k@&BFrnYwyYBVMtYQM$QU#>56dbW9X7kT3+Q|1lzHH& z{IpRC;KY*cx$4KQLC+x3(_E-8`4&@*ciKB@#0Gd3DWfuxa;Ch0u|^?qF5WyogV8bs zi;VYd*i(qUL2#OhO=NHG6Kv=HuUms1H#^YB|N84Wb$dsRhZ+t$sx`Oc;owz1^!SRS zG|1ZSUkzAe%axfsU=t<}u7KA_uaGTa!z(~^FnISK#B@e1*z00000 LNkvXXu0mjfnb7Zt literal 0 HcmV?d00001 diff --git a/src/assets/images/newposition.png b/src/assets/images/newposition.png new file mode 100644 index 0000000000000000000000000000000000000000..98bf1bb148f1027506d408b138c181c46909a509 GIT binary patch literal 1426 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 LNkvXXu0mjfH{dFy literal 0 HcmV?d00001 diff --git a/src/index.html b/src/index.html index f519831..02e58e9 100644 --- a/src/index.html +++ b/src/index.html @@ -13,4 +13,5 @@ + diff --git a/src/styles.scss b/src/styles.scss index 2710b17..eb6a22f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -212,6 +212,7 @@ app-root { .panelheadernamered { background-color: #FF404D; } + .spin { background: rgb(134, 131, 131, 0.2); position: absolute; @@ -220,4 +221,63 @@ app-root { display: flex; align-items: center; justify-content: center; -} \ No newline at end of file +} + +#setPosition { + .custom-content-marker { + position: relative; + // border: 1px solid red; + width: 68px; + height: 68px; + overflow: hidden; + display: flex; + justify-content: center; + + .positionimg { + width: 30px; + height: 36px; + } + } + + .custom-content-marker .btnbox { + position: absolute; + left: 0px; + bottom: 0px; + width: 68px; + height: 30px; + background: #ffffff; + border-radius: 60px; + color: #ebebeb; + display: flex; + justify-content: space-around; + box-sizing: border-box; + padding: 0 5px; + align-items: center; + + img { + width: 20px; + height: 20px; + cursor: pointer; + } + } + + .custom-content-marker .btnbox2 { + position: absolute; + left: 0px; + bottom: 0px; + width: 68px; + height: 30px; + opacity: 0; + border-radius: 60px; + color: #ebebeb; + display: flex; + justify-content: space-around; + box-sizing: border-box; + padding: 0 5px; + align-items: center; + } + + .custom-content-marker .close-btn:hover { + background: #666; + } +}
-

重点部位情况（一）

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:1pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; height:35.1pt; padding-left:4.9pt; padding-right:5.03pt; vertical-align:middle; width:30.05pt; writing-mode:tb-rl"> +

重点部位情况（一）

 -

重点部位名称

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:48.95pt"> +

重点部位名称

 -

- -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:35.45pt"> +

+ +

-

重点部位所在位置

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:54.8pt"> +

重点部位所在位置

 -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:42.15pt"> +

-

建筑结构

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:34.55pt"> +

建筑结构

 -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:43.15pt"> +

-

使用性质

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:36.55pt"> +

使用性质

 -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:65.6pt"> +

-

主要危险性

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:48.95pt"> +

主要危险性

 -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:1pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.4pt; padding-right:4.9pt; vertical-align:middle; width:377.05pt"> +

-

重点部位情况（二）

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-left-color:#000000; border-left-style:solid; border-left-width:1pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; height:35.1pt; padding-left:4.9pt; padding-right:5.03pt; vertical-align:middle; width:30.05pt; writing-mode:tb-rl"> +

重点部位情况（二）

 -

重点部位名称

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:48.95pt"> +

重点部位名称

 -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:35.45pt"> +

-

重点部位所在位置

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:54.8pt"> +

重点部位所在位置

 -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:42.15pt"> +

-

建筑结构

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:34.55pt"> +

建筑结构

 -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:43.15pt"> +

-

使用性质

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:36.55pt"> +

使用性质

 -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:65.6pt"> +

-

主要危险性

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:0.75pt; padding-left:5.4pt; padding-right:5.03pt; vertical-align:middle; width:48.95pt"> +

主要危险性

 -

+ style="border-bottom-color:#000000; border-bottom-style:solid; border-bottom-width:0.75pt; border-right-color:#000000; border-right-style:solid; border-right-width:1pt; border-top-color:#000000; border-top-style:solid; border-top-width:0.75pt; padding-left:5.4pt; padding-right:4.9pt; vertical-align:middle; width:377.05pt"> +

@@ -803,8 +841,5 @@

 

- - - \ No newline at end of file diff --git a/src/app/home/basic-info/unit-details/unit-details.component.scss b/src/app/home/basic-info/unit-details/unit-details.component.scss index 85db2fa..017d4d3 100644 --- a/src/app/home/basic-info/unit-details/unit-details.component.scss +++ b/src/app/home/basic-info/unit-details/unit-details.component.scss @@ -1,55 +1,154 @@ .detailsbox { - width: 100%; - + width: 100%; + + text-align: left; + box-sizing: 100%; + + .form { + pointer-events: none; + } + + .top { text-align: left; - box-sizing: 100%; - .form{ - pointer-events: none; + margin: 20px; + display: flex; + // border-bottom: 1px solid #eee; + color: #000; + + div { + width: 50%; } - .top { - text-align: left; - margin: 20px; - display: flex; - // border-bottom: 1px solid #eee; - color: #000; - div{ - width: 50%; - } - button{ - margin-right: 10px; - } + + button { + margin-right: 10px; + } + } + + .buttons { + display: flex; + + .button-left { + width: 50%; + + button { + margin: 10px 15px; + } + } + + .button-right { + width: 50%; + text-align: right; + + button { + margin: 10px 15px; + } } - .buttons{ + } + + .title { + color: #000; + margin: 20px 15px; + background: #EFF1F5; + height: 35px; + line-height: 35px; + border-radius: 10px; + padding-left: 10px; + } + + .content { + border: 1px solid; + + .mainright { + color: #000; + float: left; + flex: 1; + height: 430px; + margin-right: 100px; + position: relative; + + .searchinput { display: flex; - .button-left{ - width: 50%; - button{ - margin: 10px 15px; - } + position: absolute; + left: 0; + top: 0; + } + + .gistopbox { + position: absolute; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); + border-radius: 4px; + left: 5%; + top: 10px; + width: 90%; + height: 46px; + background: #FFFFFF; + display: flex; + justify-content: space-around; + align-items: center; + + .positionItem { + width: 35%; + height: 35px; + display: flex; + align-items: center; + + .itemNum { + background: #F2F2F2; + box-sizing: border-box; + padding-left: 10px; + width: 80%; + height: 32px; + line-height: 32px; + margin-left: 5px; + border-radius: 4px; + } } - .button-right{ - width: 50%; - text-align: right; - button{ - margin: 10px 15px; - } + + .setPosition { + cursor: pointer; + width: 15%; + height: 32px; + background: #2196F3; + color: #fff; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; } + + .inputBox { + width: 63%; + display: flex; + align-items: center; + + .positionInput { + border: 0; + border-radius: 6px; + width: 90%; + height: 34px; + background: #F2F2F2; + margin-left: 8px; + box-sizing: border-box; + padding-left: 10px; + } + } + + } + + .hidden { + opacity: 0; + z-index: -1; + } + + .show { + opacity: 1; + z-index: 1; + } } - .title{ - color: #000; - margin: 20px 15px; - background: #EFF1F5; - height: 35px; - line-height: 35px; - border-radius: 10px; - padding-left: 10px; - } - .content{ - border: 1px solid; - } - .aaaa{ - // background-color: #eee; - width: 100%; - margin: 0 auto ; - } -} \ No newline at end of file + } + + .formbox { + width: 100%; + margin: 0 auto; + } +} diff --git a/src/app/home/basic-info/unit-details/unit-details.component.ts b/src/app/home/basic-info/unit-details/unit-details.component.ts index ad8d68e..7eb9d64 100644 --- a/src/app/home/basic-info/unit-details/unit-details.component.ts +++ b/src/app/home/basic-info/unit-details/unit-details.component.ts @@ -8,6 +8,7 @@ import { HttpClient } from '@angular/common/http'; import { asBlob } from 'html-docx-js-typescript' // 要保存这个docx文件推荐引入file-saver哦，你可以用npm i -D file-saver来安装 import { saveAs } from 'file-saver' +declare var AMap: any; @Component({ selector: 'app-unit-details', templateUrl: './unit-details.component.html', @@ -16,10 +17,10 @@ import { saveAs } from 'file-saver' export class UnitDetailsComponent implements OnInit { @ViewChild('box') box: ElementRef; - constructor(private message:NzMessageService, private router: Router, private toTree: TreeService, private fb: FormBuilder, private http: HttpClient, private renderer: Renderer2, private el: ElementRef) { + constructor(private message: NzMessageService, private router: Router, private toTree: TreeService, private fb: FormBuilder, private http: HttpClient, private renderer: Renderer2, private el: ElementRef, public renderer2: Renderer2, private elementRef: ElementRef) { } - disableds=false + disableds = false datas = { basicInfo: { name: "", @@ -37,7 +38,7 @@ export class UnitDetailsComponent implements OnInit { west: "", north: "", routeAndTime: "", - + positionCoordinates: { x: 0, y: 0 } }, facilities: { controlPosition: "", @@ -47,7 +48,7 @@ export class UnitDetailsComponent implements OnInit { supplyMode: "", waterSources: "", waterSourcesPosition: "", - system:{ + system: { alarm: false, spray: false, broadcast: false, @@ -91,10 +92,9 @@ export class UnitDetailsComponent implements OnInit { id = "" integrity = 0 ngOnInit(): void { - console.log(this.router); this.id = this.router['browserUrlTree'].queryParams.id - if(this.router['browserUrlTree'].queryParams.pattern!="edit"){ - this.disableds=true + if (this.router['browserUrlTree'].queryParams.pattern != "edit") { + this.disableds = true } this.validateForm = this.fb.group({ directorName: [null], @@ -103,11 +103,228 @@ export class UnitDetailsComponent implements OnInit { buildingTypeId: [null] }); - console.log(this.validateForm); this.getAllOrganization() this.getCompanies() this.getBuildingTypes() } + + + + isMapLabel: boolean + //地图标注位置 + markerPosition: any = { x: 0, y: 0 }//单位坐标 + map: any //地图实例 + isGisTopBox: boolean = false//点击位置按钮 + isGisTopBoxTwo: boolean = false//点击位置按钮 + oldPositionMarker: any //旧位置marker实例 + newPositionMarker: any //新位置marker实例 + + newPositionMarkerContent: any = + '
' + + ' ' + + '
' + + '
' + newPositionMarkerContentBtn: any = + '
' + + ' ' + + '
|
' + + '
' + oldPositionMarkerContent: any = + '
' + + ' ' + + '
' + + '
' + //初始化地图 + searchTitle: any//搜索内容 + placeSearch: any//地址搜索类 + search() { + this.placeSearch.search(this.searchTitle, (status, result) => { + // 搜索成功时，result即是对应的匹配数据 + if (result.info == "OK") { + this.newPositionMarker.setPosition([result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat]) + this.markerPosition2 = { x: result.poiList.pois[0].location.lng, y: result.poiList.pois[0].location.lat } + this.map.setCenter([result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat]); //设置地图中心点 + } else { + alert('查询不到输入地址信息') + } + }) + } + //初始化地图 + markerPosition2 + labelGis() { + console.log('初始化地图') + this.map = new AMap.Map('container', { + zoom: 12 + }) + this.map.on('complete', () => { + this.isGisTopBox = true + }); + //输入提示 + var autoOptions = { + input: "tipinput" + }; + AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], () => { + var auto = new AMap.AutoComplete(autoOptions); + this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 + auto.on("select", (e) => { + this.newPositionMarker.setPosition([e.poi.location.lng, e.poi.location.lat]) + this.markerPosition2 = { x: e.poi.location.lng, y: e.poi.location.lat } + this.map.setCenter([e.poi.location.lng, e.poi.location.lat]); //设置地图中心点 + });//注册监听，当选中某条记录时会触发 + }); + + if (this.isMapLabel) {//如果已经标注单位坐标 + console.log('已标注单位位置') + this.map.setCenter([this.datas.basicInfo.positionCoordinates.x, this.datas.basicInfo.positionCoordinates.y]); + this.oldPositionMarker = new AMap.Marker({ + position: [this.datas.basicInfo.positionCoordinates.x, this.datas.basicInfo.positionCoordinates.y], + content: this.newPositionMarkerContent, + offset: new AMap.Pixel(-34, -36) + }) + // 将 markers 添加到地图 + this.map.add(this.oldPositionMarker); + } else { + // console.log('未标注单位位置') + this.map.setCity('济南'); + } + } + + //点击位置按钮 + setPosition() { + + if(this.disableds){ + return + } + + + this.isGisTopBox = false + this.isGisTopBoxTwo = true + if (this.isMapLabel) {//如果已经标注单位坐标 + // console.log('已标注单位位置') + if (this.oldPositionMarker) { + this.oldPositionMarker.setContent(this.oldPositionMarkerContent) + } + if (this.newPositionMarker) { + this.newPositionMarker.setContent(this.oldPositionMarkerContent) + } + this.newPositionMarker = new AMap.Marker({ + draggable: true, + position: [this.markerPosition.x, this.markerPosition.y], + content: this.newPositionMarkerContentBtn, + offset: new AMap.Pixel(-34, -36) + }); + this.map.add(this.newPositionMarker); + if (this.markerPosition.x && this.markerPosition.x != 0) { + this.markerPosition2 = { x: this.markerPosition.x, y: this.markerPosition.y } + } else { + this.markerPosition2 = { x: this.map.getCenter().lng, y: this.map.getCenter().lat } //获取当前地图中心位置 + } + this.newPositionMarker.on('dragend', (e) => { + let lnglat = this.map.containerToLngLat(e.pixel) + this.markerPosition2 = { x: lnglat.KL, y: lnglat.kT } + }) + this.newPositionMarker.on('dragging', (e) => { + let lnglat = this.map.containerToLngLat(e.pixel) + this.newPositionMarker.setPosition(lnglat); + }) + //点击确定 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'), 'click', (event) => { + this.map.clearMap(); + this.isGisTopBox = true + this.isGisTopBoxTwo = false + this.newPositionMarker = new AMap.Marker({ + position: [this.markerPosition2.x, this.markerPosition2.y], + content: this.newPositionMarkerContent, + offset: new AMap.Pixel(-34, -36) + }); + this.markerPosition = this.markerPosition2 + this.map.add(this.newPositionMarker); + }) + //点击取消 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'), 'click', (event) => { + this.isGisTopBox = true + this.isGisTopBoxTwo = false + this.map.clearMap(); + this.newPositionMarker = new AMap.Marker({ + position: [this.markerPosition.x, this.markerPosition.y], + content: this.newPositionMarkerContent, + offset: new AMap.Pixel(-34, -36) + }); + this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 + this.map.add(this.newPositionMarker); + }) + + } else { + // console.log('未标注单位位置') + if (this.newPositionMarker) { + this.newPositionMarker.setContent(this.oldPositionMarkerContent) + } + let center + //this.markerPosition---单位坐标 + if (this.markerPosition.x && this.markerPosition.x != 0) { + center = [this.markerPosition.x, this.markerPosition.y] + } else { + center = this.map.getCenter(); //获取当前地图中心位置 + // console.log('获取当前地图中心位置', center) + this.map.setCenter(center); + } + + this.newPositionMarker = new AMap.Marker({ + draggable: true, + position: center, + content: this.newPositionMarkerContentBtn, + offset: new AMap.Pixel(-34, -36) + }); + this.map.add(this.newPositionMarker); + + if (this.markerPosition.x && this.markerPosition.x != 0) { + this.markerPosition2 = { x: this.markerPosition.x, y: this.markerPosition.y } + } else { + this.markerPosition2 = { x: this.map.getCenter().lng, y: this.map.getCenter().lat } //获取当前地图中心位置 + } + this.newPositionMarker.on('dragend', (e) => { + let lnglat = this.map.containerToLngLat(e.pixel) + this.markerPosition2 = { x: lnglat.KL, y: lnglat.kT } + }) + this.newPositionMarker.on('dragging', (e) => { + let lnglat = this.map.containerToLngLat(e.pixel) + this.newPositionMarker.setPosition(lnglat); + }) + //点击确定 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'), 'click', (event) => { + this.isGisTopBox = true + this.isGisTopBoxTwo = false + this.markerPosition = this.markerPosition2 + this.map.clearMap(); + this.newPositionMarker = new AMap.Marker({ + position: [this.markerPosition.x, this.markerPosition.y], + content: this.newPositionMarkerContent, + offset: new AMap.Pixel(-34, -36) + }); + this.newPositionMarker.setMap(this.map) + }) + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'), 'click', (event) => { + this.map.clearMap(); + this.isGisTopBox = true + this.isGisTopBoxTwo = false + if (this.markerPosition.x && this.markerPosition.x != 0) {//说明之前标过点 + this.newPositionMarker = new AMap.Marker({ + position: [this.markerPosition.x, this.markerPosition.y], + content: this.newPositionMarkerContent, + offset: new AMap.Pixel(-34, -36) + }); + this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 + this.map.add(this.newPositionMarker); + } + })//取消 + } + + } + + + + + listOfData: any[] = []; listOfData2: any[] = []; @@ -619,7 +836,7 @@ export class UnitDetailsComponent implements OnInit {

`+this.datas.KeyParts[0].keyparts+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].keyparts + `

 @@ -629,7 +846,7 @@ export class UnitDetailsComponent implements OnInit {

`+this.datas.KeyParts[0].keypartsposition+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].keypartsposition + `

 @@ -639,7 +856,7 @@ export class UnitDetailsComponent implements OnInit {

`+this.datas.KeyParts[0].buildingstructure+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].buildingstructure + `

 @@ -649,7 +866,7 @@ export class UnitDetailsComponent implements OnInit {

`+this.datas.KeyParts[0].useNature+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].useNature + `

`+this.datas.KeyParts[0].danger+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].danger + `

`+this.datas.KeyParts[1].keyparts+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].keyparts + `

 @@ -688,7 +905,7 @@ export class UnitDetailsComponent implements OnInit {

`+this.datas.KeyParts[1].keypartsposition+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].keypartsposition + `

 @@ -698,7 +915,7 @@ export class UnitDetailsComponent implements OnInit {

`+this.datas.KeyParts[1].buildingstructure+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].buildingstructure + `

 @@ -708,7 +925,7 @@ export class UnitDetailsComponent implements OnInit {

`+this.datas.KeyParts[1].useNature+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].useNature + `

`+this.datas.KeyParts[1].danger+`

+ style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].danger + `