社区人员分页

guanqb

2023-01-16 628b6f3ac3e9dcaae49a6654097324acf859f9f9

社区人员分页

 src/api/dept/index.js

@@ -197,14 +197,17 @@
}

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

 src/styles/base/index.scss

@@ -415,6 +415,51 @@
            height: calc(100% - 40px);
            margin-bottom: 10px;
        }
        .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;
            }
            
        }
    }
}


 src/styles/media/index.scss

@@ -2108,7 +2108,38 @@
                        }

                        .el-table {
                            height: calc(100% - countSizeVh(50));
                            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));
                        }
                        
                    }

 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,37 +120,54 @@
            </div>
        </el-dialog>

        <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose"
            :close-on-click-modal="true" class="area-details-box">
        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
            <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 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>

          <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 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>

          <div class="pages" ref="tablePagination">

            <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                           :page-count="peoplePage.count" :current-page="peoplePage.currentPage"
                           @current-change="handlePeopleCurrentChange"></el-pagination>
          </div>

            <div class="pages" ref="tablePagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="peoplePage.pageSize"
                    :page-count="peoplePage.count"
                    :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>
@@ -123,23 +179,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>
                    负责人：
@@ -150,24 +223,50 @@
                    <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 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>
@@ -178,11 +277,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">
@@ -244,7 +355,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>
@@ -301,14 +415,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>
@@ -407,7 +536,7 @@
import axios from "axios"

import { getPanoramaList } from "@/api/panorama"
import {getAreaPage, 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'
@@ -444,14 +573,14 @@
            phoneDetails: {},
            phoneTitle: '',
            peopleTitle: '',
            peopleId:"",
            peopleId: "",
            phoneVisible: false,
            peopleVisible: false,
            peopleInfoList:[],
            peoplePage:{
              count:0,
              pageSize:5,
              currentPage:1
            peopleInfoList: [],
            peoplePage: {
                count: 0,
                pageSize: 5,
                currentPage: 1
            },
            houseList: [],
            carList: [],
@@ -506,6 +635,11 @@
            landType: '',
            policeName: '',
            callPhone: '',
            landPage: {
                total: 0,
                pageSize: 0,
                currentPage: 1
            },

        }
    },
@@ -577,6 +711,11 @@
    },

    methods: {
        // 现有地详情弹窗分页
        landHandleCurrentChange () {

        },

        getEquipmentAll (params) {
            getEquipmentAll(params).then(res => {
                if (params.type == 0) {
@@ -1170,28 +1309,28 @@
            this.$refs.RegionSelect.style.left = (bodyWidth - domWidth) / 2 + 'px'
        },

        showpeopledetail (id,name) {
        showpeopledetail (id, name) {
            this.peopleTitle = name
            this.peopleId = id
            this.getPeopleInfoList()
            this.peopleVisible = true
        },

        getPeopleInfoList(){
          getAreaPage(this.peoplePage.currentPage,this.peoplePage.pageSize,this.peopleId).then(res=>{
            if (res.data.code == 200){
              this.peopleInfoList = res.data.data.records
        getPeopleInfoList () {
            getAreaPage(this.peoplePage.currentPage, this.peoplePage.pageSize, this.peopleId).then(res => {
                if (res.data.code == 200) {
                    this.peopleInfoList = res.data.data.records

              this.peoplePage.count = res.data.total
            }
          })
                    this.peoplePage.count = res.data.total
                }
            })
        },

      handlePeopleCurrentChange(currentPage){
          this.peoplePage.currentPage = currentPage
        handlePeopleCurrentChange (currentPage) {
            this.peoplePage.currentPage = currentPage

          this.getPeopleInfoList()
      },
            this.getPeopleInfoList()
        },

        showlanddetail (name, type, id) {
            this.landVisible = true

 src/views/house/index.vue

@@ -583,7 +583,6 @@
                <el-table-column prop="cardNo" label="身份证号"></el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog
            :title="keyPersonTitle"
            :modal="false"
@@ -592,17 +591,33 @@
            :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="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 label="序号" type="index" width="50" align="center">
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template scope="scope">
                        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
                        <span>{{(peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index +1}}</span>
                    </template>
                </el-table-column>-->
                </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>
@@ -616,7 +631,7 @@
                    background
                    layout="prev, pager, next"
                    :page-size="peoplePage.pageSize"
                    :page-count="peoplePage.count"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="peopleHandleCurrentChange"
                ></el-pagination>
@@ -708,10 +723,11 @@
            keyPeopleType: '',
            peoplePage: {
                total: 0,
                pageSize: 9,
                count: 0,
                pageSize: 0,
                currentPage: 1
            },
            peopleName: '',
            callPhone: '',

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

        },

        // 获取历史接警记录
@@ -1122,13 +1138,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)
        },

        // 警情列表点击事件
@@ -1191,16 +1208,31 @@
        },

        // 房屋人口信息
        getVillagePersonInfo (resBusId, buildId, status) {
            getVillagePersonInfo(resBusId, buildId, status).then(res => {
        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.getVillagePersonInfo('', this.choosedBuildId, this.keyPeopleType == 1 ? '' : this.keyPeopleType, this.peoplePage.currentPage, this.peopleName, this.callPhone)
        },

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

    },

    destroyed () {