部分封装

shuishen

2022-10-20 85bacacb26f67ba5620d0231a2e73c8044584617

部分封装

 src/utils/1.js

New file
@@ -0,0 +1,143 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-10-19 14:30:47
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-19 14:41:28
 * @FilePath: \srs-police-affairs\src\utils\1.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */
export default class EntityDraw {

    drawPolygonLayer = null
    drawPointLayer = null
    activeShapePoints = []
    activeShape = null

    constructor() {
        this.initLayer()
    }

    initLayer () {
        // 添加面图层
        this.drawPolygonLayer = new global.DC.VectorLayer('drawPolygonLayer')
        global.viewer.addLayer(this.drawPolygonLayer)

        // 添加点图层
        this.drawPointLayer = new global.DC.VectorLayer('drawPointLayer')
        global.viewer.addLayer(this.drawPointLayer)
    }

    activate () {
        this.deactivate()
        //鼠标左键点击事件 鼠标左键点击拾取需要编辑的对象
        this.initLeftClickEventHandler()


    }

    deactivate () {
        global.viewer.on(global.DC.MouseEventType.DB_CLICK, e => {
            return
        })
    }

    registerEvents () {
        global.viewer.tooltip.enable = true
        global.viewer.on(global.DC.MouseEventType.CLICK, this.leftEvent)
        global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.moveEvent)
        global.viewer.on(global.DC.MouseEventType.RIGHT_CLICK, this.rightEvent)
    }

    unRegisterEvents () {
        global.viewer.tooltip.enable = false
        global.viewer.off(global.DC.MouseEventType.CLICK, this.leftEvent)
        global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.moveEvent)
        global.viewer.off(global.DC.MouseEventType.RIGHT_CLICK, this.rightEvent)
    }

    drawGraph (positionData) {
        let graph

        graph = global.viewer.entities.add({
            polygon: {
                hierarchy: positionData,
                material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
                    global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
                ),
            }
        })

        return graph
    }

    leftEvent (event) {
        let point = new global.DC.Point(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat))

        point.setStyle({
            pixelSize: 10,
            color: global.DC.Color.RED, //颜色
            outlineColor: global.DC.Color.WHITE, //边框颜色
            outlineWidth: 2, //边框大小，
        })

        this.drawPointLayer.addOverlay(point)

        if (this.activeShapePoints.length === 0) {
            this.activeShapePoints.push(event.surfacePosition)

            const dynamicPositions = new global.DC.Namespace.Cesium.CallbackProperty(function () {
                return new global.DC.Namespace.Cesium.PolygonHierarchy(this.activeShapePoints)
            }, false)

            this.activeShape = this.drawGraph(dynamicPositions)
        }

        this.activeShapePoints.push(event.surfacePosition)
    }

    moveEvent (event) {

        global.viewer.tooltip.showAt(event.windowPosition, '左击选择点位，右击结束')

        if (this.activeShapePoints.length >= 2) {
            this.activeShapePoints.pop()

            this.activeShapePoints.push(event.surfacePosition)
        }

    }

    rightEvent (event) {

        if (this.activeShapePoints.length < 4) {
            global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成面，请继续添加点')
            return
        }

        this.terminateShape()

    }

    terminateShape () {
        this.activeShapePoints.pop()

        this.drawGraph(this.activeShapePoints)

        global.viewer.entities.remove(this.activeShape)

        this.drawPointLayer.clear()

        this.drawPointLayer.remove()

        this.drawPointLayer = null

        this.activeShape = undefined

        this.activeShapePoints = []

        this.unRegisterEvents()
    }

}

 src/utils/EntityDraw.js

New file
@@ -0,0 +1,204 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-10-18 17:17:50
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-20 10:10:26
 * @FilePath: \srs-police-affairs\src\utils\EntityDraw.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */

export default class EntityDraw {

    drawPolygonLayer = null

    drawPointLayer = null

    activeShapePoints = []

    activeShape = null

    drawCompletePosition = []

    constructor() {
        // 去除双击
        this.deactivate()

        // 初始化图层
        this.initLayer()

        // 修改this指向
        this.getLeftEvent = this.getLeftEvent.bind(this)
        this.getMoveEvent = this.getMoveEvent.bind(this)
        this.getRightEvent = this.getRightEvent.bind(this)
    }

    initLayer () {
        // 添加面图层
        this.drawPolygonLayer = new global.DC.VectorLayer('drawPolygonLayer')
        global.viewer.addLayer(this.drawPolygonLayer)

        // 添加点图层
        this.drawPointLayer = new global.DC.VectorLayer('drawPointLayer')
        global.viewer.addLayer(this.drawPointLayer)
    }

