安保活动页面拆分

shuishen

2023-03-06 e8311cab90aec62dd7ae1ee4b46eb631c1dd5d26

安保活动页面拆分

 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-06 14:58:38
 * @LastEditTime: 2023-03-06 16:06:57
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -296,15 +296,15 @@
            that.switchImg()

            // 外网
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )

            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({

 src/views/activity/components/activityDetail.vue

New file
@@ -0,0 +1,110 @@
<template>
    <div v-show="dialogVisible" class="activity-details-box">
        <div class="title">
            活动详情
            <div class="close" @click="closeActivityDetails"></div>
        </div>
        <div class="row-box">
            <div class="category">活动名称：</div>
            <div class="category-value">{{ activityDetails.name }}</div>
        </div>
        <div class="row-box">
            <div class="category">活动时间：</div>
            <div class="category-value">{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
        </div>
        <div class="row-box">
            <div class="category">负责人：</div>
            <div class="category-value">{{ activityDetails.person }}</div>
        </div>
        <div class="row-box">
            <div class="category">联系方式：</div>
            <div class="category-value">{{ activityDetails.contact }}</div>
        </div>
        <div class="row-box">
            <div class="category">负责单位：</div>
            <div class="category-value">{{ activityDetails.company }}</div>
        </div>
        <div class="row-box">
            <div class="category">所属辖区：</div>
            <div class="category-value">{{ activityDetails.deptName }}</div>
        </div>
        <div class="row-box">
            <div class="category">人数：</div>
            <div class="category-value">{{ activityDetails.number }}</div>
        </div>
        <div class="row-box">
            <div class="category">活动地点：</div>
            <div class="category-value">{{ activityDetails.place }}</div>
        </div>
        <div class="row-box">
            <div class="category">活动内容：</div>
            <div class="category-value">{{ activityDetails.content }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: [
        'dialogVisible',
        'activityDetails'
    ],
    methods: {
        closeActivityDetails () {
            this.$emit('closeActivityDetails')
        }
    }
}
</script>

<style lang="scss" scoped>
.activity-details-box {
    position: fixed;
    top: 90px;
    right: 10px;
    width: 400px;
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    background: $bg-color;
    overflow-x: hidden;
    overflow-y: auto;

    .title {
        position: relative;
        height: 36px;
        line-height: 36px;

        .close {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            cursor: pointer;
        }

        .close::before {
            content: '\e6db';
            font-family: element-icons;
        }
    }

    .row-box {
        width: 100%;
        line-height: 28px;
        display: flex;

        &>div {
            text-align: left;
        }

        .category {
            width: 96px;
        }

        .category-value {
            flex: 1;
        }
    }
}
</style>

 src/views/activity/components/drawBtnBox.vue

New file
@@ -0,0 +1,419 @@
<template>
    <div v-show="dialogVisible && isShowActivityEditBox" class="draw-btn-box">
        <div class="left">
            <h3>预案布置</h3>
            <div>
                <span>警力资源：</span>
                <ul>
                    <li>
                        <button @click="draw('billboard', 'policeman')" title="警员">
                            <img src="/img/icon/police-people-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="draw('billboard', 'policecar')" title="警车">
                            <img src="/img/icon/car-btn.png" style="height:100%" />
                        </button>
                    </li>
                </ul>
            </div>
            <div>
                <span>作战标绘：</span>

                <ul>
                    <li>
                        <button @click="drawArrow('attack_arrow')" title="进攻箭头">进攻箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('double_arrow')" title="双箭头">双箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('fine_arrow')" title="直箭头">直箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('tailed_attack_arrow')" title="燕尾箭头">燕尾箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('polygon')" title="多边形">多边形</button>
                    </li>
                    <li>
                        <button @click="drawArrow('billboard', 'icon1')" title="头像1">头像1</button>
                    </li>
                </ul>
            </div>
            <div>
                <span>巡逻路线：</span>
                <ul>
                    <li>
                        <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ></el-button>-->
                        <button @click="draw('polyline', 'policecar')" title="巡逻路线">
                            <img src="/img/icon/route1.png" style="height:100%" />
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right" v-if="false">
            <ul>
                <li>
                    <button @click="removeDrawArrow">清除</button>
                </li>
                <li>
                    <button>保存</button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {
    updateActivityCar,
    updateSecurityPlot
} from '@/api/activity/index.js'

let plot = undefined
let drawLayers = null

let arrowPlot = null
let drawArrowLayers = null

export default {
    props: [
        'dialogVisible', 'isShowActivityEditBox', 'showingSecurityId',
        'policeSwitch', 'polylineBtnSwitch',
        'arrowBtnSwitch', 'policeIconId', 'lineWidth'],

    mounted () {
        this.$nextTick(() => {
            if (drawLayers == null) {
                drawLayers = new global.DC.VectorLayer('drawLayers')
                global.viewer.addLayer(drawLayers)
                plot = new global.DC.Plot(global.viewer)
            }


            if (drawArrowLayers == null) {
                drawArrowLayers = new global.DC.VectorLayer('drawArrowLayers')
                global.viewer.addLayer(drawArrowLayers)
                arrowPlot = new global.DC.Plot(global.viewer)
            }
        })
    },

    methods: {
        // 地图元素绘制
        draw (poltType, policeType) {

            let flag = false

            const that = this

            // this.policeType = ''  // ?

            plot && plot.draw(poltType, overlay => {

                if (poltType == 'billboard' && policeType == 'policeman') {
                    overlay.icon = '/img/icon/police-people.png'
                } else if (poltType == 'billboard' && policeType == 'policecar') {
                    overlay.icon = '/img/policeCar.jfif'
                }


                if (overlay) {
                    drawLayers.addOverlay(overlay)

                    plot.edit(overlay, (e) => {
                        // drawLayers.addOverlay(overlay)

                        flag = true

                        overlay.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)

                        overlay.drawType = poltType

                        overlay.policeType = policeType

                        that.$parent.overlayObj = overlay

                        document.oncontextmenu = function () {
                            if (flag == true && poltType == 'billboard') {
                                if (policeType == 'policeman') {
                                    that.$parent.searchPoliceTreeId = ''
                                    that.$parent.searchPoliceTreeName = ''
                                    that.$parent.choosePoliceColor = '#FF0000'
                                    that.$parent.policeChooseVisible = true
                                } else if (policeType == 'policecar') {
                                    that.$parent.policeOption = that.$parent.policecarOption
                                    that.$parent.chooseCarColor = '#FF0000'
                                    that.$parent.policeChooseCarVisible = true
                                }
                                flag = false
                            } else if (flag == true && poltType == 'polyline') {
                                let position = ''
                                overlay._positions.forEach(item => {
                                    position += item._lng + ' ' + item._lat + ','
                                })
                                position = position.slice(0, position.length - 1)
                                that.$parent.polylineBtnSwitch = true
                                that.$parent.lineEditTitle = '新增巡逻路线'
                                that.$parent.isLineEdit = false
                                that.$parent.chooseColor = '#1CA085'
                                that.$parent.lineWidth = 100
                                that.$parent.addLinePosition = position
                                that.$parent.lineEditVisible = true
                                flag = false
                            }
                        }
                    })
                }
            }, { material: global.DC.Color.RED })
        },

        drawArrow (type, iconType) {

            if (type == 'polygon') {

                const that = this
                let flag = false

                plot && plot.draw(type, overlay => {
                    if (overlay) {
                        drawArrowLayers.addOverlay(overlay)
                        plot.edit(overlay, (e) => {
                            flag = true
                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)

                            that.$parent.polygonPositionStr = positionStr
                            that.$parent.plotSaveType = 5

                            // overlay.on(global.DC.MouseEventType.CLICK, this.polygonClick)
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.$parent.choosePlotColor = '#409EFF'
                                    that.$parent.choosePlotColorAlpha = 48
                                    that.$parent.polygonAreaType = 1
                                    that.$parent.isNeedName = true
                                    that.$parent.isNeedPolygonType = true
                                    that.$parent.polygonName = ''
                                    that.$parent.polygonAddVisible = true
                                    flag = false
                                }
                            }
                        })
                    }
                }, { material: global.DC.Color.RED })
            } else if (type == 'billboard') {
                console.log(11)
                const that = this
                let flag = false

                plot && plot.draw(type, overlay => {
                    if (iconType == 'icon1') {
                        overlay.icon = '/img/icon/icon1.png'
                        that.$parent.plotSaveType = 6
                    }
                    if (overlay) {
                        drawArrowLayers.addOverlay(overlay)
                        plot.edit(overlay, (e) => {
                            flag = true

                            that.$parent.plotPointPositionStr = overlay._positions._lng + ' ' + overlay._positions._lat

                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.$parent.choosePlotColor = '#409EFF'
                                    that.$parent.choosePlotColorAlpha = 48
                                    that.$parent.polygonAddVisible = true
                                    that.$parent.isNeedName = false
                                    flag = false
                                }
                            }
                        })
                    }
                })
            } else {
                const that = this
                let flag = false
                arrowPlot && arrowPlot.draw(type, overlay => {
                    if (overlay) {
                        let plotType = ''
                        if (type == 'attack_arrow') {
                            plotType = 1
                        } else if (type == 'double_arrow') {
                            plotType = 2
                        } else if (type == 'fine_arrow') {
                            plotType = 3
                        } else if (type == 'tailed_attack_arrow') {
                            plotType = 4
                        }
                        that.$parent.plotSaveType = plotType
                        plot.edit(overlay, (e) => {
                            flag = true
                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)
                            that.$parent.arrowPositionStr = positionStr
                            drawArrowLayers.addOverlay(overlay)
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.$parent.choosePlotColor = '#409EFF'
                                    that.$parent.isNeedName = false
                                    that.$parent.isNeedPolygonType = false
                                    that.$parent.polygonAddVisible = true
                                    flag = false
                                }
                            }
                        })
                    }
                }, { material: global.DC.Color.RED })
            }
        },

        // 删除所有地图绘制元素
        removeDraw () {
            drawLayers != null && drawLayers.clear()
        },

        removeDrawArrow () {
            drawArrowLayers != null && drawArrowLayers.clear()
        },

        plotEdit (overlayData, type) {
            if (type == "arrow") {
                plot.edit(overlayData, (e) => {
                    let position = ''
                    overlayData._positions.forEach(item => {
                        position += item._lng + ' ' + item._lat + ','
                    })
                    position = position.slice(0, position.length - 1)

                    this.updateSecurityPlot({ id: overlayData.attrParams.id, position: position })
                })
            } else if (type == "line") {
                plot.edit(overlayData, (e) => {
                    let position = ''
                    overlayData._positions.forEach(item => {
                        position += item._lng + ' ' + item._lat + ','
                    })
                    position = position.slice(0, position.length - 1)
                    this.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth, type: 1, position: position })
                })
            }
        },

        // 修改活动警车
        // id活动id, carId警车id, color颜色, width巡逻路线范围宽度, type线面类型, position坐标
        updateActivityCar (params) {
            updateActivityCar(params).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '保存失败',
                        type: 'error'
                    })
                }

                this.$parent.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch)
            })
        },

        updateSecurityPlot (params) {
            updateSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    })
                }
                this.$parent.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch)
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.draw-btn-box {
    position: fixed;
    display: flex;
    // left: 50%;
    left: calc(810 / 1920 * 100vw);
    bottom: 40px;
    color: #fff;
    background: $bg-one-color;
    white-space: nowrap;
    // transform: translate(-50%, 0);

    .left,
    .right {
        height: 100%;

        &>div {
            display: flex;
        }

        ul {
            display: flex;

            li {
                button {
                    height: 30px;
                    margin: 0 5px;
                    background-color: $bg-color;
                    border: 1px solid #cecece;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                    outline: none;
                }
            }
        }
    }

    .left {
        width: 80%;

        h3 {
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            width: 100%;
            padding-left: 16%;
        }
    }

    .right {
        width: 20%;
        padding-top: 35px;

        ul {
            flex-direction: column;

            li {
                height: 50px;

                button {
                    background-color: #2a56cf;
                }
            }
        }
    }
}
</style>

 src/views/activity/components/mapSearchBox.vue

