表格样式整体修改，现有地逻辑调整，现有设备加搜索条件

shuishen

2023-02-11 6e948bf7327185456f5705f5b779fb53ca794ad6

表格样式整体修改，现有地逻辑调整，现有设备加搜索条件

 src/api/home/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-12-27 14:19:19
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-09 14:52:13
 * @LastEditTime: 2023-02-11 14:54:32
 * @FilePath: \srs-police-affairs\src\api\home\index.js
 * @Description: 
 * 
@@ -148,17 +148,11 @@
}

// 获取现有地详情弹窗
export const getLandDetail = (type, policeStationId, current, policeName, phone) => {
export const getLandDetail = (params) => {
    return request({
        url: `/api/policeStationInfo/policeStationInfo/page`,
        method: 'get',
        params: {
            type,
            policeStationId,
            current,
            policeName,
            phone
        }
        params: params
    })
}


 src/components/map/index.vue

@@ -15,37 +15,20 @@
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
                <i
                    class="fa fa-compress"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
                <i
                    class="fa fa-expand"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
        <div
            class="image-switch-icon-btn"
            title="切换影像"
            @mouseover="showImgBtn = true"
            @mouseleave="showImgBtn = false"
        >
        <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false">
            <div class="icon-box">
                <img src="/img/base_map.png" alt />
            </div>

            <div
                class="image-switch-img-btn"
                v-show="showImgBtn"
                @mouseover="showImgBtn = true"
                @mouseleave="showImgBtn = false"
            >
            <div class="image-switch-img-btn" v-show="showImgBtn" @mouseover="showImgBtn = true"
                @mouseleave="showImgBtn = false">
                <div class="img" @click="switchImg">
                    <span :class="{ on: imgtype == 0 }">影像</span>
                </div>
@@ -248,9 +231,9 @@
            global.viewer.addLayer(sqTitleLayer)
            let sqTileset = new global.DC.Tileset(
                // 内网
                // 'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
                'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
                // 外网
                'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
                // 'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
            )

            sqTileset.setHeight(-72)

 src/styles/base/index.scss

@@ -353,8 +353,8 @@
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 630px;
        height: 500px;
        width: 1000px;
        height: 620px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);
@@ -370,17 +370,12 @@
        }

        .el-table .cell {
            font-size: 16px;
            height: 30px;
            line-height: 30px;
        }

        .el-dialog__body {
            flex: 1;

            .el-table th.el-table__cell>.cell {
                font-size: 16px;
            }
        }

        .el-pagination.is-background .el-pager li:not(.disabled).active {
@@ -458,17 +453,12 @@
        }

        .el-table .cell {
            font-size: 16px;
            height: 30px;
            line-height: 30px;
        }

        .el-dialog__body {
            flex: 1;

            .el-table th.el-table__cell>.cell {
                font-size: 16px;
            }
        }

        .el-table {

 src/styles/media/index.scss

@@ -167,10 +167,7 @@
                                        height: 100%;
                                    }

                                    .el-table .cell {
                                        line-height: countSizeVh(48);
                                        font-size: countSizeVh(16);
                                    }


                                    .el-table th.el-table__cell>.cell {
                                        height: 100%;
@@ -259,12 +256,16 @@
                                }
                            }

                            .current-table-body,
                            .body {
                                margin: countSizeVh(12);
                                margin-top: countSizeVh(10);
                                margin-bottom: countSizeVh(14);
                                width: calc(100% - countSizeVw(24, 1920));
                                height: calc(100% - countSizeVh(80));
                            }

                            .body {

                                .warp {
                                    height: calc(100% - countSizeVh(44));
@@ -275,6 +276,12 @@
                                        height: countSizeVh(44);
                                        line-height: countSizeVh(44);
                                    }
                                }
                            }

                            .current-table-body {
                                .pages {
                                    height: countSizeVh(40);
                                }
                            }
                        }
