import { FlatTreeControl } from '@angular/cdk/tree'; import { HttpClient } from '@angular/common/http'; import { Inject, Renderer2 } from '@angular/core'; import { ElementRef } from '@angular/core'; import { Component, OnInit } from '@angular/core'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; import { NzTreeNode } from 'ng-zorro-antd/tree'; import { TreeService } from 'src/app/http-interceptors/tree.service'; import Viewer from 'viewerjs' declare var CryptoJS declare var AMap: any; @Component({ selector: 'app-fire-force', templateUrl: './fire-force.component.html', styleUrls: ['./fire-force.component.scss'] }) export class FireForceComponent implements OnInit { constructor(private tree: TreeService,public snackBar: MatSnackBar,private http:HttpClient,private elementRef: ElementRef,public renderer2: Renderer2,public dialog: MatDialog) { } isCheckedOfSearchDiv:boolean = true//列表过滤滑块 slideChange(e){ this.isCheckedOfSearchDiv = e.checked } searchForm:any = { name:'', integrityNum:'' } listIntegrityNum:any[] = [ {id:-1,name:'全部'}, {id:0,name:'<=50%'}, {id:1,name:'50%-60%'}, {id:2,name:'60%-70%'}, {id:3,name:'70%-80%'}, {id:4,name:'80%-90%'}, {id:5,name:'90%-100%'} ] checkBoxList:any[] = [ {id:0,name:'总队',isChecked:false}, {id:1,name:'支队',isChecked:false}, {id:2,name:'大队',isChecked:false}, {id:3,name:'中队(消防站)',isChecked:false}, {id:4,name:'其他消防队伍',isChecked:false} ] //勾选力量类型checkbox在地图上显示marker checkBoxChange(){ let Levels = [] this.checkBoxList.forEach(item =>{ if(item.isChecked){ Levels.push(item.id) } }) let params:any = { PageSize : 999999, Levels:Levels } if(Levels.length != 0){//如果勾选了checkbox this.http.get('/api/CustomFireForce',{params:params}).subscribe((data:any) => { this.createMarker(data) }) }else{ this.cluster.setData([]) } } //循环渲染出所有力量markers cluster:any //力量聚合实例 createMarker(list){ let markerArrcluster = [] this.cluster ? this.cluster.setData([]) : null list.forEach((item) => { let image if(item.forceType == 2){ image = '/assets/fireForcesMarkers/其他.png' }else if(item.level == 0){ image = '/assets/fireForcesMarkers/总队.png' }else if(item.level == 1){ image = '/assets/fireForcesMarkers/支队.png' }else if(item.level == 2){ image = '/assets/fireForcesMarkers/大队.png' }else if(item.level == 3){ image = '/assets/fireForcesMarkers/中队.png' } // 用于点集合的数组 item.fireForceDetailInfo.location ? markerArrcluster.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 = markerArrcluster.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 = ``; var offset = new AMap.Pixel(-15, -15); context.marker.setContent(content) context.marker.setOffset(offset) } this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, { gridSize: gridSize, // 设置网格像素大小 renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 renderMarker: _renderMarker, // 自定义非聚合点样式 }); this.cluster.on('click',(e)=>{ if(e.clusterData.length == 1){ } }) }); } ngOnInit(): void { this.getAllFireForce() setTimeout(() => { this.createMap() }, 0); } //获得所有消防力量 newdata:any allFireForceList:any= [] getAllFireForce(){ let MinIntegrity = 0 let MaxIntegrity = 1.1 if(this.searchForm.integrityNum == '0'){ MinIntegrity = 0 MaxIntegrity = 0.5 }else if(this.searchForm.integrityNum == '1'){ MinIntegrity = 0.5 MaxIntegrity = 0.6 }else if(this.searchForm.integrityNum == '2'){ MinIntegrity = 0.6 MaxIntegrity = 0.7 }else if(this.searchForm.integrityNum == '3'){ MinIntegrity = 0.7 MaxIntegrity = 0.8 }else if(this.searchForm.integrityNum == '4'){ MinIntegrity = 0.8 MaxIntegrity = 0.9 }else if(this.searchForm.integrityNum == '5'){ MinIntegrity = 0.9 MaxIntegrity = 1.1 }else if(this.searchForm.integrityNum == '-1'){ MinIntegrity = 0 MaxIntegrity = 1.1 } let params:any = { Keyword : this.searchForm.name ? this.searchForm.name : '', MinIntegrity : MinIntegrity, MaxIntegrity : MaxIntegrity } this.http.get('/api/CustomFireForce',{params:params}).subscribe((data:any) => { this.allFireForceList = data    this.dataSource.data = this.tree.toTree(data) this.treeControl.expand(this.treeControl.dataNodes[0]); }) } upDateAllFireForce = ():void=>{ this.http.get('/api/CustomFireForce').subscribe((data:any) => {    this.newdata = this.tree.toTree(data) const nodes = this.treeControl.dataNodes; const expandNodes = []; nodes.forEach((item) => { if(item.expandable && this.treeControl.isExpanded(item)){ expandNodes.push(item.id); } }); this.dataSource.data = this.newdata; let newNodes = this.treeControl.dataNodes; newNodes = newNodes.filter(n => { return expandNodes.indexOf(n.id) >= 0; }); newNodes.forEach(item => { this.treeControl.expand(item); }); }) } private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数 return { expandable: !!node.children && node.children.length > 0, name: node.name, level: level, id: node.id, parentId: node.parentId, enabled:node.enabled, order:node.order, children:node.children, code:node.code, division:node.division, fireForceDetailId:node.fireForceDetailId, forceType:node.forceType, fireForceDetailInfo:node.fireForceDetailInfo, contentVerify:node.contentVerify, }; } treeControl = new FlatTreeControl(node => node.level, node => node.expandable); treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); hasChild = (_: number, node: any) => node.expandable; selectedFireForceId:any selectedFireForceLevel:any selectedFireForce:any //选择要显示的消防力量 superior:any = { //上级单位 name:'', code:'' } selectTreeNode(node){ console.log(node) this.isGisTopBox = false if(this.selectedFireForceId != node.id){ this.clearData() this.selectedFireForce = node this.selectedFireForceId = node.id if(node.forceType != 0){//如果是其他消防力量 this.selectedFireForceLevel = 4 }else{ this.selectedFireForceLevel = node.level } this.FireForceDetailInfo.stationName = node.name if(this.newPositionMarker){ this.map.remove(this.newPositionMarker); } if(node.fireForceDetailId){ this.isPost = false//是否走post创建接口 let type if(node.forceType == 0){ type = 0 }else{ type = 1 } this.isMasklayer = true this.http.get(`/api/FireForceDetail/${type}/${node.id}`).subscribe((data:any) => { this.isMasklayer = false this.FireForceDetailInfo = data console.log(888,data) if(data.location && data.location.x){//如果已经标注单位坐标 this.positionLngLat = data.location this.map.setCenter([data.location.x,data.location.y]); this.newPositionMarker = new AMap.Marker({ position: [data.location.x,data.location.y], content: this.newPositionMarkerContent, offset: new AMap.Pixel(-15, -18) }) // 将 markers 添加到地图 this.map.add(this.newPositionMarker); }else{ this.map.setCity('上海市'); } //相关资料 data.relevantInfomationData ? this.AttachmentArr = JSON.parse(data.relevantInfomationData) : null if(node.forceType == 0 && node.level == 0){ this.ZongpersonCountData = JSON.parse(data.personCountData) this.ZongcontactData = JSON.parse(data.contactData) } if(node.forceType == 0 && node.level == 1){ this.ZongpersonCountData = JSON.parse(data.personCountData) this.ZhicontactData = JSON.parse(data.contactData) } if(node.forceType == 0 && (node.level == 2 || node.level == 3)){ this.DaZhongpersonCountData = JSON.parse(data.personCountData) this.DaZhongcontactData = JSON.parse(data.contactData) } if(node.forceType != 0){ this.otherpersonCountData = JSON.parse(data.personCountData) this.othercontactData = JSON.parse(data.contactData) } }) }else{ this.map.setCity('上海市'); } //寻找管辖单位 this.allFireForceList.forEach(item => { if(item.id == node.parentId){ this.superior.name = item.name this.superior.code = item.code } }) } } //搜索 isTreeView:boolean = true//决定显示树还是列表 searchList(){ if(!this.searchForm.name && !this.searchForm.integrityNum){ this.isTreeView = true }else{ this.isTreeView = false } this.getAllFireForce() } //重置搜索 reset(){ this.isTreeView = true this.selectedFireForceLevel = null this.searchForm = { name:'', integrityNum:'' } this.getAllFireForce() } //js乘法 accMul(arg1,arg2,fix) { if(!parseInt(fix)==fix) { return; } var m=0,s1=arg1.toString(),s2=arg2.toString(); try{m+=s1.split(".")[1].length}catch(e){} try{m+=s2.split(".")[1].length}catch(e){} if(m>fix){ return (Math.round(Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m-fix))/Math.pow(10,fix)); }else if(m<=fix){ return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(fix); }else{ return (arg1*arg2).toFixed(fix).toString(); } } //完整度颜色 integrity(width){ let _this = this let style:any = {} style.width = width +'%'; if(width < 30){ style.background = '#FF5D4A' } if(width >= 30 && width < 60){ style.background = '#FFDD00' } if(width >= 60){ style.background = '#5CD64E' } return style } //删除某条消防队 deleteFireForce(item,e){ e.stopPropagation() console.log(this.dataSource.data) let isDelete = window.confirm(`确定要删除${item.name}吗`) if(isDelete){ // this.http.delete(`/api/CustomFireForce/${item.id}`).subscribe(data => { // let config = new MatSnackBarConfig(); // config.verticalPosition = 'top'; // config.duration = 3000 // this.snackBar.open('删除成功','确定',config); // this.upDateAllFireForce() // if(item.id == this.selectedFireForce.id){ // this.selectedFireForceLevel = null // } // }) let body = { title: item.name, operation: 2,//删除操作方式 contentType: 13,//消防力量类型 itemId: item.id, verifyState: 3, } this.http.post('/api/ContentVerifies',body).subscribe((data) => { let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('删除审核提交成功','确定',config); item.contentVerify = data }) } } //当前点击tab页面第几个 tabIndex:any = 1 selectedTab(index){ this.tabIndex = index } //消防力量详情提交信息 FireForceDetailInfo:any = { // id:'',//编号 stationName:'',//队站名称 isIndependentAlarm:true,//是否独立报警 phoneNumber:'',//联系电话 faxNumber:'',//传真 jurisdictionArea:null,//辖区面积 remark:'',//备注 address:'',//地址 location:{ x:'', y:'' }, personCountData:[],//人员数量自定义 contactData:[],//联系方式自定义 dutyForceData:[],//执勤力量自定义 relevantInfomationData:[]//相关资料 } //总队支队人员数量 ZongpersonCountData:any=[ {PropertyName :'现役官兵人数',PropertyValue:''}, {PropertyName :'政府专职消防员数',PropertyValue:''}, {PropertyName :'消防文员数',PropertyValue:''} ] //总队联系方式 ZongcontactData:any=[ {PropertyName :'总队长名称',PropertyValue:''}, {PropertyName :'总队长联系方式',PropertyValue:''}, {PropertyName :'总队政委名称',PropertyValue:''}, {PropertyName :'总队政委联系方式',PropertyValue:''} ] //支队联系方式 ZhicontactData:any=[ {PropertyName :'支队长名称',PropertyValue:''}, {PropertyName :'支队长联系方式',PropertyValue:''}, {PropertyName :'支队政委名称',PropertyValue:''}, {PropertyName :'支队政委联系方式',PropertyValue:''} ] //大队中队人员数量 DaZhongpersonCountData:any=[ {PropertyName :'现役人员',PropertyValue:''}, {PropertyName :'政府专职消防员数',PropertyValue:''}, {PropertyName :'每日执勤人数',PropertyValue:''} ] //大队中队联系方式 DaZhongcontactData:any=[ {PropertyName :'站长姓名',PropertyValue:''}, {PropertyName :'站长联系方式',PropertyValue:''}, {PropertyName :'指导员姓名',PropertyValue:''}, {PropertyName :'指导员联系方式',PropertyValue:''}, {PropertyName :'副指导员姓名',PropertyValue:''}, {PropertyName :'副指导员联系方式',PropertyValue:''}, {PropertyName :'副站长一姓名',PropertyValue:''}, {PropertyName :'副站长一联系方式',PropertyValue:''}, {PropertyName :'副站长二姓名',PropertyValue:''}, {PropertyName :'副站长二联系方式',PropertyValue:''}, {PropertyName :'副站长三姓名',PropertyValue:''}, {PropertyName :'副站长三联系方式',PropertyValue:''} ] //其他消防力量联系方式 othercontactData:any = [ {PropertyName :'队长',PropertyValue:''}, {PropertyName :'联系方式',PropertyValue:''} ] //其他消防力量人员数量 otherpersonCountData:any = [ {PropertyName :'每日执勤人数',PropertyValue:''}, {PropertyName :'消防队员总人数',PropertyValue:''}, {PropertyName :'执勤车辆数',PropertyValue:''}, {PropertyName :'灭火剂总量',PropertyValue:''} ] //清空表单数据 clearData(){ this.deletedFile = []//清空相关资料已删除缓存 this.AttachmentArr = []//清空相关资料 this.positionLngLat = {x:'',y:''} this.FireForceDetailInfo = { // id:'',//编号 stationName:'',//队站名称 isIndependentAlarm:null,//是否独立报警 phoneNumber:'',//联系电话 faxNumber:'',//传真 jurisdictionArea:null,//辖区面积 remark:'',//备注 address:'',//地址 location:{ x:'', y:'' }, personCountData:[],//人员数量自定义 contactData:[],//联系方式自定义 dutyForceData:[],//执勤力量自定义 relevantInfomationData:[]//相关资料 } this.ZongpersonCountData = [ {PropertyName :'现役官兵人数',PropertyValue:''}, {PropertyName :'政府专职消防员数',PropertyValue:''}, {PropertyName :'消防文员数',PropertyValue:''} ] this.ZongcontactData = [ {PropertyName :'总队长名称',PropertyValue:''}, {PropertyName :'总队长联系方式',PropertyValue:''}, {PropertyName :'总队政委名称',PropertyValue:''}, {PropertyName :'总队政委联系方式',PropertyValue:''} ] this.ZhicontactData = [ {PropertyName :'支队长名称',PropertyValue:''}, {PropertyName :'支队长联系方式',PropertyValue:''}, {PropertyName :'支队政委名称',PropertyValue:''}, {PropertyName :'支队政委联系方式',PropertyValue:''} ] this.DaZhongpersonCountData = [ {PropertyName :'现役人员',PropertyValue:''}, {PropertyName :'政府专职消防员数',PropertyValue:''}, {PropertyName :'每日执勤人数',PropertyValue:''} ] this.DaZhongcontactData = [ {PropertyName :'站长姓名',PropertyValue:''}, {PropertyName :'站长联系方式',PropertyValue:''}, {PropertyName :'指导员姓名',PropertyValue:''}, {PropertyName :'指导员联系方式',PropertyValue:''}, {PropertyName :'副指导员姓名',PropertyValue:''}, {PropertyName :'副指导员联系方式',PropertyValue:''}, {PropertyName :'副站长一姓名',PropertyValue:''}, {PropertyName :'副站长一联系方式',PropertyValue:''}, {PropertyName :'副站长二姓名',PropertyValue:''}, {PropertyName :'副站长二联系方式',PropertyValue:''}, {PropertyName :'副站长三姓名',PropertyValue:''}, {PropertyName :'副站长三联系方式',PropertyValue:''} ] this.othercontactData = [ {PropertyName :'队长',PropertyValue:''}, {PropertyName :'联系方式',PropertyValue:''} ] this.otherpersonCountData = [ {PropertyName :'每日执勤人数',PropertyValue:''}, {PropertyName :'消防队员总人数',PropertyValue:''}, {PropertyName :'执勤车辆数',PropertyValue:''}, {PropertyName :'灭火剂总量',PropertyValue:''} ] } //新增消防力量 selectedFireForceTypeIndex:any//新增消防力量名称 addFireForce(){ if(this.selectedFireForceId){ const dialogRef = this.dialog.open(AddFireForce, { data: {}, id:'addWater' }); dialogRef.afterClosed().subscribe( data=>{ if(typeof data === 'number' && !isNaN(data)){ this.isPost = true this.selectedFireForceTypeIndex = data this.selectedFireForceLevel = data // this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null // this.positionLngLat.x = 0 // this.positionLngLat.y = 0 // this.map.setCity('上海市'); this.clearData() } } ); }else{ let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('请先从左侧列表选择一个组织机构','确定',config); } } //保存 isPost:boolean = false//是否走post创建接口 newselectedFireForceId:any //创建成功其他消防力量后保存一下创建出来的id save(){ if(!this.FireForceDetailInfo.stationName){ alert('名称必填') return } //删除一下数据库的文件 if(this.deletedFile.length != 0){ this.deletedFile.forEach(item => { this.http.delete(`/api/Objects/PlanPlatform/${item.objectName}`).subscribe(data=>{ // console.log('删除原文件成功') }) }); } this.FireForceDetailInfo.jurisdictionArea = Number(this.FireForceDetailInfo.jurisdictionArea) this.FireForceDetailInfo.relevantInfomationData = JSON.stringify(this.AttachmentArr) console.log(1111,this.FireForceDetailInfo) //如果是总支大中 this.FireForceDetailInfo.location = {x:'',y:''} if(this.atLastPositionLngLat.x){ this.FireForceDetailInfo.location.x = this.atLastPositionLngLat.x this.FireForceDetailInfo.location.y = this.atLastPositionLngLat.y }else{ this.FireForceDetailInfo.location = null } if(this.selectedFireForce.forceType == 0&&(this.selectedFireForceLevel == 0 || this.selectedFireForceLevel == 1 || this.selectedFireForceLevel == 2 || this.selectedFireForceLevel == 3)){//如果是总队 let body = this.FireForceDetailInfo if(this.selectedFireForceLevel == 0){//总队 this.FireForceDetailInfo.personCountData = JSON.stringify(this.ZongpersonCountData) this.FireForceDetailInfo.contactData = JSON.stringify(this.ZongcontactData) this.FireForceDetailInfo.dutyForceData = null } if(this.selectedFireForceLevel == 1){//支队 this.FireForceDetailInfo.personCountData = JSON.stringify(this.ZongpersonCountData) this.FireForceDetailInfo.contactData = JSON.stringify(this.ZhicontactData) this.FireForceDetailInfo.dutyForceData = null } if(this.selectedFireForceLevel == 2 || this.selectedFireForceLevel == 3){//大队 中队 this.FireForceDetailInfo.personCountData = JSON.stringify(this.DaZhongpersonCountData) this.FireForceDetailInfo.contactData = JSON.stringify(this.DaZhongcontactData) this.FireForceDetailInfo.dutyForceData = null } console.log('body',body) this.http.put(`/api/FireForceDetail/0/${this.selectedFireForce.id}`,body).subscribe(data => { let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('保存成功','确定',config); this.upDateAllFireForce() }) } //如果是其他消防力量 else{ if(!this.isPost){ let body = this.FireForceDetailInfo body.personCountData = JSON.stringify(this.otherpersonCountData) body.contactData = JSON.stringify(this.othercontactData) body.dutyForceData = null let id if(this.selectedFireForce.forceType == 0){ id = this.newselectedFireForceId }else{ id = this.selectedFireForce.id } this.http.put(`/api/FireForceDetail/1/${id}`,body).subscribe(data => { let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('保存成功','确定',config); this.upDateAllFireForce() }) }else{ let forceType this.selectedFireForceTypeIndex == 4 ? forceType = 1 : null this.selectedFireForceTypeIndex == 5 ? forceType = 2 : null this.selectedFireForceTypeIndex == 6 ? forceType = 4 : null let body = { organizationId:this.selectedFireForce.id, name:this.FireForceDetailInfo.stationName, createTime:new Date(), forceType:forceType } let params = { organizationId : this.selectedFireForce.id } this.http.post('/api/CustomFireForce',body,{params:params}).subscribe((data:any) => { this.newselectedFireForceId = data.id this.selectedFireForce = data let body = this.FireForceDetailInfo body.personCountData = JSON.stringify(this.otherpersonCountData) body.contactData = JSON.stringify(this.othercontactData) body.dutyForceData = null this.http.put(`/api/FireForceDetail/1/${data.id}`,body).subscribe(data2 => { this.upDateAllFireForce() this.selectedFireForceId = data.id this.isPost = false let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('保存成功','确定',config); }) }) } } } //提交审核 submitAudit(){ let isTrue = window.confirm('请确认保存后提交审核,否则将无法审核最新内容,是否继续?') if(isTrue){ console.log('提交审核的消防力量',this.FireForceDetailInfo) let body = { title: this.FireForceDetailInfo.stationName, operation: this.selectedFireForce.contentVerify ? 1 : 0,//操作方式 contentType: 13,//消防力量类型 itemId: this.selectedFireForce.id, verifyState: 3, } this.http.post('/api/ContentVerifies',body).subscribe((data) => { this.selectedFireForce.contentVerify = data let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('提交成功','确定',config); }) } } //撤销审核 cancelAudit(){ let isTrue = window.confirm('您确认要撤销该审核吗?') if(isTrue){ // console.log('撤销审核的消防力量',this.waterData) this.http.delete(`/api/ContentVerifies/${this.selectedFireForce.contentVerify.id}`).subscribe((data) => { this.selectedFireForce.contentVerify = null let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('撤销成功','确定',config); }) } } close(){ this.selectedFireForceLevel = null this.selectedFireForceId = null this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null } map:any placeSearch:any//构造地点查询类 isMapLabel:boolean = false //是否已经标记坐标 newPositionMarkerContent:any = '
' + ' ' + '
' newPositionMarkerContentBtn:any = '
' + ' ' + '
|
' + '
' //创建地图 newPositionMarker:any//坐标实例 createMap(){ this.map = new AMap.Map('container', { zoom:12 }) this.map.setCity('上海市'); //输入提示 var autoOptions = { input: "tipinput" }; AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ let auto = new AMap.AutoComplete(autoOptions); this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 auto.on("select", (e)=>{ this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 });//注册监听,当选中某条记录时会触发 }); } //点击位置 isGisTopBox:boolean = false // searchTitle:any = ''// positionLngLat:any = {x:'',y:''}//临时坐标点 atLastPositionLngLat:any = {x:'',y:''}//最终坐标点 setPosition(){ if(!this.isGisTopBox){ this.isGisTopBox = true this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null let center if(this.newPositionMarker && this.atLastPositionLngLat.x){//如果已经标注单位坐标 center = [this.atLastPositionLngLat.x, this.atLastPositionLngLat.y] }else if(this.newPositionMarker && !this.atLastPositionLngLat.x && this.FireForceDetailInfo.location && this.FireForceDetailInfo.location.x){ center = [this.FireForceDetailInfo.location.x, this.FireForceDetailInfo.location.y] }else{ center = this.map.getCenter(); //获取当前地图中心位置 } this.newPositionMarker = new AMap.Marker({ draggable: true, position: center, content: this.newPositionMarkerContentBtn, offset: new AMap.Pixel(-15, -18) }); this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]} this.map.add(this.newPositionMarker); this.isMapLabel = true this.newPositionMarker.on('dragend', (e)=>{ this.positionLngLat = {x: e.lnglat.lng, y: e.lnglat.lat} }) //点击确定 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ this.isGisTopBox = false this.map.remove(this.newPositionMarker) this.newPositionMarker = new AMap.Marker({ position: [this.positionLngLat.x,this.positionLngLat.y], content: this.newPositionMarkerContent, offset: new AMap.Pixel(-15, -18) }); this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.map.add(this.newPositionMarker); this.positionLngLat = this.atLastPositionLngLat }) this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{ this.isGisTopBox = false this.map.remove(this.newPositionMarker) if(this.positionLngLat.x && this.positionLngLat.x != 0 && !this.atLastPositionLngLat.x){//直接取消 this.map.remove(this.newPositionMarker) this.positionLngLat = {} this.atLastPositionLngLat = {} }else{ this.newPositionMarker = new AMap.Marker({ position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], content: this.newPositionMarkerContent, offset: new AMap.Pixel(-15, -18) }); this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.add(this.newPositionMarker); this.positionLngLat = this.atLastPositionLngLat } })//取消 } } //上传附件 file:any; //上传的文件 AttachmentArr:any = []//上传附件地址集合 uploadId:any//分块上传id objectName:any progressBarValue:any = 0//分块上传进度 isMasklayer:boolean = false//圆圈遮罩层是否打开 isMasklayerUploading:boolean = false//上传进度条遮罩层是否打开 isMasklayerDownload:boolean = false//下载进度条遮罩层是否打开 uploadAttachment(e){ this.file = e.target.files[0] || null //上传的文件 let file = e.target.files[0] || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let shardSize = 5 * 1024 * 1024 //5MB一个分片 if (file && fileSize<=shardSize) { //上传文件<=5MB时 this.isMasklayer = true let formData = new FormData() formData.append("file",file) let storageFolderId //要存储到服务器的文件夹id 一般为当前选中单位的id 如果新创建的话就存到public文件夹 this.selectedFireForce.id ? storageFolderId = this.selectedFireForce.id : storageFolderId = 'public' this.http.post(`/api/Objects/PlanPlatform/FireForce/${storageFolderId}`,formData).subscribe((data:any)=>{ let obj = { objectName:data.objectName, fileName:data.fileName, fileLength:data.fileLength } this.AttachmentArr.push(obj) this.isMasklayer = false let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传成功','确定',config); }) } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传 this.isMasklayerUploading = true let data = {filename: file.name} let storageFolderId //要存储到服务器的文件夹id 一般为当前选中单位的id 如果新创建的话就存到public文件夹 this.selectedFireForce.id ? storageFolderId = this.selectedFireForce.id : storageFolderId = 'public' this.http.post(`/api/NewMultipartUpload/PlanPlatform/FireForce/${storageFolderId}`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传 this.objectName = data.objectName this.uploadId = data.uploadId this.subsectionUploading() }) } } PartNumberETag:any=[]; //每次返回需要保存的信息 //开始分段上传 async subsectionUploading () { let file = this.file || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let shardSize = 5 * 1024 * 1024 //5MB一个分片 let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段 for (let i = 0;i < allSlice;i++) { //循环分段上传 let start = i * shardSize //切割文件开始位置 let end = Math.min(fileSize, start + shardSize); //切割文件结束位置 let formData = new FormData() formData.append("file",file.slice(start, end)) //同步写法实现异步调用 let result = await new Promise((resolve, reject) => { // await 需要后面返回一个 promise 对象 this.http.post(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{ let msg = { "partNumber":data.partNumber || null, "eTag": data.eTag || null} resolve(msg) // 调用 promise 内置方法处理成功 }) }); this.PartNumberETag.push(result) // this.progressBarValue = Number((i/allSlice).toFixed(2))*100 this.progressBarValue = this.accMul(Number((i/allSlice).toFixed(2))*100,1,0) if (this.PartNumberETag.length === allSlice) { this.progressBarValue = 100 this.endUploading()} }//for循环 } //完成分块上传 endUploading () { let data = this.PartNumberETag let paramsData = {uploadId:this.uploadId} this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{ this.PartNumberETag =[] //清空保存返回的信息 let obj = { objectName:this.objectName, fileName:this.file.name, fileLength:this.file.size } this.AttachmentArr.push(obj) this.isMasklayerUploading = false//关闭进度条遮罩层 this.progressBarValue = 0//重置进度数 let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('上传成功','确定',config); }) } //取消分块上传 cancelUploading() { this.http.delete(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}`).subscribe(data=>{ this.progressBarValue = 0; this.isMasklayerUploading= false this.PartNumberETag =[] //清空保存返回的信息 const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('取消上传成功','确定',config); }) } //下载 download (e) { this.isMasklayerDownload = true //开启下载进度条 let file = e //传递过来的文件元数据 let fileSize = file.fileLength //下载文件的总大小 let shardSize = 3 * 1024 * 1024 //文件大小是否大于10MB if (file && fileSize<=shardSize) { //<=3MB时直接下载 this.progressBarValue = 60 this.http.get(`/api/Objects/PlanPlatform/${e.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 fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1] link.setAttribute("download", fileName); document.body.appendChild(link); link.click(); this.isMasklayerDownload = false //关闭下载进度条 this.progressBarValue = 0 //初始化进度条 }) } else if (file && fileSize>shardSize) { //>3MB时分块下载 this.blockingDownload(e) //分段下载 } } //分段下载并合并 async blockingDownload (e) { let file = e //传递过来的文件元数据 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{ this.http.get(`/api/Objects/PlanPlatform/${e.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{ result(data) }) }) allFile.push(result) // this.progressBarValue = Number((i/allSlice).toFixed(2))*100 //文件进度数 this.progressBarValue = this.accMul(Number((i/allSlice).toFixed(2))*100,1,0) 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 fileName = e.fileName ? e.fileName : e.objectName.split('/')[e.objectName.split('/').length-1] link.setAttribute("download", fileName); document.body.appendChild(link); link.click(); this.isMasklayerDownload = false //关闭下载进度条 this.progressBarValue = 0 //初始化进度条 } } //for循环结束 } //删除图片 deletedFile:any = [] deleteFile(item,e){ e.stopPropagation() let isTrue = window.confirm('确定要删除该文件吗?') if(isTrue){ let index this.AttachmentArr.forEach((element,key) => { if(element.objectName == item.objectName){ index = key } }); this.AttachmentArr.splice(index,1) this.deletedFile.push(item) let config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 this.snackBar.open('删除成功','确定',config); } } //点击文件 clickFile(item){ let suffix = item.fileName.split('.')[item.fileName.split('.').length-1] if(suffix == 'png' || suffix == 'jpg' || suffix == 'JPG'){ let dom = document.getElementById(`viewerjs`) let pObjs = dom.childNodes; let node = document.createElement("img") node.style.display = "none"; node.src = "/api/Objects/PlanPlatform/" + item.objectName; node.id = 'img' dom.appendChild(node) setTimeout(() => { let viewer = new Viewer(document.getElementById(`viewerjs`), { hidden:()=>{ dom.removeChild(pObjs[0]); viewer.destroy(); } }); node.click(); }, 0); } if(suffix == 'docx' || suffix == 'doc' || suffix == 'pdf'){ let fetchUrl = item.objectName let json={ doc: { docId: new Date(), title: item.fileName, fetchUrl: `http://${location.host}/api/Objects/PlanPlatform/`+fetchUrl }, user: { uid: "test", nickName: "test", avatar: "", privilege: [ 'FILE_READ','FILE_DOWNLOAD', 'FILE_PRINT' ], }, } var stringjson=JSON.stringify(json) var wordArray = CryptoJS.enc.Utf8.parse(stringjson); var base64 = CryptoJS.enc.Base64.stringify(wordArray); window.open(`http://121.5.10.84/apps/editor/openPreview?data=${base64}`) } if(suffix == 'mp4'){ const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去 data: {item:item,type:"video"}, id:'videodialog' }); dialogRef.afterClosed().subscribe(); } } } //新增消防力量弹出框 @Component({ selector: 'addwater', templateUrl: './addFireForce.html', styleUrls: ['./fire-force.component.scss'] }) export class AddFireForce { constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {} addList:any = [ {id:4, name:'微型消防站'}, {id:5, name:'企业专职消防站'}, {id:6, name:'义务(志愿)消防站'} ] selectedFireForceTypeIndex:any = 4 selecteAddType(item,key){ this.selectedFireForceTypeIndex = item.id } ngOnInit(): void { } confirm(){ this.dialogRef.close(this.selectedFireForceTypeIndex) } } //查看图片大图和视频 @Component({ selector: 'viewdetails', templateUrl: './viewdetails.html', styleUrls: ['./fire-force.component.scss'] }) export class ViewDetails { // myControl = new FormControl(); //注入MatDialogRef,可以用来关闭对话框 //要访问对话框组件中的数据,必须使用MAT_DIALOG_DATA注入令牌 constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data) {} Url:string onNoClick(): void { this.dialogRef.close(); } ngOnInit(): void { this.Url = '/api/Objects/PlanPlatform/' + this.data.item.objectName } closeDialog(){ this.dialogRef.close(); } }