警员警车鼠标移入提示框

guanqb

2023-03-02 b520e8aaaff455b96c63e7f903dc17b9cbaacf92

警员警车鼠标移入提示框

 src/components/map/components/activityPolicePopup.vue

@@ -14,9 +14,28 @@
            <div style="transform: translate(-50%, 0);">
                <!-- 样式自己修改 -->
                <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
                    5464564556555
                    <br>
                    5566556565656
                    <div class="data-box" v-if="activityPolicePopupData.label !='none'">
                          <div class="line">
                            <div class="name">警车编号：</div>
                            <div class="value">{{ activityPolicePopupData.label }}</div>
                          </div>
                          <div class="line">
                            <div class="name">警车型号：</div>
                            <div class="value"> {{ activityPolicePopupData.carType }}</div>
                          </div>
                    </div>
                  
                    <div class="data-box" v-if="activityPolicePopupData.policeStationName !='none'">
                          <div class="line">
                            <div class="name">所属派出所：</div>
                            <div class="value">{{ activityPolicePopupData.policeStationName }}</div>
                          </div>
                          <div class="line">
                            <div class="name">警员姓名：</div>
                            <div class="value"> {{ activityPolicePopupData.policeData.name}}</div>
                          </div>
                    </div>
                   
                </div>
            </div>
        </div>
@@ -39,7 +58,8 @@

    computed: {
        ...mapGetters([
            'activityPolicePopup'
            'activityPolicePopup',
            'activityPolicePopupData'
        ])
    },

@@ -72,10 +92,24 @@
    }

    .content {
        width: 320px;
        height: 480px;
        width: 200px;
        height: 60px;
        background: $bg-color;
        border-radius: 10px;
        border-radius: 4px;
        color: #fff;

        .data-box{
            padding: 10px;
            .line {
                display: flex;
                justify-self: start;
            .name{
                width: 90px;
                text-align: justify;
            }
        }
    }
        }
        
}
</style>

 src/store/getters.js

@@ -2,5 +2,6 @@
    detailsPopup: (state) => state.popupParams.detailsPopup,
    dataPopup: (state) => state.popupParams.dataPopup,
    activityPolicePopup: (state) => state.popupParams.activityPolicePopup,
    activityPolicePopupData: (state) => state.popupParams.activityPolicePopupData,
}
export default getters

 src/store/modules/popupParams.js

@@ -7,7 +7,8 @@
        },
        dataPopup: {},

        activityPolicePopup: false
        activityPolicePopup: false,
        activityPolicePopupData: {}
    },
    mutations: {
        SET_DETAILSPOPUP (state, detailsPopup) {
@@ -19,6 +20,10 @@

        SET_ACTIVITYPOLICEPOPUP (state, activityPolicePopup) {
            state.activityPolicePopup = activityPolicePopup
        },

        SET_ACTIVITYPOLICEPOPUPDATA (state, activityPolicePopupData) {
            state.activityPolicePopupData = activityPolicePopupData
        }
    },
    actions: {

 src/views/activity/index.vue

@@ -954,7 +954,7 @@
                        })

                    } else if (item.type == 3 && pointShow) {
                        let positionObj = this.convertBillboardPositionDate(item.position, 'policeman', item.id, item.policemanId, item.deptId, item.color)
                        let positionObj = this.convertBillboardPositionDate(item, 'policeman')
                        let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat))
                        let point = new global.DC.Point(position)
                        let color = ''
@@ -966,6 +966,7 @@
                            let b = parseInt(item.color.slice(5, 7), 16)
                            color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                        }
                        point.attrParams = positionObj
                        pointCircleCarLayer.addOverlay(point)
                        point.setStyle({
                            "color": color, //颜色
@@ -973,11 +974,16 @@
                            "outlineWidth": 0, //边框大小，
                            "pixelSize": 32,
                        })
                        point.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
                        point.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver)
                        point.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut)
                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'newDrawLayers',
                            type: 'billboard',
                            params: positionObj,
                            incident: this.overlayTypeClick
                            incident: this.overlayTypeClick,
                            mouseOverIncident: this.pointMouseOver,
                            mouseOutIncident: this.pointMouseOut
                        })
                    }
                })
@@ -1088,7 +1094,7 @@
                            },
                        })
                    } else if (item.type == 3 && pointShow) {
                        let positionObj = this.convertBillboardPositionDate(item.position, 'policecar', item.id, item.carId, item.deptId, item.color)
                        let positionObj = this.convertBillboardPositionDate(item, 'policecar')
                        let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat))
                        let point = new global.DC.Point(position)
                        let color = ''
@@ -1100,6 +1106,7 @@
                            let b = parseInt(item.color.slice(5, 7), 16)
                            color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                        }
                        point.attrParams = positionObj
                        pointCircleManLayer.addOverlay(point)
                        point.setStyle({
                            "color": color, //颜色
@@ -1107,7 +1114,9 @@
                            "outlineWidth": 0, //边框大小，
                            "pixelSize": 32,
                        })

                        point.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
                        point.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver)
                        point.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut)
                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'newCarDrawLayers',
                            type: 'billboard',
