弹窗添加

shuishen

2023-03-02 f55985cfda9a9d731d65e1a7f8f41c4def8c6e51

弹窗添加

 src/components/map/components/activityPolicePopup.vue

New file
@@ -0,0 +1,81 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-02 09:39:32
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-02 10:16:14
 * @FilePath: \srs-police-affairs\src\components\map\components\activityPolicePopup.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div>
        <div v-if="activityPolicePopup" class="popup-dom" id="ActivityPoliceDomBox">
            <div style="transform: translate(-50%, 0);">
                <!-- 样式自己修改 -->
                <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
                    5464564556555
                    <br>
                    5566556565656
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'activityPolicePopup',

    inject: ["getWidth", 'userInfo'],

    data () {
        return {
            scaleDomFlag: false
        }
    },

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

    mounted () {

        if (this.getWidth() > 7000) {
            this.scaleDomFlag = true
        } else {
            this.scaleDomFlag = false
        }

    },

    methods: {

    }
}
</script>

<style lang="scss" scoped>
.popup-dom {
    position: fixed;
    top: -16px;
    left: 0;
    z-index: 1 !important;

    .scale-dom {
        transform: scale(3);
        transform-origin: left;
    }

    .content {
        width: 320px;
        height: 480px;
        background: $bg-color;
        border-radius: 10px;
    }
}
</style>

 src/components/map/components/policePopup.vue

File was deleted

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-28 14:16:16
 * @LastEditTime: 2023-03-02 10:05:29
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -59,6 +59,8 @@
        </div>

        <map-popup></map-popup>

        <activity-police-popup></activity-police-popup>

        <assemble-box></assemble-box>
    </div>
@@ -162,11 +164,14 @@
]

import mapPopup from './components/mapPopup.vue'
import activityPolicePopup from './components/activityPolicePopup.vue'