New file
@@ -0,0 +1,231 @@
<template>
    <div>
        <div class="search-content">
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="/img/icon/clear.png" alt />
            </div>
            <button @click="searchExtensivelyClick" class="el-icon-search"></button>
        </div>
        <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>
    </div>
</template>

<script>
import { getSearchExtensively } from '@/api/dept/index.js'

export default {
    data () {
        return {
            searchExtensivelyValue: '',
            isShowClearBtn: false,
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
        }
    },

    methods: {
        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
                    },
                })
            }
        },

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

        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'
            })
        },

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

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

        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'
                },
            })
        },
    },

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

    }
}
</script>

<style lang="scss" scoped>
.search-content {
    position: absolute;
    position: fixed;
    z-index: 99;
    left: 760px;
    top: 40px;
    width: 460px;
    height: 36px;

    input {
        flex: 1;
        width: 400px;
        height: 100%;
        font-size: 18px;
        text-indent: 1em;
        color: #ffffff;
        background-color: rgba(24, 79, 202, 0.75);
        border: 1px solid rgb(0, 92, 169);
        border-radius: 20px 0 0 20px;
        vertical-align: top;
    }

    input:focus {
        outline: none;
    }

    input::-webkit-input-placeholder {
        color: rgba(238, 238, 238, 0.7);
    }

    .clear {
        position: absolute;
        top: 0;
        right: 70px;
        cursor: pointer;

        img {
            width: 16px;
            height: 16px;
            margin-top: 10px;
        }
    }

    button {
        font-size: 24px;
        font-weight: 700;
        width: 60px;
        height: 100%;
        background-color: $table-body-tr-n-color;
        color: #fff;
        border: 1px solid rgb(0, 92, 169);
        cursor: pointer;
        border-radius: 0 20px 20px 0;
    }

    button:active {
        background-color: $table-body-tr-2n-color;
        border: 1px solid rgb(0, 92, 169);
    }
}

