视频预览相关更改

shuishen

2023-04-04 d2894dc69cd90887084064c2c9bf9e016ee4c9ab

视频预览相关更改

 src/components/map/components/videoRowClickPopup.vue

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

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'VideoRowClickPopup',

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

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

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

    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;

    &>.popup-box {
        position: relative;
    }

    .bottom-arrow {
        position: absolute;
        left: 50%;
        bottom: 0px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: $bg-color;
        transform: translate(-50%, 100%);
    }

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

    .content {
        margin-bottom: 10px;
        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: 2023-04-01 21:45:20
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-04 10:14:02
 * @LastEditTime: 2023-04-04 10:49:27
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 
 * 
@@ -94,6 +94,8 @@
        <y-tool-tip></y-tool-tip>

        <assemble-box></assemble-box>

        <video-row-click-popup></video-row-click-popup>
    </div>
</template>

@@ -161,6 +163,7 @@
import mapPopup from './components/mapPopup.vue'
import activityPolicePopup from './components/activityPolicePopup.vue'
import videoListPopup from './components/videoListPopup.vue'
import videoRowClickPopup from './components/videoRowClickPopup.vue'
import mapSearchPopup from './components/mapSearchPopup.vue'
import houseDeepDataPopup from './components/houseDeepDataPopup.vue'
import yToolTip from './components/yToolTip.vue'
@@ -169,7 +172,7 @@
export default {
    name: 'mapBox',

    components: { mapPopup, activityPolicePopup, videoListPopup, mapSearchPopup, houseDeepDataPopup, yToolTip },
    components: { mapPopup, activityPolicePopup, videoListPopup, mapSearchPopup, houseDeepDataPopup, yToolTip, videoRowClickPopup },

    data () {
        return {
@@ -748,7 +751,7 @@
                if (!layersObjcect[layerName]) layersObjcect[layerName] = null

                layersObjcect[layerName] = new global.DC.ClusterLayer(layerName, {
                    pixelRange: 4
                    pixelRange: 40
                })

                layersObjcect[layerName].addTo(global.viewer)

 src/store/getters.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-02 16:36:47
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-31 17:06:21
 * @LastEditTime: 2023-04-04 10:54:12
 * @FilePath: \srs-police-affairs\src\store\getters.js
 * @Description: 
 * 
@@ -19,7 +19,8 @@
    mapSearchPopupData: (state) => state.popupParams.mapSearchPopupData,
    houseDeepDataPopup: (state) => state.popupParams.houseDeepDataPopup,
    houseDeepDataPopupData: (state) => state.popupParams.houseDeepDataPopupData,

    videoRowClickPopup: (state) => state.popupParams.videoRowClickPopup,
    videoRowClickPopupData: (state) => state.popupParams.videoRowClickPopupData,
}

export default getters

 src/store/modules/popupParams.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-02 16:36:47
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-31 17:05:49
 * @LastEditTime: 2023-04-04 10:59:12
 * @FilePath: \srs-police-affairs\src\store\modules\popupParams.js
 * @Description: 
 * 
@@ -24,8 +24,12 @@
        videoListPopupData: {},

        mapSearchPopup: false,
        houseDeepDataPopup: false,
        mapSearchPopupData: {},

        videoRowClickPopup: false,
        videoRowClickPopupData: {},

        houseDeepDataPopup: false,
        houseDeepDataPopupData: {}
    },

@@ -60,7 +64,6 @@

        SET_MAPSEARCHPOPUPDATA (state, mapSearchPopupData) {
            state.mapSearchPopupData = mapSearchPopupData

        },

        SET_HOUSEDEEPDATAPOPUP (state, houseDeepDataPopup) {
@@ -69,8 +72,16 @@

        SET_HOUSEDEEPDATAPOPUPDATA (state, houseDeepDataPopupData) {
            state.houseDeepDataPopupData = houseDeepDataPopupData
        }
        },


        SET_VIDEOROWCLICKPOPUP (state, videoRowClickPopup) {
            state.videoRowClickPopup = videoRowClickPopup
        },

        SET_VIDEOROWCLICKPOPUPDATA (state, videoRowClickPopupData) {
            state.videoRowClickPopupData = videoRowClickPopupData
        }
    },

    actions: {

 src/views/police/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-04-03 15:52:39
 * @LastEditTime: 2023-04-04 10:40:44
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -50,7 +50,7 @@
                                <template slot-scope="scope">
                                    <el-button :disabled="whetherPosition(scope.row)" @click="rowClick(scope.row)"
                                        type="text" size="small" title="定位">
                                        <i class="el-icon-location"></i>
                                        <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                                    </el-button>
                                    <el-button v-show="navType == 0 || navType == 2" @click="equipmentTrack(scope.row)"
                                        type="text" size="small" title="轨迹">
@@ -224,6 +224,16 @@
            return (row) => {
                return !(row.latitude && row.latitude != 0 && row.longitude && row.longitude != 0)
            }
        },

        positionColor () {
            return (row) => {
                if (row.latitude && row.latitude != 0 && row.longitude && row.longitude != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        }
    },


 src/views/policeInfor/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-04-03 17:40:35
 * @LastEditTime: 2023-04-04 10:32:00
 * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
 * @Description: 辖区管理
 * 
@@ -42,7 +42,7 @@
                        <template slot-scope="scope">
                            <el-button :disabled="whetherPosition(scope.row)" @click="clickData(scope.row)" type="text"
                                size="small" title="定位">
                                <i class="el-icon-location"></i>
                                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                            </el-button>
                            <el-button @click="siteClick(scope.row)" type="text" size="small" title="详情">
                                <i class="el-icon-document"></i>
@@ -70,7 +70,7 @@
                        <template slot-scope="scope">
                            <el-button :disabled="whetherPosition(scope.row)" @click="clickData(scope.row)" type="text"
                                size="small" title="定位">
                                <i class="el-icon-location"></i>
                                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                            </el-button>
                            <el-buttonalign-justify @click="siteClick(scope.row)" type="text" size="small" title="详情">
                                <i class="el-icon-document"></i>
@@ -283,6 +283,16 @@
            return (row) => {
                return !(row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0)
            }
        },

        positionColor () {
            return (row) => {
                if (row.ZDDWXZB && row.ZDDWXZB != 0 && row.ZDDWYZB && row.ZDDWYZB != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        }
    },

@@ -354,110 +364,114 @@
            this.realPoliceInforData = []
            this.realEmptyText = ""

            getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => {
            // getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => {

                if (res.data && res.data.length) {
                    this.realPoliceInforData = res.data.map((item, index) => {
                        const bjlxText = BjlxData.filter(i => item.BJLX == i.BJLX)[0].VALUE || ''
            //     if (res.data && res.data.length) {
            //         this.realPoliceInforData = res.data.map((item, index) => {
            //             const bjlxText = BjlxData.filter(i => item.BJLX == i.BJLX)[0].VALUE || ''

                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, BJLX: bjlxText }
                    })
                } else {
                    this.realPoliceInforData = []
                    this.realEmptyText = "暂无实时警情信息"
                }
            //             return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, BJLX: bjlxText }
            //         })
            //     } else {
            //         this.realPoliceInforData = []
            //         this.realEmptyText = "暂无实时警情信息"
            //     }

                this.addPoliceInforSiteLayer(this.realPoliceInforData)
                setTimeout(() => {
                    loading && loading.close()
                }, 500)
            })

            // this.realPoliceInforData = [{
            //     ZDDWXZB: 117.97,
            //     ZDDWYZB: 28.45,
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // }]

            // this.realPoliceInforData = this.realPoliceInforData.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            //     this.addPoliceInforSiteLayer(this.realPoliceInforData)
            //     setTimeout(() => {
            //         loading && loading.close()
            //     }, 500)
            // })

            // this.addPoliceInforSiteLayer(this.realPoliceInforData)
            this.realPoliceInforData = [{
                ZDDWXZB: 117.97,
                ZDDWYZB: 28.45,
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            }]

            this.realPoliceInforData = this.realPoliceInforData.map((item, index) => {
                return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            })

            this.addPoliceInforSiteLayer(this.realPoliceInforData)

            setTimeout(() => {
                loading && loading.close()
            }, 500)
        },

        // 获取历史接警记录

 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-04-02 10:33:36
 * @LastEditTime: 2023-04-04 11:02:46
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @Description: 辖区管理
 * 
