Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

shuishen

2022-12-01 3e3f119cf029c9ac840c0f3043aa2497aeeeac0d

Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

 public/img/policeIcon.png

 src/api/activity/index.js

@@ -1,5 +1,20 @@
import request from "@/router/axios.js"


/**
 * 添加活动
 * @param {*}   
 * @returns 
 */
export const getSecurityList = (params, requestBaseUrl = '') => {
    return request({
        url: `/security/security/all`,
        method: 'get',
        requestBaseUrl,
        params
    })
}

/**
 * 获取警员列表
 * @param {*} params  
@@ -38,14 +53,13 @@

/**
 * 活动添加警员
 * @param {*} policemanId  警车ID
 * @param {*} policemanId  警员ID
 * @param {*} position  坐标
 * @param {*} securityId  活动ID
 * @param {*} deptId  部分ID
 * @param {*} type  范围类型
 * @returns 
 */
export const addActivityPolice = (policemanId, position, securityId, deptId, type, requestBaseUrl = '') => {
export const addActivityPolice = (policemanId, position, securityId, type, requestBaseUrl = '') => {
    return request({
        url: `/securityManage/securityManage/save`,
        method: 'post',
@@ -54,8 +68,58 @@
            policemanId,
            position,
            securityId,
            deptId,
            type
        }
    })
}

/**
 * 活动修改警员
 * @param {*} policemanId  警员ID
 * @param {*} id 数据唯一标识
 * @returns 
 */
export const updateActivityPolice = (id, policemanId, requestBaseUrl = '') => {
    return request({
        url: `/securityManage/securityManage/update`,
        method: 'post',
        requestBaseUrl,
        params: {
            id,
            policemanId,
        }
    })
}

/**
 * 获取活动人员分布信息
 * @param {*} securityId  活动ID
 * @returns 
 */
export const getSecurityPoliceList = (securityId, requestBaseUrl = '') => {
    return request({
        url: `/securityManage/securityManage/all`,
        method: 'get',
        requestBaseUrl,
        params: {
            securityId
        }
    })
}


/**
 * 获取活动警车分布信息
 * @param {*} securityId  活动ID
 * @returns 
 */
export const getSecurityCarList = (securityId, requestBaseUrl = '') => {
    return request({
        url: `/securityManageCar/securityManageCar/all`,
        method: 'get',
        requestBaseUrl,
        params: {
            securityId
        }
    })
}

 src/components/map/index.vue

@@ -292,14 +292,14 @@

        this.$EventBus.$on('layerPolygonAdd', (params) => {
            if ('polygonName' in params) {
                that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, params.polygonName)
                that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, params.polygonName, params.params, params.incident)
            } else {
                that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, 'polygon')
                that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, 'polygon', params.params, params.incident)
            }
        })

        this.$EventBus.$on('layerPolylineAdd', (params) => {
            that.layerPolylineAdd(params.layerName, params.positions, params.material, params.width)
            that.layerPolylineAdd(params.layerName, params.positions, params.material, params.width, params.params, params.incident)
        })

        this.$EventBus.$on('layerShow', (params) => {
@@ -512,7 +512,7 @@
         * @param {*} material 颜色
         * @param {*} distanceDisplayCondition 可见距离
         */
        layerPolygonAdd (layerName, positions, material, distanceDisplayCondition, polygonName) {
        layerPolygonAdd (layerName, positions, material, distanceDisplayCondition, polygonName, params, incident = (e) => { }) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')

@@ -528,6 +528,8 @@
                perPositionHeight: true,
            })
            // layersObjcect[layerName].addOverlay(polygon)
            polygonObj[polygonName].attrParams = params
            polygonObj[polygonName].on(global.DC.MouseEventType.CLICK, incident)
            layersObjcect[layerName].addOverlay(polygonObj[polygonName])
        },

@@ -538,7 +540,7 @@
         * @param {*} material 颜色
         * @param {*} width 宽度
         */
        layerPolylineAdd (layerName, positions, material, width) {
        layerPolylineAdd (layerName, positions, material, width, params, incident = (e) => { }) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')

@@ -552,6 +554,9 @@
                material: material,
                clampToGround: false
            })
            polyline.attrParams = params
            polyline.on(global.DC.MouseEventType.CLICK, incident)

            layersObjcect[layerName].addOverlay(polyline)
        },


 src/router/axios.js

