添加聚合点击组件

shuishen

2023-02-23 b19aa6f8ee8f57b54377474014da14d09546e3ad

添加聚合点击组件

 src/components/assemble/index.vue

New file
@@ -0,0 +1,109 @@
<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%"
                :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>

                <el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称" min-width="320%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="channelId" label="通道编号"
                    min-width="160%"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"
                    min-width="140%"></el-table-column>
                <el-table-column label="设备状态">
                    <template slot-scope="scope">
                        <i class="status-box" :class="{ online: Number(scope.row.status) === 1 }"></i>
                    </template>
                </el-table-column>z
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                            <i class="el-icon-video-play"></i>
                        </el-button>
                    </template>
                </el-table-column>
            </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>
            </div>
        </el-dialog>
    </div>
</template>

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

    data () {
        return {
            dialogTile: '',
            dialogVisible: false,
            tableData: [],
            pages: {
                total: 0,
                size: 10,
                current: 1
            }
        }
    },

    mounted () {
        global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
    },

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

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

        },

        /**
         * @description: 弹窗关闭
         * @return {*}
         */
        beforClose () {

        },

        /**
         * @description: 视频播放
         * @return {*}
         */
        play () {

        },

        /**
         * @description: 分页切换
         * @return {*}
         */
        handleCurrentChange () {

        }
    },

    destory () {
        global.viewer.off(global.DC.MouseEventType.CLICK, this.viewerClick)
    }
}
</script>

<style lang="scss" scoped></style>

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-23 08:45:07
 * @LastEditTime: 2023-02-23 09:43:39
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -30,8 +30,8 @@
                <el-checkbox v-model="areaPolygonLayerShow" @change="areaPolygonChange">辖区</el-checkbox>
        </div>
        <!-- <div class="layers-control-btn house">
                                            <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
            </div>-->
            <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
        </div> -->
        <div class="layers-control-btn car">
                <el-checkbox v-model="carLayerShow" @change="carChange">警车</el-checkbox>
            </div>
@@ -39,11 +39,11 @@
                <el-checkbox v-model="cameraLayerShow" @change="cameraChange">摄像头</el-checkbox>
            </div>
            <!-- <div class="layers-control-btn moitor">
                                            <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                                        </div>-->
            <!-- <div class="layers-control-btn panorama">
                                            <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                                        </div>-->
                                        <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                                    </div>
                                    <div class="layers-control-btn panorama">
                                        <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                                    </div> -->
            <div class="layers-control-btn police-situation">
                <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
            </div>