@@ -31,7 +31,7 @@
            <div class="down-tree">
                <el-scrollbar>
                    <el-tree v-show="searchLazyFlag" :props="props" :load="loadNode" lazy node-key="id"
                        @node-click="treeClick" :default-expanded-keys="defaultExpandedKeys">
                        @node-click="treeClick" :default-expanded-keys="defaultExpandedKeys" :empty-text="''">
                        <span class="custom-tree-node" slot-scope="node">
                            <i v-show="node.data.leaf" class="status-box"
                                :class="{ online: Number(node.data.status) === 1 }"></i>
@@ -55,7 +55,7 @@
                    </el-tree>

                    <el-tree v-show="searchLazyFlag == false" :data="searchTreeData" :props="defaultProps"
                        :default-expand-all="true" @node-click="treeClick">
                        :default-expand-all="true" @node-click="treeClick" :empty-text="''">
                        <span class="custom-tree-node" slot-scope="node">
                            <i class="status-box" :class="{ online: Number(node.data.status) === 1 }"></i>

@@ -298,6 +298,7 @@

        searchChange (e) {
            this.$store.commit('SET_VIDEOLISTPOPUP', false)
            this.$store.commit('SET_VIDEOROWCLICKPOPUP', false)
            this.inputpopup = false
            plot.stop()

@@ -341,8 +342,8 @@
                                disableDepthTestDistance: Number.POSITIVE_INFINITY
                            },
                            incident: this.siteClick,
                            // mouseOverIncident: this.pointMouseOver,
                            // mouseOutIncident: this.pointMouseOut,
                            mouseOverIncident: this.pointMouseOver,
                            mouseOutIncident: this.pointMouseOut,
                        })
                    })