    activate () {
        this.drawCompletePosition = []

        this.clearLayer()

        if (this.activeShapePoints.length > 0) {
            this.clickInTheProcess()
        }

        //鼠标左键点击事件 鼠标左键点击拾取需要编辑的对象
        this.registerEvents()
    }

    deactivate () {
        global.viewer.on(global.DC.MouseEventType.DB_CLICK, e => {
            return
        })
    }

    // 注册
    registerEvents () {
        global.viewer.tooltip.enable = true
        global.viewer.on(global.DC.MouseEventType.CLICK, this.getLeftEvent)
        global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.getMoveEvent)
        global.viewer.on(global.DC.MouseEventType.RIGHT_CLICK, this.getRightEvent)
    }

    // 解绑
    unRegisterEvents () {
        global.viewer.tooltip.enable = false
        global.viewer.off(global.DC.MouseEventType.CLICK, this.getLeftEvent)
        global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.getMoveEvent)
        global.viewer.off(global.DC.MouseEventType.RIGHT_CLICK, this.getRightEvent)
    }

    // 绘制多边形
    drawGraph (positionData) {
        let graph

        graph = global.viewer.entities.add({
            polygon: {
                hierarchy: positionData,
                material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
                    global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
                ),
            }
        })

        return graph
    }

    // 左键
    getLeftEvent (event) {
        this.leftEvent(event)
    }

    leftEvent (event) {
        const that = this

        let point = new global.DC.Point(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat))

        point.setStyle({
            pixelSize: 10,
            color: global.DC.Color.RED, //颜色
            outlineColor: global.DC.Color.WHITE, //边框颜色
            outlineWidth: 2, //边框大小，
        })

        that.drawPointLayer.addOverlay(point)

        if (that.activeShapePoints.length === 0) {
            that.activeShapePoints.push(event.surfacePosition)

            const dynamicPositions = new global.DC.Namespace.Cesium.CallbackProperty(function () {
                return new global.DC.Namespace.Cesium.PolygonHierarchy(that.activeShapePoints)
            }, false)

            that.activeShape = that.drawGraph(dynamicPositions)

        }

        that.activeShapePoints.push(event.surfacePosition)
    }

    // 移动
    getMoveEvent (event) {
        this.moveEvent(event)
    }

    moveEvent (event) {
        global.viewer.tooltip.showAt(event.windowPosition, '左击选择点位，右击结束')

        if (this.activeShapePoints.length >= 2) {
            this.activeShapePoints.pop()

            this.activeShapePoints.push(event.surfacePosition)
        }
    }

    // 右键
    getRightEvent (event) {
        this.rightEvent(event)
    }

    rightEvent (event) {
        if (this.activeShapePoints.length < 4) {
            global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成面，请继续添加点')
            return
        }

        this.terminateShape()
    }

    // 清除
    terminateShape () {
        this.activeShapePoints.pop()

        this.activeShapePoints.forEach(item => {

            let pointPosition = global.DC.Transform.transformCartesianToWGS84(item)

            this.drawCompletePosition.push({ lng: pointPosition.lng, lat: pointPosition.lat })

        })

        let polygon = new global.DC.Polygon(this.drawCompletePosition)

        polygon.setStyle({
            material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
                global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
            )
        })

        this.drawPolygonLayer.addOverlay(polygon)

        this.clickInTheProcess()
    }

    // 清空
    clickInTheProcess () {
        if (this.activeShape != null) {
            global.viewer.entities.remove(this.activeShape)
        }

        this.drawPointLayer.clear()

        this.activeShape = null

        this.activeShapePoints = []

        this.unRegisterEvents()
    }

    // 清除
    clearLayer () {
        this.drawPolygonLayer.clear()
    }
}

 src/utils/drawPolygon copy.js

New file
@@ -0,0 +1,121 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-10-18 17:17:50
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-19 14:37:23
 * @FilePath: \srs-police-affairs\src\utils\drawPolygon.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */

