电子沙盘和视频监控和大搜调整

shuishen

2023-03-31 e612ba2e4847765022d5166323af3ec090427dfb

电子沙盘和视频监控和大搜调整

 public/img/draw/line.png

 public/img/draw/qycx.png

 public/img/icon/video-off.png

 public/img/icon/video.png

 src/components/map/components/mapSearchPopup.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-31 17:03:52
 * @FilePath: \srs-police-affairs\src\components\map\components\mapSearchPopup.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div>
        <div v-if="mapSearchPopup" class="popup-dom" id="mapSearchPopup">
            <div style="transform: translate(-50%, 0);">
                <!-- 样式自己修改 -->
                <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
                    {{ mapSearchPopupData.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'mapSearchPopup',

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

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

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

    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-30 16:23:23
 * @LastEditTime: 2023-03-31 17:07:34
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -76,6 +76,8 @@
        <activity-police-popup></activity-police-popup>

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

        <map-search-popup></map-search-popup>

        <y-tool-tip></y-tool-tip>

@@ -198,13 +200,14 @@
import mapPopup from './components/mapPopup.vue'
import activityPolicePopup from './components/activityPolicePopup.vue'
import videoListPopup from './components/videoListPopup.vue'
import mapSearchPopup from './components/mapSearchPopup.vue'
import yToolTip from './components/yToolTip.vue'
import createTools from '@/utils/tools/index'

export default {
    name: 'mapBox',

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

    data () {
        return {
@@ -487,7 +490,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.mouseOverIncident, params.mouseOutIncident)
            that.layerPointAdd(params.layerName, params.type, params.layerType, params.params, params.distanceDisplayCondition, params.incident, params.mouseOverIncident, params.mouseOutIncident, params.pointMouseMove)
        })

        this.$EventBus.$on('layerPolygonAdd', (params) => {
@@ -857,7 +860,7 @@
        layerPointAdd (layerName, type, layerType = 'VectorLayer', params, distanceDisplayCondition = {
            near: 0, //最近距离
            far: Number.MAX_VALUE //最远距离
        }, incident = (e) => { }, mouseOverIncident = (e) => { }, mouseOutIncident = (e) => { }) {
        }, incident = (e) => { }, mouseOverIncident = (e) => { }, mouseOutIncident = (e) => { }, pointMouseMove = (e) => { }) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, layerType)
            }
@@ -870,15 +873,16 @@
            if (type == "billboard") {
                // pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.url)
                // pointElement.setStyle({
                //     disableDepthTestDistance: 0
                // })
                pointElement.setStyle({
                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                })
                pointElement.size = [32, 32]
                pointElement.attrParams = params
                layersObjcect[layerName].addOverlay(pointElement)
                pointElement.on(global.DC.MouseEventType.CLICK, incident)
                pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident)
                pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident)
                pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove)
            } else if (type == "label") {
                // labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text)
                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.text)

 src/components/mapSearchBox/index.vue

