聚合图标点的点击事件相关添加

shuishen

2023-02-23 a665e7aad1eabf5757651968ced493dc637e0989

聚合图标点的点击事件相关添加

 src/components/assemble/index.vue

@@ -1,11 +1,34 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-02-23 09:09:09
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-23 17:33:32
 * @FilePath: \srs-police-affairs\src\components\assemble\index.vue
 * @Description: 聚合图标点的点击事件
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div>
        <el-dialog :title="dialogTile" :modal="true" :visible.sync="dialogVisible" :before-close="beforClose"
            :close-on-click-modal="true" class="equiment-details-box">
            <el-table :data="tableData" style="width: 100%"
            <div class="header">
                <div>
                    设备名称：
                    <input type="text" v-model="equimentSearchVal" placeholder="请输入…" />
                </div>

                <el-button type="primary" icon="el-icon-search" @click="searchEquiment">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearSearchEquiment">清空</el-button>
            </div>

            <el-table :data="currentData" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }">
                <el-table-column label="序号" type="index" :index="indexMethod" align="center">
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{ (pages.current - 1) * pages.size + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>

                <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称" min-width="320%"></el-table-column>
@@ -28,8 +51,9 @@
            </el-table>

            <div class="pages">
                <el-pagination background layout="prev, pager, next, total" :total="pages.total" :page-size="pages.size"
                    pager-count="3" :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
                <el-pagination background layout="prev, pager, next, total" :total="searchData.length"
                    :page-size="pages.size" pager-count="3" :current-page="pages.current"
                    @current-change="handleCurrentChange"></el-pagination>
            </div>
        </el-dialog>
    </div>
@@ -37,42 +61,56 @@

<script>
export default {
    name: 'assembleBOX',
    name: 'assembleBox',

    data () {
        return {
            dialogTile: '',
            dialogVisible: false,
            tableData: [],
            searchData: [],
            dialogVisible: false,
            dialogTile: '摄像头',
            equimentSearchVal: '',
            pages: {
                total: 0,
                size: 10,
                size: 20,
                current: 1
            }
        }
    },

    mounted () {
        global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
        this.$nextTick(() => {
            global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
        })
    },

    computed: {
        currentData () {
            return this.searchData.filter((item, index) =>
                index > (this.pages.current - 1) * this.pages.size && index <= this.pages.current * this.pages.size
            )
        }
    },

    methods: {
        /**
         * @description: 计算下标
         * @param {*} index
         * @return {*}
         */
        indexMethod (index) {
            return index * 2
        },

        /**
         * @description: viewer点击
         * @param {*} e
         * @return {*}
         */
        viewerClick (e) {

            const that = this
            if (e.target && e.target != undefined && e.target.id && e.target.id.length) {
                this.$EventBus.$emit('getOverLayerID', {
                    layerName: 'cameraLayers',
                    ids: e.target.id,
                    cb (data) {
                        that.tableData = data
                        that.searchData = data
                        that.pages.current = 1
                        that.dialogVisible = true
                    }
                })
            }
        },

        /**
@@ -80,7 +118,10 @@
         * @return {*}
         */
        beforClose () {

            this.equimentSearchVal = ''
            this.tableData = []
            this.searchData = []
            this.dialogVisible = false
        },

        /**
@@ -95,8 +136,20 @@
         * @description: 分页切换
         * @return {*}
         */
        handleCurrentChange () {
        handleCurrentChange (e) {
            this.pages.current = e
        },


        searchEquiment () {
            this.pages.current = 1
            this.searchData = this.tableData.filter(item => item.name.indexOf(this.equimentSearchVal.trim()) != -1)
        },


        clearSearchEquiment () {
            this.equimentSearchVal = ''
            this.searchData = this.tableData
        }
    },


 src/components/map/components/map.vue

@@ -48,5 +48,4 @@
}
</script>

<style>
</style>
<style></style>

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-22 17:44:18
 * @LastEditTime: 2023-02-23 17:31:31
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -39,6 +39,8 @@
        </div>

        <map-popup></map-popup>

        <assemble-box></assemble-box>
    </div>
</template>

@@ -375,6 +377,10 @@
            that.layerPolylineAdd(params.layerName, params.positions, params.material, params.width, params.params, params.incident)
        })

        this.$EventBus.$on('getOverLayerID', (params) => {
            that.getOverLayerID(params.layerName, params.ids, params.cb)
        })

        this.$EventBus.$on('layerShow', (params) => {
            that.layerShow(params.layerName, params.flag)
        })
@@ -691,6 +697,36 @@
        },

        /**
         * @description: 通过ID获取图层
         * @return {*}
         */
        getOverLayerID (layerName, ids = [], cb) {

            const data = ids.reduce((pre, cur) => {

                if (
                    layersObjcect[layerName].getOverlay(cur.overlayId)
                    && layersObjcect[layerName].getOverlay(cur.overlayId) != undefined
                    && layersObjcect[layerName].getOverlay(cur.overlayId) != null
                    && layersObjcect[layerName].getOverlay(cur.overlayId) != ''
                ) {
                    pre.push(layersObjcect[layerName].getOverlay(cur.overlayId).attrParams)
                } else {
                    layersObjcect[layerName].eachOverlay(item => {
                        if (item.overlayId == cur.overlayId)
                            pre.push(item.attrParams)
                    })
                }

                return pre

            }, [])

            cb(data)

        },

        /**
         * 图层显示隐藏
         * @param {*} layerName 图层名称
         * @param {*} flag 显示隐藏

 src/styles/media/index.scss

@@ -1934,36 +1934,7 @@
                        }
                    }

                    .equiment-details-box {
                        .el-dialog {
                            width: countSizeVw(1000, 1920);
                            height: countSizeVh(620);
                        }

                        .el-dialog__header button {
                            font-size: countSizeVh(18);
                            right: countSizeVw(10, 1920);
                        }

                        .header input {
                            font-size: countSizeVh(14);
                        }

                        .status-box {
                            display: inline-block;
                            margin: auto;
                            width: countSizeVh(10);
                            height: countSizeVh(10);
                            text-align: center;
                            border-radius: 50%;
                            background-color: #adadad;
                        }

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

                    }

                    .land-details-box {
                        .el-dialog {
@@ -2445,6 +2416,36 @@
                    }
                }

                .equiment-details-box {
                    .el-dialog {
                        width: countSizeVw(1000, 1920);
                        height: countSizeVh(620);
                    }

                    .el-dialog__header button {
                        font-size: countSizeVh(18);
                        right: countSizeVw(10, 1920);
                    }

                    .header input {
                        font-size: countSizeVh(14);
                    }

                    .status-box {
                        display: inline-block;
                        margin: auto;
                        width: countSizeVh(10);
                        height: countSizeVh(10);
                        text-align: center;
                        border-radius: 50%;
                        background-color: #adadad;
                    }

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

                }
            }

            .auth-page {