function measureAreaSpace () {
    // 清除双击事件
    global.viewer.on(global.DC.MouseEventType.DB_CLICK, e => {
        return
    })

    // 添加面图层
    let drawPolygonLayer = new global.DC.VectorLayer('drawPolygonLayer')
    global.viewer.addLayer(drawPolygonLayer)

    // 添加点图层
    let drawPointLayer = new global.DC.VectorLayer('drawPointLayer')
    global.viewer.addLayer(drawPointLayer)

    global.viewer.tooltip.enable = true

    let activeShapePoints = []

    // 绘制多边形
    function drawShape (positionData) {
        let shape
        shape = global.viewer.entities.add({
            polygon: {
                hierarchy: positionData,
                material: new global.DC.Namespace.Cesium.ColorMaterialProperty(
                    global.DC.Namespace.Cesium.Color.NAVAJOWHITE.withAlpha(0.7)
                ),
            }
        })

        return shape
    }

    let activeShape

    // 注册事件
    global.viewer.on(global.DC.MouseEventType.CLICK, leftEvent)
    global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, moveEvent)
    global.viewer.on(global.DC.MouseEventType.RIGHT_CLICK, rightEvent)

    // 左键事件
    let leftEvent = event => {

        let point = new global.DC.Point(new global.DC.Position(event.wgs84SurfacePosition.lng, event.wgs84SurfacePosition.lat))

        point.setStyle({
            pixelSize: 10,
            color: global.DC.Color.RED, //颜色
            outlineColor: global.DC.Color.WHITE, //边框颜色
            outlineWidth: 2, //边框大小，
        })

        drawPointLayer.addOverlay(point)

        if (activeShapePoints.length === 0) {
            activeShapePoints.push(event.surfacePosition)

            const dynamicPositions = new global.DC.Namespace.Cesium.CallbackProperty(function () {
                return new global.DC.Namespace.Cesium.PolygonHierarchy(activeShapePoints)
            }, false)

            activeShape = drawShape(dynamicPositions)
        }

        activeShapePoints.push(event.surfacePosition)
    }

    // 移动事件
    let moveEvent = event => {

        global.viewer.tooltip.showAt(event.windowPosition, '左击选择点位，右击结束')

        if (activeShapePoints.length >= 2) {
            activeShapePoints.pop()

            activeShapePoints.push(event.surfacePosition)
        }

    }

    // 右键事件
    let rightEvent = event => {

        if (activeShapePoints.length < 4) {
            global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成面，请继续添加点')
            return
        }

        terminateShape()

    }

    function terminateShape () {
        activeShapePoints.pop()
        drawShape(activeShapePoints)
        global.viewer.entities.remove(activeShape)

        drawPointLayer.clear()
        drawPointLayer.remove()
        drawPointLayer = null

        activeShape = undefined
        activeShapePoints = []

        global.viewer.tooltip.enable = false
    }

}

export default measureAreaSpace

 src/views/police/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-18 14:40:16
 * @LastEditTime: 2022-10-18 16:40:56
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -16,51 +16,64 @@
            <div class="interphone" @click="navClick(2)" :class="{'choosed':navType == 2}">手台</div>
        </div>

        <div class="search-box">
            <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
            <button @click="searchClick" class="el-icon-search"></button>
        </div>

        <div v-show="searchValBoxShow" class="search-val-box">
            <div>
                <div
                    @click="searchVlaClick(item)"
                    v-for="(item, index) in searchArray"
                    :key="index"
                >{{item.name}}</div>
        <div class="list-show" ref="tableBox" v-show="!detailFlag">
            <div class="search-box">
                <input
                    v-model="searchValue"
                    @input="searchChange"
                    type="text"
                    placeholder="请输入搜索条件"
                />
                <button @click="searchClick" class="el-icon-search"></button>
            </div>
        </div>

        <div class="list-show" ref="tableBox">
            <div class="car-list" v-show="navType == 1">
                <div class="list-box">
                    <el-table
                        :data="carList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                        :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
                        @cell-click="rowClick"
                        :height="currentTableHeight"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="140"></el-table-column>
                        <el-table-column prop="carType" label="警车类型" width="120"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    @click="handleClick(scope.row)"
                                    type="text"
                                    size="small"
                                >查看</el-button>
                                <el-button type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
            <div v-show="searchValBoxShow" class="search-val-box">
                <div>
                    <div
                        @click="searchVlaClick(item)"
                        v-for="(item, index) in searchArray"
                        :key="index"
                    >{{item.name}}</div>
                </div>
            </div>

            <div class="list" v-show="navType == 1">
                <el-table
                    :data="carList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                    :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
                    :height="currentTableHeight"
                >
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="140"></el-table-column>
                    <el-table-column prop="carType" label="警车类型" width="120"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                                @click="rowClick(scope.row)"
                                type="text"
                                size="small"
                                title="定位"
                            >
                                <i class="el-icon-location"></i>
                            </el-button>
                            <el-button
                                @click="carDetail(scope.row)"
                                type="text"
                                size="small"
                                title="轨迹"
                            >
                                <i class="el-icon-position"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pages">
                    <el-pagination