export default {
    name: 'mapBox',

    components: { mapPopup },
    components: { mapPopup, activityPolicePopup },

    data () {
        return {
@@ -435,7 +440,7 @@

        this.$EventBus.$on('layerPointAdd', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.layerPointAdd(params.layerName, params.type, params.layerType, params.params, params.distanceDisplayCondition, params.incident,params.mouseOverIcident)
            that.layerPointAdd(params.layerName, params.type, params.layerType, params.params, params.distanceDisplayCondition, params.incident, params.mouseOverIncident, params.mouseOutIncident)
        })

        this.$EventBus.$on('layerPolygonAdd', (params) => {
@@ -715,7 +720,7 @@
        layerPointAdd (layerName, type, layerType = 'VectorLayer', params, distanceDisplayCondition = {
            near: 0, //最近距离
            far: Number.MAX_VALUE //最远距离
        }, incident = (e) => { },mouseOverIcident = (e) => { }) {
        }, incident = (e) => { }, mouseOverIncident = (e) => { }, mouseOutIncident = (e) => { }) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, layerType)
            }
@@ -729,7 +734,8 @@
                pointElement.attrParams = params
                layersObjcect[layerName].addOverlay(pointElement)
                pointElement.on(global.DC.MouseEventType.CLICK, incident)
                pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIcident)
                pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident)
                pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident)
            } else if (type == "label") {
                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
                labelElement.setStyle({

 src/store/getters.js

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

 src/store/modules/popupParams.js

@@ -5,7 +5,9 @@
            showBtn: true,
            openMenu: ''
        },
        dataPopup: {}
        dataPopup: {},

        activityPolicePopup: false
    },
    mutations: {
        SET_DETAILSPOPUP (state, detailsPopup) {
@@ -13,6 +15,10 @@
        },
        SET_DATAPOPUP (state, dataPopup) {
            state.dataPopup = dataPopup
        },

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

 src/views/activity/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-01 15:31:43
 * @LastEditTime: 2023-03-02 10:06:06
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 *
@@ -22,11 +22,11 @@
                            v-model="activityType"
                            placeholder="请选择"
                            @change="activityTypeChange"
                                                                                                                                                                                                                                                                                                                                                                        >
                                                                                                                                                                                                                                                                                                                                                                            <el-option
                                                                                                                                                                                                                                                                                                                                                                                v-for="item in activityOptions"
                                                                                                                                                                                                                                                                                                                                                                                :key="item.dictKey"
                                                                                                                                                                                                                                                                                                                                                                                :label="item.dictValue"
                                                                                                                                                                                                                                                                                                                                                                                            >
                                                                                                                                                                                                                                                                                                                                                                                                <el-option
                                                                                                                                                                                                                                                                                                                                                                                                    v-for="item in activityOptions"
                                                                                                                                                                                                                                                                                                                                                                                                    :key="item.dictKey"
                                                                                                                                                                                                                                                                                                                                                                                                    :label="item.dictValue"
                                :value="item.dictKey"
                                class="activity-option"
                            ></el-option>
@@ -38,12 +38,12 @@
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <!-- <el-date-picker
                                                                                                                                                                                                                                                                                                                                                                            size="small"
                                                                                                                                                                                                                                                                                                                                                                            v-model="selectTime"
                                                                                                                                                                                                                                                                                                                                                                            type="date"
                                                                                                                                                                                                                                                                                                                                                                            placeholder="选择日期"
                                                                                                                                                                                                                                                                                                                                                                            style="width:268px"
                                                                                                                                                                                                                                                                                                                                                                        ></el-date-picker>-->
                                                                                                                                                                                                                                                                                                                                                                                                size="small"
                                                                                                                                                                                                                                                                                                                                                                                                v-model="selectTime"
                                                                                                                                                                                                                                                                                                                                                                                                type="date"
                                                                                                                                                                                                                                                                                                                                                                                                placeholder="选择日期"
                                                                                                                                                                                                                                                                                                                                                                                                style="width:268px"
                                                                                                                                                                                                                                                                                                                                                                                            ></el-date-picker>-->
                        <el-date-picker v-model="selectTime" type="daterange" align="right" unlink-panels
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
@@ -141,10 +141,10 @@
                    <ul>
                        <li>
                            <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                            title="路线绘制"
                                                                                                                                                                                                                                                                                                                                                                            @click="draw('billboard', 'policeman')"
                                                                                                                                                                                                                                                                                                                                                                            icon="el-icon-my-route"
                                                                                                                                                                                                                                                                                                                                                                            ></el-button>-->
                                                                                                                                                                                                                                                                                                                                                                                                title="路线绘制"
                                                                                                                                                                                                                                                                                                                                                                                                @click="draw('billboard', 'policeman')"
                                                                                                                                                                                                                                                                                                                                                                                                icon="el-icon-my-route"
                                                                                                                                                                                                                                                                                                                                                                                                ></el-button>-->
                            <button @click="draw('polyline', 'policecar')" title="巡逻路线">
                                <img src="../../../public/img/icon/route1.png" style="height:100%" />
                            </button>
@@ -1107,7 +1107,8 @@
                            type: 'billboard',
                            params: positionObj,
                            incident: this.overlayTypeClick,
                            mouseOverIcident: this.pointMouseOver
                            mouseOverIncident: this.pointMouseOver,
                            mouseOutIncident: this.pointMouseOut
                        })

                    }
@@ -2460,10 +2461,32 @@

        // 鼠标移入图标事件
        pointMouseOver (e) {
            console.log(12345)
            console.log(e)
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', true)

            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'ActivityPoliceDomBox',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(e.overlay.attrParams.lng),
                            Number(e.overlay.attrParams.lat),
                            0
                        )
                    )
                ]
            })
        },

        /**
         * @description: 鼠标移出事件
         * @param {*} e
         * @return {*}
         */
        pointMouseOut (e) {
            console.log(6666333)
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
        }

    },

    computed: {