@@ -94,6 +94,8 @@
        },

        clearSearchValue () {
            this.$store.commit('SET_MAPSEARCHPOPUP', false)

            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
@@ -120,6 +122,7 @@
        },

        searchExtensivelyVlaClick (item) {
            this.$store.commit('SET_MAPSEARCHPOPUP', false)
            this.searchExtensivelyValBoxShow = false
            this.isClickValBox = true

@@ -133,17 +136,26 @@
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'label',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 1,
                    text: item.name,
                    fontColor: global.DC.Color.ORANGE,
                }

            this.$store.commit('SET_MAPSEARCHPOPUP', true)

            this.$store.commit('SET_MAPSEARCHPOPUPDATA', {
                ...item
            })

            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'mapSearchPopup',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(item.location.lng),
                            Number(item.location.lat),
                            0
                        )
                    )
                ]
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: "billboard",
@@ -158,6 +170,8 @@
    },

    destroyed () {
        this.$store.commit('SET_MAPSEARCHPOPUP', false)

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

 src/store/getters.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-31 17:06:21
 * @FilePath: \srs-police-affairs\src\store\getters.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
const getters = {
    detailsPopup: (state) => state.popupParams.detailsPopup,
    dataPopup: (state) => state.popupParams.dataPopup,
@@ -5,5 +15,8 @@
    activityPolicePopupData: (state) => state.popupParams.activityPolicePopupData,
    videoListPopup: (state) => state.popupParams.videoListPopup,
    videoListPopupData: (state) => state.popupParams.videoListPopupData,
    mapSearchPopup: (state) => state.popupParams.mapSearchPopup,
    mapSearchPopupData: (state) => state.popupParams.mapSearchPopupData
}

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-07 10:54:45
 * @LastEditTime: 2023-03-31 17:05:49
 * @FilePath: \srs-police-affairs\src\store\modules\popupParams.js
 * @Description: 
 * 
@@ -21,7 +21,10 @@
        activityPolicePopupData: {},

        videoListPopup: false,
        videoListPopupData: {}
        videoListPopupData: {},

        mapSearchPopup: false,
        mapSearchPopupData: {}
    },

    mutations: {
@@ -48,6 +51,14 @@
            state.videoListPopupData = videoListPopupData
        },

        SET_MAPSEARCHPOPUP (state, mapSearchPopup) {
            state.mapSearchPopup = mapSearchPopup
        },

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

    },

    actions: {

 src/styles/base/index.scss

@@ -1278,4 +1278,41 @@

        }
    }
}

.draw-delete-confirm {
    background: rgb(35, 50, 167);
    border-color: rgb(35, 50, 167);

    .el-message-box__header {
        span {
            color: #fff;
        }

        .el-message-box__headerbtn {
            i {
                color: #fff;
            }
        }
    }

    .el-message-box__content {
        .el-message-box__message {
            p {
                color: #fff;
            }
        }
    }

    .el-message-box__btns {
        .el-button--primary {
            background: rgba(8, 56, 185, 0.9) !important;
            border-color: rgba(8, 56, 185, 0.9) !important;
        }

        .el-button--primary:hover {
            background: #66b1ff !important;
            border-color: #66b1ff !important;
        }
    }
}

 src/styles/dc/index.scss

@@ -74,7 +74,7 @@

.over-look-btn.homebottom {
    left: 402px !important;
    bottom: 540px !important;
    bottom: 540px;
}