.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>

 src/views/activity/index.vue

@@ -2,9 +2,9 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-06 14:56:01
 * @LastEditTime: 2023-03-06 17:33:41
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * @Description: 安保活
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
-->
@@ -30,7 +30,7 @@
                        <input type="text" placeholder="请输入…" v-model="searchActivity" class="category-input"
                            @input="inputChange" />
                        <div class="clear" v-show="isShowActivityClearBtn" @click="clearActivitySearchValue" title="清空">
                            <img src="../../../public/img/icon/clear.png" alt />
                            <img src="/img/icon/clear.png" alt />
                        </div>
                        <button class="category-button el-icon-search" @click="searchClick"></button>
                    </div>
@@ -70,118 +70,18 @@
            </div>
        </div>

        <div v-show="dialogVisible && isShowActivityEditBox" class="draw-btn-box">
            <div class="left">
                <h3>预案布置</h3>
                <div>
                    <span>警力资源：</span>
                    <ul>
                        <li>
                            <button @click="draw('billboard', 'policeman')" title="警员">
                                <img src="../../../public/img/icon/police-people-btn.png" style="height:100%" />
                            </button>
                        </li>
                        <li>
                            <button @click="draw('billboard', 'policecar')" title="警车">
                                <img src="../../../public/img/icon/car-btn.png" style="height:100%" />
                            </button>
                        </li>
                    </ul>
                </div>
                <div>
                    <span>作战标绘：</span>

                    <ul>
                        <li>
                            <button @click="drawArrow('attack_arrow')" title="进攻箭头">进攻箭头</button>
                        </li>
                        <li>
                            <button @click="drawArrow('double_arrow')" title="双箭头">双箭头</button>
                        </li>
                        <li>
                            <button @click="drawArrow('fine_arrow')" title="直箭头">直箭头</button>
                        </li>
                        <li>
                            <button @click="drawArrow('tailed_attack_arrow')" title="燕尾箭头">燕尾箭头</button>
                        </li>
                        <li>
                            <button @click="drawArrow('polygon')" title="多边形">多边形</button>
                    </li>
                        <li>
                            <button @click="drawArrow('billboard', 'icon1')" title="头像1">头像1</button>
                        </li>
                    </ul>
                </div>
                <div>
                    <span>巡逻路线：</span>
                    <ul>
                        <li>
                            <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ></el-button>-->
                            <button @click="draw('polyline', 'policecar')" title="巡逻路线">
                                <img src="../../../public/img/icon/route1.png" style="height:100%" />
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right" v-if="false">
                <ul>
                    <li>
                        <button @click="removeAllArrow()">清除</button>
                    </li>
                    <li>
                        <button>保存</button>
                    </li>
                </ul>
            </div>
        </div>
        <draw-btn-box ref="DRAWBTNBOX" :dialogVisible="dialogVisible" :isShowActivityEditBox="isShowActivityEditBox"
            :showingSecurityId="showingSecurityId" :policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch"
            :arrowBtnSwitch="arrowBtnSwitch" :policeIconId="policeIconId" :lineWidth="lineWidth"></draw-btn-box>

        <div class="second-container" :class="{ 'spread': boxShow, 'take-back': !boxShow }">
            <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick"></el-tree>
        </div>
        <div v-show="dialogVisible" class="activity-details-box">
            <div class="title">
                活动详情
                <div class="close" @click="closeActivityDetails"></div>
            </div>
            <div class="row-box">
                <div class="category">活动名称：</div>
                <div class="category-value">{{ activityDetails.name }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动时间：</div>
                <div class="category-value">{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
            </div>
            <div class="row-box">
                <div class="category">负责人：</div>
                <div class="category-value">{{ activityDetails.person }}</div>
            </div>
            <div class="row-box">
                <div class="category">联系方式：</div>
                <div class="category-value">{{ activityDetails.contact }}</div>
            </div>
            <div class="row-box">
                <div class="category">负责单位：</div>
                <div class="category-value">{{ activityDetails.company }}</div>
            </div>
            <div class="row-box">
                <div class="category">所属辖区：</div>
                <div class="category-value">{{ activityDetails.deptName }}</div>
            </div>
            <div class="row-box">
                <div class="category">人数：</div>
                <div class="category-value">{{ activityDetails.number }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动地点：</div>
                <div class="category-value">{{ activityDetails.place }}</div>
            </div>
            <div class="row-box">
                <div class="category">活动内容：</div>
                <div class="category-value">{{ activityDetails.content }}</div>
            </div>
        </div>

        <activity-detail :dialogVisible="dialogVisible" :activityDetails="activityDetails"
            @closeActivityDetails="closeActivityDetails"></activity-detail>

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

        <div class="plan-control" v-show="dialogVisible && (isHavePolice || isHaveArrow || isHaveLine)">
            <div class="row-box" v-show="isHavePolice">
@@ -234,103 +134,95 @@
            </ul>
        </div>

        <div class="search-content">
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />

        <div>
            <div class="item video1" v-show="videoShow">
                <video-loading v-show="isShowVideoLoading.video1"></video-loading>
                <div class="select" v-show="isShowSelect.video1">
                    <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })"
                        placeholder="请选择" ref="videoSelect1">
                        <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
                            class="activity-video-option-css">
                            <div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }">
                            </div>
                            {{ item.label }}
                        </el-option>
                    </el-select>
                </div>
                <div class="video" v-show="isHaveMonitor.video1">
                    <video id="videoElement1" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                </div>
                <div class="no-video" v-show="!isHaveMonitor.video1">
                    {{ playVideoHolders.text1 }}
                </div>
            </div>
            <button @click="searchExtensivelyClick" class="el-icon-search"></button>

            <div class="item video2" v-show="videoShow">
                <video-loading v-show="isShowVideoLoading.video2"></video-loading>
                <div class="select" v-show="isShowSelect.video2">
                    <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })"
                        placeholder="请选择" ref="videoSelect2">
                        <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
                            class="activity-video-option-css">
                            <div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }">
                            </div>
                            {{ item.label }}
                        </el-option>
                    </el-select>
                </div>
                <div class="video" v-show="isHaveMonitor.video2">
                    <video id="videoElement2" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                </div>
                <div class="no-video" v-show="!isHaveMonitor.video2">
                    {{ playVideoHolders.text2 }}
                </div>
            </div>

            <div class="item video3" v-show="videoShow">
                <video-loading v-show="isShowVideoLoading.video3"></video-loading>
                <div class="select" v-show="isShowSelect.video3">
                    <el-select size="small" v-model="monitor.type3" v-show="isShowSelect.video3"
                        @change="((val) => { navClick(val, 3) })" placeholder="请选择" ref="videoSelect3">
                        <el-option v-show="isShowSelect.video3" v-for="item in monitorOption" :key="item.value"
                            :label="item.label" :value="item.value" class="activity-video-option-css">
                            <div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }">
                            </div>
                            {{ item.label }}
                        </el-option>
                    </el-select>
                </div>
                <div class="video" v-show="isHaveMonitor.video3">
                    <video id="videoElement3" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                </div>
                <div class="no-video" v-show="!isHaveMonitor.video3">
                    {{ playVideoHolders.text3 }}
                </div>
            </div>

            <div class="item video4" v-show="videoShow">
                <video-loading v-show="isShowVideoLoading.video4"></video-loading>
                <div class="select" v-show="isShowSelect.video4">
                    <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })"
                        placeholder="请选择" ref="videoSelect4">
                        <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
                            class="activity-video-option-css">
                            <div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }">
                            </div>
                            {{ item.label }}
                        </el-option>
                    </el-select>
                </div>
                <div class="video" v-show="isHaveMonitor.video4">
                    <video id="videoElement4" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
                </div>
                <div class="no-video" v-show="!isHaveMonitor.video4">
                    {{ playVideoHolders.text4 }}
                </div>
            </div>

            <div class="deleteVideo" v-show="videoShow" @click="closeVideo">关闭</div>
        </div>

        <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>

        <div class="item video1" v-show="videoShow">
            <video-loading v-show="isShowVideoLoading.video1"></video-loading>
            <div class="select" v-show="isShowSelect.video1">
                <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })" placeholder="请选择"
                    ref="videoSelect1">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
                        class="activity-video-option-css">
                        <div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }"></div>
                        {{ item.label }}
                    </el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video1">
                <video id="videoElement1" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video1">
                {{ playVideoHolders.text1 }}
            </div>
        </div>

        <div class="item video2" v-show="videoShow">
            <video-loading v-show="isShowVideoLoading.video2"></video-loading>
            <div class="select" v-show="isShowSelect.video2">
                <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })" placeholder="请选择"
                    ref="videoSelect2">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
                        class="activity-video-option-css">
                        <div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }"></div>
                        {{ item.label }}
                    </el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video2">
                <video id="videoElement2" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video2">
                {{ playVideoHolders.text2 }}
            </div>
        </div>

        <div class="item video3" v-show="videoShow">
            <video-loading v-show="isShowVideoLoading.video3"></video-loading>
            <div class="select" v-show="isShowSelect.video3">
                <el-select size="small" v-model="monitor.type3" v-show="isShowSelect.video3"
                    @change="((val) => { navClick(val, 3) })" placeholder="请选择" ref="videoSelect3">
                    <el-option v-show="isShowSelect.video3" v-for="item in monitorOption" :key="item.value"
                        :label="item.label" :value="item.value" class="activity-video-option-css">
                        <div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }"></div>
                        {{ item.label }}
                    </el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video3">
                <video id="videoElement3" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video3">
                {{ playVideoHolders.text3 }}
            </div>
        </div>

        <div class="item video4" v-show="videoShow">
            <video-loading v-show="isShowVideoLoading.video4"></video-loading>
            <div class="select" v-show="isShowSelect.video4">
                <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })" placeholder="请选择"
                    ref="videoSelect4">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
                        class="activity-video-option-css">
                        <div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }"></div>
                        {{ item.label }}
                    </el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video4">
                <video id="videoElement4" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video4">
                {{ playVideoHolders.text4 }}
            </div>
        </div>

        <div class="deleteVideo" v-show="videoShow" @click="closeVideo">关闭</div>

        <el-dialog :title="policeChooseCarTitle" :modal="false" :visible.sync="policeChooseCarVisible"
            :before-close="policeChooseCarBeforeClose" :close-on-click-modal="true" class="choose-policeCar-box">
