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.
975 lines
36 KiB
975 lines
36 KiB
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' |
|
import Swiper from 'swiper'; |
|
declare var CryptoJS |
|
declare var AMap: any; |
|
@Component({ |
|
selector: 'app-linkage-forces', |
|
templateUrl: './linkage-forces.component.html', |
|
styleUrls: ['./linkage-forces.component.scss'] |
|
}) |
|
export class LinkageForcesComponent 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:'安监',imgUrl:'/assets/linkageForces/安监.png',isChecked:false}, |
|
{id:1,name:'电力局',imgUrl:'/assets/linkageForces/电力局.png',isChecked:false}, |
|
{id:2,name:'公安',imgUrl:'/assets/linkageForces/公安.png',isChecked:false}, |
|
{id:3,name:'海事',imgUrl:'/assets/linkageForces/海事.png',isChecked:false}, |
|
{id:4,name:'环保局',imgUrl:'/assets/linkageForces/环保局.png',isChecked:false}, |
|
{id:5,name:'交通',imgUrl:'/assets/linkageForces/交通.png',isChecked:false}, |
|
{id:6,name:'民政',imgUrl:'/assets/linkageForces/民政.png',isChecked:false}, |
|
{id:7,name:'气象局',imgUrl:'/assets/linkageForces/气象局.png',isChecked:false}, |
|
{id:8,name:'燃气局',imgUrl:'/assets/linkageForces/燃气局.png',isChecked:false}, |
|
{id:9,name:'市政',imgUrl:'/assets/linkageForces/市政.png',isChecked:false}, |
|
{id:10,name:'水利',imgUrl:'/assets/linkageForces/水利.png',isChecked:false}, |
|
{id:11,name:'通信',imgUrl:'/assets/linkageForces/通信.png',isChecked:false}, |
|
{id:12,name:'医疗',imgUrl:'/assets/linkageForces/医疗.png',isChecked:false}, |
|
{id:13,name:'应急管理',imgUrl:'/assets/linkageForces/应急管理.png',isChecked:false}, |
|
{id:14,name:'住建',imgUrl:'/assets/linkageForces/住建.png',isChecked:false} |
|
] |
|
//勾选力量类型checkbox在地图上显示marker |
|
checkBoxChange(){ |
|
let LinkageForceTypes = [] |
|
this.checkBoxList.forEach(item =>{ |
|
if(item.isChecked){ |
|
LinkageForceTypes.push(item.id) |
|
} |
|
}) |
|
let params:any = { |
|
PageSize : 999999, |
|
LinkageForceTypes:LinkageForceTypes |
|
} |
|
if(LinkageForceTypes.length != 0){//如果勾选了checkbox |
|
this.http.get('/api/LinkageForces',{params:params}).subscribe((data:any) => { |
|
this.createMarker(data.items) |
|
}) |
|
}else{ |
|
this.cluster.setData([]) |
|
} |
|
} |
|
//循环渲染出所有力量markers |
|
cluster:any //力量聚合实例 |
|
createMarker(list){ |
|
let markerArrcluster = [] |
|
this.cluster ? this.cluster.setData([]) : null |
|
// console.log(678,list) |
|
list.forEach((item) => { |
|
let image |
|
if(item.linkageForceType == 0){//消火栓 |
|
image = '/assets/linkageForcesMarkers/安监.png' |
|
}else if(item.linkageForceType == 1){//消防水池 |
|
image = '/assets/linkageForcesMarkers/电力局.png' |
|
}else if(item.linkageForceType == 2){//天然联动力量 |
|
image = '/assets/linkageForcesMarkers/公安.png' |
|
}else if(item.linkageForceType == 3){//天然水源 |
|
image = '/assets/linkageForcesMarkers/海事.png' |
|
}else if(item.linkageForceType == 4){//天然水源 |
|
image = '/assets/linkageForcesMarkers/环保局.png' |
|
}else if(item.linkageForceType == 5){//天然水源 |
|
image = '/assets/linkageForcesMarkers/交通.png' |
|
}else if(item.linkageForceType == 6){//天然水源 |
|
image = '/assets/linkageForcesMarkers/民政.png' |
|
}else if(item.linkageForceType == 7){//天然水源 |
|
image = '/assets/linkageForcesMarkers/气象局.png' |
|
}else if(item.linkageForceType == 8){//天然水源 |
|
image = '/assets/linkageForcesMarkers/燃气局.png' |
|
}else if(item.linkageForceType == 9){//天然水源 |
|
image = '/assets/linkageForcesMarkers/市政.png' |
|
}else if(item.linkageForceType == 10){//天然水源 |
|
image = '/assets/linkageForcesMarkers/水利.png' |
|
}else if(item.linkageForceType == 11){//天然水源 |
|
image = '/assets/linkageForcesMarkers/通信.png' |
|
}else if(item.linkageForceType == 12){//天然水源 |
|
image = '/assets/linkageForcesMarkers/医疗.png' |
|
}else if(item.linkageForceType == 13){//天然水源 |
|
image = '/assets/linkageForcesMarkers/应急管理.png' |
|
}else if(item.linkageForceType == 14){//天然水源 |
|
image = '/assets/linkageForcesMarkers/住建.png' |
|
} |
|
// 用于点集合的数组 |
|
if(item.location && item.location.x){ |
|
markerArrcluster.push({ |
|
lnglat : [item.location.x,item.location.y], |
|
image : image, |
|
data : item |
|
}) |
|
} |
|
}) |
|
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 = `<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.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, { |
|
gridSize: gridSize, // 设置网格像素大小 |
|
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 |
|
renderMarker: _renderMarker, // 自定义非聚合点样式 |
|
}); |
|
this.cluster.on('click',(e)=>{ |
|
if(e.clusterData.length == 1){ |
|
let item = e.clusterData[0].data |
|
this.clearData() |
|
this.LinkageForceDetailInfo = item |
|
item.location?this.positionLngLat = item.location:null |
|
this.AttachmentArr = JSON.parse(item.relevantInfomationData) |
|
} |
|
}) |
|
}); |
|
|
|
} |
|
ngOnInit(): void { |
|
this.getAllFireForce() |
|
setTimeout(() => { |
|
// console.log(document.documentElement.clientWidth) |
|
let slidesPerView |
|
if(document.documentElement.clientWidth < 1400){ |
|
slidesPerView = 5 |
|
}else{ |
|
slidesPerView = 10 |
|
} |
|
var mySwiper = new Swiper('.swiper-container', { |
|
slidesPerView: slidesPerView,//每页显示的个数 |
|
slidesPerGroup: 3,//点击一次需要跳多少次 |
|
// 如果需要前进后退按钮 |
|
navigation: { |
|
nextEl: '.swiper-button-next', |
|
prevEl: '.swiper-button-prev', |
|
}, |
|
}) |
|
this.createMap() |
|
}, 0); |
|
} |
|
//获得所有联动力量 |
|
allLinkageForceObj:any//获得的所有联动力量 |
|
dataLength:any //获取的数据一共多少条 |
|
PageNumber:any = 1 //当前第几页 |
|
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, |
|
PageSize : 15, |
|
PageNumber : this.PageNumber, |
|
} |
|
this.http.get('/api/LinkageForces',{params:params}).subscribe((data:any) => { |
|
this.dataLength = data.totalCount |
|
this.allLinkageForceObj = data |
|
}) |
|
} |
|
|
|
|
|
//选择要显示的联动力量 |
|
selectedLinkageForce(item){ |
|
// console.log(123,item) |
|
this.isGisTopBox = false |
|
if(this.LinkageForceDetailInfo.id != item.id){ |
|
this.clearData() |
|
this.LinkageForceDetailInfo = item |
|
item.location?this.positionLngLat = item.location:null |
|
this.AttachmentArr = JSON.parse(item.relevantInfomationData) |
|
if(this.newPositionMarker){ |
|
this.map.remove(this.newPositionMarker); |
|
} |
|
if(item.location && item.location.x){//如果已经标注单位坐标 |
|
this.map.setCenter([item.location.x,item.location.y]); |
|
this.newPositionMarker = new AMap.Marker({ |
|
position: [item.location.x,item.location.y], |
|
content: this.newPositionMarkerContent, |
|
offset: new AMap.Pixel(-15, -18) |
|
}) |
|
// 将 markers 添加到地图 |
|
this.map.add(this.newPositionMarker); |
|
} |
|
} |
|
} |
|
//搜索 |
|
searchList(){ |
|
this.getAllFireForce() |
|
} |
|
//重置搜索 |
|
reset(){ |
|
this.searchForm = { |
|
name:'', |
|
integrityNum:'' |
|
} |
|
this.getAllFireForce() |
|
} |
|
//分页事件 |
|
chagePage(e){ |
|
this.PageNumber = e.pageIndex+1 |
|
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 |
|
} |
|
//删除某条联动力量 |
|
deleteLinkageForc(item,e){ |
|
e.stopPropagation() |
|
let isDelete = window.confirm(`确定要删除${item.name}吗`) |
|
if(isDelete){ |
|
// this.http.delete(`/api/LinkageForces/${item.id}`).subscribe(data => { |
|
// let config = new MatSnackBarConfig(); |
|
// config.verticalPosition = 'top'; |
|
// config.duration = 3000 |
|
// this.snackBar.open('删除成功','确定',config); |
|
// if(item.id == this.LinkageForceDetailInfo.id){ |
|
// this.LinkageForceDetailInfo.linkageForceType = null |
|
// } |
|
// this.getAllFireForce() |
|
// }) |
|
let body = { |
|
title: item.name, |
|
operation: 2,//删除操作方式 |
|
contentType: 14,//联动力量类型 |
|
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); |
|
this.allLinkageForceObj.items.forEach(element => { |
|
if(element.id == item.id){ |
|
element.contentVerify = data |
|
} |
|
}); |
|
}) |
|
} |
|
} |
|
//当前点击tab页面第几个 |
|
tabIndex:any = 1 |
|
selectedTab(index){ |
|
this.tabIndex = index |
|
} |
|
|
|
//联动力量详情提交信息 |
|
LinkageForceDetailInfo:any = { |
|
// id:'',//编号 |
|
linkageForceType:'', |
|
name:'',//名称 |
|
phoneNumber:'',//联系电话 |
|
faxNumber:'',//传真 |
|
remark:'',//备注 |
|
administrativeRegion:'',//行政区 |
|
address:'',//地址 |
|
location:{ |
|
x:'', |
|
y:'' |
|
}, |
|
contactName:'',//联系人姓名 |
|
contactTitle:'',//联系人职务 |
|
contactPhone:'',//联系人电话 |
|
serviceContent:'',//服务内容 |
|
resourceRemark:'',//资源说明 |
|
relevantInfomationData:[]//相关资料 |
|
} |
|
|
|
//清空表单数据 |
|
clearData(){ |
|
this.deletedFile = []//清空相关资料已删除缓存 |
|
this.AttachmentArr = []//清空相关资料 |
|
this.positionLngLat = {x:'',y:''} |
|
this.atLastPositionLngLat = {x:'',y:''} |
|
this.LinkageForceDetailInfo = { |
|
// id:'',//编号 |
|
linkageForceType:'', |
|
name:'',//名称 |
|
phoneNumber:'',//联系电话 |
|
faxNumber:'',//传真 |
|
remark:'',//备注 |
|
administrativeRegion:'',//行政区 |
|
address:'',//地址 |
|
location:{ |
|
x:'', |
|
y:'' |
|
}, |
|
contactName:'',//联系人姓名 |
|
contactTitle:'',//联系人职务 |
|
contactPhone:'',//联系人电话 |
|
serviceContent:'',//服务内容 |
|
resourceRemark:'',//资源说明 |
|
relevantInfomationData:[]//相关资料 |
|
} |
|
} |
|
//新增联动力量 |
|
selectedFireForceTypeIndex:any//新增消防力量名称 |
|
addLinkageForce(){ |
|
const dialogRef = this.dialog.open(AddLinkageForce, { |
|
data: {}, |
|
id:'addLinkageForce' |
|
}); |
|
dialogRef.afterClosed().subscribe( |
|
data=>{ |
|
if(typeof data === 'number' && !isNaN(data)){ |
|
this.clearData() |
|
this.LinkageForceDetailInfo.linkageForceType = data |
|
this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null |
|
this.map.setCity('上海市'); |
|
this.LinkageForceDetailInfo.contentVerify = null |
|
} |
|
} |
|
) |
|
} |
|
//提交审核 |
|
submitAudit(){ |
|
let isTrue = window.confirm('请确认保存后提交审核，否则将无法审核最新内容，是否继续？') |
|
if(isTrue){ |
|
// console.log('提交审核的联动力量',this.waterData) |
|
let body = { |
|
title: this.LinkageForceDetailInfo.name, |
|
operation: this.LinkageForceDetailInfo.contentVerify ? 1 : 0,//操作方式 |
|
contentType: 14,//联动力量类型 |
|
itemId: this.LinkageForceDetailInfo.id, |
|
verifyState: 3, |
|
} |
|
this.http.post('/api/ContentVerifies',body).subscribe((data) => { |
|
this.LinkageForceDetailInfo.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.LinkageForceDetailInfo) |
|
this.http.delete(`/api/ContentVerifies/${this.LinkageForceDetailInfo.contentVerify.id}`).subscribe((data) => { |
|
this.LinkageForceDetailInfo.contentVerify = null |
|
let config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('撤销成功','确定',config); |
|
}) |
|
} |
|
} |
|
//保存 |
|
save(){ |
|
if(!this.LinkageForceDetailInfo.name){ |
|
alert('名称必填') |
|
return |
|
} |
|
this.isMasklayer = true |
|
//删除一下数据库的文件 |
|
if(this.deletedFile.length != 0){ |
|
this.deletedFile.forEach(item => { |
|
this.http.delete(`/api/Objects/PlanPlatform/${item.objectName}`).subscribe(data=>{ |
|
// console.log('删除原文件成功') |
|
}) |
|
}); |
|
} |
|
|
|
this.LinkageForceDetailInfo.location = {x:'',y:''} |
|
this.LinkageForceDetailInfo.relevantInfomationData = JSON.stringify(this.AttachmentArr) |
|
if(this.atLastPositionLngLat.x){ |
|
this.LinkageForceDetailInfo.location.x = this.atLastPositionLngLat.x |
|
this.LinkageForceDetailInfo.location.y = this.atLastPositionLngLat.y |
|
}else{ |
|
this.LinkageForceDetailInfo.location = null |
|
} |
|
let body = this.LinkageForceDetailInfo |
|
if(this.LinkageForceDetailInfo.id){ |
|
this.http.put(`/api/LinkageForces/${this.LinkageForceDetailInfo.id}`,body).subscribe((data:any) =>{ |
|
this.isMasklayer = false |
|
let config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('修改成功','确定',config); |
|
this.PageNumber = 1 //当前第几页 |
|
this.getAllFireForce() |
|
}) |
|
}else{ |
|
this.http.post('/api/LinkageForces',body).subscribe((data:any) =>{ |
|
this.isMasklayer = false |
|
let config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('保存成功','确定',config); |
|
this.LinkageForceDetailInfo = data |
|
this.PageNumber = 1 //当前第几页 |
|
this.getAllFireForce() |
|
}) |
|
} |
|
|
|
|
|
} |
|
//关闭 |
|
close(){ |
|
this.LinkageForceDetailInfo={} |
|
this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null |
|
this.isGisTopBox = false |
|
} |
|
map:any |
|
placeSearch:any//构造地点查询类 |
|
isMapLabel:boolean = false //是否已经标记坐标 |
|
newPositionMarkerContent:any = |
|
'<div class="custom-content-marker">' + |
|
' <img src="/assets/images/定位.png">' + |
|
'</div>' |
|
newPositionMarkerContentBtn:any = |
|
'<div class="custom-content-marker">' + |
|
' <img src="/assets/images/定位.png">' + |
|
' <div class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' + |
|
'</div>' |
|
//创建地图 |
|
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.LinkageForceDetailInfo.location && this.LinkageForceDetailInfo.location.x){ |
|
center = [this.LinkageForceDetailInfo.location.x, this.LinkageForceDetailInfo.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 |
|
} |
|
})//取消 |
|
//点击确定 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(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'),'touchstart',(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) |
|
//this.selectedFireForce.id 选择的组织机构的id |
|
let storageFolderId //要存储到服务器的文件夹id 一般为当前选中单位的id 如果新创建的话就存到public文件夹 |
|
this.LinkageForceDetailInfo.id ? storageFolderId = this.LinkageForceDetailInfo.id : storageFolderId = 'public' |
|
this.http.post(`/api/Objects/PlanPlatform/LinkageForce/${storageFolderId}`,formData).subscribe((data:any)=>{ |
|
// this.objectName = data.objectName |
|
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.LinkageForceDetailInfo.id ? storageFolderId = this.LinkageForceDetailInfo.id : storageFolderId = 'public' |
|
this.http.post(`/api/NewMultipartUpload/PlanPlatform/LinkageForce/${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<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/${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://39.106.78.171:8000/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:80/apps/editor/openPreview?data=${base64}`) |
|
} |
|
if(suffix == 'mp4'){ |
|
const dialogRef = this.dialog.open(ViewDetails2, {//调用open方法打开对话框并且携带参数过去 |
|
data: {item:item,type:"video"}, |
|
id:'videodialog2' |
|
}); |
|
dialogRef.afterClosed().subscribe(); |
|
} |
|
} |
|
|
|
|
|
//收起展开列表 |
|
isPutDown:boolean = false |
|
putDown(){ |
|
this.isPutDown = !this.isPutDown |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
//新增联动力量弹出框 |
|
@Component({ |
|
selector: 'AddLinkageForce', |
|
templateUrl: './addLinkageForce.html', |
|
styleUrls: ['./linkage-forces.component.scss'] |
|
}) |
|
export class AddLinkageForce { |
|
|
|
constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddLinkageForce>,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {} |
|
|
|
|
|
addList:any = [ |
|
{id:0,name:'安监',imgUrl:'/assets/linkageForces/安监.png'}, |
|
{id:1,name:'电力局',imgUrl:'/assets/linkageForces/电力局.png'}, |
|
{id:2,name:'公安',imgUrl:'/assets/linkageForces/公安.png'}, |
|
{id:3,name:'海事',imgUrl:'/assets/linkageForces/海事.png'}, |
|
{id:4,name:'环保局',imgUrl:'/assets/linkageForces/环保局.png'}, |
|
{id:5,name:'交通',imgUrl:'/assets/linkageForces/交通.png'}, |
|
{id:6,name:'民政',imgUrl:'/assets/linkageForces/民政.png'}, |
|
{id:7,name:'气象局',imgUrl:'/assets/linkageForces/气象局.png'}, |
|
{id:8,name:'燃气局',imgUrl:'/assets/linkageForces/燃气局.png'}, |
|
{id:9,name:'市政',imgUrl:'/assets/linkageForces/市政.png'}, |
|
{id:10,name:'水利',imgUrl:'/assets/linkageForces/水利.png'}, |
|
{id:11,name:'通信',imgUrl:'/assets/linkageForces/通信.png'}, |
|
{id:12,name:'医疗',imgUrl:'/assets/linkageForces/医疗.png'}, |
|
{id:13,name:'应急管理',imgUrl:'/assets/linkageForces/应急管理.png'}, |
|
{id:14,name:'住建',imgUrl:'/assets/linkageForces/住建.png'} |
|
] |
|
selectedFireForceTypeIndex:any = 0 |
|
selecteAddType(item,key){ |
|
this.selectedFireForceTypeIndex = item.id |
|
|
|
} |
|
ngOnInit(): void { |
|
|
|
} |
|
|
|
confirm(){ |
|
this.dialogRef.close(this.selectedFireForceTypeIndex) |
|
} |
|
|
|
} |
|
|
|
//查看图片大图和视频 |
|
@Component({ |
|
selector: 'viewdetails', |
|
templateUrl: './viewdetails.html', |
|
styleUrls: ['./linkage-forces.component.scss'] |
|
}) |
|
export class ViewDetails2 { |
|
// myControl = new FormControl(); |
|
//注入MatDialogRef，可以用来关闭对话框 |
|
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌 |
|
constructor(private http: HttpClient,public dialogRef: MatDialogRef<ViewDetails2>,@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(); |
|
} |
|
|
|
} |