You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1328 lines
50 KiB
1328 lines
50 KiB
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'; |
|
declare var AMap: any; |
|
declare var QRCode: any; |
|
|
|
@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/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}, |
|
] |
|
|
|
keyUnitForm : FormGroup//gis右上角重点单位表单 |
|
watertForm : FormGroup//gis右上角水源表单 |
|
selectedUnitList:any = []//选择提交的单位 |
|
selectedWaterList:any = []//选择提交的水源 |
|
unitAreaDefault:any = '-1'//默认单位范围 |
|
waterAreaDefault:any = '-1'//默认水源范围 |
|
//获得单位循环出来的checkbox列表（formControl实例） |
|
get units():any{ |
|
return this.keyUnitForm.get('units') |
|
} |
|
get waters():any{ |
|
return this.watertForm.get('waters') |
|
} |
|
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() |
|
}) |
|
//将选中的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.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); |
|
} |
|
//初始化获取勾选项 |
|
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) |
|
} |
|
}) |
|
} |
|
//地图范围圆圈---重点单位 |
|
circle = new AMap.Circle({ |
|
center: null, |
|
radius: 0, //半径 |
|
strokeOpacity: 1, |
|
fillOpacity: 0.4, |
|
strokeStyle: 'dashed', |
|
strokeDasharray: [10, 10], |
|
// 线样式还支持 'dashed' |
|
fillColor: '#1791fc', |
|
zIndex: 50, |
|
}) |
|
//地图范围圆圈---水源 |
|
circleofwater = new AMap.Circle({ |
|
center: null, |
|
radius: 0, //半径 |
|
strokeOpacity: 1, |
|
fillOpacity: 0.4, |
|
strokeStyle: 'dashed', |
|
strokeDasharray: [10, 10], |
|
// 线样式还支持 'dashed' |
|
fillColor: '#ee2200', |
|
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 = new AMap.LngLat(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/餐饮.png' |
|
}else if(item.buildingTypes[0].name.indexOf('厂房') != -1){ |
|
image = '/assets/images/厂房.png' |
|
}else if(item.buildingTypes[0].name.indexOf('储罐') != -1){ |
|
image = '/assets/images/储罐类.png' |
|
}else if(item.buildingTypes[0].name.indexOf('地下') != -1){ |
|
image = '/assets/images/地下.png' |
|
}else if(item.buildingTypes[0].name.indexOf('古建筑') != -1){ |
|
image = '/assets/images/古建筑.png' |
|
}else if(item.buildingTypes[0].name.indexOf('轨道' || '地铁' || '交通') != -1){ |
|
image = '/assets/images/轨道交通.png' |
|
}else if(item.buildingTypes[0].name.indexOf('商场' || '超市') != -1){ |
|
image = '/assets/images/商场超市.png' |
|
}else if(item.buildingTypes[0].name.indexOf('隧道') != -1){ |
|
image = '/assets/images/隧道.png' |
|
}else if(item.buildingTypes[0].name.indexOf('危化品') != -1){ |
|
image = '/assets/images/危化品.png' |
|
}else if(item.buildingTypes[0].name.indexOf('学校' || '教育') != -1){ |
|
image = '/assets/images/学校.png' |
|
}else if(item.buildingTypes[0].name.indexOf('医院' || '医疗') != -1){ |
|
image = '/assets/images/医院.png' |
|
}else if(item.buildingTypes[0].name.indexOf('影' || '剧') != -1){ |
|
image = '/assets/images/影剧院.png' |
|
}else if(item.buildingTypes[0].name.indexOf('娱乐') != -1){ |
|
image = '/assets/images/娱乐.png' |
|
}else if(item.buildingTypes[0].name.indexOf('展览' || '景点' || '景区') != -1){ |
|
image = '/assets/images/展览建筑.png' |
|
}else{ |
|
image = '/assets/images/其他.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; |
|
var _renderClusterMarker = function (context) { |
|
var factor = Math.pow(context.count / count, 1 / 18); |
|
var div = document.createElement('div'); |
|
var Hue = 180 - factor * 180; |
|
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; |
|
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; |
|
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; |
|
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; |
|
div.style.backgroundColor = bgColor; |
|
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); |
|
div.style.width = div.style.height = size + 'px'; |
|
div.style.border = 'solid 1px ' + borderColor; |
|
div.style.borderRadius = size / 2 + 'px'; |
|
div.style.boxShadow = '0 0 5px ' + shadowColor; |
|
div.innerHTML = context.count; |
|
div.style.lineHeight = size + 'px'; |
|
div.style.color = fontColor; |
|
div.style.fontSize = '14px'; |
|
div.style.textAlign = 'center'; |
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); |
|
context.marker.setContent(div) |
|
}; |
|
var _renderMarker = (context)=> { |
|
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`; |
|
var offset = new AMap.Pixel(-15, -15); |
|
context.marker.setContent(content) |
|
context.marker.setOffset(offset) |
|
} |
|
this.unitCluster = new AMap.MarkerCluster(this.map, unitMarkerArrcluster, { |
|
gridSize: gridSize, // 设置网格像素大小 |
|
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 |
|
renderMarker: _renderMarker, // 自定义非聚合点样式 |
|
}); |
|
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 = new AMap.InfoWindow({ |
|
position: [item.location.x,item.location.y], |
|
offset: new AMap.Pixel(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.setData([]) |
|
} |
|
//水源提交 |
|
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 = new AMap.LngLat(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); |
|
} |
|
} |
|
} |
|
} |
|
//取消显示水源 |
|
resetWater(){ |
|
this.watertForm.reset() |
|
this.watertForm.controls.areaWater.setValue('-1') |
|
this.map.remove(this.circleofwater) |
|
this.waterCluster.setData([]) |
|
} |
|
//循环渲染出所有水源markers |
|
waterCluster:any //水源聚合实例 |
|
createwaterMarker(list){ |
|
let waterMarkerArrcluster = [] |
|
this.waterCluster ? this.waterCluster.setData([]) : null |
|
list.forEach((item) => { |
|
let image |
|
if(item.waterSourceType == 0){//消火栓 |
|
image = '/assets/waterMarkers/市政消火栓.png' |
|
}else if(item.waterSourceType == 1){//消防水池 |
|
image = '/assets/waterMarkers/方形储水池.png' |
|
}else if(item.waterSourceType == 2){//天然水源 |
|
image = '/assets/waterMarkers/天然水源.png' |
|
} |
|
// 用于点集合的数组 |
|
waterMarkerArrcluster.push({ |
|
lnglat : [item.location.x,item.location.y], |
|
image : image, |
|
data : item |
|
}) |
|
}) |
|
this.map.plugin(["AMap.MarkerClusterer"],() => { |
|
var gridSize = 60 |
|
var count = waterMarkerArrcluster.length; |
|
var _renderClusterMarker = function (context) { |
|
var factor = Math.pow(context.count / count, 1 / 18); |
|
var div = document.createElement('div'); |
|
var Hue = 180 - factor * 180; |
|
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; |
|
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; |
|
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; |
|
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; |
|
div.style.backgroundColor = bgColor; |
|
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); |
|
div.style.width = div.style.height = size + 'px'; |
|
div.style.border = 'solid 1px ' + borderColor; |
|
div.style.borderRadius = size / 2 + 'px'; |
|
div.style.boxShadow = '0 0 5px ' + shadowColor; |
|
div.innerHTML = context.count; |
|
div.style.lineHeight = size + 'px'; |
|
div.style.color = fontColor; |
|
div.style.fontSize = '14px'; |
|
div.style.textAlign = 'center'; |
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); |
|
context.marker.setContent(div) |
|
}; |
|
var _renderMarker = (context)=> { |
|
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; |
|
var offset = new AMap.Pixel(-15, -15); |
|
context.marker.setContent(content) |
|
context.marker.setOffset(offset) |
|
} |
|
this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { |
|
gridSize: gridSize, // 设置网格像素大小 |
|
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 |
|
renderMarker: _renderMarker, // 自定义非聚合点样式 |
|
}); |
|
this.waterCluster.on('click',(e)=>{ |
|
if(e.clusterData.length == 1){ |
|
|
|
} |
|
}) |
|
}); |
|
|
|
} |
|
|
|
//计算两地距离 |
|
Calculationofdistance(bounds){ |
|
let p1 = [bounds.northEast.lng, bounds.northEast.lat]; |
|
let p2 = [bounds.northEast.lng, bounds.southWest.lat]; |
|
// 返回 p1 到 p2 间的地面距离，单位：米 |
|
let dis = AMap.GeometryUtil.distance(p1, p2); |
|
return dis |
|
} |
|
|
|
//全选重点单位 |
|
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') |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
//右上角点击每一个title |
|
clickTitle(index){ |
|
this.selectedTitle = index |
|
} |
|
closertdiv(){ |
|
this.selectedTitle = null |
|
} |
|
|
|
//卫星图层 |
|
satelliteLayer = new AMap.TileLayer.Satellite(); |
|
satelliteModel:boolean = false |
|
satelliteChange(e){ |
|
e.checked ? this.map.add(this.satelliteLayer) : this.map.remove(this.satelliteLayer); |
|
} |
|
|
|
//路网图层 |
|
roadNetLayer = new AMap.TileLayer.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:any //地图 |
|
markers:any = []; //markers标注 |
|
|
|
//地图2D 3D切换 |
|
mapPattern:boolean = true//默认是2D |
|
mapPatternChange(type){ |
|
this.unitCluster = null |
|
this.waterCluster = null |
|
if(type == '2D'){ |
|
this.mapPattern = true |
|
var layer = new AMap.createDefaultLayer({ |
|
zooms:[3,20], //可见级别 |
|
visible:true, //是否可见 |
|
opacity:1, //透明度 |
|
zIndex:0, //叠加层级 |
|
resizeEnable: true //是否监控地图容器尺寸变化, |
|
}) |
|
this.map = new AMap.Map('map',{ |
|
layers:[layer], //当只想显示标准图层时layers属性可缺省, |
|
}); |
|
this.map.setCity('上海市'); |
|
}else{ |
|
this.unitCluster ? this.unitCluster.setData([]) : null |
|
this.mapPattern = false |
|
this.map = new AMap.Map('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 = new AMap.createDefaultLayer({ |
|
zooms:[3,20], //可见级别 |
|
visible:true, //是否可见 |
|
opacity:1, //透明度 |
|
zIndex:0, //叠加层级 |
|
resizeEnable: true //是否监控地图容器尺寸变化, |
|
}) |
|
that.map = new AMap.Map('map',{ |
|
layers:[layer], //当只想显示标准图层时layers属性可缺省, |
|
}); |
|
|
|
that.map.setCity('上海市'); |
|
AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],function () { |
|
that.mouseTool=new AMap.MouseTool(that.map); |
|
}); |
|
|
|
} |
|
|
|
searchText:string; //搜索单位名称 |
|
allCompany = []; //搜索到 匹配的单位 |
|
|
|
measureDistance; //测距离 |
|
distanceList = []; //测距离 点和线 |
|
measureArea; //测面积 |
|
mouseTool;//二合一测距和侧面积 |
|
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: new AMap.Icon({ |
|
size: new AMap.Size(19, 31),//图标大小 |
|
imageSize:new AMap.Size(19, 31), |
|
image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png" |
|
}) |
|
}, |
|
endMarkerOptions : {//可缺省 |
|
icon: new AMap.Icon({ |
|
size: new AMap.Size(19, 31),//图标大小 |
|
imageSize:new AMap.Size(19, 31), |
|
image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png" |
|
}), |
|
offset: new AMap.Pixel(-9, -31) |
|
}, |
|
midMarkerOptions : {//可缺省 |
|
icon: new AMap.Icon({ |
|
size: new AMap.Size(19, 31),//图标大小 |
|
imageSize:new AMap.Size(19, 31), |
|
image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png" |
|
}), |
|
offset: new AMap.Pixel(-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 = new AMap.Marker({ |
|
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 = new AMap.InfoWindow({ |
|
position: [e.location.x,e.location.y], |
|
offset: new AMap.Pixel(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 = new AMap.InfoWindow({ |
|
position: [e.location.x,e.location.y], |
|
offset: new AMap.Pixel(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 = new AMap.LngLat(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:any; //查询结果 规划路线 |
|
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 |
|
AMap.plugin(['AMap.AutoComplete'], () =>{ |
|
var autoOptions = {city: info.city} |
|
let keywords |
|
e == 0 ? keywords = that.routeStart : keywords = that.routeEnd |
|
var autoComplete = new AMap.Autocomplete(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 = new AMap.LngLat(element.location.lng, element.location.lat) |
|
return |
|
} |
|
} |
|
} |
|
}else{//终点 |
|
that.routeEndList = result.tips |
|
that.endCoordinate = new AMap.LngLat(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 = new AMap.Driving({ |
|
map: this.map, |
|
}); |
|
if(!this.startCoordinate){ |
|
let config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('未查询到起点坐标信息，请输入有效地址','确定',config); |
|
return |
|
}else if(!this.startCoordinate){ |
|
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 = new AMap.Driving({ |
|
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 |
|
} |
|
} |