@@ -1168,7 +1177,7 @@
        getCarList () {
            getCarList().then(res => {
                res.data.data.forEach(item => {
                    this.policecarOption.push({ value: `${item.id}`, label: `${item.serialNumber}` })
                    this.policecarOption.push({ value: `${item.id}`, label: `${item.serialNumber}` , carType: `${item.carType}` })
                })
            })
        },
@@ -1222,7 +1231,7 @@
        // 添加活动图标
        addActivityPoint () {
            this.activityList.forEach(item => {
                let positionObj = this.convertBillboardPositionDate(item.position, 'activity')
                let positionObj = this.convertBillboardPositionDate(item, 'activity')
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'activityLayers',
                    type: "billboard",
@@ -1252,17 +1261,17 @@
        },

        // 转换 点 坐标数据
        convertBillboardPositionDate (data, iconName, plotId, policeId, deptId, color) {
            let positionStr = data
            positionStr = data.slice(6, positionStr.length - 1)
        convertBillboardPositionDate (data, iconName) {
            let positionStr = data.position
            positionStr = data.position.slice(6, positionStr.length - 1)
            let positionArr = positionStr.split(" ")
            let positionObj = {}
            if (iconName == 'activity') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/activity.png' }
            } else if (iconName == 'policeman') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/man3.png', id: plotId, policemanId: policeId, deptId: deptId, color: color }
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/man3.png', data:data}
            } else if (iconName == 'policecar') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/car3.png', id: plotId, carId: policeId, deptId: deptId, color: color }
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/car3.png', data:data}
            }
            return positionObj
        },
@@ -1405,7 +1414,7 @@
                analyseLayer.clear()
            }

            let positionObj = this.convertBillboardPositionDate(item.position, 'activity')
            let positionObj = this.convertBillboardPositionDate(item, 'activity')

            let point = new global.DC.Point(`${positionObj.lng}, ${positionObj.lat}`)
            analyseLayer.addOverlay(point)
@@ -1782,19 +1791,19 @@
            } else {
                this.isChoosePoliceElementDisabled = true
            }
            if ('policemanId' in e.overlay.attrParams) {
                this.policeIconId = e.overlay.attrParams.id
                this.policeType = e.overlay.attrParams.policemanId
                this.choosePoliceColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000'
                let choosePoliceName = this.platFn(this.policeTreeData).find(item => item.id == e.overlay.attrParams.policemanId).name
            if ('policemanId' in e.overlay.attrParams.data) {
                this.policeIconId = e.overlay.attrParams.data.id
                this.policeType = e.overlay.attrParams.data.policemanId
                this.choosePoliceColor = e.overlay.attrParams.data.color != '' ? e.overlay.attrParams.data.color : '#FF0000'
                let choosePoliceName = this.platFn(this.policeTreeData).find(item => item.id == e.overlay.attrParams.data.policemanId).name
                this.searchPoliceTreeName = choosePoliceName
                this.policeIconIsCreated = true
                this.policeChooseVisible = true
            } else if ('carId' in e.overlay.attrParams) {
            } else if ('carId' in e.overlay.attrParams.data) {
                this.policeOption = this.policecarOption
                this.policeIconId = e.overlay.attrParams.id
                this.policeType = e.overlay.attrParams.carId
                this.chooseCarColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000'
                this.policeIconId = e.overlay.attrParams.data.id
                this.policeType = e.overlay.attrParams.data.carId
                this.chooseCarColor = e.overlay.attrParams.data.color != '' ? e.overlay.attrParams.data.color : '#FF0000'
                this.policeIconIsCreated = true
                this.policeChooseCarVisible = true
            }
@@ -2485,6 +2494,19 @@
        // 鼠标移入图标事件
        pointMouseOver (e) {
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', true)
            let hoverData = {}
            if('carId' in e.overlay.attrParams.data){
                hoverData = this.policecarOption.filter(item=>item.value == e.overlay.attrParams.data.carId)[0]
                hoverData.policeData={'name': 'none'}
                hoverData.policeStationName = 'none'
            }else{
                let policeArr = this.filterTree (this.policeTreeData)
                hoverData.policeData = policeArr.filter(item=>item.id == e.overlay.attrParams.data.policemanId)[0]
                hoverData.policeStationName = policeArr.filter(item=>item.id == policeArr.filter(item=>item.id == e.overlay.attrParams.data.policemanId)[0].parentId)[0].name
                hoverData.carType = 'none'
                hoverData.label = 'none'
            }
            this.$store.commit('SET_ACTIVITYPOLICEPOPUPDATA', hoverData)

            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'ActivityPoliceDomBox',
@@ -2506,8 +2528,19 @@
         * @return {*}
         */
        pointMouseOut (e) {
            console.log(6666333)
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
        },

        // 树形数据传数组
        filterTree (tree, arr = []) {
          if (!tree.length) return []
          arr.push(...tree)
          for(let item of tree){
            if(item.children && item.children.length){
               this.filterTree(item.children,arr)
            }
          }
          return arr
        }

    },
@@ -2523,6 +2556,18 @@
        searchPoliceTreeName (val) {
            this.$refs.policeTree.filter(val)
        },

        policeChooseVisible(val) {
            if(val){
                this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
            }
        },

        policeChooseCarVisible(val){
            if(val){
                this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
            }
        }
    },

    destroyed () {