@@ -319,23 +326,6 @@
                                .el-checkbox .el-checkbox__inner::after {
                                    height: countSizeVh(12);
                                    left: countSizeVw(7, 1920);
                                }
                            }
                        }

                        .equiment-detail {
                            height: countSizeVh(540);

                            .monitor {
                                height: countSizeVh(540);
                            }

                            .others {
                                height: countSizeVh(495);

                                .pages {
                                    padding-bottom: countSizeVh(3);
                                    padding-top: countSizeVh(10);
                                }
                            }
                        }
@@ -762,11 +752,6 @@
                                            height: 100%;
                                        }

                                        .el-table .cell {
                                            line-height: countSizeVh(48);
                                            font-size: countSizeVh(16);
                                        }

                                        .el-table th.el-table__cell>.cell {
                                            height: 100%;
                                        }
@@ -801,23 +786,6 @@

                                    .el-table__body {
                                        width: countSizeVw(400, 1920) !important;
                                    }

                                    .el-table .el-table__cell {
                                        padding: 0;
                                    }

                                    .el-table th.el-table__cell {
                                        height: 100%;
                                    }

                                    .el-table .cell {
                                        line-height: countSizeVh(48);
                                        font-size: countSizeVh(16);
                                    }

                                    .el-table th.el-table__cell>.cell {
                                        height: 100%;
                                    }

                                    .el-table__empty-text {
@@ -964,27 +932,9 @@
                                    }
                                }

                                .el-table .el-table__cell {
                                    padding: 0;
                                }

                                .el-table th.el-table__cell {
                                    height: 100%;
                                }

                                .el-table .cell {
                                    line-height: countSizeVh(48);
                                    font-size: countSizeVh(16);
                                }

                                .el-table th.el-table__cell>.cell {
                                    height: 100%;
                                }

                                .el-table__empty-text {
                                    font-size: countSizeVh(16);
                                }


                            }

@@ -1202,11 +1152,6 @@
                                    height: 100%;
                                }

                                .el-table .cell {
                                    line-height: countSizeVh(48);
                                    font-size: countSizeVh(16);
                                }

                                .el-table th.el-table__cell>.cell {
                                    height: 100%;
                                }
