| | |
| | | :policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch" :arrowBtnSwitch="arrowBtnSwitch" |
| | | :policeIconId="policeIconId" :lineWidth="lineWidth" @setPoliceOption="setPoliceOption"></two-draw-btn-box> |
| | | |
| | | <polygon-plot ref="PolygonPlotPage" :showingSecurityId="showingSecurityId"></polygon-plot> |
| | | <polygon-plot ref="PolygonPlotPage" :showingSecurityId="showingSecurityId" |
| | | :activityDeptId="activityDeptId"></polygon-plot> |
| | | |
| | | <polyline-plot ref="PolylinePlotPage" :showingSecurityId="showingSecurityId"></polyline-plot> |
| | | |
| | | |
| | | <police-car-change ref="PoliceCarChange" :policeOption="policeOption" |
| | | :showingSecurityId="showingSecurityId"></police-car-change> |
| | |
| | | import policePersonChange from './policePersonChange.vue' |
| | | import activityDetail from './activityDetail.vue' |
| | | import videoControlBox from './videoControlBox.vue' |
| | | import { getLineSpeed } from '@/utils/turfPolygon' |
| | | |
| | | // 要素的 |
| | | let pointCircleCarLayer = null |
| | |
| | | |
| | | export default { |
| | | inject: ['userInfo'], |
| | | |
| | | props: ['activityDeptId'], |
| | | |
| | | data () { |
| | | return { |
| | |
| | | arrowsListLayer.addOverlay(overlay) |
| | | }, |
| | | |
| | | removeArrowsListLayer (overlay) { |
| | | arrowsListLayer.removeOverlay(overlay) |
| | | }, |
| | | |
| | | addSaveNewDrawLine (positions, altitude) { |
| | | this.$refs.PolylinePlotPage.addPopupShow(positions, altitude) |
| | | }, |
| | |
| | | |
| | | this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.removeDrawArrow() |
| | | |
| | | this.$parent.showingSecurityId = '' |
| | | |
| | | this.$EventBus.$emit('mapRemoveLayer', { |
| | | layerName: 'activityCameraLayers', |
| | |
| | | this.arrowBtnSwitch = false |
| | | this.polylineBtnSwitch = false |
| | | this.$refs.VIDEOCONTROLBOX && this.$refs.VIDEOCONTROLBOX.closeVideo() |
| | | this.$parent.showingSecurityId = '' |
| | | this.$parent.currentTreeItem = '' |
| | | this.$parent.activeActivityIndex = '' |
| | | |
| | | this.clearOrRemoveLayerAll('clear') |
| | | this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.stopDraw() |
| | | }, |
| | | |
| | | closeCurrentItem () { |
| | | this.$parent.cleartAllTimer() |
| | | |
| | | this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.removeDrawArrow() |
| | | |
| | | this.$EventBus.$emit('mapRemoveLayer', { |
| | | layerName: 'activityCameraLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | |
| | | // 警车 |
| | | this.$EventBus.$emit('mapRemoveLayer', { |
| | | layerName: 'activityCarLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | |
| | | // 手台-公网 |
| | | this.$EventBus.$emit('mapRemoveLayer', { |
| | | layerName: 'activityTalkBackEquipmentPublicLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | |
| | | // 手台-专网 |
| | | this.$EventBus.$emit('mapRemoveLayer', { |
| | | layerName: 'activityTalkBackEquipmentLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | |
| | | // 执法记录仪 |
| | | this.$EventBus.$emit('mapRemoveLayer', { |
| | | layerName: 'activityPoliceCameraLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | |
| | | this.dialogVisible = false |
| | | this.policeSwitch = false |
| | | this.arrowBtnSwitch = false |
| | | this.polylineBtnSwitch = false |
| | | this.$refs.VIDEOCONTROLBOX && this.$refs.VIDEOCONTROLBOX.closeVideo() |
| | | |
| | | this.clearOrRemoveLayerAll('clear') |
| | | this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.stopDraw() |
| | |
| | | }, |
| | | |
| | | reloadAll (params) { |
| | | this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false) |
| | | |
| | | this.currentPlotType = params.item.plotType |
| | | |
| | | this.closeActivityDetails() |
| | | this.closeCurrentItem() |
| | | |
| | | // 当前选中的ID |
| | | this.showingSecurityId = params.item.id |
| | | // 当前选中的详情 |
| | | this.activityDetails = params.item |
| | | |
| | | // 测试安保活动报错 |
| | | this.dialogVisible = true |
| | | |
| | | if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == params.item.deptId) { |
| | |
| | | this.arrowBtnSwitch = true |
| | | this.polylineBtnSwitch = true |
| | | |
| | | // 加载当前活动区域 |
| | | if (params.item.activityArea && params.item.activityArea.length > 0) { |
| | | let polyGonData = params.item.activityArea.slice(11, params.item.activityArea.length - 1) |
| | | polyGonData = polyGonData.replace(/,/g, ";") |
| | | polyGonData = polyGonData.replace(/ /g, ",") |
| | | let newPolyData = polyGonData.split(';').map(item => { |
| | | let lngOrlat = item.split(',') |
| | | lngOrlat.push(140) |
| | | |
| | | lngOrlat = lngOrlat.join(',') |
| | | |
| | | return lngOrlat |
| | | }).join(';') |
| | | |
| | | this.$EventBus.$emit('layerWallAdd', { |
| | | layerName: 'polygonWallLayer', |
| | | positions: newPolyData |
| | | }) |
| | | } |
| | | |
| | | this.getPolicemanTree({ deptId: params.deptId }) |
| | | this.getCarList({ deptId: params.deptId }) |
| | | |
| | | this.getSecurityPlotList(params.id) |
| | | this.getSecurityPoliceList(params.id) |
| | | this.getSecurityCarList(params.id) |
| | | |
| | | }, |
| | | |
| | | // 获取树状警员列表 |
| | |
| | | |
| | | // 获取标绘箭头列表 |
| | | getSecurityPlotList (securityId) { |
| | | |
| | | getSecurityPlotList(securityId).then(res => { |
| | | // 要素资源 |
| | | this.$parent.normalPeopleList = res.data.data.filter(item => item.type == 6) |
| | |
| | | this.initLayersCoverage('Polygon', color, item, position, altitude) |
| | | continue |
| | | } else if (item.type == 6 || item.type == 7 || item.type == 8 || item.type == 11) { |
| | | let iconImgName = item.type == 6 ? 'ptqz' : item.type == 7 ? 'bhdx' : 'wxrw' |
| | | let icon = '' |
| | | |
| | | if (item.type == 11) { |
| | | icon = item.iconUrl |
| | | } else { |
| | | icon = `/img/icon/${iconImgName}.png` |
| | | icon = `/img/icon/rest.png` |
| | | } |
| | | |
| | | const height = item.altitude.split(',') |
| | |
| | | let a = Math.floor(Number(color.split(',')[1]) * 2.55) ? Math.floor(Number(color.split(',')[1]) * 2.55) : 255 |
| | | curColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a) |
| | | outColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255) |
| | | |
| | | } |
| | | |
| | | return { curColor, outColor } |
| | | }, |
| | | |
| | | initLayersCoverage (type, color, params, position, altitude) { |
| | | if (altitude && altitude.length) position = position.split(';').map((item, index) => `${item},${altitude[index]}`).join(';') |
| | | let coverage = new global.DC[type](position) |
| | | let positions = position |
| | | if (altitude && altitude.length) { |
| | | positions = position.split(';').map((item, index) => `${item},${altitude[index]}`).join(';') |
| | | } else { |
| | | positions = position |
| | | } |
| | | |
| | | let coverage = new global.DC[type](positions) |
| | | if (type == 'Polygon') { |
| | | coverage.setStyle({ |
| | | material: color.curColor, |
| | | extrudedHeight: null, |
| | | perPositionHeight: this.currentPlotType == 3 ? true : false, |
| | | closeTop: false, |
| | | closeBottom: false, |
| | | // classificationType: global.DC.Namespace.Cesium.ClassificationType.TERRAIN |
| | | outline: true, |
| | | outlineColor: color.outColor, |
| | | outlineWidth: 4.0, |
| | | }) |
| | | if (params.areaType == 1) { |
| | | coverage.setStyle({ |
| | | material: color.curColor, |
| | | extrudedHeight: null, |
| | | perPositionHeight: this.currentPlotType == 3 ? true : false, |
| | | closeTop: false, |
| | | closeBottom: false, |
| | | // classificationType: global.DC.Namespace.Cesium.ClassificationType.TERRAIN |
| | | outline: true, |
| | | outlineColor: color.outColor, |
| | | outlineWidth: 4.0, |
| | | }) |
| | | } else { |
| | | let maxHeight = Math.max(...altitude) + 5 |
| | | |
| | | positions = position.split(';').map((item, index) => `${item},${maxHeight}`) |
| | | positions.push(positions[0]) |
| | | positions = positions.join(';') |
| | | coverage = new global.DC.Wall(positions) |
| | | |
| | | let multiple, speed |
| | | if (params.iconUrl.indexOf('1') != -1) { |
| | | multiple = 250 |
| | | speed = 3 |
| | | } else if (params.iconUrl.indexOf('2') != -1) { |
| | | multiple = 195 |
| | | speed = 3 |
| | | } else { |
| | | multiple = 50 |
| | | speed = 10 |
| | | } |
| | | |
| | | if (params.areaType == 2) { |
| | | coverage.setStyle({ |
| | | material: new global.DC.WallImageTrailMaterialProperty({ |
| | | image: params.iconUrl, |
| | | color: color.curColor, |
| | | repeat: { |
| | | x: getLineSpeed(position.split(';').map(item => { |
| | | item.split(',') |
| | | |
| | | return [Number(item.split(',')[0]), Number(item.split(',')[1])] |
| | | }), multiple), y: 1 |
| | | }, |
| | | speed: speed |
| | | }) |
| | | }) |
| | | } else { |
| | | coverage.setStyle({ |
| | | material: new global.DC.WallTrailMaterialProperty({ |
| | | color: color.curColor, |
| | | speed: 10 |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | } |
| | | |
| | | coverage.customType = 'polygon' |
| | | } else if (type == 'Polyline') { |
| | |
| | | } |
| | | coverage.attrParams = { id: params.id, color: params.color, item: params } |
| | | coverage.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick) |
| | | |
| | | coverage.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver) |
| | | coverage.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut) |
| | | arrowsListLayer.addOverlay(coverage) |
| | | |
| | | return coverage |
| | | }, |
| | | |
| | |
| | | this.addMapCarAndPersonLayers( |
| | | res.data.data.filter(item => item.type == 3), |
| | | 'policeman', |
| | | pointCircleCarLayer, |
| | | 'newFactorResourcesLayers') |
| | | pointCircleCarLayer |
| | | ) |
| | | }) |
| | | }, |
| | | |
| | |
| | | this.addMapCarAndPersonLayers( |
| | | res.data.data.filter(item => item.type == 3), |
| | | 'policecar', |
| | | pointCircleCarLayer, |
| | | 'newFactorResourcesLayers') |
| | | pointCircleCarLayer) |
| | | this.addMapLineLayers(res.data.data.filter(item => item.type == 1)) |
| | | }) |
| | | }, |
| | |
| | | // 鼠标移入图标事件 |
| | | pointMouseOver (e) { |
| | | this.$store.commit('SET_ACTIVITYPOLICEPOPUP', true) |
| | | let hoverData = {} |
| | | let hoverData = { |
| | | } |
| | | |
| | | hoverData.billboard = false |
| | | |
| | | if (e.overlay.attrParams.item.type == 6 || e.overlay.attrParams.item.type == 7 || e.overlay.attrParams.item.type == 8 || e.overlay.attrParams.item.type == 11) { |
| | | if ( |
| | | e.overlay.attrParams.item && e.overlay.attrParams.item.type && |
| | | ( |
| | | e.overlay.attrParams.item.type == 1 || |
| | | e.overlay.attrParams.item.type == 2 || |
| | | e.overlay.attrParams.item.type == 3 || |
| | | e.overlay.attrParams.item.type == 4 || |
| | | e.overlay.attrParams.item.type == 5 || |
| | | e.overlay.attrParams.item.type == 6 || |
| | | e.overlay.attrParams.item.type == 7 || |
| | | e.overlay.attrParams.item.type == 8 || |
| | | e.overlay.attrParams.item.type == 10 || |
| | | e.overlay.attrParams.item.type == 11)) { |
| | | hoverData.billboard = true |
| | | } else { |
| | | if ('carId' in e.overlay.attrParams.data) { |
| | |
| | | hoverData.carType = 'none' |
| | | hoverData.label = 'none' |
| | | } |
| | | |
| | | hoverData.billboard = false |
| | | } |
| | | |
| | | hoverData.Data = e.overlay.attrParams |
| | | |
| | | console.log(hoverData, 95999) |
| | | |
| | | this.$store.commit('SET_ACTIVITYPOLICEPOPUPDATA', hoverData) |
| | | |
| | |
| | | * @return {*} |
| | | */ |
| | | addMapLineLayers (data) { |
| | | this.$parent.chooseActivityLineList = data |
| | | |
| | | data.forEach(item => { |
| | | let maxHeight = item.altitude.split(',').reduce((pre, cur) => { |
| | | return cur > pre ? cur : pre |
| | |
| | | let lineObj = new global.DC.Polyline(positionNewArr) |
| | | lineObj.customType = 'polyline' |
| | | lineObj.setStyle({ |
| | | material: lineColor, |
| | | material: new global.DC.PolylineArrowMaterialProperty(lineColor), |
| | | clampToGround: this.currentPlotType == 3 ? false : true, |
| | | width: 3 |
| | | width: 10 |
| | | }) |
| | | |
| | | lineLayer.addOverlay(lineObj) |
| | |
| | | layerName: 'newCarDrawLineLayers', |
| | | positions: positionStr, |
| | | material: color, |
| | | params: { ...item, lineObj }, |
| | | incident: this.lineOverlayTypeClick |
| | | params: { ...item, lineObj, item, data: item }, |
| | | incident: this.lineOverlayTypeClick, |
| | | mouseOverIncident: this.pointMouseOver, |
| | | mouseOutIncident: this.pointMouseOut |
| | | }) |
| | | |
| | | }) |
| | | |
| | | this.$parent.chooseActivityLineList = data |
| | | }, |
| | | |
| | | clearOrRemoveLayerAll (type) { |
| | | if (type == 'clear') { |
| | | // 要素的 |
| | | pointCircleCarLayer != null && pointCircleCarLayer.clear() |
| | | this.$EventBus.$emit('mapClearLayer', { |
| | | layerName: 'newFactorResourcesLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | |
| | | // 作战的 |
| | | arrowsListLayer != null && arrowsListLayer.clear() |
| | |
| | | } else { |
| | | // 要素的 |
| | | pointCircleCarLayer != null && pointCircleCarLayer.remove(), pointCircleCarLayer = null |
| | | this.$EventBus.$emit('mapRemoveLayer', { |
| | | layerName: 'newFactorResourcesLayers', |
| | | type: 'VectorLayer' |
| | | }) |
| | | |
| | | // 作战的 |
| | | arrowsListLayer != null && arrowsListLayer.remove(), arrowsListLayer = null |
| | |
| | | // 切换轨警力资源显示 |
| | | switchChange (e) { |
| | | pointCircleCarLayer.show = e |
| | | this.$EventBus.$emit('layerShow', { layerName: 'newFactorResourcesLayers', flag: e }) |
| | | }, |
| | | |
| | | // 切换作战标绘 |