用户中心样式优化与功能增强

src/api/data.js

@@ -38,8 +38,19 @@ export function countByWarningCategory() {
  */
 export function getCommunityByDeptId(deptId) {
   return request({
-    url: '/sooka-digital-construction/gas/getCommunityByDeptId?deptId='+deptId,
+    url: '/sooka-digital-construction/community/getCommunityByDeptId?deptId='+deptId,
     method: 'get',
   })
 }
+/**
+ * 根据小区查询用户
+ * @returns {*}
+ */
+export function getCustomerByCommunityId(param) {
+  return request({
+    url: '/sooka-digital-construction/customer/list',
+    method: 'get',
+    params: param
+  })
+}
 

src/views/useCenter.vue

@@ -11,16 +11,16 @@
       <el-input
         placeholder="请输入小区名称"
         suffix-icon="el-icon-search"
-        v-model="input1">
+        v-model="communitySearch">
       </el-input>
       <dl class="sp_list">
-        <dt><span class="dt1" style="width: 150px!important">名称</span><span class="dt2" style="width: 100px!important">用户数量</span><span class="dt3" style="width: 30px!important">定位</span>
+        <dt><span class="dt1" style="width: 150px!important;text-align: center;">名称</span><span class="dt2" style="width: 100px!important;text-align: center;">用户数量</span><span class="dt3" style="width: 30px!important;text-align: center;">定位</span>
         </dt>
         <div class="hei_scroll" style="height: 46vh">
-          <dd v-for="item in communityList">
-            <span class="dt1" style="width: 150px!important">{{ item.communityName }}</span>
-            <span class="dt2" style="width: 100px!important">{{ item.personNum }}</span>
-            <span class="dt3" style="width: 30px!important" @click="dropLocation(item.latitude,item.longitude)"><img
+          <dd v-for="(item,index) in communityList" :class="{on:currentClass==item.id}">
+            <span class="dt1" style="width: 150px!important;" @click="getCustomerByCommunityId(item.id)" :title="item.name">{{ item.name.length > 8 ? item.name.substring(0, 8) + '...' : item.name }}</span>
+            <span class="dt2" style="width: 100px!important;text-align: center;" @click="getCustomerByCommunityId(item.id)">{{ item.num }}</span>
+            <span class="dt3" style="width: 30px!important;text-align: center;" @click="dropLocation(item.type,item.name,item.latLngs,item.latitude,item.longitude)"><img
               src="../assets/images/sentinel/hz_list_d.png"/></span>
           </dd>
         </div>
@@ -33,8 +33,8 @@
         <el-input
           placeholder="请输入用户姓名"
           suffix-icon="el-icon-search"
-          v-model="input1">
-          style="flex: 1;">
+          v-model="userParams.name">
+          <template #append></template>
         </el-input>
       </div>
 
@@ -45,17 +45,19 @@
           <span class="dt3" style="width: 80px!important;">手机号码</span>
         </dt>
         <div class="hei_scroll hei56">
-          <dd v-for="(e,idx) in userListSearch" :key="idx">
+          <dd v-for="(e,idx) in userList" :key="idx">
             <span class="dt1" style="width: 80px!important;">{{ idx + 1 }}</span>
             <span class="dt2" style="width: 80px!important;">{{ e.name }}</span>
-            <span class="dt2" style="width: 80px!important;">{{ e.number }}</span>
+            <span class="dt2" style="width: 80px!important;">{{ e.phone }}</span>
           </dd>
         </div>
       </dl>
       <el-pagination
         background
         layout="prev, pager, next"
-        :total="10">
+        @current-change="pageNumHasChanged"
+        :current-page.sync="userParams.pageNum"
+        :total="userTotal">
       </el-pagination>
     </div>
   </div>
@@ -68,7 +70,7 @@ import '../assets/styles/hz_body.css';
 import {
   selectConfigKey
 } from "@/api/system/config";
-import { userStats,getCommunityByDeptId } from '@/api/data'
+import { userStats,getCommunityByDeptId,getCustomerByCommunityId } from '@/api/data'
 // import * as echarts from 'echarts'
 let echarts = require("echarts");
 export default {
@@ -102,38 +104,26 @@ export default {
       isVisible: false, // 初始时设置为false，不显示内容
       botIndex: 0,
       routerIdx: 3,                    // 当前导航索引
-      input: '',
-      input1: '',
+      communitySearch: '',
+      userSearch: '',
       title: '四平市智慧哨兵监管平台',
       enterpriseList: [
         {name:'华生',id:314459},
         {name:'港华',id:314462},
-        {name:'奥德',id:314453},
-        {name:'润发',id:314454},
+        {name:'奥德',id:314463},
+        {name:'润发',id:314464},
       ],
+      communityListSearch:[],
       communityList:[],
-      userListSearch:[
-        {name:'张利',number:'15602523655'},
-        {name:'李明',number:'13812345678'},
-        {name:'王芳',number:'13923456789'},
-        {name:'刘洋',number:'13734567890'},
-        {name:'陈静',number:'13645678901'},
-        {name:'杨帆',number:'13556789012'},
-        {name:'赵敏',number:'13467890123'},
-        {name:'黄勇',number:'13378901234'},
-        {name:'周杰',number:'13289012345'},
-        {name:'吴娜',number:'13190123456'},
-        {name:'徐强',number:'13001234567'},
-        {name:'孙丽',number:'18912345678'},
-        {name:'马超',number:'18823456789'},
-        {name:'朱琳',number:'18734567890'},
-        {name:'胡斌',number:'18645678901'},
-        {name:'林涛',number:'18556789012'},
-        {name:'何敏',number:'18467890123'},
-        {name:'郭伟',number:'18378901234'},
-        {name:'罗娜',number:'18289012345'},
-        {name:'高飞',number:'18190123456'}
-      ],
+      currentClass:null,
+      userList:[],
+      userTotal:0,
+      userParams:{
+        pageNum:1,
+        pageSize:10,
+        communityId:null,
+        name:null
+      },
       /** 用户数量信息 **/
       totalUsers:0,
       businessUsers:0,
@@ -141,42 +131,77 @@ export default {
       industryUsers:0,
     }
   },
+  watch:{
+    ['userParams.name'](){
+      this.getCustomerByCommunityId(this.userParams.communityId)
+    },
+  },
   methods: {
     getCommunityByDeptId(id){
       let that = this;
       getCommunityByDeptId(id).then(req => {
         that.botIndex=id
         that.communityList = req.data;
+        that.communityListSearch = req.data;
         const markersList = []
         if (req.data != null && req.data.length > 0) {
           for (let i = 0; i < req.data.length; i++) {
-            let markersMap = {
-              lng: 124.59,
-              lat: 43.02,
-              icon: 'area',
-              bindPopupHtml: '',
-              click: 'openAreaDetails',
-              parameter: req.data[i],
-              keepBindPopup: false,
-              isAggregation: false
+            if(i==0){
+              that.getCustomerByCommunityId(req.data[i].id)
+            }
+            if( req.data[i].type==1){
+              let markersMap = {
+                lng: 124.59,
+                lat: 43.02,
+                icon: 'area',
+                bindPopupHtml: '',
+                click: 'openAreaDetails',
+                parameter: req.data[i],
+                keepBindPopup: false,
+                isAggregation: false
+              }
+              markersMap.lng = req.data[i].longitude
+              markersMap.lat = req.data[i].latitude
+              markersList.push(markersMap);
+            }
+              that.$parent.$refs.supermap.clearGList()
+              that.$parent.$refs.supermap.clearM()
+              that.$parent.$refs.supermap.setMarkers(markersList)
             }
-            markersMap.lng = req.data[i].longitude
-            markersMap.lat = req.data[i].latitude
-            markersList.push(markersMap);
-          }
-          setTimeout(() => {
-            that.$parent.$refs.supermap.clearM()
-            that.$parent.$refs.supermap.setMarkers(markersList)
-          }, 1000)
         } else {
-          setTimeout(() => {
+            that.$parent.$refs.supermap.clearGList()
             that.$parent.$refs.supermap.clearM()
-          }, 1000)
         }
       })
     },
-    dropLocation(lat, lng) {
-      this.$parent.$refs.supermap.dropLocation(lat*1, lng*1)
+    getCustomerByCommunityId(id){
+      let that = this;
+      that.currentClass = id
+      that.userParams.communityId = id
+      getCustomerByCommunityId(this.userParams).then(req => {
+        that.userList = req.rows;
+        that.userTotal = req.total;
+      })
+    },
+    pageNumHasChanged(e){
+      this.getCustomerByCommunityId(this.userParams.communityId)
+    },
+    dropLocation(type,name,latLngs,lat,lng) {
+      this.$parent.$refs.supermap.clearGList()
+      if(type==1){
+        this.$parent.$refs.supermap.dropLocation(lat*1, lng*1)
+      }else if(type==2){
+        if(latLngs.length){
+          let graphicsList=[{'latLng':latLngs.reduce((acc, item) => {
+              acc.push(item.longitude*1);
+              acc.push(item.latitude*1);
+              return acc;
+            }, []),'name':name}]
+          this.$parent.$refs.supermap.dropLocation(latLngs[0].latitude,latLngs[0].longitude)
+          this.$parent.$refs.supermap.setGraphicsLists(graphicsList, '#E3F2FD' , 0.8)
+        }
+
+      }
     },
     //设备分析
     chart() {
@@ -200,7 +225,7 @@ export default {
           type: "pie",
           radius: "50%",
           center: ["50%", "70%"],
-         
+
           data: [{
             name: "商业用户",
             value: this.businessUsers,
@@ -275,7 +300,7 @@ export default {
 		  			]
 		  			return new echarts.graphic.LinearGradient(1, 0, 0, 0,
 		  		[{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
-		  
+
 		  				offset: 0,
 		  				color: colorList[params.dataIndex].c1
 		  			}, {
@@ -573,6 +598,12 @@ i, b, u {
 
 .hei_scroll {
   overflow-y: scroll;
+  span.dt1 {
+    width: 40px;
+    text-align: center;
+    line-height: 38px;
+    position: relative;
+  }
 }
 
 .hei_scroll::-webkit-scrollbar {