Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-aff...

shuishen

2023-01-17 559b060f7296969954ced4b17c8fc5d46a51cc1d

Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-affairs

 src/api/dept/index.js

@@ -4,9 +4,9 @@
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-05 15:23:32
 * @FilePath: \srs-police-affairs\src\api\dept\index.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 * @Description:
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
 */
import request from "@/router/axios.js"

@@ -149,13 +149,24 @@
}

// 小区树形数据
export const getPoliceStationLazyTree = (type, id) => {
// export const getPoliceStationLazyTree = (type, id) => {
//     return request({
//         url: `/api/policeStationInfo/policeStationInfo/getPoliceStationLazyTree`,
//         method: 'get',
//         params: {
//             type,
//             id
//         }
//     })
// }

// 小区树形数据
export const getPoliceStationTrees = (name) => {
    return request({
        url: `/api/policeStationInfo/policeStationInfo/getPoliceStationLazyTree`,
        url: `/api/policeStationInfo/policeStationInfo/getPoliceStationTrees`,
        method: 'get',
        params: {
            type,
            id
            name
        }
    })
}
@@ -197,12 +208,51 @@
}

// 户籍人口、重点人口信息
export const getVillagePersonInfo = (resBusId) => {
export const getVillagePersonInfo = (resBusId, buildId, status, current, realName, phone) => {
    return request({
        url: `/api/villagePersonInfo/villagePersonInfo/page`,
        method: 'get',
        params: {
            resBusId
            resBusId,
            buildId,
            status,
            current,
            realName,
            phone
        }
    })
}
}

// 获取各个派出所的人口数量，以及人口总数和重点人员数量
export const getVillagePersonStatisticInfo = () => {
    return request({
        url: `/api/villagePersonInfo/villagePersonInfo/getVillagePersonStatisticInfo`,
        method: 'get',
    })
}

// 获取对应id下的派出所的责任区人口
export const getVillagePersonStatisticInfoByPoliceStationId = (name, id) => {
    return request({
        url: `/api/villagePersonInfo/villagePersonInfo/getVillagePersonStatisticInfoByPoliceStationId`,
        method: 'get',
        params: {
            name,
            id
        }
    })
}

// 获取该责任区下的人员列表信息
export const getAreaPage = (current, areaId, policeName, phone) => {
    return request({
        url: `/api/policeStationInfo/policeStationInfo/getAreaPage`,
        method: 'get',
        params: {
            current,
            areaId,
            policeName,
            phone
        }
    })
}

 src/api/home/index.js

@@ -141,13 +141,14 @@
}

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

 src/styles/base/index.scss

@@ -255,7 +255,7 @@
        .el-dialog__body {
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-direction: column;
            flex-wrap: wrap;
            justify-self: flex-start;
            align-content: flex-start;
@@ -282,6 +282,48 @@
                }
            }
        }
    }

    .header {
        display: flex;
        margin-bottom: 10px;
        padding-left: 10px;
        &>div{
            display: flex;
            height: 32px;
            line-height: 32px;
            margin-right: 10px;

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

            input:focus {
                outline: none;
            }

            input::-webkit-input-placeholder {
                color: rgba(238, 238, 238, 0.7);
            }
        }
        &>div:first-child input{
            width: 120px;
        }
        .el-button--primary {
            background-color: rgba(29, 92, 228, 0.6);
            border: 1px solid rgba(29, 92, 228, 0.6);
        }
        .el-button{
            padding: 6px 10px;
        }

    }
}

@@ -332,7 +374,95 @@
            flex: 1;
            .el-table th.el-table__cell>.cell{
                font-size:  16px;
            } 
            }
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active {
            color: #C0C4CC!important;
        }


        .header {
            display: flex;
            margin-bottom: 10px;
            padding-left: 10px;
            &>div{
                display: flex;
                height: 32px;
                line-height: 32px;
                margin-right: 10px;

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

                input:focus {
                    outline: none;
                }

                input::-webkit-input-placeholder {
                    color: rgba(238, 238, 238, 0.7);
                }
            }
            &>div:first-child input{
                width: 120px;
            }
            .el-button--primary {
                background-color: rgba(29, 92, 228, 0.6);
                border: 1px solid rgba(29, 92, 228, 0.6);
            }
            .el-button{
                padding: 6px 10px;
            }

        }
    }
}

.keyPerson-details-box {
    .el-dialog {
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 1000px;
        height: 700px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__header {
            height:40px;
            line-height: 40px;
        }

        .el-table__header-wrapper {
            height:60px;
            line-height: 60px;
        }
        .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 {
            height: calc(100% - 40px);
            margin-bottom: 10px;
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active {
            color: #C0C4CC!important;
        }

        .header {
@@ -375,23 +505,6 @@
                padding: 6px 10px;
            }
            
        }
    }
}

.keyPerson-details-box {
    .el-dialog {
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 1000px;
        height: 700px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {
            flex: 1;
        }
    }
}
@@ -646,4 +759,4 @@
.select-on-tab {
    box-shadow: 0 2px 2px $menu-tab-shadow;
    color: #fff;
}
}

 src/styles/media/index.scss