@@ -463,20 +355,18 @@
</template>

<script>
import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, updateActivityCar, getServiceDictionary, getActivityType, addSecurityPlot, getSecurityPlotList, updateSecurityPlot, deleteActivityCar, deleteActivityPolice, deleteSecurityPlot, getSearchInfo, getPolicemanTree } from '@/api/activity/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, getServiceDictionary, getActivityType, addSecurityPlot, getSecurityPlotList, deleteActivityCar, deleteActivityPolice, deleteSecurityPlot, getSearchInfo, getPolicemanTree } from '@/api/activity/index.js'
import { getRegionList, getDevices } from '@/api/video/index.js'
import { getEquipmentAll } from '@/api/home/index.js'
import flvjs from 'flv.js'
import activityDetail from './components/activityDetail.vue'
import drawBtnBox from './components/drawBtnBox.vue'
import mapSearchBox from './components/mapSearchBox.vue'

let drawLayers = null
let drawArrowLayers = null
let polylineAreaLayer = null
let arrowsListLayer = null
let pointCircleManLayer = null
let pointCircleCarLayer = null
let plot = undefined
let arrowPlot = undefined
let lineLayer = undefined

let tc = undefined
@@ -628,9 +518,8 @@
            showingSecurityId: '',
            policeIconIsCreated: false,
            policeIconId: {},
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],


            isHavePoliceCar: false,
            isHavePoliceMan: false,
            isHaveArrow: false,
