户籍人口柱状图弹窗添加姓名和电话两个搜索条件

guoshilong

2023-01-16 c08e593f4b8a58eae72a597e91955a2f8f9802f7

户籍人口柱状图弹窗添加姓名和电话两个搜索条件

 src/api/dept/index.js

@@ -230,14 +230,16 @@
}

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

 src/styles/base/index.scss

@@ -283,6 +283,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;
        }

    }
}

.equiment-details-box {
@@ -409,7 +451,7 @@
            flex: 1;
            .el-table th.el-table__cell>.cell{
                font-size:  16px;
            } 
            }
        }
        .el-table {
            height: calc(100% - 40px);

 src/views/home/index.vue

@@ -84,6 +84,19 @@
        <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="peopleSearchQuery.policeName" placeholder="请输入负责人名称" />
            </div>
            <div>
              联系电话：
              <input type="text" v-model="peopleSearchQuery.phone" 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%"
@@ -447,7 +460,6 @@
            phoneDetails: {},
            phoneTitle: '',
            peopleTitle: '',
            peopleId:"",
            phoneVisible: false,
            peopleVisible: false,
            peopleInfoList:[],
@@ -457,6 +469,11 @@
              total:0,
              pageSize:5,
              currentPage:1
            },
            peopleSearchQuery:{
              id:"",
              policeName:"",
              phone:"",
            },
            houseList: [],
            carList: [],
@@ -1177,26 +1194,35 @@

        showpeopledetail (id,name) {
            this.peopleTitle = name
            this.peopleId = id
            this.peopleSearchQuery.id = id
            this.getPeopleInfoList(this.peopleSearchQuery.id,"","")
        },

        getPeopleInfoList(id,policeName,phone){
            getAreaPage(this.peoplePage.currentPage,this.peoplePage.pageSize,id,policeName,phone).then(res=>{
                if (res.data.code == 200){
                  let data = res.data.data
                  this.peopleInfoList = data.records
                  this.peoplePage.count = data.pages
                  this.peopleVisible = true
                }
            })
        },

        handlePeopleCurrentChange(currentPage){
            this.peoplePage.currentPage = currentPage
            this.getPeopleInfoList()
        },

        getPeopleInfoList(){
          getAreaPage(this.peoplePage.currentPage,this.peoplePage.pageSize,this.peopleId).then(res=>{
            if (res.data.code == 200){
              let data = res.data.data
              this.peopleInfoList = data.records
              this.peoplePage.count = data.pages
              this.peopleVisible = true
            }
          })
        searchPeopleDetail(){
          this.getPeopleInfoList(this.peopleSearchQuery.id,this.peopleSearchQuery.policeName,this.peopleSearchQuery.phone)
        },

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

          this.getPeopleInfoList()
      },
        clearPeopleDetailSearchValue(){
          this.peopleSearchQuery.policeName = ''
          this.peopleSearchQuery.phone = ''
          this.getPeopleInfoList(this.peopleSearchQuery.id,this.peopleSearchQuery.policeName,this.peopleSearchQuery.phone)
        },

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