视频监控名称显示

shuishen

2023-03-07 a9b26f966369edd5d5746c40673827b5603466b0

视频监控名称显示

 src/components/map/components/activityPolicePopup.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-02 09:39:32
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-02 10:16:14
 * @LastEditTime: 2023-03-07 11:02:54
 * @FilePath: \srs-police-affairs\src\components\map\components\activityPolicePopup.vue
 * @Description: 
 * 
@@ -14,28 +14,28 @@
            <div style="transform: translate(-50%, 0);">
                <!-- 样式自己修改 -->
                <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
                    <div class="data-box" v-if="activityPolicePopupData.label !='none'">
                          <div class="line">
                    <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>
                        <div class="line">
                            <div class="name">警车型号：</div>
                            <div class="value"> {{ activityPolicePopupData.carType }}</div>
                          </div>
                        </div>
                    </div>
                  
                    <div class="data-box" v-if="activityPolicePopupData.policeStationName !='none'">
                          <div class="line">

                    <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>
                        <div class="line">
                            <div class="name">警员姓名：</div>
                            <div class="value"> {{ activityPolicePopupData.policeData.name}}</div>
                          </div>
                            <div class="value"> {{ activityPolicePopupData.policeData.name }}</div>
                        </div>
                    </div>
                   

                </div>
            </div>
        </div>
@@ -98,18 +98,20 @@
        border-radius: 4px;
        color: #fff;

        .data-box{
        .data-box {
            padding: 10px;

            .line {
                display: flex;
                justify-self: start;
            .name{
                width: 90px;
                text-align: justify;

                .name {
                    width: 90px;
                    text-align: justify;
                }
            }
        }
    }
        }
        

}
</style>

 src/components/map/components/videoListPopup.vue

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

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'VideoListPopup',

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

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

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

    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 {
        padding: 0.5vh;
        width: 220px;
        background: $bg-color;
        border-radius: 4px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;


    }

}
</style>

 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-03-07 10:47:48
 * @LastEditTime: 2023-03-07 10:56:33
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -61,6 +61,8 @@
        <map-popup></map-popup>

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

        <video-list-popup></video-list-popup>

        <assemble-box></assemble-box>
    </div>
@@ -181,13 +183,14 @@

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



export default {
    name: 'mapBox',

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

    data () {
        return {

 src/store/getters.js

@@ -3,5 +3,7 @@
    dataPopup: (state) => state.popupParams.dataPopup,
    activityPolicePopup: (state) => state.popupParams.activityPolicePopup,
    activityPolicePopupData: (state) => state.popupParams.activityPolicePopupData,
    videoListPopup: (state) => state.popupParams.videoListPopup,
    videoListPopupData: (state) => state.popupParams.videoListPopupData,
}
export default getters

 src/store/modules/popupParams.js

@@ -1,3 +1,13 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-02 16:36:47
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-07 10:54:45
 * @FilePath: \srs-police-affairs\src\store\modules\popupParams.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
const popupParams = {
    state: {
        detailsPopup: {
@@ -8,7 +18,10 @@
        dataPopup: {},

        activityPolicePopup: false,
        activityPolicePopupData: {}
        activityPolicePopupData: {},

        videoListPopup: false,
        videoListPopupData: {}
    },
    mutations: {
        SET_DETAILSPOPUP (state, detailsPopup) {
@@ -24,7 +37,16 @@

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

        SET_VIDEOLISTPOPUP (state, videoListPopup) {
            state.videoListPopup = videoListPopup
        },

        SET_VIDEOLISTPOPUPDATA (state, videoListPopupData) {
            state.videoListPopupData = videoListPopupData
        },

    },
    actions: {


 src/views/video/list.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-06 10:29:22
 * @LastEditTime: 2023-03-07 11:02:17
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @Description: 辖区管理
 * 
@@ -699,7 +699,9 @@
                                url: '/img/icon/video.png',
                                channelId: item.channelId
                            },
                            incident: this.siteClick
                            incident: this.siteClick,
                            mouseOverIncident: this.pointMouseOver,
                            mouseOutIncident: this.pointMouseOut
                        })
                    }
                })
@@ -707,6 +709,37 @@
            })

        },

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

            this.$store.commit('SET_VIDEOLISTPOPUPDATA', {
                ...e.overlay.attrParams
            })

            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'videoListPopup',
                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) {
            this.$store.commit('SET_VIDEOLISTPOPUP', false)
        },
    },

    destroyed () {