@@ -745,6 +634,8 @@
        }
    },

    components: { activityDetail, drawBtnBox, mapSearchBox },

    created () {
        let userInfo = sessionStorage.getItem("userInfo")
        if (userInfo != null) {
@@ -771,18 +662,6 @@
    mounted () {
        this.$parent.$parent.resize('400px', true)
        this.$nextTick(() => {
            if (drawLayers == null) {
                drawLayers = new global.DC.VectorLayer('drawLayers')
                global.viewer.addLayer(drawLayers)
                plot = new global.DC.Plot(global.viewer)
            }

            if (drawArrowLayers == null) {
                drawArrowLayers = new global.DC.VectorLayer('drawArrowLayers')
                global.viewer.addLayer(drawArrowLayers)
                arrowPlot = new global.DC.Plot(global.viewer)
            }

            if (pointCircleManLayer == null) {
                pointCircleManLayer = new global.DC.VectorLayer('pointCircleManLayer')
                global.viewer.addLayer(pointCircleManLayer)
@@ -915,7 +794,8 @@

        // 获取活动警员分布信息
        getSecurityPoliceList (securityId, pointShow) {
            this.removeAll()
            this.$refs.DRAWBTNBOX.removeDraw()

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
@@ -1005,7 +885,8 @@

        // 获取活动警车分布信息
        getSecurityCarList (securityId, pointShow, polylineShow) {
            this.removeAll()
            this.$refs.DRAWBTNBOX.removeDraw()

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newCarDrawLayers',
                type: 'VectorLayer'
@@ -1191,25 +1072,6 @@
            })
        },

        // 修改活动警车
        // id活动id, carId警车id, color颜色, width巡逻路线范围宽度, type线面类型, position坐标
        updateActivityCar (params) {
            updateActivityCar(params).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '保存失败',
                        type: 'error'
                    })
                }
                this.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch)
            })
        },

        // 活动添加警车和范围
        // carId警车id, position坐标, securityId活动id, type线面类型，width缓存范围，color范围颜色
        addCarAndRange (params) {
@@ -1381,8 +1243,8 @@
                return
            }

            this.removeAll()
            this.removeAllArrow()
            this.$refs.DRAWBTNBOX.removeDraw()
            this.$refs.DRAWBTNBOX.removeDrawArrow()
            arrowsListLayer != null && arrowsListLayer.clear()

            this.$EventBus.$emit('mapClearLayer', {
@@ -1501,182 +1363,6 @@
            }
        },

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

                if (poltType == 'billboard' && policeType == 'policeman') {
                    overlay.icon = '/img/icon/police-people.png'
                } else if (poltType == 'billboard' && policeType == 'policecar') {
                    overlay.icon = '/img/policeCar.jfif'
                }


                if (overlay) {
                    drawLayers.addOverlay(overlay)

                    plot.edit(overlay, (e) => {
                        // drawLayers.addOverlay(overlay)

                        flag = true

                        overlay.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)

                        overlay.drawType = poltType

                        overlay.policeType = policeType

                        this.overlayObj = overlay

                        document.oncontextmenu = function () {
                            if (flag == true && poltType == 'billboard') {
                                if (policeType == 'policeman') {
                                    that.searchPoliceTreeId = ''
                                    that.searchPoliceTreeName = ''
                                    that.choosePoliceColor = '#FF0000'
                                    that.policeChooseVisible = true
                                } else if (policeType == 'policecar') {
                                    that.policeOption = that.policecarOption
                                    that.chooseCarColor = '#FF0000'
                                    that.policeChooseCarVisible = true
                                }
                                flag = false
                            } else if (flag == true && poltType == 'polyline') {
                                let position = ''
                                overlay._positions.forEach(item => {
                                    position += item._lng + ' ' + item._lat + ','
                                })
                                position = position.slice(0, position.length - 1)
                                that.polylineBtnSwitch = true
                                that.lineEditTitle = '新增巡逻路线'
                                that.isLineEdit = false
                                that.chooseColor = '#1CA085'
                                that.lineWidth = 100
                                that.addLinePosition = position
                                that.lineEditVisible = true
                                flag = false
                            }
                        }
                    })
                }
            }, { material: global.DC.Color.RED })
        },

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

        /**
         * @description: 箭头
         * @return {*}
         */
        removeAllArrow () {
            drawArrowLayers != null && drawArrowLayers.clear()
        },

        drawArrow (type, iconType) {
            if (type == 'polygon') {
                const that = this
                let flag = false
                plot && plot.draw(type, overlay => {
                    if (overlay) {
                        drawArrowLayers.addOverlay(overlay)
                        plot.edit(overlay, (e) => {
                            flag = true
                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)
                            this.polygonPositionStr = positionStr
                            this.plotSaveType = 5
                            // overlay.on(global.DC.MouseEventType.CLICK, this.polygonClick)
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.choosePlotColor = '#409EFF'
                                    that.choosePlotColorAlpha = 48
                                    that.polygonAreaType = 1
                                    that.isNeedName = true
                                    that.isNeedPolygonType = true
                                    that.polygonName = ''
                                    that.polygonAddVisible = true
                                    flag = false
                                }
                            }
                        })
                    }
                }, { material: global.DC.Color.RED })
            } else if (type == 'billboard') {
                console.log(11)
                const that = this
                let flag = false

                plot && plot.draw(type, overlay => {
                    if (iconType == 'icon1') {
                        overlay.icon = '/img/icon/icon1.png'
                        this.plotSaveType = 6
                    }
                    if (overlay) {
                        drawArrowLayers.addOverlay(overlay)
                        plot.edit(overlay, (e) => {
                            flag = true
                            this.plotPointPositionStr = overlay._positions._lng + ' ' + overlay._positions._lat
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.choosePlotColor = '#409EFF'
                                    that.choosePlotColorAlpha = 48
                                    that.polygonAddVisible = true
                                    that.isNeedName = false
                                    flag = false
                                }
                            }
                        })
                    }
                })
            } else {
                const that = this
                let flag = false
                arrowPlot && arrowPlot.draw(type, overlay => {
                    if (overlay) {
                        let plotType = ''
                        if (type == 'attack_arrow') {
                            plotType = 1
                        } else if (type == 'double_arrow') {
                            plotType = 2
                        } else if (type == 'fine_arrow') {
                            plotType = 3
                        } else if (type == 'tailed_attack_arrow') {
                            plotType = 4
                        }
                        this.plotSaveType = plotType
                        plot.edit(overlay, (e) => {
                            flag = true
                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)
                            this.arrowPositionStr = positionStr
                            drawArrowLayers.addOverlay(overlay)
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.choosePlotColor = '#409EFF'
                                    that.isNeedName = false
                                    that.isNeedPolygonType = false
                                    that.polygonAddVisible = true
                                    flag = false
                                }
                            }
                        })
                    }
                }, { material: global.DC.Color.RED })
            }
        },

        /**
         * @description: 轨迹开始
         * @return {*}
@@ -1737,29 +1423,28 @@
            this.policeChooseVisible = false
            this.policeChooseCarVisible = false
            this.overlayObj2 = {}
            this.removeAll()
            this.$refs.DRAWBTNBOX.removeDraw()
        },

        // 取消保存多边形
        cancelSavePolygon () {
            this.polygonAddVisible = false
            if (drawArrowLayers != null) {
                drawArrowLayers.clear()
            }

            this.$refs.DRAWBTNBOX.removeDrawArrow()
        },

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

        // 选择警车关闭
        policeChooseCarBeforeClose () {
            this.policeChooseCarVisible = false
            this.policeIconIsCreated = false
            this.removeAll()
            this.$refs.DRAWBTNBOX.removeDraw()
        },

        // 选择警员确认按钮
@@ -1815,7 +1500,7 @@
                    this.updateActivityPolice({ id: this.policeIconId, policemanId: this.searchPoliceTreeId, color: this.choosePoliceColor })
                    this.policeChooseVisible = false
                } else if (this.policeChooseCarVisible == true) {
                    this.updateActivityCar({ id: this.policeIconId, carId: this.policeType, color: this.chooseCarColor })
                    this.$refs.DRAWBTNBOX.updateActivityCar({ id: this.policeIconId, carId: this.policeType, color: this.chooseCarColor })
                    this.policeChooseCarVisible = false
                }
                this.policeIconIsCreated = false
@@ -1850,9 +1535,8 @@
        // 取消保存巡逻路线
        cancelSaveLine () {
            this.lineEditVisible = false
            if (drawLayers != null) {
                drawLayers.clear()
            }

            this.$refs.DRAWBTNBOX.removeDraw()
        },

        // 巡逻路线面点击事件
@@ -1899,7 +1583,7 @@
        // 获取活动标绘箭头列表
        getSecurityPlotList (securityId, arrowShow) {
            arrowsListLayer.clear()
            this.removeAllArrow()
            this.$refs.DRAWBTNBOX.removeDrawArrow()
            if (!arrowShow) return
            getSecurityPlotList(securityId).then(res => {
                this.isHaveArrow = res.data.data.some(item => {
@@ -1914,10 +1598,10 @@
                    if (item.color == '') {
                        color = global.DC.Namespace.Cesium.Color.fromBytes(255, 69, 0, 173)
                    } else {
                       let r = parseInt(item.color.slice(1, 3), 16)
                         let g = parseInt(item.color.slice(3, 5), 16)
                        let r = parseInt(item.color.slice(1, 3), 16)
                        let g = parseInt(item.color.slice(3, 5), 16)
                        let b = parseInt(item.color.slice(5, 7), 16)
                        let a = Math.floor(Number(item.color.split(',')[1])*2.55)
                        let a = Math.floor(Number(item.color.split(',')[1]) * 2.55)
                        color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                    }
                    if (item.type == 1) {
@@ -1970,16 +1654,16 @@
                        // })
                    } else if (item.type == 6) {
                        let iconImgName = ''
                        if(item.type == 6){
                        if (item.type == 6) {
                            iconImgName = 'icon1'
                        }
                        position = position.split(';')[0].split(',')
                        position = new global.DC.Position(Number(position[0]), Number(position[1]))
                        chooseArrow= new global.DC.Billboard(position, `/img/icon/${iconImgName}.png`)
                        chooseArrow = new global.DC.Billboard(position, `/img/icon/${iconImgName}.png`)
                        arrowsListLayer.addOverlay(chooseArrow)
                        let point = new global.DC.Point(position)
                        arrowsListLayer.addOverlay(point)
                        point.attrParams = { 'id': item.id, 'color': item.color,item }
                        point.attrParams = { 'id': item.id, 'color': item.color, item }
                        point.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
                        point.setStyle({
                            "color": color, //颜色
@@ -1988,13 +1672,13 @@
                            "pixelSize": 32,
                        })
                    }
                    
                    chooseArrow.attrParams = { 'id': item.id, 'color': item.color,item }

                    chooseArrow.attrParams = { 'id': item.id, 'color': item.color, item }
                    chooseArrow.setStyle({
                        "material": color,
                    })
                    chooseArrow.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
                    

                    // let position1 = new global.DC.Position(117.94218262137659, 28.434842894894153)
                    // let Label = new global.DC.Label(position1, 'test')
                    // Label.on(global.DC.MouseEventType.LEFT_DOWN, this.reeditArrowLeftDown)
@@ -2007,16 +1691,7 @@

        // 双击修改箭头
        reeditArrowDbClick (e) {
            let overlayData = e.overlay
            plot.edit(overlayData, (e) => {
                let position = ''
                overlayData._positions.forEach(item => {
                    position += item._lng + ' ' + item._lat + ','
                })
                position = position.slice(0, position.length - 1)
                drawArrowLayers.addOverlay(overlayData)
                this.updateSecurityPlot({ id: overlayData.attrParams.id, position: position })
            })
            this.$refs.DRAWBTNBOX.plotEdit(e.overlay, 'arrow')
        },

        // 单击。标绘箭头
@@ -2038,18 +1713,18 @@
        },

        // 左键按下标绘
        reeditArrowLeftDown(e){
           console.log('reeditArrowLeftDown--ee',e);
        reeditArrowLeftDown (e) {
            console.log('reeditArrowLeftDown--ee', e)
        },

        // 左键抬起标绘
        reeditArrowLeftUp(e){
            console.log('reeditArrowLeftUp--ee',e);
        reeditArrowLeftUp (e) {
            console.log('reeditArrowLeftUp--ee', e)
        },

        // 移动标绘
        reeditArrowMouseMove(e){
            console.log('reeditArrowMouseMove--ee',e);
        reeditArrowMouseMove (e) {
            console.log('reeditArrowMouseMove--ee', e)
        },

        // 编辑标绘
@@ -2061,33 +1736,11 @@
        // 保存标绘修改
        savePlot () {
            // this.updateSecurityPlot({ id: this.plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha, name: this.polygonName })
            this.updateSecurityPlot({ id: this.plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha })
            this.$refs.DRAWBTNBOX.updateSecurityPlot({ id: this.plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha })
            this.editPlotVisible = false
        },

        updateSecurityPlot (params) {
            updateSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    })
                }
                this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch)
            })
        },

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

        // 搜索数据地图对应场所
        getSearchInfo (deptId, search, iconType) {
@@ -2111,99 +1764,11 @@
            })
        },

        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()
        },

        clearActivitySearchValue () {
            this.searchActivity = ''
            this.inputChange()
            this.searchClick()
        },


        navClick (val, args) {
            if (this.valChoosed == val && this.argsChoosed == args) return
@@ -2427,7 +1992,7 @@

        // 保存巡逻路线信息
        saveLineInfo () {
            this.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth })
            this.$refs.DRAWBTNBOX.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth })
            this.lineEditVisible = false
        },

@@ -2461,16 +2026,8 @@
                layerName: 'newCarDrawLineLayers',
                type: 'VectorLayer'
            })
            let overlayData = this.lineObjdata
            plot.edit(overlayData, (e) => {
                let position = ''
                overlayData._positions.forEach(item => {
                    position += item._lng + ' ' + item._lat + ','
                })
                position = position.slice(0, position.length - 1)
                lineLayer.addOverlay(overlayData)
                this.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth, type: 1, position: position })
            })

            this.$refs.DRAWBTNBOX.plotEdit(this.lineObjdata, 'line')
        },

        // 点击区域
@@ -2481,14 +2038,14 @@
        // 保存绘制区域
        savePolygonInfo () {
            let positionStr = ''
            if(this.plotSaveType >=1 &&this.plotSaveType <=4) {
            if (this.plotSaveType >= 1 && this.plotSaveType <= 4) {
                positionStr = this.arrowPositionStr
            }else if (this.plotSaveType == 5) {
            } else if (this.plotSaveType == 5) {
                positionStr = this.polygonPositionStr
            }else if (this.plotSaveType >= 6) {
                positionStr = this.plotPointPositionStr + ',' + this.plotPointPositionStr 
            } else if (this.plotSaveType >= 6) {
                positionStr = this.plotPointPositionStr + ',' + this.plotPointPositionStr
            }
            this.addSecurityPlot({ securityId: this.showingSecurityId, position: positionStr, type: this.plotSaveType, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,areaType:this.polygonAreaType })
            this.addSecurityPlot({ securityId: this.showingSecurityId, position: positionStr, type: this.plotSaveType, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha, areaType: this.polygonAreaType })
            this.polygonAddVisible = false
        },

@@ -2724,10 +2281,7 @@
            type: 'VectorLayer'
        })

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


        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'polygonLayer',
@@ -2748,8 +2302,8 @@
        if (pointCircleCarLayer != null) {
            pointCircleCarLayer.remove()
        }
        this.removeAll()
        this.removeAllArrow()
        this.$refs.DRAWBTNBOX.removeDraw()
        this.$refs.DRAWBTNBOX.removeDrawArrow()
        if (tc) {
            tc.remove()
        }
@@ -2943,73 +2497,6 @@
        }
    }

    .draw-btn-box {
        position: fixed;
        display: flex;
        // left: 50%;
        left: calc(810 / 1920 * 100vw);
        bottom: 40px;
        color: #fff;
        background: $bg-one-color;
        white-space: nowrap;
        // transform: translate(-50%, 0);

        .left,
        .right {
            height: 100%;

            &>div {
                display: flex;
            }

            ul {
                display: flex;

                li {
                    button {
                        height: 30px;
                        margin: 0 5px;
                        background-color: $bg-color;
                        border: 1px solid #cecece;
                        border-radius: 4px;
                        color: #fff;
                        cursor: pointer;
                        outline: none;
                    }
                }
            }
        }

        .left {
            width: 80%;

            h3 {
                font-size: 16px;
                height: 30px;
                line-height: 30px;
                width: 100%;
                padding-left: 16%;
            }
        }

        .right {
            width: 20%;
            padding-top: 35px;

            ul {
                flex-direction: column;

                li {
                    height: 50px;

                    button {
                        background-color: #2a56cf;
                    }
                }
            }
        }
    }

    .second-container {
        position: absolute;
        top: 10px;
@@ -3038,56 +2525,6 @@

    .second-container.take-back {
        left: 10px;
    }

    .activity-details-box {
        position: fixed;
        top: 90px;
        right: 10px;
        width: 400px;
        padding: 10px;
        border-radius: 10px;
        color: #fff;
        background: $bg-color;
        overflow-x: hidden;
        overflow-y: auto;

        .title {
            position: relative;
            height: 36px;
            line-height: 36px;

            .close {
                position: absolute;
                top: 50%;
                right: 0;
                transform: translate(0, -50%);
                cursor: pointer;
            }

            .close::before {
                content: '\e6db';
                font-family: element-icons;
            }
        }

        .row-box {
            width: 100%;
            line-height: 28px;
            display: flex;

            &>div {
                text-align: left;
            }

            .category {
                width: 96px;
            }

            .category-value {
                flex: 1;
            }
        }
    }

    .plan-control {
@@ -3154,93 +2591,7 @@
        }
    }

    .search-content {
        position: absolute;
        position: fixed;
        z-index: 99;
        left: 760px;
        top: 40px;
        width: 460px;
        height: 36px;

        input {
            flex: 1;
            width: 400px;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(24, 79, 202, 0.75);
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
            vertical-align: top;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        .clear {
            position: absolute;
            top: 0;
            right: 70px;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
                margin-top: 10px;
            }
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 60px;
            height: 100%;
            background-color: $table-body-tr-n-color;
            color: #fff;
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: $table-body-tr-2n-color;
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .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;
            }
        }
    }

    .item {
        background-color: $bg-color;