@@ -925,9 +925,6 @@
                                    height: countSizeVh(40);

                                    &>div {
                                        display: flex;
                                        align-items: center;

                                        &>button {
                                            width: countSizeVh(32);
                                            height: countSizeVh(32);
@@ -938,9 +935,6 @@
                                        }

                                        &>ul {
                                            display: flex;
                                            align-items: center;

                                            li {
                                                width: countSizeVh(32);
                                                height: countSizeVh(32);
@@ -1964,6 +1958,83 @@
                        .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(60);
                            line-height: countSizeVh(40);
                        }
                        .el-table .cell {
                            font-size: countSizeVh(16);
                            height: countSizeVh(40);
                            line-height: countSizeVh(40);
                        }
                        .el-table__body-wrapper{
                            height: calc(100% - countSizeVh(80));
                        }
                    }

                    .equiment-details-box {
@@ -1988,9 +2059,9 @@

                    .land-details-box {
                       .el-dialog__header {
                        height: countSizeVh(40);
                        line-height: countSizeVh(40);
                    }
                            height: countSizeVh(40);
                            line-height: countSizeVh(40);
                        }
                       .el-table__header-wrapper {
                            height: countSizeVh(60);
                            line-height: countSizeVh(40);
@@ -2019,7 +2090,36 @@
                        }

                        .el-table {
                            height: calc(100% - countSizeVh(60));
                            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{
@@ -2075,6 +2175,79 @@
                            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));
                        }
                        
                    }

                    .policeSituation-details-box {

 src/views/activity/index.vue

@@ -546,14 +546,14 @@
            isHaveArrow: false,
            isHaveLine: false,
            //当前登录用户的数据
            userInfo:{},
            userInfo: {},
        }
    },
    created () {
        let userInfo = sessionStorage.getItem("userInfo");
        let userInfo = sessionStorage.getItem("userInfo")
        if (userInfo != null) {
          // 将JSON格式的对象解析为js对象
          this.userInfo= JSON.parse(userInfo);
            // 将JSON格式的对象解析为js对象
            this.userInfo = JSON.parse(userInfo)
        }

        // 获取下拉列表数据
@@ -795,11 +795,11 @@
        getSecurityList (current, size, type, name, startTime, endTime) {
            this.loading()
            var deptId = ""
            if (this.userInfo.dept_id != '1123598813738675201'){
              deptId = this.userInfo.dept_id
            if (this.userInfo.dept_id != '1123598813738675201') {
                deptId = this.userInfo.dept_id
            }

            getSecurityList(current, size, type, name, startTime, endTime,deptId).then(res => {
            getSecurityList(current, size, type, name, startTime, endTime, deptId).then(res => {
                this.activityList = res.data.data.records.map(item => {
                    item.startTime = item.startTime.substring(0, 16)
                    item.endTime = item.endTime.substring(0, 16)

 src/views/home/components/leftContainer.vue

@@ -20,7 +20,7 @@
                        @click="personTabClick(0)"
                    >
                        <div class="tab-title-small">户籍人口:</div>
                        <div class="tab-title-small">164.57万人</div>
                        <div class="tab-title-small">{{policeStationPersonInfo.total}}人</div>
                    </div>
                    <div
                        class="tab"
@@ -28,7 +28,7 @@
                        @click="personTabClick(1)"
                    >
                        <div class="tab-title-small">重点人员:</div>
                        <div class="tab-title-small">1人</div>
                        <div class="tab-title-small">{{policeStationPersonInfo.emphasisNum}}人</div>
                    </div>
                    <!-- <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                        <div class="num">91995人</div>
@@ -189,6 +189,7 @@
<script>
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo } from "@/api/home/index.js"
import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId } from "@/api/dept"

let homePersonmyChart
let houseMyChart
@@ -309,6 +310,8 @@
            villageNum: '',
            areaOptionData: [],
            villageOptionData: [],
            policeStationPersonInfo: {},
            villagePersonStatisticInfoList: [],
        }
    },

@@ -319,9 +322,8 @@

    mounted () {
        this.initLandEcharts()
        this.initPersonEcharts()
        this.getPoliceStationInfo()
        this.inithouseEcharts()
        this.clickPeopleChart()
        this.clickLandChart()

        this.$nextTick(() => {
@@ -339,7 +341,19 @@
        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)
            homePersonmyChart.setOption(this.initPersonOptions(['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所'], [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232], ['#06B5D7', '#44C0C1', '#71C8B1']))

            var xDate = [], yDate = []
            //传入x,y轴数据
            this.policeStationPersonInfo.data.forEach(e => {
                xDate.push(e.name.replace('派出', ''))
                yDate.push({
                    value: e.num,
                    id: e.id,
                    type: 'policeStation',
                    name: e.name
                })
            })
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, ['#06B5D7', '#44C0C1', '#71C8B1']))
        },

        initPersonOptions (xDate, yDate, colors) {
@@ -362,7 +376,7 @@
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(14)
                        fontSize: fontSize(12)
                    },
                    axisLine: {
                        lineStyle: {
@@ -385,6 +399,10 @@
                        data: yDate,
                        type: 'bar',
                        barWidth: '40%',
                        emphasis: {
                            disabled: true,
                            focus: 'none'
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
@@ -433,10 +451,10 @@
                this.initPersonEcharts()
                homePersonmyChart.off('click')
                this.clickPeopleChart()
                xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
                colors = ['#06B5D7', '#44C0C1', '#71C8B1']
                homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                // xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                // yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
                // colors = ['#06B5D7', '#44C0C1', '#71C8B1']
                // homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
            } else if (type == 1) {
                this.peopleTabClick(type)
            }
@@ -523,7 +541,7 @@
                    //     show: true,
                    //     type: 'bar',
                    //     barGap: '-100%',
                    //     barWidth: '35%', //统计条宽度 
                    //     barWidth: '35%', //统计条宽度
                    //     itemStyle: {
                    //         normal: {
                    //             color: 'rgba(102, 102, 102,0.5)'
@@ -651,7 +669,7 @@
                //         end: 40,
                //         zoomOnMouseWheel: false,  // 关闭滚轮缩放
                //         moveOnMouseWheel: true, // 开启滚轮平移
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
                //     }
                // ]
            }
@@ -691,85 +709,11 @@

        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                let xDate, yDate, colors
                this.dataDeep = 2
                if (params.name == '车站所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [88, 221, 641, 432, 123]
                    colors = ['#ccf9d0', '#f9d888', '#f7857e']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '沙溪所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [641, 423, 221, 123, 88]
                    colors = ['#102129', '#1f3942', '#2a4f5f']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '灵溪所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [111, 531, 211, 431, 64]
                    colors = ['#23b9e9', '#c76ee0', '#f05265']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '北门所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [887, 234, 452, 321, 154]
                    colors = ['#b22d2b', '#614976', '#4c3042']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '江光所') {
                    xDate = ['责任区1', '责任区2', '责任区3', '责任区4', '责任区5']
                    yDate = [400, 500, 200, 450, 245]
                    colors = ['#3089bf', '#77d8f9', '#f4fcfe']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '湖北') {
                    xDate = ['武汉市', '黄石市', '宜昌市', '鄂州市', '荆门市']
                    yDate = [88, 221, 641, 432, 123]
                    colors = ['#2b5144', '#5a987f', '#94ebc1']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '上海') {
                    xDate = ['黄浦区', '长宁区', '静安区', '虹口区', '闵行区']
                    yDate = [641, 423, 221, 123, 88]
                    colors = ['#f750c2', '#d6369a', '#bc1f76']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '北京') {
                    xDate = ['东城区', '西城区', '海淀区', '昌平区', '大兴区']
                    yDate = [111, 531, 211, 431, 64]
                    colors = ['#7e81d5', '#86abe6', '#8fe5e3']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '广东') {
                    xDate = ['珠海市', '东菀市', '佛山市', '中山市', '惠州市']
                    yDate = [887, 234, 452, 321, 154]
                    colors = ['#ba1432', '#6b0e33', '#2a0b35']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '浙江') {
                    xDate = ['杭州市', '舟山市', '宁波市', '嘉兴市', '绍兴市']
                    yDate = [400, 300, 200, 450, 245]
                    colors = ['#f12e10', '#f36c15', '#f4a818']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '日本') {
                    xDate = ['东京都', '北海道', '大阪府', '京都府', '43县']
                    yDate = [88, 221, 641, 432, 123]
                    colors = ['#6e978f', '#ad885a', '#e97b27']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '美国') {
                    xDate = ['加利福尼亚州', '德克萨斯州', '纽约州', '俄亥俄州']
                    yDate = [641, 423, 221, 123, 88]
                    colors = ['#d54956', '#9f976e', '#73d781']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '俄罗斯') {
                    xDate = ['西北联邦', '中央联邦', '南方联邦', '伏尔加联邦']
                    yDate = [111, 531, 211, 431, 64]
                    colors = ['#7d65c0', '#a47db4', '#e0a8c5']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '英国') {
                    xDate = ['英格兰', '威尔士', '苏格兰', '北爱尔兰']
                    yDate = [887, 234, 452, 321, 154]
                    colors = ['#584d7b', '#9b836a', '#f8ce52']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                } else if (params.name == '印度') {
                    xDate = ['德里', '哈里亚纳邦', '旁遮普邦', '喜马偕尔邦', '北方邦']
                    yDate = [400, 300, 200, 450, 245]
                    colors = ['#0f97f2', '#7d629d', '#e1344f']
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                if (params.data.type == 'policeStation') {
                    this.getVillagePersonStatisticInfoByPoliceStationId(params.data.name, params.data.id)
                } else {
                    this.$emit('showpeopledetail', params.name)
                    this.$emit('showpeopledetail', params.data.id, params.data.name)
                }
            })
        },
@@ -923,21 +867,22 @@

        backBegin () {
            this.dataDeep = 1
            let xDate, yDate, colors
            if (this.tabType == 0) {
                xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
                yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
                colors = ['#06B5D7', '#44C0C1', '#71C8B1']
            } else if (this.tabType == 1) {
                xDate = ['湖北', '上海', '北京', '广东', '浙江']
                yDate = [6414, 4231, 2211, 1231, 881]
                colors = ['#ef9faa', '#f7bfc6', '#fedade']
            } else if (this.tabType == 2) {
                xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
                yDate = [881, 1231, 2211, 4321, 6414]
                colors = ['#7d65c0', '#a47db4', '#e0a8c5']
            }
            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
            this.initPersonEcharts()
            // let xDate, yDate, colors
            // if (this.tabType == 0) {
            //     xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
            //     yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
            //     colors = ['#06B5D7', '#44C0C1', '#71C8B1']
            // } else if (this.tabType == 1) {
            //     xDate = ['湖北', '上海', '北京', '广东', '浙江']
            //     yDate = [6414, 4231, 2211, 1231, 881]
            //     colors = ['#ef9faa', '#f7bfc6', '#fedade']
            // } else if (this.tabType == 2) {
            //     xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
            //     yDate = [881, 1231, 2211, 4321, 6414]
            //     colors = ['#7d65c0', '#a47db4', '#e0a8c5']
            // }
            // homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },

        getKeyPersonCount (arr) {
@@ -1020,7 +965,36 @@
            })
        },

        //获取各个派出所的人口数量
        getPoliceStationInfo () {
            getVillagePersonStatisticInfo().then(res => {
                if (res.data.code == 200) {
                    this.policeStationPersonInfo = res.data.data
                    //异步，因此放进接口方法内部
                    this.initPersonEcharts()
                    this.clickPeopleChart()
                }
            })
        },

        //获取该派出所下的辖区
        getVillagePersonStatisticInfoByPoliceStationId (name, policeStationId) {
            getVillagePersonStatisticInfoByPoliceStationId(name, policeStationId).then(res => {
                if (res.data.code == 200) {
                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate = [], colors = ['#ccf9d0', '#f9d888', '#f7857e']
                    this.villagePersonStatisticInfoList.forEach(e => {
                        xDate.push(e.name.replace('居民委员会', ''))
                        yDate.push({
                            value: e.num,
                            name: e.name,
                            id: e.id
                        })
                    })
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
                }
            })
        }



@@ -1242,4 +1216,4 @@
        stroke-dashoffset: 888;
    }
}
</style>
</style>

 src/views/home/index.vue