@@ -1335,11 +1280,6 @@

                                    .el-table th.el-table__cell {
                                        height: 100%;
                                    }

                                    .el-table .cell {
                                        line-height: countSizeVh(48);
                                        font-size: countSizeVh(16);
                                    }

                                    .el-button--text {
@@ -1981,322 +1921,42 @@
                        .el-dialog .el-dialog__body .item>div:nth-of-type(2) {
                            width: calc(100% - countSizeVw(120, 1920));
                        }

                        .pages {
                            height: countSizeVh(40);

                            &>div {
                                &>button {
                                    width: countSizeVh(32);
                                    height: countSizeVh(32);

                                    &>i {
                                        font-size: countSizeVh(16);
                                    }
                                }

                                &>ul {
                                    li {
                                        width: countSizeVh(32);
                                        height: countSizeVh(32);
                                        line-height: countSizeVh(32);
                                        font-size: countSizeVh(16);
                                    }
                                }
                            }

                        }

                        .header {
                            margin-bottom: countSizeVh(10);
                            padding-left: countSizeVh(10);

                            &>div {
                                height: countSizeVh(32);
                                line-height: countSizeVh(32);
                                margin-right: countSizeVw(10, 1920);

                                input {
                                    width: countSizeVw(150, 1920);
                                    height: countSizeVh(32);
                                    font-size: countSizeVh(12);
                                    border-radius: countSizeVh(5);
                                }
                            }

                            &>div:first-child input {
                                width: countSizeVw(120, 1920);
                            }

                            .el-button--primary {
                                border: countSizeVh(1) solid rgba(29, 92, 228, 0.6);
                            }

                            .el-button {
                                padding: countSizeVh(6) countSizeVw(10, 1920);
                                font-size: countSizeVh(16);
                            }
                        }

                        .el-table th.el-table__cell>.cell {
                            font-size: countSizeVh(16);
                        }

                        .el-table {
                            height: calc(100% - countSizeVh(80));
                        }

                        .el-dialog__header {
                            height: countSizeVh(40);
                            line-height: countSizeVh(40);
                        }

                        .el-table__header-wrapper {
                            height: countSizeVh(36);
                        }

                        .el-table {

                            th,
                            td {
                                padding: 0;
                            }

                            .cell {
                                font-size: countSizeVh(16);
                                height: countSizeVh(36);
                                line-height: countSizeVh(36);
                                padding: 0;
                            }
                        }

                        .el-table__body-wrapper {
                            height: calc(100% - countSizeVh(36));
                        }
                    }

                    .equiment-details-box {
                        .el-dialog__header span {
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body {
                            font-size: countSizeVh(16);
                        }

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

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

                    .land-details-box {
                        .el-dialog__header {
                            height: countSizeVh(40);
                            line-height: countSizeVh(40);
                        }

                        .el-table__header-wrapper {
                            height: countSizeVh(60);
                            line-height: countSizeVh(40);
                        }

                        .el-dialog__header span {
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body {
                            font-size: countSizeVh(16);
                            height: calc(100% - countSizeVh(100));
                        }

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

                    }

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

                        .el-table th.el-table__cell>.cell {
                            font-size: countSizeVh(16);
                        }

                        .el-table {
                            height: calc(100% - countSizeVh(80));
                        }

                        .pages {
                            height: countSizeVh(40);

                            &>div {
                                &>button {
                                    width: countSizeVh(32);
                                    height: countSizeVh(32);

                                    &>i {
                                        font-size: countSizeVh(16);
                                    }
                                }

                                &>ul {
                                    li {
                                        width: countSizeVh(32);
                                        height: countSizeVh(32);
                                        line-height: countSizeVh(32);
                                        font-size: countSizeVh(16);
                                    }
                                }
                            }

                        }

                        .el-table__body-wrapper {
                            height: calc(100% - countSizeVh(80));
                        }

                        .el-table .cell {
                            font-size: countSizeVh(16);
                            height: countSizeVh(30);
                            line-height: countSizeVh(30);
                        }

                        .header {
                            margin-bottom: countSizeVh(10);
                            padding-left: countSizeVh(10);

                            &>div {
                                height: countSizeVh(32);
                                line-height: countSizeVh(32);
                                margin-right: countSizeVw(10, 1920);

                                input {
                                    width: countSizeVw(150, 1920);
                                    height: countSizeVh(32);
                                    font-size: countSizeVh(12);
                                    border-radius: countSizeVh(5);
                                }
                            }

                            &>div:first-child input {
                                width: countSizeVw(120, 1920);
                            }

                            .el-button--primary {
                                border: countSizeVh(1) solid rgba(29, 92, 228, 0.6);
                            }

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

                    .keyPerson-details-box {
                        .el-dialog__header span {
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body {
                            font-size: countSizeVh(16);
                        }

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

                        .el-dialog {
                            width: countSizeVw(1000, 1920);
                            height: countSizeVh(700);
                        }

                        .el-table__header-wrapper {
                            height: countSizeVh(60);
                            line-height: countSizeVh(40);
                        }

                        .el-table .cell {
                            font-size: countSizeVh(16);
                            height: countSizeVh(44);
                            line-height: countSizeVh(44);
                        }

                        .el-dialog__header {
                            height: countSizeVh(40);
                            line-height: countSizeVh(40);
                        }

                        .pages {
                            height: countSizeVh(40);

                            &>div {
                                &>button {
                                    width: countSizeVh(32);
                                    height: countSizeVh(32);

                                    &>i {
                                        font-size: countSizeVh(16);
                                    }
                                }

                                &>ul {
                                    li {
                                        width: countSizeVh(32);
                                        height: countSizeVh(32);
                                        line-height: countSizeVh(32);
                                        font-size: countSizeVh(16);
                                    }
                                }
                            }

                        }

                        .el-table {
                            height: calc(100% - countSizeVh(100));
                        }

                        .header {
                            margin-bottom: countSizeVh(10);
                            padding-left: countSizeVh(10);

                            &>div {
                                height: countSizeVh(32);
                                line-height: countSizeVh(32);
                                margin-right: countSizeVw(10, 1920);

                                input {
                                    width: countSizeVw(150, 1920);
                                    height: countSizeVh(32);
                                    font-size: countSizeVh(12);
                                    border-radius: countSizeVh(5);
                                }
                            }

                            &>div:first-child input {
                                width: countSizeVw(120, 1920);
                            }

                            .el-button--primary {
                                border: countSizeVh(1) solid rgba(29, 92, 228, 0.6);
                            }

                            .el-button {
                                padding: countSizeVh(6) countSizeVw(10, 1920);
                                font-size: countSizeVh(16);
                            }
                        }

                        .el-table__body-wrapper {
                            height: calc(100% - countSizeVh(60));
                        .el-dialog__header button {
                            font-size: countSizeVh(18);
                            right: countSizeVw(10, 1920);
                        }
                    }

@@ -2749,6 +2409,129 @@
        }
    }

    .el-dialog {
        font-size: countSizeVh(16);

        .el-dialog__header {
            height: countSizeVh(40);
            line-height: countSizeVh(40);

            span {
                font-size: countSizeVh(18);
            }
        }

        .el-dialog__body {
            padding: 0 countSizeVh(10);
            height: calc(100% - countSizeVh(40));
            font-size: countSizeVh(16);

            .header {
                display: flex;
                margin-bottom: countSizeVh(10);
                padding-left: countSizeVh(10);
                height: countSizeVh(36);
                line-height: countSizeVh(36);

                &>div {
                    height: countSizeVh(32);
                    line-height: countSizeVh(32);
                    margin-right: countSizeVw(10, 1920);

                    input {
                        width: countSizeVw(150, 1920);
                        height: countSizeVh(32);
                        font-size: countSizeVh(12);
                        text-indent: 1em;
                        color: #ffffff;
                        background-color: rgba(24, 79, 202, 0.6);
                        border: 1px solid rgb(0, 92, 169);
                        border-radius: countSizeVh(5);
                    }

                    input:focus {
                        outline: none;
                    }

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

                .el-button--primary {
                    background-color: rgba(29, 92, 228, 0.6);
                    border: countSizeVh(1) solid rgba(29, 92, 228, 0.6);
                }

                .el-button {
                    padding: 0 countSizeVw(12, 1920);
                    height: countSizeVh(32);
                    line-height: countSizeVh(32);
                    font-size: countSizeVh(16);
                }
            }

            .el-table {
                margin-bottom: countSizeVh(10);
                height: calc(100% - countSizeVh(96));
            }

            .pages {
                height: countSizeVh(40);
                line-height: countSizeVh(40);

                &>div {
                    &>button {
                        width: countSizeVh(32);
                        height: countSizeVh(32);

                        &>i {
                            font-size: countSizeVh(16);
                        }
                    }

                    &>ul {
                        li {
                            width: countSizeVh(32);
                            height: countSizeVh(32);
                            line-height: countSizeVh(32);
                            font-size: countSizeVh(16);
                        }
                    }
                }

                .el-pagination__total {
                    color: #fff;
                }

            }
        }
    }

    .el-table {

        th,
        td {
            padding: 0 !important;

            .cell {
                font-size: countSizeVh(16) !important;
                height: countSizeVh(36) !important;
                line-height: countSizeVh(36) !important;
                padding: 0 !important;
            }
        }

        .el-table__header-wrapper {
            height: countSizeVh(36) !important;
            line-height: countSizeVh(36) !important;
        }

        .el-table__body-wrapper {
            height: calc(100% - countSizeVh(36)) !important;
        }
    }

}

@media screen and (max-height: 975px) {

 src/views/home/components/bottomContainer.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-01-13 15:52:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-10 15:57:00
 * @LastEditTime: 2023-02-11 12:02:48
 * @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue
 * @Description: 
 * 
@@ -319,208 +319,210 @@

        // 获取实时接警记录
        getAnswerPolices () {
            getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.policeSituationRealtimeArr = []
            // getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
            //     this.policeSituationRealtimeArr = []

                if (res.data.result.length > 0) {
                    this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                } else {
                    this.policeSituationRealtimeArr = []
                }
            //     if (res.data.result.length > 0) {
            //         this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
            //             return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            //         })
            //     } else {
            //         this.policeSituationRealtimeArr = []
            //     }

                this.$emit('policeSituationChange')
            })

            // this.policeSituationRealtimeArr = [{
            //     ZDDWXZB: 112,
            //     ZDDWYZB: 25,
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // }]

            // this.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            //     this.$emit('policeSituationChange')
            // })

            this.policeSituationRealtimeArr = [{
                ZDDWXZB: 112,
                ZDDWYZB: 25,
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            }]

            this.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => {
                return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            })
        },

        // 获取历史接警记录
        getAlarmList (params) {
            getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.pagesCount = res.data.data.pages
            // getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
            //     this.pagesCount = res.data.data.pages

                this.policeSituationHistoryArr = []
            //     this.policeSituationHistoryArr = []

                if (res.data.data.records.length > 0) {
                    this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                } else {
                    this.policeSituationHistoryArr = []
                }
            //     if (res.data.data.records.length > 0) {
            //         this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
            //             return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            //         })
            //     } else {
            //         this.policeSituationHistoryArr = []
            //     }

                this.setTableHeight()
            //     this.setTableHeight()

                this.$emit('policeSituationChange')
            //     this.$emit('policeSituationChange')
            // })

            this.policeSituationHistoryArr = [{
                ZDDWXZB: 112,
                ZDDWYZB: 25,
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            },
            {
                JJDWMC: '信州公安局派出所',
                JJYXM: '欧阳西门',
                BJSJ: '2022-12-12 12:12:12',
                BJRXM: '西门庆祝',
                LXDH: 17335843642,
                BJNR: '今日在某小区查获私人赌博场所',
                SFDZ: '上饶市信州区万达华府小区',
                BJLX: '聚众赌博',
                MEMO: '人群聚集赌博'
            }]

            this.policeSituationHistoryArr = this.policeSituationHistoryArr.map((item, index) => {
                return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            })

            // this.policeSituationHistoryArr = [{
            //     ZDDWXZB: 112,
            //     ZDDWYZB: 25,
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     : '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     : '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     : '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     : '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     : '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     : '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     : '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // }]

            // this.policeSituationHistoryArr = this.policeSituationHistoryArr.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })
            this.setTableHeight()
        },

        // 周月选择

 src/views/home/components/leftContainer.vue

@@ -13,27 +13,19 @@
                    </div>-->
                </div>
                <div class="sub-tab" v-show="peopletype == 0">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 0 }"
                        @click="personTabClick(0)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                        <div class="tab-title-small">户籍人口:</div>
                        <div class="tab-title-small">
                            {{
                            personAll.total ? personAll.total : 0
                                personAll.total ? personAll.total : 0
                            }}人
                        </div>
                    </div>
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 1 }"
                        @click="personTabClick(1)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                        <div class="tab-title-small">重点人员:</div>
                        <div class="tab-title-small">
                            {{
                            personAll.emphasisNum ? personAll.emphasisNum : 0
                                personAll.emphasisNum ? personAll.emphasisNum : 0
                            }}人
                        </div>
                    </div>
