Browse Source

[新增]标绘地理位置

非煤矿山灾害智能感知和预警系统
邵佳豪 3 years ago
parent
commit
44cc75e648
  1. 89
      src/app/home/basic-info/unit-details/unit-details.component.html
  2. 125
      src/app/home/basic-info/unit-details/unit-details.component.scss
  3. 279
      src/app/home/basic-info/unit-details/unit-details.component.ts
  4. 2
      src/app/home/basic-info/unit/unit.component.ts
  5. BIN
      src/assets/images/close.png
  6. BIN
      src/assets/images/newposition.png
  7. BIN
      src/assets/images/ok.png
  8. BIN
      src/assets/images/oldposition.png
  9. 1
      src/index.html
  10. 60
      src/styles.scss

89
src/app/home/basic-info/unit-details/unit-details.component.html

@ -55,7 +55,8 @@
<nz-form-label [nzSpan]="7" nzFor="所属救援站">所属救援站</nz-form-label>
<nz-form-control [nzSpan]="12">
<nz-tree-select [nzNodes]="nodes" nzShowSearch nzPlaceHolder="所属机构" formControlName="organizationId"
[nzExpandedIcon]="multiExpandedIconTpl" [nzDropdownClassName]="'maxHeightTreeSelect'" [nzAllowClear]="false">
[nzExpandedIcon]="multiExpandedIconTpl" [nzDropdownClassName]="'maxHeightTreeSelect'"
[nzAllowClear]="false">
</nz-tree-select>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">
@ -72,7 +73,8 @@
<nz-form-label [nzSpan]="7" nzFor="所属大队">所属大队</nz-form-label>
<nz-form-control [nzSpan]="12">
<nz-tree-select [nzNodes]="nodes" nzShowSearch nzPlaceHolder="所属机构" formControlName="relatedOrganizationId"
[nzExpandedIcon]="multiExpandedIconTpl" [nzDropdownClassName]="'maxHeightTreeSelect'" [nzAllowClear]="false">
[nzExpandedIcon]="multiExpandedIconTpl" [nzDropdownClassName]="'maxHeightTreeSelect'"
[nzAllowClear]="false">
</nz-tree-select>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">
@ -104,12 +106,49 @@
</nz-form-item>
</form>
</div>
<div class="content-right" style="width: 50%;">
<div class="content-right mainright" style="width: 50%;" id="setPosition">
<div style="width: 100%;height: 100%;" id="container">
</div>
<div class="gistopbox" *ngIf="isGisTopBox">
<div class="positionItem">
<span>
经度 :
</span>
<div class="itemNum">
{{markerPosition.x || '暂未标注'}}
</div>
</div>
<div class="positionItem">
<span>
纬度 :
</span>
<div class="itemNum">
{{markerPosition.y || '暂未标注'}}
</div>
</div>
<div class="setPosition" (click)="setPosition()">
<!-- <i nz-icon nzType="send" nzTheme="outline"></i> -->
位置
</div>
</div>
<div class="gistopbox hidden" [ngClass]="{'show': isGisTopBoxTwo}">
<div class="inputBox">
<span>位置: </span>
<input name="position" [(ngModel)]="searchTitle" id="tipinput" class="positionInput" type="text"
autocomplete="off">
</div>
<div class="setPosition" (click)="search()">
搜索
</div>
</div>
</div>
</div>
<div [ngClass]="{'form': disableds}">
<div class="aaaa" #box>
<div class="formbox" #box>
<table cellspacing="0" cellpadding="0" style="border-collapse:collapse; margin: 0 auto; ">
<tr style="height:18.4pt">
<td colspan="20"
@ -647,8 +686,7 @@
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">
<input
[(ngModel)]="datas.KeyParts[0].keyparts" nz-input style="width:50px" type="text">
<input [(ngModel)]="datas.KeyParts[0].keyparts" nz-input style="width:50px" type="text">
</span></p>
</td>
<td colspan="3"
@ -659,8 +697,8 @@
<td colspan="3"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt"><input
[(ngModel)]="datas.KeyParts[0].keypartsposition" nz-input style="width:50px" type="text"></span></p>
style="font-family:宋体; font-size:9pt"><input [(ngModel)]="datas.KeyParts[0].keypartsposition" nz-input
style="width:50px" type="text"></span></p>
</td>
<td colspan="4"
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">
@ -670,8 +708,8 @@
<td colspan="3"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt"><input
[(ngModel)]="datas.KeyParts[0].buildingstructure" nz-input style="width:50px" type="text"></span></p>
style="font-family:宋体; font-size:9pt"><input [(ngModel)]="datas.KeyParts[0].buildingstructure" nz-input
style="width:50px" type="text"></span></p>
</td>
<td colspan="2"
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">
@ -681,8 +719,8 @@
<td colspan="2"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt"><input
[(ngModel)]="datas.KeyParts[0].useNature" nz-input style="width:50px" type="text"></span></p>
style="font-family:宋体; font-size:9pt"><input [(ngModel)]="datas.KeyParts[0].useNature" nz-input
style="width:50px" type="text"></span></p>
</td>
</tr>
<tr style="height:31.75pt">
@ -694,8 +732,8 @@
<td colspan="18"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt"><input
[(ngModel)]="datas.KeyParts[0].danger" nz-input style="width:250px" type="text"></span></p>
style="font-family:宋体; font-size:9pt"><input [(ngModel)]="datas.KeyParts[0].danger" nz-input
style="width:250px" type="text"></span></p>
</td>
</tr>
<tr style="height:35.1pt">
@ -712,8 +750,8 @@
<td
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt"><input
[(ngModel)]="datas.KeyParts[1].keyparts" nz-input style="width:50px" type="text"></span></p>
style="font-family:宋体; font-size:9pt"><input [(ngModel)]="datas.KeyParts[1].keyparts" nz-input
style="width:50px" type="text"></span></p>
</td>
<td colspan="3"
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">
@ -723,8 +761,8 @@
<td colspan="3"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt"><input
[(ngModel)]="datas.KeyParts[1].keypartsposition" nz-input style="width:50px" type="text"></span></p>
style="font-family:宋体; font-size:9pt"><input [(ngModel)]="datas.KeyParts[1].keypartsposition" nz-input
style="width:50px" type="text"></span></p>
</td>
<td colspan="4"
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">
@ -734,8 +772,8 @@
<td colspan="3"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt"><input
[(ngModel)]="datas.KeyParts[1].buildingstructure" nz-input style="width:50px" type="text"></span></p>
style="font-family:宋体; font-size:9pt"><input [(ngModel)]="datas.KeyParts[1].buildingstructure" nz-input
style="width:50px" type="text"></span></p>
</td>
<td colspan="2"
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">
@ -745,8 +783,8 @@
<td colspan="2"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt"><input
[(ngModel)]="datas.KeyParts[1].useNature" nz-input style="width:50px" type="text"></span></p>
style="font-family:宋体; font-size:9pt"><input [(ngModel)]="datas.KeyParts[1].useNature" nz-input
style="width:50px" type="text"></span></p>
</td>
</tr>
<tr style="height:31.75pt">
@ -758,8 +796,8 @@
<td colspan="18"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt"><input
[(ngModel)]="datas.KeyParts[1].danger" nz-input style="width:250px" type="text"></span></p>
style="font-family:宋体; font-size:9pt"><input [(ngModel)]="datas.KeyParts[1].danger" nz-input
style="width:250px" type="text"></span></p>
</td>
</tr>
<tr style="height:56pt">
@ -803,8 +841,5 @@
<p style="margin:0pt; orphans:0; text-align:justify; widows:0"><span style="-aw-bookmark-end:_目录"></span><span
style="font-family:Calibri; font-size:10.5pt">&#xa0;</span></p>
</div>
</div>
</div>

