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.
1248 lines
46 KiB
1248 lines
46 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/areaicon.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}, |
|
// {id:'0',name:'单位地上消火栓',selected:false}, |
|
// {id:'0',name:'单位地下消火栓',selected:false}, |
|
// {id:'0',name:'市政地上消火栓',selected:false}, |
|
// {id:'0',name:'消防水池',selected:false}, |
|
// {id:'0',name:'方形储水池',selected:false}, |
|
// {id:'0',name:'蓄水池',selected:false}, |
|
// {id:'0',name:'原型水塔',selected:false}, |
|
// {id:'0',name:'水库',selected:false}, |
|
// {id:'0',name:'消防水箱',selected:false}, |
|
// {id:'0',name:'码头',selected:false}, |
|
// {id:'0',name:'海洋',selected:false}, |
|
// {id:'0',name:'河流',selected:false}, |
|
// {id:'0',name:'湖泊',selected:false}, |
|
// {id:'0',name:'沟渠',selected:false} |
|
] |
|
|
|
keyUnitForm : FormGroup//gis右上角重点单位表单 |
|
watertForm : FormGroup//gis右上角水源表单 |
|
selectedUnitList:any = []//选择提交的单位 |
|
selectedWaterList:any = []//选择提交的水源 |
|
unitAreaDefault:any = '0'//默认单位范围 |
|
waterAreaDefault:any = '0'//默认水源范围 |
|
//获得单位循环出来的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){ |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请先选择一个单位','确定',config); |
|
}else if(!this.mapPattern){ |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请切换2D模式使用此功能','确定',config); |
|
}else{ |
|
console.log('提交',this.selectedUnit) |
|
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) |
|
} |
|
|
|
let paramsdata:any = { |
|
Lon : this.selectedUnit.location.x, |
|
Lat : this.selectedUnit.location.y, |
|
Distance : Distance, |
|
BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123'] |
|
} |
|
console.log(666,paramsdata) |
|
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 |
|
unitMarkerList:any = [] |
|
unitlabelsLayer:any |
|
createUnitMarker(list){ |
|
this.unitlabelsLayer ? this.map.remove(this.unitlabelsLayer) : null |
|
this.unitMarkerList ? this.map.remove(this.unitMarkerList) : null |
|
|
|
let markerArr = [] |
|
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' |
|
} |
|
var icon = { |
|
// 图标类型，现阶段只支持 image 类型 |
|
type: 'image', |
|
// 图片 url |
|
image: image, |
|
// 图片尺寸 |
|
size: [32, 32], |
|
// 图片相对 position 的锚点，默认为 bottom-center |
|
anchor: 'center', |
|
}; |
|
var text = { |
|
// 要展示的文字内容 |
|
content: item.name, |
|
// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置 |
|
direction: 'bottom', |
|
// 在 direction 基础上的偏移量 |
|
offset: [-3, -3], |
|
// 文字样式 |
|
style: { |
|
// 字体大小 |
|
fontSize: 12, |
|
// 字体颜色 |
|
fillColor: '#22886f', |
|
// 描边颜色 |
|
strokeColor: '#fff', |
|
// 描边宽度 |
|
strokeWidth: 2, |
|
} |
|
}; |
|
var labelMarker = new AMap.LabelMarker({ |
|
name: item.name, // 此属性非绘制文字内容，仅最为标识使用 |
|
position: [item.location.x,item.location.y], |
|
zIndex: 16, |
|
// 将第一步创建的 icon 对象传给 icon 属性 |
|
icon: icon, |
|
// 将第二步创建的 text 对象传给 text 属性 |
|
text: text, |
|
}); |
|
labelMarker.on('click', (e)=>{ |
|
console.log(item) |
|
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[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) })//分享点击事件 |
|
}); |
|
markerArr.push(labelMarker) |
|
}) |
|
this.unitlabelsLayer = new AMap.LabelsLayer({ |
|
zooms: [3, 20], |
|
zIndex: 1000, |
|
// 该层内标注是否避让 |
|
collision: false, |
|
// 设置 allowCollision：true，可以让标注避让用户的标注 |
|
// allowCollision: true, |
|
}); |
|
this.unitlabelsLayer.add(markerArr); |
|
this.map.add(this.unitlabelsLayer);//增加图层 |
|
|
|
this.unitMarkerList = markerArr |
|
this.map.add(this.unitMarkerList);//将markers添加到图层上 |
|
} |
|
//取消单位markers |
|
clearUnitMarker(){ |
|
this.map.remove(this.unitlabelsLayer) |
|
this.map.remove(this.unitMarkerList); |
|
} |
|
|
|
//水源提交 |
|
waterSubmit(value){ |
|
if(this.markers.length == 0){ |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请先选择一个单位','确定',config); |
|
}else if(!this.mapPattern){ |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请切换2D模式使用此功能','确定',config); |
|
}else{ |
|
this.createwaterMarker() |
|
this.circleofwater.setRadius(Number(this.waterAreaDefault)) |
|
this.circleofwater.setCenter(this.markers[0]._position) |
|
this.circleofwater.setMap(this.map) |
|
if(this.waterAreaDefault == '0'){ |
|
this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds())/2) |
|
} |
|
} |
|
} |
|
waterIconList = []; //展示的水源图标 |
|
//循环渲染出所有水源markers |
|
createwaterMarker(){ |
|
this.waterIconList.forEach((element,index) => { this.map.remove(element) }); //先删除所有标点 |
|
this.waterIconList = [] |
|
let waterType = this.selectedWaterList //筛选出展示的 水源类型 |
|
if (waterType.length) { |
|
let x = JSON.parse( JSON.stringify(this.markers[0]._position[0]) ) //中心标注的 坐标 |
|
let y = JSON.parse( JSON.stringify(this.markers[0]._position[1]) ) //中心标注的 坐标 |
|
let positonList = [0.015, -0.035, 0.045, 0.061, -0.013, 0.029] |
|
// 创建一个 Icon |
|
let startIcon = new AMap.Icon({ |
|
image: '../../../assets/images/fireHydrant.png', |
|
imageSize: new AMap.Size(32, 32), |
|
}); |
|
positonList.forEach((item,index)=>{ |
|
let marker = new AMap.Marker({ |
|
map: this.map, |
|
position: index%2==0? JSON.parse( JSON.stringify([x+item,y-item]) ) : JSON.parse( JSON.stringify([x-item,y+item]) ), |
|
icon: startIcon, |
|
}); |
|
this.waterIconList.push(marker) |
|
}) |
|
positonList.forEach((item,index)=>{ |
|
let marker = new AMap.Marker({ |
|
map: this.map, |
|
position: index%2==0? JSON.parse( JSON.stringify([x+item,y+item]) ) : JSON.parse( JSON.stringify([x-item,y-item]) ), |
|
icon: startIcon, |
|
}); |
|
this.waterIconList.push(marker) |
|
}) |
|
} else { |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请选择水源类型','确定',config); |
|
} |
|
} |
|
|
|
//计算两地距离 |
|
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') |
|
} |
|
} |
|
|
|
//取消显示单位 |
|
resetUnit(){ |
|
this.keyUnitForm.reset() |
|
this.keyUnitForm.controls.areaUnit.setValue('0') |
|
this.map.remove(this.circle) |
|
this.clearUnitMarker()//取消显示单位markers |
|
console.log('取消') |
|
} |
|
|
|
//取消显示水源 |
|
resetWater(){ |
|
this.waterIconList.forEach((element,index) => { this.map.remove(element) }); //先删除所有标点 |
|
this.waterIconList = [] |
|
this.watertForm.reset() |
|
this.watertForm.controls.areaWater.setValue('0') |
|
this.map.remove(this.circleofwater) |
|
console.log('取消') |
|
} |
|
|
|
//右上角点击每一个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); |
|
} |
|
// floorLayer = new AMap.Buildings({ |
|
// zooms: [16, 18], |
|
// zIndex: 10, |
|
// heightFactor: 2 //2倍于默认高度，3D下有效 |
|
// }) |
|
//楼层图层 |
|
// floorChange(e){ |
|
// e.checked ? this.map.add(this.floorLayer) : this.map.remove(this.floorLayer); |
|
// } |
|
|
|
@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){ |
|
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属性可缺省, |
|
}); |
|
}else{ |
|
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.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属性可缺省, |
|
}); |
|
|
|
AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],function () { |
|
that.mouseTool=new AMap.MouseTool(that.map); |
|
/* that.measureDistance = new AMap.RangingTool(that.map, rulerOptions); //测距离 |
|
that.measureArea = new AMap.MouseTool(that.map); //侧面积 */ |
|
/* that.measureDistance.on('addnode',function(e){ //监听测距离 标点事件 |
|
that.distanceList.push(e.marker) |
|
}) |
|
that.measureDistance.on('end',function(e){ //监听测距离 连线事件 |
|
that.distanceList.push(e.polyline) |
|
}) */ |
|
/* that.mouseTool.on("rightclick",function(e){ |
|
if(this.mouseTool.eventsList[1]==undefined){ |
|
alert("000") |
|
} |
|
}) */ |
|
}); |
|
|
|
} |
|
|
|
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 = '' |
|
} |
|
|
|
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[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); //设置地图中心点 |
|
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 |
|
} |
|
|
|
//全景漫游 |
|
fullViewNavigation (e) { |
|
console.log(e,'全景漫游') |
|
} |
|
|
|
//三维场景 |
|
threeeScene (e) { |
|
window.open('http://121.37.20.190:8088/%5B%E7%BD%91%E9%A1%B5%E7%89%88%5D%E8%B4%B5%E6%B8%AF%E6%B2%B9%E5%BA%93%E4%B8%89%E7%BB%B4%E7%81%AD%E7%81%AB%E9%A2%84%E6%A1%88/') |
|
} |
|
|
|
//查看预案 |
|
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(()=>{ e == 0 ? that.routeStartList = result.tips : that.routeEndList = result.tips }); |
|
|
|
} |
|
}) |
|
}) |
|
}); //获取当前 city |
|
|
|
},500) |
|
} |
|
|
|
//清空导航输入框 |
|
deleteSearchGIS (e) { |
|
if (e==0) { |
|
this.routeStart = null |
|
this.routeStartList = [] |
|
} else { |
|
this.routeEnd = null |
|
this.routeEndList = [] |
|
} |
|
} |
|
|
|
//清除路线 |
|
clearGISRoute () { |
|
this.routeStart = null |
|
this.routeStartList = [] |
|
this.routeEnd = null |
|
this.routeEndList = [] |
|
this.routeGIS? this.routeGIS.clear() : null |
|
this.routes = { distance: 0, time: 0, steps: [], } |
|
console.log(this.selectedUnit) |
|
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 = [] |
|
} |
|
|
|
routes:any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划 |
|
//导航查询 |
|
queryGISRoute () { |
|
//构造路线导航类 |
|
let that = this |
|
this.selectType = true |
|
this.routeGIS? this.routeGIS.clear() : null |
|
this.routeGIS = new AMap.Driving({ |
|
map: this.map, |
|
}); |
|
// 根据起终点名称规划驾车导航路线 |
|
this.routeGIS.search([{keyword: this.routeStart},{keyword: this.routeEnd}], |
|
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([{keyword: this.routeStart},{keyword: this.routeEnd}], |
|
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 |
|
console.log(this.allPlanComponents) |
|
}) |
|
} |
|
//查看预案 |
|
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){ |
|
console.log(123,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 |
|
} |
|
} |