From 3d77e7584fe49f629a6b1c231999e5bc182c419a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=BB=B6=E7=A6=8F?= <> Date: Tue, 16 May 2023 16:10:28 +0800 Subject: [PATCH] =?UTF-8?q?style:=E6=B8=85=E7=A9=BA=E6=97=A0=E6=95=88?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mock/layer.ts | 312 +------------ src/views/base.component.ts | 474 +------------------- src/views/overview.component.html | 4 - src/views/overview.component.scss | 125 ------ src/views/overview.component.ts | 697 +----------------------------- 5 files changed, 7 insertions(+), 1605 deletions(-) diff --git a/src/mock/layer.ts b/src/mock/layer.ts index e07e5b8..382b7c1 100644 --- a/src/mock/layer.ts +++ b/src/mock/layer.ts @@ -18,28 +18,7 @@ enum COLOR{ // 四色图-红 RED="#FF5959" } -export default [{ - name:"在管企业", - ids:[] as string[], - type:"areaMarker", - value:"company", - colors:["#0a5fff","#5e93fd"], - selected:false, - pages:["parkFile","companyFile","closePark","smartSafetySupervision","smartEnvironment","smartEnergy","gasConsumption","electricityConsumption","waterConsumption","steamConsumption"] -},{ - name:"视频监控", - ids:[] as string[], - type:"marker", - urls:[ - "@path:camera_0.png", - "@path:camera_1.png", - "@path:camera_2.png", - "@path:camera_3.png", - ], - value:"video" , - selected:false, - pages:["parkFile","smartEmergency","closePark","peopleCar","dangrousCar","boundsManager","smartSafetySupervision"] -},{ +export default [ { name:"电子围栏", ids:[] as string[], type:"area", @@ -47,14 +26,7 @@ export default [{ color:COLOR.BOUNDS, selected:false, pages:["closePark","peopleCar"] -},{ - name:"人员热力图", - ids:[] as string[], - type:"heatmap", - value:"heatmap", - selected:false, - pages:[] -},{ +}{ name:"人员定位", ids:[] as string[], type:"moveMarker", @@ -65,15 +37,7 @@ export default [{ coordinateType:1, selected:false, pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"] -},{ - name:"人员热力图", - ids:[] as string[], - type:"heatmap", - value:"heatmap", - coordinateType:1, - selected:false, - pages:["smartEmergency"] -},{ +}{ name:"车辆定位", ids:[] as string[], type:"moveMarker", @@ -88,274 +52,4 @@ export default [{ coordinateType:1, selected:false, pages:["closePark","peopleCar","smartSafetySupervision","smartEmergency"] -},{ - name:"重载车辆", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01", - value:"heavy-car", - scale:[3,3,3], - selected:false, - pages:["closePark","dangrousCar"] -},{ - name:"空载车辆", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/ObjectLibrary/Exhibition/交通工具/车辆/工程车_2", - value:"empty-car", - scale:[3,3,3], - selected:false, - pages:["closePark","dangrousCar"] -},{ - name:"疏散路线", - ids:[] as string[], - type:"line", - color:COLOR.GREEN, - value:"safe-route", - selected:false, - pages:["dangrousCar"] -}, -// { -// name:"气体监测", -// ids:[] as string[], -// type:"", -// value:"gas-monitor", -// selected:false, -// pages:["dangrousCar"] -// }, -{ - name:"重大危险源", - ids:[] as string[], - type:"areaMarker", - value:"dangrous", - color:"#FFF", - colors:[], - selected:false, - pages:["parkFile","smartSafetySupervision","smartEmergency"] -},{ - name:"风险四色图", - ids:[] as string[], - type:"areaMarker", - value:"four-color", - colors:[COLOR.RED,COLOR.YELLOW,COLOR.BLUE,COLOR.GREEN], - selected:false, - pages:["parkFile","smartSafetySupervision","risk"] -},{ - name:"风险四色图", - ids:[] as string[], - type:"areaMarker", - value:"four-color2", - colors:[COLOR.RED,COLOR.YELLOW,COLOR.BLUE,COLOR.GREEN], - selected:false, - pages:["dangrousCar"] -},{ - name:"应急设施", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_D_2", - value:"safe-building", - scale:[3,3,3], - selected:false, - pages:["parkFile","smartEmergency","goods"] -},{ - name:"物资仓库", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_C_5", - value:"safe-goods", - scale:[3,3,3], - selected:false, - pages:["parkFile","smartEmergency","goods"] -},{ - name:"实控线", - ids:[] as string[], - type:"area", - value:"real-line", - color:COLOR.REALLINE, - selected:false, - pages:["parkFile","boundsManager"] -},{ - name:"安全线", - ids:[] as string[], - type:"area", - value:"safe-line", - color:COLOR.SAFELINE, - selected:false, - pages:["parkFile","boundsManager"] -},{ - name:"规划线", - ids:[] as string[], - type:"area", - value:"plan-line", - color:COLOR.PLANLINE, - selected:false, - pages:["parkFile","boundsManager"] -},{ - name:"卡口设施", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_D_2", - value:"check-point", - scale:[3,3,3], - selected:false, - pages:["boundsManager"] -},{ - name:"动火", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1", - value:"use-fire", - scale:[3,3,3], - selected:false, - pages:["dangerousWork"] -},{ - name:"断路", - ids:[] as string[], - type:"areaMarker", - value:"break-road", - selected:false, - color:"#000", - pages:["dangerousWork"] -},{ - name:"高空", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1", - value:"high-sky", - scale:[3,3,3], - selected:false, - pages:["dangerousWork"] -},{ - name:"吊装", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1", - value:"hoisting", - scale:[3,3,3], - selected:false, - pages:["dangerousWork"] -},{ - name:"动土", - ids:[] as string[], - type:"areaMarker", - value:"make-ground", - selected:false, - color:"#efaf00", - pages:["dangerousWork"] -},{ - name:"临时用电", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1", - value:"use-e", - scale:[3,3,3], - selected:false, - pages:["dangerousWork"] -},{ - name:"受限空间", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1", - value:"forbid-space", - scale:[3,3,3], - selected:false, - pages:["dangerousWork"] -},{ - name:"盲板抽堵", - ids:[] as string[], - type:"model", - pakFilePath: "@path:DTS_Library_V5.4.pak", - assetPath:"/JC_CustomAssets/EffectLibrary/Exhibition/3DUI/3D_UI_A_1", - value:"blind-plate", - scale:[3,3,3], - selected:false, - pages:["dangerousWork"] -},{ - name:"大气环境", - ids:[] as string[], - type:"marker", - value:"gas-env", - hasText:true, - coordinateType:1, - url:"@path:mp_atmosphere.png", - selected:false, - pages:["smartEnvironment","airQuality","dangrousCar"] -},{ - name:"土壤环境", - ids:[] as string[], - type:"marker", - value:"ground-env", - coordinateType:1, - hasText:true, - url:"@path:mp_soil.png", - selected:false, - pages:["smartEnvironment","soilQuality"] -},{ - name:"废气污染源", - ids:[] as string[], - type:"marker", - url:"@path:mp_fluegas.png", - value:"fq-wrw", - coordinateType:1, - hasText:true, - selected:false, - pages:["smartEnvironment","gas"] -},{ - name:"清下水监控", - ids:[] as string[], - type:"marker", - coordinateType:1, - hasText:true, - url:"@path:mp_purewater.png", - value:"qxs-jk", - selected:false, - pages:["smartEnvironment","clean"] -},{ - name:"水环境", - ids:[] as string[], - type:"marker", - coordinateType:1, - url:"@path:mp_water.png", - value:"water-env", - hasText:true, - selected:false, - pages:["smartEnvironment","waterQuality"] -},{ - name:"特征污染物", - ids:[] as string[], - type:"marker", - coordinateType:1, - hasText:true, - url:"@path:mp_contaminant.png", - value:"tz-wrw", - selected:false, - pages:["smartEnvironment","characteristicContaminants"] -},{ - name:"废水污染源", - ids:[] as string[], - type:"marker", - coordinateType:1, - hasText:true, - url:"@path:mp_fluewater.png", - value:"fs-wrw", - selected:false, - pages:["smartEnvironment","waste"] -},{ - name:"隐患治理", - ids:[] as string[], - type:"marker", - url:"@path:dt_yinhuan.png", - value:"hidden-dangrous", - selected:false, - pages:["pitfall"] }] \ No newline at end of file diff --git a/src/views/base.component.ts b/src/views/base.component.ts index 24c7d28..62600f0 100644 --- a/src/views/base.component.ts +++ b/src/views/base.component.ts @@ -27,12 +27,6 @@ export default class BaseComponent extends Vue { public lock = true; public timerList = {} as any; - - public eventAssets = { - fire:"/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10", - normal:"/JC_CustomAssets/EffectLibrary/Exhibition/Point/Point_R_2" - } ; - public warnAssets = "/JC_CustomAssets/EffectLibrary/Exhibition/Point/Point_Y_2"; public pakFilePath = "@path:DTS_Library_V5.4.pak"; public currentWanning:any = null; public currentEvent:any = null; @@ -67,61 +61,6 @@ export default class BaseComponent extends Vue { } - - public addEvent(data){ - if(this.currentEvent){ - this.player.api.customObject.delete(this.currentEvent.id); - this.player.api.marker.delete(this.currentEvent.id); - this.currentEvent = null; - } - if(!data.position[2]){ - data.position[2]=0.5 - } - this.currentEvent = { - id: data.id, - pakFilePath: this.pakFilePath, - assetPath:this.eventAssets[data.type] , - location: data.position, - scale: data.type==="fire"?[15, 15, 15]:[10,10,10], - popupSize:[355,212], - coordinate:data.position, - lineSize:[2,40], - autoHeight:true, - popupOffset:[-176,-106], - useTextAnimation: false, - autoHidePopupWindow:false, - displayMode:2, - popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(data), - } - - this.player.api.marker.add(this.currentEvent, (data) => { - this.player.api.marker.showPopupWindow(this.currentEvent.id); - this.player.api.marker.focus(this.currentEvent.id,150,2) - }) - - this.player.api.customObject.add(this.currentEvent, (data) => { - }) - } - - public addWarnning(item){ - if(this.currentWanning){ - this.player.api.customObject.delete(this.currentWanning.id) - } - this.currentWanning = { - id:item.id+"", - groupId:"warning", - pakFilePath:this.pakFilePath, - assetPath:this.warnAssets, - // coordinateType:1, - location:[...item.position,10], - rotation:[0,90,0] - - } - this.player.api.customObject.add(this.currentWanning,()=>{ - this.player.api.customObject.focus(this.currentWanning.id,15,2) - }) - } - // 添加电子围栏 // 安全线 // 实控线 // 规划线 public async toggleArea(layer){ if(!layer.ids.length){ @@ -151,407 +90,6 @@ export default class BaseComponent extends Vue { } } - // 添加marker - public toggleMarker(layer){ - if(!layer.ids.length){ - let text = {}; - const datas = this.dataList[layer.value].map(item=>{ - if(layer.hasText){ - text = { - useTextAnimation: false, - textBackgroundColor:[0,0,0,0.7], - textOffset:[0,0], - fontSize:12, - fontColor:"#FFF", - text:item.name || layer.name - } - } - return Object.assign({ - id:item.id, - groupId:layer.value, - coordinate:item.position, - coordinateType:layer.coordinateType?layer.coordinateType:0, - displayMode:2, - imagePath:layer.url || layer.urls[item.type], - imageSize:[48,48], - // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item), - lineSize:[2,40], - useTextAnimation: false, - lineOffset:[24,0], - // textBackgroundColor:[0,0,0,0.7], - autoHeight:true, - - },text) - }); - this.player.api.marker.add(datas,(data)=>{ - layer.ids = datas.map(item=>item.id) - }) - }else{ - if(layer.selected){ - // this.player.api.marker.showAllPopupWindow(); - this.player.api.marker.show(layer.ids) - }else{ - // this.player.api.marker.hideAllPopupWindow(); - this.player.api.marker.hide(layer.ids) - } - } - - - } - - // 添加企业面 tag - public toggleAreaMarker(layer){ - if(!layer.ids.length){ - const result = this.dataList[layer.value]; - if (!result) return - const datas = result.map(item=>{ - return { - id:item.id, - groupId:layer.value, - coordinate:item.position, - displayMode:2, - text:item.name, - // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item), - // popupSize:[348,156], - lineSize:[2,40], - useTextAnimation: false, - textBackgroundColor:[0,0,0,0.7], - textOffset:[0,0], - fontSize:12, - fontColor:"#FFF", - autoHeight:true, - - } - }); - const datas2 = result.map((item,index)=>{ - return { - id:item.id, - groupId:layer.value, - coordinates:item.area, - height:layer.value==="company"?5:40, - color:layer.color || layer.colors[index], - style:1, - generateTop:true, - generateBottom:true - - } - }); - - this.player.api.polygon3d.add(datas2,(data)=>{ - // - console.log(layer.value,data) - }) - this.player.api.marker.add(datas,(data)=>{ - layer.ids = result.map(item=>item.id) - }) - // this.player.api.marker.showAllPopupWindow(); - }else{ - if(layer.selected){ - // this.player.api.marker.showAllPopupWindow(); - this.player.api.marker.show(layer.ids) - this.player.api.polygon3d.show(layer.ids) - }else{ - // this.player.api.marker.hideAllPopupWindow(); - this.player.api.marker.hide(layer.ids) - this.player.api.polygon3d.hide(layer.ids) - } - } - } - - public async toggleMoveMarker(layer){ - const result = this.dataList[layer.value]; - - if(!layer.ids.length){ - const datas = result.map(item=>{ - return { - id:item.id, - groupId:layer.value, - pakFilePath:layer.pakFilePath, - assetPath:layer.assetPath, - coordinateType:layer.coordinateType?layer.coordinateType:0, - location:item.position, - smoothMotion:1, - scale:[0,0,0], - rotation:[0,90,0] - - } - }); - const markerDatas = result.map(item=>{ - return { - id:item.id, - groupId:layer.value, - coordinate:item.position, - coordinateType:layer.coordinateType?layer.coordinateType:0, - displayMode:2, - imagePath:layer.url || layer.urls[item.type], - imageSize:[48,48], - // popupURL:"http://192.168.1.20:8080/#/popup?"+new URLSearchParams(item), - lineSize:[2,40], - useTextAnimation: false, - lineOffset:[24,0], - // textBackgroundColor:[0,0,0,0.7], - autoHeight:true, - - } - }) - this.player.api.marker.add(markerDatas) - this.player.api.customObject.add(datas,(data)=>{ - console.log(data) - if(data.resultMessage==="OK"){ - this.player.api.marker.setAttachCustomObject(result.map(item=>{ - layer.ids.push(item.id); - - - return{ - markerId: item.id, //标注id - objectId: item.id, //自定义对象id - offset: [0, 0, 0] //偏移量 - } - })); - this.player.api.customObject.moveTo(result.map(item=>{ - return { - id:item.id, - location:turf.destination(turf.point(item.position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates, - "smoothTime": 5 - } - })) - - this.timerList[layer.value] = setInterval(()=>{ - this.player.api.customObject.moveTo(result.map(item=>{ - return { - id:item.id, - location:turf.destination(turf.point(item.position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates, - "smoothTime": 5 - } - })) - },5000) - } - }) - }else{ - if(layer.selected){ - this.player.api.customObject.show(layer.ids) - this.player.api.marker.show(layer.ids) - this.player.api.customObject.moveTo(result.map(item=>{ - return { - id:item.id, - location:turf.destination(turf.point(item.position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates, - "smoothTime": 5 - } - })) - - this.timerList[layer.value] = setInterval(()=>{ - this.player.api.customObject.moveTo(result.map(item=>{ - return { - id:item.id, - location:turf.destination(turf.point(item.position),layer.value==="car"?50:1,Math.random()*360,{units:"meters"}).geometry.coordinates, - "smoothTime": 5 - } - })) - },5000) - }else{ - clearInterval(this.timerList[layer.value]); - this.timerList[layer.value] = null; - this.player.api.customObject.hide(layer.ids) - this.player.api.marker.hide(layer.ids) - } - } - - } - - // 添加3dMarker - public async toggleCustom(layer){ - if(!layer.type){ - return - } - - if(!layer.ids.length){ - const result = this.dataList[layer.value] || []; - const datas = result.map(item=>{ - if(!item.position[2]){ - item.position[2] = item.name==="高空"? 20:3 - } - return { - id:item.id, - groupId:layer.value, - pakFilePath:layer.pakFilePath, - assetPath:layer.assetPath, - coordinateType:layer.coordinateType?layer.coordinateType:0, - location:item.position, - scale:layer.scale, - rotation:[0,90,0] - - } - }); - this.player.api.customObject.add(datas,(data)=>{ - if(data.resultMessage==="OK"){ - if(layer.value.indexOf("car")<0){ - result.forEach(async (item)=>{ - let res = await this.player.api.misc.getBPFunction(layer.assetPath); - console.log(res,item) - if(layer.value==="safe-goods"){ - this.player.api.customObject.callBatchBPFunction([{ - id: item.id, - functionName: '数据', - parameters: [ - { "paramType": 5, "paramValue": item.remark}, - { "paramType": 6, "paramValue": [1,1,1,1] }, - ] - },{ - id: item.id, - functionName: '文字', - parameters: [ - { "paramType": 5, "paramValue": item.name}, - { "paramType": 5, "paramValue": ""}, - { "paramType": 6, "paramValue": [1,1,1,1] }, - { "paramType": 6, "paramValue": [0, 0.3, 1, 1] }, - ] - }],(data)=>{ - console.error("物资盘点的marker点位供应商方面有问题 无法修改 预计五月底修复 产品经理说先放着不改文字") - }); - }else if (layer.value==="safe-building" || layer.value==="check-point"){ - this.player.api.customObject.callBatchBPFunction([{ - id: item.id, - functionName: '文字', - parameters: [ - { "paramType": 5, "paramValue": item.name}, - { "paramType": 2, "paramValue": 48 }, - { "paramType": 6, "paramValue": [0,1,0.000774,1] }, - { "paramType": 3, "paramValue": 1 } - ] - },{ - id: item.id, - functionName: '数据', - parameters: [ - { "paramType": 5, "paramValue": item.remark}, - { "paramType": 2, "paramValue": 150 }, - ] - }]); - }else{ - this.player.api.customObject.callBatchBPFunction([{ - id: item.id, - functionName: '文字', - parameters: [ - { "paramType": 5, "paramValue": layer.name+"作业"}, - { "paramType": 2, "paramValue": 48}, - { "paramType": 6, "paramValue": [1,1,1,1] }, - ] - }],(data)=>{ - console.log(data) - }); - } - }) - } - layer.ids = result.map(item=>item.id) - } - }) - }else{ - if(layer.selected){ - this.player.api.customObject.show(layer.ids) - }else{ - this.player.api.customObject.hide(layer.ids) - } - } - } - - - // 热力图 - public async addHeatMap(layer) { - if(!layer.ids.length){ - const range = [0, 100]; - const data = [] as any; - const bbox = [ - 13312554.24, - 4098064.96, - 0, - 13313446.4, - 4098892.48, - 0 - ] - for (let i = 0; i < 100; i++) { - const x = getRandNumBetween(bbox[0], bbox[3]); //minX ~ maxX - const y = getRandNumBetween(bbox[1], bbox[4]); //minY ~ maxY - data.push({ - id: i.toString(), - coordinate: [x, y, 0], //热力点的坐标 - radius: Math.random() * 30, //热力点影像半径范围 - heatValue: Math.random() * 100 //热力值 - }); - } - this.player.api.heatmap.add('heatmap', bbox, range, data); - layer.ids.push("heatmap") - }else{ - if(layer.selected){ - this.player.api.heatmap.show(layer.ids) - }else{ - this.player.api.heatmap.hide(layer.ids) - } - } - - - } - - // 添加逃生路线 - - public async addRoute(layer){ - - if(!layer.ids.length){ - const result = this.dataList[layer.value].map(item=>{ - return { - id:item.id, - groupId:layer.value, - coordinates:item.positions, - thickness:5, - shape:0, - flowRate:0.1, - color:layer.color, - style:0, - } - }); - this.player.api.polyline.add(result,(data)=>{ - if(data.resultMessage==="OK"){ - layer.ids = result.map(item=>item.id) - } - }) - }else{ - if(layer.selected){ - this.player.api.polyline.show(layer.ids) - }else{ - this.player.api.polyline.hide(layer.ids) - } - } - } - - - public toggleLayerAssets(layer){ - if(layer.type === "area"){ - this.toggleArea(layer) - return - } - if(layer.type === "line"){ - this.addRoute(layer) - return - } - if(layer.type === "heatmap"){ - this.addHeatMap(layer) - return - } - if(layer.type==="areaMarker"){ - this.toggleAreaMarker(layer) - return - } - if(layer.type==="moveMarker"){ - this.toggleMoveMarker(layer) - return - } - if(layer.type==="model"){ - this.toggleCustom(layer) - return - } - if(layer.type==="marker"){ - this.toggleMarker(layer) - } - } - public onFocus(data){ this.player.api[data.type].focus(data.id) @@ -564,18 +102,10 @@ export default class BaseComponent extends Vue { console.log(1) } beforeDestory(){ + // } destroyed(){ - this.layerData.forEach(item=>{ - if(item.type){ - this.player.api[item.type].clear() - } - if(this.timerList[item.value]){ - clearInterval(this.timerList[item.value]); - this.timerList[item.value] = null; - } - - }) + // } diff --git a/src/views/overview.component.html b/src/views/overview.component.html index b744d61..fe01f9b 100644 --- a/src/views/overview.component.html +++ b/src/views/overview.component.html @@ -1,8 +1,4 @@
-
- {{item}} -
diff --git a/src/views/overview.component.scss b/src/views/overview.component.scss index 16d6e32..dd6ce2d 100644 --- a/src/views/overview.component.scss +++ b/src/views/overview.component.scss @@ -19,132 +19,7 @@ width: 100%; height: 100%; position: relative; - .new-page{ - width: 100%; - height: 100%; - display: flex; - position: absolute; - left:0; - top: 0; - z-index: 9; - background-color: #0d151e; - } - .pop-box{ - width: 430px; - border-radius: 4px 4px 4px 4px; - opacity: 1; - border: 1px solid #FFFFFF; - background: rgba($color: #000000, $alpha: 0.6); - color: #E8E8E8; - padding: 30px; - font-size: 14px; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%,-50%); - .border{ - width: 8px; - height: 8px; - position: absolute; - border-left: 1px solid #FFF; - border-top: 1px solid #FFF; - &.l-t{ - top: 10px; - left: 10px; - } - &.r-t{ - top: 10px; - right: 10px; - transform: rotate(90deg); - } - &.r-b{ - bottom: 10px; - right: 10px; - transform: rotate(180deg); - } - &.l-b{ - bottom: 10px; - left: 10px; - transform: rotate(270deg); - } - } - .title{ - font-size: 16px; - } - .close{ - position: absolute; - cursor: pointer; - right: 20px; - top: 20px; - color: #FFF; - font-size: 26px; - } - .block{ - padding: 20px 0; - line-height: 100%; - border-bottom: 1px solid rgba($color: $border-color, $alpha: 0.4); - &.flex-box{ - display: flex; - justify-content: space-around; - flex-wrap: wrap; - } - .flex-panel{ - width: 70px; - text-align: center; - line-height: 100%; - svg{ - font-size: 15px; - } - &.half{ - width: 50%; - text-align: left; - } - p{ - line-height: 100%; - margin-bottom: 10px; - } - .count{ - padding: 10px 0; - font-size: 20px; - margin-bottom: 10px; - border-bottom: 1px solid rgba($color: $border-color, $alpha: 0.6); - position: relative; - &::after{ - content: ""; - width: 4px; - height: 4px; - border: 1px solid rgba($color: $border-color, $alpha: 0.6); - border-radius: 50%; - position: absolute; - display: block; - right: -5px; - bottom: -3px; - } - } - } - } - } - - .fix-tab-box{ - display: inline-flex; - align-items: center; - height: 40px; - background: rgba($color: #000000, $alpha: 0.7); - border-radius: 20px; - padding-right: 80px; - position: fixed; - top: 100px; - z-index: 99; - left: 50%; - transform: translateX(-50%); - .tab{ - margin-left: 80px; - } - .el-radio{ - color: $font-color; - } - } #map { width: 100%; diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts index bd1fe08..ab8d371 100644 --- a/src/views/overview.component.ts +++ b/src/views/overview.component.ts @@ -14,71 +14,13 @@ import BaseComponent from "./base.component" export default class OverViewComponent extends BaseComponent { //当前菜单 public currentNav = ''; - + // 当前图层 public currentLayers = [] as any; - public parkList = ["一号停车场","二号停车场","三号停车场"]; - public currentPark = null; - public warnTimer:any; - currentVideo = require("@/assets/video/camera.mp4"); - //弹出层标识 - dialogVisible = false - //隐患详情 - showHiddenRightFlag = false - //许可证弹窗 - dialogVisibleForPermit = false - dialogVisibleForBigPop = false - //许可证模拟数据 - tableDataForPermit: any[] = MockData.xkz().data - + // 是否展开图层 public openLayerDrawer = false; - //风险管控右侧控制显示隐藏 - riskFlag = false - riskDetailData = {} - //危险源详情标记 - riskDetailFlag = false - dangerSourceDetail = {} - public popFlag = false; - info: any = {} - // 告警列表 - waringList: any[] = []; - - // 是否显示全页新页面 - public newPageData:any = null; - - //应急准备 - showPlanFlag = false - //事态控制 - showControlFlag = false - //善后 - showAfterwardsFlag = false - //确认警情 - showConfirmFlag = false - //研判 - judgmentFlag = false - //物资详细列表 - storeGoodsFlag = false - public currentCarPeople:any; - - public currentCompany:any = false; - created(){ } - - public getHiddenDangrous(){ - this.parkService.getHiddenDangrous().then((res:any)=>{ - this.dataList["hidden-dangrous"] = res.data; - this.$store.commit("setHiddenDangrousList",res.data) - }) - } - public getWaringList(){ - this.waringList = MockData.getWaringList().data - this.$store.commit("upDateWaringList",this.waringList) - } - public upDateEventList(){ - const eventList = MockData.getEventList().data - this.$store.commit("upDateEventList",eventList) - } // 获取车辆 public getCarList(){ this.closeService.getCarList().then((res)=>{ @@ -92,214 +34,6 @@ export default class OverViewComponent extends BaseComponent { this.$store.commit("setPeopleList",res.data) }) } - // 获取摄像头 - public getCameraList(){ - this.closeService.getCameraList().then((res)=>{ - this.dataList["video"] = (res.data as any); - this.$store.commit("setCameraList",res.data) - }) - } - // 获取企业列表 - public getCompanyList(){ - this.parkService.getCompanyList().then((res:any)=>{ - this.dataList["company"] = res.data; - this.$store.commit("setCompanyList",res.data) - }) - } - - // 获取电子围栏 - public getBounds(){ - this.parkService.getBounds().then((res:any)=>{ - this.dataList["bounds"] = res.data; - }) - } - // 获取实控线 - public getRealBounds(){ - this.parkService.getRealBounds().then((res:any)=>{ - this.dataList["real-line"] = res.data; - }) - } - // 获取安全线 - public getSafeBounds(){ - this.parkService.getSafeBounds().then((res:any)=>{ - this.dataList["safe-line"] = res.data; - }) - } - // 获取规划线 - public getPlanBounds(){ - this.parkService.getPlanBounds().then((res:any)=>{ - this.dataList["plan-line"] = res.data; - }) - } - // 获取疏散线路 - public getSafeLine(){ - this.parkService.getSafeLine().then((res:any)=>{ - this.dataList["safe-route"] = res.data; - }) - } - // 获取重载空载车辆 - public getStopCarList(){ - this.closeService.getStopCarList().then((res:any)=>{ - this.dataList["empty-car"] = res.data.filter(item=>item.type=="空载"); - this.dataList["heavy-car"] = res.data.filter(item=>item.type!="空载"); - }) - } - // 获取大气监测 - public getGasData(){ - this.parkService.getGasData().then(res=>{ - const datas = MockData.deviceList().data - this.dataList["gas-env"] = (res.data as any).map((item,i)=>{ - item.name = datas.nameList[i] - item.value = datas.values[i] - return item - }); - }) - - } - // 获取土壤 - public getRoilData(){ - this.parkService.getRoilData().then(res=>{ - const datas = MockData.deviceList().data - this.dataList["ground-env"] = (res.data as any).map((item,i)=>{ - item.name = datas.nameList[i] - item.value = datas.values[i] - return item - }); - this.$store.commit("setGroundEnvList",this.dataList["ground-env"]) - }) - - } - // 获取废气 - public getBadGasData(){ - this.parkService.getBadGasData().then(res=>{ - this.dataList["fq-wrw"] = res.data; - }) - - } - // 获取清下水 - public getCleanWaterData(){ - this.parkService.getCleanWaterData().then(res=>{ - this.dataList["qxs-jk"] = res.data; - }) - - } - // 获取水环境 - public getWaterEnvData(){ - this.parkService.getWaterEnvData().then(res=>{ - this.dataList["water-env"] = res.data; - }) - - } - // 获取特征污染物 - public getTzWrwData(){ - this.parkService.getTzWrwData().then(res=>{ - const datas = MockData.deviceList().data - this.dataList["tz-wrw"] = (res.data as any).map((item,i)=>{ - item.name = datas.nameList[i] - item.value = datas.values[i] - return item - }); - this.$store.commit("setSpecialEnvList",this.dataList["tz-wrw"]) - - }) - - } - // 获取废水 - public getBadWaterData(){ - this.parkService.getBadWaterData().then(res=>{ - this.dataList["fs-wrw"] = res.data; - }) - - } - // 获取四色图 - public getFourList(){ - this.parkService.getFourList().then(res=>{ - this.dataList["four-color"] = res.data; - }) - - } - // 获取四色图2 - public getFourList2(){ - this.parkService.getFourList2().then(res=>{ - this.dataList["four-color2"] = res.data; - }) - - } - // 获取卡口 - public getCheckPoint(){ - this.parkService.getCheckPoint().then(res=>{ - this.dataList["check-point"] = res.data; - }) - - } - // 获取应急设施 - public getBuildingList(){ - this.parkService.getBuildingList().then(res=>{ - this.dataList["safe-building"] = res.data; - }) - - } - // 获取应急仓库 - public getStoreList(){ - this.parkService.getStoreList().then(res=>{ - this.dataList["safe-goods"] = res.data; - this.$store.commit("setSafeGoods",res.data) - }) - - } - // 获取重大危险源 - public getDangrous(){ - this.parkService.getDangrous().then(res=>{ - this.dataList["dangrous"] = res.data; - this.$store.commit("setDangrousList",res.data) - }) - } - // 获取动火 - public getDangrousWorkData(){ - this.parkService.getDangrousWorkData().then((res:any)=>{ - res.data.forEach(item=>{ - const layer = this.layerData.find(layer=>layer.name === item.name) as any; - if(!this.dataList[layer.value]){ - this.dataList[layer.value] = []; - } - this.dataList[layer.value].push(item); - this.$store.commit("setDangrousWorkList",res.data) - }) - - }) - } - // 停车场切换 - public parkChange(data){ - let ids = []; - if(data===0){ - ids = this.currentLayers.find(item=>item.value==="heavy-car").ids; - }else if(data===1){ - ids = this.currentLayers.find(item=>item.value==="empty-car").ids; - } - this.player.api.customObject.focus(ids) - } - - //特殊作业显示隐藏 - sepRightFlag = false - //特殊作业详情 - sepDetailData = {} - //特殊作业详情 - hiddenDetailData = {} - //是否从隐患那边打开的风险 - fromPage = '' - //大弹窗标题 - bigPopTitle = '人员信息卡' - //默认打开的折叠面板 - activeNames = ['1'] - //右侧列表显示隐藏 - rightListFlag = false - //右侧列表数据 - dataListRight:any = {} - //右侧主要内容显示隐藏 - get showMainRight(){ - return !this.popFlag && !this.riskFlag && (this.currentNav !== 'risk') && !this.sepRightFlag && - !this.showHiddenRightFlag && !this.riskDetailFlag && !this.rightListFlag && !this.showConfirmFlag && !this.judgmentFlag && !this.storeGoodsFlag - } // 地图初始化后 public getMap(store: any) { this.player = store; @@ -312,44 +46,12 @@ export default class OverViewComponent extends BaseComponent { this.player.api.polyline.clear(); this.player.api.heatmap.clear(); this.currentLayers = this.getCurrentLayers(); - // this.addEvent({ - // type:"fire", - // id:new Date().getTime()+"", - // typeName:"火灾", - // tel:13222078731, - // position:[13312990.72, 4098613.12, 0.51], - // reporter:"张三", - // content:"北京汉邦唐化工厂区发生火灾" - - // }) - // this.addHeatMap(); - // document.addEventListener("mousemove",this.fixedCamera) } public handleChange(data) { - console.log(data) if(data.GroupID){ const currentData = this.dataList[data.GroupID].find(item=>item.id === data.Id); - - if(data.GroupID==="peo"){ - this.emitPersonPop(currentData) - } - if(data.GroupID==="car"){ - this.emitCarPop(currentData) - } - if(data.GroupID==="video"){ - this.openVideo(currentData) - } - if(data.GroupID==="company"){ - this.openCompany(currentData) - } - if(data.GroupID==="hidden-dangrous"){ - this.showHiddenRight(currentData) - } - if(["blind-plate","forbid-space","use-e","make-ground","hoisting","high-sky","break-road","use-fire"].includes(data.GroupID)){ - this.showSepRight(currentData) - } } } @@ -360,7 +62,6 @@ export default class OverViewComponent extends BaseComponent { this.resetMap(); } console.log('当前点击导航', data) - this.hidePop() } @@ -404,245 +105,13 @@ export default class OverViewComponent extends BaseComponent { return } layer.selected = !layer.selected; - this.toggleLayerAssets(layer) } - //点击报警信息右侧交互动画 - public popDrawerChange(flag = false,className='.main') { - this.$nextTick(()=>{ - const popEl = document.querySelector(className) as any; - if (!popEl) return - if (flag) { - popEl.classList.remove("animate__fadeInRight"); - setTimeout(()=>{ - popEl.classList.add("animate__fadeInRight"); - },10) - - } else { - popEl.classList.remove("animate__slideInRight"); - popEl.classList.add("animate__slideOutRight"); - } - }) - - } mounted() { console.log(2) } - //获取点击的信息 - getItem(item) { - this.addWarnning(item) - this.popFlag = true - this.riskDetailFlag = false - this.riskFlag = false - this.info = item - this.popDrawerChange(true) - } - - //处理信息 - deal() { - this.dialogVisible = true - } - - - closePop(){ - if(this.currentWanning){ - this.player.api.customObject.delete(this.currentWanning.id); - this.currentWanning = null - } - this.popFlag = false - } - //隐藏弹出层 - hidePop() { - if(this.currentEvent){ - this.player.api.customObject.delete(this.currentEvent.id); - this.player.api.marker.delete(this.currentEvent.id); - this.currentEvent = null; - } - if(this.currentWanning){ - this.player.api.customObject.delete(this.currentWanning.id); - this.currentWanning = null - } - this.newPageData = null; - this.currentCompany=false; - this.popFlag = false - this.riskFlag = false - this.sepRightFlag = false - this.riskDetailFlag = false - this.showHiddenRightFlag = false - this.rightListFlag = false - this.showConfirmFlag = false - this.judgmentFlag = false - this.storeGoodsFlag = false - this.fromPage = '' - } - //隐藏危险源弹出层 - hideDangerPop() { - this.popDrawerChange(false,'.riskDetail') - this.riskDetailFlag = false - } - //显示应急plan - showPlan(){ - this.info = { - "typeName": "火灾", - "content": "北京汉邦唐化工厂区发生火灾", - "levelName": "二级", - "levelClass": "level-2-text", - "levelClassIcon": "level-2", - "time": "2023-05-15 15:21:35", - "address": "工厂厂房", - "reporter": "蒋丽", - "tableHeader": [ - { - "prop": "name", - "label": "摄像头名称" - }, - { - "prop": "type", - "label": "类型" - }, - { - "prop": "distance", - "label": "距离 (m)" - } - ], - "tableData": [ - { - "type": "简型摄像头", - "distance": "10", - "name": "1号摄像头" - }, - { - "type": "简型摄像头", - "distance": "20", - "name": "2号摄像头" - }, - { - "type": "简型摄像头", - "distance": "22", - "name": "3号摄像头" - }, - { - "type": "简型摄像头", - "distance": "10", - "name": "4号摄像头" - }, - { - "type": "简型摄像头", - "distance": "20", - "name": "5号摄像头" - }, - { - "type": "简型摄像头", - "distance": "22", - "name": "6号摄像头" - } - ], - "title": "火灾爆炸", - "info": "北京汉邦唐化工厂区发生火灾", - "level": "1", - "type": "fire", - "tel": 13231475537, - "id": "110000197911038403", - "position": [13313085.72,4098442.24,0.51001953125] - } - this.showPlanFlag = true - } - //显示控制 - showControl(){ - this.showPlanFlag = false - this.showControlFlag = true - } - //显示善后 - showAfterwards(){ - this.showControlFlag = false - this.showAfterwardsFlag = true - } - //显示应急首页 - showHome(){ - this.showAfterwardsFlag = false - } - //确认警情 - showConfirm(){ - this.showConfirmFlag = true - } - hideConfirm(){ - this.showConfirmFlag = false - } - hideJudgmentFlag(){ - this.judgmentFlag = false - this.showPlanFlag = true - } - showJudgmentFlag(){ - this.showConfirmFlag = false - this.judgmentFlag = true - } - //接收处理消息 - dealSubmit(msg: any) { - console.log(msg, 'msg') - this.hidePop() - } - - - - //动态合并表格列 - objectSpanMethod({row, column, rowIndex, columnIndex}) { - if ([0, 1].includes(columnIndex)) { - if (rowIndex % 5 === 0) { - return { - rowspan: 5, - colspan: 1 - }; - } else { - return { - rowspan: 0, - colspan: 0 - }; - } - } - } - - - //显示风险右侧详情 - showRiskRight(item){ - this.popFlag = false - this.riskDetailFlag = false - this.riskFlag = true - if (item){ - this.riskDetailData = item - } - this.popDrawerChange(true) - } - // 关闭风险右侧 - closeRiskRight(){ - this.riskFlag = false - if (this.fromPage === 'hidden'){ - this.showHiddenRightFlag = true - } - // this.hidePop() - } - // 关闭右侧危险源 - closeRiskDetailRight(){ - if (this.currentNav === 'smartSafetySupervision'){ - this.riskDetailFlag = false - }else{ - this.hideDangerPop() - this.showRiskRight(false) - } - - - } - - //弹出危险源相关信息 - getHazard(item){ - this.riskDetailFlag = true - this.riskFlag = false - this.popFlag = false - this.dangerSourceDetail = MockData.dangerSourceDetail().data - /* this.popDrawerChange() - this.popDrawerChange(true,'.main')*/ - } public getCurrentLayers(){ @@ -663,173 +132,11 @@ export default class OverViewComponent extends BaseComponent { } - //显示特殊作业右侧详情 - showSepRight(item){ - this.resetMap() - setTimeout(()=>{ - this.player.api.customObject.focus(item.id,50,2,null,0,()=>{ - this.sepRightFlag = true - if (item){ - this.sepDetailData = item - } - this.popDrawerChange(true,'.main') - }) - this.player.api.polygon3d.focus(item.id,50,2) - },1000) - } - //关闭特殊作业详情 - closeSepDetailRight(){ - this.sepRightFlag = false - } - //显示隐患详情 - showHiddenRight(item){ - console.log(item) - this.player.api.marker.focus(item.id,10,2) - setTimeout(()=>{ - this.showHiddenRightFlag = true - this.riskFlag = false - this.riskDetailFlag = false - if (item){ - this.hiddenDetailData = item - } - this.popDrawerChange(true,'.main') - },2000) - - } - //关闭特殊作业详情 - closeHiddenDetailRight(){ - this.showHiddenRightFlag = false - } - //隐患详情关联风险 - showRisk(item){ - this.showHiddenRightFlag = false - this.riskFlag = true - this.fromPage = 'hidden' - if (item){ - this.riskDetailData = item - } - } - - destroyed() { if (this.player) { this.player = null } - if(this.warnTimer){ - clearInterval(this.warnTimer); - this.warnTimer = null; - } - } - //展示人员详情 - emitPersonPop(item){ - this.resetMap(); - setTimeout(()=>{ - this.currentCarPeople = item; - this.player.api.customObject.focus(item.id,50,2,[0,0,0],2); - setTimeout(()=>{ - this.bigPopTitle = '人员信息卡'; - this.dialogVisibleForBigPop = true - },2000) - },1000) - } - //展示车辆详情 - emitCarPop(item){ - this.resetMap(); - setTimeout(()=>{ - this.currentCarPeople = item; - this.player.api.customObject.focus(item.id,50,2,[0,0,0],2); - setTimeout(()=>{ - this.bigPopTitle = '车辆信息卡'; - this.dialogVisibleForBigPop = true - },2000) - },1000) - } - // 打开摄像头 - openVideo(item){ - this.resetMap(); - setTimeout(()=>{ - this.player.api.marker.focus(item.id,50,2) - setTimeout(()=>{ - layer.open({ - type:1, - shade:0, - title:item.remark+"-"+ item.id, - content:`
- -
` - }) - },2000) - },1000) - } - openCompany(item){ - this.resetMap(); - setTimeout(()=>{ - this.player.api.polygon3d.focus(item.id,100,2,null,()=>{ - this.currentCompany = item; - }) - },1000) - } - - selectCompany(item){ - this.newPageData = item; - } - - - closeCarPersonPop(){ - this.player.api.customObject.focus(this.currentCarPeople.id,50,2,null,0,()=>{ - this.currentCarPeople = null; - }) - } - - //显示封闭园区右侧列表 - showList(item){ - this.dataListRight = item - this.rightListFlag = true - } - //关闭封闭园区右侧列表 - closeRight(){ - this.rightListFlag = false - this.dataListRight = {} - } - //点击右侧柱状图 - clickBar(item){ - this.resetMap(); - setTimeout(()=>{ - this.player.api.marker.focus(item.id,10,2) - },1000) - - } - - //点击应急告警 - getEmergencyEvent(item){ - this.addEvent(item) - this.showConfirmFlag = false - this.judgmentFlag = false - this.info = item - this.showConfirm() - // this.popFlag = true - // this.info = item - // this.popDrawerChange(true) - - } - changePoint(item){ - this.addEvent(item) - } - get showBackGround(){ - let flag = this.currentNav === 'risk' && !this.riskFlag && !this.riskDetailFlag - return flag?'none':'' - } - showGoodsList(item){ - this.storeGoodsFlag = true - } - focusGood(item){ - // console.log(item) - this.player.api.customObject.focus(item.id) - } - getCompany(item){ - console.log(item) - this.openCompany(item) } }