@@ -24,7 +24,8 @@
const service = axios.create({
    // baseURL: 'http://36.14.255.242:18080/api',
    // baseURL: 'http://192.168.0.102:1888/api',
    baseURL: 'http://192.168.0.105:8081/api',
    // baseURL: 'http://192.168.0.105:8081/api',
    baseURL: 'http://192.168.0.106:1888/api',
    timeout: 600000 // request timeout
})

@@ -42,7 +43,8 @@

        if (config.requestBaseUrl == 'outside') {
            // config.baseURL = 'http://192.168.0.102:1888/api'
            config.baseURL = 'http://192.168.0.105:8081/api'
            // config.baseURL = 'http://192.168.0.105:8081/api'
            config.baseURL = 'http://192.168.0.106:1888/api'
        }

        // const token = auth.getToken()

 src/views/activity/index.vue

@@ -54,23 +54,21 @@
                        :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        :key="index"
                        @click="goAbDetail(item, index)"
                        @click="activityListClick(item, index)"
                    >
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
                                <div class="category">活动名称：</div>
                                <div class="category-value">xxx活动</div>
                                <div class="category-value">{{item.name}}</div>
                            </div>
                            <div>
                                <div class="category">活动时间：</div>
                                <div
                                    class="category-value"
                                >2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                                <div class="category-value">{{item.startTime}} 至 {{item.updateTime}}</div>
                            </div>
                            <div>
                                <div class="category">活动详情：</div>
                                <div class="category-value">护送某某某到某某某个地方</div>
                                <div class="category-value">{{item.content}}</div>
                            </div>
                        </div>
                    </div>
@@ -91,19 +89,22 @@

        <div class="draw-btn-box" v-show="dialogVisible">
            <ul>
                <li>
                <!-- <li>
                    <button @click="draw('point')">点</button>
                </li>
                <li>
                    <button @click="draw('billboard')">图标点</button>
                </li>-->
                <li>
                    <button @click="draw('billboard')">警员</button>
                </li>
                <li>
                    <button @click="draw('polyline')">线</button>
                    <button @click="draw('polyline')">路线</button>
                </li>
                <li>
                    <button @click="draw('polygon')">面</button>
                    <button @click="draw('polygon')">范围</button>
                </li>
                <li>
                <!-- <li>
                    <button @click="draw('circle')">圆</button>
                </li>
                <li>
@@ -126,7 +127,7 @@
                </li>
                <li>
                    <button @click="removeAll()">清除</button>
                </li>
                </li>-->
            </ul>
        </div>

@@ -260,7 +261,7 @@
</template>

<script>
import { getPoliceList, addCarAndRange, addActivityPolice } from '@/api/activity/index.js'
import { getSecurityList, getPoliceList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice } from '@/api/activity/index.js'