@@ -43,68 +35,41 @@
                    </div>-->
                </div>
                <div id="PersonEcharts" class="echarts-box"></div>
                <div
                    class="back"
                    title="返回上一级"
                    v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin"
                ></div>
                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin"></div>
            </div>

            <svg class="border-svg">
                <defs>
                    <path
                        id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                    c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                    c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                    c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                        fill="transparent"
                    />
                    <radialGradient
                        id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c"
                        cx="50%"
                        cy="50%"
                        r="50%"
                    >
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
                        r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle
                            cx="0"
                            cy="0"
                            r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)"
                        >
                            <animateMotion
                                dur="8s"
                        <circle cx="0" cy="0" r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto"
                                repeatCount="indefinite"
                            />
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
                </defs>

                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
@@ -112,19 +77,11 @@
            <div class="box">
                <div class="title">现有住宅</div>
                <div class="sub-tab">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeTwo == 0 }"
                        @click="houseTabClick(0)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                        <div class="tab-title-small">实有楼栋:</div>
                        <div class="tab-title-small">{{ realHouseNum?realHouseNum: 0 }}栋</div>
                    </div>
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeTwo == 1 }"
                        @click="houseTabClick(1)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                        <div class="tab-title-small">关注场所:</div>
                        <div class="tab-title-small">{{ keyPlaceNum?keyPlaceNum: 0 }}栋</div>
                    </div>
