首页现有人员搜索功能

guanqb

2023-01-16 8b967abf72aa249fc8f3588db6a2184d4722130d

首页现有人员搜索功能

 src/api/dept/index.js

@@ -233,13 +233,12 @@
}

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

 src/views/home/components/leftContainer.vue

@@ -189,7 +189,7 @@
<script>
import { fontSize } from '@/utils/fontSize.js'
import { getAreaStatisticInfo } from "@/api/home/index.js"
import {getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId} from "@/api/dept";
import { getVillagePersonStatisticInfo, getVillagePersonStatisticInfoByPoliceStationId } from "@/api/dept"

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

@@ -342,16 +342,16 @@
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)

            var xDate = [],yDate=[]
            var xDate = [], yDate = []
            //传入x,y轴数据
            this.policeStationPersonInfo.data.forEach(e=>{
              xDate.push(e.name)
              yDate.push({
                value:e.num,
                id:e.id,
                type:'policeStation',
                name:e.name
              })
            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']))
        },
@@ -376,7 +376,7 @@
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(14)
                        fontSize: fontSize(12)
                    },
                    axisLine: {
                        lineStyle: {
@@ -399,6 +399,10 @@
                        data: yDate,
                        type: 'bar',
                        barWidth: '40%',
                        emphasis: {
                            disabled: true,
                            focus: 'none'
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
@@ -705,92 +709,12 @@

        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                let xDate, yDate, colors
                this.dataDeep = 2
                if (params.data.type == 'policeStation'){
                  this.getVillagePersonStatisticInfoByPoliceStationId(params.data.name,params.data.id)
                }else {
                  this.$emit('showpeopledetail', params.data.id,params.data.name)
                if (params.data.type == 'policeStation') {
                    this.getVillagePersonStatisticInfoByPoliceStationId(params.data.name, params.data.id)
                } else {
                    this.$emit('showpeopledetail', params.data.id, params.data.name)
                }

                // 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)
                // } else {
                //     this.$emit('showpeopledetail', params.name)
                // }
            })
        },

@@ -1042,34 +966,34 @@
        },

        //获取各个派出所的人口数量
        getPoliceStationInfo(){
          getVillagePersonStatisticInfo().then(res=>{
            if (res.data.code == 200){
              this.policeStationPersonInfo = res.data.data
              //异步，因此放进接口方法内部
              this.initPersonEcharts()
              this.clickPeopleChart()
            }
          })
        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)
                  yDate.push({
                    value:e.num,
                    name:e.name,
                    id:e.id
                  })
              })
              homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
            }
          })
        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)
                }
            })
        }



 src/views/home/index.vue

@@ -128,15 +128,37 @@
            :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>
            <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" 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="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">
@@ -144,7 +166,7 @@
                    background
                    layout="prev, pager, next"
                    :page-size="peoplePage.pageSize"
                    :page-count="peoplePage.count"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="handlePeopleCurrentChange"
                ></el-pagination>
@@ -583,8 +605,8 @@
            peopleVisible: false,
            peopleInfoList: [],
            peoplePage: {
                count: 0,
                pageSize: 5,
                total: 0,
                pageSize: 0,
                currentPage: 1
            },
            peopleSearchQuery: {
@@ -650,7 +672,8 @@
                pageSize: 0,
                currentPage: 1
            },

            peoplePoliceName: '',
            peopleCallPhone: '',
        }
    },

@@ -1316,24 +1339,24 @@

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

        getPeopleInfoList () {
            getAreaPage(this.peoplePage.currentPage, this.peoplePage.pageSize, this.peopleId).then(res => {
        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.count = res.data.total
                    this.peoplePage.total = res.data.data.total
                    this.peoplePage.pageSize = res.data.data.size
                }
            })
        },

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

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

        showlanddetail (name, type, id) {
@@ -1548,6 +1571,17 @@
            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 () {