1
guanqb
2024-01-20 f13afcb61276061871b30bce17a7877287df0b67
src/views/activity/components/publicIndex.vue
@@ -14,10 +14,10 @@
            :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>
@@ -50,6 +50,7 @@
import policePersonChange from './policePersonChange.vue'
import activityDetail from './activityDetail.vue'
import videoControlBox from './videoControlBox.vue'
import { getLineSpeed } from '@/utils/turfPolygon'
// 要素的
let pointCircleCarLayer = null
@@ -62,6 +63,8 @@
export default {
    inject: ['userInfo'],
    props: ['activityDeptId'],
    data () {
        return {
@@ -161,6 +164,10 @@
            arrowsListLayer.addOverlay(overlay)
        },
        removeArrowsListLayer (overlay) {
            arrowsListLayer.removeOverlay(overlay)
        },
        addSaveNewDrawLine (positions, altitude) {
            this.$refs.PolylinePlotPage.addPopupShow(positions, altitude)
        },
@@ -180,7 +187,6 @@
            this.$refs.DRAWBTNBOX && this.$refs.DRAWBTNBOX.removeDrawArrow()
            this.$parent.showingSecurityId = ''
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'activityCameraLayers',
@@ -216,8 +222,53 @@
            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()
@@ -248,13 +299,18 @@
        },
        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) {
@@ -267,32 +323,13 @@
            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)
        },
        // 获取树状警员列表
@@ -315,7 +352,6 @@
        // 获取标绘箭头列表
        getSecurityPlotList (securityId) {
            getSecurityPlotList(securityId).then(res => {
                // 要素资源
                this.$parent.normalPeopleList = res.data.data.filter(item => item.type == 6)
@@ -365,13 +401,12 @@
                        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(',')
@@ -409,28 +444,78 @@
                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') {
@@ -452,9 +537,9 @@
            }
            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
        },
@@ -468,8 +553,8 @@
                this.addMapCarAndPersonLayers(
                    res.data.data.filter(item => item.type == 3),
                    'policeman',
                    pointCircleCarLayer,
                    'newFactorResourcesLayers')
                    pointCircleCarLayer
                )
            })
        },
@@ -493,8 +578,7 @@
                this.addMapCarAndPersonLayers(
                    res.data.data.filter(item => item.type == 3),
                    'policecar',
                    pointCircleCarLayer,
                    'newFactorResourcesLayers')
                    pointCircleCarLayer)
                this.addMapLineLayers(res.data.data.filter(item => item.type == 1))
            })
        },
@@ -543,11 +627,22 @@
        // 鼠标移入图标事件
        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) {
@@ -561,11 +656,11 @@
                    hoverData.carType = 'none'
                    hoverData.label = 'none'
                }
                hoverData.billboard = false
            }
            hoverData.Data = e.overlay.attrParams
            console.log(hoverData, 95999)
            this.$store.commit('SET_ACTIVITYPOLICEPOPUPDATA', hoverData)
@@ -598,6 +693,8 @@
         * @return {*}
         */
        addMapLineLayers (data) {
            this.$parent.chooseActivityLineList = data
            data.forEach(item => {
                let maxHeight = item.altitude.split(',').reduce((pre, cur) => {
                    return cur > pre ? cur : pre
@@ -631,9 +728,9 @@
                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)
@@ -642,23 +739,18 @@
                    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()
@@ -678,10 +770,6 @@
            } else {
                // 要素的
                pointCircleCarLayer != null && pointCircleCarLayer.remove(), pointCircleCarLayer = null
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'newFactorResourcesLayers',
                    type: 'VectorLayer'
                })
                // 作战的
                arrowsListLayer != null && arrowsListLayer.remove(), arrowsListLayer = null
@@ -704,7 +792,6 @@
        // 切换轨警力资源显示
        switchChange (e) {
            pointCircleCarLayer.show = e
            this.$EventBus.$emit('layerShow', { layerName: 'newFactorResourcesLayers', flag: e })
        },
        // 切换作战标绘