@@ -133,19 +90,10 @@
            </div>

            <svg class="border-svg">
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
@@ -153,19 +101,11 @@
            <div class="box">
                <div class="title">现有地</div>
                <div class="sub-tab" v-show="isAllPoliceStation">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeThree == 0 }"
                        @click="landTabClick(0)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                        <div class="tab-title-small">小区:</div>
                        <div class="tab-title-small">{{ villageNum?villageNum: 0 }}个</div>
                    </div>
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabTypeThree == 1 }"
                        @click="landTabClick(1)"
                    >
                    <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                        <div class="tab-title-small">责任区:</div>
                        <div class="tab-title-small">{{ areaNum?areaNum: 0 }}个</div>
                    </div>
@@ -181,19 +121,10 @@
            </div>

            <svg class="border-svg">
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
@@ -1149,7 +1080,7 @@
                color: #fff;
            }

            & > div:nth-of-type(2) {
            &>div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -1177,7 +1108,7 @@
                align-items: center;
                justify-content: center;

                & > div {
                &>div {
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;

 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-10 16:07:15
 * @LastEditTime: 2023-02-11 15:03:59
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -108,7 +108,7 @@
            </el-table>

            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePeopleCurrentChange"></el-pagination>
            </div>
@@ -142,7 +142,7 @@
            </el-table>

            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePersonPageChange"></el-pagination>
            </div>
@@ -150,35 +150,41 @@

        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
            <div class="equiment-detail">
                <div class="others">
                    <el-table :data="equimentTableData" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
                        <el-table-column prop="channelId" label="通道编号"></el-table-column>
                        <el-table-column prop="deviceId" label="设备编号"></el-table-column>
                        <el-table-column prop="name" label="名称"></el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <span>{{ scope.row.status == 0 ? '离线' : '在线' }}</span>
                            </template>
                        </el-table-column>
                        <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="equimentPagingTotal"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
            <div class="header">
                <div>
                    设备名称：
                    <input type="text" v-model="peoplePoliceName" placeholder="请输入…" />
                </div>

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

            <el-table :data="equimentTableData" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName">
                <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
                <el-table-column prop="channelId" label="通道编号"></el-table-column>
                <el-table-column prop="deviceId" label="设备编号"></el-table-column>
                <el-table-column prop="name" label="设备名称"></el-table-column>
                <el-table-column label="设备状态">
                    <template slot-scope="scope">
                        <span>{{ scope.row.status == 0 ? '离线' : '在线' }}</span>
                    </template>
                </el-table-column>
                <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="equimentPagingTotal"
                    :page-size="pagesize" pager-count="3" :current-page="currentPage"
                    @current-change="handleCurrentChange"></el-pagination>
            </div>
        </el-dialog>

@@ -210,8 +216,9 @@
                <el-table-column prop="policeName" label="负责人"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
            </el-table>

            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next" :page-size="landPage.pageSize"
                <el-pagination background layout="prev, pager, next, total" :page-size="landPage.pageSize"
                    :total="landPage.total" :current-page="landPage.currentPage"
                    @current-change="landHandleCurrentChange"></el-pagination>
            </div>
@@ -495,7 +502,7 @@
            peopleInfoList: [],
            peoplePage: {
                total: 0,
                pageSize: 10,
                pageSize: 15,
                currentPage: 1
            },
            peopleSearchQuery: {
@@ -536,6 +543,7 @@
            // 现有设备表格
            equimentTableData: [],
            equimentCurrentSelect: {},

            currentPage: 1,
            pagesize: 15,
            equimentPagingTotal: 0,
@@ -587,6 +595,7 @@
        if (this.userInfo.dept_id != '1123598813738675201') {
            this.policeStationCheckValue = this.userInfo.user_name
            this.selectAllClass = true
            this.policeStaionID = this.userInfo.dept_id
        }


@@ -1428,14 +1437,7 @@
            this.$refs.RegionSelect.style.left = (bodyWidth - domWidth) / 2 + 'px'
        },

        showlanddetail (name, type, id) {
            this.landVisible = true
            this.landTitle = name
            this.landType = type
            this.landDetailId = id
            this.landPage.currentPage = 1
            this.getLandDetail(type, id, this.landPage.currentPage)
        },


        // 获取设备分页数据
        getEquipmentPaging (params) {
@@ -1681,6 +1683,22 @@
            return index + 1
        },

        /**
         * @description: 显示现有地弹窗列表
         * @param {*} name
         * @param {*} type
         * @param {*} id
         * @return {*}
         */
        showlanddetail (name, type, id) {
            this.landVisible = true
            this.landTitle = name
            this.landType = type
            this.landDetailId = id
            this.landPage.currentPage = 1
            this.getLandDetail(type, id, this.landPage.currentPage)
        },

        clearLandDetailSearchValue () {
            this.policeName = ''
            this.callPhone = ''
@@ -1693,10 +1711,18 @@
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone)
        },

        getLandDetail (type, policeStationId, current, policeName = '', phone = '') {
        getLandDetail (type, id, current, policeName = '', phone = '') {
            this.landDetailArr = []
            this.landPage.total = 0
            getLandDetail(type, policeStationId, current, policeName, phone).then(res => {

            getLandDetail({
                type,
                policeStationId: this.policeStaionID == '1123598813738675201' || this.policeStaionID == '' ? id : '',
                areaId: this.policeStaionID != '1123598813738675201' && this.policeStaionID != '' ? id : '',
                current,
                policeName,
                phone
            }).then(res => {
                this.landDetailArr = res.data.data.records
                this.landPage.total = res.data.data.total
            })

 src/views/layout/index.vue

@@ -12,23 +12,13 @@
    <div class="wrapper">
        <div class="main-header">
            <div class="menu-list left">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList"
                    :key="index"
                >
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                            subItem.menuName
                                subItem.menuName
                            }}
                        </div>
                    </div>
@@ -41,23 +31,13 @@

            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuRightList"
                    :key="index"
                >
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                            subItem.menuName
                                subItem.menuName
                            }}
                        </div>
                    </div>
@@ -98,25 +78,15 @@
            <!-- 地图区域 -->
            <map-box ref="modalForm">
                <!-- 主体内容区域 -->
                <div
                    slot="mainContent"
                    class="main-content"
                    id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                >
                <div slot="mainContent" class="main-content" id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                    <router-view ref="target-name"></router-view>
                </div>

                <el-button
                    slot="showButton"
                    v-show="leftShow"
                    class="flexible-btn"
                <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
                    id="FlexibleBtn"
                    type="primary"
                    @click="flexibelClick"
                ></el-button>
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                    @click="flexibelClick"></el-button>
            </map-box>
        </div>
    </div>
@@ -172,9 +142,9 @@
                    menuName: '运维管理',
                    openExternal: true,
                    // 内网
                    // path: 'http://10.141.11.11:8081/#/security/security'
                    path: 'http://10.141.11.11:8081/#/security/security'
                    // 外网
                    path: 'http://192.168.0.109:1888/#/security/security'
                    // path: 'http://192.168.0.109:1888/#/security/security'
                }
            ],

@@ -360,7 +330,7 @@
            overflow: hidden;
            letter-spacing: 6px;

            & > img {
            &>img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -376,7 +346,7 @@
                // border-radius: 10px 16px 10px 16px;
                transform: skew(58deg);

                & > span {
                &>span {
                    transform: skew(-58deg);
                }
            }
@@ -390,7 +360,7 @@
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-58deg);

                & > span {
                &>span {
                    transform: skew(58deg);
                }
            }
@@ -400,10 +370,11 @@
            display: flex;
            align-items: center;

            & > .nav-list {
            &>.nav-list {

                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                & > span.on {
                &>span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }
@@ -532,7 +503,7 @@
                    justify-content: space-around;
                    padding-top: 4px;

                    & > div {
                    &>div {
                        width: 100px;
                        height: 40px;
                        background-color: rgba(168, 222, 255, 0.6);