@@ -11,17 +11,29 @@

<template>
    <div class="home-page container">
        <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
        <left-container
            class="left-container"
            @showpeopledetail="showpeopledetail"
            @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail"
            ref="leftContainer"
        ></left-container>

        <right-container class="right-container" @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType"
            ref="rightContainer"></right-container>
        <right-container
            class="right-container"
            @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType"
            ref="rightContainer"
        ></right-container>

        <bottom-container class="bottom-container" ref="bottomContainer"
        <bottom-container
            class="bottom-container"
            ref="bottomContainer"
            @changePoliceSituationHistoryType="changePoliceSituationHistoryType"
            @policeSituationChange="policeSituationChange"
            @policeSituationSiteClick="policeSituationSiteClick"></bottom-container>
            @policeSituationSiteClick="policeSituationSiteClick"
        ></bottom-container>

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -45,24 +57,51 @@
        </div>

        <div ref="RegionSelect" style="left: 0;" class="region-select">
            <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
                :options="policeStationOptions" :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
                :optionsName="'name'"
            ></map-select>

            <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
                :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
                :optionsName="'name'"
            ></map-select>

            <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
                :options="housingOptions" :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
                :optionsName="'name'"
            ></map-select>
        </div>

        <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box">
        <el-dialog
            :title="panoramaTitle"
            :modal="true"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
            class="panorama-details-box"
        >
            <!-- <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
            <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0" />
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -81,34 +120,76 @@
            </div>
        </el-dialog>

        <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose"
            :close-on-click-modal="true" class="area-details-box">
            <div class="item">
                <div>责任区负责人：</div>
                <div>王某某</div>
        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
            <div class="header">
                <div>
                    负责人：
                    <input type="text" v-model="peoplePoliceName" placeholder="请输入负责人名称" />
                </div>
                <div>
                    联系电话：
                    <input type="text" v-model="peopleCallPhone" 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>
            <div class="item">
                <div>责任区人口：</div>
                <div>10000</div>
            </div>
            <div class="item">
                <div>男女比例：</div>
                <div>0.92:1</div>
            </div>
            <div class="item">
                <div>所在地址：</div>
                <div>XXXXXXX</div>
            <el-table
                :data="peopleInfoList"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column label="序号" type="index" align="center">
                    <template scope="scope">
                        <span>{{(peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index +1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="责任区名称"></el-table-column>
                <el-table-column prop="policeName" label="负责人"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
                <el-table-column prop="areaNum" label="人口总数"></el-table-column>
            </el-table>

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

        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
        <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%"
                    <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">
                        :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>
@@ -120,23 +201,40 @@
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                <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>
                        <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>
            </div>
        </el-dialog>

        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
        <el-dialog
            :title="landTitle"
            :modal="true"
            :visible.sync="landVisible"
            :before-close="landBeforeClose"
            :close-on-click-modal="true"
            class="land-details-box"
        >
            <div class="header">
                <div>
                    负责人：
@@ -147,24 +245,55 @@
                    <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="clearLandDetailSearchValue"
                >清空</el-button>
            </div>

            <el-table :data="landDetailArr" style="width: 100%"
            <el-table
                :data="landDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template scope="scope">
                        <span>{{(landPage.currentPage - 1) * landPage.pageSize + scope.$index +1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="责任区名称" v-if="this.landType == 1"></el-table-column>
                <el-table-column prop="aoiName" label="小区名称" v-if="this.landType == 2"></el-table-column>
                <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"
                    :total="landPage.total"
                    :current-page="landPage.currentPage"
                    @current-change="landHandleCurrentChange"
                ></el-pagination>
            </div>
        </el-dialog>

        <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
        <el-dialog
            :title="keyPersonTitle"
            :modal="true"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
@@ -175,11 +304,23 @@
            </el-table>
        </el-dialog>

        <el-dialog title="警情信息" :modal="true" :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
        <el-dialog
            title="警情信息"
            :modal="true"
            :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose"
            :close-on-click-modal="true"
            class="policeSituation-details-box"
        >
            <div class="btn-change">
                <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div>
                <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div>
                <div
                    :class="{ on: policeInformationType == '接警信息' }"
                    @click="alarmOrActAsPolice('接警信息')"
                >接警信息</div>
                <div
                    :class="{ on: policeInformationType == '出警信息' }"
                    @click="alarmOrActAsPolice('出警信息')"
                >出警信息</div>
            </div>

            <div v-show="policeInformationType == '接警信息'" class="box">
@@ -241,7 +382,10 @@
                </div>
            </div>

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" class="box">
            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'"
                class="box"
            >
                <div class="item">
                    <div>处警单位编号:</div>
                    <div>{{ CJdata.CJDWBH }}</div>
@@ -298,14 +442,29 @@
                </div>
            </div>

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" class="box no-data">暂无数据
            </div>
            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'"
                class="box no-data"
            >暂无数据</div>
        </el-dialog>

        <el-dialog :title="dialogEquimentVideoTitle" :modal="true" :visible.sync="dialogEquimentVideoVisible"
            :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box">
            <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogEquimentVideoTitle"
            :modal="true"
            :visible.sync="dialogEquimentVideoVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                id="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>
    </div>
</template>
@@ -404,7 +563,7 @@
import axios from "axios"

import { getPanoramaList } from "@/api/panorama"
import { getResidentialQuartersList } from '@/api/dept/index.js'
import { getAreaPage, getResidentialQuartersList } from '@/api/dept/index.js'

import monitoringList from '@/assets/data/monitoring.js'
import leftContainer from './components/leftContainer'
@@ -441,8 +600,20 @@
            phoneDetails: {},
            phoneTitle: '',
            peopleTitle: '',
            peopleId: "",
            phoneVisible: false,
            peopleVisible: false,
            peopleInfoList: [],
            peoplePage: {
                total: 0,
                pageSize: 0,
                currentPage: 1
            },
            peopleSearchQuery: {
                id: "",
                policeName: "",
                phone: "",
            },
            houseList: [],
            carList: [],
            cameraList: [],
@@ -496,7 +667,13 @@
            landType: '',
            policeName: '',
            callPhone: '',

            landPage: {
                total: 0,
                pageSize: 0,
                currentPage: 1
            },
            peoplePoliceName: '',
            peopleCallPhone: '',
        }
    },

@@ -1160,9 +1337,26 @@
            this.$refs.RegionSelect.style.left = (bodyWidth - domWidth) / 2 + 'px'
        },

        showpeopledetail (name) {
        showpeopledetail (id, name) {
            this.peopleTitle = name
            this.peopleVisible = true
            this.peopleSearchQuery.id = id
            this.getPeopleInfoList(this.peoplePage.currentPage, this.peopleSearchQuery.id)
        },

        getPeopleInfoList (current, areaId, policeName, phone) {
            getAreaPage(current, areaId, policeName, phone).then(res => {
                if (res.data.code == 200) {
                    this.peopleInfoList = res.data.data.records
                    this.peoplePage.total = res.data.data.total
                    this.peoplePage.pageSize = res.data.data.size
                }
            })
        },

        handlePeopleCurrentChange (currentPage) {
            this.peoplePage.currentPage = currentPage
            this.getPeopleInfoList(this.peoplePage.currentPage, this.peopleSearchQuery.id, this.peoplePoliceName, this.peopleCallPhone)
        },

        showlanddetail (name, type, id) {
@@ -1170,7 +1364,7 @@
            this.landTitle = name
            this.landType = type
            this.landDetailId = id
            this.getLandDetail(type, id, '', '')
            this.getLandDetail(type, id)
        },

        // 获取设备分页数据
@@ -1354,21 +1548,40 @@
        clearLandDetailSearchValue () {
            this.policeName = ''
            this.callPhone = ''
            this.getLandDetail(this.landType, this.landDetailId, this.policeName, this.callPhone)
            this.landPage.currentPage = 1
            this.getLandDetail(this.landType, this.landDetailId)
        },

        searchLandDetail () {
            console.log(666)
            this.getLandDetail(this.landType, this.landDetailId, this.policeName, this.callPhone)
            this.landPage.currentPage = 1
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone)
        },

        getLandDetail (type, policeStationId, policeName, phone) {
            getLandDetail(type, policeStationId, policeName, phone).then(res => {
        getLandDetail (type, policeStationId, current, policeName, phone) {
            getLandDetail(type, policeStationId, current, policeName, phone).then(res => {
                this.landDetailArr = res.data.data.records
                this.landPage.pageSize = res.data.data.size
                this.landPage.total = res.data.data.total
            })
        },

        // 现有地详情弹窗分页
        landHandleCurrentChange (currentPage) {
            this.landPage.currentPage = currentPage
            this.getLandDetail(this.landType, this.landDetailId, this.landPage.currentPage, this.policeName, this.callPhone)
        },

        clearPeopleDetailSearchValue () {
            this.peoplePoliceName = ''
            this.peopleCallPhone = ''
            this.peoplePage.currentPage = 1
            this.getPeopleInfoList(this.peoplePage.currentPage, this.peopleSearchQuery.id)
        },

        searchPeopleDetail () {
            this.peoplePage.currentPage = 1
            this.getPeopleInfoList(this.peoplePage.currentPage, this.peopleSearchQuery.id, this.peoplePoliceName, this.peopleCallPhone)
        },
    },

    destroyed () {

 src/views/house/index.vue

@@ -25,7 +25,7 @@
                >
                    <el-input placeholder="请输入搜索条件" v-model="filterText"></el-input>

                    <!-- <el-tree
                    <el-tree
                        style="width: 360px; height: 400px; overflow: auto;"
                        class="select-tree-box"
                        :data="testData"
@@ -38,14 +38,6 @@
                        :expand-on-click-node="true"
                        check-strictly
                        :filter-node-method="filterNode"
                    ></el-tree>-->
                    <el-tree
                        style="width: 360px; height: 400px; overflow: auto;"
                        class="select-tree-box"
                        :props="props"
                        :load="loadNode"
                        ref="popupTree"
                        lazy
                    ></el-tree>
                </el-popover>

@@ -76,7 +68,12 @@
                        <div class="progress"></div>
                    </div>
                    <div class="housing-bg">
                        <!-- <img style="width: 100%; height: 100%;" :src="housingData.img" alt /> -->
                        <!-- <img style="height: 100%;" :src="villageInfo.pic_url" alt /> -->
                        <el-image
                            style=" height: 100%"
                            :src="villageInfo.pic_url"
                            :preview-src-list="villageInfo.pic_url_list"
                        ></el-image>
                    </div>
                    <div class="housing-introduce">
                        <div>
@@ -195,11 +192,11 @@

                            <div class="content">
                                <div class="one">
                                    <div @click="goTOPeopleDetail">
                                    <div @click="goTOPeopleDetail(1)">
                                        <div>{{ peopleInfo.registeredPopulation }}</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div @click="goTOPeopleDetail">
                                    <div @click="goTOPeopleDetail(2)">
                                        <div style="color:#FF796C">{{peopleInfo.KeyPopulation}}</div>
                                        <div>重点人口</div>
                                    </div>
@@ -592,27 +589,58 @@
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <div class="header">
                <div>
                    姓名：
                    <input type="text" v-model="peopleName" placeholder="请输入负责人名称" />
                </div>
                <div>
                    联系电话：
                    <input type="text" v-model="callPhone" 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="keyPersonDetailArr"
                :data="personDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template scope="scope">
                        <span>{{(peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index +1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="重点人员类型" v-if="keyPeopleType == 2"></el-table-column>
                <el-table-column prop="realName" label="姓名"></el-table-column>
                <el-table-column prop="cardNo" label="身份证号"></el-table-column>
                <el-table-column prop="address" label="地址" v-if="false"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="policeStation" label="所属派出所"></el-table-column>
                <el-table-column prop="housingEastate" label="所属责任区"></el-table-column>
                <el-table-column prop="policeStationName" label="所属派出所"></el-table-column>
                <el-table-column prop="areaName" label="所属责任区"></el-table-column>
            </el-table>
            <div class="pages" ref="tablePagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="peoplePage.pageSize"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="peopleHandleCurrentChange"
                ></el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listQuery, accurateSearch } from "@/utils/search.js"
import { getSearchExtensively, getHouses, getSearchExtensivelyBgAoiDeepdata, getPoliceStationLazyTree, getVillageInfo, getVillagePersonStatisticInfoByBuildId, getVillagePersonInfo } from '@/api/dept/index.js'
import { getSearchExtensively, getHouses, getSearchExtensivelyBgAoiDeepdata, getPoliceStationTrees, getVillageInfo, getVillagePersonStatisticInfoByBuildId, getVillagePersonInfo } from '@/api/dept/index.js'
import { getAlarmList } from "@/api/home/index.js"


@@ -669,62 +697,7 @@
            businessData: [],
            keyPersonTitle: '人员详情',
            keyPersonVisible: false,
            keyPersonDetailArr: [
                {
                    "name": "张某某",
                    "sex": "女",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "车站所",
                    "housingEastate": "责任区1",
                    "type": "涉恐人员"
                },
                {
                    "name": "黄某某",
                    "sex": "男",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "沙溪所",
                    "housingEastate": "责任区4",
                    "type": "涉恐人员"
                },
                {
                    "name": "邓某某",
                    "sex": "女",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "灵溪所",
                    "housingEastate": "责任区3",
                    "type": "涉恐人员"
                },
                {
                    "name": "章某某",
                    "sex": "女",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "江光所",
                    "housingEastate": "责任区1",
                    "type": "涉恐人员"
                },
                {
                    "name": "王某某",
                    "sex": "女",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "车站所",
                    "housingEastate": "责任区3",
                    "type": "涉恐人员"
                },
                {
                    "name": "贾某某",
                    "sex": "男",
                    "address": "XXXXXX",
                    "phone": "132XXXX6666",
                    "policeStation": "灵溪所",
                    "housingEastate": "责任区2",
                    "type": "涉恐人员"
                }
            ],
            personDetailArr: [],

            // 报警信息
            policeSituationHistoryArr: [],
@@ -744,6 +717,16 @@
            villageInfo: {},
            floorInfo: {},
            peopleInfo: {},
            choosedBuildId: '',
            keyPeopleType: '',
            peoplePage: {
                total: 0,
                pageSize: 0,
                currentPage: 1
            },
            peopleName: '',
            callPhone: '',

        }
    },
    watch: {
@@ -755,13 +738,11 @@
    created () {
        // 首页跳转社区包含参数
        if (this.$route.query.id) {
            console.log(this.$route.query.id, 111112233)
            this.getVillageInfo(this.$route.query.id)
            // 使用首页传过来的小区id获取停车场出入口商场和 小区名称类型地址数据
            this.getSearchExtensivelyBgAoiDeepdata('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.$route.query.id, '1|3')
        } else {// 直接进入社区默认小区数据（万达华府）
            console.log(this.$route.query.id, 6666666)
            // 默认获取万达广场的责任民警及所属辖区
        } else {
            //直接进入社区 默认获取万达广场的责任民警及所属辖区
            this.getVillageInfo('644A2C4049024A3C8C76D96EEE4366FD')
            // 大搜之搜索面详细数据（停车场出入口商场）--默认万达华府
            this.getSearchExtensivelyBgAoiDeepdata('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', '644A2C4049024A3C8C76D96EEE4366FD', '1|3')
@@ -818,6 +799,12 @@
                this.villageInfo.name = villageData.name
                this.villageInfo.address = villageData.address
                this.villageInfo.type_name = villageData.type_name
                this.villageInfo.pic_url = 'http://192.168.0.112/' + villageData.pic_url.split(';')[0]
                this.villageInfo.pic_url_list = []
                villageData.pic_url.split(';').forEach(item => {
                    let pic_url_item = 'http://192.168.0.112/' + item
                    this.villageInfo.pic_url_list.push(pic_url_item)
                })
                // 停车场出入口商场
                let deepData = res.data.result[0].deep_infos.deep_info
                this.parkingLotData = []
@@ -892,6 +879,7 @@
            this.floorInfo.elev = item.elev
            this.floorInfo.floor_num = item.floor_num
            // 获取户籍人口重点人口数据
            this.choosedBuildId = item.build_id
            this.getVillagePersonStatisticInfoByBuildId(item.build_id)
            this.getHouses(item.build_id, '361102')
            this.$EventBus.$emit('toPosition', item)
@@ -1126,8 +1114,12 @@
            })
        },

        goTOPeopleDetail () {
        goTOPeopleDetail (status) {
            this.keyPersonVisible = true
            this.keyPeopleType = status
            this.peoplePage.currentPage = 1
            this.keyPersonTitle = status == 1 ? '户籍人口详情' : '重点人口详情'
            this.getVillagePersonInfo('', this.choosedBuildId, status == 1 ? '' : status)
        },

        // 获取历史接警记录
@@ -1150,9 +1142,14 @@
        },

        // 分页选择事件
        handleCurrentChange: function (currentPage) {
        handleCurrentChange (currentPage) {
            this.callPolicePage.currentPage = currentPage
            // this.getAlarmList()
        },

        peopleHandleCurrentChange (currentPage) {
            this.peoplePage.currentPage = currentPage
            this.getVillagePersonInfo('', this.choosedBuildId, this.keyPeopleType == 1 ? '' : this.keyPeopleType, currentPage)
        },

        // 警情列表点击事件
@@ -1168,34 +1165,6 @@
                    this.currentTableHeight = this.$refs.resultContentBox.offsetHeight - this.$refs.housingEstateInfoBox.offsetHeight - this.$refs.navTabBox.offsetHeight - this.$refs.ElPagination.offsetHeight
                }
            })
        },

        async loadNode (node, resolve) {
            console.log('node', node)
            if (node.level === 0) {
                let policeStaionList = []
                await getPoliceStationLazyTree(1).then(res => {
                    policeStaionList = res.data.data
                })
                return resolve(policeStaionList)
            }
            if (node.level == 1) {
                let areaList = []
                await getPoliceStationLazyTree(2, node.data.id).then(res => {
                    areaList = res.data.data
                })
                return resolve(areaList)
            }
            if (node.level == 2) {
                let villageList = []
                await getPoliceStationLazyTree(3, node.data.id).then(res => {
                    res.data.data.forEach(item => {
                        villageList = res.data.data
                    })
                })
                return resolve(villageList)
            }
            if (node.level == 3) return resolve([])
        },

        // 获取责任民警、所属辖区
@@ -1215,12 +1184,32 @@
        },

        // 房屋人口信息
        getVillagePersonInfo (resBusId) {
            getVillagePersonInfo(resBusId).then(res => {
                this.houseDate = res.data.data.records
        getVillagePersonInfo (resBusId, buildId, status, current, realName, phone) {
            getVillagePersonInfo(resBusId, buildId, status, current, realName, phone).then(res => {
                if (buildId) {
                    this.personDetailArr = res.data.data.records
                    this.peoplePage.pageSize = res.data.data.size
                    this.peoplePage.total = res.data.data.total
                } else {
                    this.houseDate = res.data.data.records
                }
            })
        },

        // 清空人员列表搜索内容
        clearPeopleDetailSearchValue () {
            this.callPhone = ''
            this.peopleName = ''
            this.peoplePage.currentPage = 1
            this.getVillagePersonInfo('', this.choosedBuildId, this.keyPeopleType == 1 ? '' : this.keyPeopleType, this.peoplePage.currentPage)
        },

        // 搜索指定人员
        searchPeopleDetail () {
            this.peoplePage.currentPage = 1
            this.getVillagePersonInfo('', this.choosedBuildId, this.keyPeopleType == 1 ? '' : this.keyPeopleType, this.peoplePage.currentPage, this.peopleName, this.callPhone)
        },

    },

    destroyed () {

 src/views/police/index.vue

@@ -14,27 +14,52 @@
        <div v-show="boxShow" class="container-content">
            <div class="switch-box" v-show="!detailFlag">
                资源类别：
                <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        class="option-css"></el-option>
                <el-select
                    v-model="typeValue"
                    @change="navClick"
                    placeholder="请选择"
                    class="type-select-css"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        class="option-css"
                    ></el-option>
                </el-select>
            </div>

            <div class="list-show" v-if="!detailFlag">
                <div class="search-box">
                    资源名称：
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入搜索条件"
                    />
                </div>

                <div class="list" ref="tableBox">
                    <el-table :data="equimentTableData"
                    <el-table
                        :data="equimentTableData"
                        :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 prop="name" :show-overflow-tooltip="true" label="名称"
                            min-width="30%"></el-table-column>
                        <el-table-column prop="channelId" :show-overflow-tooltip="true" label="通道编号"
                            min-width="24%"></el-table-column>
                        :height="currentTableHeight"
                    >
                        <el-table-column
                            prop="name"
                            :show-overflow-tooltip="true"
                            label="名称"
                            min-width="30%"
                        ></el-table-column>
                        <el-table-column
                            prop="channelId"
                            :show-overflow-tooltip="true"
                            label="通道编号"
                            min-width="24%"
                        ></el-table-column>
                        <el-table-column prop="status" label="状态" min-width="18%">
                            <template slot-scope="scope">
                                <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
@@ -43,14 +68,29 @@

                        <el-table-column label="操作" align="center" min-width="28%">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button v-show="navType == 0" @click="equipmentTrack(scope.row)" type="text"
                                    size="small" title="轨迹">
                                <el-button
                                    v-show="navType == 0"
                                    @click="equipmentTrack(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                <el-button
                                    @click="play(scope.row)"
                                    type="text"
                                    size="small"
                                    title="播放视频"
                                >
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
@@ -58,9 +98,14 @@
                    </el-table>

                    <div class="pages" ref="tablePagination">
                        <el-pagination background layout="prev, pager, next" :page-size="equimentPage.pageSize"
                            :page-count="equimentPage.count" :current-page="equimentPage.currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="equimentPage.pageSize"
                            :page-count="equimentPage.count"
                            :current-page="equimentPage.currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
@@ -71,14 +116,12 @@
                    <ul>
                        <li>
                            <div>通道编号：</div>
                            <div>{{ currentSelectEquipment.channelId ? currentSelectEquipment.channelId : '' }}
                            </div>
                            <div>{{ currentSelectEquipment.channelId ? currentSelectEquipment.channelId : '' }}</div>
                        </li>

                        <li>
                            <div>设备编号：</div>
                            <div>{{ currentSelectEquipment.deviceId ? currentSelectEquipment.deviceId : '' }}
                            </div>
                            <div>{{ currentSelectEquipment.deviceId ? currentSelectEquipment.deviceId : '' }}</div>
                        </li>

                        <li>
@@ -88,18 +131,27 @@

                        <li>
                            <div>状态：</div>
                            <div>{{
                            <div>
                                {{
                                currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' :
                                    '在线') : ''
                            }}</div>
                                '在线') : ''
                                }}
                            </div>
                        </li>

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

@@ -112,8 +164,13 @@
        </div>

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

        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
                    :key="index">{{ item.name }}</div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                id="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>
    </div>
</template>
@@ -549,7 +622,6 @@
            await getHistoricalTrack(params).then(res => {
                positionArr = res.data.data
            })

            return positionArr
        },

@@ -702,7 +774,7 @@
            align-items: center;
            justify-content: space-around;

            &>div {
            & > div {
                flex: 1;
            }
        }
@@ -816,18 +888,18 @@
                color: #fff;
                border-bottom: 1px solid #fff;

                &>div {
                & > div {
                    text-align: center;
                }

                &>div:first-child {
                & > div:first-child {
                    flex: 2;
                }

                &>div:last-child {
                & > div:last-child {
                    flex: 6;

                    &>div {
                    & > div {
                        width: 100% !important;
                    }
                }
@@ -929,7 +1001,7 @@
        border-radius: 10px;
        overflow: hidden;

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