@@ -74,25 +87,25 @@
                    ></el-pagination>
                </div>
            </div>
            <div class="phone-list" v-show="navType == 2">
                <div class="list-box">
                    <el-table
                        :data="phoneList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                        :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
                        @cell-click="rowClick"
                        :height="currentTableHeight"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称" width="170"></el-table-column>
                        <el-table-column prop="phoneType" label="手台类型" width="180"></el-table-column>
                    </el-table>
                </div>

            <div class="list" v-show="navType == 2">
                <el-table
                    :data="phoneList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                    :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
                    @cell-click="rowClick"
                    :height="currentTableHeight"
                >
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="170"></el-table-column>
                    <el-table-column prop="phoneType" label="手台类型" width="180"></el-table-column>
                </el-table>

                <div class="pages">
                    <el-pagination
                        background
@@ -105,6 +118,54 @@
                    ></el-pagination>
                </div>
            </div>
        </div>

        <div class="track-box" v-show="detailFlag">
            <div>
                <el-button @click="goBack" type="text" size="small" title="轨迹">
                    <i class="el-icon-back"></i>
                </el-button>详细资料及轨迹查询
            </div>
            <ul>
                <li>
                    <div>车辆型号：</div>
                    <div>1</div>
                </li>

                <li>
                    <div>责任人：</div>
                    <div>2</div>
                </li>

                <li>
                    <div>出场日期：</div>
                    <div>3</div>
                </li>

                <li>
                    <div>厂商：</div>
                    <div>4</div>
                </li>

                <li>
                    <div>选择时间：</div>
                    <div class="datetime">
                        <el-date-picker
                            v-model="trackTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            size="mini"
                            :editable="false"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </div>
                </li>

                <li>
                    <el-button type="text" @click="lookTrack">查看轨迹</el-button>
                </li>
            </ul>
        </div>

        <el-dialog
