Merge remote-tracking branch 'origin/dev' into dev

src/apps/AppBuilding/components/list.vue

@@ -10,7 +10,7 @@
           <p class="address">{{item.createAddress}}</p>
           <span class="status" :class="'color'+item.locationStatus">{{$dict.getLabel('BuildLocationStatus', item.locationStatus)}}</span>
         </div>
-        <div class="item-btn" v-if="item.locationStatus != 1" @click="toMap(item.communityId, item.areaId)">
+        <div class="item-btn" v-if="item.locationStatus != 1" @click="toMap(item.id, item.areaId)">
           <span>去定位</span>
         </div>
       </div>
@@ -68,7 +68,7 @@ export default {
         params: {id, areaId}
       })
     }
-    
+
   },
   onReachBottom() {
     this.current++;
@@ -85,7 +85,7 @@ export default {
     .item{
       width: 100%;
       background: #FFF;
-      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
+      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
       border-radius: 8px;
       box-sizing: border-box;
       position: relative;
@@ -159,4 +159,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/apps/AppBuilding/components/map.vue

@@ -4,7 +4,7 @@
       <img src="./img/model-icon.png" alt="" @click="toDetail"> 楼栋<br/>模型
     </div>
     <div class="map-content">
-      <AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
+      <AiTMap :areaId="user.areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
     </div>
     <div class="footer">
       <div class="click" @click="isFlag=true">点击定位</div>
@@ -48,54 +48,62 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
+
 export default {
   props: ['params'],
   data() {
     return {
-      areaId: '',
       ops: {},
-      lib: '',
+      lib: null,
       map: null,
       markerLayer: '',
       isFlag: false,
       latLng: {lat: '', lng: ''},
+      retryTimes: 0
     }
   },
-  computed: { ...mapState(['user']) },
+  computed: {...mapState(['user'])},
   mounted() {
-    this.areaId = this.params.areaId
     this.initMap()
   },
 
   methods: {
     initMap() {  //初始化地图
-      this.$nextTick(() =>{
-        let {lib: TMap, map} = this
-        map.on("click", (evt) => {
-          if( this.markerLayer) {
-            this.markerLayer.setMap(null);
-          }
-         
-          this.markerLayer = new TMap.MultiMarker({
-            id: 'marker-layer',
-            map: map
-          });
-          if(this.isFlag) {
-            this.markerLayer.add({
-              position: evt.latLng
-            }); 
-            this.latLng = {
-              lat: evt.latLng.lat,
-              lng: evt.latLng.lng
+      this.$nextTick(() => {
+        let {lib: TMap, map, retryTimes} = this
+        if (map) {
+          map.on("click", (evt) => {
+            if (this.markerLayer) {
+              this.markerLayer.setMap(null);
             }
-          }
-                               
-        });
+
+            this.markerLayer = new TMap.MultiMarker({
+              id: 'marker-layer',
+              map: map
+            });
+            if (this.isFlag) {
+              this.markerLayer.add({
+                position: evt.latLng
+              });
+              this.latLng = {
+                lat: evt.latLng.lat,
+                lng: evt.latLng.lng
+              }
+            }
+
+          });
+        } else {
+          if (retryTimes < 5)
+            setTimeout(() => {
+              this.retryTimes++
+              this.initMap()
+            }, 1000)
+        }
       })
     },
     confirm() {
-      if(!this.latLng.lat) {
+      if (!this.latLng.lat) {
         return this.$u.toast(`未获取到定位信息，无法定位`)
       }
 
@@ -122,22 +130,24 @@ export default {
         params: this.params
       })
     }
-    
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
-uni-page-body{
+uni-page-body {
   height: 100%;
 }
+
 .map {
   height: 100%;
-  .build-btn{
+
+  .build-btn {
     width: 80px;
     height: 160px;
     background: #FFF;
-    box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.5);
+    box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
     border-radius: 8px;
     position: fixed;
     bottom: 136px;
@@ -150,17 +160,20 @@ uni-page-body{
     font-weight: 500;
     color: #666;
     line-height: 30px;
-    img{
+
+    img {
       width: 48px;
       height: 48px;
       margin-bottom: 8px;
     }
   }
-  .map-content{
+
+  .map-content {
     width: 100%;
     height: 100%;
   }
-  .footer{
+
+  .footer {
     width: 100%;
     position: fixed;
     bottom: 0;
@@ -173,16 +186,18 @@ uni-page-body{
     height: 112px;
     line-height: 112px;
     text-align: center;
-    .click{
+
+    .click {
       flex: 1;
       color: #333;
       background-color: #fff;
     }
-    .btn{
+
+    .btn {
       flex: 2;
       background: #1365DD;
       color: #FFF;
     }
   }
 }
-</style>
+</style>

src/apps/AppBuilding/components/searchMap.vue

@@ -7,18 +7,18 @@
       <div class="clear-btn">
         <img src="./img/del-icon.png" alt="" class="del-icon" v-if="name" @click="clear">
       </div>
-      
+
       <span class="search-btn" @click="search">搜索</span>
     </div>
     <div class="search-list" v-if="show" @click="show=false">
       <div class="title border">
-        <img src="./img/search-icon.png" alt="" class="search-icon">{{name}}
+        <img src="./img/search-icon.png" alt="" class="search-icon">{{ name }}
       </div>
       <div class="item border" v-for="(item, index) in buildList" :key="index" @click.stop="getBuidInfo(item)">
         <img src="./img/user-icon.png" alt="" class="search-icon user-icon">
         <div class="item-content">
-          <h3>{{item.residentName}}</h3>
-          <p>{{item.areaName || ''}}{{item.createAddress}}</p>
+          <h3>{{ item.residentName }}</h3>
+          <p>{{ item.areaName || '' }}{{ item.createAddress }}</p>
         </div>
       </div>
     </div>
@@ -26,24 +26,24 @@
       <img src="./img/build-icon.png" alt=""> 楼栋<br/>列表
     </div>
     <div class="map-content">
-      <AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
+      <AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"/>
     </div>
     <u-popup v-model="showPop" mode="bottom" border-radius="14">
-      <div class="popup" >
+      <div class="popup">
         <div class="bg"></div>
-        <div class="title">{{detailInfo.house.createAddress || ''}}</div>
-        <p class="address">{{detailInfo.build.createAddress || ''}}</p>
+        <div class="title">{{ detailInfo.house.createAddress || '' }}</div>
+        <p class="address">{{ detailInfo.build.createAddress || '' }}</p>
         <div class="info-flex">
           <span class="label">所属社区</span>
-          <span class="value">{{detailInfo.build.areaName}}</span>
+          <span class="value">{{ detailInfo.build.areaName }}</span>
         </div>
         <div class="info-flex">
           <span class="label">所属小区</span>
-          <span class="value">{{detailInfo.build.communityName}}</span>
+          <span class="value">{{ detailInfo.build.communityName }}</span>
         </div>
         <div class="info-flex">
           <span class="label">房屋类型</span>
-          <span class="value">{{$dict.getLabel('communityBuildingType', detailInfo.house.buildingType)}}</span>
+          <span class="value">{{ $dict.getLabel('communityBuildingType', detailInfo.house.buildingType) }}</span>
         </div>
         <div class="info-flex">
           <span class="label">所属网格</span>
@@ -55,8 +55,12 @@
         </div>
         <div class="info-flex">
           <span class="label">楼栋长</span>
-          <span class="value">{{detailInfo.build.managerName || ''}}&nbsp;&nbsp;{{detailInfo.build.managerPhone || ''}}
-            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)" class="phone-icon" v-if="detailInfo.build.managerPhone">
+          <span
+              class="value">{{ detailInfo.build.managerName || '' }}&nbsp;&nbsp;{{
+              detailInfo.build.managerPhone || ''
+            }}
+            <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(detailInfo.build.managerPhone)"
+                 class="phone-icon" v-if="detailInfo.build.managerPhone">
           </span>
         </div>
       </div>
@@ -66,15 +70,16 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-export default {
+import {mapState} from 'vuex'
 
+
+export default {
   data() {
     return {
       latLngCenter: {},
       areaId: '',
       ops: {},
-      lib: '',
+      lib: null,
       map: null,
       markerArr: [],
       show: false,
@@ -86,298 +91,162 @@ export default {
         house: {},
         build: {}
       },
-      showPop: false
+      showPop: false,
+      retryMapCount: 0
     }
   },
-  computed: { ...mapState(['user']) },
+  computed: {...mapState(['user'])},
   mounted() {
     this.areaId = this.user.areaId
-    this.getCenterLatLng()
+    // Promise.all([this.getCenterLatLng(),this.getCommunityList()])
+    this.getCenterLatLng().then(points => {
+      this.getMarkerCluster(points)
+    })
+  },
+  created() {
+    this.$dict.load("communityBuildingType")
   },
-
   methods: {
-    initMap() { 
-      this.$nextTick(() =>{
-        let {lib: TMap, map} = this
-
-        
-
-        var ClusterBubbleClick;
-
-        this.ClusterBubble = function (options)  {
-          TMap.DOMOverlay.call(this, options)
-        }
-
-        // this.ClusterBubble.prototype = new TMap.DOMOverlay();
-
-        // this.ClusterBubble.prototype.onInit = function (options) {
-        //   this.content = options.content;
-        //   this.position = options.position;
-        // }
-
-        // 创建点聚合
-        var markerCluster = new TMap.MarkerCluster({
-          id: 'cluster',
-          map: map,
-          enableDefaultStyle: false, // 关闭默认样式
-          minimumClusterSize: 3,
-          geometries: [{ // 点数组
-            position: new TMap.LatLng(39.953416, 116.480945)
-          },
-            {
-              position: new TMap.LatLng(39.984104, 116.407503)
-            },
-            {
-              position: new TMap.LatLng(39.908802, 116.497502)
-            },
-            {
-              position: new TMap.LatLng(40.040417, 116.373514)
-            },
-            {
-              position: new TMap.LatLng(39.953416, 116.380945)
-            },
-            {
-              position: new TMap.LatLng(39.984104, 116.307503)
-            },
-            {
-              position: new TMap.LatLng(39.908802, 116.397502)
-            },
-            {
-              position: new TMap.LatLng(40.040417, 116.273514)
-            },
-          ],
-          zoomOnClick: true,
-          gridSize: 60,
-          averageCenter: false
-        });
-
-        var clusterBubbleList = [];
-        var markerGeometries = [];
-        var marker = null;
-
-        // 监听聚合簇变化
-        markerCluster.on('cluster_changed', function (e) {
-          // 销毁旧聚合簇生成的覆盖物
-          if (clusterBubbleList.length) {
-            clusterBubbleList.forEach(function (item) {
-              item.destroy();
-            })
-            clusterBubbleList = [];
-          }
-          markerGeometries = [];
-
-          // 根据新的聚合簇数组生成新的覆盖物和点标记图层
-          var clusters = markerCluster.getClusters();
-          clusters.forEach(function (item) {
-            if (item.geometries.length > 1) {
-              let clusterBubble = new this.ClusterBubble({
-                map,
-                position: item.center,
-                content: item.geometries.length,
-              });
-              clusterBubble.on('click', () => {
-                map.fitBounds(item.bounds);
-              });
-              clusterBubbleList.push(clusterBubble);
-            } else {
-              markerGeometries.push({
-                position: item.center
-              });
-            }
-          });
-
-          if (marker) {
-            // 已创建过点标记图层，直接更新数据
-            marker.setGeometries(markerGeometries);
-          } else {
-            // 创建点标记图层
-            console.log(markerGeometries)
-            marker = new TMap.MultiMarker({
-              id: 'marker-layer', // 图层id
-              map: map,
-              styles: {
-                // 点标注的相关样式
-                marker: new TMap.MarkerStyle({
-                  width: 25,
-                  height: 35,
-                  anchor: { x: 16, y: 32 },
-                  src:'',
-                }),
-              },
-              geometries: [
-                {
-                  // 点标注数据数组
-                  id: 'demo',
-                  styleId: 'marker',
-                  position: new TMap.LatLng(40.040422, 116.273521),
-                },
-              ],
-            });
-
-            markerGeometries.map((item, index) => {
-              var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
-                +`腾讯大厦${index}<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
-              
-              new TMap.InfoWindow(
-                {
-                map: map,
-                enableCustom: true,
-                position: new TMap.LatLng(item.position.lat, item.position.lng),
-                offset: { y: -70, x: -5 },
-                content: html
-                },
-              );
-            })
-            
-
-          }
-        });
-
-      })
-    },
-
-    
-  // // 以下代码为基于DOMOverlay实现聚合点气泡
-  // function ClusterBubble(options) {
-  //   TMap.DOMOverlay.call(this, options);
-  // }
-
-  // ClusterBubble.prototype = new TMap.DOMOverlay();
-
-  // ClusterBubble.prototype.onInit = function (options) {
-  //   this.content = options.content;
-  //   this.position = options.position;
-  // };
-  
-  // // 销毁时需要删除监听器
-  // ClusterBubble.prototype.onDestroy = function() {
-  // 	this.dom.removeEventListener('click', this.onClick);
-  //   this.removeAllListeners();
-  // };
-
-  // ClusterBubble.prototype.onClick = function() {
-  //   this.emit('click');
-  // };
-
-  // // 创建气泡DOM元素
-  // ClusterBubble.prototype.createDOM = function () {
-  //   var dom = document.createElement('div');
-  //   dom.classList.add('clusterBubble');
-  //   dom.innerText = this.content;
-  //   dom.style.cssText = [
-  //     'width: ' + (40 + parseInt(this.content) * 2) + 'px;',
-  //     'height: ' + (40 + parseInt(this.content) * 2) + 'px;',
-  //     'line-height: ' + (40 + parseInt(this.content) * 2) + 'px;',
-  //   ].join(' ');
-      
-  //   // 监听点击事件，实现zoomOnClick
-  //   this.onClick = this.onClick.bind(this);
-  //   // pc端注册click事件，移动端注册touchend事件
-  //   dom.addEventListener('click', this.onClick);
-  //   return dom;
-  // };
-
-  // ClusterBubble.prototype.updateDOM = function () {
-  //   if (!this.map) {
-  //     return;
-  //   }
-  //   // 经纬度坐标转容器像素坐标
-  //   let pixel = this.map.projectToContainer(this.position);
-
-  //   // 使文本框中心点对齐经纬度坐标点
-  //   let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
-  //   let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
-  //   this.dom.style.transform = `translate(${left}, ${top})`;
-
-  //   this.emit('dom_updated');
-  // };
-
-  // window.ClusterBubble = ClusterBubble;
-
     getCenterLatLng() {
-      this.$http.post(`/app/appdvcpconfig/getCorpLocation`, ).then(res => {
-        if (res.code == 0) {
+      return this.$http.post(`/app/appdvcpconfig/getCorpLocation`).then(res => {
+        if (res?.data) {
           this.latLngCenter = res.data
-          this.getCommunityList()
+          return this.getCommunityList()
         }
       })
     },
     getCommunityList() {
-      this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
+      return this.$http.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
         params: {
           current: 1,
           size: 1000000,
           areaId: this.user.areaId
         }
       }).then(res => {
-        if (res.code === 0) {
+        if (res?.data) {
           this.buildList = res.data
-          const points = res.data.map(item => {
+          return res.data.map(item => {
             return {
+              ...item,
               lnglat: [item.lng, item.lat],
-              id: item.id,
-              corpId: item.corpId,
-              areaName:item.areaName,
               buildingNumber: item.name || item.buildingNumber,
-              communityName:item.name || item.communityName,
+              communityName: item.name || item.communityName,
             }
           })
-
-          this.addMakert(points)
         }
       })
     },
-    addMakert(points) {
-      this.$nextTick(() =>{
-        let {lib: TMap, map} = this
-        var center = new TMap.LatLng(this.latLngCenter.lat, this.latLngCenter.lng)
-        map.setCenter(center)
-        var marker = null;
-        map.setZoom(18)
-
-        var geometriesList = []
-        points.map((item) => {
-          item.position = new TMap.LatLng(item.lnglat[1], item.lnglat[0])
-          var info = {
-            id: item.id,
-            styleId: 'marker',
-            position: new TMap.LatLng(item.lnglat[1], item.lnglat[0])
+    getMarkerCluster(points) {
+      let {lib: TMap, map, retryMapCount} = this
+      if (map) {
+        map.setCenter(this.latLngCenter)
+        let MarkerCluster = new TMap.MarkerCluster({
+          map, gridSize: 60,
+          enableDefaultStyle: false, // 关闭默认样式
+          geometries: points?.map(e => ({
+            position: new TMap.LatLng(e.lat, e.lng),
+            content: `${e.createAddress} | ${e.houseNum}`
+          })) || [],
+          zoomOnClick: true
+        })
+        let geometries = [], marker, markers = []
+        MarkerCluster.on('cluster_changed', () => {
+          if (markers.length) {
+            markers.forEach(function (item) {
+              item.destroy();
+            })
+            markers = [];
+          }
+          geometries = []
+          let clusters = MarkerCluster.getClusters()
+          clusters.forEach((item) => {
+            if (item.geometries.length > 1) {
+              //聚合样式
+              geometries.push({
+                styleId: 'cluster',
+                position: item.center,
+                content: item.geometries.length.toString() || "0"
+              })
+            } else {
+              //点标记样式
+              // 以下代码为基于DOMOverlay实现聚合点气泡
+              function ClusterBubble(options) {
+                TMap.DOMOverlay.call(this, options);
+              }
+              ClusterBubble.prototype = new TMap.DOMOverlay();
+              ClusterBubble.prototype.onInit = function (options) {
+                this.content = options.content;
+                this.position = options.position;
+              };
+              // 销毁时需要删除监听器
+              ClusterBubble.prototype.onDestroy = function () {
+                this.dom.removeEventListener('click', this.onClick);
+                this.removeAllListeners();
+              };
+              ClusterBubble.prototype.onClick = function () {
+                this.emit('click');
+              };
+              // 创建气泡DOM元素
+              ClusterBubble.prototype.createDOM = function () {
+                var dom = document.createElement('div');
+                dom.classList.add('marker');
+                dom.innerText = this.content;
+
+                // 监听点击事件，实现zoomOnClick
+                this.onClick = this.onClick.bind(this);
+                // pc端注册click事件，移动端注册touchend事件
+                dom.addEventListener('click', this.onClick);
+                return dom;
+              };
+              ClusterBubble.prototype.updateDOM = function () {
+                if (!this.map) {
+                  return;
+                }
+                // 经纬度坐标转容器像素坐标
+                let pixel = this.map.projectToContainer(this.position);
+
+                // 使文本框中心点对齐经纬度坐标点
+                let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
+                let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
+                this.dom.style.transform = `translate(${left}, ${top})`;
+                this.emit('dom_updated');
+              };
+              let {content} = item.geometries?.[0] || {},
+                  overlay = new ClusterBubble({map, position: item.center, content})
+              overlay.on('click', () => {
+                map.fitBounds(item.bounds);
+              })
+              markers.push(overlay)
+            }
+          });
+          if (marker) {
+            marker.setGeometries(geometries)
+          } else {
+            marker = new TMap.MultiMarker({
+              map, enableCollision: true, geometries,
+              styles: {
+                cluster: new TMap.MarkerStyle({
+                  width: 48,
+                  height: 48,
+                  anchor: {x: 24, y: 24},
+                  src: this.$cdn + "/map/cluster.png",
+                  color: '#fff',
+                  // direction: 'center',
+                  size: 18
+                })
+              },
+            })
           }
-          geometriesList.push(info)
         })
-        marker = new TMap.MultiMarker({
-          id: 'marker-layer', // 图层id
-          map: map,
-          styles: {
-            // 点标注的相关样式
-            marker: new TMap.MarkerStyle({
-              width: 25,
-              height: 35,
-              anchor: { x: 16, y: 32 },
-              src:'',
-            }),
-          },
-          geometries: geometriesList,
-        });
-
-        points.map((item) => {
-
-          var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
-            +`${item.communityName}${item.buildingNumber}栋<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
-          
-          new TMap.InfoWindow(
-            {
-            map: map,
-            enableCustom: true,
-            position: item.position,
-            offset: { y: -70, x: -5 },
-            content: html
-            },
-          );
-
-        })
-        
-      })
+        return Promise.resolve()
+      } else {
+        if (retryMapCount < 5) {
+          setTimeout(() => {
+            this.retryMapCount++
+            return this.getMarkerCluster(points)
+          }, 1000)
+        } else Promise.reject("加载失败")
+      }
     },
     clear() {
       this.name = ''
@@ -400,36 +269,34 @@ export default {
               lnglat: [item.lng, item.lat],
               id: item.id,
               corpId: item.corpId,
-              areaName:item.areaName,
+              areaName: item.areaName,
               buildingNumber: item.name || item.buildingNumber,
-              communityName:item.name || item.communityName,
+              communityName: item.name || item.communityName,
             }
           })
-
-          this.addMakert(points)
-        }else {
+          this.getMarkerCluster(points)
+        } else {
           this.show = false
           this.$u.toast('未搜索到结果，请换个关键字重试！')
         }
       })
     },
     getBuidInfo(item) {
-       this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
+      this.$http.post(`/app/appcommunityhouseinfo/queryDetailByIdWithBuilding?buildId=${item.buildingId}&houseId=${item.id}`).then(res => {
         if (res.code == 0) {
-          this.show = false 
+          this.show = false
           this.showPop = true
           this.detailInfo = res.data
         }
       })
     },
     toList() {
-      console.log(122)
       this.$emit('change', {
         type: 'List',
       })
     },
     callPhone(phone) {
-      uni.makePhoneCall({ phoneNumber: phone })
+      uni.makePhoneCall({phoneNumber: phone})
     },
     toDetail(id) {
       this.$emit('change', {
@@ -442,16 +309,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-uni-page-body{
-  height: 100%;
-}
 .searchMap {
-  height: 100%;
-  .grid-input{
+  height: 100vh;
+
+  .grid-input {
     width: 720px;
     height: 88px;
     background: #FFF;
-    box-shadow: 0px 4px 8px 0px rgba(192, 185, 185, 0.5);
+    box-shadow: 0 4px 8px 0 rgba(192, 185, 185, 0.5);
     border-radius: 16px;
     position: fixed;
     top: 24px;
@@ -459,12 +324,14 @@ uni-page-body{
     z-index: 99999;
     padding: 16px 20px;
     box-sizing: border-box;
-    .search-icon{
+
+    .search-icon {
       width: 48px;
       height: 48px;
       margin-right: 16px;
     }
-    .input{
+
+    .input {
       display: inline-block;
       padding: 8px 0;
       height: 32px;
@@ -474,24 +341,28 @@ uni-page-body{
       font-family: MicrosoftYaHei;
       color: #666;
     }
-    .back-icon{
+
+    .back-icon {
       width: 16px;
       height: 32px;
       margin-right: 24px;
       vertical-align: super;
     }
-    .clear-btn{
+
+    .clear-btn {
       display: inline-block;
       width: 32px;
       height: 32px;
       margin-right: 30px;
     }
-    .del-icon{
+
+    .del-icon {
       width: 32px;
       height: 32px;
       vertical-align: super;
     }
-    .search-btn{
+
+    .search-btn {
       display: inline-block;
       width: 80px;
       height: 32px;
@@ -505,7 +376,8 @@ uni-page-body{
       margin-top: 12px;
     }
   }
-  .search-list{
+
+  .search-list {
     position: fixed;
     width: 100%;
     height: 700px;
@@ -516,33 +388,39 @@ uni-page-body{
     box-sizing: border-box;
     background-color: #fff;
     z-index: 99999;
-    .search-icon{
+
+    .search-icon {
       width: 36px;
       height: 36px;
       margin-right: 16px;
       vertical-align: sub;
     }
-    .title{
+
+    .title {
       height: 82px;
       line-height: 82px;
       font-size: 26px;
       font-family: MicrosoftYaHeiSemibold;
       color: #1365DD;
     }
-    .item{
+
+    .item {
       padding: 22px 0 24px 0;
     }
-    .item-content{
+
+    .item-content {
       display: inline-block;
       width: 610px;
       color: #333;
-      h3{
+
+      h3 {
         font-size: 28px;
         font-family: MicrosoftYaHeiSemibold;
         line-height: 32px;
         margin-bottom: 8px;
       }
-      p{
+
+      p {
         width: 100%;
         font-size: 24px;
         font-family: MicrosoftYaHei;
@@ -552,18 +430,21 @@ uni-page-body{
         text-overflow: ellipsis;
       }
     }
-    .user-icon{
+
+    .user-icon {
       vertical-align: top;
     }
-    .border{
+
+    .border {
       border-bottom: 1px solid #DEDFE1;
     }
   }
-  .build-btn{
+
+  .build-btn {
     width: 80px;
     height: 160px;
     background: #FFF;
-    box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.5);
+    box-shadow: 0 4px 8px 0 rgba(138, 138, 138, 0.5);
     border-radius: 8px;
     position: fixed;
     bottom: 136px;
@@ -576,26 +457,31 @@ uni-page-body{
     font-weight: 500;
     color: #666;
     line-height: 30px;
-    img{
+
+    img {
       width: 48px;
       height: 48px;
       margin-bottom: 8px;
     }
   }
-  .map-content{
+
+  .map-content {
     width: 100%;
     height: 100%;
   }
-  .popup{
+
+  .popup {
     padding: 0 32px 16px;
-    .bg{
+
+    .bg {
       width: 64px;
       height: 10px;
       background: #CCC;
       border-radius: 6px;
       margin: 32px 0 32px 344px;
     }
-    .title{
+
+    .title {
       font-size: 36px;
       font-family: PingFang-SC-Heavy, PingFang-SC;
       font-weight: 800;
@@ -603,22 +489,26 @@ uni-page-body{
       line-height: 50px;
       margin-bottom: 24px;
     }
-    .info-flex{
+
+    .info-flex {
       padding: 26px 0 30px 0;
       width: 100%;
       border-bottom: 1px solid #D8DDE6;
       line-height: 40px;
       font-size: 28px;
-      .label{
+
+      .label {
         display: inline-block;
         width: 160px;
         font-weight: 800;
         color: #333;
       }
-      .value{
+
+      .value {
         color: #666;
         font-size: 26px;
-        .phone-icon{
+
+        .phone-icon {
           width: 40px;
           height: 40px;
           vertical-align: sub;
@@ -627,7 +517,8 @@ uni-page-body{
       }
     }
   }
-  .popup-btn{
+
+  .popup-btn {
     width: 100%;
     font-size: 32px;
     font-family: PingFangSC-Medium, PingFang SC;
@@ -638,5 +529,30 @@ uni-page-body{
     background: #1365DD;
     color: #FFF;
   }
+
+  ::v-deep.marker {
+    color: #fff;
+    background: #5088FF;
+    padding: 0 32px;
+    width: fit-content;
+    height: 56px;
+    border-radius: 52px;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+
+    &:before {
+      content: " ";
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 0;
+      transform: translate(-50%, 100%);
+      border: 12px solid transparent;
+      border-top-color: #5088FF;
+    }
+  }
 }
-</style>
+</style>

src/apps/AppMailList/AppMailList.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="AppMailList">
+    <component
+      :is="component"
+      @change="onChange"
+      :params="params">
+    </component>
+  </div>
+</template>
+
+<script>
+import Add from './components/add'
+import List from './components/list'
+import MyAddList from './components/myAddList'
+
+export default {
+  name: 'AppMailList',
+  appName: '便民通讯录',
+
+  data() {
+    return {
+      component: 'List',
+      params: {}
+    }
+  },
+
+  components: { Add, List , MyAddList},
+
+  methods: {
+    onChange(e) {
+      this.params = e.params
+      this.component = e.type
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppMailList{
+  height: 100%;
+}
+</style>

src/apps/AppMailList/components/add.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="add">
+    <div class="pad-l32">
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>名称</span>
+        <div class="value">
+          <u-input type="text" placeholder="请输入" v-model="userInfo.name" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48"  :maxlength="7" />
+        </div>
+      </div>
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>类型</span>
+        <div class="value">
+          <u-input type="text" placeholder="请输入" v-model="userInfo.type" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48"  :maxlength="7" />
+        </div>
+      </div>
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>电话</span>
+        <div class="value">
+          <u-input type="number" placeholder="请输入" v-model="userInfo.phone" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48"  :maxlength="7" />
+        </div>
+      </div>
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>是否公开</span>
+        <div class="value" @click="showSelect=true">
+          <span :class="userInfo.isPublic === '' ? 'color-999' : ''">{{$dict.getLabel('yesOrNo', userInfo.isPublic) || '请选择'}}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label"><span class="tips">*</span>地区</span>
+        <div class="value">
+          <AiAreaPicker :areaId="user.areaId" v-model="userInfo.areaId" @select="areaSelect">
+            <span class="label" v-if="userInfo.areaName">{{ userInfo.areaName }}</span>
+            <span v-else class="color-999">请选择</span>
+            <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          </AiAreaPicker>
+        </div>
+      </div>
+    </div>
+
+    
+    <div class="footer" @click="submit">
+      <div class="btn">保存</div>
+    </div>
+
+    <u-select v-model="showSelect" :list="$dict.getDict('yesOrNo')"  label-name="dictName" value-name="dictValue" @confirm="confirmSelect"></u-select>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  props: ['params'],
+  data() {
+    return {
+      id: '',
+      userInfo: {
+        id: '',
+        name: '',
+        phone: '',
+        type: '',
+        isPublic: '',
+        areaId: '',
+        areaName: ''
+      },
+      showSelect: false,
+      flag: true
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {    
+    this.$dict.load('yesOrNo').then(() => {
+      if(this.params.id) {
+        this.userInfo.id = this.params.id
+        this.getDetail()
+      }
+    })
+  },
+
+  methods: {
+    areaSelect(e) {
+      this.userInfo.areaId = e.id
+      this.userInfo.areaName = e.name
+    },
+    confirmSelect(e) {
+      this.userInfo.isPublic = e[0].value
+    },
+    getDetail() {
+      this.$http.post(`/app/appconvenientaddressbook/queryDetailById?id=${this.userInfo.id}`).then(res => {
+        if (res.code == 0) {
+          this.userInfo = res.data
+        }
+      })
+    },
+    submit() {
+      if(!this.userInfo.name) {
+        return this.$u.toast('请输入名称')
+      }
+      if(!this.userInfo.type) {
+        return this.$u.toast('请输入类型')
+      }
+      if(!this.userInfo.phone) {
+        return this.$u.toast('请输入电话')
+      }
+      if(this.userInfo.isPublic === '') {
+        return this.$u.toast('请选择是否公开')
+      }
+      if(!this.userInfo.areaId) {
+        return this.$u.toast('请选择地区')
+      }
+      if(!this.flag) return
+      this.$http.post(`/app/appconvenientaddressbook/addOrUpdate`, this.userInfo).then(res => {
+        if (res.code == 0) {
+          this.flag = false
+          this.$u.toast('提交成功')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 600)
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  padding-bottom: 112px;
+  .border{
+    border-bottom: 1px solid #ddd;
+  }
+  .item{
+    width: 100%;
+    padding: 40px 32px 40px 0;
+    background: #FFFFFF;
+    display: flex;
+    justify-content: space-between;
+    font-size: 34px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #666;
+    line-height: 48px;
+    box-sizing: border-box;
+    .color-999{
+      color: #999;
+    }
+    .value{
+      color: #333;
+      .u-icon{
+        margin-left: 16px;
+      }
+    }
+    .tips{
+      display: inline-block;
+      width: 16px;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FF4466;
+      line-height: 44px;
+      margin-right: 4px;
+    }
+  }
+  .footer{
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+  .btn{
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #3975C6;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+  .pad-l32{
+    padding-left: 32px;
+    background-color: #fff;
+  }
+}
+</style>

src/apps/AppMailList/components/list.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="list">
+    <div class="list-content">
+      <div class="item" :id="'id'+item.label"  v-for="(item, index) in list" :key="index">
+        <div class="title">{{item.label}}</div>
+        <div class="phone-list">
+          <div class="item-info" v-for="(e, indexs) in item.dataList" :key="indexs">
+            <p>{{e.name}}</p>
+            <div class="phone">
+              <span>{{e.type}}</span>{{e.phone}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="id-list">
+      <a class="item" :href="'#id'+item.label" v-for="(item, index) in list" :key="index">{{item.label}}</a>
+    </div>
+    <div class="footer-btn" @click="toAddList">我添加的</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      list: [],
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.getList()
+  },
+
+  methods: {
+    getList() {
+      this.$http.post(`/app/appconvenientaddressbook/list`, null, {
+        params: {
+          areaId: this.user.areaId,
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          var list = []
+          var data = []
+          res.data.records.map((item) => {
+            if(list.indexOf(item.nameInitials)) {
+              list.push(item.nameInitials)
+            }
+          })
+          list.map((item) => {
+            var obj = {
+              label: item,
+              dataList: []
+            }
+            data.push(obj)
+          })
+          data.map((item, index) => {
+            res.data.records.map((items) => {
+              if(item.label == items.nameInitials) {
+                data[index].dataList.push(items)
+              }
+            })
+          })
+          this.list = data
+        }
+      })
+    },
+    toAddList() {
+      this.$emit('change', {
+        type: 'MyAddList',
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  background-color: #F3F6F9;
+  .list-content{
+    padding-bottom: 112px;
+    .title{
+      padding-left: 48px;
+      line-height: 64px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #999;
+    }
+    .phone-list{
+      background-color: #fff;
+      width: 100%;
+      .item-info{
+        width: 100%;
+        padding: 32px 48px;
+        box-sizing: border-box;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+        p{
+          font-size: 32px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 44px;
+          word-break: break-all;
+          margin-bottom: 8px;
+        }
+        .phone{
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 36px;
+          span{
+            display: inline-block;
+            margin-right: 16px;
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+  .id-list{
+    width: 50px;
+    text-align: center;
+    position: fixed;
+    top: 160px;
+    right: 32px;
+    z-index: 99;
+    .item{
+      display: block;
+      font-size: 24px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #CCC;
+      line-height: 40px;
+    }
+  }
+  .footer-btn{
+    width: 100%;
+    text-align: center;
+    height: 112px;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    z-index: 999;
+  }
+  a {
+    text-decoration: none;
+  }
+}
+</style>

src/apps/AppMailList/components/myAddList.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="myAddList">
+    <div class="list-content" v-if="list.length">
+      <div class="item-info" v-for="(item, index) in list" :key="index">
+        <div class="left">
+          <p>{{item.name}}</p>
+          <div class="phone">
+            <span>{{item.type}}</span>{{item.phone}}
+          </div>
+        </div>
+        <div class="right">
+          <img src="./img/edit-icon.png" alt="" @click="edit(item)">
+          <img src="./img/del-icon.png" alt="" @click="del(item)">
+        </div>
+      </div>
+    </div>
+    <div class="empty" v-else>
+      <img src="./img/empty.png" alt="">
+      <p>您还未添加便民通讯录<br/>点击<span>新增按钮</span>试试吧</p>
+    </div>
+    <div class="footer-btn" @click="edit('')">新增</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      list: [],
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.getList()
+  },
+
+  methods: {
+    getList() {
+      this.$http.post(`/app/appconvenientaddressbook/list`, null, {
+        params: {
+          areaId: this.user.areaId,
+          createUserId: this.user.id
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.list = res.data.records
+        }
+      })
+    },
+    edit(id) {
+      this.$emit('change', {
+        type: 'Add',
+        params: {
+          id: id,
+        }
+      })
+    },
+    del(item) {
+      this.$confirm("是否确认删除该发布信息？").then(() => {
+        this.$http.post("/app/appconvenientaddressbook/delete", null, {
+          params: {ids: item.id}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$u.toast("删除成功!")
+            this.getList()
+          }
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.myAddList {
+  height: 100%;
+  background-color: #F3F6F9;
+  .list-content{
+    padding-bottom: 112px;
+    .item-info{
+      width: 100%;
+      padding: 32px 48px;
+      box-sizing: border-box;
+      background-color: #fff;
+      margin-bottom: 4px;
+      p{
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 44px;
+        word-break: break-all;
+        margin-bottom: 8px;
+      }
+      .phone{
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 36px;
+        span{
+          display: inline-block;
+          margin-right: 16px;
+          color: #999;
+        }
+      }
+      .left{
+        display: inline-block;
+        width: calc(100% - 176px);
+      }
+      .right{
+        display: inline-block;
+        width: 176px;
+        img{
+          width: 56px;
+          height: 56px;
+          margin-left: 32px;
+          vertical-align: super;
+        }
+      }
+    }
+  }
+  .empty{
+    height: 100%;
+    background-color: #fff;
+    img{
+      width: 282px;
+      height: 306px;
+      margin: 168px 0 0 234px;
+    }
+    p{
+      text-align: center;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 44px;
+      span{
+        color: #467DFE;
+      }
+    }
+  }
+  .footer-btn{
+    width: 100%;
+    text-align: center;
+    height: 112px;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    z-index: 999;
+  }
+}
+</style>

src/apps/AppResidentActivitie/AppResidentActivities.vue

@@ -12,7 +12,7 @@
       </div>
     </div>
 
-    <template v-if="datas.length < 1">
+    <template v-if="datas.length > 0">
       <AiCard v-for="(item, i) in 6" :key="i" @click.native="toDetail(item, 1)">
         <template #custom>
           <div class="left">

src/apps/AppResidentFile/AppResidentFile.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="AppResidentFile">
-    <u-tabbar v-model="currentTabBar" :list="list" @change="changeTab" style="height: 0"></u-tabbar>
+    <u-tabbar v-model="currentTabBar" :list="lists" @change="changeTab" style="height: 0"></u-tabbar>
 
-    <div v-if="currentTabBar == 0">
+    <div class="currentTabBar0" v-if="currentTabBar == 0">
       <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
 
       <div class="peopleGroup" v-if="currentTabs == 0">
@@ -66,9 +66,67 @@
       </div>
     </div>
 
-    <div v-if="currentTabBar == 1">1</div>
+    <div class="currentTabBar1" v-if="currentTabBar == 1">
+      <AiAreaPicker v-model="areaId" all :areaId="areaId" @select="areaSelect"></AiAreaPicker>
 
-    <div v-if="currentTabBar == 2">2</div>
+      <div class="line"></div>
+
+      <div class="peopleCard">
+        <u-tabs :list="tabPeopleList" :is-scroll="false" :current="currentPeople" height="96" inactive-color="#000" active-color="#1365DD" @change="changePeople"></u-tabs>
+
+        <div class="seachObj">
+          <u-search v-model="keyword" :clearabled="true" placeholder="搜索" :show-action="false" bg-color="#F5F5F5" search-icon-color="#E2E8F1" color="#666" height="58" @search="handerSearch" @clear="handerClear"></u-search>
+        </div>
+
+        <div class="datas" v-if="data.length > 0">
+          <div class="datass" v-for="(item, iindex) in data" :key="iindex" @click="toDetailCard(item)">
+            <div class="left">
+              <img :src="item.photo" alt="" v-if="item.photo" />
+              <img src="./components/img/4.png" alt="" v-else />
+            </div>
+
+            <div class="right">
+              <div class="rightTop">{{ item.name }}</div>
+              <div class="rightBottom">
+                <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
+
+                <span>{{ item.phone }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <AiEmpty v-else></AiEmpty>
+      </div>
+    </div>
+
+    <div class="currentTabBar2" v-if="currentTabBar == 2">
+      <AiTopFixed>
+        <u-search placeholder="请输入群名、群主名" :show-action="false" search-icon-color="#ccc" v-model="search.name" @search=";(page.current = 1), getList()" />
+        <AiCell>
+          <b slot="label" class="title">共<i v-html="page.total || 0" />个居民群</b>
+        </AiCell>
+      </AiTopFixed>
+
+      <div class="mainPane">
+        <AiCell v-for="(item, i) in list" :key="i" @click.native="toGroupList(item)">
+          <template #label>
+            <AiImage :src="item.avatar" preview />
+          </template>
+          <div class="card column start" flex>
+            <div flex class="groupName">
+              <b>{{ item.name || '群聊' }}</b>
+              <div class="personCount" v-if="item.personCount">({{ item.personCount }})</div>
+            </div>
+            <div class="owner" v-html="`群主：${item.ownerName}`" />
+            <div flex class="trends">
+              <div flex v-html="`今日入群：<em>${item.increase || 0}</em>`" />
+              <div flex v-html="`今日退群：<p>${item.decrease || 0}</p>`" />
+            </div>
+          </div>
+        </AiCell>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -83,10 +141,10 @@ export default {
   props: {},
   data() {
     return {
-      list: [
+      lists: [
         {
-          iconPath: 'home',
-          selectedIconPath: 'home-fill',
+          iconPath: 'order',
+          selectedIconPath: 'order-fill',
           text: '统计分析',
           isDot: true,
           customIcon: false,
@@ -117,6 +175,23 @@ export default {
       ],
       Echarts1: null,
       Echarts2: null,
+      areaId: '',
+      currentPeople: 0,
+      tabPeopleList: [
+        {
+          name: '本地居民',
+        },
+        {
+          name: '流动人员',
+        },
+      ],
+      current: 1,
+      keyword: '',
+      data: [],
+
+      page: { current: 1, size: 10, total: 0 },
+      search: { name: '' },
+      list: [],
     }
   },
   computed: {
@@ -125,11 +200,64 @@ export default {
   watch: {},
   onLoad() {
     this.getEchart()
+    this.areaId = this.user.areaId
   },
   mounted() {
     this.Echarts1 = echarts.init(document.getElementById('echarts1'))
   },
   methods: {
+    getList2() {
+      this.$http
+        .post('/app/wxcp/wxgroup/list', null, {
+          params: { ...this.page, ...this.search },
+        })
+        .then((res) => {
+          if (res?.data) {
+            let meta = res.data.records?.map((e) => ({
+              ...e,
+              avatar: e?.avatar || this.$cdn + 'groupAvatar.png',
+            }))
+            if (this.page.current > 1) {
+              this.list = [...this.list, ...meta]
+            } else this.list = meta
+            this.page.total = res.data.total
+          }
+        })
+    },
+
+    reachBottom() {
+      if (this.page.total > this.list.length) {
+        this.page.current++
+        this.getList2()
+      }
+    },
+
+    toGroupList(item) {
+      console.log(1, item.id)
+      uni.navigateTo({
+        url: `./GroupList?id=${item.id}`,
+      })
+    },
+
+    getList() {
+      this.$http
+        .post('/app/appresident/list', null, {
+          params: {
+            size: 10,
+            current: this.current,
+            areaId: this.areaId,
+            con: this.keyword,
+            residentType: this.currentPeople == 0 ? '0' : '1',
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
+            this.pages = res.data.pages
+          }
+        })
+    },
+
     getEchart() {
       this.$http.post(`/app/appresident/queryCustInfoByAreaId?areaId=${this.user.areaId}`).then((res) => {
         if (res.code === 0) {
@@ -233,8 +361,47 @@ export default {
       options && this.Echarts2.setOption(options)
     },
 
+    toDetailCard(item) {
+      uni.navigateTo({ url: `./DetailCard?id=${item.id}` })
+    },
+
+    areaSelect(e) {
+      console.log(e)
+      this.areaId = e.id
+      this.getList()
+    },
+
+    handerSearch(e) {
+      this.keyword = e
+      this.current = 1
+      this.getList()
+    },
+
+    handerClear() {
+      this.keyword = ''
+      this.current = 1
+      this.getList()
+    },
+
     changeTab(e) {
       this.currentTabBar = e
+      if (this.currentTabBar == 0) {
+        this.getList()
+        this.$nextTick(() => {
+          if (this.currentTabs == 0) {
+            this.Echarts1 = echarts.init(document.getElementById('echarts1'))
+          } else {
+            this.Echarts2 = echarts.init(document.getElementById('echarts2'))
+          }
+          this.getEchart()
+        })
+      }
+      if (this.currentTabBar == 1) {
+        this.getList()
+      }
+      if (this.currentTabBar == 2) {
+        this.getList2()
+      }
     },
 
     change(index) {
@@ -247,14 +414,16 @@ export default {
         }
         this.getEchart()
       })
+    },
 
-      // this.getList()
-      // this.getEchart()
+    changePeople(e) {
+      this.currentPeople = e
+      this.getList()
     },
   },
   onReachBottom() {
-    // this.current = this.current + 1
-    // this.getList()
+    this.current = this.current + 1
+    this.getList()
   },
 }
 </script>
@@ -265,72 +434,227 @@ uni-page-body {
 }
 .AppResidentFile {
   height: 100%;
-  .peopleGroup,
-  .people {
-    .topcard {
-      position: relative;
-      background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
-      // background: url(http://respub.sinoecare.net/20211221/44-20211221095613.png) no-repeat;
-      background-size: 100% 100%;
-      height: 320px;
-      .cards {
-        box-sizing: border-box;
-        position: absolute;
-        bottom: -35px;
-        width: 92%;
-        box-sizing: border-box;
-        margin: 0 32px;
-        height: 232px;
-        background: #ffffff;
-        border-radius: 8px;
-        z-index: 999;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        .items {
+  .currentTabBar0 {
+    .peopleGroup,
+    .people {
+      .topcard {
+        position: relative;
+        background: url(http://respub.sinoecare.net/20211221/4-20211221095551.png) no-repeat;
+        // background: url(http://respub.sinoecare.net/20211221/44-20211221095613.png) no-repeat;
+        background-size: 100% 100%;
+        height: 320px;
+        .cards {
+          box-sizing: border-box;
+          position: absolute;
+          bottom: -35px;
+          width: 92%;
+          box-sizing: border-box;
+          margin: 0 32px;
+          height: 232px;
+          background: #ffffff;
+          border-radius: 8px;
+          z-index: 999;
           display: flex;
-          flex-direction: column;
+          justify-content: space-around;
           align-items: center;
-          span {
-            font-size: 30px;
-            font-weight: 500;
-            color: #999999;
+          .items {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            span {
+              font-size: 30px;
+              font-weight: 500;
+              color: #999999;
+            }
+            .items1 {
+              font-size: 40px;
+              font-weight: bold;
+              color: #354fc7;
+            }
+            .items2 {
+              font-size: 40px;
+              font-weight: bold;
+              color: #868686;
+            }
+            .items3 {
+              font-size: 40px;
+              font-weight: bold;
+              color: #5fba95;
+            }
+            .items4 {
+              font-size: 40px;
+              font-weight: bold;
+              color: #f09535;
+            }
           }
-          .items1 {
-            font-size: 40px;
-            font-weight: bold;
-            color: #354fc7;
+        }
+      }
+
+      .echartes {
+        margin-top: 64px;
+        height: 616px;
+        background: #fff;
+        box-sizing: border-box;
+
+        .echartss {
+          margin: 0 32px;
+          height: 100%;
+          padding-top: 16px;
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+
+  .currentTabBar1 {
+    height: 100%;
+    background: #fff;
+    .AiAreaPicker {
+      padding: 16px 0 14px 12px;
+    }
+
+    .line {
+      height: 16px;
+      background: #f5f5f5;
+    }
+
+    .peopleCard {
+      background: #fff;
+      .seachObj {
+        border-bottom: 2px solid #f5f5f5;
+        border-top: 2px solid #f5f5f5;
+        padding: 20px 32px;
+      }
+      .datas {
+        .datass {
+          display: flex;
+          padding: 24px 32px;
+          .left {
+            img {
+              width: 80px;
+              height: 80px;
+              border-radius: 50%;
+            }
           }
-          .items2 {
-            font-size: 40px;
-            font-weight: bold;
-            color: #868686;
-          }
-          .items3 {
-            font-size: 40px;
-            font-weight: bold;
-            color: #5fba95;
-          }
-          .items4 {
-            font-size: 40px;
-            font-weight: bold;
-            color: #f09535;
+          .right {
+            display: flex;
+            flex-direction: column;
+            margin-left: 32px;
+            width: 100%;
+            .rightTop {
+              font-size: 32px;
+              font-weight: 500;
+              color: #333333;
+            }
+            .rightBottom {
+              display: flex;
+              justify-content: space-between;
+              margin-top: 8px;
+            }
           }
         }
       }
     }
+  }
 
-    .echartes {
-      margin-top: 64px;
-      height: 616px;
+  .currentTabBar2 {
+    ::v-deep .AiTopFixed {
+      b.title {
+        color: #333;
+        font-size: 32px;
+
+        & > i {
+          color: #267fce;
+          font-style: normal;
+          margin: 0 4px;
+        }
+      }
+    }
+
+    ::v-deep .mainPane {
       background: #fff;
-      box-sizing: border-box;
+      padding: 0 32px;
 
-      .echartss {
-        margin: 0 32px;
+      .AiCell {
+        align-items: center;
+        height: 230px;
+        justify-content: flex-start;
+
+        .content {
+          flex: 1;
+          min-width: 0;
+          height: 100%;
+          max-width: unset;
+          border-bottom: 1px solid rgba(221, 221, 221, 1);
+        }
+      }
+
+      .card {
         height: 100%;
-        padding-top: 16px;
-        box-sizing: border-box;
+        justify-content: center;
+
+        b {
+          font-size: 36px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .tag {
+          justify-content: center;
+          background: #f3f4f7;
+          border-radius: 4px;
+          padding: 0 16px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333;
+          margin-left: 16px;
+          height: 56px;
+        }
+
+        .groupName {
+          width: 100%;
+          text-align: left;
+        }
+
+        .owner,
+        .trends {
+          margin-top: 8px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #999;
+        }
+
+        .personCount {
+          flex-shrink: 0;
+          font-size: 30px;
+          font-weight: 400;
+          color: #666;
+        }
+
+        .trends {
+          * + * {
+            margin-left: 24px;
+          }
+
+          em {
+            font-style: normal;
+            color: #5fba95;
+          }
+
+          p {
+            color: #f09535;
+          }
+        }
+      }
+
+      .AiImage {
+        margin-right: 24px;
+
+        image {
+          width: 112px;
+          height: 112px;
+        }
       }
     }
   }

src/apps/AppResidentFile/DetailCard.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="DetailCard">
+    <div class="top"></div>
+
+    <div class="middle">
+      <div class="hint">家庭地址</div>
+
+      <div class="areaHint">
+        <u-icon name="map-fill" color="#73ABFF"></u-icon>
+        <span>{{ currentAreaName }}</span>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="hints">家庭成员</div>
+
+      <div v-if="data.family && data.family.length > 0">
+        <div class="card" v-for="(item, i) in data.family" :key="i" @click="toDetailPeople(item)">
+          <div class="photos">
+            <img :src="item.photo" alt="" v-if="item.photo" />
+            <img src="./components/img/2.png" alt="" v-else />
+          </div>
+
+          <div class="right">
+            <div class="rightTop">
+              <div class="rightTop-lefts">
+                <span class="names">{{ item.name }}</span>
+                <span class="householdNames" v-if="item.householdName == 1">户主</span>
+                <span class="householdNames" v-else>
+                  {{ $dict.getLabel('householdRelation', item.householdName) }}
+                </span>
+              </div>
+
+              <div class="rightTop-rights">
+                <u-section :show-line="false" sub-title="详情"></u-section>
+              </div>
+            </div>
+
+            <div class="rightBottom">
+              <span>身份证号：</span>
+              <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <AiEmpty v-else></AiEmpty>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DetailCard',
+  components: {},
+  props: {},
+  data() {
+    return {
+      id: '',
+      data: [],
+      currentAreaName: '',
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad(o) {
+    this.id = o.id
+    this.$dict.load('householdRelation').then(() => {
+      this.getDetail()
+    })
+  },
+  onShow() {},
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.data = res.data
+          this.$nextTick(() => {
+            this.currentAreaName = res.data.resident.currentAreaName
+          })
+        }
+      })
+    },
+
+    toDetailPeople(item) {
+      uni.navigateTo({ url: `./DetailPeople?id=${item.id}` })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.DetailCard {
+  height: 100%;
+  .top {
+    height: 112px;
+    background: #3975c6;
+  }
+
+  .middle {
+    margin: -80px 32px 0 32px;
+    padding: 38px 30px 78px 28px;
+    background: #ffffff;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
+    border-radius: 16px;
+    z-index: 999;
+    .hint {
+      font-size: 32px;
+      font-weight: 500;
+      color: #333333;
+    }
+    .areaHint {
+      margin-top: 38px;
+      span {
+        margin-left: 14px;
+      }
+    }
+  }
+
+  .bottom {
+    margin: 32px 30px 48px 30px;
+    background: #fff;
+    padding: 38px 30px 30px 30px;
+    .hints {
+      margin-bottom: 38px;
+    }
+    .card {
+      display: flex;
+      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
+      border-radius: 16px;
+      padding: 48px 32px;
+      .photos {
+        img {
+          width: 96px;
+          height: 96px;
+          border-radius: 50%;
+        }
+      }
+
+      .right {
+        display: flex;
+        flex-direction: column;
+        margin-left: 40px;
+        width: 100%;
+        .rightTop {
+          display: flex;
+          justify-content: space-between;
+          .rightTop-lefts {
+            .names {
+              font-size: 32px;
+              font-weight: 600;
+            }
+            .householdNames {
+              margin-left: 30px;
+              font-size: 26px;
+              font-weight: 500;
+              color: #5aad6a;
+            }
+          }
+          .rightTop-rights {
+            ::v-deep .u-section {
+              .u-section__right-info {
+                color: #3975c6 !important;
+                .u-section__right-info__icon-arrow {
+                  .u-icon {
+                    .u-icon__icon {
+                      color: #3975c6 !important;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .rightBottom {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+}
+</style>

src/apps/AppResidentFile/DetailPeople.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="DetailPeople">
+    <div class="top">
+      <div class="photos">
+        <img :src="data.resident.photo" alt="" v-if="data.resident.photo" />
+        <img src="./components/img/2.png" alt="" v-else />
+      </div>
+
+      <div class="right">
+        <div class="rightTop">
+          <span class="names">{{ data.resident.name }}</span>
+
+          <span class="householdNames" v-if="data.resident.name == 1">户主</span>
+          <span class="householdNames" v-else>
+            {{ $dict.getLabel('householdRelation', data.resident.householdName) }}
+          </span>
+        </div>
+
+        <div class="rightBottom">{{ data.resident.phone }}</div>
+      </div>
+    </div>
+
+    <div class="line"></div>
+
+    <div class="middle">
+      <div class="hint">个人基本信息</div>
+
+      <div class="contents">
+        <div class="item">
+          <span>家庭地址</span>
+          <span>{{ data.resident.birthplaceAreaName }}</span>
+        </div>
+
+        <div class="item">
+          <span>身份证号</span>
+          <span>{{ data.resident.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1****$2') }}</span>
+        </div>
+
+        <div class="item">
+          <span>民族</span>
+          <span> {{ $dict.getLabel('nation', data.resident.householdName) }}</span>
+        </div>
+
+        <div class="item">
+          <span>文化程度</span>
+          <span>{{ $dict.getLabel('education', data.resident.education) }}</span>
+        </div>
+
+        <div class="item">
+          <span>婚姻状况</span>
+          <span>{{ $dict.getLabel('maritalStatus', data.resident.maritalStatus) }}</span>
+        </div>
+
+        <div class="item">
+          <span>政治面貌</span>
+          <span>{{ $dict.getLabel('politicsStatus', data.resident.politicsStatus) }}</span>
+        </div>
+
+        <div class="item">
+          <span>兵役状况</span>
+          <span>{{ $dict.getLabel('militaryStatus', data.resident.militaryStatus) }}</span>
+        </div>
+
+        <div class="item">
+          <span>宗教信仰</span>
+          <span>{{ $dict.getLabel('faithType', data.resident.faithType) }}</span>
+        </div>
+
+        <div class="item">
+          <span>职业</span>
+          <span>{{ $dict.getLabel('job', data.resident.job) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="lines"></div>
+
+    <div class="bottom">
+      <div class="hint">联络信息</div>
+
+      <div class="contents">
+        <div class="item">
+          <span>联系方式</span>
+          <span class="phones">{{ data.resident.phone }}</span>
+        </div>
+
+        <div class="item">
+          <span>现住址</span>
+          <span>{{ data.resident.currentAreaName }}</span>
+        </div>
+
+        <div class="item">
+          <span>现住详细地址</span>
+          <span>{{ data.resident.currentAddress }}</span>
+        </div>
+
+        <div class="item">
+          <span>户籍地址</span>
+          <span>{{ data.resident.householdAreaName }}</span>
+        </div>
+
+        <div class="item">
+          <span>户籍详细地址</span>
+          <span>{{ data.resident.householdAddress }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DetailPeople',
+  components: {},
+  props: {},
+  data() {
+    return {
+      id: '',
+      data: [],
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad(o) {
+    this.id = o.id
+    this.$dict.load('householdRelation', 'nation', 'education', 'maritalStatus', 'politicsStatus', 'militaryStatus', 'faithType', 'job').then(() => {
+      this.getDetail()
+    })
+  },
+  onShow() {},
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appresident/detail?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.data = res.data
+          // this.$nextTick(() => {
+          //   this.currentAreaName = res.data.resident.currentAreaName
+          // })
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.DetailPeople {
+  height: 100%;
+  background: #fff;
+  .top {
+    display: flex;
+    padding: 48px 32px 32px 32px;
+    .photos {
+      img {
+        width: 112px;
+        height: 112px;
+        border-radius: 50%;
+      }
+    }
+    .right {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin-left: 24px;
+      .rightTop {
+        display: flex;
+        justify-content: space-between;
+        .names {
+          font-size: 32px;
+          font-weight: 600;
+        }
+        .householdNames {
+          margin-left: 30px;
+          font-size: 26px;
+          font-weight: 500;
+          color: #5aad6a;
+        }
+      }
+      .rightBottom {
+        margin-top: 16px;
+      }
+    }
+  }
+
+  .line {
+    height: 8px;
+    background: #f5f5f5;
+  }
+
+  .middle,
+  .bottom {
+    padding: 0 32px;
+
+    .hint {
+      padding: 32px 0;
+    }
+
+    .contents {
+      .item {
+        display: flex;
+        justify-content: space-between;
+        padding: 14px 0;
+        .phones {
+          color: #3d94fb;
+        }
+      }
+    }
+  }
+
+  .lines {
+    height: 4px;
+    background: #f5f5f5;
+  }
+}
+</style>

src/apps/AppResidentFile/GroupList.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="group-resident">
+    <template v-if="!showTagManage">
+      <AiTopFixed>
+        <div class="card">
+          <header>
+            <u-avatar mode="square" :src="$cdn + 'groupAvatar.png'" :size="112"></u-avatar>
+            {{ detail.name }}
+          </header>
+          <u-grid :col="2" :border="false">
+            <u-grid-item>
+              <label>建群日期</label>
+              <label v-if="detail.createTime">{{ detail.createTime.split(' ')[0] }}</label>
+            </u-grid-item>
+            <u-grid-item>
+              <label>成员总数</label>
+              <label v-if="isToday">{{ detail.statistic.today.total }}</label>
+            </u-grid-item>
+            <u-grid-item>
+              <label>今日入群</label>
+              <label v-if="isToday">{{ detail.statistic.today.increase }}</label>
+            </u-grid-item>
+            <u-grid-item>
+              <label>今日退群</label>
+              <label v-if="isToday">{{ detail.statistic.today.decrease }}</label>
+            </u-grid-item>
+            <!--          <u-grid-item>-->
+            <!--            <label>今日活跃人数</label>-->
+            <!--            <label>{{item.value}}</label>-->
+            <!--          </u-grid-item>-->
+          </u-grid>
+          <p class="statistics">
+            <span>成员性别：</span>
+            <label>男性</label>
+            <b>{{ detail.man }}</b>
+            <label>女性</label>
+            <b>{{ detail.woman }}</b>
+            <label>未知</label>
+            <b>{{ detail.unknown }}</b>
+          </p>
+        </div>
+      </AiTopFixed>
+
+      <div class="card">
+        <AiCell title label="群标签">
+          <u-icon label="添加" size="38" name="iconAdd" custom-prefix="iconfont" color="#1365DD" label-color="#1365DD" @tap="showTagManage = true" />
+        </AiCell>
+        <AiCell top-label v-for="(op, name) in tagsList" :label="name" :key="name">
+          <u-row>
+            <div class="tag" v-for="(tag, j) in op" :key="j">{{ tag }}</div>
+          </u-row>
+        </AiCell>
+      </div>
+
+      <div class="card">
+        <AiCell title label="群成员"></AiCell>
+        <div class="wrap">
+          <div class="item" v-for="(item, index) in detail.groupUserList" :key="index" @click="handleWechat(item)">
+            <u-avatar mode="square" :src="item.avatar"></u-avatar>
+            <div class="info">
+              <div class="left">
+                <p>
+                  {{ item.memberName }}
+                  <b v-if="item.customerType == 2" style="color: #3c7fc8">@{{ item.corpName }}</b>
+                  <b v-if="item.customerType == 1" style="color: #2ea222">@微信</b>
+                </p>
+                <p>真实姓名：{{ item.realName }}</p>
+              </div>
+              <span v-if="item.userId == detail.owner">群主</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <TagManage v-if="showTagManage" />
+    <AiBack v-if="isNormal && !showTagManage" />
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import TagManage from './tagManage'
+
+export default {
+  name: 'GroupList',
+  components: {
+    TagManage,
+  },
+  props: {},
+  provide() {
+    return {
+      top: this,
+    }
+  },
+  data() {
+    return {
+      id: '',
+      detail: {},
+      groupId: null,
+      showTagManage: false,
+    }
+  },
+  computed: {
+    tagsList() {
+      let obj = {}
+      this.detail?.tagList?.map((e) => {
+        if (e?.groupName) {
+          if (obj?.[e.groupName]) {
+            obj[e.groupName].push(e.tagName)
+          } else {
+            obj[e.groupName] = [e.tagName]
+          }
+        }
+      })
+      return obj
+    },
+    isToday() {
+      return !!this.detail?.statistic?.today
+    },
+    isNormal() {
+      return !!this.id
+    },
+  },
+  watch: {},
+  onLoad(o) {
+    this.id = o.id
+    this.getContact()
+  },
+  onShow() {},
+  methods: {
+    ...mapActions(['injectJWeixin', 'wxInvoke']),
+    getContact() {
+      if (this.isNormal) {
+        this.groupId = this.id
+        this.getGroup(this.id)
+      } else
+        this.injectJWeixin('getCurExternalChat').then(() => {
+          this.wxInvoke([
+            'getCurExternalChat',
+            {},
+            (res) => {
+              if (res?.err_msg == 'getCurExternalChat:ok') {
+                this.groupId = res.chatId
+                this.getGroup(res.chatId)
+              }
+            },
+          ])
+        })
+    },
+    getGroup(id) {
+      this.$http
+        .post('/app/wxcp/wxgroup/getDetail', null, {
+          params: { id },
+        })
+        .then((res) => {
+          if (res?.data) {
+            this.detail = res.data
+          }
+        })
+    },
+    handleWechat({ userId, type }) {
+      this.injectJWeixin('openUserProfile').then(() => {
+        this.wxInvoke([
+          'openUserProfile',
+          {
+            type,
+            userid: userId,
+          },
+          () => 0,
+        ])
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.group-resident {
+  width: 100%;
+  min-height: 100%;
+  background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+
+  ::v-deep .AiTopFixed {
+    & > .card {
+      margin-top: 0;
+    }
+  }
+
+  ::v-deep .card {
+    background-color: #ffffff;
+    padding: 16px 32px;
+    box-sizing: border-box;
+    margin-top: 16px;
+
+    header {
+      height: 192px;
+      display: flex;
+      align-items: center;
+      font-size: 36px;
+      font-weight: 600;
+      color: #333333;
+
+      .u-avatar {
+        margin-right: 24px;
+      }
+    }
+
+    ::v-deep .u-grid-item-box {
+      box-sizing: border-box;
+      padding: 16px !important;
+
+      .uni-label-pointer {
+        width: 100%;
+        line-height: 40px;
+        color: #999999;
+      }
+
+      uni-label:last-child {
+        margin-top: 16px;
+        font-weight: 600;
+        color: #333333;
+      }
+    }
+
+    .statistics {
+      height: 96px;
+      display: flex;
+      align-items: center;
+      border-top: 1px solid #eee;
+      margin-top: 16px;
+
+      span {
+        font-size: 28px;
+        color: #999999;
+      }
+
+      label + b {
+        font-size: 28px;
+        color: #333333;
+      }
+
+      b {
+        color: #1365dd !important;
+        margin: 0 32px 0 16px;
+      }
+    }
+
+    & > section:first-child {
+      height: 90px !important;
+      display: flex;
+      align-items: center;
+    }
+
+    .wrap {
+      margin-bottom: 20px;
+
+      .item {
+        height: 176px;
+        display: flex;
+        align-items: center;
+
+        .info {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-left: 24px;
+          border-bottom: 1px solid #eee;
+
+          .left {
+            font-size: 36px;
+            font-weight: 600;
+            color: #333333;
+
+            b {
+              font-size: 28px;
+              font-weight: 400;
+              color: #3c7fc8;
+              margin-left: 16px;
+            }
+
+            p:last-child {
+              font-size: 28px;
+              font-weight: 400;
+              color: #999999;
+              margin-top: 8px;
+            }
+          }
+
+          span {
+            width: 88px;
+            height: 56px;
+            text-align: center;
+            background: rgba(19, 101, 221, 0.1);
+            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
+            border-radius: 4px;
+            font-size: 28px;
+            font-weight: 400;
+            color: #1365dd;
+            line-height: 56px;
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .tag {
+    height: 56px;
+    line-height: 56px;
+    background: #f3f4f7;
+    border-radius: 6px;
+    padding: 8px 16px;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    overflow: hidden;
+    cursor: default;
+  }
+}
+</style>

src/apps/AppResidentFile/tagManage.vue

@@ -0,0 +1,92 @@
+<template>
+  <section class="tagManage">
+    <div class="card" v-for="(group, i) in tags" :key="i">
+      <AiCell title :label="group.name" />
+      <u-row>
+        <div class="tag" v-for="(op, j) in group.tagList" :key="j" :class="{ selected: selected.includes(op.id) }" @tap="$u.debounce(handleToggle(op.id))">
+          {{ op.name }}
+        </div>
+      </u-row>
+    </div>
+    <AiBack custom @back="top.showTagManage = false" />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'tagManage',
+  inject: ['top'],
+  data() {
+    return {
+      tags: [],
+    }
+  },
+  computed: {
+    selected() {
+      return this.top.groupId ? this.top.detail?.tagList.map((e) => e.tagId) : this.top.detail?.tags.map((e) => e.tagId)
+    },
+  },
+  methods: {
+    getTags() {
+      this.$http
+        .post(this.top.groupId ? '/app/wxcp/wxgroupchattag/listAll' : '/app/wxcp/wxcorptag/listAll', null, {
+          params: { size: 9999 },
+        })
+        .then((res) => {
+          if (res?.data) {
+            this.tags = res.data.records
+          }
+        })
+    },
+    handleToggle(tagId) {
+      uni.showLoading({
+        title: '提交中',
+      })
+
+      this.$http
+        .post(this.top.groupId ? '/app/wxcp/wxgroupchattag/markTagForCP' : '/app/wxcp/wxcorptag/markTagForCP', null, {
+          params: this.top.groupId ? { tagId, groupId: this.top.groupId } : { tagId, customerId: this.top.custom },
+        })
+        .then((res) => {
+          uni.hideLoading()
+          if (res?.code == 0) {
+            this.$u.toast('操作成功!')
+            this.getTags()
+            this.top.getContact()
+          }
+        })
+        .catch((err) => {
+          uni.hideLoading()
+          this.$u.toast(err)
+        })
+    },
+  },
+  created() {
+    this.getTags()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tagManage {
+  padding-top: 16px;
+
+  .tag {
+    cursor: pointer !important;
+
+    &.selected {
+      background-color: $uni-color-primary !important;
+      color: #fff;
+    }
+
+    &.disabled {
+      color: #999;
+      cursor: not-allowed;
+    }
+
+    & + .tag {
+      margin-left: 16px;
+    }
+  }
+}
+</style>

src/apps/AppUniMsg/Add.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="add">
+    <div class="header-description">
+      <u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
+        <u-form-item label="标题" prop="title" required :border-bottom="false" class="names">
+          <u-input v-model="forms.title" placeholder="请输入标题" maxlength="30" />
+        </u-form-item>
+
+        <u-form-item label="发布单位" prop="publishUnitName" required :border-bottom="false" class="phones">
+          <u-input v-model="forms.publishUnitName" placeholder="请输入发布单位" maxlength="16" />
+        </u-form-item>
+
+        <u-form-item label="正文" prop="content" required :border-bottom="false" label-position="top" class="contents">
+          <u-input v-model="forms.content" placeholder="请输入正文" type="textarea" auto-height height="100" maxlength="500" />
+        </u-form-item>
+
+        <div class="line"></div>
+
+        <u-form-item label="图片上传 (最多9张)" prop="images" :border-bottom="false" class="avatars" label-position="top">
+          <AiUploader :def.sync="forms.images" multiple placeholder="上传图片" :limit="9"></AiUploader>
+        </u-form-item>
+
+        <div class="line"></div>
+      </u-form>
+    </div>
+
+    <div class="btn" @click="submit">保存</div>
+
+    <AiBack></AiBack>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Add',
+  components: {},
+  props: {},
+  data() {
+    return {
+      id: '',
+      forms: {
+        title: '',
+        publishUnitName: '',
+        content: '',
+        images: [],
+      },
+      flag: false,
+    }
+  },
+  computed: { ...mapState(['user']) },
+  onLoad(o) {
+    this.id = o.id
+    this.getDetail()
+  },
+
+  mounted() {},
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appmininotice/queryDetailById?id=${this.id}`).then((res) => {
+        if (res?.data) {
+          this.forms = res.data
+          if (res.data.images) {
+            this.forms.images = JSON.parse(res.data.images || '[]')
+          }
+        }
+      })
+    },
+
+    submit() {
+      if (this.flag) return
+
+      this.$refs.uForm.validate((valid) => {
+        if (valid) {
+          if (!this.forms.title) {
+            return this.$u.toast('请输入标题')
+          }
+          if (!this.forms.publishUnitName) {
+            return this.$u.toast('请输入正文')
+          }
+
+          const imgs = []
+          if (this.forms.images) {
+            this.forms.images.map((e) => {
+              imgs.push({ url: e.url, id: e.id })
+            })
+          }
+
+          this.flag = true
+          this.$http
+            .post(`/app/appmininotice/addOrUpdate`, {
+              title: this.forms.title,
+              publishUnitName: this.forms.publishUnitName,
+              content: this.forms.content,
+              images: JSON.stringify(imgs) || [],
+              id: this.id,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$u.toast('发布成功')
+                this.flag = false
+                uni.navigateTo({ url: `./AppUniMsg` })
+              }
+            })
+        } else {
+          this.$u.toast('失败')
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+  padding-bottom: 112px;
+
+  .header-description {
+    ::v-deep .u-form {
+      .u-form-item {
+        padding: 0 45px !important;
+        .u-form-item__body {
+          .u-form-item--right__content__slot {
+            padding-bottom: 0;
+            .u-input {
+              text-align: right !important;
+            }
+          }
+        }
+      }
+
+      .names,
+      .modeTypes,
+      .phones {
+        .u-form-item__body {
+          border-bottom: 1px solid #dddddd;
+        }
+      }
+
+      .u-form-item:last-child {
+        margin-bottom: 40px;
+      }
+
+      .avatars,
+      .contents {
+        padding-bottom: 20px !important;
+        .u-form-item__body {
+          .u-form-item--right__content__slot {
+            .u-input {
+              text-align: left !important;
+            }
+          }
+          .default {
+            width: 160px;
+            height: 160px;
+          }
+        }
+      }
+
+      .line {
+        height: 24px;
+        background: #f3f6f9;
+      }
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #1365dd;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #ffffff;
+  }
+}
+</style>

src/apps/AppUniMsg/AppUniMsg.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="AppUniMsg">
+    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i" @click.native="toAdd(item, 1)">
+        <template #custom>
+          <div class="titles">
+            {{ item.title }}
+          </div>
+
+          <div class="publishUnitNames">
+            <span>发布部门：</span>
+            <span>{{ item.publishUnitName }}</span>
+          </div>
+
+          <div class="createTimes">
+            <span>发布时间：</span>
+            <span>{{ item.createTime }}</span>
+          </div>
+
+          <img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i" />
+        </template>
+
+        <template #menu>
+          <div class="menu" @tap.stop="toAdd(item, 2)">编辑</div>
+          <div class="menu" @tap.stop="toDetele(item)">删除</div>
+        </template>
+      </AiCard>
+
+      <u-loadmore :status="loadmore" color="#999" font-size="24" margin-top="32" margin-bottom="80" />
+    </template>
+
+    <AiEmpty description="暂无数据" v-else></AiEmpty>
+
+    <AiFixedBtn>
+      <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()" />
+    </AiFixedBtn>
+
+    <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AppUniMsg',
+  appName: '小程序公告',
+  components: {},
+  props: {},
+  data() {
+    return {
+      datas: [],
+      current: 1,
+      size: 10,
+      deletShow: false,
+      deletId: '',
+      tabList: [
+        {
+          name: '全部公告',
+        },
+        {
+          name: '我的发布',
+        },
+      ],
+      currentTabs: 0,
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+
+    loadmore() {
+      return this.pages <= this.current ? 'loading ' : 'nomore'
+    },
+  },
+  watch: {},
+  onLoad() {
+    this.getList()
+  },
+  onShow() {},
+  methods: {
+    getList() {
+      this.$http
+        .post('/app/appmininotice/list', null, {
+          params: {
+            size: this.size,
+            current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            if (this.datas) {
+              this.datas.map((item) => {
+                if (item.images) {
+                  item.images = JSON.parse(item.images || '[]')
+                }
+                return item
+              })
+            }
+
+            this.pages = res.data.pages
+          }
+        })
+    },
+
+    toAdd(item, type) {
+      console.log(type)
+      if (type == '1') {
+        console.log('详情')
+        uni.navigateTo({ url: `./Detail?id=${item.id}` })
+      }
+      if (type == '2') {
+        console.log('编辑')
+        uni.navigateTo({ url: `./Add?id=${item.id}` })
+      }
+      if (type == null) {
+        console.log('添加')
+        uni.navigateTo({ url: `./Add` })
+      }
+    },
+
+    toDetele(item) {
+      this.deletShow = true
+      this.deletId = item.id
+    },
+
+    delet() {
+      this.$http.post(`/app/appmininotice/delete?ids=${this.deletId}`).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('删除成功！')
+          this.getList()
+        }
+      })
+    },
+
+    change(index) {
+      this.currentTabs = index
+      this.getList()
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.AppUniMsg {
+  height: 100%;
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    .start {
+      background: #fff;
+      padding: 32px;
+      border-radius: 16px;
+      .fill {
+        .titles {
+          font-size: 30px;
+          color: #333;
+          font-family: 500;
+        }
+        img {
+          width: 200px;
+          height: 200px;
+          margin-right: 8px;
+        }
+        img:nth-child(3n) {
+          margin-right: 0;
+        }
+      }
+    }
+    .mask {
+      .moreMenu {
+        transform: translate(-175px, 20px);
+        .menu {
+          text-align: center;
+          line-height: 80px;
+          width: 192px;
+          height: 80px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+    }
+  }
+
+  .AiFixedBtn {
+    .movableArea {
+      .addBtn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 96px;
+        height: 96px;
+        flex-shrink: 0;
+        background: $uni-color-primary;
+        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        font-size: 48px;
+        color: #fff;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>

src/apps/AppUniMsg/Detail.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="Detail">
+    <div class="header-top">
+      <div class="titles">{{ data.title }}</div>
+
+      <div class="titles-bottom">
+        <span>发布单位：</span>
+        <span>{{ data.publishUnitName }}</span>
+      </div>
+    </div>
+
+    <div class="header-middle">
+      <span class="contsnts">{{ data.content }}</span>
+
+      <img :src="item.url" alt="" v-for="(item, i) in data.images" :key="i" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Detail',
+  components: {},
+  props: {},
+  data() {
+    return {
+      data: [],
+      id: '',
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad(o) {
+    this.id = o.id
+    this.getDetail()
+  },
+  mounted() {},
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appmininotice/queryDetailById?id=${this.id}`).then((res) => {
+        if (res?.data) {
+          this.data = res.data
+          if (res.data.images) {
+            this.data.images = JSON.parse(res.data.images || '[]')
+          }
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.Detail {
+  height: 100%;
+  padding: 0 32px;
+  background: #fff;
+  .header-top {
+    padding: 40px 0 32px 0;
+    .titles {
+      font-size: 48px;
+      font-weight: 600;
+    }
+
+    .titles-bottom {
+      margin-top: 16px;
+      font-size: 30px;
+      color: #999999;
+      .to-left {
+        margin-left: 32px;
+      }
+    }
+  }
+
+  .header-middle {
+    padding: 32px 0;
+    .contsnts {
+      font-size: 36px;
+      line-height: 1.5;
+      word-break: break-all;
+    }
+    img {
+      margin-top: 30px;
+      width: 686px;
+      height: 486px;
+    }
+  }
+}
+</style>

src/apps/AppVideoSurveillance/AppVideoSurveillance.vue

@@ -1,14 +1,26 @@
 <template>
   <section class="videoSurveillance">
     <AiTopFixed>
-      <div class="header" flex>
+      <!-- <div class="header" flex>
         <div flex v-for="(node,i) in nodes" :key="i">
           <div :class="{current:isCurrent(i)}" v-text="node.nodeName" @click="gotoNode(node,i)"/>
           <u-icon v-if="!isCurrent(i)" name="arrow-right" color="#ddd"/>
         </div>
+      </div> -->
+      <div class="area-content">
+        <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect">
+          <img src="./img/local-icon.png" alt="">
+          <span class="label" v-if="areaName">{{ areaName }}</span>
+          <span v-else>请选择</span>
+          <u-icon name="arrow-down" color="#666" size="24" />
+        </AiAreaPicker>
+      </div>
+      <div class="num-content">
+        <img src="./img/on-icon.png" alt="">在线 {{count.online || 0}}
+        <img src="./img/off-icon.png" alt="" class="mar-l40">离线 {{count.sum - count.online || 0}}
       </div>
     </AiTopFixed>
-    <div class="list">
+    <!-- <div class="list">
       <div class="item" v-for="row in monitors" :key="row.nodeId" :class="{online:!row.online}">
         <template v-if="!!row.deviceId">
           <img :src="`${$cdn}video/video-img.png`" alt="" class="videoIcon" @click="showMonitor(row)">
@@ -20,11 +32,21 @@
           <u-icon name="arrow-right" color="#ddd" @click="getMore(row)"/>
         </template>
       </div>
+    </div> -->
+    <div class="list-content">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="showMonitor(item)">
+        <img class="img" :src="item.indexUrl" alt="" v-if="item.deviceStatus == 1">
+        <img class="img" src="./img/offline.png" alt="" v-else>
+        <p>{{item.name}}</p>
+        <img class="icon" src="./img/play-icon.png" alt="" v-if="item.deviceStatus == 1">
+        <img class="icon" src="./img/not-play-icon.png" alt="" v-else>
+      </div>
+      <AiEmpty v-if="!list.length"/>
     </div>
   </section>
 </template>
 <script>
-
+import { mapState } from 'vuex'
 export default {
   name: "videoSurveillance",
   appName: "视频监控",
@@ -33,9 +55,15 @@ export default {
       nodes: [
         {nodeName: "首页"}
       ],
-      monitors: []
+      monitors: [],
+
+      areaId: '',
+      areaName: '',
+      list: [],
+      count: {}
     }
   },
+  computed: { ...mapState(['user']) },
   methods: {
     getMonitors(nodeId, queryType = 0) {
       this.monitors = []
@@ -51,19 +79,38 @@ export default {
       this.nodes.push(row)
       this.getMonitors(row.nodeId, row.hasChild == 1 ? 0 : 1)
     },
-    showMonitor(row) {
-      uni.navigateTo({url: `./monitorDetail?id=${row.deviceId}`})
-    },
+    
     isCurrent(index) {
       return index == Math.max(this.nodes?.length - 1, 0)
     },
     gotoNode(node, index) {
       this.nodes.splice(index + 1)
       this.getMonitors(node.nodeId)
-    }
+    },
+
+    getList() {
+      this.$http.post(`/app/appzyvideoequipment/getAreaEquipment?areaId=${this.areaId}`).then(res => {
+        if (res.code == 0) {
+          this.list = res.data.list
+          this.count = res.data.count
+        }
+      })
+    },
+    areaSelect(e) {
+      this.areaId = e.id
+      this.areaName = e.name
+      this.getList()
+    },
+    showMonitor(row) {
+      if(row.deviceStatus != 1) return
+      uni.navigateTo({url: `./monitorDetail?id=${row.id}`})
+    },
   },
   created() {
-    this.getMonitors()
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.getList()
+    // this.getMonitors()
   }
 }
 </script>
@@ -138,5 +185,72 @@ export default {
       }
     }
   }
+
+  .area-content{
+    display: inline-block;
+    width: 45%;
+    line-height: 64px;
+    img{
+      width: 42px;
+      vertical-align: middle;
+      margin-right: 16px;
+    }
+    .u-icon{
+      margin-left: 6px;
+    }
+  }
+  .num-content{
+    display: inline-block;
+    width: 55%;
+    font-size: 34px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #333;
+    line-height: 48px;
+    text-align: right;
+    img{
+      width: 48px;
+      margin-right: 16px;
+      vertical-align: bottom;
+    }
+    .mar-l40{
+      margin-left: 20px;
+    }
+  }
+
+  .list-content{
+    width: 100%;
+    padding: 38px 0 0 20px;
+    box-sizing: border-box;
+    overflow: hidden;
+    .item{
+      width: calc(50% - 36px);
+      margin-right: 36px;
+      border-radius: 16px;
+      position: relative;
+      float: left;
+      margin-bottom: 32px;
+      .img{
+        width: 100%;
+        height: 218px;
+        margin-bottom: 8px;
+        border-radius: 16px;
+      }
+      p{
+        width: 100%;
+        font-size: 34px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 48px;
+        word-break: break-all;
+      }
+      .icon{
+        width: 40px;
+        height: 48px;
+        position: absolute;
+        top: 84px;
+        left: 158px;
+      }
+    }
+  }
 }
 </style>