let analyseLayer = null
let analysePolygon = null
@@ -440,56 +441,25 @@
            polylineSwitch: false,
            polylineBtnSwitch: false,
            analyseInput: 100,
            activityList: [
                {
                    name: '1号活动点',
                    lng: 116.022874,
                    lat: 28.685070,
                    alt: 100,
                    url: '/img/icon/activity.png'
                },
                {
                    name: '2号活动点',
                    lng: 116.024714,
                    lat: 28.712694,
                    alt: 100,
                    url: '/img/icon/activity.png'
                },
                {
                    name: '3号活动点',
                    lng: 116.008424,
                    lat: 28.671837,
                    alt: 100,
                    url: '/img/icon/activity.png'
                },
                {
                    name: '4号活动点',
                    lng: 116.017702,
                    lat: 28.675881,
                    alt: 100,
                    url: '/img/icon/activity.png'
                },
                {
                    name: '5号活动点',
                    lng: 116.035375,
                    lat: 28.681407,
                    alt: 100,
                    url: '/img/icon/activity.png'
                }
            ],
            activityList: [],
            activityDetails: {},
            boxShow: true,
            policeChooseTitle: '选择警员',
            policeChooseVisible: false,
            overlayObj1: {},
            overlayObj2: {},
            overlayObj: {},
            isTrackBtnShow: false,
            showingSecurityId: '',
            policeIconIsCreated: false,
            policeIconId: {},
        }
    },
    created () {
        this.getPoliceList()
        // this.addCarAndRange()
        // this.addCarAndRange('1595988751891415042', '1 2,3 4', 1, 1)
        // this.addActivityPolice()
        this.getSecurityList()
        // this.getSecurityPoliceList()
        // this.getSecurityCarList()
    },
    mounted () {

@@ -497,16 +467,6 @@
        this.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.activityList.forEach(item => {
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'activityLayers',
                    type: "billboard",
                    params: item,
                    incident: this.houseSiteClick
                })
            })


            if (analyseLayer == null) {
                analyseLayer = new global.DC.VectorLayer('analyseLayer')
                global.viewer.addLayer(analyseLayer)
@@ -531,6 +491,7 @@
    updated () { },

    methods: {
        // 生成热力图坐标
        generatePosition (num) {
            let list = []
            for (let i = 0; i < num; i++) {
@@ -541,29 +502,144 @@
            return list
        },

        getPoliceList () {
            getPoliceList().then(res => {
                console.log(res.data.data, 7777)
                res.data.data.forEach((item, index) => {
                    this.policeOption.push({ value: `${index}`, label: `${item.name}` })
        // 获取活动警员分布信息
        getSecurityPoliceList (securityId) {
            this.removeAll()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })
            getSecurityPoliceList(securityId).then(res => {
                res.data.data.forEach(item => {
                    if (item.type == 1) {
                        let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
                        this.$EventBus.$emit('layerPolylineAdd', {
                            layerName: 'newDrawLayers',
                            positions: positionNewArr,
                            material: global.DC.Color.RED,
                            width: 4,
                            params: {
                                id: item.id,
                                policemanId: item.policemanId
                            },
                            incident: this.overlayTypeClick
                        })
                    } else if (item.type == 2) {
                        let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
                        this.$EventBus.$emit('layerPolygonAdd', {
                            layerName: 'newDrawLayers',
                            positions: positionNewArr,
                            material: global.DC.Color.RED,
                            params: {
                                id: item.id,
                                policemanId: item.policemanId
                            },
                            incident: this.overlayTypeClick
                        })

                    } else if (item.type == 3) {
                        let positionObj = this.convertBillboardPositionDate(item.position, 'police', item.id, item.policemanId)
                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'newDrawLayers',
                            type: 'billboard',
                            params: positionObj,
                            incident: this.overlayTypeClick
                        })
                    }
                })
            })
        },

        // 获取活动警车分布信息
        getSecurityCarList (securityId) {
            getSecurityCarList(securityId).then(res => {
                console.log('活动警车列表', res.data.data)
            })
        },
        // 获取活动列表
        getSecurityList () {
            getSecurityList().then(res => {
                this.activityList = res.data.data
                this.addActivityPoint()
                console.log('活动列表', res.data.data)
            })
        },

        // 获取警员列表，生成下拉数据
        getPoliceList () {
            getPoliceList().then(res => {
                console.log('警员列表', res.data.data)
                res.data.data.forEach(item => {
                    this.policeOption.push({ value: `${item.id}`, label: `${item.name}` })
                })
            })
        },

        // 修改活动警员
        updateActivityPolice (id, policemanId) {
            updateActivityPolice(id, policemanId).then(res => {
                this.getSecurityPoliceList(this.showingSecurityId)
            })
        },

        // 活动添加警车和范围
        addCarAndRange () {
            addCarAndRange('1595988751891415042', '1 2,3 4', 1, 1).then(res => {
        addCarAndRange (carId, position, securityId, type) {
            addCarAndRange(carId, position, securityId, type).then(res => {
                console.log(res, 2323)
            })
        },

        // 活动添加警员
        addActivityPolice () {
            addActivityPolice('1596389528611971073', '11 22,33 44', 2, 1, 2).then(res => {
                console.log(res, 3333)
        // 添加活动图标
        addActivityPoint () {
            this.activityList.forEach(item => {
                let positionObj = this.convertBillboardPositionDate(item.position, 'activity')
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'activityLayers',
                    type: "billboard",
                    params: positionObj,
                    incident: this.houseSiteClick
                })
            })
        },

        // 活动添加警员
        addActivityPolice (policemanId, position, securityId, type) {
            addActivityPolice(policemanId, position, securityId, type).then(res => {
                console.log(res, 3333)
                this.getSecurityPoliceList(securityId)
            })
        },

        // 转换 点 坐标数据
        convertBillboardPositionDate (data, iconName, plotId, policemanId) {
            let positionStr = data
            positionStr = data.slice(6, positionStr.length - 1)
            let positionArr = positionStr.split(" ")
            let positionObj = {}
            if (iconName == 'activity') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/icon/activity.png' }
            } else {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 100, url: '/img/policeIcon.png', id: plotId, policemanId: policemanId }
            }
            return positionObj
        },

        // 转换 线面 坐标数据
        convertPolylineOrPolygonPositionDate (data, type) {
            let positionStr = data.slice(11, data.length - 1)
            let positionArr = positionStr.split(',')
            let positionNewArr = ''
            positionArr.forEach(item => {
                if (type == 1) {
                    positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ';'
                } else {
                    positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ',' + 0 + ';'
                }
            })
            return positionNewArr
        },

        // 树形控件选中事件
        treeCheckClick (e1, e2) {
            const that = this
            this.$EventBus.$emit('mapRemoveLayer', {
@@ -599,11 +675,18 @@
            }
        },

        goAbDetail (item, index) {
        // 点击活动列表活动
        activityListClick (item, index) {
            this.removeAll()
            this.showingSecurityId = item.id
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })
            this.getSecurityPoliceList(item.id)
            if (this.currentClickIndex !== '' && this.currentClickIndex == index) {
                return
            }

            this.analyseInput = 100

            this.activityDetails = item
@@ -614,10 +697,12 @@
                analyseLayer.clear()
            }

            let point = new global.DC.Point(`${item.lng}, ${item.lat}`)
            let positionObj = this.convertBillboardPositionDate(item.position, 'activity')

            let point = new global.DC.Point(`${positionObj.lng}, ${positionObj.lat}`)
            analyseLayer.addOverlay(point)

            let coords = global.DC.GeoTools.pointBuffer(`${item.lng}, ${item.lat}`, 100)
            let coords = global.DC.GeoTools.pointBuffer(`${positionObj.lng}, ${positionObj.lat}`, 100)
            analysePolygon = new global.DC.Polygon(coords)

            analysePolygon.setStyle({
@@ -636,12 +721,13 @@
            this.currentClickIndex = index

            this.$EventBus.$emit('toPosition', {
                siteJd: item.lng,
                siteWd: item.lat,
                siteJd: positionObj.lng,
                siteWd: positionObj.lat,
                siteGd: 1500
            })
        },

        // 切换轨迹路线显示
        switchChange (e) {
            if (e == true) {
                this.$EventBus.$emit('layerPolylineAdd', {
@@ -664,15 +750,12 @@
            }
        },

        // 切换轨迹播放控件
        switchBtnChange (e) {
            // if (e == true) {
            //     this.isTrackBtnShow = true
            // } else {
            //     this.isTrackBtnShow = false
            // }
            this.isTrackBtnShow = e
        },

        // 输入绘制线范围
        analyseChange (e) {
            analyseLayer.removeOverlay(analysePolygon)
            let coords = global.DC.GeoTools.pointBuffer(`${this.activityDetails.lng}, ${this.activityDetails.lat}`, e)
@@ -683,10 +766,12 @@
            analyseLayer.addOverlay(analysePolygon)
        },

        // 分页页码变化事件
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
        },

        // 关闭活动详情弹窗
        closeActivityDetails () {
            this.dialogVisible = false
            this.currentClickIndex = ''
@@ -698,20 +783,25 @@
            })
        },

        draw (type) {
        // 地图元素绘制
        draw (type,) {
            let flag = false
            const that = this
            this.policeType = ''
            plot && plot.draw(type, overlay => {

                if (type == 'billboard') {
                    overlay.icon = '/img/policeIcon.png'
                }

                if (overlay) {

                    drawLayers.addOverlay(overlay)

                    plot.edit(overlay, (e) => {
                        flag = true
                        overlay.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
                        overlay.policeType = this.policeType
                        this.overlayObj1 = overlay
                        overlay.drawType = type
                        this.overlayObj = overlay
                        document.oncontextmenu = function () {
                            if (flag == true) {
                                that.policeChooseVisible = true
@@ -725,23 +815,28 @@
            })
        },

        // 删除所有地图绘制元素
        removeAll () {
            drawLayers.clear()
        },

        // 播放轨迹
        play () {
            tc.play()
            this.view('1', -20, 100)
        },

        // 暂停播放轨迹
        pause () {
            tc.pause()
        },

        // 恢复播放轨迹
        restore () {
            tc.restore()
        },

        // 轨迹视角切换
        view (mode, pitch, range) {
            tc.viewTrack(track, {
                mode: mode,
@@ -755,25 +850,62 @@
            this.boxShow = val
        },

        // 选择警员取消按钮
        cancel () {
            this.policeIconIsCreated = false
            this.policeChooseVisible = false
            this.overlayObj2 = {}
            this.removeAll()
        },

        // 选择警员关闭
        policeChooseBeforeClose () {
            this.policeChooseVisible = false
            this.policeIconIsCreated = false
            this.removeAll()
        },

        // 选择警员确认按钮
        determine () {
            if ('_id' in this.overlayObj2) {
                this.overlayObj2.policeType = this.policeType
            if (!this.policeIconIsCreated) {
                let type = ''
                let position = ''
                if (this.overlayObj.drawType == 'billboard') {
                    type = 3
                    position = this.overlayObj._position._lng + ' ' + this.overlayObj._position._lat
                } else if (this.overlayObj.drawType == 'polyline') {
                    type = 1
                    this.overlayObj._positions.forEach(item => {
                        position += item._lng + ' ' + item._lat + ','
                    })
                    position = position.slice(0, position.length - 1)
                } else if (this.overlayObj.drawType == 'polygon') {
                    type = 2
                    this.overlayObj._positions.forEach(item => {
                        position += item._lng + ' ' + item._lat + ','
                    })
                    position += this.overlayObj._positions[0]._lng + ' ' + this.overlayObj._positions[0]._lat + ','
                    position = position.slice(0, position.length - 1)
                }

                this.addActivityPolice(this.policeType, position, this.showingSecurityId, type)
                this.policeChooseVisible = false
                this.policeIconIsCreated = false
            } else {
                this.overlayObj1.policeType = this.policeType
                this.updateActivityPolice(this.policeIconId, this.policeType)
                this.policeChooseVisible = false
                this.policeIconIsCreated = false
            }
            this.policeChooseVisible = false
        },

        // 地图绘制元素点击事件
        overlayTypeClick (e) {
            this.overlayObj2 = e.overlay
            this.policeType = this.overlayObj2.policeType
            // console.log('点击了元素', e.overlay.attrParams)
            this.policeIconIsCreated = true
            this.policeIconId = e.overlay.attrParams.id
            this.policeType = e.overlay.attrParams.policemanId
            console.log(this.policeIconId, this.policeType)
            this.policeChooseVisible = true
            this.overlayObj2 = {}
        }
    },


 src/views/home/index.vue

@@ -11,18 +11,31 @@

<template>
    <div class="container">
        <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
        <left-container
            class="left-container"
            @showpeopledetail="showpeopledetail"
            @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail"
            ref="leftContainer"
        ></left-container>

        <right-container class="right-container" @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType"
            @activityChange="activityChange" ref="rightContainer"></right-container>
        <right-container
            class="right-container"
            @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType"
            @activityChange="activityChange"
            ref="rightContainer"
        ></right-container>

        <bottom-container class="bottom-container" ref="bottomContainer"
        <bottom-container
            class="bottom-container"
            ref="bottomContainer"
            @changePoliceSituationHistoryType="changePoliceSituationHistoryType"
            @changePoliceSituationTimeType="changePoliceSituationTimeType"
            @policeSituationChange="policeSituationChange" @policeSituationSiteClick="policeSituationSiteClick">
        </bottom-container>
            @policeSituationChange="policeSituationChange"
            @policeSituationSiteClick="policeSituationSiteClick"
        ></bottom-container>

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -49,30 +62,69 @@
        </div>

        <div ref="RegionSelect" style="left: 0;" class="region-select">
            <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
                :options="policeStationOptions" :optionsName="'policeStationName'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
                :optionsName="'policeStationName'"
            ></map-select>

            <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
                :optionsName="'areaCheckName'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
                :optionsName="'areaCheckName'"
            ></map-select>

            <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
                :options="housingOptions" :optionsName="'housingsName'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
                :optionsName="'housingsName'"
            ></map-select>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
        >
            <video
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>

        <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box">
<!--            <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
          <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0"/>
        <el-dialog
            :title="panoramaTitle"
            :modal="true"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
            class="panorama-details-box"
        >
            <!--            <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
            <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0" />
        </el-dialog>

        <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible"
            :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box">
        <el-dialog
            :title="activityTitle"
            :modal="true"
            :visible.sync="activityVisible"
            :before-close="activityBeforeClose"
            :close-on-click-modal="true"
            class="activity-details-box"
        >
            <div class="item">
                <div>活动名称:</div>
                <div>{{ activityDetailArr.activityName }}</div>
@@ -107,8 +159,14 @@
            </div>
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -127,8 +185,14 @@
            </div>
        </el-dialog>

        <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose"
            :close-on-click-modal="true" class="area-details-box">
        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
            <div class="item">
                <div>责任区负责人：</div>
                <div>王某某</div>
@@ -147,30 +211,58 @@
            </div>
        </el-dialog>

        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
        <el-dialog
            :title="equimentTitle"
            :modal="true"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :close-on-click-modal="true"
            class="equiment-details-box"
        >
            <div class="equiment-detail">
                <div class="left">
                    <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick"
                        ref="tree" node-key="id"></el-tree>
                    <el-tree
                        :data="jurisdictionData"
                        :props="defaultProps"
                        @node-click="jurisdictionNodeClick"
                        ref="tree"
                        node-key="id"
                    ></el-tree>
                </div>
                <div class="right">
                    <div class="monitor" v-if="monitorContent">
                        <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                            style="object-fit: fill"></video>
                        <video
                            src="/video/sp.mp4"
                            autoplay
                            controls
                            width="100%"
                            height="100%"
                            ref="videoElement"
                            style="object-fit: fill"
                        ></video>
                    </div>
                    <div class="others" v-if="othersContent">
                        <el-table :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        <el-table
                            :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName">
                            :row-class-name="tableRowClassName"
                        >
                            <el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column>
                            <el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column>
                            <el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column>
                            <el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column>
                            <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column>
                            <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column>
                            <el-table-column
                                prop="recorderID"
                                label="执法记录仪号"
                                v-if="recorderArrShow"
                            ></el-table-column>
                            <el-table-column
                                prop="recorderType"
                                label="记录仪机型"
                                v-if="recorderArrShow"
                            ></el-table-column>
                            <el-table-column prop="id" label="设备号" v-if="stateArrShow"></el-table-column>
                            <el-table-column prop="equimentType" label="设备类型" v-if="stateArrShow"></el-table-column>
                            <el-table-column prop="policeStation" label="所属派出所"></el-table-column>
@@ -178,20 +270,35 @@
                            <el-table-column prop="state" label="状态"></el-table-column>
                        </el-table>
                        <div class="pages">
                            <el-pagination background layout="prev, pager, next" :total="showArr.length"
                                :page-size="pagesize" pager-count="3" :current-page="currentPage"
                                @current-change="handleCurrentChange"></el-pagination>
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="showArr.length"
                                :page-size="pagesize"
                                pager-count="3"
                                :current-page="currentPage"
                                @current-change="handleCurrentChange"
                            ></el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
            <el-table :data="landDetailArr" style="width: 100%"
        <el-dialog
            :title="landTitle"
            :modal="true"
            :visible.sync="landVisible"
            :before-close="landBeforeClose"
            :close-on-click-modal="true"
            class="land-details-box"
        >
            <el-table
                :data="landDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column>
                <el-table-column prop="location" label="位置" width="140"></el-table-column>
                <el-table-column prop="area" label="面积" width="120"></el-table-column>
@@ -200,11 +307,20 @@
            </el-table>
        </el-dialog>

        <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
        <el-dialog
            :title="keyPersonTitle"
            :modal="true"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
@@ -215,8 +331,14 @@
            </el-table>
        </el-dialog>

        <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
        <el-dialog
            :title="policeSituationTitle"
            :modal="true"
            :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose"
            :close-on-click-modal="true"
            class="policeSituation-details-box"
        >
            <div class="item">
                <div>所属派出所:</div>
                <div>{{ policeSituationDetailArr.policeName }}</div>
@@ -258,7 +380,7 @@
</template>

<script>
import {getPanoramaList} from "@/api/panorama";
import { getPanoramaList } from "@/api/panorama"

let cylinderLayer = null
let circleLayer = null
@@ -371,8 +493,8 @@
import underwayArr from '@/assets/data/activitysData/underway.js'
import realtimeArr from '@/assets/data/policeSituationArr/realtimeArr.js'
import policeSituationHistoryArr from '@/assets/data/policeSituationArr/historyArr.js'
import {getPoliceStationList} from "@/api/dept";
import {convertStringToList} from "@/utils/geometryStringTool";
import { getPoliceStationList } from "@/api/dept"
import { convertStringToList } from "@/utils/geometryStringTool"

export default {
    data () {
@@ -387,7 +509,7 @@
            dialogTitle: '',
            dialogVisible: false,
            panoramaTitle: '',
            panoramaVrUrl:'',
            panoramaVrUrl: '',
            activityTitle: '',
            equimentTitle: '',
            keyPersonTitle: '',
@@ -527,11 +649,11 @@
        this.underwayArr = underwayArr
        this.policeSituationRealtimeArr = realtimeArr
        this.policeSituationHistoryArr = policeSituationHistoryArr
        this.getPanoramaList();
        this.getPanoramaList()
    },

    mounted () {
      this.$nextTick(() => {
        this.$nextTick(() => {
            this.initPoliceStationLayer()
            circleLayer = new global.DC.VectorLayer('circleLayer')
            global.viewer.addLayer(circleLayer)
@@ -550,28 +672,28 @@
        window.addEventListener('resize', this.setDomStyle)
    },

    watch:{
      "policeStationOptions":{
        handler(newVal){
          this.$nextTick(() => {
            this.initPoliceStationLayer()
            circleLayer = new global.DC.VectorLayer('circleLayer')
            global.viewer.addLayer(circleLayer)
    watch: {
        "policeStationOptions": {
            handler (newVal) {
                this.$nextTick(() => {
                    this.initPoliceStationLayer()
                    circleLayer = new global.DC.VectorLayer('circleLayer')
                    global.viewer.addLayer(circleLayer)

            document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
            document.querySelector('.dc-container .dc-location-bar').classList.add('homebottom')
            document.querySelector('.screen-full-btn').classList.add('homebottom')
            document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
            document.querySelector('.image-switch-img-btn').classList.add('imgbottom')
            this.setDomStyle()
          })
          // axios.get('/user/getUserList').then((res) => {
          //     console.log(res, 999)
          // }}
                    document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
                    document.querySelector('.dc-container .dc-location-bar').classList.add('homebottom')
                    document.querySelector('.screen-full-btn').classList.add('homebottom')
                    document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
                    document.querySelector('.image-switch-img-btn').classList.add('imgbottom')
                    this.setDomStyle()
                })
                // axios.get('/user/getUserList').then((res) => {
                //     console.log(res, 999)
                // }}

          window.addEventListener('resize', this.setDomStyle)
                window.addEventListener('resize', this.setDomStyle)
            }
        }
      }
    },

    methods: {
@@ -976,6 +1098,7 @@
                    item.position.forEach(it => {
                        str = str + `${it[0]},${it[1]},${it[2]};`
                    })
                    console.log('str', str)
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'polygonLayer',
                        positions: str,
@@ -1373,62 +1496,62 @@
        /**
         * 获取所有全景数据
         */
        getPanoramaList(){
          getPanoramaList().then(res=>{
            if (res.data.code == 200){
              let data = res.data.data
              data.forEach(e=>{
                e.lng = e.longitude
                e.lat = e.latitude
                e.alt = 100
                e.url = '/img/icon/map-panorama.png'
              })
              this.panoramaList = data
            }
          })
        getPanoramaList () {
            getPanoramaList().then(res => {
                if (res.data.code == 200) {
                    let data = res.data.data
                    data.forEach(e => {
                        e.lng = e.longitude
                        e.lat = e.latitude
                        e.alt = 100
                        e.url = '/img/icon/map-panorama.png'
                    })
                    this.panoramaList = data
                }
            })
        },
        /**
         * 获取派出所和责任区数据
         */
        getPoliceStationList(){
            getPoliceStationList().then(res=>{
              if (res.data.code == 200){
                let data = res.data.data
                data.forEach(policeStation=>{
                  //派出所数据匹配
                  policeStation.policeStationName= policeStation.deptName
                  policeStation.policeStationId =  policeStation.id
                  policeStation.position = convertStringToList(policeStation.positionString)
                  if (policeStation.children&&policeStation.children.length>0){
                    //责任区数据匹配
                    policeStation.areaCheckOptions = policeStation.children
                    policeStation.areaCheckOptions.forEach(child=>{
                      child.policeStationId = child.parentId
                      child.areaCheckId = child.id
                      child.areaCheckName = child.deptName
                      child.position = convertStringToList(child.positionString)
                      //小区数据匹配
                      if (child.housingArr && child.housingArr.length>0){
                        child.housingArr.forEach(community=>{
                          community.policeStationId =policeStation.id
                          community.areaCheckId = child.id
                          community.housingsId=community.id
                          community.housingsName = community.name
                          community.position = convertStringToList(community.position)
                        })
                        child.housingArr.unshift({housingsName: '全部'})
                      }
        getPoliceStationList () {
            getPoliceStationList().then(res => {
                if (res.data.code == 200) {
                    let data = res.data.data
                    data.forEach(policeStation => {
                        //派出所数据匹配
                        policeStation.policeStationName = policeStation.deptName
                        policeStation.policeStationId = policeStation.id
                        policeStation.position = convertStringToList(policeStation.positionString)
                        if (policeStation.children && policeStation.children.length > 0) {
                            //责任区数据匹配
                            policeStation.areaCheckOptions = policeStation.children
                            policeStation.areaCheckOptions.forEach(child => {
                                child.policeStationId = child.parentId
                                child.areaCheckId = child.id
                                child.areaCheckName = child.deptName
                                child.position = convertStringToList(child.positionString)
                                //小区数据匹配
                                if (child.housingArr && child.housingArr.length > 0) {
                                    child.housingArr.forEach(community => {
                                        community.policeStationId = policeStation.id
                                        community.areaCheckId = child.id
                                        community.housingsId = community.id
                                        community.housingsName = community.name
                                        community.position = convertStringToList(community.position)
                                    })
                                    child.housingArr.unshift({ housingsName: '全部' })
                                }
                            })
                            policeStation.areaCheckOptions.unshift({ areaCheckName: '全部' })
                            policeStation.areaOptionArr = policeStation.areaCheckOptions
                        }
                    })
                    policeStation.areaCheckOptions.unshift({areaCheckName: '全部'})
                    policeStation.areaOptionArr = policeStation.areaCheckOptions
                  }
                })

                data.unshift({policeStationName: '全部'})
                this.policeStationOptions = data
                this.areaOptionData = data
                this.housingDate = data
              }
                    data.unshift({ policeStationName: '全部' })
                    this.policeStationOptions = data
                    this.areaOptionData = data
                    this.housingDate = data
                }
            })
        }

@@ -1684,7 +1807,9 @@
                background-color: #66b1ff87;
            }

            :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
            :deep(.el-tree--highlight-current
                    .el-tree-node.is-current
                    > .el-tree-node__content) {
                background: #454545;
            }


 src/views/video/list.vue

@@ -292,6 +292,7 @@
            const that = this
            graphicLayer.activate(type, (lastEventData) => {
                console.log('数据更新')
                console.log('lastEventData', lastEventData)
                this.drawInfo = lastEventData
                this.getRegionList(type, JSON.stringify(lastEventData))
            })