特殊人群

src/apps/AppSpecialPeople/components/detail.vue

@@ -15,7 +15,7 @@
         </div>
         <div class="search-input" v-if="tabIndex">
           <img src="./img/search-icon.png" alt="">
-          <u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18" />
+          <u-input type="text" placeholder="请输入姓名" placeholder-style="color:#999;font-size:13px;" height="18" v-model="name" @confirm="getUserList" :clearable="false" maxlength="6" />
         </div>
       </div>
     </div>
@@ -23,73 +23,44 @@
       <div class="info-content">
       <div class="title">特殊人群</div>
       <div class="num-content">
-        <div class="num-item">
+        <div class="num-item" v-for="(item, index) in statisticsList" :key="index">
-          <h3>18</h3>
+          <h3>{{item.value}}</h3>
-          <p>残疾人</p>
+          <p>{{item.label}}</p>
-        </div>
-        <div class="num-item">
-          <h3>18</h3>
-          <p>精神疾病患者</p>
-        </div>
-        <div class="num-item">
-          <h3>18</h3>
-          <p>社区矫正人群</p>
-        </div>
-        <div class="num-item">
-          <h3>18</h3>
-          <p>吸毒人员</p>
-        </div>
-        <div class="num-item">
-          <h3>18</h3>
-          <p>刑满释放人员</p>
         </div>
+        <AiEmpty v-if="!statisticsList.length"/>
       </div>
       </div>
       <div class="info-content">
         <div class="title">本月新增</div>
         <div class="num-content color-org">
-          <div class="num-item">
+          <div class="num-item" v-for="(item, index) in statisticsListMon" :key="index">
-            <h3>18</h3>
+          <h3>{{item.value}}</h3>
-            <p>残疾人</p>
+          <p>{{item.label}}</p>
-          </div>
+        </div>
-          <div class="num-item">
+        <AiEmpty v-if="!statisticsListMon.length"/>
-            <h3>18</h3>
-            <p>精神疾病患者</p>
-          </div>
-          <div class="num-item">
-            <h3>18</h3>
-            <p>社区矫正人群</p>
-          </div>
-          <div class="num-item">
-            <h3>18</h3>
-            <p>吸毒人员</p>
-          </div>
-          <div class="num-item">
-            <h3>18</h3>
-            <p>刑满释放人员</p>
-          </div>
         </div>
       </div>
     </div>
     <div v-else>
-      <div class="item-content">
+      <div class="item-content" v-for="(item, index) in userList" :key="index">
-        <div class="title">
+        <div class="title" @click="showUserType(index)">
-          <h2>精神病患者</h2>
+          <h2>{{item.label}}</h2>
-          <img src="./img/down-icon.png" alt="">
+          <img src="./img/down-icon.png" alt="" :class="item.check ? 'img-active' : ''">
         </div>
-        <div class="user-list">
+        <div class="user-list" v-if="item.check">
-          <div class="user-item">
+          <div class="user-item" v-for="(e, indexs) in item.value" :key="indexs" v-if="item.value && item.value.length">
             <div class="user-img">
               <img src="./img/user-img.png" alt="">
             </div>
             <div class="user-info">
-              <p class="name">李毅</p>
+              <p class="name">{{e.name}}</p>
               <div class="phone">
-                <span>428008******8765</span>
+                <span>{{idNumberInit(e.idNumber)}}</span>
-                <span>18164065235</span>
+                <span>{{e.phone}}</span>
               </div>
             </div>
           </div>
+          <p class="text" v-if="!item.value.length">{{'暂无' + item.label + '信息'}}</p>
         </div>
       </div>
       <div class="footer" @click="toAdd">