.over-look-btn.shrink-btn {

 src/styles/icon/index.scss

@@ -51,4 +51,26 @@
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

.el-icon-draw-qycx {
    background: url(/img/draw/qycx.png) center no-repeat;
    background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-draw-qycx:before {
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

.el-icon-draw-line {
    background: url(/img/draw/line.png) center no-repeat;
    background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-draw-line:before {
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

 src/styles/media/index.scss

@@ -1710,8 +1710,8 @@
                        }

                        .activity-details-box {
                            top: countSizeVh(40);
                            right: countSizeVw(420, 1920) - 100vw;
                            top: countSizeVh(90);
                            right: countSizeVw(20, 1920);
                            width: countSizeVw(400, 1920);
                            padding: countSizeVh(10) countSizeVw(10, 1920);
                            border-radius: countSizeVh(10) countSizeVw(10, 1920);
@@ -2582,14 +2582,13 @@

                .over-look-btn.homebottom {
                    left: countSizeVw(402, 1920) !important;
                    bottom: calc((100% - maxCountSizeVh(120)) / 3 + countSizeVh(220));
                    bottom: calc((100% - maxCountSizeVh(120)) / 3 + countSizeVh(222));
                }

                .over-look-btn.shrink-btn {
                    left: countSizeVw(410, 1920) !important;
                    bottom: countSizeVh(220);
                }


                // 地图，控制按钮
                .over-look-btn,
@@ -2645,7 +2644,7 @@

                .image-switch-icon-btn.iconbottom {
                    left: countSizeVw(402, 1920) !important;
                    bottom: calc((100% - maxCountSizeVh(120)) / 3 + countSizeVh(176)) !important;
                    bottom: calc((100% - maxCountSizeVh(120)) / 3 + countSizeVh(178)) !important;
                }

                .image-switch-icon-btn.shrink-btn {

 src/utils/tools/DrawTool.js

@@ -88,13 +88,14 @@
     * @private
     */
    _onCreateAnchor ({ position, isCenter = false }) {
        console.log(this._options, 6633333)
        return this._anchorLayer.entities.add({
            position: position,
            billboard: {
                image: isCenter ? this._options.icon_center : this._options.icon_anchor,
                width: this._options.icon_size[0],
                height: this._options.icon_size[1],
                // eyeOffset: new global.DC.Namespace.Cesium.Cartesian3(0, 0, -100),
                eyeOffset: new global.DC.Namespace.Cesium.Cartesian3(0, 0, -4),
                heightReference:
                    this._viewer.scene.mode === global.DC.Namespace.Cesium.SceneMode.SCENE3D &&
                        !this._options.clampToModel

 src/utils/turfPolygon.js

New file
@@ -0,0 +1,39 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-31 10:52:25
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-31 11:36:28
 * @FilePath: \srs-police-affairs\src\utils\turfPolygon.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
import * as turf from '@turf/turf'

export const computerCapacity = (data) => {
    if (data.length) {
        let pointArr = []

        data.forEach(item => {
            if (item.longitude && item.latitude) {
                pointArr.push(turf.point([item.longitude, item.latitude]))
                return
            }

            if (item.lng && item.lat) {
                pointArr.push(turf.point([item.lng, item.lat]))
                return
            }
        })

        const features = turf.featureCollection(pointArr)

        const scope = turf.envelope(features).bbox

        global.viewer.flyToBounds(scope,
            { heading: 0, pitch: -90, roll: 0 },
            (e) => { },
            3
        )
    }
}

 src/views/activity/components/activityDetail.vue

@@ -59,10 +59,10 @@

<style lang="scss" scoped>
.activity-details-box {
    position: absolute;
    position: fixed;
    top: 90px;
    // right: 10px;
    right: calc(100vw - 400px);
    right: 20px;
    width: 400px;
    padding: 10px;
    border-radius: 10px;
@@ -70,7 +70,7 @@
    background: $bg-color;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    z-index: 11;

    .title {
        position: relative;

 src/views/activity/components/drawBtnBox.vue

@@ -97,6 +97,7 @@
        drawThreeArrow (type, billboardType = '', typeValue = '') {
            let flag
            this.$EventBus.$emit('tilesetLayerFlag', plotType, (e) => { flag = e })
            console.log(flag, 366666)
            if (flag != true) return

            drawFlag = false
@@ -126,15 +127,15 @@
                    break
                case 'icon1':
                    imgUrl = 'ptqz'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(63, 146, 254, 255)
                    material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
                    break
                case 'icon2':
                    imgUrl = 'bhdx'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(18, 150, 219, 255)
                    material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
                    break
                case 'icon3':
                    imgUrl = 'wxrw'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(216, 30, 6, 255)
                    material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
                    break
            }

@@ -154,7 +155,8 @@
                    size: [32, 32],
                    verticalOrigin: global.DC.Namespace.Cesium.VerticalOrigin.BOTTOM,
                    color: material,
                    // eyeOffset: new global.DC.Namespace.Cesium.Cartesian3(0, 0, -10),
                    // disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    eyeOffset: new global.DC.Namespace.Cesium.Cartesian3(0, 0, -10),
                    billboardImage: `/img/icon/${imgUrl}.png`
                }
            } else if (type == 'polyline') {
@@ -276,9 +278,10 @@
                }

                this.$parent.isHaveFactor = true
            } else if (item.type == 5 && item.areaType == 2) {
            } else if (item.type == 5) {
                addPlotOverlayData.setStyle({
                    material: color
                    material: color,
                    outlineColor: global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                })

                this.$parent.isHaveArrow = true
@@ -448,6 +451,17 @@
                    overlay.attrParams.data.width = params.width
                } else {
                    let linePosition = ''
                    let maxHeight = ''

                    if ('altitude' in params) {
                        maxHeight = params.altitude.split(',').reduce((pre, cur) => {
                            return cur > pre ? cur : pre
                        }, 0)
                    } else {
                        maxHeight = overlay.attrParams.altitude.split(',').reduce((pre, cur) => {
                            return cur > pre ? cur : pre
                        }, 0)
                    }
                    if ('position' in params) {
                        linePosition = params.position.replace(/,/g, ";").replace(/ /g, ",")
                    } else {
@@ -457,7 +471,7 @@
                    let positionStr = ''
                    coords.forEach((item, index) => {
                        if (!(index == coords.length - 1)) {
                            positionStr += item[0] + ',' + item[1] + ';'
                            positionStr += item[0] + ',' + item[1] + ',' + maxHeight + ';'
                        }
                    })
                    positionStr = positionStr.slice(0, positionStr.length - 1)

 src/views/activity/components/policeCarChange.vue

@@ -173,13 +173,20 @@

        // 点击删除
        deletePoliceElement () {
            this.deleteActivityCar(this.curElId, 'car')
            this.policeChooseCarVisible = false
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'draw-delete-confirm'
            }).then(() => {
                this.deleteActivityCar(this.curElId, 'car')
            }).catch(() => { })
        },

        // 删除警车
        deleteActivityCar (id, type) {
            deleteActivityCar(id).then(res => {
                this.policeChooseCarVisible = false
                if (res.data.success) {
                    this.$message({
                        message: '删除成功',

 src/views/activity/components/policePersonChange.vue

@@ -219,13 +219,20 @@

        // 点击删除
        deletePoliceElement () {
            this.deleteActivityPolice(this.curElId)
            this.policeChooseVisible = false
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'draw-delete-confirm'
            }).then(() => {
                this.deleteActivityPolice(this.curElId)
            }).catch(() => { })
        },

        // 删除警员
        deleteActivityPolice (id) {
            deleteActivityPolice(id).then(res => {
                this.policeChooseVisible = false
                if (res.data.success) {
                    policeOverlayData.overlay.remove()


 src/views/activity/components/polygonPlot.vue

@@ -116,15 +116,23 @@
            polygonAltArray = `${positions.alt},${positions.alt}`
            polygonPlotData = `${positions.lng} ${positions.lat}`

            let color = ''

            if (type == 'icon1') {
                this.plotSaveType = 6
                color = '#ff0000'
            } else if (type == 'icon2') {
                this.plotSaveType = 7
                color = '#ff0000'
            } else if (type == 'icon3') {
                this.plotSaveType = 8
                color = '#ff0000'
            } else {
                color = '#1e32e6'
            }

            this.isNeedPolygonType = false
            this.choosePlotColor = type == 'icon3' ? '#d81e06' : '#409EFF'
            this.choosePlotColor = color
            this.choosePlotColorAlpha = 100
            this.polygonAddVisible = true
        },
@@ -174,13 +182,20 @@

        // 删除标绘
        deletePlot () {
            this.deleteSecurityPlot(this.plotId)
            this.editPlotVisible = false
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'draw-delete-confirm'
            }).then(() => {
                this.deleteSecurityPlot(this.plotId)
            }).catch(() => { })
        },

        // 删除标绘接口
        deleteSecurityPlot (id) {
            deleteSecurityPlot(id).then(res => {
                this.editPlotVisible = false
                if (res.data.success) {
                    plotOverlayData != null && plotOverlayData.overlay != null && plotOverlayData.overlay.remove()
                    if (plotOverlayData != null && plotOverlayData.overlay != null && 'pointOverlayData' in plotOverlayData.overlay.attrParams) {

 src/views/activity/components/polylinePlot.vue

@@ -52,6 +52,22 @@
            chooseColor: '#1CA085',
            policeIconId: {},
            lineEditVisible: false,
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, )',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
        }
    },

@@ -112,13 +128,20 @@

        // 删除巡逻路线
        deleteLine () {
            this.deleteActivityCar(this.policeIconId)
            this.lineEditVisible = false
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                customClass: 'draw-delete-confirm'
            }).then(() => {
                this.deleteActivityCar(this.policeIconId)
            }).catch(() => { })
        },

        // 删除警车
        deleteActivityCar (id) {
            deleteActivityCar(id).then(res => {
                this.lineEditVisible = false
                if (res.data.success) {
                    this.$message({
                        message: '删除成功',

 src/views/activity/components/publicIndex.vue

@@ -179,7 +179,7 @@

            this.$refs.DRAWBTNBOX.removeDrawArrow()


            this.$parent.showingSecurityId = ''

            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'activityCameraLayers',
@@ -564,6 +564,9 @@
         */
        addMapLineLayers (data) {
            data.forEach(item => {
                let maxHeight = item.altitude.split(',').reduce((pre, cur) => {
                    return cur > pre ? cur : pre
                }, 0)
                let positionNewArr = this.convertPolylineOrPolygonPositionDate(item, 'port')
                // 线坐标字符串
                item.linePositionStr = positionNewArr
@@ -585,7 +588,7 @@

                let positionStr = ''
                coords.forEach(item => {
                    positionStr += item[0] + ',' + item[1] + ';'
                    positionStr += item[0] + ',' + item[1] + ',' + maxHeight + ';'
                })

                item.polygonPositionStr = positionStr

 src/views/activity/components/twoDrawBtnBox.vue

@@ -196,15 +196,15 @@
                    break
                case 'icon1':
                    imgUrl = 'ptqz'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(63, 146, 254, 255)
                    material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
                    break
                case 'icon2':
                    imgUrl = 'bhdx'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(18, 150, 219, 255)
                    material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
                    break
                case 'icon3':
                    imgUrl = 'wxrw'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(216, 30, 6, 255)
                    material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
                    break
            }


 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-22 16:21:27
 * @LastEditTime: 2023-03-31 17:07:47
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @Description: 辖区管理
 * 
@@ -19,8 +19,10 @@

            <div class="draw-btn">
                搜索范围：
                <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button>
                <el-button type="primary" size="mini" @click="draw('polyline')">巡查路线</el-button>
                <el-button type="primary" size="mini" @click="draw('polygon')">区域查询<i
                        class="el-icon-draw-qycx el-icon--right"></i></el-button>
                <el-button type="primary" size="mini" @click="draw('polyline')">缓冲查询<i
                        class="el-icon-draw-line el-icon--right"></i></el-button>
                <el-button type="primary" size="mini" @click="removeDrawLayer">清除</el-button>
            </div>
            <div class="down-tree">
@@ -44,6 +46,8 @@
                                    node.data.number
                                }}个)
                            </span>

                            <div v-if="node.data.disabled" class="disabled" @click.stop></div>
                        </span>
                    </el-tree>

@@ -72,13 +76,6 @@
        </div>

        <map-search-box></map-search-box>

        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
                    {{ item.name }}</div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
@@ -133,7 +130,6 @@
    getSearchTreeDevices,
    getTreeDevicesNearby
} from '@/api/video/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import flvjs from 'flv.js'

let graphicLayer = null
@@ -160,9 +156,6 @@
            changeBtn: false,
            drawName: '',
            drawType: 1,
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
            props: {
                label: 'name',
                children: 'zones',
@@ -228,6 +221,7 @@
        },

        async siteClick (e) {
            if (e.overlay.attrParams.status != 1) return
            this.videoPlayShow = true

            if (this.flvPlayer != null) {
@@ -508,100 +502,6 @@
            })
        },

        // 大搜
        getSearchExtensively (ak, region, query) {
            getSearchExtensively(ak, region, query).then(res => {
                this.searchExtensivelyArray = res.data.result
            })
        },

        searchExtensivelyClick () {
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            this.searchExtensivelyValBoxShow = false
            if (this.searchExtensivelyArray.length > 0) {
                this.$EventBus.$emit('toPosition', {
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200,
                })
                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'searchLayer',
                    type: 'VectorLayer'
                })
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'searchLayer',
                    type: 'label',
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 1,
                        text: this.searchExtensivelyArray[0].name
                    },
                })
            }
        },

        searchExtensivelyChange () {
            if (this.searchExtensivelyValue == '') {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
                this.searchExtensivelyArray = []
            } else {
                this.searchExtensivelyValBoxShow = true
                this.isShowClearBtn = true
                this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
        },

        searchExtensivelyVlaClick (item) {
            this.searchExtensivelyValBoxShow = false
            this.searchExtensivelyValue = item.name
            this.$EventBus.$emit('toPosition', {
                siteJd: `${item.location.lng}`,
                siteWd: `${item.location.lat}`,
                siteGd: 200,
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'label',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 1,
                    text: item.name
                }
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: "billboard",
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 1,
                    url: '/img/icon/location.png'
                },
            })
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
        },

        clearSearchValue () {
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        },

        async loadNode (node, resolve) {
            let type = Number(node.level) + 1

@@ -629,6 +529,10 @@

                data.forEach(item => {
                    item.leaf = !item.parent

                    if (!item.longitude && !item.latitude && item.leaf) {
                        item.disabled = true
                    }
                })

                data[0].leaf == false && node.level < 2 && this.defaultExpandedKeys.push(data[0].id)
@@ -670,29 +574,20 @@

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'treeValLayer',
                type: 'label',
                params: {
                    lng: node.longitude,
                    lat: node.latitude,
                    alt: 1,
                    text: node.name,
                    channelId: node.id
                },
                incident: this.siteClick
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'treeValLayer',
                type: "billboard",
                params: {
                    name: node.name,
                    lng: node.longitude,
                    lat: node.latitude,
                    alt: 1,
                    url: '/img/icon/video.png',
                    channelId: node.id
                    url: node.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png',
                    channelId: node.id,
                    status: node.status
                },
                incident: this.siteClick
                incident: this.siteClick,
                mouseOverIncident: this.pointMouseOver,
                mouseOutIncident: this.pointMouseOut,
                // pointMouseMove: this.pointMouseMove
            })

            getTreeDevicesNearby({ longitude, latitude, mileage: 1 }).then(res => {
@@ -708,18 +603,28 @@
                                lng: item.longitude,
                                lat: item.latitude,
                                alt: 1,
                                url: '/img/icon/video.png',
                                channelId: item.channelId
                                url: item.status == 1 ? '/img/icon/video.png' : '/img/icon/video-off.png',
                                channelId: item.channelId,
                                status: item.status
                            },
                            incident: this.siteClick,
                            mouseOverIncident: this.pointMouseOver,
                            mouseOutIncident: this.pointMouseOut
                            mouseOutIncident: this.pointMouseOut,
                            // pointMouseMove: this.pointMouseMove
                        })
                    }
                })

            })

        },

        pointMouseMove (e) {
            if (e.overlay.attrParams.status == 1) {
                global.viewer.canvas.style.cursor = 'pointer'
            } else {
                global.viewer.canvas.style.cursor = 'not-allowed'
            }
        },

        // 鼠标移入图标事件
@@ -775,7 +680,7 @@
            type: 'VectorLayer'
        })

        graphicLayer.destroy()
        // graphicLayer.destroy()

        this.$parent.$parent.$parent.resize('0px')

@@ -786,9 +691,9 @@
            this.flvPlayer.destroy()
            this.flvPlayer = null
        }
        if (drawPlotLayers != null) {
            drawPlotLayers.clear()
        }

        drawPlotLayers != null && drawPlotLayers.remove(), drawPlotLayers = null
        plot && plot.stop(), plot = null
    }
}
</script>
@@ -930,6 +835,10 @@
            flex: 1;
            overflow: hidden;

            :deep(.el-tree-node__content) {
                position: relative;
            }

            :deep(.el-tree-node.is-expanded > .el-tree-node__children) {
                display: inline;
            }
@@ -954,6 +863,17 @@

                .online {
                    background-color: #4ccc7d;
                }


                .disabled {
                    cursor: not-allowed;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 2;
                }
            }
        }
@@ -1020,31 +940,5 @@
        }
    }

    .searchExtensively-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 760px;
        width: 380px;
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: $el-dialog-bg-color;
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

        &>div {
            height: 100%;
            overflow-y: auto;

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        }
    }
}
</style>