@@ -189,7 +250,9 @@
            searchValue: '',
            searchArray: [],
            searchValBoxShow: false,
            currentTableHeight: 0
            currentTableHeight: 0,
            detailFlag: false,
            trackTime: [],
        }
    },
    created () {
@@ -198,15 +261,15 @@
        const that = this

        this.$nextTick(() => {
            that.currentTableHeight = that.$refs.tableBox.offsetHeight - 40
            that.currentTableHeight = that.$refs.tableBox.offsetHeight - 88
        })

        window.addEventListener('resize', () => {
            that.currentTableHeight = that.$refs.tableBox.offsetHeight - 40
            that.currentTableHeight = that.$refs.tableBox.offsetHeight - 88
        })
    },
    mounted () {

        this.navClick(1)
    },
    updated () {

@@ -218,7 +281,9 @@
        },

        navClick (type) {
            console.log(global.viewer.entities)
            if (!type) { type = 1 }
            this.detailFlag = false
            this.navType = type

            this.searchValue = ''
@@ -330,7 +395,59 @@
            } else {
                this.phoneList = [item]
            }
        }
        },

        carDetail (row) {
            this.detailFlag = true
        },

        goBack () {
            this.detailFlag = !this.detailFlag
            this.trackTime = []
        },

        lookTrack () {
            if (this.trackTime.length == 0) {
                this.$message({ message: "请选择开始时间", duration: 2000 })
                return
            }
            const startTime = new Date(this.trackTime[0])
            const start =
                startTime.getFullYear() +
                "-" +
                this.disposeTime(startTime.getMonth() + 1) +
                "-" +
                this.disposeTime(startTime.getDate()) +
                " " +
                this.disposeTime(startTime.getHours()) +
                ":" +
                this.disposeTime(startTime.getMinutes()) +
                ":" +
                this.disposeTime(startTime.getSeconds())
            if (this.trackTime.length == 1) {
                this.$message({ message: "请选择结束时间", duration: 2000 })
                return
            }
            const endTime = new Date(this.trackTime[1])
            const end =
                endTime.getFullYear() +
                "-" +
                this.disposeTime(endTime.getMonth() + 1) +
                "-" +
                this.disposeTime(endTime.getDate()) +
                " " +
                this.disposeTime(endTime.getHours()) +
                ":" +
                this.disposeTime(endTime.getMinutes()) +
                ":" +
                this.disposeTime(endTime.getSeconds())

        },

        // 处理时间补零操作
        disposeTime (s) {
            return s < 10 ? "0" + s : s
        },
    },

    destroyed () {
@@ -378,87 +495,83 @@
        }
    }

    .search-box {
        padding: 6px;
        height: 48px;
        display: flex;
    .list-show {
        position: relative;
        height: calc(100% - 50px);

        input {
            flex: 1;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: transparent;
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
        }
        .search-box {
            padding: 6px;
            height: 48px;
            display: flex;

        input:focus {
            outline: none;
        }
            input {
                flex: 1;
                height: 100%;
                font-size: 18px;
                text-indent: 1em;
                color: #ffffff;
                background-color: transparent;
                border: 1px solid rgb(0, 92, 169);
                border-radius: 20px 0 0 20px;
            }

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

        button {
            font-size: 24px;
            font-weight: 700;
            width: 80px;
            height: 100%;
            background-color: rgb(0, 92, 169);
            color: #fff;
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }
            input::-webkit-input-placeholder {
                color: rgba(238, 238, 238, 0.7);
            }

        button:active {
            background-color: rgb(0, 92, 169);
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .search-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 98px;
        left: 6px;
        width: calc(100% - 12px);
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: rgba(16, 29, 74, 0.9);
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

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

            div {
                padding: 0 10px;
                line-height: 36px;
            button {
                font-size: 24px;
                font-weight: 700;
                width: 80px;
                height: 100%;
                background-color: rgb(0, 92, 169);
                color: #fff;
                border: 1px solid rgb(0, 92, 169);
                cursor: pointer;
                border-radius: 0 20px 20px 0;
            }

            button:active {
                background-color: rgb(0, 92, 169);
                border: 1px solid rgb(0, 92, 169);
            }
        }
    }

    .list-show {
        height: calc(100% - 50px - 48px);

        & > div {
            height: 100%;
        .search-val-box {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 48px;
            left: 6px;
            width: calc(100% - 12px);
            max-height: 160px;
            text-align: left;
            color: #fff;
            background: rgba(16, 29, 74, 0.9);
            z-index: 1111;
            border-radius: 10px;
            overflow: hidden;

            // background-color: #fff;
            .list-box {
                flex: 1;
            & > div {
                height: 100%;
                overflow-y: auto;

                div {
                    padding: 0 10px;
                    line-height: 36px;
                    cursor: pointer;
                }
            }
        }

        .list {
            height: calc(100% - 48px);
            display: flex;
            flex-direction: column;

            .pages {
                height: 40px;
@@ -468,5 +581,71 @@
            }
        }
    }

    .track-box {
        height: calc(100% - 50px);
        background: rgba(20, 50, 123, 1);

        & > div {
            position: relative;
            height: 42px;
            line-height: 42px;
            text-align: center;
            color: #fff;
            border-bottom: 1px solid #fff;
            .el-button {
                padding: 0 !important;
                position: absolute;
                top: 4px;
                left: 4px;
                width: 42px;
                height: 28px;
                line-height: 28px;
            }
        }
        ul {
            margin: 0;
            padding: 0px;
        }
        li {
            margin: 0;
            padding: 0 4px;
            list-style: none;
            height: 42px;
            line-height: 42px;
            display: flex;
            color: #fff;
            border-bottom: 1px solid #fff;
            & > div {
                text-align: center;
            }
            & > div:first-child {
                flex: 2;
            }
            & > div:last-child {
                flex: 6;
                & > div {
                    width: 100% !important;
                }
            }
        }

        li:last-child {
            text-align: center;
            position: relative;
            .el-button {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                padding: 0 !important;
                width: 68px;
                height: 32px;
                line-height: 32px;
            }
        }
    }
}
</style>

 src/views/video/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-17 15:27:27
 * @LastEditTime: 2022-10-19 15:22:24
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -14,6 +14,11 @@
        <div class="search-box">
            <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
            <button @click="searchClick" class="el-icon-search"></button>
        </div>

        <div class="draw-btn">
            <button @click="draw">绘制</button>
            <button @click="removeDrawLayer">清除</button>
        </div>

        <div v-show="searchValBoxShow" class="search-val-box">
@@ -85,9 +90,12 @@
</template>

<script>
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"

import monitoringList from '@/assets/data/monitoring.js'

let graphicLayer = null

export default {
    data () {
@@ -106,7 +114,10 @@
        this.monitoringList = monitoringList
    },
    mounted () {

        this.initMonitoringIcon()

        graphicLayer = new EntityDraw()

    },
    updated () {
@@ -177,7 +188,16 @@
            this.searchValBoxShow = false
            this.searchArray = []
            this.monitoringList = [item]
        },

        draw () {
            graphicLayer.activate()
        },

        removeDrawLayer () {
            graphicLayer.clearLayer()
        }

    },

    destroyed () {
@@ -267,6 +287,11 @@
        }
    }

    .draw-btn {
        display: flex;
        height: 36px;
    }

    .list-show {
        flex: 1;