@@ -392,6 +393,7 @@

        removeDrawLayer () {
            this.$store.commit('SET_VIDEOLISTPOPUP', false)
            this.$store.commit('SET_VIDEOROWCLICKPOPUP', false)

            this.inputpopup = false
            plot.stop()
@@ -412,6 +414,7 @@

        searchDraw () {
            this.$store.commit('SET_VIDEOLISTPOPUP', false)
            this.$store.commit('SET_VIDEOROWCLICKPOPUP', false)

            this.searchLazyFlag = false

@@ -499,8 +502,8 @@
                            disableDepthTestDistance: Number.POSITIVE_INFINITY
                        },
                        incident: this.siteClick,
                        // mouseOverIncident: this.pointMouseOver,
                        // mouseOutIncident: this.pointMouseOut,
                        mouseOverIncident: this.pointMouseOver,
                        mouseOutIncident: this.pointMouseOut,
                    })
                })

@@ -575,14 +578,14 @@
                siteGd: 600,
            })

            this.$store.commit('SET_VIDEOLISTPOPUP', true)
            this.$store.commit('SET_VIDEOROWCLICKPOPUP', true)

            this.$store.commit('SET_VIDEOLISTPOPUPDATA', {
            this.$store.commit('SET_VIDEOROWCLICKPOPUPDATA', {
                ...node
            })

            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'videoListPopup',
                domId: 'videoRowClickPopup',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
@@ -665,8 +668,8 @@
                                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                                },
                                incident: this.siteClick,
                                // mouseOverIncident: this.pointMouseOver,
                                // mouseOutIncident: this.pointMouseOut,
                                mouseOverIncident: this.pointMouseOver,
                                mouseOutIncident: this.pointMouseOut,
                            })
                        }
                    })
@@ -699,6 +702,9 @@
        loading && loading.close()

        this.$store.commit('SET_VIDEOLISTPOPUP', false)

        this.$store.commit('SET_VIDEOROWCLICKPOPUP', false)

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'treeValAllLayer',
            type: 'VectorLayer'