|
|
|
|
import { HttpClient } from '@angular/common/http';
|
|
|
|
|
import { Component, OnInit, Renderer2, ElementRef, Inject, NgZone, ViewChild } from '@angular/core';
|
|
|
|
|
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
|
|
|
|
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
|
|
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
|
|
|
|
|
import { ICircle, IDriving, IMap, IMouseTool } from '@src/modules/map/declare/map';
|
|
|
|
|
declare var AMap: any;
|
|
|
|
|
declare var QRCode: any;
|
|
|
|
|
|
|
|
|
|
import { MapFactory } from '../../../modules/map/declare/factory'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'app-gis-labeling',
|
|
|
|
|
templateUrl: './gis-labeling.component.html',
|
|
|
|
|
styleUrls: ['./gis-labeling.component.scss']
|
|
|
|
|
})
|
|
|
|
|
export class GisLabelingComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
constructor(private elementRef: ElementRef, public renderer2: Renderer2, private http: HttpClient, public snackBar: MatSnackBar, public dialog: MatDialog, public _ngZone: NgZone, private fb: FormBuilder) { }
|
|
|
|
|
|
|
|
|
|
//右上角div
|
|
|
|
|
selectedTitle: number
|
|
|
|
|
titleList = [{ name: '重点单位', iconImg: '/assets/images/uniticon.png' },
|
|
|
|
|
{ name: '水源', iconImg: '/assets/images/watericon.png' },
|
|
|
|
|
{ name: '消防力量', iconImg: '/assets/images/xfll.png' },
|
|
|
|
|
{ name: '联动力量', iconImg: '/assets/images/ldll.png' },
|
|
|
|
|
{ name: '测量工具', iconImg: '/assets/images/distanceicon.png' },
|
|
|
|
|
{ name: '图层选择', iconImg: '/assets/images/coverageicon.png' }
|
|
|
|
|
]
|
|
|
|
|
keyUnitList: any = []
|
|
|
|
|
waterList = [
|
|
|
|
|
{ id: '0', name: '消火栓', selected: false },
|
|
|
|
|
{ id: '1', name: '消防水池', selected: false },
|
|
|
|
|
{ id: '2', name: '天然水源', selected: false },
|
|
|
|
|
]
|
|
|
|
|
fireForceList = [
|
|
|
|
|
{ id: '0', name: '总队', selected: false },
|
|
|
|
|
{ id: '1', name: '支队', selected: false },
|
|
|
|
|
{ id: '2', name: '大队', selected: false },
|
|
|
|
|
{ id: '3', name: '中队(消防站)', selected: false },
|
|
|
|
|
{ id: '4', name: '其他消防队伍', selected: false }
|
|
|
|
|
]
|
|
|
|
|
linkageForcesList = [
|
|
|
|
|
{ id: '0', name: '安监', selected: false },
|
|
|
|
|
{ id: '1', name: '电力局', selected: false },
|
|
|
|
|
{ id: '2', name: '公安', selected: false },
|
|
|
|
|
{ id: '3', name: '海事', selected: false },
|
|
|
|
|
{ id: '4', name: '环保局', selected: false },
|
|
|
|
|
{ id: '5', name: '交通', selected: false },
|
|
|
|
|
{ id: '6', name: '民政', selected: false },
|
|
|
|
|
{ id: '7', name: '气象局', selected: false },
|
|
|
|
|
{ id: '8', name: '燃气局', selected: false },
|
|
|
|
|
{ id: '9', name: '市政', selected: false },
|
|
|
|
|
{ id: '10', name: '水利', selected: false },
|
|
|
|
|
{ id: '11', name: '通信', selected: false },
|
|
|
|
|
{ id: '12', name: '医疗', selected: false },
|
|
|
|
|
{ id: '13', name: '应急管理', selected: false },
|
|
|
|
|
{ id: '14', name: '住建', selected: false }
|
|
|
|
|
]
|
|
|
|
|
keyUnitForm: FormGroup//gis右上角重点单位表单
|
|
|
|
|
watertForm: FormGroup//gis右上角水源表单
|
|
|
|
|
fireForceForm: FormGroup//gis右上角消防力量表单
|
|
|
|
|
linkageForcesForm: FormGroup//gis右上角联动力量表单
|
|
|
|
|
|
|
|
|
|
selectedUnitList: any = []//选择提交的单位
|
|
|
|
|
selectedWaterList: any = []//选择提交的水源
|
|
|
|
|
selectedFireForceList: any = []//选择提交的消防力量
|
|
|
|
|
selectedLinkageForcesList: any = []//选择提交的联动力量
|
|
|
|
|
|
|
|
|
|
unitAreaDefault: any = '-1'//默认单位范围
|
|
|
|
|
waterAreaDefault: any = '-1'//默认水源范围
|
|
|
|
|
fireForceAreaDefault: any = '-1'//默认消防力量范围
|
|
|
|
|
linkageForcesAreaDefault: any = '-1'//默认联动力量范围
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//获得单位循环出来的checkbox列表（formControl实例）
|
|
|
|
|
get units(): any {
|
|
|
|
|
return this.keyUnitForm.get('units')
|
|
|
|
|
}
|
|
|
|
|
get waters(): any {
|
|
|
|
|
return this.watertForm.get('waters')
|
|
|
|
|
}
|
|
|
|
|
get fireForce(): any {
|
|
|
|
|
return this.fireForceForm.get('fireForce')
|
|
|
|
|
}
|
|
|
|
|
get linkageForces(): any {
|
|
|
|
|
return this.linkageForcesForm.get('linkageForces')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async getAllBuildingType() {
|
|
|
|
|
let result = await new Promise((result, reject) => {
|
|
|
|
|
this.http.get('/api/BuildingTypes/Simple').subscribe((data: any) => {
|
|
|
|
|
data.forEach(item => {
|
|
|
|
|
item.selected = false
|
|
|
|
|
})
|
|
|
|
|
this.keyUnitList = data
|
|
|
|
|
result('获取单位类型')
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
ngOnInit(): void {
|
|
|
|
|
window.setTimeout(() => {
|
|
|
|
|
this.mapInit()
|
|
|
|
|
}, 0)
|
|
|
|
|
let buildingType = this.getAllBuildingType()//获取建筑类型
|
|
|
|
|
Promise.all([buildingType]).then(() => {
|
|
|
|
|
this.keyUnitForm = this.fb.group({
|
|
|
|
|
units: this.buildUnits(),
|
|
|
|
|
allSelectedUnit: new FormControl(),
|
|
|
|
|
areaUnit: new FormControl()
|
|
|
|
|
})
|
|
|
|
|
this.watertForm = this.fb.group({
|
|
|
|
|
waters: this.waterUnits(),
|
|
|
|
|
allSelectedWater: new FormControl(),
|
|
|
|
|
areaWater: new FormControl()
|
|
|
|
|
})
|
|
|
|
|
this.fireForceForm = this.fb.group({
|
|
|
|
|
fireForce: this.fireForceController(),
|
|
|
|
|
allSelectedFireForce: new FormControl(),
|
|
|
|
|
areaFireForce: new FormControl()
|
|
|
|
|
})
|
|
|
|
|
this.linkageForcesForm = this.fb.group({
|
|
|
|
|
linkageForces: this.linkageForcesController(),
|
|
|
|
|
allSelectedLinkageForces: new FormControl(),
|
|
|
|
|
areaLinkageForces: new FormControl()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
//将选中的push到数组
|
|
|
|
|
this.units.valueChanges.subscribe(values => {
|
|
|
|
|
let selects: string[] = []
|
|
|
|
|
values.forEach((selected: boolean, i: number) => {
|
|
|
|
|
selected === true && selects.push(this.keyUnitList[i].id)
|
|
|
|
|
});
|
|
|
|
|
this.selectedUnitList = selects
|
|
|
|
|
})
|
|
|
|
|
this.waters.valueChanges.subscribe(values => {
|
|
|
|
|
let selects: string[] = []
|
|
|
|
|
values.forEach((selected: boolean, i: number) => {
|
|
|
|
|
selected === true && selects.push(this.waterList[i].id)
|
|
|
|
|
});
|
|
|
|
|
this.selectedWaterList = selects
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
this.fireForce.valueChanges.subscribe(values => {
|
|
|
|
|
let selects: string[] = []
|
|
|
|
|
values.forEach((selected: boolean, i: number) => {
|
|
|
|
|
selected === true && selects.push(this.fireForceList[i].id)
|
|
|
|
|
});
|
|
|
|
|
this.selectedFireForceList = selects
|
|
|
|
|
})
|
|
|
|
|
this.linkageForces.valueChanges.subscribe(values => {
|
|
|
|
|
let selects: string[] = []
|
|
|
|
|
values.forEach((selected: boolean, i: number) => {
|
|
|
|
|
selected === true && selects.push(this.linkageForcesList[i].id)
|
|
|
|
|
});
|
|
|
|
|
this.selectedLinkageForcesList = selects
|
|
|
|
|
})
|
|
|
|
|
this.unitSelected()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//构造重点单位checkbox控制器
|
|
|
|
|
buildUnits() {
|
|
|
|
|
const arr = this.keyUnitList.map(item => {
|
|
|
|
|
return this.fb.control(item.selected);
|
|
|
|
|
});
|
|
|
|
|
return this.fb.array(arr);
|
|
|
|
|
}
|
|
|
|
|
//构造水源checkbox控制器
|
|
|
|
|
waterUnits() {
|
|
|
|
|
const arr = this.waterList.map(item => {
|
|
|
|
|
return this.fb.control(item.selected);
|
|
|
|
|
});
|
|
|
|
|
return this.fb.array(arr);
|
|
|
|
|
}
|
|
|
|
|
//构造消防力量checkbox控制器
|
|
|
|
|
fireForceController() {
|
|
|
|
|
const arr = this.fireForceList.map(item => {
|
|
|
|
|
return this.fb.control(item.selected);
|
|
|
|
|
});
|
|
|
|
|
return this.fb.array(arr);
|
|
|
|
|
}
|
|
|
|
|
//构造联动力量checkbox控制器
|
|
|
|
|
linkageForcesController() {
|
|
|
|
|
const arr = this.linkageForcesList.map(item => {
|
|
|
|
|
return this.fb.control(item.selected);
|
|
|
|
|
});
|
|
|
|
|
return this.fb.array(arr);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//初始化获取勾选项
|
|
|
|
|
unitSelected() {
|
|
|
|
|
this.keyUnitList.forEach(item => {
|
|
|
|
|
if (item.selected) {
|
|
|
|
|
this.selectedUnitList.push(item.name)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.waterList.forEach(item => {
|
|
|
|
|
if (item.selected) {
|
|
|
|
|
this.selectedWaterList.push(item.name)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.fireForceList.forEach(item => {
|
|
|
|
|
if (item.selected) {
|
|
|
|
|
this.selectedFireForceList.push(item.name)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.linkageForcesList.forEach(item => {
|
|
|
|
|
if (item.selected) {
|
|
|
|
|
this.selectedLinkageForcesList.push(item.name)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
//地图范围圆圈---重点单位
|
|
|
|
|
circle:ICircle = MapFactory.CircleInstance({
|
|
|
|
|
center: null,
|
|
|
|
|
radius: 0, //半径
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
fillOpacity: 0.4,
|
|
|
|
|
strokeStyle: 'dashed',
|
|
|
|
|
strokeDasharray: [10, 10],
|
|
|
|
|
// 线样式还支持 'dashed'
|
|
|
|
|
fillColor: '#1791fc',
|
|
|
|
|
zIndex: 50,
|
|
|
|
|
})
|
|
|
|
|
//地图范围圆圈---水源
|
|
|
|
|
circleofwater:ICircle = MapFactory.CircleInstance({
|
|
|
|
|
center: null,
|
|
|
|
|
radius: 0, //半径
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
fillOpacity: 0.4,
|
|
|
|
|
strokeStyle: 'dashed',
|
|
|
|
|
strokeDasharray: [10, 10],
|
|
|
|
|
// 线样式还支持 'dashed'
|
|
|
|
|
fillColor: '#ee2200',
|
|
|
|
|
zIndex: 50,
|
|
|
|
|
})
|
|
|
|
|
//地图范围圆圈---消防力量
|
|
|
|
|
circleoffireForce:ICircle = MapFactory.CircleInstance({
|
|
|
|
|
center: null,
|
|
|
|
|
radius: 0, //半径
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
fillOpacity: 0.4,
|
|
|
|
|
strokeStyle: 'dashed',
|
|
|
|
|
strokeDasharray: [10, 10],
|
|
|
|
|
// 线样式还支持 'dashed'
|
|
|
|
|
fillColor: '#e830cc',
|
|
|
|
|
zIndex: 50,
|
|
|
|
|
})
|
|
|
|
|
//地图范围圆圈---联动力量
|
|
|
|
|
circleoflinkageForces:ICircle = MapFactory.CircleInstance({
|
|
|
|
|
center: null,
|
|
|
|
|
radius: 0, //半径
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
fillOpacity: 0.4,
|
|
|
|
|
strokeStyle: 'dashed',
|
|
|
|
|
strokeDasharray: [10, 10],
|
|
|
|
|
// 线样式还支持 'dashed'
|
|
|
|
|
fillColor: '#f6a317',
|
|
|
|
|
zIndex: 50,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//重点单位提交
|
|
|
|
|
ketUnitSubmit(value) {
|
|
|
|
|
if (this.markers.length == 0) {
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
BuildingTypeIdList: this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.createUnitMarker(data.items)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.circle.setRadius(Number(this.unitAreaDefault))
|
|
|
|
|
this.circle.setCenter(this.markers[0]._position)
|
|
|
|
|
this.circle.setMap(this.map)
|
|
|
|
|
let Distance
|
|
|
|
|
let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
|
|
|
|
|
if (this.unitAreaDefault == '0') {
|
|
|
|
|
this.circle.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2)
|
|
|
|
|
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y)
|
|
|
|
|
} else {
|
|
|
|
|
Distance = Math.abs(lnglat.offset(0, this.unitAreaDefault).lat - this.selectedUnit.location.y)
|
|
|
|
|
}
|
|
|
|
|
if (this.unitAreaDefault == '-1') {//如果勾选全部
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
BuildingTypeIdList: this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
data.items.forEach((i, index) => {
|
|
|
|
|
if (i.id == this.selectedUnit.id) {
|
|
|
|
|
data.items.splice(index, 1)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.createUnitMarker(data.items)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
Lon: this.selectedUnit.location.x,
|
|
|
|
|
Lat: this.selectedUnit.location.y,
|
|
|
|
|
Distance: Distance,
|
|
|
|
|
BuildingTypeIdList: this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
data.items.forEach((i, index) => {
|
|
|
|
|
if (i.id == this.selectedUnit.id) {
|
|
|
|
|
data.items.splice(index, 1)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.createUnitMarker(data.items)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//创建单位markers
|
|
|
|
|
unitCluster: any //重点单位点聚合实例
|
|
|
|
|
createUnitMarker(list) {
|
|
|
|
|
let unitMarkerArrcluster = []
|
|
|
|
|
this.unitCluster ? this.unitCluster.setData([]) : null
|
|
|
|
|
list.forEach((item) => {
|
|
|
|
|
let image
|
|
|
|
|
if (item.buildingTypes[0].name.indexOf('高层') != -1) {
|
|
|
|
|
image = '/assets/images/Highbuilding.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('化工') != -1) {
|
|
|
|
|
image = '/assets/images/Chemicalindustry.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('餐饮') != -1) {
|
|
|
|
|
image = '/assets/images/canyin.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('厂房') != -1) {
|
|
|
|
|
image = '/assets/images/changfang.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('储罐') != -1) {
|
|
|
|
|
image = '/assets/images/chuguanlei.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('地下') != -1) {
|
|
|
|
|
image = '/assets/images/dixia.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('古建筑') != -1) {
|
|
|
|
|
image = '/assets/images/gujianzhu.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('轨道' || '地铁' || '交通') != -1) {
|
|
|
|
|
image = '/assets/images/guidaojiaotong.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('商场' || '超市') != -1) {
|
|
|
|
|
image = '/assets/images/shangchangchaoshi.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('隧道') != -1) {
|
|
|
|
|
image = '/assets/images/suidao.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('危化品') != -1) {
|
|
|
|
|
image = '/assets/images/weihuapin.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('学校' || '教育') != -1) {
|
|
|
|
|
image = '/assets/images/xuexiao.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('医院' || '医疗') != -1) {
|
|
|
|
|
image = '/assets/images/yiyuan.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('影' || '剧') != -1) {
|
|
|
|
|
image = '/assets/images/yingjuyuan.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('娱乐') != -1) {
|
|
|
|
|
image = '/assets/images/yule.png'
|
|
|
|
|
} else if (item.buildingTypes[0].name.indexOf('展览' || '景点' || '景区') != -1) {
|
|
|
|
|
image = '/assets/images/zhanlanjianzhu.png'
|
|
|
|
|
} else {
|
|
|
|
|
image = '/assets/images/qita.png'
|
|
|
|
|
}
|
|
|
|
|
// 用于点集合的数组
|
|
|
|
|
unitMarkerArrcluster.push({
|
|
|
|
|
lnglat: [item.location.x, item.location.y],
|
|
|
|
|
image: image,
|
|
|
|
|
data: item
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
this.map.plugin(["AMap.MarkerClusterer"], () => {
|
|
|
|
|
var gridSize = 60
|
|
|
|
|
var count = unitMarkerArrcluster.length;
|
|
|
|
|
|
|
|
|
|
let render = MapFactory.RenderClusterMarkerInstance();
|
|
|
|
|
render.contentRender = (contextCount) => {
|
|
|
|
|
var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount;
|
|
|
|
|
div.style.lineHeight = size + 'px';
|
|
|
|
|
div.style.color = fontColor;
|
|
|
|
|
div.style.fontSize = '14px';
|
|
|
|
|
div.style.textAlign = 'center';
|
|
|
|
|
return div;
|
|
|
|
|
};
|
|
|
|
|
render.pixelRender = (contextCount) => {
|
|
|
|
|
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
|
|
|
|
|
return MapFactory.PixelInstance(-size / 2, -size / 2);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render.contentNonRender = (src) => {
|
|
|
|
|
return `<img class='clusterImgCollection' src="${src}" alt="">`;
|
|
|
|
|
};
|
|
|
|
|
render.pixelNonRender = () => {
|
|
|
|
|
return MapFactory.PixelInstance(-15, -15);
|
|
|
|
|
}
|
|
|
|
|
this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, {
|
|
|
|
|
gridSize: gridSize, // 设置网格像素大小
|
|
|
|
|
render: render //自定义聚合点样式, 自定义非聚合点样式
|
|
|
|
|
});
|
|
|
|
|
this.unitCluster.on('click', (e) => {
|
|
|
|
|
if (e.clusterData.length == 1) {
|
|
|
|
|
let item = e.clusterData[0].data
|
|
|
|
|
let markerContent =
|
|
|
|
|
`<div style="font-size: 14px" id="gispopupbox">
|
|
|
|
|
<div style="color: #0080FF;"><span style="margin-left:8px">${item.name}</span><label style="font-size: 12px; color: #999; margin-left: 10px">${item.address}</label> </div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">单位性质: <label style="margin-left: 10px;font-size: 12px;">${item.buildingTypes.length ? item.buildingTypes[0].name : "暂无数据"}</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">消防负责人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">防火级别: <label style="margin-left: 10px;font-size: 12px;">二级</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">消防管理人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">防火管辖: <label style="margin-left: 10px;font-size: 12px;">${item.organizationName || "暂无数据"}</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">防火监督员: <label style="margin-left: 10px;font-size: 12px;">李四15022215122</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">责任队站: <label style="margin-left: 10px;font-size: 12px;">安博消防救援站</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">总建筑面积: <label style="margin-left: 10px;font-size: 12px;">500平方米</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">建筑信息分类: <label style="margin-left: 10px;font-size: 12px;">建筑群</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">总占地面积: <label style="margin-left: 10px;font-size: 12px;">600平方米</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">值班电话: <label style="margin-left: 10px;font-size: 12px;">${item.phone || "暂无数据"}</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
|
|
|
|
|
<div class="btn" id="baseInformation"><img src="../../../assets/images/basicinfoicon.png" alt="">基本信息</div>
|
|
|
|
|
<div class="btn" id="route"><img src="../../../assets/images/navicon.png" alt="">导航</div>
|
|
|
|
|
<div class="btn" id="fullViewNavigation"><img src="../../../assets/images/panoramaicon.png" alt="">全景漫游</div>
|
|
|
|
|
<div class="btn" id="threeeScene"><img src="../../../assets/images/3dicon.png" alt="">三维场景</div>
|
|
|
|
|
<div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div>
|
|
|
|
|
<div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>`
|
|
|
|
|
// 创建一个自定义内容的 infowindow 实例
|
|
|
|
|
this.infoWindow = MapFactory.InfoWindowInstance({
|
|
|
|
|
position: [item.location.x, item.location.y],
|
|
|
|
|
offset: MapFactory.PixelInstance(0, -30),
|
|
|
|
|
content: markerContent,
|
|
|
|
|
});
|
|
|
|
|
this.infoWindow.open(this.map);
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(item) })//基本信息点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(item) })//导航点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(item) })//全景漫游点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(item) })//三维场景点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(item) })//查看预案点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(item) })//分享点击事件
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//取消显示单位
|
|
|
|
|
resetUnit() {
|
|
|
|
|
this.keyUnitForm.reset()
|
|
|
|
|
this.keyUnitForm.controls.areaUnit.setValue('-1')
|
|
|
|
|
this.map.remove(this.circle)
|
|
|
|
|
this.unitCluster ? this.unitCluster.setData([]) : null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//消防力量提交
|
|
|
|
|
fireForceSubmit(value) {
|
|
|
|
|
if (this.markers.length == 0) {
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
Levels: this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/CustomFireForce", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.createFireForceMarker(data)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.circleoffireForce.setRadius(Number(this.fireForceAreaDefault))
|
|
|
|
|
this.circleoffireForce.setCenter(this.markers[0]._position)
|
|
|
|
|
this.circleoffireForce.setMap(this.map)
|
|
|
|
|
let Distance
|
|
|
|
|
let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
|
|
|
|
|
if (this.fireForceAreaDefault == '0') {
|
|
|
|
|
this.circleoffireForce.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2)
|
|
|
|
|
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y)
|
|
|
|
|
} else {
|
|
|
|
|
Distance = Math.abs(lnglat.offset(0, this.fireForceAreaDefault).lat - this.selectedUnit.location.y)
|
|
|
|
|
}
|
|
|
|
|
if (this.fireForceAreaDefault == '-1') {//如果勾选全部
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
Levels: this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/CustomFireForce", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.createFireForceMarker(data)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
Lon: this.selectedUnit.location.x,
|
|
|
|
|
Lat: this.selectedUnit.location.y,
|
|
|
|
|
Distance: Distance,
|
|
|
|
|
Levels: this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/CustomFireForce", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.createFireForceMarker(data)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//创建消防力量markers
|
|
|
|
|
fireForceCluster: any //消防力量点聚合实例
|
|
|
|
|
createFireForceMarker(list) {
|
|
|
|
|
let fireForceMarkerArrcluster = []
|
|
|
|
|
this.fireForceCluster ? this.fireForceCluster.setData([]) : null
|
|
|
|
|
list.forEach((item) => {
|
|
|
|
|
let image
|
|
|
|
|
if (item.forceType == 2) {
|
|
|
|
|
image = '/assets/fireForcesMarkers/qita.png'
|
|
|
|
|
} else if (item.level == 0) {
|
|
|
|
|
image = '/assets/fireForcesMarkers/zongdui.png'
|
|
|
|
|
} else if (item.level == 1) {
|
|
|
|
|
image = '/assets/fireForcesMarkers/zhidui.png'
|
|
|
|
|
} else if (item.level == 2) {
|
|
|
|
|
image = '/assets/fireForcesMarkers/dadui.png'
|
|
|
|
|
} else if (item.level == 3) {
|
|
|
|
|
image = '/assets/fireForcesMarkers/zhongdui.png'
|
|
|
|
|
}
|
|
|
|
|
// 用于点集合的数组
|
|
|
|
|
item.fireForceDetailInfo.location ?
|
|
|
|
|
fireForceMarkerArrcluster.push({
|
|
|
|
|
lnglat: [item.fireForceDetailInfo.location.x, item.fireForceDetailInfo.location.y],
|
|
|
|
|
image: image,
|
|
|
|
|
data: item
|
|
|
|
|
}) : null
|
|
|
|
|
})
|
|
|
|
|
this.map.plugin(["AMap.MarkerClusterer"], () => {
|
|
|
|
|
var gridSize = 60
|
|
|
|
|
var count = fireForceMarkerArrcluster.length;
|
|
|
|
|
|
|
|
|
|
let render = MapFactory.RenderClusterMarkerInstance();
|
|
|
|
|
render.contentRender = (contextCount) => {
|
|
|
|
|
var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount;
|
|
|
|
|
div.style.lineHeight = size + 'px';
|
|
|
|
|
div.style.color = fontColor;
|
|
|
|
|
div.style.fontSize = '14px';
|
|
|
|
|
div.style.textAlign = 'center';
|
|
|
|
|
return div;
|
|
|
|
|
};
|
|
|
|
|
render.pixelRender = (contextCount) => {
|
|
|
|
|
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
|
|
|
|
|
return MapFactory.PixelInstance(-size / 2, -size / 2);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render.contentNonRender = (src) => {
|
|
|
|
|
return `<img class='clusterImgCollection' src="${src}" alt="">`;
|
|
|
|
|
};
|
|
|
|
|
render.pixelNonRender = () => {
|
|
|
|
|
return MapFactory.PixelInstance(-15, -15);
|
|
|
|
|
}
|
|
|
|
|
this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, {
|
|
|
|
|
gridSize: gridSize, // 设置网格像素大小
|
|
|
|
|
render: render //自定义聚合点样式, 自定义非聚合点样式
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
//取消消防力量
|
|
|
|
|
resetFireForce() {
|
|
|
|
|
this.fireForceForm.reset()
|
|
|
|
|
this.fireForceForm.controls.areaFireForce.setValue('-1')
|
|
|
|
|
this.map.remove(this.circleoffireForce)
|
|
|
|
|
this.fireForceCluster ? this.fireForceCluster.setData([]) : null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//联动力量提交
|
|
|
|
|
linkageForcesSubmit(value) {
|
|
|
|
|
console.log(this.selectedLinkageForcesList)
|
|
|
|
|
if (this.markers.length == 0) {
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 999999,
|
|
|
|
|
LinkageForceTypes: this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/LinkageForces", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
console.log(data)
|
|
|
|
|
this.createLinkageForcesMarker(data.items)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.circleoflinkageForces.setRadius(Number(this.linkageForcesAreaDefault))
|
|
|
|
|
this.circleoflinkageForces.setCenter(this.markers[0]._position)
|
|
|
|
|
this.circleoflinkageForces.setMap(this.map)
|
|
|
|
|
let Distance
|
|
|
|
|
let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
|
|
|
|
|
if (this.linkageForcesAreaDefault == '0') {
|
|
|
|
|
this.circleoflinkageForces.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2)
|
|
|
|
|
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y)
|
|
|
|
|
} else {
|
|
|
|
|
Distance = Math.abs(lnglat.offset(0, this.linkageForcesAreaDefault).lat - this.selectedUnit.location.y)
|
|
|
|
|
}
|
|
|
|
|
if (this.linkageForcesAreaDefault == '-1') {//如果勾选全部
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 999999,
|
|
|
|
|
LinkageForceTypes: this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/LinkageForces", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.createLinkageForcesMarker(data.items)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
Lon: this.selectedUnit.location.x,
|
|
|
|
|
Lat: this.selectedUnit.location.y,
|
|
|
|
|
Distance: Distance,
|
|
|
|
|
LinkageForceTypes: this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/LinkageForces", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.createLinkageForcesMarker(data.items)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//创建联动力量markers
|
|
|
|
|
linkageForcesCluster: any //联动力量点聚合实例
|
|
|
|
|
createLinkageForcesMarker(list) {
|
|
|
|
|
let linkageForcesMarkerArrcluster = []
|
|
|
|
|
this.linkageForcesCluster ? this.linkageForcesCluster.setData([]) : null
|
|
|
|
|
list.forEach((item) => {
|
|
|
|
|
let image
|
|
|
|
|
if (item.linkageForceType == 0) {//消火栓
|
|
|
|
|
image = '/assets/linkageForcesMarkers/anjian.png'
|
|
|
|
|
} else if (item.linkageForceType == 1) {//消防水池
|
|
|
|
|
image = '/assets/linkageForcesMarkers/dianliju.png'
|
|
|
|
|
} else if (item.linkageForceType == 2) {//天然联动力量
|
|
|
|
|
image = '/assets/linkageForcesMarkers/gongan.png'
|
|
|
|
|
} else if (item.linkageForceType == 3) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/haishi.png'
|
|
|
|
|
} else if (item.linkageForceType == 4) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/huanbaoju.png'
|
|
|
|
|
} else if (item.linkageForceType == 5) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/jiaotong.png'
|
|
|
|
|
} else if (item.linkageForceType == 6) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/minzheng.png'
|
|
|
|
|
} else if (item.linkageForceType == 7) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/qixiangju.png'
|
|
|
|
|
} else if (item.linkageForceType == 8) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/ranqiju.png'
|
|
|
|
|
} else if (item.linkageForceType == 9) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/shizheng.png'
|
|
|
|
|
} else if (item.linkageForceType == 10) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/shuili.png'
|
|
|
|
|
} else if (item.linkageForceType == 11) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/tongxin.png'
|
|
|
|
|
} else if (item.linkageForceType == 12) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/yiliao.png'
|
|
|
|
|
} else if (item.linkageForceType == 13) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/yingjiguanli.png'
|
|
|
|
|
} else if (item.linkageForceType == 14) {//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/zhujian.png'
|
|
|
|
|
}
|
|
|
|
|
// 用于点集合的数组
|
|
|
|
|
if (item.location && item.location.x) {
|
|
|
|
|
linkageForcesMarkerArrcluster.push({
|
|
|
|
|
lnglat: [item.location.x, item.location.y],
|
|
|
|
|
image: image,
|
|
|
|
|
data: item
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// 用于点集合的数组
|
|
|
|
|
})
|
|
|
|
|
this.map.plugin(["AMap.MarkerClusterer"], () => {
|
|
|
|
|
var gridSize = 60
|
|
|
|
|
var count = linkageForcesMarkerArrcluster.length;
|
|
|
|
|
|
|
|
|
|
let render = MapFactory.RenderClusterMarkerInstance();
|
|
|
|
|
render.contentRender = (contextCount) => {
|
|
|
|
|
var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount;
|
|
|
|
|
div.style.lineHeight = size + 'px';
|
|
|
|
|
div.style.color = fontColor;
|
|
|
|
|
div.style.fontSize = '14px';
|
|
|
|
|
div.style.textAlign = 'center';
|
|
|
|
|
return div;
|
|
|
|
|
};
|
|
|
|
|
render.pixelRender = (contextCount) => {
|
|
|
|
|
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
|
|
|
|
|
return MapFactory.PixelInstance(-size / 2, -size / 2);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render.contentNonRender = (src) => {
|
|
|
|
|
return `<img class='clusterImgCollection' src="${src}" alt="">`;
|
|
|
|
|
};
|
|
|
|
|
render.pixelNonRender = () => {
|
|
|
|
|
return MapFactory.PixelInstance(-15, -15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.linkageForcesCluster = MapFactory.MarkerClusterInstance(this.map, linkageForcesMarkerArrcluster, {
|
|
|
|
|
gridSize: gridSize, // 设置网格像素大小
|
|
|
|
|
render: render //自定义聚合点样式, 自定义非聚合点样式
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
//取消联动力量
|
|
|
|
|
resetLinkageForces() {
|
|
|
|
|
this.linkageForcesForm.reset()
|
|
|
|
|
this.linkageForcesForm.controls.areaLinkageForces.setValue('-1')
|
|
|
|
|
this.map.remove(this.circleoflinkageForces)
|
|
|
|
|
this.linkageForcesCluster ? this.linkageForcesCluster.setData([]) : null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//水源提交
|
|
|
|
|
waterSubmit(value) {
|
|
|
|
|
if (this.markers.length == 0) {
|
|
|
|
|
if (this.selectedWaterList.length != 0) {//勾选了水源类型
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
WaterSourceTypes: this.selectedWaterList
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/WaterSources", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.createwaterMarker(data.items)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
let config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open('请勾选想要显示的水源类型', '确定', config);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.circleofwater.setRadius(Number(this.waterAreaDefault))
|
|
|
|
|
this.circleofwater.setCenter(this.markers[0]._position)
|
|
|
|
|
this.circleofwater.setMap(this.map)
|
|
|
|
|
let Distance
|
|
|
|
|
let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.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.selectedUnit.location.y)
|
|
|
|
|
} else {
|
|
|
|
|
Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.selectedUnit.location.y)
|
|
|
|
|
}
|
|
|
|
|
//如果选择全部
|
|
|
|
|
if (this.waterAreaDefault == '-1') {
|
|
|
|
|
if (this.selectedWaterList.length != 0) {
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
WaterSourceTypes: this.selectedWaterList
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/WaterSources", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.createwaterMarker(data.items)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
let config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open('请勾选想要显示的水源类型', '确定', config);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
if (this.selectedWaterList.length != 0) {
|
|
|
|
|
let paramsdata: any = {
|
|
|
|
|
PageSize: 99999,
|
|
|
|
|
Lon: this.selectedUnit.location.x,
|
|
|
|
|
Lat: this.selectedUnit.location.y,
|
|
|
|
|
Distance: Distance,
|
|
|
|
|
WaterSourceTypes: this.selectedWaterList
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/WaterSources", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.createwaterMarker(data.items)
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
let config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open('请勾选想要显示的水源类型', '确定', config);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//循环渲染出所有水源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/szxhs.png'
|
|
|
|
|
} else if (item.waterSourceType == 1) {//消防水池
|
|
|
|
|
image = '/assets/waterMarkers/fxcsc.png'
|
|
|
|
|
} else if (item.waterSourceType == 2) {//天然水源
|
|
|
|
|
image = '/assets/waterMarkers/trsy.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;
|
|
|
|
|
|
|
|
|
|
let render = MapFactory.RenderClusterMarkerInstance();
|
|
|
|
|
render.contentRender = (contextCount) => {
|
|
|
|
|
var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount;
|
|
|
|
|
div.style.lineHeight = size + 'px';
|
|
|
|
|
div.style.color = fontColor;
|
|
|
|
|
div.style.fontSize = '14px';
|
|
|
|
|
div.style.textAlign = 'center';
|
|
|
|
|
return div;
|
|
|
|
|
};
|
|
|
|
|
render.pixelRender = (contextCount) => {
|
|
|
|
|
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
|
|
|
|
|
return MapFactory.PixelInstance(-size / 2, -size / 2);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render.contentNonRender = (src) => {
|
|
|
|
|
return `<img class='clusterImgCollection' src="${src}" alt="">`;
|
|
|
|
|
};
|
|
|
|
|
render.pixelNonRender = () => {
|
|
|
|
|
return MapFactory.PixelInstance(-15, -15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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(MapFactory.PixelInstance(-size / 2, -size / 2));
|
|
|
|
|
// context.marker.setContent(div)
|
|
|
|
|
// };
|
|
|
|
|
// var _renderMarker = (context) => {
|
|
|
|
|
// var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
|
|
|
|
|
// var offset = MapFactory.PixelInstance(-15, -15);
|
|
|
|
|
// context.marker.setContent(content)
|
|
|
|
|
// context.marker.setOffset(offset)
|
|
|
|
|
// }
|
|
|
|
|
this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, {
|
|
|
|
|
gridSize: gridSize, // 设置网格像素大小
|
|
|
|
|
render: render //自定义聚合点样式, 自定义非聚合点样式
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 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.watertForm.reset()
|
|
|
|
|
this.watertForm.controls.areaWater.setValue('-1')
|
|
|
|
|
this.map.remove(this.circleofwater)
|
|
|
|
|
this.waterCluster ? this.waterCluster.setData([]) : null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//计算两地距离
|
|
|
|
|
Calculationofdistance(bounds) {
|
|
|
|
|
let p1 = [bounds.northEast.lng, bounds.northEast.lat];
|
|
|
|
|
let p2 = [bounds.northEast.lng, bounds.southWest.lat];
|
|
|
|
|
// 返回 p1 到 p2 间的地面距离，单位：米
|
|
|
|
|
return this.map.distance(p1, p2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//全选重点单位
|
|
|
|
|
selectedAllUnit(event) {
|
|
|
|
|
if (event.checked) {
|
|
|
|
|
this.units.controls.forEach(item => { item.setValue(true) })
|
|
|
|
|
} else {
|
|
|
|
|
this.keyUnitForm.reset()
|
|
|
|
|
this.keyUnitForm.controls.areaUnit.setValue('0')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//全选水源
|
|
|
|
|
selectedAllWater(event) {
|
|
|
|
|
if (event.checked) {
|
|
|
|
|
this.waters.controls.forEach(item => { item.setValue(true) })
|
|
|
|
|
} else {
|
|
|
|
|
this.watertForm.reset()
|
|
|
|
|
this.watertForm.controls.areaWater.setValue('0')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//全选消防力量
|
|
|
|
|
selectedAllFireForce(event) {
|
|
|
|
|
if (event.checked) {
|
|
|
|
|
this.fireForce.controls.forEach(item => { item.setValue(true) })
|
|
|
|
|
} else {
|
|
|
|
|
this.fireForceForm.reset()
|
|
|
|
|
this.fireForceForm.controls.areaFireForce.setValue('0')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//全选联动力量
|
|
|
|
|
selectedAllLinkageForces(event) {
|
|
|
|
|
if (event.checked) {
|
|
|
|
|
this.linkageForces.controls.forEach(item => { item.setValue(true) })
|
|
|
|
|
} else {
|
|
|
|
|
this.linkageForcesForm.reset()
|
|
|
|
|
this.linkageForcesForm.controls.areaLinkageForces.setValue('0')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//右上角点击每一个title
|
|
|
|
|
clickTitle(index) {
|
|
|
|
|
this.selectedTitle = index
|
|
|
|
|
}
|
|
|
|
|
closertdiv() {
|
|
|
|
|
this.selectedTitle = null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//卫星图层
|
|
|
|
|
satelliteLayer = MapFactory.TileLayerInstance().Satellite();
|
|
|
|
|
satelliteModel: boolean = false
|
|
|
|
|
satelliteChange(e) {
|
|
|
|
|
e.checked ? this.map.add(this.satelliteLayer) : this.map.remove(this.satelliteLayer);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//路网图层
|
|
|
|
|
roadNetLayer = MapFactory.TileLayerInstance().RoadNet();
|
|
|
|
|
loadModel: boolean = false
|
|
|
|
|
loadChange(e) {
|
|
|
|
|
e.checked ? this.map.add(this.roadNetLayer) : this.map.remove(this.roadNetLayer);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ViewChild('appLeft', { static: false }) appLeft: any //子组件
|
|
|
|
|
leftDivState: boolean = false; //左侧工作区显示隐藏
|
|
|
|
|
showLeftDiv: boolean = false//左侧工作区消失
|
|
|
|
|
|
|
|
|
|
//左侧工作区显示隐藏
|
|
|
|
|
toggleLeft(e) {
|
|
|
|
|
this.leftDivState = e
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//左侧工作区关闭
|
|
|
|
|
closeDiv() {
|
|
|
|
|
this.leftDivState = false
|
|
|
|
|
this.showLeftDiv = false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
map: IMap //地图
|
|
|
|
|
markers: any = []; //markers标注
|
|
|
|
|
|
|
|
|
|
//地图2D 3D切换
|
|
|
|
|
mapPattern: boolean = true//默认是2D
|
|
|
|
|
mapPatternChange(type) {
|
|
|
|
|
this.unitCluster = null
|
|
|
|
|
this.waterCluster = null
|
|
|
|
|
this.checkRadio = false
|
|
|
|
|
if (type == '2D') {
|
|
|
|
|
this.mapPattern = true
|
|
|
|
|
this.mapInit()
|
|
|
|
|
} else {
|
|
|
|
|
this.unitCluster ? this.unitCluster.setData([]) : null
|
|
|
|
|
this.mapPattern = false
|
|
|
|
|
this.map = MapFactory.MapInstance('map', {
|
|
|
|
|
viewMode: '3D',
|
|
|
|
|
pitch: 60,
|
|
|
|
|
rotation: -35,
|
|
|
|
|
features: ['bg', 'road', 'point', 'building'],
|
|
|
|
|
mapStyle: 'amap://styles/light',
|
|
|
|
|
});
|
|
|
|
|
this.map.setCity('上海市');
|
|
|
|
|
}
|
|
|
|
|
this.satelliteModel = false
|
|
|
|
|
this.loadModel = false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//地图初始化
|
|
|
|
|
mapInit() {
|
|
|
|
|
let that = this
|
|
|
|
|
var layer = MapFactory.LayerInstance({
|
|
|
|
|
zooms: [3, 20], //可见级别
|
|
|
|
|
visible: true, //是否可见
|
|
|
|
|
opacity: 1, //透明度
|
|
|
|
|
zIndex: 0, //叠加层级
|
|
|
|
|
resizeEnable: true //是否监控地图容器尺寸变化,
|
|
|
|
|
})
|
|
|
|
|
that.map = MapFactory.MapInstance('map', { layers: [layer] });
|
|
|
|
|
that.map.setCity('上海市');
|
|
|
|
|
that.map.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () {
|
|
|
|
|
that.mouseTool = MapFactory.MouseToolInstance(that.map);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
searchText: string; //搜索单位名称
|
|
|
|
|
allCompany = []; //搜索到 匹配的单位
|
|
|
|
|
|
|
|
|
|
measureDistance; //测距离
|
|
|
|
|
distanceList = []; //测距离 点和线
|
|
|
|
|
measureArea; //测面积
|
|
|
|
|
mouseTool:IMouseTool;//二合一测距和侧面积
|
|
|
|
|
checkRadio = false //判断测距和侧面积是否选中
|
|
|
|
|
|
|
|
|
|
//测距离 开始
|
|
|
|
|
startDistance() {
|
|
|
|
|
this.measureArea.close(false)
|
|
|
|
|
this.measureDistance.turnOn()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//侧面积 开始
|
|
|
|
|
startArea() {
|
|
|
|
|
this.measureDistance.turnOff()
|
|
|
|
|
this.measureArea.measureArea({
|
|
|
|
|
strokeColor: '#80d8ff',
|
|
|
|
|
fillColor: '#80d8ff',
|
|
|
|
|
fillOpacity: 0.3
|
|
|
|
|
//同 Polygon 的 Option 设置
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//清空距离测量
|
|
|
|
|
clearDistance() {
|
|
|
|
|
this.distanceList.forEach(item => {
|
|
|
|
|
if (item.className == 'AMap.Marker') {
|
|
|
|
|
let parent = item.dom.parentNode
|
|
|
|
|
let children = item.dom.nextElementSibling
|
|
|
|
|
parent && children ? parent.removeChild(item.dom.nextElementSibling) : null
|
|
|
|
|
this.map.remove(item)
|
|
|
|
|
} else {
|
|
|
|
|
this.map.remove(item)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.distanceList = [] //清空数组
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//清空面积测量
|
|
|
|
|
clearArea() {
|
|
|
|
|
this.measureArea.close(true)
|
|
|
|
|
}
|
|
|
|
|
//合并测距和侧面积
|
|
|
|
|
measure(type) {
|
|
|
|
|
switch (type) {
|
|
|
|
|
case 'rule': {
|
|
|
|
|
this.mouseTool.rule({
|
|
|
|
|
startMarkerOptions: {//可缺省
|
|
|
|
|
icon: MapFactory.IconInstance({
|
|
|
|
|
size: MapFactory.SizeInstance(19, 31),//图标大小
|
|
|
|
|
imageSize: MapFactory.SizeInstance(19, 31),
|
|
|
|
|
image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
endMarkerOptions: {//可缺省
|
|
|
|
|
icon: MapFactory.IconInstance({
|
|
|
|
|
size: MapFactory.SizeInstance(19, 31),//图标大小
|
|
|
|
|
imageSize: MapFactory.SizeInstance(19, 31),
|
|
|
|
|
image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
|
|
|
|
|
}),
|
|
|
|
|
offset: MapFactory.PixelInstance(-9, -31)
|
|
|
|
|
},
|
|
|
|
|
midMarkerOptions: {//可缺省
|
|
|
|
|
icon: MapFactory.IconInstance({
|
|
|
|
|
size: MapFactory.SizeInstance(19, 31),//图标大小
|
|
|
|
|
imageSize: MapFactory.SizeInstance(19, 31),
|
|
|
|
|
image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
|
|
|
|
|
}),
|
|
|
|
|
offset: MapFactory.PixelInstance(-9, -31)
|
|
|
|
|
},
|
|
|
|
|
lineOptions: {//可缺省
|
|
|
|
|
strokeStyle: "solid",
|
|
|
|
|
strokeColor: "#FF33FF",
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
strokeWeight: 2
|
|
|
|
|
}
|
|
|
|
|
//同 RangingTool 的 自定义 设置，缺省为默认样式
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
case 'measureArea': {
|
|
|
|
|
this.mouseTool.measureArea({
|
|
|
|
|
strokeColor: '#80d8ff',
|
|
|
|
|
fillColor: '#80d8ff',
|
|
|
|
|
fillOpacity: 0.3
|
|
|
|
|
//同 Polygon 的 Option 设置
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//合并清空
|
|
|
|
|
clearnAll() {
|
|
|
|
|
this.mouseTool.close(true)
|
|
|
|
|
this.checkRadio = false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//搜索
|
|
|
|
|
search() {
|
|
|
|
|
this.allCompany = []
|
|
|
|
|
let paramsdata: any = { Name: this.searchText || '' }
|
|
|
|
|
this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => {
|
|
|
|
|
this.allCompany = data.items
|
|
|
|
|
const config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open(`搜索目标结果为${data.items.length}个`, '确定', config);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//清除
|
|
|
|
|
clear() {
|
|
|
|
|
this.allCompany = []
|
|
|
|
|
this.searchText = ''
|
|
|
|
|
this.markers ? this.markers.forEach((element, index) => { this.map.remove(element); }) : null
|
|
|
|
|
this.infoWindow ? this.map.remove(this.infoWindow) : null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
selectedUnit: any//当前打开的单位
|
|
|
|
|
|
|
|
|
|
//选择 单位 地图跳转
|
|
|
|
|
//弹窗实例
|
|
|
|
|
infoWindow: any
|
|
|
|
|
selectCompany(e) {
|
|
|
|
|
if (e.location && e.location.x && e.location.y) {
|
|
|
|
|
this.selectedUnit = e
|
|
|
|
|
this.markers.forEach((element, index) => { this.map.remove(element); }); //先删除所有标点
|
|
|
|
|
this.markers = []
|
|
|
|
|
|
|
|
|
|
let marker = MapFactory.MarkerInstance({
|
|
|
|
|
map: this.map,
|
|
|
|
|
position: [e.location.x, e.location.y], // 基点位置,
|
|
|
|
|
});
|
|
|
|
|
this.markers.push(marker)
|
|
|
|
|
|
|
|
|
|
let markerContent = `<div style="font-size: 14px" id="gispopupbox">
|
|
|
|
|
<div style="color: #0080FF;"><span style="margin-left:8px">${e.name}</span><label style="font-size: 12px; color: #999; margin-left: 10px">${e.address}</label> </div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">单位性质: <label style="margin-left: 10px;font-size: 12px;">${e.buildingTypes.length ? e.buildingTypes[0].name : "暂无数据"}</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">消防负责人: <label style="margin-left: 10px;font-size: 12px;">${e.contacts || "暂无数据"}</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">防火级别: <label style="margin-left: 10px;font-size: 12px;">二级</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">消防管理人: <label style="margin-left: 10px;font-size: 12px;">${e.contacts || "暂无数据"}</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">防火管辖: <label style="margin-left: 10px;font-size: 12px;">${e.organizationName || "暂无数据"}</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">防火监督员: <label style="margin-left: 10px;font-size: 12px;">李四15022215122</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">责任队站: <label style="margin-left: 10px;font-size: 12px;">安博消防救援站</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">总建筑面积: <label style="margin-left: 10px;font-size: 12px;">500平方米</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">建筑信息分类: <label style="margin-left: 10px;font-size: 12px;">建筑群</label></div>
|
|
|
|
|
<div style="flex: 1; margin-left: 25px;">总占地面积: <label style="margin-left: 10px;font-size: 12px;">600平方米</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-top: 10px;margin-left:8px"">
|
|
|
|
|
<div style="width:240px; overflow: hidden;">值班电话: <label style="margin-left: 10px;font-size: 12px;">${e.phone || "暂无数据"}</label></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
|
|
|
|
|
<div class="btn" id="baseInformation"><img src="../../../assets/images/basicinfoicon.png" alt="">基本信息</div>
|
|
|
|
|
<div class="btn" id="route"><img src="../../../assets/images/navicon.png" alt="">导航</div>
|
|
|
|
|
<div class="btn" id="fullViewNavigation"><img src="../../../assets/images/panoramaicon.png" alt="">全景漫游</div>
|
|
|
|
|
<div class="btn" id="threeeScene"><img src="../../../assets/images/3dicon.png" alt="">三维场景</div>
|
|
|
|
|
<div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div>
|
|
|
|
|
<div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>`
|
|
|
|
|
// 创建一个自定义内容的 infowindow 实例
|
|
|
|
|
this.infoWindow = MapFactory.InfoWindowInstance({
|
|
|
|
|
position: [e.location.x, e.location.y],
|
|
|
|
|
offset: MapFactory.PixelInstance(0, -30),
|
|
|
|
|
content: markerContent,
|
|
|
|
|
});
|
|
|
|
|
this.infoWindow.open(this.map);
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件
|
|
|
|
|
marker.on('click', (ev) => { //marker点击事件
|
|
|
|
|
this.infoWindow = MapFactory.InfoWindowInstance({
|
|
|
|
|
position: [e.location.x, e.location.y],
|
|
|
|
|
offset: MapFactory.PixelInstance(0, -30),
|
|
|
|
|
content: markerContent,
|
|
|
|
|
});
|
|
|
|
|
this.infoWindow.open(this.map);
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件
|
|
|
|
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件
|
|
|
|
|
})
|
|
|
|
|
this.map.setZoomAndCenter(13, [marker._position[0], marker._position[1] + 0.015]); //设置地图中心点
|
|
|
|
|
this.allCompany = []
|
|
|
|
|
} else {
|
|
|
|
|
const config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open('请完善单位地理位置', '确定', config);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//基本信息
|
|
|
|
|
baseInformation(e) {
|
|
|
|
|
this.leftDivState = true
|
|
|
|
|
this.showLeftDiv = true
|
|
|
|
|
this.appLeft.selectBaseInfo(e) //调用子组件方法
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//导航
|
|
|
|
|
route(e) {
|
|
|
|
|
this.leftDivState = false
|
|
|
|
|
this.showLeftDiv = false
|
|
|
|
|
this.isShowRouteGIS = true
|
|
|
|
|
this.routeEnd = e.name
|
|
|
|
|
this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//全景漫游
|
|
|
|
|
fullViewNavigation(e) {
|
|
|
|
|
console.log(e, '全景漫游')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//三维场景
|
|
|
|
|
threeeScene(e) {
|
|
|
|
|
window.open('http://39.106.78.171:8088/%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/--SHGJHYZX/')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//查看预案
|
|
|
|
|
seePlan(e) {
|
|
|
|
|
let data = e
|
|
|
|
|
let dialogRef = this.dialog.open(LookPlanDialog, {//调用open方法打开对话框并且携带参数过去
|
|
|
|
|
width: '1400px',
|
|
|
|
|
height: '800px',
|
|
|
|
|
id: 'lookPlanDialog',
|
|
|
|
|
data
|
|
|
|
|
});
|
|
|
|
|
dialogRef.afterClosed().subscribe((data) => {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//分享
|
|
|
|
|
share(e) {
|
|
|
|
|
let data = {
|
|
|
|
|
url: 'https://www.baidu.com/',
|
|
|
|
|
buildingType: e.buildingTypes[0].name,
|
|
|
|
|
address: e.address
|
|
|
|
|
}
|
|
|
|
|
let dialogRef = this.dialog.open(ShareUrlDialog, {//调用open方法打开对话框并且携带参数过去
|
|
|
|
|
width: '540px',
|
|
|
|
|
height: '596px',
|
|
|
|
|
id: 'shareDialog',
|
|
|
|
|
data
|
|
|
|
|
});
|
|
|
|
|
dialogRef.afterClosed().subscribe((data) => {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//导航路线
|
|
|
|
|
isShowRouteGIS: boolean = false; //导航路线 显隐
|
|
|
|
|
routeStart: any; //起点
|
|
|
|
|
routeStartList: any = [] //起点 搜索结果
|
|
|
|
|
routeEnd: any; //终点
|
|
|
|
|
routeEndList: any = [] //终点 搜索结果
|
|
|
|
|
timeout: any; //延时器
|
|
|
|
|
routeGIS: IDriving; //查询结果 规划路线
|
|
|
|
|
selectType: boolean = true; //路线选择 推荐方案/躲避用拥堵
|
|
|
|
|
|
|
|
|
|
//关闭导航路线
|
|
|
|
|
closeRouteGIS() {
|
|
|
|
|
this.isShowRouteGIS = false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//输入框 输入事件
|
|
|
|
|
routeChange(e) {
|
|
|
|
|
let that = this
|
|
|
|
|
window.clearTimeout(this.timeout)
|
|
|
|
|
this.timeout = window.setTimeout(() => {
|
|
|
|
|
|
|
|
|
|
that.map.getCity(function (info) { //获取当前 city
|
|
|
|
|
that.map.plugin(['AMap.AutoComplete'], () => {
|
|
|
|
|
var autoOptions = { city: info.city }
|
|
|
|
|
let keywords
|
|
|
|
|
e == 0 ? keywords = that.routeStart : keywords = that.routeEnd
|
|
|
|
|
var autoComplete = MapFactory.AutocompleteInstance(autoOptions);
|
|
|
|
|
autoComplete.search(keywords, function (status, result) {
|
|
|
|
|
if (result && result.tips && result.tips.length) { //搜索到数据时
|
|
|
|
|
that._ngZone.run(() => {
|
|
|
|
|
if (e == 0) {//起点
|
|
|
|
|
that.routeStartList = result.tips
|
|
|
|
|
if (result.tips.length != 0) {
|
|
|
|
|
for (let index = 0; index < result.tips.length; index++) {
|
|
|
|
|
const element = result.tips[index];
|
|
|
|
|
if (element.location) {
|
|
|
|
|
that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {//终点
|
|
|
|
|
that.routeEndList = result.tips
|
|
|
|
|
that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat)
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
} //if
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}); //获取当前 city
|
|
|
|
|
|
|
|
|
|
}, 500)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//清空导航输入框
|
|
|
|
|
deleteSearchGIS(e) {
|
|
|
|
|
if (e == 0) {
|
|
|
|
|
this.routeStart = null
|
|
|
|
|
this.routeStartList = []
|
|
|
|
|
this.startCoordinate = null
|
|
|
|
|
} else {
|
|
|
|
|
this.routeEnd = null
|
|
|
|
|
this.routeEndList = []
|
|
|
|
|
this.endCoordinate = null
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//清除路线
|
|
|
|
|
clearGISRoute() {
|
|
|
|
|
this.routeStart = null
|
|
|
|
|
this.routeStartList = []
|
|
|
|
|
this.routeEnd = null
|
|
|
|
|
this.routeEndList = []
|
|
|
|
|
this.startCoordinate = null
|
|
|
|
|
this.endCoordinate = null
|
|
|
|
|
this.routeGIS ? this.routeGIS.clear() : null
|
|
|
|
|
this.routes = { distance: 0, time: 0, steps: [], }
|
|
|
|
|
this.map.setZoomAndCenter(13, [this.selectedUnit.location.x, this.selectedUnit.location.y]); //设置地图中心点
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//交换起始点
|
|
|
|
|
exchangeGISRoute() {
|
|
|
|
|
let data = this.routeStart
|
|
|
|
|
this.routeStart = this.routeEnd
|
|
|
|
|
this.routeEnd = data
|
|
|
|
|
this.routeStartList = []
|
|
|
|
|
this.routeEndList = []
|
|
|
|
|
let data2 = this.startCoordinate
|
|
|
|
|
this.startCoordinate = this.endCoordinate
|
|
|
|
|
this.endCoordinate = data2
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
routes: any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划
|
|
|
|
|
|
|
|
|
|
startCoordinate: any//开始坐标
|
|
|
|
|
endCoordinate: any//结束坐标
|
|
|
|
|
|
|
|
|
|
//导航查询
|
|
|
|
|
queryGISRoute() {
|
|
|
|
|
//构造路线导航类
|
|
|
|
|
let that = this
|
|
|
|
|
this.selectType = true
|
|
|
|
|
this.routeGIS ? this.routeGIS.clear() : null
|
|
|
|
|
this.routeGIS = MapFactory.DrivingInstance({
|
|
|
|
|
map: this.map,
|
|
|
|
|
});
|
|
|
|
|
if (!this.startCoordinate) {
|
|
|
|
|
let config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open('未查询到起点坐标信息，请输入有效地址', '确定', config);
|
|
|
|
|
return
|
|
|
|
|
} else if (!this.endCoordinate) {
|
|
|
|
|
let config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open('未查询到终点坐标信息，请输入有效地址', '确定', config);
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
this.routeGIS.search(this.startCoordinate, this.endCoordinate,
|
|
|
|
|
function (status, result) {
|
|
|
|
|
if (status === 'complete') {
|
|
|
|
|
that.routes = result.routes[0]
|
|
|
|
|
} else { alert('获取驾驶规划路线失败') }
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//切换 导航模式 推荐方案/躲避拥堵
|
|
|
|
|
toggleRoute(e) {
|
|
|
|
|
let that = this
|
|
|
|
|
if (this.selectType != e) {
|
|
|
|
|
this.selectType = e
|
|
|
|
|
this.routeGIS ? this.routeGIS.clear() : null
|
|
|
|
|
this.routeGIS = MapFactory.DrivingInstance({
|
|
|
|
|
map: this.map,
|
|
|
|
|
policy: e == true ? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC
|
|
|
|
|
});
|
|
|
|
|
// 根据起终点名称规划驾车导航路线
|
|
|
|
|
|
|
|
|
|
this.routeGIS.search(this.startCoordinate, this.endCoordinate,
|
|
|
|
|
function (status, result) {
|
|
|
|
|
if (status === 'complete') {
|
|
|
|
|
that.routes = result.routes[0]
|
|
|
|
|
} else { alert('获取驾驶规划路线失败') }
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//分享
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'shareUrl-dialog',
|
|
|
|
|
templateUrl: './shareUrl.html',
|
|
|
|
|
styleUrls: ['./shareUrl.scss']
|
|
|
|
|
})
|
|
|
|
|
export class ShareUrlDialog {
|
|
|
|
|
|
|
|
|
|
constructor(public http: HttpClient, public snackBar: MatSnackBar,
|
|
|
|
|
public dialogRef: MatDialogRef<ShareUrlDialog>,
|
|
|
|
|
@Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2) { }
|
|
|
|
|
|
|
|
|
|
selectetime: any = [{ id: 0, name: '今日有效' }, { id: 1, name: '本周有效' }, { id: 2, name: '本月有效' }, { id: 3, name: '仅一次有效' }]
|
|
|
|
|
selectedTimeIndex = 0
|
|
|
|
|
ngOnInit() {
|
|
|
|
|
this.makeCode()
|
|
|
|
|
}
|
|
|
|
|
//生成二维码
|
|
|
|
|
qrCode
|
|
|
|
|
makeCode() {
|
|
|
|
|
this.qrCode = new QRCode(document.getElementById("qrcode"), {
|
|
|
|
|
text: this.data.url,
|
|
|
|
|
width: 200,
|
|
|
|
|
height: 200,
|
|
|
|
|
colorDark: "#000000",
|
|
|
|
|
colorLight: "#ffffff",
|
|
|
|
|
correctLevel: QRCode.CorrectLevel.H
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
//下载二维码
|
|
|
|
|
downloadFile() {
|
|
|
|
|
let canvas = this.qrCode._el.querySelector("canvas")
|
|
|
|
|
var base64Text = canvas.toDataURL("image/png");
|
|
|
|
|
let url = base64Text //createObjectURL创建一个下载Blob的url地址
|
|
|
|
|
let link = document.createElement("a");
|
|
|
|
|
link.style.display = "none";
|
|
|
|
|
link.href = url;
|
|
|
|
|
link.setAttribute("download", '二维码');
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
|
link.click();
|
|
|
|
|
}
|
|
|
|
|
//复制链接
|
|
|
|
|
copyUrl() {
|
|
|
|
|
var copyTest = this.data.url
|
|
|
|
|
var inputTest = document.createElement('input')
|
|
|
|
|
inputTest.value = copyTest
|
|
|
|
|
document.body.appendChild(inputTest)
|
|
|
|
|
inputTest.select()
|
|
|
|
|
document.execCommand('Copy')
|
|
|
|
|
inputTest.className = 'oInput'
|
|
|
|
|
inputTest.style.display = 'none'
|
|
|
|
|
const config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open('复制链接成功', '确定', config);
|
|
|
|
|
}
|
|
|
|
|
selectedTime(index) {
|
|
|
|
|
if (this.selectedTimeIndex != index) {
|
|
|
|
|
this.selectedTimeIndex = index
|
|
|
|
|
this.qrCode.clear();
|
|
|
|
|
if (index == 0) {//如果今日有效
|
|
|
|
|
console.log("今日")
|
|
|
|
|
}
|
|
|
|
|
if (index == 1) {//如果本周有效
|
|
|
|
|
console.log("本周")
|
|
|
|
|
this.qrCode.makeCode("http://www.w3cschool.cc")
|
|
|
|
|
}
|
|
|
|
|
if (index == 2) {//如果本月有效
|
|
|
|
|
console.log("本月")
|
|
|
|
|
}
|
|
|
|
|
if (index == 3) {//如果仅一次有效
|
|
|
|
|
console.log("一次")
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//关闭
|
|
|
|
|
closeDiv() {
|
|
|
|
|
this.dialogRef.close()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//查看预案
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'lookPlan-dialog',
|
|
|
|
|
templateUrl: './lookPlan.html',
|
|
|
|
|
styleUrls: ['./lookPlan.scss']
|
|
|
|
|
})
|
|
|
|
|
export class LookPlanDialog {
|
|
|
|
|
|
|
|
|
|
constructor(public http: HttpClient, public snackBar: MatSnackBar,
|
|
|
|
|
public dialogRef: MatDialogRef<LookPlanDialog>,
|
|
|
|
|
@Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2, public dialog: MatDialog) { }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
|
// console.log(this.data)
|
|
|
|
|
this.getAllPlans()
|
|
|
|
|
}
|
|
|
|
|
//关闭弹窗
|
|
|
|
|
closeDiv() {
|
|
|
|
|
this.dialogRef.close()
|
|
|
|
|
}
|
|
|
|
|
//查看单位详情
|
|
|
|
|
lookUnitDetails() {
|
|
|
|
|
window.open(`/keyUnit/viewunitinfo?id=${this.data.id}`)
|
|
|
|
|
}
|
|
|
|
|
//获得所有预案组件
|
|
|
|
|
allPlanComponents: any//所有预案组件
|
|
|
|
|
getAllPlans() {
|
|
|
|
|
let paramsData: any = {
|
|
|
|
|
companyId: this.data.id,
|
|
|
|
|
pageNumber: 1,
|
|
|
|
|
pageSize: "100",
|
|
|
|
|
sort: ""
|
|
|
|
|
}
|
|
|
|
|
this.http.get("/api/PlanComponents", { params: paramsData }).subscribe((data: any) => {
|
|
|
|
|
this.allPlanComponents = data.items
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
//查看预案
|
|
|
|
|
lookPlan(e) {
|
|
|
|
|
if (e.planMode == 0) {
|
|
|
|
|
const config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open('本地文件，请下载查看', '确定', config);
|
|
|
|
|
}
|
|
|
|
|
if (e.planMode == 1) {
|
|
|
|
|
const config = new MatSnackBarConfig();
|
|
|
|
|
config.verticalPosition = 'top';
|
|
|
|
|
config.duration = 3000
|
|
|
|
|
this.snackBar.open('查看导入word文件', '确定', config);
|
|
|
|
|
}
|
|
|
|
|
if (e.planMode == 2) { //如果是在线编辑
|
|
|
|
|
let id = e.id
|
|
|
|
|
sessionStorage.setItem("planId", id)
|
|
|
|
|
sessionStorage.setItem("companyId", this.data.id)
|
|
|
|
|
sessionStorage.setItem("buildingTypeId", this.data.buildingTypes[0].id)
|
|
|
|
|
sessionStorage.setItem("editable", "0")
|
|
|
|
|
sessionStorage.setItem("planName", e.name)
|
|
|
|
|
let companyId = sessionStorage.getItem("companyId")
|
|
|
|
|
window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`);
|
|
|
|
|
}
|
|
|
|
|
if (e.planMode == 3) { //如果是跳转网页
|
|
|
|
|
sessionStorage.setItem("url", e.url)
|
|
|
|
|
window.open(`/planManagement/webLook`)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//点击下载
|
|
|
|
|
readFile(element) {
|
|
|
|
|
this.uploadFileLonging = element
|
|
|
|
|
let data = element
|
|
|
|
|
const dialogRef = this.dialog.open(DownloadFile, {
|
|
|
|
|
width: "435px",
|
|
|
|
|
data
|
|
|
|
|
});
|
|
|
|
|
dialogRef.afterClosed().subscribe(
|
|
|
|
|
data => {
|
|
|
|
|
if (data) {
|
|
|
|
|
this.downloadFileName = data.fileName
|
|
|
|
|
this.download = data
|
|
|
|
|
this.downloadFile()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//下载↓
|
|
|
|
|
selectDownloadFile: any; //选择下载的文件
|
|
|
|
|
download: any; //下载文件元数据
|
|
|
|
|
downloadFileName: any //下载文件的文件名
|
|
|
|
|
downloadisLoading: boolean = false; //进度条loading是否加载
|
|
|
|
|
downloadProgress: number = 0; //进度条进度
|
|
|
|
|
|
|
|
|
|
uploadFileLonging: any
|
|
|
|
|
downloadFile() {
|
|
|
|
|
this.downloadProgress = 0
|
|
|
|
|
let file = this.download
|
|
|
|
|
let fileSize = file.fileLength//下载文件的总大小
|
|
|
|
|
let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB
|
|
|
|
|
|
|
|
|
|
if (file && fileSize <= shardSize) { //<=10MB时直接下载
|
|
|
|
|
this.downloadisLoading = true
|
|
|
|
|
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`, { responseType: 'blob' },).subscribe(data => {
|
|
|
|
|
let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
|
|
|
|
|
let link = document.createElement("a");
|
|
|
|
|
link.style.display = "none";
|
|
|
|
|
link.href = url;
|
|
|
|
|
let suffix = file.objectName.substring(file.objectName.lastIndexOf(".") + 1, file.objectName.length);
|
|
|
|
|
link.setAttribute("download", file.fileName ? file.fileName : this.data.name + "-" + this.uploadFileLonging.name + "." + suffix);
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
|
link.click();
|
|
|
|
|
this.downloadisLoading = false
|
|
|
|
|
})
|
|
|
|
|
} else if (file && fileSize > shardSize) { //>10MB时分块下载
|
|
|
|
|
this.blockingDownload() //分段下载
|
|
|
|
|
this.downloadisLoading = true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//分段下载并合并
|
|
|
|
|
async blockingDownload() {
|
|
|
|
|
let file = this.download
|
|
|
|
|
let fileSize = file.fileLength //下载文件的总大小
|
|
|
|
|
let shardSize = 3 * 1024 * 1024 //3MB一个分片
|
|
|
|
|
let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
|
|
|
|
|
let allFile: any = [] //所有的file分段
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < allSlice; i++) {
|
|
|
|
|
let start = i * shardSize //每次下载文件开始位置
|
|
|
|
|
let end = Math.min(fileSize, start + shardSize - 1); //每次下载文件结束为止
|
|
|
|
|
|
|
|
|
|
let result = await new Promise((result, reject) => {
|
|
|
|
|
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`, { headers: { 'range': `bytes= ${start}-${end}` }, responseType: 'blob' }).subscribe(data => {
|
|
|
|
|
result(data)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
allFile.push(result)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (allFile.length === allSlice) { //合并文件输出给浏览器
|
|
|
|
|
let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
|
|
|
|
|
let link = document.createElement("a");
|
|
|
|
|
link.style.display = "none";
|
|
|
|
|
link.href = url;
|
|
|
|
|
let suffix = file.objectName.substring(file.objectName.lastIndexOf(".") + 1, file.objectName.length);
|
|
|
|
|
link.setAttribute("download", file.fileName ? file.fileName : this.data.unitname + "-" + this.uploadFileLonging.name + "." + suffix);
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
|
link.click();
|
|
|
|
|
this.downloadisLoading = false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
} //for循环
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//取消分块下载
|
|
|
|
|
cancelDowload() {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//下载文件弹出框
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'downloadfile',
|
|
|
|
|
templateUrl: './downloadFile.html',
|
|
|
|
|
styleUrls: ['./downloadFile.scss']
|
|
|
|
|
})
|
|
|
|
|
export class DownloadFile {
|
|
|
|
|
|
|
|
|
|
constructor(private http: HttpClient, public dialogRef: MatDialogRef<DownloadFile>, @Inject(MAT_DIALOG_DATA) public data, public snackBar: MatSnackBar) { }
|
|
|
|
|
name: any //如果真实姓名为空时
|
|
|
|
|
fileUrls: any //当前预案附件地址数组
|
|
|
|
|
fileDatas: any = [] //用于循环的数组
|
|
|
|
|
selectedFileIndex: any = 0
|
|
|
|
|
selectedFileData: any
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void {
|
|
|
|
|
// console.log(this.data)
|
|
|
|
|
this.name = this.data.name
|
|
|
|
|
this.fileUrls = this.data.attachmentUrls
|
|
|
|
|
this.fileUrls.forEach(item => {
|
|
|
|
|
this.http.get('/api/ObjectMetadata/PlanPlatform/' + item).subscribe((data: any) => {
|
|
|
|
|
data.filePige = (data.fileLength / (1024 * 1024)).toFixed(2)
|
|
|
|
|
this.fileDatas.push(data)
|
|
|
|
|
this.selectedFileData = data
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//取消
|
|
|
|
|
onNoClick(): void {
|
|
|
|
|
this.dialogRef.close();
|
|
|
|
|
}
|
|
|
|
|
//确定
|
|
|
|
|
confirm() {
|
|
|
|
|
this.dialogRef.close(this.selectedFileData);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//点击想要下载的文件
|
|
|
|
|
addurl(item, key) {
|
|
|
|
|
// console.log(item,key)
|
|
|
|
|
this.selectedFileIndex = key
|
|
|
|
|
this.selectedFileData = item
|
|
|
|
|
}
|
|
|
|
|
}
|