@@ -106,9 +77,14 @@ export default {
   data() {
     return {
       areaId: '',
+      areaName: '',
       tabs: ['统计信息', '人员信息'],
       tabIndex: 0,
       addressArea: '',
+      statisticsList: [],
+      statisticsListMon: [],
+      userList: [],
+      name: ''
     }
   },
   computed: { ...mapState(['user']) },
@@ -116,6 +92,7 @@ export default {
     this.areaId = this.user.areaId
     this.areaName = this.user.areaName
     this.getStatistic()
+    this.getStatisticMon()
     this.getUserList()
   },
 
@@ -123,21 +100,53 @@ export default {
     areaSelect(e) {
       this.areaId = e.id
       this.areaName = e.name
+      this.getStatistic()
+      this.getStatisticMon()
+      this.getUserList()
     },  
     tabClick(index) {
       this.tabIndex = index
     },
     getStatistic() {
-      this.$http.post(`/app/appapplicationinfo/specialStatistic?areaId=${this.areaId}&type=0`).then((res) => {
+      this.statisticsList = []
+      this.$http.post(`/app/appapplicationinfo/specialStatistic?areaId=${this.areaId}&type=0&range=0`).then((res) => {
         if (res.code == 0) {
-          
+          for(let i in res.data){
+            var obj = {
+              label: i,
+              value: res.data[i]
+            }
+            this.statisticsList.push(obj)
+          }
+        }
+      })
+    },
+    getStatisticMon() {
+      this.statisticsListMon = []
+      this.$http.post(`/app/appapplicationinfo/specialStatistic?areaId=${this.areaId}&type=0&range=1`).then((res) => {
+        if (res.code == 0) {
+          for(let i in res.data){
+            var obj = {
+              label: i,
+              value: res.data[i]
+            }
+            this.statisticsListMon.push(obj)
+          }
         }
       })
     },
     getUserList() {
-      this.$http.post(`/app/appapplicationinfo/queryPeople?areaId=${this.areaId}&type=0`).then((res) => {
+      this.userList = []
+      this.$http.post(`/app/appapplicationinfo/queryPeople?areaId=${this.areaId}&type=0&name=${this.name}`).then((res) => {
         if (res.code == 0) {
-          
+          for(let i in res.data){
+            var obj = {
+              label: i,
+              value: res.data[i],
+              check: false
+            }
+            this.userList.push(obj)
+          }
         }
       })
     },
@@ -145,6 +154,25 @@ export default {
       this.$emit('change', {
         type: 'Add',
       })
+    },
+    idNumberInit(idNumber) {
+      if(!idNumber) {
+        idNumber = ''
+      }else {
+        idNumber = idNumber.substring(0, 5) + '******' + idNumber.substring(12, 15)
+      }
+      return idNumber
+    },
+    showUserType(index) {
+      if(this.userList[index].check) {
+        this.userList[index].check = false
+      }else {
+        this.userList.map((item) => {
+          item.check = false
+        })
+        this.userList[index].check = true
+      }
+     
     }
   }
 }
@@ -214,16 +242,20 @@ export default {
         height: 64px;
         background: #F5F5F5;
         border-radius: 32px;
-        padding: 14px 32px;
+        padding: 14px 32px 14px 64px;
         box-sizing: border-box;
+        position: relative;
         img{
           width: 32px;
           height: 32px;
           margin-right: 12px;
+          position: absolute;
+          top: 18px;
+          left: 24px;
         }
         ::v-deep .u-input{
           display: inline-block;
-          width: 280px;
+          width: 240px;
           font-size: 26px;
         }
       }
@@ -315,6 +347,7 @@ export default {
           }
         }
         .user-info{
+          width: 100%;
           .name{
             font-size: 32px;
             font-family: PingFangSC-Medium, PingFang SC;
@@ -324,6 +357,7 @@ export default {
             margin-bottom: 8px;
           }
           .phone{
+            width: 100%;
             font-size: 26px;
             font-family: PingFangSC-Regular, PingFang SC;
             color: #999;
@@ -335,6 +369,13 @@ export default {
       }
     }
   }
+  .text{
+    height: 96px;
+    line-height: 96px;
+    color: #999;
+    font-size: 28px;
+    text-align: center;
+  }
   .footer{
     width: 100%;
     position: fixed;