125
src/app/home/basic-info/unit-details/unit-details.component.scss

@ -3,39 +3,49 @@
text-align: left;
box-sizing: 100%;
.form{
.form {
pointer-events: none;
}
.top {
text-align: left;
margin: 20px;
display: flex;
// border-bottom: 1px solid #eee;
color: #000;
div{
div {
width: 50%;
}
button{
button {
margin-right: 10px;
}
}
.buttons{
.buttons {
display: flex;
.button-left{
.button-left {
width: 50%;
button{
button {
margin: 10px 15px;
}
}
.button-right{
.button-right {
width: 50%;
text-align: right;
button{
button {
margin: 10px 15px;
}
}
}
.title{
.title {
color: #000;
margin: 20px 15px;
background: #EFF1F5;
@ -44,12 +54,101 @@
border-radius: 10px;
padding-left: 10px;
}
.content{
.content {
border: 1px solid;
.mainright {
color: #000;
float: left;
flex: 1;
height: 430px;
margin-right: 100px;
position: relative;
.searchinput {
display: flex;
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;
}
}
.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;
}
.aaaa{
// background-color: #eee;
}
}
.hidden {
opacity: 0;
z-index: -1;
}
.show {
opacity: 1;
z-index: 1;
}
}
}
.formbox {
width: 100%;
margin: 0 auto ;
margin: 0 auto;
}
}

279
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 =
'<div class="custom-content-marker">' +
' <img class="positionimg" src="/assets/images/newposition.png">' +
' <div class="btnbox2"></div>' +
'</div>'
newPositionMarkerContentBtn: any =
'<div class="custom-content-marker">' +
' <img class="positionimg" src="/assets/images/newposition.png">' +
' <div class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
'</div>'
oldPositionMarkerContent: any =
'<div class="custom-content-marker">' +
' <img class="positionimg" src="/assets/images/oldposition.png">' +
' <div class="btnbox2"></div>' +
'</div>'
//初始化地图
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 {
<td
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[0].keyparts+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].keyparts + `</span></p>
</td>
<td colspan="3"
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">
@ -629,7 +846,7 @@ export class UnitDetailsComponent implements OnInit {
<td colspan="3"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[0].keypartsposition+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].keypartsposition + `</span></p>
</td>
<td colspan="4"
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">
@ -639,7 +856,7 @@ export class UnitDetailsComponent implements OnInit {
<td colspan="3"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[0].buildingstructure+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].buildingstructure + `</span></p>
</td>
<td colspan="2"
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">
@ -649,7 +866,7 @@ export class UnitDetailsComponent implements OnInit {
<td colspan="2"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[0].useNature+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].useNature + `</span></p>
</td>
</tr>
<tr style="height:31.75pt">
@ -661,7 +878,7 @@ export class UnitDetailsComponent implements OnInit {
<td colspan="18"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[0].danger+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[0].danger + `</span></p>
</td>
</tr>
<tr style="height:35.1pt">
@ -678,7 +895,7 @@ export class UnitDetailsComponent implements OnInit {
<td
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[1].keyparts+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].keyparts + `</span></p>
</td>
<td colspan="3"
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">
@ -688,7 +905,7 @@ export class UnitDetailsComponent implements OnInit {
<td colspan="3"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[1].keypartsposition+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].keypartsposition + `</span></p>
</td>
<td colspan="4"
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">
@ -698,7 +915,7 @@ export class UnitDetailsComponent implements OnInit {
<td colspan="3"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[1].buildingstructure+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].buildingstructure + `</span></p>
</td>
<td colspan="2"
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">
@ -708,7 +925,7 @@ export class UnitDetailsComponent implements OnInit {
<td colspan="2"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[1].useNature+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].useNature + `</span></p>
</td>
</tr>
<tr style="height:31.75pt">
@ -720,7 +937,7 @@ export class UnitDetailsComponent implements OnInit {
<td colspan="18"
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">
<p style="line-height:12pt; margin:0pt; orphans:0; text-align:center; widows:0"><span
style="font-family:宋体; font-size:9pt">`+this.datas.KeyParts[1].danger+`</span></p>
style="font-family:宋体; font-size:9pt">`+ this.datas.KeyParts[1].danger + `</span></p>
</td>
</tr>
<tr style="height:56pt">
@ -774,7 +991,7 @@ export class UnitDetailsComponent implements OnInit {
</body>
</html>`
const fileData = asBlob(htmlString).then((data: any) => {
saveAs(data, this.datas.basicInfo.name+'基本信息.docx') // 保存为docx文件
saveAs(data, this.datas.basicInfo.name + '基本信息.docx') // 保存为docx文件
})
}
@ -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,7 +1059,7 @@ 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);
@ -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 = []

2
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,

BIN
src/assets/images/close.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 521 B

BIN
src/assets/images/newposition.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/ok.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 561 B

BIN
src/assets/images/oldposition.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/index.html

@ -13,4 +13,5 @@
<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 src='https://webapi.amap.com/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346'></script>
</html>

60
src/styles.scss

@ -212,6 +212,7 @@ app-root {
.panelheadernamered {
background-color: #FF404D;
}
.spin {
background: rgb(134, 131, 131, 0.2);
position: absolute;
@ -221,3 +222,62 @@ app-root {
align-items: center;
justify-content: center;
}
#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;
}
}

Loading…
Cancel
Save