新网格应用调整目录完成

examples/router/axios.js

@@ -10,6 +10,8 @@ instance.defaults.baseURL = baseURLs[process.env.NODE_ENV]
 instance.interceptors.request.use(config => {
   if (config.url.startsWith("/node")) {
     config.baseURL = "/ns"
+  } else if (/\/project\/grid/.test(location.pathname)) {
+    config.baseURL = "/grid"
   } else if (/\/project\/sass/.test(location.pathname)) {
     config.baseURL = "/saas"
   } else if (/\/xiushan/.test(location.pathname)) {

project/grid/AppBuildManage/AppBuildManage.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="AppBuildManage">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from './components/List'
+import Add from './components/Add'
+import BuildMsg from './components/BuildMsg'
+
+export default {
+  label: '楼栋管理',
+  name: 'AppBuildManage',
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: 'List',
+      params: {},
+      include: [],
+    }
+  },
+
+  components: {
+    Add,
+    List,
+    BuildMsg,
+  },
+  methods: {
+    onChange(data) {
+      if (data.type === 'add') {
+        this.component = 'Add'
+        this.params = data.params
+      }
+
+      if (data.type === 'buildmsg') {
+        this.component = 'BuildMsg'
+        this.params = { ...data.params }
+      }
+
+      if (data.type == 'list') {
+        this.component = 'List'
+        this.params = data.params
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList()
+          }
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.AppBuildManage {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>

project/grid/AppBuildManage/components/Add.vue

@@ -0,0 +1,402 @@
+<template>
+  <section style="height: 100%" class="AppBuildManage">
+    <ai-detail class="Add">
+      <!-- 返回按钮 -->
+      <template #title>
+        <ai-title :title="isEdit ? '编辑楼栋信息' : '添加楼栋'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+      </template>
+
+      <template #content>
+        <el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
+          <!-- 小区名称 -->
+          <ai-bar title="基础信息"></ai-bar>
+          <el-form-item label="小区名称" prop="communityName" class="line" ref="communityNameContent">
+            <!-- 选择小区 -->
+            <ai-select v-if="instance" :instance="instance" v-model="formData.communityId" action="/app/appcommunityinfo/listAll" :prop="{ label: 'communityName' }"></ai-select>
+          </el-form-item>
+
+          <div class="flex">
+            <!-- 楼栋号 -->
+            <el-form-item label="楼栋号" prop="buildingNumber" :rules="[{ required: true, message: '请输入楼栋号', trigger: 'blur' }]">
+              <el-input size="small" v-model="formData.buildingNumber" placeholder="请输入" clearable :disabled="isEdit" />
+            </el-form-item>
+
+            <!-- 单元数 -->
+            <el-form-item label="单元数" prop="unitNumber">
+              <el-input size="small" v-model.number="formData.unitNumber" placeholder="请输入" clearable :disabled="isEdit" />
+            </el-form-item>
+
+            <!-- 起始计数层数 -->
+            <el-form-item label="起始计数层数" prop="layerStart">
+              <el-input size="small" v-model.number="formData.layerStart" placeholder="请输入" clearable :disabled="isEdit"></el-input>
+            </el-form-item>
+
+            <!-- 最高层数 -->
+            <el-form-item label="最高层数" prop="layerNumber">
+              <el-input size="small" v-model.number="formData.layerNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input>
+            </el-form-item>
+
+            <!-- 起始计数户数 -->
+            <el-form-item label="起始计数户数" prop="householdStart">
+              <el-input size="small" v-model.number="formData.householdStart" placeholder="请输入" clearable :disabled="isEdit"></el-input>
+            </el-form-item>
+
+            <!-- 每层户数 -->
+            <el-form-item label="每层户数" prop="householdNumber">
+              <el-input size="small" v-model.number="formData.householdNumber" placeholder="请输入" clearable :disabled="isEdit"></el-input>
+            </el-form-item>
+
+            <!-- 楼栋长姓名 -->
+            <el-form-item label="楼栋长姓名" prop="managerName">
+              <el-input size="small" v-model="formData.managerName" placeholder="请输入" clearable></el-input>
+            </el-form-item>
+
+            <!-- 楼栋长联系方式 -->
+            <el-form-item label="楼栋长联系方式" prop="managerPhone">
+              <el-input size="small" v-model.number="formData.managerPhone" placeholder="请输入" clearable></el-input>
+            </el-form-item>
+
+            <!-- 房屋类别 -->
+            <el-form-item label="房屋类别" prop="buildingType" class="buildingTypes">
+              <el-radio-group v-model="formData.buildingType">
+                <el-radio label="0">单元（公寓）楼</el-radio>
+                <el-radio label="1">筒子楼</el-radio>
+                <el-radio label="2">别墅</el-radio>
+
+                <el-radio label="3">自建楼</el-radio>
+                <el-radio label="4">平房</el-radio>
+                <el-radio label="5">高层公共建筑</el-radio>
+
+                <el-radio label="6">商住两用</el-radio>
+                <el-radio label="7">其它</el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <!-- 楼栋经度坐标 -->
+            <el-form-item label="楼栋经度坐标" prop="lng">
+              <el-input size="small" v-model="formData.lng" placeholder="请输入" clearable></el-input>
+            </el-form-item>
+
+            <!-- 楼栋纬度坐标 -->
+            <el-form-item label="楼栋纬度坐标" prop="lat">
+              <el-input size="small" v-model="formData.lat" placeholder="请输入" clearable></el-input>
+            </el-form-item>
+
+            <!-- 地图位置 -->
+            <el-form-item label="地图位置" prop="lat">
+              <el-button @click="showMap = true">地图标绘</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </template>
+
+      <!-- 底部按钮 -->
+      <template #footer>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm()">提交</el-button>
+      </template>
+    </ai-detail>
+    <ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
+      <div id="map"></div>
+      <el-form label-width="80px" style="padding: 10px 20px 0 20px;">
+        <el-row type="flex" justify="space-between">
+          <el-form-item label="经度">
+            <el-input disabled size="small" v-model="placeDetail.lng"></el-input>
+          </el-form-item>
+          <el-form-item label="纬度">
+            <el-input disabled size="small" v-model="placeDetail.lat"></el-input>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
+        <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
+      </el-input>
+      <div id="searchPlaceOutput" />
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+export default {
+  name: 'Add',
+  components: {},
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+  data() {
+    return {
+      formData: {
+        communityName: '',
+        buildingNumber: '',
+        unitNumber: '',
+        layerStart: '1',
+        layerNumber: '',
+        householdStart: '1',
+        householdNumber: '',
+        managerName: '',
+        managerPhone: '',
+        lng: '',
+        lat: '',
+        id: '', // 小区编号
+        buildingType: '0',
+        communityId: '',
+      },
+      formRules: {
+        unitNumber: [
+          { required: true, message: '请输入单元数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+        layerStart: [
+          { required: true, message: '请输入起始计数层数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+
+        layerNumber: [
+          { required: true, message: '请输入最高层数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+        householdStart: [
+          { required: true, message: '请输入起始计数户数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+
+        householdNumber: [
+          { required: true, message: '请输入每层户数', trigger: 'change' },
+          {
+            validator: (r, v, cb) => (!v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb('请输入正整数')),
+          },
+        ],
+      },
+      plot: [],
+      dialogVisible: false,
+      treeData: [],
+      map: null,
+      placeDetail: {
+        lng: '',
+        lat: '',
+      },
+      showMap: false,
+      searchPlace: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+
+    isEdit() {
+      return !!this.params.id
+    },
+  },
+  created() {
+    this.formData.communityId = this.params.communityId
+    this.getListinfo()
+  },
+  methods: {
+    selectMap() {
+      this.formData.lng = this.placeDetail.lng
+      this.formData.lat = this.placeDetail.lat
+      this.showMap = false
+    },
+    getCorpLocation() {
+      this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => {
+        if (res.code == 0) {
+          this.initMap(res.data)
+        }
+      })
+    },
+
+    initMap({ lng, lat }) {
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0',
+        plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+      }).then((AMap) => {
+        this.placeDetail.lng = this.formData.lng
+        this.placeDetail.lat = this.formData.lat
+        this.map = new AMap.Map('map', {
+          resizeEnable: true,
+          zooms: [6, 20],
+          center: [lng, lat],
+          zoom: 11,
+        })
+        this.placeSearch = new AMap.PlaceSearch({ map: this.map })
+        new AMap.AutoComplete({
+          input: 'searchPlaceInput',
+          output: 'searchPlaceOutput',
+        }).on('select', (e) => {
+          if (e?.poi) {
+            this.placeSearch.setCity(e.poi.adcode)
+            this.movePosition(e.poi.location)
+          }
+        })
+        this.map.on('click', (e) => {
+          new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
+            if (res?.regeocode) {
+              this.placeDetail = {
+                lng: e.lnglat?.lng,
+                lat: e.lnglat?.lat,
+                address: res.regeocode.formattedAddress,
+              }
+            }
+          })
+          this.movePosition(e.lnglat)
+        })
+      })
+    },
+
+    movePosition(center) {
+      if (this.map) {
+        this.map.clearMap()
+        this.map.panTo(center)
+        this.map.add([
+          new AMap.Marker({
+            position: center,
+            clickable: true,
+          }),
+        ])
+        this.map.setFitView()
+      }
+    },
+
+    getListinfo() {
+      return this.instance
+        .post('/app/appcommunitybuildinginfo/queryDetailById', null, {
+          params: {
+            id: this.params.id,
+          },
+        })
+        .then((res) => {
+          if (res.data) {
+            this.formData = res.data
+          }
+        })
+    },
+
+    confirm() {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          this.instance
+            .post(`/app/appcommunitybuildinginfo/addOrUpdate`, {
+              ...this.formData,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 1000)
+              }
+            })
+        }
+      })
+    },
+
+    // 返回按钮
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+  },
+  watch: {
+    communityNameContent: {
+      deep: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppBuildManage {
+  ::v-deep .amap-logo {
+    display: none!important;
+  }
+  ::v-deep .amap-copyright {
+    display: none!important;
+  }
+}
+.Add {
+  height: 100%;
+  .ai-detail__title {
+    background-color: #fff;
+  }
+  .ai-detail__content {
+    .ai-detail__content--wrapper {
+      .el-form {
+        background-color: #fff;
+        padding: 0 60px;
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .el-form-item {
+            width: 48%;
+          }
+          .buildingTypes {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .mapDialog {
+  .el-dialog__body {
+    padding: 0;
+
+    .ai-dialog__content {
+      padding: 0;
+    }
+
+    .ai-dialog__content--wrapper {
+      padding: 0 !important;
+      position: relative;
+    }
+
+    #map {
+      width: 100%;
+      height: 420px;
+    }
+
+    .searchPlaceInput {
+      position: absolute;
+      width: 250px;
+      top: 30px;
+      left: 25px;
+    }
+
+    #searchPlaceOutput {
+      position: absolute;
+      width: 250px;
+      left: 25px;
+      height: initial;
+      top: 80px;
+      background: white;
+      z-index: 250;
+      max-height: 300px;
+      overflow-y: auto;
+
+      .auto-item {
+        text-align: left;
+        font-size: 14px;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>

project/grid/AppBuildManage/components/BuildMsg.vue

@@ -0,0 +1,750 @@
+<template>
+  <ai-list class="BuildMsg">
+    <!-- 标题 -->
+    <template #title>
+      <ai-title :title="params.communityName + '-' + params.buildingNumber + '号楼房屋信息'" isShowBack isShowBottomBorder
+                @onBackClick="cancel(false)"></ai-title>
+    </template>
+    <template #content>
+      <!-- 性别下拉选择框 -->
+      <ai-search-bar>
+        <template #left>
+          <ai-select v-model="search.livingStatus" placeholder="房屋状态" clearable @change=";(page.current = 1), getList()"
+                     :selectList="dict.getDict('houselivingStatus')"></ai-select>
+
+          <ai-select v-model="search.existFlow" placeholder="有无流动人口" clearable @change=";(page.current = 1), getList()"
+                     :selectList="dict.getDict('yesOrNo')"></ai-select>
+        </template>
+
+        <template #right>
+          <el-input v-model="search.houseCode" size="small" placeholder="请输入户号/户主" clearable
+                    v-throttle="() => {page.current = 1, getList()}"
+                    @clear=";(page.current = 1), (search.houseCode = ''), getList()" suffix-icon="iconfont iconSearch"/>
+        </template>
+      </ai-search-bar>
+
+      <ai-search-bar>
+        <template #left>
+          <div style="height: 32px"/>
+        </template>
+
+        <template #right>
+          <ai-import :instance="instance" :dict="dict" type="appcommunityhouseinfo" :importParams="houseImpParam" name="房屋信息"
+                     @success="getList()">
+            <el-button icon="iconfont iconImport">导入房屋信息</el-button>
+          </ai-import>
+          <ai-download :instance="instance" url="/app/appcommunityhouseinfo/listExport" :params="houseExpParam"
+                       fileName="房屋信息" style="margin-right: 10px">
+            <el-button icon="iconfont iconExported">导出房屋信息</el-button>
+          </ai-download>
+          <ai-import :instance="instance" :dict="dict" type="appcommunityhouseresident" :importParams="houseImpParam" name="人口信息"
+                     @success="getList()">
+            <el-button icon="iconfont iconImport">导入人口信息</el-button>
+          </ai-import>
+          <ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="houseExpParam"
+                       fileName="人口信息">
+            <el-button icon="iconfont iconExported">导出人口信息</el-button>
+          </ai-download>
+        </template>
+      </ai-search-bar>
+
+      <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex"
+                :current.sync="page.current" :size.sync="page.size" @getList="getList"
+                @selection-change="(v) => (ids = v.map((e) => e.id))">
+        <el-table-column slot="owner" label="房主" align="center">
+          <template slot-scope="{ row }">
+            <span v-for="(item, i) in row.owner" :key="i" v-if="item.name">
+              <span v-if="i < 2" style="margin-right: 5px;">
+                {{ item.name }}
+              </span>
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column slot="owner" label="联系方式" align="center">
+          <template slot-scope="{ row }">
+            <span v-for="(item, i) in row.owner" :key="i" v-if="item.phone">
+              <span v-if="i < 1">
+                {{ item.phone }}
+              </span>
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column slot="livingStatus" label="房屋状态" align="center">
+          <template slot-scope="{ row }">
+            {{ dict.getLabel('houselivingStatus', row.livingStatus) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column slot="owner" label="流动人口" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.existFlow == 1 ? '有' : '无' }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140">
+          <div class="table-options" slot-scope="{ row }">
+            <el-button type="text" @click="toEdit(row.id, 'edit')">编辑</el-button>
+            <el-button type="text" @click="toEdit(row.id, 'detail')">详情</el-button>
+          </div>
+        </el-table-column>
+      </ai-table>
+
+      <ai-dialog :title="isEdit ? '编辑居民户' : '居民户详情'" :visible.sync="dialogVisible" width="800px" customFooter>
+        <ai-wrapper label>
+          <div class="bulidmsg">
+            <span class="icon"></span>
+            <span class="bulidtext">房屋信息</span>
+          </div>
+
+          <ai-info-item label="所属社区">
+            {{ forms.areaName }}
+          </ai-info-item>
+
+          <ai-info-item label="房屋地址">
+            {{ forms.createAddress }}
+          </ai-info-item>
+
+          <ai-info-item label="房屋类型">
+            {{ dict.getLabel('communityBuildingType', forms.buildingType) }}
+          </ai-info-item>
+
+          <template v-if="!isEdit">
+            <ai-info-item label="房屋面积" prop="houseArea" class="line">
+              <span>{{ forms.houseArea }}</span
+              >&nbsp;<span v-if="forms.houseArea">m²</span>
+            </ai-info-item>
+
+            <ai-info-item label="居住现状" prop="livingStatus">
+              <span>{{ dict.getLabel('houselivingStatus', forms.livingStatus) }}</span>
+            </ai-info-item>
+
+            <ai-info-item label="房屋用途" prop="houseUse">
+              <span>{{ dict.getLabel('houseUseStatus', forms.houseUse) }}</span>
+            </ai-info-item>
+
+            <ai-info-item label="承租情况" prop="leaseSituation">
+              <span>{{ dict.getLabel('houseLeaseSituation', forms.leaseSituation) }}</span>
+            </ai-info-item>
+
+            <ai-info-item label="起租日期" prop="startDate">
+              {{ $dateFormat(forms.startDate) }}
+            </ai-info-item>
+
+            <ai-info-item label="备案证明" prop="isFilingCertificate">
+              <span>{{ dict.getLabel('isFilingCertificateStatus', forms.isFilingCertificate) }}</span>
+            </ai-info-item>
+          </template>
+        </ai-wrapper>
+
+        <el-form v-if="isEdit" :model="forms" ref="ruleForm" label-width="100px" label-suffix="：" align-items="center"
+                 size="small">
+          <template>
+            <el-form-item label="房屋面积" prop="houseArea" class="house">
+              <el-input v-model="forms.houseArea" type="text" size="small" placeholder="请输入" suffix="m²">
+                <template slot="suffix">m²</template>
+              </el-input>
+            </el-form-item>
+
+            <div class="family-hose">
+              <el-form-item label="居住现状">
+                <el-radio-group v-model="forms.livingStatus">
+                  <el-radio label="0">自用</el-radio>
+                  <el-radio label="1">出租</el-radio>
+                  <el-radio label="2">闲置</el-radio>
+                </el-radio-group>
+              </el-form-item>
+
+              <el-form-item label="房屋用途">
+                <el-radio-group v-model="forms.houseUse">
+                  <el-radio label="0">居住</el-radio>
+                  <el-radio label="1">闲置</el-radio>
+                  <el-radio label="2">经营</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </div>
+
+            <div class="family-hose">
+              <el-form-item label="承租情况" prop="leaseSituation">
+                <ai-select v-model="forms.leaseSituation" placeholder="请选择" clearable
+                           @change=";(page.current = 1), getList()" :selectList="dict.getDict('houseLeaseSituation')"
+                           size="small"></ai-select>
+              </el-form-item>
+
+              <el-form-item label="起租日期" prop="startDate">
+                <el-date-picker v-model="forms.startDate" type="date" placeholder="选择日期" size="small"
+                                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+              </el-form-item>
+            </div>
+
+            <el-form-item label="备案证明" prop="isFilingCertificate">
+              <el-radio-group v-model="forms.isFilingCertificate">
+                <el-radio label="0">有租赁房备案证明</el-radio>
+                <el-radio label="1">无租赁房备案证明</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </template>
+        </el-form>
+        <!-- 房主信息 -->
+        <div class="table">
+          <div class="msg">
+            <b class="house-msg">
+              <span class="icon"></span>
+              <span class="msg">房主信息</span>
+            </b>
+
+            <div class="button">
+              <ai-person-select :instance="instance" @selectPerson="getOwners" ref="getOwner" :chooseUserList="owners"
+                                :isMultiple="true" v-if="isEdit"/>
+            </div>
+          </div>
+
+          <ai-table :tableData="owners" :col-configs="owner" ref="aitableex">
+            <el-table-column slot="owner" label="居民类型" align="center">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('BulidResidentType', row.residentType) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="owner" label="特殊人群" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ row.tips }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="owner" label="与户主关系" align="center" v-if="isEdit">
+              <template slot-scope="{ row }">
+                <ai-select v-model="row.relation" placeholder="与户主关系" clearable
+                           :selectList="$dict.getDict('householdRelation')"></ai-select>
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="owner" label="与户主关系" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('householdRelation', row.relation) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="options" label="操作" align="center" v-if="isEdit">
+              <template slot-scope="scope">
+                <el-button type="text" @click="remove(scope.$index, 'owners')">删除</el-button>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+
+        <!-- 承租人信息 -->
+        <div class="table">
+          <div class="msg">
+            <b class="house-msg">
+              <span class="icon"></span>
+              <span class="msg">承租人信息</span>
+            </b>
+
+            <div class="button">
+              <ai-person-select :instance="instance" @selectPerson="getRenters" :chooseUserList="renters"
+                                :isMultiple="true" v-if="isEdit"/>
+            </div>
+          </div>
+
+          <ai-table :tableData="renters" :col-configs="renter" ref="aitableex">
+            <el-table-column slot="renters" label="居民类型" align="center">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('BulidResidentType', row.residentType) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="renters" label="特殊人群" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ row.tips }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="renters" label="与户主关系" align="center" v-if="isEdit">
+              <template slot-scope="{ row }">
+                <ai-select v-model="row.relation" placeholder="与户主关系" clearable
+                           :selectList="$dict.getDict('householdRelation')"></ai-select>
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="renters" label="与户主关系" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('householdRelation', row.relation) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="options" label="操作" align="center" v-if="isEdit">
+              <template slot-scope="scope">
+                <el-button type="text" @click="remove(scope.$index, 'renters')">删除</el-button>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+
+        <!-- 实际居住人员 -->
+        <div class="table">
+          <div class="msg">
+            <b class="house-msg">
+              <span class="icon"></span>
+              <span class="msg">实际居住人员</span>
+            </b>
+
+            <div class="button" v-if="isEdit">
+              <ai-person-select :instance="instance" @selectPerson="getLives" :isMultiple="true"
+                                :chooseUserList="lives"/>
+            </div>
+          </div>
+
+          <ai-table :tableData="lives" :col-configs="live" ref="aitableex">
+            <el-table-column slot="lives" label="居民类型" align="center">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('BulidResidentType', row.residentType) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="lives" label="特殊人群" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ row.tips }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="lives" label="与户主关系" align="center" v-if="isEdit">
+              <template slot-scope="{ row }">
+                <ai-select v-model="row.relation" placeholder="与户主关系" clearable
+                           :selectList="$dict.getDict('householdRelation')"></ai-select>
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="lives" label="与户主关系" align="center" v-if="!isEdit">
+              <template slot-scope="{ row }">
+                {{ dict.getLabel('householdRelation', row.relation) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="options" label="操作" align="center" v-if="isEdit">
+              <template slot-scope="scope">
+                <el-button type="text" @click="remove(scope.$index, 'lives')">删除</el-button>
+              </template>
+            </el-table-column>
+          </ai-table>
+        </div>
+
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">{{ isEdit ? '取消' : '关闭' }}</el-button>
+          <el-button type="primary" @click="report" v-if="isEdit">确认</el-button>
+        </span>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+export default {
+  name: 'BuildMsg',
+  components: {},
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+  data() {
+    return {
+      id: '',
+      page: {
+        current: 1,
+        size: 10,
+      },
+      total: 0,
+      search: {
+        livingStatus: '',
+        houseCode: '',
+      },
+      colConfigs: [
+        {prop: 'unitNumber', label: '单元', align: 'center'},
+        {prop: 'houseCode', label: '户号', align: 'center'},
+        {prop: 'livingNumber', label: '住户数', align: 'center'},
+        {slot: 'owner', label: '户主', align: 'center'},
+        {slot: 'livingStatus', align: 'center'},
+        {slot: 'options', label: '操作', align: 'center'},
+      ],
+      tableData: [],
+      dialogVisible: false,
+      forms: {
+        houseArea: '',
+        livingStatus: 0,
+        houseUse: 0,
+        leaseSituation: '',
+        isFilingCertificate: '',
+      },
+      owners: [],
+      owner: [
+        {prop: 'name', label: '姓名', align: 'center'},
+        {prop: 'idNumber', label: '身份证号', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {slot: 'owner', align: 'center'},
+        {
+          slot: 'relation',
+          align: 'center',
+        },
+        {slot: 'options', label: '操作', align: 'center'},
+      ],
+      renters: [],
+      renter: [
+        {prop: 'name', label: '姓名', align: 'center'},
+        {prop: 'idNumber', label: '身份证号', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {
+          slot: 'relation',
+          align: 'center',
+        },
+        {slot: 'renters', align: 'center'},
+        {slot: 'options', label: '操作', align: 'center'},
+      ],
+      lives: [],
+      live: [
+        {prop: 'name', label: '姓名', align: 'center'},
+        {prop: 'idNumber', label: '身份证号', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {
+          slot: 'relation',
+          align: 'center',
+        },
+        {slot: 'lives', align: 'center'},
+        {slot: 'options', label: '操作', align: 'center'},
+      ],
+      type: '',
+      ids: '',
+      buildingId: '',
+    }
+  },
+  computed: {
+    houseImpParam() {
+      return {
+        buildingId: this.params.id,
+      }
+    },
+    houseExpParam() {
+      return {
+        buildingId: this.params.id,
+      }
+    },
+    isEdit() {
+      return this.type == 'edit'
+    },
+  },
+  watch: {},
+  created() {
+    this.dict.load('yesOrNo', 'houselivingStatus', 'houseLeaseSituation', 'isFilingCertificateStatus', 'houseUseStatus', 'BulidResidentType', 'communityBuildingType', 'householdRelation').then(() => {
+      this.getList()
+    })
+  },
+  mounted() {
+  },
+  methods: {
+    getList() {
+      this.instance
+      .post(`/app/appcommunityhouseinfo/list`, null, {
+        params: {
+          ...this.page,
+          ...this.search,
+          buildingId: this.params.id,
+        },
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+
+    // 返回按钮
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+
+    // 确认增加和编辑
+    report() {
+      this.instance
+      .post(`/app/appcommunityhouseinfo/update`, {
+        ...this.forms,
+        id: this.id,
+        owner: this.owners,
+        renter: this.renters,
+        live: this.lives,
+      })
+      .then((res) => {
+        if (res.code == 0) {
+          this.$message.success('提交成功')
+
+          this.dialogVisible = false
+          this.getList()
+        }
+      })
+    },
+
+    // 详情 和 编辑
+    toEdit(id, type) {
+      this.id = id
+      this.type = type
+      this.instance.post(`/app/appcommunityhouseinfo/queryDetailById?&id=${id}`).then((res) => {
+        if (res.code == 0) {
+          this.forms = res.data
+
+          this.owners = this.forms.owner
+          this.renters = this.forms.renter
+          this.lives = this.forms.live
+        }
+      })
+      this.dialogVisible = true
+    },
+
+    // 删除
+    remove(index, source) {
+      this.$confirm('确定删除该数据？').then(() => {
+        this[source].splice(index, 1)
+      })
+    },
+
+    // 选择人员
+    getOwners(val) {
+      let listNew = []
+      let newName = []
+      for (var i = 0; i < val.length; i++) {
+        if (newName.indexOf(val[i].name) == -1) {
+          newName.push(val[i].name)
+          listNew.push(val[i])
+        }
+      }
+
+      this.owners = listNew
+    },
+
+    getRenters(val) {
+      let listNew = []
+      let newName = []
+      for (var i = 0; i < val.length; i++) {
+        if (newName.indexOf(val[i].name) == -1) {
+          newName.push(val[i].name)
+          listNew.push(val[i])
+        }
+      }
+
+      this.renters = listNew
+    },
+
+    getLives(val) {
+      let listNew = []
+      let newName = []
+      for (var i = 0; i < val.length; i++) {
+        if (newName.indexOf(val[i].name) == -1) {
+          newName.push(val[i].name)
+          listNew.push(val[i])
+        }
+      }
+
+      this.lives = listNew
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.BuildMsg {
+  ::v-deep .ai-list__title {
+    background-color: #fff;
+    margin: 0 !important;
+    padding-left: 20px;
+  }
+
+  ::v-deep .ai-list__content {
+    .ai-list__content--right {
+      .ai-list__content--right-wrapper {
+        .search-select {
+          display: flex;
+          justify-content: space-between;
+          border-bottom: 1px solid #eee;
+          padding-bottom: 10px;
+
+          .left {
+            width: 30%;
+
+            .ai-select {
+              display: inline-block;
+            }
+
+            .ai-select:first-child {
+              margin-right: 15px;
+            }
+          }
+
+          .right {
+            width: 20%;
+          }
+        }
+
+        .bar {
+          display: flex;
+          justify-content: space-between;
+          margin-top: 10px;
+
+          .export {
+            .ai-import {
+              display: inline-block;
+              margin-right: 10px;
+            }
+
+            .ai-download {
+              display: inline-block;
+            }
+          }
+
+          .import {
+            .ai-import {
+              display: inline-block;
+              margin-right: 10px;
+            }
+
+            .ai-download {
+              display: inline-block;
+            }
+          }
+        }
+
+        .ai-dialog__wrapper {
+          background-color: #fff;
+
+          .el-dialog__wrapper {
+            .el-dialog__body {
+              .ai-dialog__content {
+                .ai-dialog__content--wrapper {
+                  .ai-wrapper {
+                    padding-left: 0 !important;
+
+                    .bulidmsg {
+                      height: 32px;
+                      line-height: 32px;
+                      width: 100%;
+                      margin: 0 0 15px 20px;
+
+                      .icon {
+                        border-left: 2px solid #2266ff;
+                      }
+
+                      .bulidtext {
+                        display: inline-block;
+                        margin-left: 9px;
+                        color: #222;
+                        font-size: 15px;
+                        font-weight: 800;
+                      }
+                    }
+
+                    .create {
+                      width: 100% !important;
+
+                      .ai-info-item__left {
+                        width: 78px;
+                        margin-right: 22px;
+                      }
+                    }
+
+                    .Address {
+                      .ai-info-item__left {
+                        width: 78px;
+                        margin-right: 22px;
+                      }
+                    }
+
+                    .building {
+                      padding-left: 40px;
+
+                      .ai-info-item__left {
+                        width: 78px;
+                        margin-right: 22px;
+                      }
+                    }
+                  }
+
+                  .el-form {
+                    padding: 20px 0 0 0;
+
+                    .house {
+                      width: 50%;
+
+                      .el-form-item__content {
+                        width: 63%;
+                      }
+                    }
+
+                    .family-hose {
+                      display: flex;
+                      justify-content: space-between;
+                    }
+
+                    .line {
+                      width: 50% !important;
+                      padding-right: 40px;
+
+                      .el-form-item__content {
+                        .el-input {
+                          .el-input__suffix {
+                            color: #666;
+                            margin-right: 5px;
+                          }
+                        }
+                      }
+                    }
+                  }
+
+                  .table {
+                    padding: 20px 20px 0 20px;
+
+                    .msg {
+                      display: flex;
+                      justify-content: space-between;
+
+                      .house-msg {
+                        height: 32px;
+                        line-height: 32px;
+
+                        .icon {
+                          border-left: 2px solid #2266ff;
+                        }
+
+                        .msg {
+                          display: inline-block;
+                          color: #222;
+                          font-size: 15px;
+                          font-weight: 800;
+                          margin-left: 9px;
+                        }
+                      }
+
+                      // .button {
+                      // }
+                    }
+
+                    .ai-table {
+                      margin-top: 10px;
+                      // .el-table {
+                      // }
+                      .pagination {
+                        display: none;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

project/grid/AppBuildManage/components/List.vue

@@ -0,0 +1,324 @@
+<template>
+  <section class="AppPetitionManage">
+    <ai-detail>
+      <!-- 标题 -->
+      <ai-title slot="title" title="楼栋管理" isShowBottomBorder />
+      <template #content>
+        <ai-tree-menu title="楼栋管理" @search="(v) => $refs.gridTree.filter(v)">
+          <el-tree :data="treeData" ref="gridTree" :filter-node-method="handleTreeFilter" @node-click="handleSelectGrid" highlight-current node-key="id" :props="{ label: 'name', children: 'children' }" :default-expanded-keys="[defaultShowNodes]" />
+        </ai-tree-menu>
+
+        <div class="flex">
+          <ai-search-bar bottomBorder>
+            <template slot="left">
+              <!-- 定位状态 -->
+              <ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('BuildLocationStatus')" @change=";(page.current = 1), getList()"></ai-select>
+            </template>
+
+            <!-- 搜索 -->
+            <template slot="right">
+              <el-input
+                v-model="search.managerName"
+                size="small"
+                placeholder="楼栋号/楼长/联系方式"
+                clearable
+                v-throttle="() => {page.current = 1, getList()}"
+                @clear=";(page.current = 1), (search.managerName = ''), getList()"
+                suffix-icon="iconfont iconSearch" />
+            </template>
+          </ai-search-bar>
+
+          <ai-search-bar class="ai-search-ba">
+            <template slot="left">
+              <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')" :disabled="!isAdd">添加 </el-button>
+              <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
+            </template>
+
+            <!-- 导入导出 -->
+            <template #right>
+              <ai-import :instance="instance" :dict="dict" type="appcommunitybuildinginfo" :importParams="{ areaId: user.info && user.info.areaId }" name="楼栋管理" @success="getList()">
+                <el-button icon="iconfont iconImport">导入</el-button>
+              </ai-import>
+              <ai-download :instance="instance" url="/app/appcommunitybuildinginfo/listExport" :params="param" fileName="楼栋管理模板" :disabled="tableData.length == 0">
+                <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+              </ai-download>
+            </template>
+          </ai-search-bar>
+
+          <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" style="margin-top: 20px;" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
+            <el-table-column slot="locationStatus" label="定位状态" align="center">
+              <template slot-scope="{ row }">
+                <span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
+                <span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('BuildLocationStatus', row.locationStatus) }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column slot="options" label="操作" align="center" width="240px" fixed="right">
+              <div class="table-options" slot-scope="{ row }">
+                <el-button type="text" @click="onAdd(row.id)">编辑</el-button>
+                <el-button type="text" @click="remove(row.id)">删除</el-button>
+                <el-button type="text" @click="toBuildMsg(row)">房屋信息</el-button>
+                <el-button type="text" @click="$router.push({ name: '63', query: { communityId: row.communityId, buildingId: row.id, unitNum: 1, buildingNumber: row.buildingNumber } })">
+                  楼栋模型
+                </el-button>
+              </div>
+            </el-table-column>
+          </ai-table>
+        </div>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'List',
+  props: {
+    dict: Object,
+    instance: Function,
+    params: Object,
+  },
+
+  data() {
+    return {
+      isAdd: false,
+      page: {
+        current: 1,
+        size: 10,
+      },
+      total: 0,
+      search: {
+        locationStatus: '',
+        managerName: '',
+      },
+      id: '',
+      ids: [],
+      colConfigs: [
+        { type: 'selection' },
+        {
+          prop: 'communityName',
+          label: '小区名称',
+        },
+        {
+          prop: 'buildingNumber',
+          label: '楼栋号',
+          align: 'center',
+        },
+        { prop: 'unitNumber', label: '单元数', align: 'center' },
+        {
+          prop: 'layerNumber',
+          label: '最高层数',
+          align: 'center',
+        },
+        { prop: 'householdNumber', label: '每层户数', align: 'center' },
+        {
+          prop: 'houseNum',
+          label: '实有户数',
+          align: 'center',
+        },
+        { prop: 'residentNum', label: '实有人口', align: 'center' },
+        {
+          prop: 'managerName',
+          label: '楼栋长名',
+          align: 'center',
+        },
+        { prop: 'managerPhone', label: '楼栋长联系方式', align: 'center', width: '150' },
+        { slot: 'locationStatus' },
+        {
+          slot: 'options',
+          label: '操作',
+          align: 'center',
+        },
+      ],
+      tableData: [],
+      organizationId: '',
+      meta: [],
+      treeData: [],
+      areaId: '',
+      communityId: null,
+      buildingTypeStatus: '',
+      defaultShowNodes: [],
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    param() {
+      return {
+        ...this.search,
+        communityId: this.communityId,
+        areaId: this.user.info?.areaId,
+        ids: this.ids,
+      }
+    },
+  },
+
+  created() {
+    this.dict.load('BuildLocationStatus').then(() => {
+      this.getList()
+      this.getListinfo()
+    })
+  },
+
+  mounted() {},
+
+  methods: {
+    getListinfo() {
+      return this.instance.post(`/app/appcommunityinfo/queryCommunityTree?id=${this.user.info?.areaId}`).then((res) => {
+        if (res.data) {
+          this.treeData = [res.data]
+          this.$nextTick(() => {
+            this.defaultShowNodes = this.treeData[0].id
+          })
+        }
+      })
+    },
+
+    getList() {
+      this.instance
+        .post(`/app/appcommunitybuildinginfo/list`, null, {
+          params: {
+            ...this.page,
+            ...this.search,
+            communityId: this.communityId,
+            areaId: this.areaId,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+    },
+
+    // 添加
+    onAdd(id) {
+      this.$emit('change', {
+        type: 'add',
+        params: {
+          id: id || '',
+          bulidId: this.id,
+          communityId: this.communityId,
+        },
+      })
+    },
+
+    // 房屋信息
+    toBuildMsg(row) {
+      this.$emit('change', {
+        type: 'buildmsg',
+        params: {
+          ...row,
+        },
+      })
+    },
+
+    // 删除
+    remove(id) {
+      this.$confirm('确定删除该数据?').then(() => {
+        this.instance.post(`/app/appcommunitybuildinginfo/delete?ids=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    removeAll() {
+      var id = this.ids.join(',')
+      this.remove(id)
+    },
+
+    handleTreeFilter(v, data) {
+      return data?.name.indexOf(v) > -1
+    },
+
+    handleSelectGrid(data) {
+      this.isAdd = false
+      if (data.type == 1) {
+        this.isAdd = true
+        this.communityId = data.id
+        this.areaId = null
+      } else if (data.type == 0) {
+        this.communityId = null
+        this.areaId = data.id
+      }
+      this.getList()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppPetitionManage {
+  height: 100%;
+
+  .ai-detail {
+    ::v-deep .ai-detail__content {
+      .ai-detail__content--wrapper {
+        display: flex;
+        justify-content: space-between;
+        height: 100%;
+        max-width: 100%;
+        padding: 15px;
+
+        .AiTreeMenu {
+          width: 22%;
+        }
+
+        .flex {
+          width: 78%;
+          margin-left: 10px;
+          padding: 15px;
+          background-color: #fff;
+
+          .ai-search-ba {
+            margin-top: 10px;
+          }
+
+          .ai-table {
+            margin-top: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .el-tree {
+    .el-tree-node__content {
+      display: inline-flex;
+      min-width: 100%;
+
+      &:hover {
+        background: #e8efff;
+        color: #222222;
+        border-radius: 2px;
+      }
+    }
+
+    .is-current > .el-tree-node__content {
+      background: #2266ff;
+      min-width: 100%;
+
+      &:hover {
+        background: #2266ff;
+        color: #fff;
+      }
+
+      span {
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+  }
+  ::v-deep .is-current>.el-tree-node__content{
+    width: 100%!important;
+    padding-right: 16px!important;
+  }
+}
+</style>

project/grid/AppBuildMap/buildingStatistics.vue

@@ -0,0 +1,443 @@
+<template>
+  <section class="buildingStatistics">
+    <ai-title v-if="!isFormDv" title="楼栋统计" isShowBack isShowBottomBorder @onBackClick="$router.push({query:{}}),$parent.info={},$parent.isShowInfo=false,$parent.house=null,$parent.chooseBuildId=''"/>
+    <div class="buildingPane">
+      <div class="bgItem tree"/>
+        <div class="building">
+          <template v-if="floorRooms.length>0">
+            <div class="buildingSignboard">{{ `${currentBuilding.buildingNumber}栋 ${unitNumber}单元` }}
+            </div>
+            <el-scrollbar class="floors">
+              <div class="floor" v-for="(fl,j) in floorRooms" :key="j">
+                <div class="room" v-for="(op,i) in fl" :key="op.id" @click="handleSelectRoom(op,$event)" @touchstart="handleSelectRoom(op,$event)" :class="[{none:op.livingNumber==0,selected:selected.houseCode==op.houseCode},handleTipsHighlight(op.tips)]">
+                  {{ op.houseCode }}
+                  <div v-if="op.livingNumber==0">无人</div>
+                  <div v-show="op.id==selected.id" class="detail" @click.stop :style="{left:position.x,top:position.y}">
+                    <el-row class="popupHeader" type="flex" justify="space-between" align="middle">
+                      <span>{{selected.houseCode}}详情</span>
+                      <ai-icon icon="iconClean" @click.native.stop="selected={}"/>
+                    </el-row>
+                    <div class="family-member">
+                      <h2>房主信息</h2>
+                      <div v-for="(item,index) in selected.owner" :key="item.id">
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>{{item.name}}</label>
+                          </div>
+                          <span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
+                        </div>
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>联系方式</label>
+                          </div>
+                          <span style="color: #2266FF;">{{item.phone}}</span>
+                        </div>
+                      </div>
+
+                      <h2>承租人信息</h2>
+                      <div v-for="(item,index) in selected.renter" :key="item.id">
+                        <div class="family-member__item" >
+                          <div class="member-left">
+                            <label>{{item.name}}</label>
+                          </div>
+                          <span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
+                        </div>
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>联系方式</label>
+                          </div>
+                          <span>{{item.phone}}</span>
+                        </div>
+                      </div>
+
+                      <h2>实际居住人员</h2>
+                      <div v-for="(item,index) in selected.live" :key="item.id">
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>{{item.name}}</label>
+                          </div>
+                          <span>{{root.dict.getLabel("householdRelation",item.relation)}}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </template>
+          <ai-empty v-else>请在【<b>小区总览</b>】中选取【楼栋单元】</ai-empty>
+          <div class="bottom"/>
+        </div>
+      <building-tool-bar></building-tool-bar>
+    </div>
+  </section>
+</template>
+
+<script>
+import BuildingToolBar from "./buildingToolBar";
+
+export default {
+  name: "buildingStatistics",
+  components: {BuildingToolBar},
+  inject: ['root'],
+  provide() {
+    return {
+      sta: this
+    }
+  },
+  props: {
+    instance: Function,
+    dict: Object,
+    isFormDv: Boolean,
+    query: Object
+  },
+  data() {
+    return {
+      rooms: [],
+      selected: {},
+      currentBuilding: {},
+      unitNumber:1,
+      tips: [],
+      position:{
+        x:"",
+        y:""
+      },
+    }
+  },
+  computed: {
+    floorRooms() {
+      let obj = {}
+      this.rooms.map(e => {
+        e.none = e.isNone == 0
+        return obj[e.layerNumber]?.push(e) || (obj[e.layerNumber] = [e])
+      })
+      return Object.values(obj).reverse()
+    }
+  },
+  created() {
+    this.dict.load('householdRelation', 'residentTipType',"houseLivingType")
+    if (this.isFormDv && this.query.buildingId) {
+      this.getRoomsByBuilding(this.query.buildingId, this.query.unitNum)
+      this.currentBuilding = { buildingNumber: this.query.buildingNumber}
+      this.unitNumber = this.query.unitNum
+
+      return false
+    }
+    this.getRoomsByBuilding(this.$route.query?.buildingId,this.$route.query?.unitNum)
+    this.currentBuilding = {buildingNumber: this.$route.query?.buildingNumber};
+    this.unitNumber = this.$route.query?.unitNum;
+  },
+  methods: {
+    handleSelectRoom(room, e) {
+      console.log(e)
+      if (room.livingNumber>0) {
+        this.$nextTick(()=>{
+          this.position.x = e.pageX + 40 + "px"
+          this.position.y = e.pageY + "px"
+          this.selected = room;
+          this.$forceUpdate()
+        })
+        // this.getRoomDetail(room.id)
+      }
+    },
+    selectedBuilding(building,unitNumber) {
+      this.selected = {}
+      this.tips = []
+      this.$router.push({query: {...this.$route.query, buildingId: building.id,unitNum:unitNumber}}).catch(e=>{e})
+      this.currentBuilding = building
+      this.unitNumber = unitNumber
+      this.getRoomsByBuilding(building.id,unitNumber)
+    },
+    getRoomsByBuilding(buildingId,unitNumber) {
+      this.root.instance.post("/app/appcommunityhouseinfo/list", null, {
+        params: {
+          unitNumber,
+          buildingId,
+          size: 999
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.rooms = res.data.records
+        }
+      })
+    },
+    getRoomDetail(id) {
+      return this.root.instance.post("/app/appcommunityhouseinfo/queryDetailById", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          let {residents} = res.data
+          this.selected = {
+            ...this.selected, ...res.data,
+            residents: residents.map(e => {
+              let {tips} = e
+              //显示为户主
+              let relationLabel = e.householdName == 1 ? "户主" : this.root.dict.getLabel("householdRelation", e.householdRelation)
+              return {...e, tips: tips ? tips.split("|") : [], relationLabel}
+            }
+            )
+          }
+        }
+      })
+    },
+    handleTipsHighlight(tip) {
+      let flag = this.tips.length > 0 && !this.tips.some(t => tip?.split("|").includes(t))
+      return flag ? 'tipsHighlight' : ''
+    },
+    selectedTips(tips) {
+      this.tips = tips
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingStatistics {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  ::v-deep .ailist-title{
+    margin: 0 20px;
+  }
+
+  .family-member {
+    & > h2 {
+      height: 32px;
+      line-height: 32px;
+      margin: 0;
+      padding: 0 12px;
+      color: #333333;
+      font-size: 12px;
+      font-weight: 700;
+      text-align: left;
+      background: #E3E8F1;
+    }
+
+    .family-member__item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 32px;
+      padding: 0 12px;
+      background: #F3F6F9;
+
+      .member-left {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      &:nth-of-type(2n) {
+        background: #fff;
+      }
+
+      label {
+        font-weight: normal !important;
+        color: #333;
+        font-size: 12px;
+      }
+
+      & > span {
+        color: #666666;
+        font-size: 12px;
+      }
+    }
+
+    &:last-child {
+      label {
+        color: #666666;
+        font-weight: normal !important;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .buildingPane {
+    background-image: url("https://cdn.cunwuyun.cn/buildSta/cloud.png"), linear-gradient(3deg, #FFFFFF 0%, #3093FF 100%);
+    background-repeat: no-repeat;
+    background-position: 227px 43px, 100%;
+    background-size: 788px 112px, 100%;
+    position: relative;
+    box-sizing: border-box;
+    padding-right: 400px;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+
+    .bgItem {
+      position: absolute;
+      background-repeat: no-repeat;
+      pointer-events: none;
+
+      &.tree {
+        left: calc(50% - 200px);
+        transform: translateX(-50%);
+        bottom: 0;
+        width: 580px;
+        height: 71px;
+        background-image: url("https://cdn.cunwuyun.cn/buildSta/tree.png");
+        z-index: 3;
+      }
+    }
+
+    .building {
+      margin-left: 60px;
+      flex-shrink: 0;
+      height: auto;
+      width: auto;
+      box-sizing: border-box;
+      padding: 136px 0 0;
+      background-image: url("https://cdn.cunwuyun.cn/buildSta/roof.png"),
+      url("https://cdn.cunwuyun.cn/buildSta/chimney.png");
+      background-position: 0 121px, 70px 91px;
+      background-size: 100% 105px, 70px;
+      background-repeat: no-repeat;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: center;
+      border-bottom: 10px solid #E9C28E;
+
+      .buildingSignboard {
+        padding-top: 41px;
+        width: 200px;
+        height: 65px;
+        text-align: center;
+        background-image: url("https://cdn.cunwuyun.cn/buildSta/buildingSignboard.png");
+        background-repeat: no-repeat;
+        box-sizing: border-box;
+        font-size: 12px;
+        font-weight: bold;
+        color: #1D3296;
+        margin-bottom: 15px;
+      }
+
+      .ai-empty {
+        background: #FFECD9;
+        margin: 90px 20px 0;
+        padding: 0 10px 90px;
+        font-size: 14px;
+        color: #666;
+
+        b {
+          color: #26f
+        }
+      }
+
+      .bottom {
+        background: #FFECD9;
+        height: 50px;
+        width: calc(100% - 40px);
+      }
+    }
+
+    ::v-deep .floors {
+      max-height: 520px;
+
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .floor {
+      margin: 0 20px;
+      height: 105px;
+      flex-shrink: 0;
+      max-width: calc(100% - 40px);
+      display: flex;
+      align-items: center;
+      background-image: url("https://cdn.cunwuyun.cn/buildSta/floor.png");
+      background-size: 100% 105px;
+      padding: 0 30px;
+      box-sizing: border-box;
+      gap: 20px;
+
+      .room {
+        width: 60px;
+        height: 72px;
+        background-image: url("https://cdn.cunwuyun.cn/buildSta/room.png");
+        text-align: center;
+        padding-top: 20px;
+        box-sizing: border-box;
+        font-size: 14px;
+        font-weight: bold;
+        color: #FFFFFF;
+        cursor: pointer;
+        position: relative;
+
+        .detail {
+          position: fixed;
+          width: 320px;
+          background: #fff;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+          border-radius: 4px;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          z-index: 11;
+          transform: translateY(-100%);
+
+          .popupHeader {
+            background: #D42222;
+            padding: 0 12px;
+            height: 32px;
+
+            .AiIcon {
+              width: 16px;
+              height: 16px;
+            }
+          }
+
+          li {
+            list-style-type: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 12px;
+            font-size: 12px;
+            color: #333;
+            height: 32px;
+
+            & > div {
+
+            }
+
+            &.title {
+              background: #E3E8F1;
+            }
+
+            &.stretch {
+              background: #F3F6F9;
+            }
+          }
+        }
+
+        &.none {
+          cursor: not-allowed;
+          color: #f46;
+          background-image: url("https://cdn.cunwuyun.cn/buildSta/roomNone.png");
+        }
+
+        &.selected {
+          background-image: url("https://cdn.cunwuyun.cn/buildSta/roomSelected.png");
+        }
+      }
+    }
+
+    .buildingToolBar {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+    }
+  }
+
+  .tipsHighlight {
+    opacity: 0.6;
+  }
+}
+</style>

project/grid/AppBuildMap/buildingToolBar.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="buildingToolBar">
+    <div class="toolBar">
+      <div class="nav" v-for="(op,i) in navs" :key="i" :class="{selected:i==active}" @click="active=i">
+        <ai-icon :icon="op.icon"/>
+        <div>{{ op.name }}</div>
+      </div>
+    </div>
+    <component :is="currentNav.comp" class="toolPane"/>
+  </section>
+</template>
+
+<script>
+import BuildingInfo from "./toolBar/buildingInfo";
+import CommunityOverview from "./toolBar/communityOverview";
+// import NearbyGCS from "./toolBar/nearbyGCS";
+import RecentEvents from "./toolBar/recentEvents";
+
+export default {
+  name: "buildingToolBar",
+  components: {RecentEvents, CommunityOverview, BuildingInfo},
+  computed: {
+    navs() {
+      return [
+        {icon: 'icondanweiguanli', name: "单元统计", comp: BuildingInfo},
+        {icon: 'icondanweiguanli', name: "单元切换", comp: CommunityOverview},
+        // {icon: 'icondanweiguanli', name: "网格员", comp: NearbyGCS},
+        // {icon: 'icondanweiguanli', name: "近期事件", comp: RecentEvents},
+      ]
+    },
+    currentNav() {
+      return this.navs[this.active]
+    }
+  },
+  data() {
+    return {
+      active: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingToolBar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .toolBar {
+    height: 40px;
+    background: #FFFFFF;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    padding: 4px;
+    width: 400px;
+    display: flex;
+    gap: 8px;
+    box-sizing: border-box;
+    align-self: flex-end;
+
+    .nav {
+      flex: 1;
+      height: 32px;
+      color: #3A3A3A;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      cursor: pointer;
+
+      .AiIcon {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+      }
+
+      &:hover {
+        color: #2266FF;
+      }
+
+      &.selected {
+        background: #E4F0FF;
+        color: #2266FF;
+      }
+    }
+  }
+
+  .toolPane {
+    background: #FFFFFF;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+}
+</style>

project/grid/AppBuildMap/toolBar/buildingInfo.vue

@@ -0,0 +1,239 @@
+<template>
+  <section class="buildingInfo">
+    <ai-title title="人口信息"/>
+    <div class="infoPane">
+      <div class="staZone">
+        <div v-for="(value, name) in staData" :key="name">
+          <b>{{ value }}</b>
+          <span>{{ name }}</span>
+        </div>
+      </div>
+    </div>
+    <ai-title title="房屋信息"/>
+    <div class="infoPane">
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>所属社区</span>
+        <span>{{build.areaName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>所属小区</span>
+        <span>{{build.communityName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>房屋类型</span>
+        <span>{{root.dict.getLabel("communityBuildingType",build.buildingType)}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>楼长姓名</span>
+        <span>{{build.managerName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>联系方式</span>
+        <span>{{build.managerPhone}}</span>
+      </el-row>
+    </div>
+  </section>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "buildingInfo",
+  inject: ['root', 'sta'],
+  computed: {
+    chartData() {
+      return this.root.dict.getDict("residentTipType").map(e => ({
+        name: e.dictName,
+        key: e.dictValue,
+        color: e.dictColor,
+        v1: 0
+      }))
+    },
+    colConfigs() {
+      return [
+        {prop:"areaName",label:"所属社区"}
+      ];
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      staData: {},
+      tag:{},
+      color:{},
+      build:{},
+    }
+  },
+  methods: {
+    initChart(data) {
+      this.chart = echarts.init(document.getElementById("PersonStaChart"))
+      let selected = {}, color = []
+      this.chartData.map(e => {
+        selected[e.name] = false
+        color.push(e.color)
+      })
+      this.chart.setOption({
+        grid: {top: 31, right: 0, height: 135},
+        tooltip: {},
+        legend: {
+          top: 185,
+          left: 0,
+          orient: "vertical",
+          selected,
+          itemWidth: 14,
+          itemHeight: 14,
+          itemGap: 12,
+          icon: "rect",
+          formatter: name => {
+            let item = data.find(e => this.root.dict.getLabel('residentTipType', e.name) == name)
+            return `{a|${name}}  {b|${item.v1}}`
+          },
+          textStyle: {
+            rich: {
+              a: {color: "#666", width: 123},
+              b: {color: "#333", fontWeight: 'bold', align: 'right'}
+            }
+          }
+        }, color,
+        yAxis: {type: 'value', min: 0, minInterval: 1, axisTick: false, axisLine: false, axisLabel: {color: "#666"}},
+        xAxis: {type: 'category', axisTick: false, axisLine: false, axisLabel: false},
+        series: data.map(e => ({
+          type: 'bar',
+          barWidth: 8,
+          barGap: '250%',
+          name: this.root.dict.getLabel('residentTipType', e.name)
+        }))
+      })
+      this.chart.on('legendselectchanged', ({selected}) => {
+        let tips = Object.keys(selected)?.filter(e => selected[e])?.map(e => this.root.dict.getValue('residentTipType', e))
+        this.sta?.selectedTips(tips)
+      })
+      this.getChartData(data)
+    },
+    getChartData(data) {
+      this.chart?.setOption({
+        series: data.map(e => ({data: [e.v1]}))
+      })
+    }
+  },
+  created(){
+    this.root.dict?.load("communityBuildingType")
+  },
+  mounted() {
+    this.root.instance.post("/app/appcommunitybuildinginfo/statistics", null, {
+      params: {
+        id: this.root.isFormDv ? this.root.info.id : this.$route.query.buildingId,
+        unitNum: this.root.isFormDv ? this.root.info.unitNumber : this.$route.query.unitNum,
+      }
+    }).then(res => {
+      if (res?.data) {
+        this.staData = res.data.unit;
+        this.tag = res.data.tag;
+        this.color = res.data.color;
+        this.build = res.data.build;
+        // this.root.dict.load('residentTipType').then(() => {
+        //   this.initChart(res.data.lx)
+        // })
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingInfo {
+  ::v-deep .infoPane {
+    box-sizing: border-box;
+    padding: 10px 20px;
+
+    .info-item{
+      height: 32px;
+      box-sizing: border-box;
+      padding: 0 12px;
+      font-size: 12px;
+      color: #666666;
+      align-items: center;
+
+      span:last-child{
+        color: #333333;
+      }
+
+      &:nth-child(2n-1){
+        background-color: #F3F6F9;
+      }
+    }
+
+    .static-wrap{
+      width: 360px;
+      box-sizing: border-box;
+      padding-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .sta-item{
+        width: 46%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+
+        .sta-left{
+          display: flex;
+          align-items: center;
+          .tag{
+            width: 14px;
+            height: 14px;
+            background: #DC1739;
+            border-radius: 2px;
+            margin-right: 3px;
+          }
+          & > label{
+            font-size: 12px;
+            color: #666666;
+          }
+        }
+        .num{
+          font-size: 12px;
+          color: #333333;
+        }
+      }
+    }
+    .staZone {
+      height: 80px;
+      background: #F5F7F9;
+      border-radius: 4px;
+      overflow: hidden;
+      display: flex;
+
+      & > div {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        font-size: 12px;
+        color: #333;
+
+        b {
+          font-size: 24px;
+          font-family: DINAlternate-Bold, DINAlternate,serif;
+          color: #2266FF;
+          margin-bottom: 4px;
+        }
+      }
+
+
+    }
+
+    #PersonStaChart {
+      width: 100%;
+      height: 350px;
+    }
+  }
+}
+</style>

project/grid/AppBuildMap/toolBar/communityOverview.vue

@@ -0,0 +1,116 @@
+<template>
+  <section class="communityOverview">
+    <ai-title title="小区总览"/>
+    <div class="units" v-if="Object.keys(buildingUnits).length>0">
+      <div class="building" v-for="(value,name) in buildingUnits" :key="name">
+        <div class="unit" v-for="(op,j) in value" :key="j" @click="sta.selectedBuilding(op,j+1)"
+             :class="{selected:sta.unitNumber==j+1 && sta.currentBuilding.buildingNumber==name}">
+          <b>{{ name}}栋</b>
+          <div>{{ j+1 }}单元</div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty v-else>暂无楼栋信息,请进入【楼栋管理】添加</AiEmpty>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "communityOverview",
+  inject: ['root', 'sta'],
+  computed: {
+    buildingUnits() {
+      let obj = {}
+      this.units.map(e => {
+        for(let i=0;i<e.unitNumber;i++){
+          obj[e.buildingNumber]?.push(e) || (obj[e.buildingNumber] = [e])
+        }
+      })
+      return obj;
+    }
+  },
+  data() {
+    return {
+      units: []
+    }
+  },
+  methods: {
+    getUnits(communityId) {
+      this.root.instance.post("/app/appcommunitybuildinginfo/list", null, {
+        params: {
+          communityId,
+          size: 999
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.units = res.data.records
+        }
+      })
+    }
+  },
+  created() {
+    this.getUnits(this.root.isFormDv ? this.root.info.communityId : this.$route.query.communityId)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.communityOverview {
+  max-width: 400px;
+
+  .units {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 20px 20px;
+    align-items: flex-start;
+
+    .building {
+      display: flex;
+      align-items: center;
+      height: auto;
+      flex-wrap: wrap; 
+
+      .unit {
+        margin-right: 10px;
+        margin-bottom: 10px;
+
+        &:nth-of-type(5) {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .unit {
+      width: 64px;
+      height: 56px;
+      background: #F8FBFF;
+      border-radius: 2px 0 0 2px;
+      border: 1px solid #829CCF;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+
+      b {
+        color: #424242;
+      }
+
+      &.selected {
+        color: #fff;
+        background: #2266FF;
+
+        b {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .ai-empty {
+    height: 240px;
+  }
+}
+</style>

project/grid/AppBuildMap/toolBar/nearbyGCS.vue

@@ -0,0 +1,129 @@
+<template>
+  <section class="nearbyGCS">
+    <ai-title title="全部网格员"/>
+    <div class="radarPane">
+      <div class="radar">
+        <div class="indicator"/>
+      </div>
+      <div class="gcsItem" v-for="(op,i) in userList" :key="i" :style="op.style">
+        <i class="dot" :class="{offline:op.offline}"/>
+        <span>{{ op.name }}</span>
+        <ai-icon icon="iconIM"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "nearbyGCS",
+  inject: ['root', 'sta'],
+
+  data () {
+    return {
+      userList: []
+    }
+  },
+
+  mounted () {
+    this.getInfo()
+  },
+
+  methods: {
+    getInfo () {
+      this.root.instance.post('/app/appgirdmemberinfo/queryGirdMemberByBuilding', null, {
+        params: {buildingId: this.$route.query.buildingId}
+      }).then(res => {
+        if (res?.data) {
+          this.gcsList(res.data)
+        }
+      })
+    },
+
+    gcsList (data) {
+      this.userList = data.map(e => ({
+        ...e,
+        style: {
+          transform: `translate(
+        ${Math.round(160 * (Math.random() - 0.5))}px,
+        ${Math.round(160 * (Math.random() - 0.5))}px)`}
+      }))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nearbyGCS {
+  .radarPane {
+    width: 100%;
+    height: 360px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .gcsItem {
+      position: absolute;
+      width: 92px;
+      height: 28px;
+      background: #FFFFFF;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 16px;
+      font-size: 12px;
+      color: #333333;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 3;
+      gap: 8px;
+
+      .AiIcon {
+        width: 16px;
+        height: 16px;
+      }
+
+      .dot {
+        width: 4px;
+        height: 4px;
+        background: #30BC77;
+
+        &.offline {
+          background: #FF4466;
+        }
+      }
+    }
+  }
+
+  .radar {
+    width: 320px;
+    height: 320px;
+    position: relative;
+    border-radius: 50%;
+    overflow: hidden;
+    background-image: url("https://cdn.cunwuyun.cn/buildSta/radarBg.png");
+
+    .indicator {
+      position: absolute;
+      width: 160px;
+      height: 160px;
+      top: 0;
+      left: 0;
+      transform-origin: 100% 100%;
+      background: linear-gradient(190deg, rgba(162, 255, 182, 0.5) 0%, rgba(162, 255, 215, 0) 100%);
+      border-right: 1px solid #A2FFB6;
+      animation: radar 5s linear infinite;
+      z-index: 2;
+    }
+  }
+}
+
+@keyframes radar {
+  0% {
+    transform: rotate(0deg)
+  }
+  100% {
+    transform: rotate(360deg)
+  }
+}
+</style>

project/grid/AppBuildMap/toolBar/recentEvents.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="recentEvents">
+    <ai-title title="楼栋近期相关事件"/>
+    <div class="recentEvents-list">
+      <div class="recentEvents-item" v-for="(item, index) in 4" :key="index">
+        <div class="recentEvents-item__top">
+          <i>[已解决]</i>
+          <span>102室与402室矛盾纠纷</span>
+        </div>
+        <div class="recentEvents-item__middle">
+          <span>102室与402室矛盾纠纷</span>
+          <em>[张三]</em>
+          <span>接到了</span>
+          <em>[矛盾调解]</em>
+          <span>任务，事件目前</span>
+          <i>[已完成]</i>
+        </div>
+        <div class="recentEvent-item__bottom">2019-06-18 13:35:45</div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "recentEvents"
+}
+</script>
+
+<style lang="scss" scoped>
+.recentEvents {
+  font-size: 14px;
+  width: 100%;
+
+  .recentEvents-list {
+    .recentEvents-item {
+      border-bottom: 1px solid #E6E8EE;
+      background: transparent;
+      padding: 10px;
+      box-sizing: border-box;
+      .recentEvent-item__bottom {
+        color: #999;
+        font-size: 12px;
+      }
+
+      &:first-child {
+        background: #EFF6FF;
+        border-bottom: none;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .recentEvents-item__top {
+        display: flex;
+      }
+
+      .recentEvents-item__middle {
+        margin: 6px 0 10px;
+      }
+
+      span {
+        color: #666666;
+      }
+
+      em {
+        color: #2266FF;
+        font-style: normal;
+      }
+
+      i {
+        font-style: normal;
+        color: #2EA222;
+      }
+    }
+  }
+
+
+}
+</style>

project/grid/AppCommunityManage/AppCommunityManage.vue

@@ -0,0 +1,59 @@
+<template>
+  <section class="AppCommunityManage ailist-wrapper">
+    <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict" />
+  </section>
+</template>
+
+<script>
+import List from './components/List'
+import Add from './components/Add'
+
+export default {
+  name: 'AppCommunityManage',
+  label: '小区管理',
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: 'List',
+      params: {},
+      include: [],
+    }
+  },
+
+  components: {
+    Add,
+    List,
+  },
+
+  methods: {
+    onChange(data) {
+      if (data.type === 'add') {
+        this.component = 'Add'
+        this.params = data.params
+      }
+
+      if (data.type === 'list') {
+        this.component = 'List'
+        this.params = data.params
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList()
+          }
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.AppCommunityManage {
+  height: 100%;
+}
+</style>

project/grid/AppCommunityManage/components/Add.vue

@@ -0,0 +1,283 @@
+<template>
+  <ai-detail showFooter class="add-detail">
+    <template slot="title">
+      <ai-title :title="isEdit ? '编辑小区信息' : '添加小区'" :isShowBack="true" @onBackClick="cancel()"
+                :isShowBottomBorder="true"></ai-title>
+    </template>
+    <template slot="content">
+      <div class="add-form">
+        <ai-bar title="基础信息"></ai-bar>
+        <el-form label-width="110px" style="padding-bottom: 80px;" :model="form" ref="form">
+          <el-form-item label="小区名称" prop="communityName"
+                        :rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]">
+            <el-input size="small" v-model="form.communityName" :maxlength="50" placeholder="请输入小区名称"></el-input>
+          </el-form-item>
+          <el-form-item label="行政归属" prop="areaId" :rules="[
+              { required: true, message: '请选择行政归属', trigger: 'blur' },
+              { pattern:/[^0]0{0,2}$/g, message: '请选择到村/社区' }]">
+            <ai-area-get :instance="instance" v-model="form.areaId" :root="user.info.areaId"
+                         @select="handleAreaSelect"/>
+          </el-form-item>
+          <el-form-item label="小区地址" prop="address" :rules="[{ required: true, message: '请输入小区地址', trigger: 'blur' }]">
+            <el-input size="small" v-model="form.address" placeholder="请输入小区地址" clearable/>
+          </el-form-item>
+
+          <el-form-item label="所属网格" prop="girdInfoList" style="margin-top: 8px;"
+                        :rules="[{ required: true, message: '请选择所属网格', trigger: 'blur' }]">
+            <el-tag
+                :key="index"
+                v-for="(tag,index) in form.girdInfoList"
+                closable
+                style="margin-right: 16px;"
+                :disable-transitions="false"
+                @close="handleClose(tag)">
+              {{ tag.girdName }}
+            </el-tag>
+            <el-button size="small" @click="showGrid=true">选择网格</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true"
+                 @opened="beforeSelectTree" border width="720px">
+        <div class="grid">
+          <el-tree :data="treeObj.treeList" :props="treeObj.defaultProps" node-key="id" ref="tree"
+                   :check-strictly="true" show-checkbox
+                   :default-checked-keys="treeObj.checkedKeys" default-expand-all
+            @check="onCheckChange">
+          </el-tree>
+        </div>
+        <div class="dialog-footer" slot="footer">
+          <el-button size="medium" @click="showGrid=false">取消</el-button>
+          <el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
+        </div>
+      </ai-dialog>
+    </template>
+    <template slot="footer" class="footer">
+      <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
+      <el-button class="footer-btn" type="primary" @click="onSubmit('0')">保存</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'Add',
+
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+
+  data() {
+    return {
+      gridList: [],
+      girdId: '',
+      subGridId: '',
+      subGridList: [],
+      sonGridList: [],
+      form: {
+        communityName: '',
+        areaName: '',
+        areaId: '',
+        girdId: '',
+        dealOpinion: '',
+        recordUser: '',
+        address: '',
+        girdInfoList: [],
+        girdName: '',
+      },
+      showGrid: false,
+      treeObj: {
+        treeList: [],
+        defaultProps: {
+          children: "girdList",
+          label: "girdName",
+        },
+        checkedKeys: [],
+      },
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    isEdit() {
+      return !!this.params.id
+    },
+  },
+
+  created() {
+    this.dict.load('cardType', 'sex', 'nation').then(() => {
+      if (this.params && this.params.id) {
+        this.getInfo(this.params.id)
+      }
+    })
+  },
+  methods: {
+    beforeSelectTree() {
+      this.treeObj.checkedKeys = [];
+      this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
+        if (res.code == 0) {
+          this.treeObj.treeList = this.format(res.data)
+          if (this.form.girdInfoList.length) {
+            this.form.girdInfoList.map((e) => {
+              this.treeObj.checkedKeys.push(e.id);
+            });
+          }
+        }
+      });
+    },
+
+    onCheckChange (e) {
+      this.$nextTick(() => {
+        this.$refs.tree.getCheckedKeys().forEach(v => {
+          this.$refs.tree.setChecked(v, false)
+        })
+        this.$refs.tree.setChecked(e.id, true)
+      })
+    },
+
+    format (list) {
+      return list.map(item => {
+        if (item.girdLevel !== '2') {
+          item.disabled = true
+        }
+
+        if (item.girdList && item.girdList.length) {
+          item.girdList = this.format(item.girdList)
+        }
+
+        return item
+      })
+    },
+    getCheckedTree() {
+      if (this.$refs.tree.getCheckedNodes().length > 1) {
+        return this.$message.error('不能绑定多个网格')
+      }
+      this.form.girdInfoList = this.$refs.tree.getCheckedNodes();
+      this.showGrid = false;
+    },
+    handleClose(tag) {
+      this.form.girdInfoList.splice(this.form.girdInfoList.indexOf(tag), 1);
+    },
+    getInfo(id) {
+      this.instance.post(`/app/appcommunityinfo/queryDetailById?id=${id}`).then((res) => {
+        if (res.code === 0) {
+          this.girdId = res.data.girdId0
+          this.form.communityName = res.data.communityName
+          this.form.address = res.data.address
+          this.form.areaName = res.data.areaName
+          this.form.girdId = res.data.girdId
+          this.form.girdName = res.data.girdName
+          this.form.girdInfoList = [{id: res.data.girdId, girdName: res.data.girdName}]
+          this.$set(this.form, 'areaId', res.data.areaId)
+        }
+      })
+    },
+
+    onSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.form.girdInfoList.length > 1) {
+            return this.$message.error('不能绑定多个网格')
+          }
+
+          this.form.girdName = this.form.girdInfoList[0].girdName
+          this.form.girdId = this.form.girdInfoList[0].id
+          this.instance
+          .post(`/app/appcommunityinfo/addOrUpdate`, {
+            ...this.form,
+            id: this.params ? this.params.id : '',
+          })
+          .then((res) => {
+            if (res.code === 0) {
+              this.$message.success('提交成功')
+              setTimeout(() => {
+                this.cancel(true)
+              }, 800)
+            }
+          })
+        }
+      })
+    },
+
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+    handleAreaSelect(v) {
+      this.form.areaName = v?.[0]?.label
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.add-detail {
+  height: 100%;
+  overflow: hidden;
+  background: #f2f4f6 !important;
+
+  .add-form__item {
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep .el-form-item__label {
+    padding-right: 40px;
+  }
+
+  ::v-deep .ai-detail__footer {
+    background: #fff !important;
+  }
+
+  ::v-deep .ai-detail__content--active {
+    padding: 20px;
+
+    .ai-detail__content--wrapper {
+      width: 100%;
+    }
+
+    .aibar {
+      padding: 0 16px;
+    }
+
+    .el-form {
+      padding: 0 96px 0 50px;
+    }
+
+    .add-form {
+      background: #fff;
+    }
+  }
+
+  ::v-deep .ai-wrapper {
+    align-items: inherit !important;
+  }
+
+  .user-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .avatar {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    border-radius: 10px;
+  }
+
+  .footer-btn {
+    width: 130px;
+  }
+
+  .el-form {
+    padding-bottom: 80px;
+  }
+}
+</style>

project/grid/AppCommunityManage/components/List.vue

@@ -0,0 +1,202 @@
+<template>
+  <ai-list class="AppPetitionManage">
+    <template slot="title">
+      <ai-title title="小区管理" isShowBottomBorder />
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar" bottomBorder>
+        <template slot="left">
+          <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加</el-button>
+          <el-button :disabled="!ids.length" icon="iconfont iconDelete" size="small" @click="removeAll">删除</el-button>
+        </template>
+        <template slot="right">
+          <el-input @clear=";(search.current = 1), (search.communityName = ''), getList()" v-throttle="() => {search.current=1,getList()}" v-model="search.communityName" class="search-input" size="small" placeholder="小区名称" suffix-icon="iconfont iconSearch" clearable />
+        </template>
+      </ai-search-bar>
+
+      <ai-search-bar style="margin-top: 15px;">
+        <template #right>
+          <!-- :importParams="{ areaId: user.info && user.info.areaId }" -->
+          <ai-import :instance="instance" :dict="dict" type="appcommunityinfo" name="小区管理" @success="getList()">
+            <el-button icon="iconfont iconImport">导入</el-button>
+          </ai-import>
+          <ai-download :instance="instance" url="/app/appcommunityinfo/listExport" :params="param" fileName="小区管理模板" :disabled="tableData.length == 0">
+            <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+          </ai-download>
+        </template>
+      </ai-search-bar>
+      <!-- <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="search.current" @selection-change="handleSelectionChange"> -->
+      <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="search.current" @selection-change="(v) => (ids = v.map((e) => e.id))" :size.sync="search.size" @getList="getList">
+        <el-table-column slot="options" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <span class="table-btn" title="编辑" @click="toEdit(row.id)">编辑</span>
+            <span class="table-btn table-btn__remove" title="删除" @click="remove(row.id)">删除</span>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+export default {
+  name: 'List',
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
+        communityName: '',
+      },
+      ids: [],
+      total: 0,
+      colConfigs: [
+        { type: 'selection' },
+        { prop: 'communityName', label: '小区名称', align: 'center', width: '200' },
+        { prop: 'areaName', label: '行政划分' },
+        { prop: 'address', label: '小区地址' },
+        { prop: 'girdName', label: '所属网格' },
+        { prop: 'buildingNumber', label: '总楼栋数（栋）', align: 'center' },
+        { prop: 'createUserName', label: '创建人', align: 'center' },
+        { prop: 'createTime', label: '创建时间', align: 'center' },
+        { slot: 'options', label: '操作', align: 'center' },
+      ],
+      tableData: [],
+    }
+  },
+
+  computed: {
+    importParams() {
+      return {
+        name: this.search.name,
+        ids: this.ids.map((v) => v.id).join(','),
+      }
+    },
+
+    param() {
+      let params = {}
+
+      if (this.ids.length) {
+        params = {
+          ...params,
+          ids: this.ids,
+        }
+      } else {
+        params = {
+          ...params,
+          ...this.search,
+          ids: this.ids,
+        }
+      }
+      return params
+    },
+  },
+
+  created() {
+    this.getList()
+  },
+
+  methods: {
+    getList() {
+      this.instance
+        .post(`/app/appcommunityinfo/list`, null, {
+          params: {
+            ...this.search,
+          },
+        })
+        .then((res) => {
+          if (res?.data) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+    },
+    handleSelectionChange(e) {
+      this.ids = e
+    },
+
+    toEdit(id) {
+      this.$emit('change', {
+        type: 'add',
+        params: {
+          id: id,
+        },
+      })
+    },
+
+    removeAll() {
+      // this.remove(this.ids.map((v) => v.id).join(','))
+      var id = this.ids.join(',')
+      this.remove(id)
+    },
+
+    remove(id) {
+      this.$confirm('确定删除该数据？').then(() => {
+        this.instance.post(`/app/appcommunityinfo/delete?ids=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    onReset() {
+      this.search.current = 1
+      this.search.communityName = ''
+
+      this.getList()
+    },
+
+    onAdd(id) {
+      this.$emit('change', {
+        type: 'add',
+        params: {
+          id: id,
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppPetitionManage {
+  ::v-deep th {
+    font-weight: bold !important;
+  }
+
+  .table-btn {
+    color: #2266ff;
+    font-size: 14px;
+    cursor: pointer;
+
+    &:last-child:hover {
+      color: #f46;
+    }
+
+    &:first-child {
+      margin-right: 16px;
+
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+  }
+
+  .icon-color89B {
+    margin-right: 8px;
+    cursor: pointer;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>

project/grid/AppGridBlock/AppGridBlock.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="AppGridBlock">
+    <keep-alive include="List">
+      <component
+        ref="component"
+        :is="component"
+        @change="onChange"
+        :params="params"
+        :instance="instance"
+        :dict="dict"
+        :isEdit="isEdit"
+      ></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from "./components/list";
+import Add from "./components/add";
+
+export default {
+  name: "AppGridBlock",
+  label: "网格区块",
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: "List",
+      params: {},
+      include: [],
+      isEdit: false
+    };
+  },
+
+  components: {
+    Add,
+    List,
+  },
+
+  mounted() {},
+
+  methods: {
+    onChange(data) {
+      if (data.type === "Add") {
+        this.component = "Add";
+        this.params = data.params;
+        this.isEdit = data.isEdit
+      }
+
+      if (data.type === "list") {
+        this.component = "List";
+        this.params = data.params;
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList()
+            this.$refs.component.getTreeList()
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.AppGridBlock {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>

project/grid/AppGridBlock/components/add.vue

@@ -0,0 +1,580 @@
+<template>
+  <div class="add-block">
+    <ai-detail>
+      <template #title>
+        <ai-title
+            :title="title"
+            :isShowBack="true"
+            :isShowBottomBorder="true"
+            @onBackClick="cancel(false)"
+        ></ai-title>
+      </template>
+      <template #content>
+        <ai-card title="层级信息">
+          <template slot="content">
+            <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px">
+              <ai-info-item label="上级层级单位："><span>{{ forms.parentGirdName }}</span></ai-info-item>
+            </ai-wrapper>
+          </template>
+        </ai-card>
+
+        <el-form
+            ref="rules"
+            :model="forms"
+            :rules="formRules"
+            size="small"
+            label-suffix="："
+            label-width="120px"
+        >
+          <ai-card title="基础信息">
+            <template slot="content">
+              <div class="above">
+                <div class="left">
+                  <el-form-item label="网格名称" prop="girdName">
+                    <el-input
+                        v-model="forms.girdName"
+                        placeholder="请输入…"
+                        :maxlength="50"
+                        show-word-limit
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="网格类型" prop="girdType">
+                    <el-select
+                        v-model="forms.girdType"
+                        placeholder="请选择"
+                        clearable
+                        style="width: 100%;"
+                    >
+                      <el-option
+                          v-for="(item, i) in dict.getDict('girdType')"
+                          :key="i"
+                          :label="item.dictName"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="是否最后一级" prop="isLastLevel">
+                    <el-select
+                        v-model="forms.isLastLevel"
+                        placeholder="请选择"
+                        clearable
+                        style="width: 100%;"
+                    >
+                      <el-option
+                          v-for="(item, i) in dict.getDict('isLastLevel')"
+                          :key="i"
+                          :label="item.dictName"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="网格编码" prop="girdCode">
+                    <el-input
+                        v-model="forms.girdCode"
+                        placeholder="请输入…"
+                        maxlength="30"
+                        show-word-limit
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="网格层级" prop="girdLevel">
+                    <el-select
+                        v-model="forms.girdLevel"
+                        placeholder="请选择"
+                        :disabled="isEdit"
+                        clearable
+                        style="width: 100%;"
+                    >
+                      <el-option
+                          v-for="(item, i) in dict.getDict('girdLevel')"
+                          :key="i"
+                          :label="item.dictName"
+                          :value="item.dictValue"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
+              </div>
+            </template>
+          </ai-card>
+
+          <ai-card title="其他信息">
+            <template slot="content">
+              <div class="above">
+                <div class="left">
+                  <!-- <el-form-item label="事件上报主体" prop="eventReportUnitId">
+                    <el-cascader
+                      style="width: 100%"
+                      :options="unitOps"
+                      ref="cascader"
+                      v-model="forms.eventReportUnitId"
+                      :props="unitProps"
+                      :show-all-levels="false"
+                    />
+                  </el-form-item> -->
+                  <el-form-item label="初始日期" prop="startDate">
+                    <el-date-picker
+                        v-model="forms.startDate"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择日期"
+                        style="width: 100%;"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="终止日期" prop="endDate">
+                    <el-date-picker
+                        v-model="forms.endDate"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择日期"
+                        style="width: 100%;"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="面积" prop="area">
+                    <el-input
+                        v-model="forms.area"
+                        placeholder="面积㎡"
+                    ></el-input>
+                  </el-form-item>
+                </div>
+              </div>
+              <el-form-item label="网格地址" prop="address">
+                <el-input v-model="forms.address" placeholder="限200字" maxlength="200"></el-input>
+              </el-form-item>
+              <el-form-item label="网格范围" prop="enclosure" v-if="forms.girdLevel === '2' || isAddLastLevel">
+                <el-button size="small" @click="showMap = true">地图标绘</el-button>
+              </el-form-item>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="cancel(false)" class="delete-btn footer-btn">
+          取 消
+        </el-button>
+        <el-button type="primary" @click="save()" class="footer-btn">
+          提 交
+        </el-button>
+      </template>
+    </ai-detail>
+    <ai-dialog
+        title="网格范围"
+        :visible.sync="showMap"
+        :customFooter="true"
+        :destroyOnClose="true"
+        @opened="beforeSelectMap"
+        border
+        width="850px"
+    >
+      <div class="map">
+        <div class="tipinput">
+          <el-input
+              v-model="searchAddress"
+              @change="addressChange"
+              clearable
+              placeholder="请输入关键字"
+              id="tipinput"
+              size="medium"
+              style="width: 200px"
+          ></el-input>
+        </div>
+        <div id="panel"></div>
+        <div class="container" id="container"></div>
+        <el-button-group
+            style="margin-top: 8px"
+            v-if="forms.plottingStatus == 1"
+        >
+          <el-button type="primary" size="mini" @click="polyEditor.open()"
+          >开始编辑
+          </el-button
+          >
+          <el-button size="mini" @click="polyEditor.close()"
+          >结束编辑
+          </el-button
+          >
+        </el-button-group>
+        <el-button-group
+            style="margin-top: 8px"
+            v-if="forms.plottingStatus == 0"
+        >
+          <el-button size="mini" @click="draw('polygon')"
+          >开始绘制多边形
+          </el-button
+          >
+          <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> -->
+          <el-button size="mini" @click="clear()">清除绘制</el-button>
+        </el-button-group>
+      </div>
+      <div class="dialog-footer" slot="footer">
+        <el-button size="medium" @click="showMap = false">取消</el-button>
+        <el-button type="primary" size="medium" @click="surePotting()"
+        >确认
+        </el-button
+        >
+      </div>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import {mapState} from "vuex";
+
+export default {
+  name: "addBlock",
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object,
+    isEdit: Boolean
+  },
+  data() {
+    return {
+      forms: {
+        address: "",
+        area: "",
+        points: [],
+        endDate: "",
+        eventReportUnit: "",
+        eventReportUnitId: "",
+        girdCode: "",
+        girdLevel: "",
+        girdList: [],
+        girdName: "",
+        girdType: "",
+        isLastLevel: "",
+        parentGirdId: "",
+        parentGirdName: "",
+        startDate: "",
+        plottingStatus: "0",
+      },
+      showMap: false,
+      map: "",
+      mouseTool: "",
+      searchAddress: "",
+      placeSearch: "",
+      overlays: [],
+      options: [],
+      path: [],
+      location: {},
+      polyEditor: "",
+      title: "添加网格区块",
+      parentGirdInfo: {},
+      isAddLastLevel: false
+    };
+  },
+  computed: {
+    ...mapState(["user"]),
+    formRules() {
+      return {
+        girdName: [
+          {required: true, message: "请输入网格名称", trigger: "change"},
+        ],
+        girdLevel: [
+          {required: true, message: "请选择网格层级", trigger: "change"},
+        ],
+        girdCode: [
+          {required: true, message: "请输入网格编号"},
+          {pattern: /^\d+$/g, message: "请输入数字"},
+        ]
+      };
+    },
+    unitProps() {
+      return {
+        value: "id",
+        checkStrictly: true,
+        emitPath: false,
+      };
+    },
+    unitOps() {
+      let initData = JSON.parse(JSON.stringify(this.options)),
+          ops = initData.filter((e) => !e.parentId);
+      ops.map((e) => this.addChild(e, initData));
+      return ops;
+    },
+  },
+  created() {
+    this.getCorpLocation()
+    if (this.isEdit) {
+      this.title = "编辑网格区块";
+      this.searchDetail();
+    } else {
+      this.forms.parentGirdId = this.params.id;
+      this.forms.parentGirdName = this.params.girdName;
+      this.isAddLastLevel = this.params.girdLevel === '1'
+      // this.forms.girdLevel = Number(this.info.girdLevel) + 1 +'';
+      // this.forms.isLastLevel = ['0','1'].includes(this.forms.girdLevel)?'0':'1';
+      this.title = "添加网格区块";
+    }
+    // this.getAllUnit(this.user.info.areaId);
+  },
+  methods: {
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+    // 获取所有单位
+    getAllUnit(data) {
+      this.options = [];
+      this.instance.post("/admin/sysunit/getAll", null, {
+        params: {areaId: data},
+      }).then((res) => {
+        if (res?.data) {
+          res.data = res.data.map((a) => {
+            return {...a, label: a.name}
+          });
+          this.options = res.data.filter((e) => !e.parentId);
+          this.options.map((t) => this.addChild(t, res.data));
+        }
+      });
+    },
+    beforeSelectMap() {
+      AMapLoader.load({
+        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ["AMap.MouseTool", "AMap.PlaceSearch", "AMap.PolygonEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        AMapUI: {
+          // 是否加载 AMapUI，缺省不加载
+          version: "1.1", // AMapUI 缺省 1.1
+          plugins: [], // 需要加载的 AMapUI ui插件
+        },
+      })
+      .then((AMap) => {
+        this.map = new AMap.Map("container", {
+          resizeEnable: true,
+        });
+        if (this.forms.plottingStatus == 1) {
+          let path = [];
+          this.forms.points.map((e, index) => {
+            path[index] = [e.lng, e.lat];
+          });
+          let polygon = new AMap.Polygon({
+            path: path,
+            strokeColor: "#FF33FF",
+            strokeWeight: 6,
+            strokeOpacity: 0.2,
+            fillOpacity: 0.4,
+            fillColor: "#1791fc",
+            zIndex: 50,
+            bubble: true,
+          });
+          this.map.add([polygon]);
+          this.map.setFitView();
+          this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
+        } else {
+          this.mouseTool = new AMap.MouseTool(this.map);
+          // this.map.add(new AMap.Marker({
+          //     position:this.map.getCenter()
+          // }));
+          this.placeSearch = new AMap.PlaceSearch({
+            pageSize: 3, // 单页显示结果条数
+            pageIndex: 1, // 页码
+            city: "", // 兴趣点城市
+            citylimit: false, //是否强制限制在设置的城市内搜索
+            map: this.map, // 展现结果的地图实例
+            panel: "panel", // 结果列表将在此容器中进行展示。
+            autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+          });
+          this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
+          this.eventOn();
+        }
+      })
+    },
+    getCorpLocation() {
+      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
+        if (res.code == 0) {
+          this.location = res.data
+        }
+      })
+    },
+    //地图事件绑定
+    eventOn() {
+      this.path = [];
+      this.overlays = [];
+      this.map.on("mousemove", null, this);
+      this.mouseTool.on("draw", ({obj}) => {
+        obj.getPath().map((e) => {
+          this.path.push({lat: e.getLat(), lng: e.getLng()});
+        });
+        this.overlays.push(obj);
+      })
+    },
+    //map搜索
+    addressChange(val) {
+      this.placeSearch.search(val);
+    },
+    close() {
+      this.mouseTool.close(true);
+    },
+    clear() {
+      this.map.remove(this.overlays);
+      this.overlays = [];
+      this.path = [];
+    },
+    draw(type) {
+      switch (type) {
+        case "marker": {
+          this.mouseTool.marker({
+            //同Marker的Option设置
+          });
+          break;
+        }
+        case "polyline": {
+          this.mouseTool.polyline({
+            strokeColor: "#80d8ff",
+            //同Polyline的Option设置
+          });
+          break;
+        }
+        case "polygon": {
+          this.mouseTool.polygon({
+            fillColor: "#00b0ff",
+            strokeColor: "#80d8ff",
+            borderWeight: 2,
+            strokeWeight: 4,
+            //同Polygon的Option设置
+          });
+          break;
+        }
+        case "rectangle": {
+          this.mouseTool.rectangle({
+            fillColor: "#00b0ff",
+            strokeColor: "#80d8ff",
+            //同Polygon的Option设置
+          });
+          break;
+        }
+        case "circle": {
+          this.mouseTool.circle({
+            fillColor: "#00b0ff",
+            strokeColor: "#80d8ff",
+            //同Circle的Option设置
+          });
+          break;
+        }
+      }
+    },
+    surePotting() {
+      this.forms.points = [];
+      // this.forms.eventReportUnit = this.$refs.cascader.getCheckedNodes().label;
+      if (this.forms.plottingStatus == 1) {
+        this.polyEditor
+        .getTarget()
+        .getPath()
+        .map((e) => {
+          this.forms.points.push({lng: e.lng, lat: e.lat});
+        });
+      } else {
+        this.forms.points = [...this.path];
+      }
+      this.showMap = false;
+    },
+    save() {
+      this.$refs["rules"].validate((valid) => {
+        if (valid) {
+          this.instance
+          .post(
+              `/app/appgirdinfo/addOrUpdate`,
+              {
+                ...this.forms,
+              },
+              null
+          )
+          .then((res) => {
+            if (res.code == 0) {
+              this.cancel(true)
+            }
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    searchDetail() {
+      this.instance.post(`/app/appgirdinfo/queryDetailById`, null, {
+        params: {id: this.params.id},
+      }).then((res) => {
+        if (res?.data) {
+          this.forms = {...res.data};
+          this.parentGirdInfo = res.data.parentGirdInfo;
+          this.forms.parentGirdName = res.data.parentGirdInfo && res.data.parentGirdInfo.girdName;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add-block {
+  width: 100%;
+  height: 100%;
+
+  ::v-deep .amap-copyright {
+    display: none !important;
+  }
+
+  ::v-deep .amap-logo {
+    display: none !important;
+  }
+
+  .above {
+    overflow: hidden;
+    padding: 8px 0;
+
+    .left {
+      width: 380px;
+      float: left;
+    }
+
+    .right {
+      width: 380px;
+      float: right;
+    }
+  }
+
+  .footer-btn {
+    width: 92px;
+  }
+
+  .map {
+    width: 780px;
+    position: relative;
+    overflow: hidden;
+
+    .container {
+      width: 760px;
+      height: 420px;
+      border-radius: 2px;
+      border: 1px solid #d0d4dc;
+    }
+
+    #panel {
+      position: absolute;
+      height: 400px;
+      right: 30px;
+      top: 20px;
+      width: 280px;
+      overflow: hidden;
+      z-index: 10000;
+    }
+
+    .tipinput {
+      position: absolute;
+      width: 200px;
+      height: 38px;
+      left: 20px;
+      top: 20px;
+      z-index: 10000;
+    }
+  }
+}
+</style>

project/grid/AppGridBlock/components/list.vue

@@ -0,0 +1,696 @@
+<template>
+  <div class="app-grid-block">
+    <ai-list>
+      <template slot="title">
+        <ai-title title="网格区块" :isShowBottomBorder="true"></ai-title>
+      </template>
+      <template slot="left">
+        <ai-tree-menu title="网格层级" @search="(v) => $refs.tree.filter(v)">
+          <el-tree
+            :data="treeObj.treeList"
+            :props="treeObj.defaultProps"
+            @node-click="handleNodeClick"
+            node-key="id"
+            ref="tree"
+            :filter-node-method="filterNode"
+            default-expand-all
+            highlight-current
+          />
+        </ai-tree-menu>
+      </template>
+      <template slot="content">
+        <ai-search-bar>
+          <template slot="left">
+            <el-date-picker
+              v-model="searchObj.createTimeStr"
+              type="date"
+              @change="(page.current = 1), getList()"
+              value-format="yyyy-MM-dd"
+              size="small"
+              placeholder="创建时间"
+            >
+            </el-date-picker>
+          </template>
+          <template slot="right">
+            <el-input
+              v-model="searchObj.girdName"
+              size="small"
+              placeholder="输入网格名称"
+              @keyup.enter.native="(page.current = 1), getList()"
+              clearable
+              v-throttle="() => {page.current = 1, getList()}"
+              @clear="(searchObj.girdName = '', page.current = 1), getList()"
+              suffix-icon="iconfont iconSearch"
+            />
+          </template>
+        </ai-search-bar>
+        <ai-search-bar bottomBorder>
+          <template slot="left">
+            <el-button
+              type="primary"
+              icon="iconfont iconAdd"
+              :disabled="info.girdLevel === '3'"
+              @click="(isEdit = false), toAdd()"
+              >新增
+            </el-button>
+            <el-button
+              icon="iconfont iconDelete"
+              @click="deleteById(ids.join(','))"
+              :disabled="!Boolean(ids.length)"
+            >
+              删除
+            </el-button>
+            <ai-download
+              :instance="instance"
+              url="/app/appgirdinfo/exportGirdInfo"
+              :params="{ ...searchObj, ids: ids.join(',') }"
+              fileName="网格区块"
+            >
+              <el-button icon="iconfont iconExported" size="small"
+                >导出全部</el-button
+              >
+            </ai-download>
+            <ai-import
+              ref="import"
+              title="导入"
+              name="网格区块"
+              url="/app/appgirdinfo/downloadGirdInfo"
+              importUrl="/app/appgirdinfo/importGirdInfo"
+              suffixName="xlsx"
+              :customCliker="true"
+              :instance="instance"
+            >
+              <template slot="tips">
+                <p>
+                  如果表格中已经存在数据，则会被本次导入的数据覆盖；不存在数据，系统将生成新的标准记录；
+                </p>
+              </template>
+              <el-button size="small" icon="iconfont iconImport"
+                >导入</el-button
+              >
+            </ai-import>
+          </template>
+        </ai-search-bar>
+        <ai-table
+          class="mt10"
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="page.total"
+          ref="aitableex"
+          :current.sync="page.current"
+          :size.sync="page.size"
+          @selection-change="(v) => (ids = v.map((e) => e.id))"
+          @getList="getList()"
+        >
+          <el-table-column
+            slot="selectId"
+            type="selection"
+            align="center"
+            width="40"
+          >
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            slot="options"
+            align="center"
+            fixed="right"
+            width="160">
+            <template slot-scope="{ row }">
+              <div class="table-options">
+                <el-button type="text" @click="see(row)">编辑</el-button>
+                <el-button type="text" @click="poltting(row)" :disabled="row.girdLevel !== '2'">标绘</el-button>
+                <el-button type="text" @click="deleteById(row.id)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+    <ai-dialog
+      title="网格范围"
+      :visible.sync="showMap"
+      :customFooter="true"
+      :destroyOnClose="true"
+      border
+      width="850px"
+    >
+      <div class="map">
+        <div class="tipinput">
+          <el-input
+            v-if="editRow.plottingStatus == 0"
+            v-model="searchAddress"
+            @change="addressChange"
+            clearable
+            placeholder="请输入关键字"
+            id="tipinput"
+            size="medium"
+            style="width: 200px"
+          ></el-input>
+        </div>
+        <div id="panel" v-if="editRow.plottingStatus == 0"></div>
+        <div class="container" id="container"></div>
+        <el-button-group
+          style="margin-top: 8px"
+          v-if="editRow.plottingStatus == 1"
+        >
+          <el-button type="primary" size="mini" @click="beginPoltting()"
+            >开始编辑</el-button
+          >
+          <el-button size="mini" @click="finishPoltting()">结束编辑</el-button>
+        </el-button-group>
+        <el-button-group
+          style="margin-top: 8px"
+          v-if="editRow.plottingStatus == 0"
+        >
+          <el-button size="mini" @click="draw('polygon')"
+            >开始绘制多边形</el-button
+          >
+          <!-- <el-button  size="mini" @click="close()">关闭绘制</el-button> -->
+          <el-button size="mini" @click="clear()">清除绘制</el-button>
+        </el-button-group>
+      </div>
+      <div class="dialog-footer" slot="footer">
+        <el-button size="medium" @click="showMap = false">取消</el-button>
+        <el-button type="primary" size="medium" @click="confirm()"
+          >确认</el-button
+        >
+      </div>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+
+export default {
+  name: "List",
+  label: "网格区块",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      treeObj: {
+        treeList: [],
+        defaultProps: {
+          children: "girdList",
+          label: "girdName",
+        },
+        defaultExpandedKeys: [],
+      },
+      filterText: "",
+      page: {
+        current: 1,
+        size: 10,
+        total: 0,
+      },
+      searchObj: {
+        createTimeStr: "",
+        girdName: "",
+      },
+      tableData: [],
+      info: {},
+      ids: [],
+      showMap: false,
+      map: "",
+      polyEditor: "",
+      editRow: {},
+      searchAddress: "",
+      mouseTool: "",
+      placeSearch: "",
+      path: [],
+      overlays: [],
+      isEdit: false,
+      searchId: "",
+      fileList: [],
+      location: {}
+    };
+  },
+  created() {
+    this.getTreeList();
+    this.getList();
+    this.getCorpLocation()
+    this.dict.load("girdLevel", "girdType", "isLastLevel", "plottingStatus");
+  },
+  computed: {
+    colConfigs() {
+      let _ = this;
+      return [
+        { type: 'selection'},
+        {
+          prop: "girdName",
+          align: "left",
+          label: "网格名称",
+        },
+        {
+          prop: "girdCode",
+          align: "center",
+          label: "网格编码",
+        },
+        {
+          prop: "girdType",
+          align: "center",
+          label: "网格类型",
+          render(h, { row }) {
+            return h("span", {}, _.dict.getLabel("girdType", row.girdType) || '-');
+          },
+        },
+        {
+          prop: "girdLevel",
+          align: "center",
+          label: "网格层级",
+          render(h, { row }) {
+            return h("span", {}, _.dict.getLabel("girdLevel", row.girdLevel) || '-');
+          },
+        },
+        {
+          prop: "plottingStatus",
+          align: "center",
+          label: "标绘状态",
+          render(h, { row }) {
+            return h(
+              "span",
+              {
+                style: {
+                  color: _.dict.getColor("plottingStatus", row.plottingStatus),
+                },
+              },
+              _.dict.getLabel("plottingStatus", row.plottingStatus)
+            );
+          },
+        },
+        {
+          prop: "createTime",
+          align: "center",
+          label: "创建时间",
+          render(h, { row }) {
+            return h("span", {}, row.createTime.substring(0, 11));
+          },
+        },
+        {
+          prop: "girdMemberNames",
+          align: "center",
+          width: 200,
+          label: "网格员",
+        },
+      ];
+    },
+  },
+  methods: {
+    getCorpLocation(){
+      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
+        if(res.code==0){
+          this.location = res.data
+        }
+      })
+    },
+    handleNodeClick(val) {
+      this.info = { ...val };
+      this.searchId = val.id;
+      this.getList();
+    },
+    getTreeList() {
+      this.instance
+        .post("/app/appgirdinfo/listByTop", null, null)
+        .then((res) => {
+          if (res.code == 0) {
+            this.treeObj.treeList = [...res.data];
+            this.info = { ...this.treeObj.treeList[0] };
+
+            this.$nextTick(() => {
+              this.treeObj.treeList.length && this.$refs.tree.setCurrentKey(this.treeObj.treeList[0].id)
+            })
+          }
+        });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.girdName.indexOf(value) !== -1;
+    },
+    deleteById(ids) {
+      ids &&
+        this.$confirm("是否要删除该网格区块？", {
+          type: "error",
+        })
+          .then(() => {
+            this.instance
+              .post("/app/appgirdinfo/delete", null, {
+                params: { ids },
+              })
+              .then((res) => {
+                if (res?.code == 0) {
+                  this.$message.success("删除成功!");
+
+                  this.getList();
+                }
+              });
+          })
+          .catch(() => {});
+    },
+    deleteTree(ids) {
+      ids &&
+        this.$confirm("是否要删除该网格区块？", {
+          type: "error",
+        })
+          .then(() => {
+            this.instance
+              .post("/app/appgirdinfo/delete", null, {
+                params: { ids },
+              })
+              .then((res) => {
+                if (res?.code == 0) {
+                  this.$message.success("删除成功!");
+
+                  this.getTreeList();
+                }
+              });
+          })
+          .catch(() => {});
+    },
+    getList() {
+      this.instance
+        .post("/app/appgirdinfo/list", null, {
+          params: {
+            ...this.searchObj,
+            ...this.page,
+            parentGirdId: this.info.girdLevel === '0' ? '' : this.searchId,
+          },
+        })
+        .then((res) => {
+          if (res?.data) {
+            this.tableData = res.data.records;
+            this.page.total = res.data.total;
+          }
+        });
+    },
+    handleSelectionChange(val) {
+      this.ids = [];
+      val.map((e) => {
+        this.ids.push(e.id);
+      });
+    },
+    //添加二级网格
+    addTwoLevel() {
+      this.info = { ...this.treeObj.treeList[0] };
+      this.toAdd()
+    },
+    toAdd() {
+      this.$emit('change', {
+        type: 'Add',
+        params: this.info,
+        isEdit: this.isEdit
+      })
+    },
+    goBack() {
+      this.isAdd = false;
+      this.$nextTick(() => {
+        this.getList();
+        this.getTreeList();
+      });
+    },
+    poltting(row) {
+      this.showMap = true;
+      this.editRow = { ...row };
+      AMapLoader.load({
+        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ["AMap.PolygonEditor", "AMap.MouseTool", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        AMapUI: {
+          // 是否加载 AMapUI，缺省不加载
+          version: "1.1", // AMapUI 缺省 1.1
+          plugins: [], // 需要加载的 AMapUI ui插件
+        },
+      })
+        .then((AMap) => {
+          this.map = new AMap.Map("container", {
+            resizeEnable: true,
+            zoom: 14,
+          });
+          if (this.editRow.plottingStatus == 1) {
+            let path = [];
+            this.editRow.points.map((e, index) => {
+              path[index] = [e.lng, e.lat];
+            });
+            let polygon = new AMap.Polygon({
+              path: path,
+              strokeColor: "#FF33FF",
+              strokeWeight: 6,
+              strokeOpacity: 0.2,
+              fillOpacity: 0.4,
+              fillColor: "#1791fc",
+              zIndex: 50,
+              bubble: true,
+            });
+            this.map.add([polygon]);
+            this.map.setFitView();
+            this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
+          } else {
+            this.mouseTool = new AMap.MouseTool(this.map);
+            this.placeSearch = new AMap.PlaceSearch({
+              pageSize: 3, // 单页显示结果条数
+              pageIndex: 1, // 页码
+              city: "", // 兴趣点城市
+              citylimit: false, //是否强制限制在设置的城市内搜索
+              map: this.map, // 展现结果的地图实例
+              panel: "panel", // 结果列表将在此容器中进行展示。
+              autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+            });
+            this.map.setZoomAndCenter(14, [this.location.lng, this.location.lat], false, 600);
+            this.eventOn();
+          }
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    see(row) {
+      this.info = { ...row };
+      this.isEdit = true;
+     this.toAdd()
+    },
+    draw(type) {
+      switch (type) {
+        case "marker": {
+          this.mouseTool.marker({
+            //同Marker的Option设置
+          });
+          break;
+        }
+        case "polyline": {
+          this.mouseTool.polyline({
+            strokeColor: "#80d8ff",
+            //同Polyline的Option设置
+          });
+          break;
+        }
+        case "polygon": {
+          this.mouseTool.polygon({
+            fillColor: "#00b0ff",
+            strokeColor: "#80d8ff",
+            borderWeight: 2,
+            strokeWeight: 4,
+            //同Polygon的Option设置
+          });
+          break;
+        }
+        case "rectangle": {
+          this.mouseTool.rectangle({
+            fillColor: "#00b0ff",
+            strokeColor: "#80d8ff",
+            //同Polygon的Option设置
+          });
+          break;
+        }
+        case "circle": {
+          this.mouseTool.circle({
+            fillColor: "#00b0ff",
+            strokeColor: "#80d8ff",
+            //同Circle的Option设置
+          });
+          break;
+        }
+      }
+    },
+    //map搜索
+    addressChange(val) {
+      this.placeSearch.search(val);
+    },
+    close() {
+      this.mouseTool.close(true);
+    },
+    clear() {
+      this.map.remove(this.overlays);
+      this.overlays = [];
+      this.path = [];
+    },
+    beginPoltting() {
+      this.polyEditor.open();
+    },
+    finishPoltting() {
+      this.polyEditor.close();
+    },
+    confirm() {
+      let path = [];
+      if (this.editRow.plottingStatus == 1) {
+        this.polyEditor
+          .getTarget()
+          .getPath()
+          .map((e) => {
+            path.push({ lng: e.lng, lat: e.lat });
+          });
+      } else {
+        path = [...this.path];
+      }
+      delete this.editRow.points;
+      this.instance
+        .post(
+          `/app/appgirdinfo/addOrUpdate`,
+          {
+            ...this.editRow,
+            points: path,
+          },
+          null
+        )
+        .then((res) => {
+          if (res.code == 0) {
+            this.getList();
+            this.showMap = false;
+          }
+        });
+    },
+    eventOn() {
+      this.path = [];
+      this.overlays = [];
+      this.map.on("mousemove", this.showInfoMove, this);
+      this.mouseTool.on("draw", ({ type, obj }) => {
+        obj.getPath().map((e) => {
+          this.path.push({ lat: e.getLat(), lng: e.getLng() });
+        });
+        this.overlays.push(obj);
+      });
+    },
+    resetSearch() {
+      Object.keys(this.searchObj).map((e) => {
+        this.searchObj[e] = "";
+      });
+      this.getList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-grid-block {
+  width: 100%;
+  height: 100%;
+  ::v-deep .el-tree {
+    background: transparent;
+
+    .el-tree-node__expand-icon.is-leaf {
+      color: transparent!important;
+    }
+
+    .el-tree-node__content > .el-tree-node__expand-icon {
+      padding: 4px;
+    }
+
+    .el-tree-node__content {
+      height: 32px;
+    }
+
+    .el-tree__empty-text {
+      color: #222;
+      font-size: 14px;
+    }
+
+    .el-tree-node__children .el-tree-node__content {
+      height: 32px;
+    }
+
+    .el-tree-node__content:hover {
+      background: #E8EFFF;
+      color: #222222;
+      border-radius: 2px;
+    }
+
+    .is-current > .el-tree-node__content {
+      &:hover {
+        background: #2266FF;
+        color: #fff;
+      }
+
+      background: #2266FF;
+      
+      span {
+        color: #fff;
+      }
+    }
+  }
+
+  .mt10 {
+    padding: 8px 0;
+  }
+
+  .map {
+    width: 780px;
+    position: relative;
+    overflow: hidden;
+
+    .container {
+      width: 760px;
+      height: 420px;
+      border-radius: 2px;
+      border: 1px solid #d0d4dc;
+    }
+
+    #panel {
+      position: absolute;
+      height: 400px;
+      right: 30px;
+      top: 20px;
+      width: 280px;
+      overflow: hidden;
+      z-index: 10000;
+    }
+
+    .tipinput {
+      position: absolute;
+      width: 200px;
+      height: 38px;
+      left: 20px;
+      top: 20px;
+      z-index: 10000;
+    }
+  }
+
+  ::v-deep .treePanel {
+    display: flex;
+    flex-direction: column;
+
+    .el-tree {
+      min-height: 0;
+      flex: 1;
+    }
+
+    footer {
+      width: 100%;
+      height: 32px;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+
+      span {
+        width: 33.33%;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .el-button {
+        width: 33.33%;
+      }
+    }
+  }
+}
+</style>

project/grid/AppGridBlock/index.js

@@ -0,0 +1,6 @@
+import component from './AppGridBlock.vue'
+
+component.install = function (Vue) {
+  Vue.component(component.name, component)
+}
+export default component

project/grid/AppGridMap/AppGridMap.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="AppGridMap">
+    <keep-alive :include="['List']">
+      <component
+        ref="component"
+        :is="component"
+        @change="onChange"
+        :params="params"
+        :instance="instance"
+        :dict="dict"
+      ></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from "./components/list";
+
+export default {
+  name: "AppGridMap",
+  label: "网格地图",
+
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: "List",
+      params: {},
+      include: [],
+    };
+  },
+
+  components: {
+    List,
+  },
+
+  mounted() {},
+
+  methods: {
+    onChange(data) {
+      if (data.type === "Add") {
+        this.component = "Add";
+        this.params = data.params;
+      }
+
+      if (data.type === "list") {
+        this.component = "List";
+        this.params = data.params;
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList();
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.AppGridMap {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>

project/grid/AppGridMap/components/list.vue

@@ -0,0 +1,669 @@
+<template>
+  <div class="gridMap">
+    <ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" :libraries="['geometry','service', 'tools']"/>
+    <div class="drawer" ref="drawer">
+      <div v-if="show" class="drawer-content">
+        <b>网格地图</b>
+        <div class="tree">
+          <div class="input">
+            <el-input placeholder="请输入网格名称" v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
+          </div>
+          <header class="header">
+            <span>网格列表</span>
+          </header>
+          <div class="tree-div">
+            <el-tree
+              :data="treeObj.treeList"
+              :props="treeObj.defaultProps"
+              @node-click="handleNodeClick"
+              node-key="id"
+              ref="tree"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              default-expand-all
+              highlight-current>
+            </el-tree>
+          </div>
+        </div>
+      </div>
+      <div class="rightBtn" :class="{show}" @click="show=!show">
+        <i class="iconfont iconArrow_Right"/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import {mapState} from 'vuex'
+
+  export default {
+    name: 'AppGridMap',
+    label: "网格地图",
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+    },
+    data() {
+      return {
+        map: null,
+        mapLib: null,
+        show: true,
+        retryMapCount: 0,
+        polygons: [],
+
+        drawer: false,
+        filterText: "",
+        treeObj: {
+          treeList: [],
+          defaultProps: {
+            children: "girdList",
+            label: "girdName",
+          },
+          defaultExpandedKeys: [],
+        },
+        ops: {},
+
+        path: [],
+        searchObj: {
+          onlineStatus: "",
+          girdMemberName: "",
+        },
+        member: {
+          memberList: [],
+        },
+        currInfo: {},
+        infoWindowHtml: "",
+        marker: {},
+        activeId: null,
+        labels: []
+      };
+    },
+    computed: {
+      ...mapState(['user']),
+    },
+    created() {
+      this.dict.load("onlineStatus")
+      this.getTreeList().then(() => {
+        this.getLeafNodes()
+      })
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      },
+    },
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.girdName.indexOf(value) !== -1;
+      },
+      getTreeList() {
+        return this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
+          if (res.code == 0) {
+            this.treeObj.treeList = res.data;
+
+            this.$nextTick(() => {
+              res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
+            })
+          }
+        })
+      },
+
+      onMapInit () {
+        this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
+          if (res.code === 0) {
+            this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
+          }
+        })
+      },
+
+      getLeafNodes() {
+        this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
+          if (res?.data) {
+            const arr = res.data.map(v => {
+              return {
+                id: v.id,
+                girdName: v.girdName,
+                points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
+              }
+            }).filter(v => v.points.length)
+
+            this.renderGridMap(arr)
+          }
+        })
+      },
+      handleNodeClick (val) {
+        if (val.girdLevel === '0') {
+          this.getLeafNodes()
+
+          return false
+        }
+        
+        this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
+          if (res?.data) {
+            const arr = res.data.map(v => {
+              return {
+                id: v.id,
+                girdName: v.girdName,
+                points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
+              }
+            }).filter(v => v.points.length)
+
+            if (!arr.length) {
+              return this.$message.error('该网格还未标绘')
+            }
+
+            this.renderGridMap(arr)
+          }
+        })
+      },
+
+      fitBounds(latLngList, count = 0) {
+        let {mapLib: TMap} = this
+        if (TMap) {
+          if (latLngList.length === 0) {
+            return null;
+          }
+          let boundsN = latLngList[0].getLat();
+          let boundsS = boundsN;
+          let boundsW = latLngList[0].getLng();
+          let boundsE = boundsW;
+          latLngList.forEach((point) => {
+            point.getLat() > boundsN && (boundsN = point.getLat());
+            point.getLat() < boundsS && (boundsS = point.getLat());
+            point.getLng() > boundsE && (boundsE = point.getLng());
+            point.getLng() < boundsW && (boundsW = point.getLng());
+          });
+          return new TMap.LatLngBounds(
+              new TMap.LatLng(boundsS, boundsW),
+              new TMap.LatLng(boundsN, boundsE)
+          );
+        } else {
+          if (count < 5) {
+            this.fitBounds(latLngList, ++count)
+          }
+        }
+      },
+
+      renderGridMap(paths) {
+        let {map, mapLib: TMap } = this
+        if (TMap) {
+          if (this.polygons.length > 0) {
+            this.polygons.forEach(e => e.destroy())
+            this.labels.forEach(e => {
+              e.destroy(e.id)
+            })
+            this.polygons = []
+            this.labels = []
+          }
+          if (paths?.length > 0) {
+            let bounds = []
+            paths.forEach((path, i) => {
+              let polygon = new TMap.MultiPolygon({
+                map, styles: {
+                  default: new TMap.PolygonStyle({
+                    showBorder: true,
+                    borderColor: '#5088FF',
+                    borderWidth: 2,
+                    color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
+                  })
+                },
+                id: path.id,
+                geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
+              })
+              this.polygons.push(polygon)
+              bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
+
+              polygon.on('click', e => {
+                // const id = e.target.id
+                // this.getGridInfo(id)
+              })
+
+              const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
+
+              var position = TMap.geometry.computeCentroid(points)
+
+              let label = new TMap.MultiLabel({
+                id: `label~${path.id}`,
+                data: path.id,
+                map: map,
+                styles: {
+                  building:  new TMap.LabelStyle({
+                    color: '#3777FF',
+                    size: 20,
+                    alignment: 'center',
+                    verticalAlignment: 'middle'
+                  })
+                },
+                geometries: [
+                  {
+                    id: `label-class-${i}`,
+                    styleId: 'building',
+                    position: position,
+                    content: path.girdName,
+                  }
+                ]
+              })
+              this.labels.push(label)
+              label.on('click', e => {
+                // this.getGridInfo(e.target.id.split('~')[1])
+              });
+            })
+            bounds = bounds.reduce((a, b) => {
+              return this.fitBounds([
+                a.getNorthEast(),
+                a.getSouthWest(),
+                b.getNorthEast(),
+                b.getSouthWest(),
+              ]);
+            });
+            map.fitBounds(bounds, {padding: 100})
+          }
+        }
+      },
+      hasClass(ele, cls) {
+        return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
+      },
+      addClass(ele, cls) {
+        if (!this.hasClass(ele, cls)) ele.className += " " + cls;
+      },
+      removeClass(ele, cls) {
+        if (this.hasClass(ele, cls)) {
+          const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
+          ele.className = ele.className.replace(reg, " ");
+        }
+      },
+      changClass(ele, className) {
+        if (!this.hasClass(ele, className)) {
+          this.addClass(ele, className);
+        } else {
+          this.removeClass(ele, className);
+        }
+      },
+      percentage() {
+        if (this.member.onlineNumber == 0) {
+          return 0;
+        } else {
+          return (
+              100 *
+              (this.member.onlineNumber / this.member.allMemberNumber)
+          ).toFixed(2);
+        }
+      },
+      getMemberList() {
+        this.instance.post(`/app/appgirdmemberinfo/queryGirdMemberByMap`, this.searchObj).then((res) => {
+          if (res.code == 0) {
+            let markers = [];
+            this.member = res.data;
+            this.member.memberList.map((e) => {
+              if (e.onlineStatus == "1") {
+                markers.push({lng: e.lng, lat: e.lat, name: e.name});
+              }
+            });
+            this.initMap(null, null, markers);
+          }
+        });
+      },
+      clickMember(marker) {
+        if (marker.onlineStatus == 1) {
+          this.activeId = marker.id;
+          this.marker = marker;
+          this.infoWindowContent(marker);
+        }
+      },
+      infoWindowContent(marker) {
+        this.instance
+        .post(`/app/location/xyToAddress`, null, {
+          params: {
+            x: marker.lat,
+            y: marker.lng,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.infoWindowHtml = `<div class="info">
+                                          <p>
+                                              <span class="name">${marker.name}</span>
+                                              <span class="lat">${marker.lng},${marker.lat}</span>
+                                          </p>
+                                          <p>
+                                              <span class="lat">${res.data}</span>
+                                          </p>
+                                          <p class="address">
+                                              <span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
+                                          </p>
+                                      </div>`;
+            this.initMap(false, marker);
+          }
+        });
+      },
+      queryTrajectory() {
+        this.instance
+        .post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
+          params: {
+            userId: this.marker.userId,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            let path = [];
+            if (res.data) {
+              res.data.map((e, index) => {
+                path[index] = [e.lng, e.lat];
+              });
+            }
+            this.initMap(path, this.marker);
+          }
+        });
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.gridMap {
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  .drawer-btn {
+    position: absolute;
+    left: 280px;
+    bottom: 0;
+    top: 0;
+    margin: auto;
+    width: 20px;
+    height: 24px;
+    border-top: 40px solid transparent;
+    border-bottom: 40px solid transparent;
+    border-left: 16px solid #333c53;
+    border-right: 0 solid transparent;
+    transition: all 0.5s ease-in-out;
+    cursor: pointer;
+
+    .iconfont {
+      position: absolute;
+      font-size: 26px;
+      color: rgb(255, 255, 255);
+      left: -21px;
+      top: -14px;
+      transition: all 0.5s ease-in-out;
+    }
+  }
+
+  .btn-hide {
+    left: 0;
+  }
+
+  .drawer {
+    width: 280px;
+    height: 100%;
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    visibility: visible;
+    opacity: 1;
+    transition: all 0.5s ease-in-out;
+    display: flex;
+    align-items: center;
+
+    .drawer-content {
+      width: 100%;
+      height: 100%;
+      padding: 0 16px;
+      box-sizing: border-box;
+      background: #333c53;
+
+      & > b {
+        color: #fff;
+        font-size: 18px;
+        line-height: 60px;
+      }
+
+      .tree {
+        height: calc(100% - 28px - 76px);
+        border-radius: 4px;
+        overflow: hidden;
+
+        .map-search {
+          display: flex;
+          padding: 8px 0;
+          justify-content: space-between;
+
+          ::v-deep .el-input__inner {
+            color: #fff;
+          }
+        }
+
+        .member-list {
+          width: 100%;
+          height: calc(100% - 44px - 28px);
+          overflow: auto;
+          padding: 0;
+          margin: 0;
+
+          li {
+            width: 100%;
+            height: 32px;
+            display: flex;
+            padding: 0 8px;
+            align-items: center;
+            color: #fff;
+            margin: 0;
+            cursor: pointer;
+
+            span {
+              padding-right: 8px;
+            }
+          }
+
+          .active {
+            background: #1d2336;
+          }
+
+          &::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+            height: 1px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            /*滚动条里面小方块*/
+            border-radius: 10px;
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            background: #1a1e2c;
+          }
+
+          &::-webkit-scrollbar-track {
+            /*滚动条里面轨道*/
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+            background: #282f45;
+          }
+        }
+
+        .empty {
+          padding: 20px 0;
+          color: #7a88bb;
+          text-align: center;
+        }
+
+        .header {
+          width: 100%;
+          height: 28px;
+          padding: 0 16px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          color: #fff;
+          justify-content: space-between;
+          font-size: 14px;
+          background: #3e4a69;
+        }
+
+        .input {
+          width: 100%;
+          padding: 8px 0;
+
+          ::v-deep .el-input__inner {
+            color: #fff;
+          }
+        }
+
+        ::v-deep .el-input__inner {
+          background-color: #282f45;
+          border: 1px solid #282f45;
+        }
+
+        .tree-div {
+          width: 100%;
+          height: calc(100% - 44px - 28px);
+          overflow: auto;
+
+          &::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+            height: 1px;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            /*滚动条里面小方块*/
+            border-radius: 10px;
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            background: #1a1e2c;
+          }
+
+          &::-webkit-scrollbar-track {
+            /*滚动条里面轨道*/
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+            border-radius: 10px;
+            background: #282f45;
+          }
+        }
+
+        footer {
+          width: 100%;
+          height: 32px;
+          background-color: #fff;
+          display: flex;
+          align-items: center;
+
+          span {
+            width: 33.33%;
+            text-align: center;
+            cursor: pointer;
+          }
+        }
+
+        ::v-deep .el-tree {
+          width: 100%;
+
+          .el-tree__empty-block {
+            background: #333c53;
+          }
+
+          .el-tree-node__label {
+            color: #fff;
+          }
+
+          .el-tree-node__content {
+            background: #333c53;
+          }
+
+          .is-current > .el-tree-node__content {
+            .el-tree-node__label {
+              color: #5088ff;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .hide {
+    left: -280px;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .btn {
+    position: absolute;
+    top: 100px;
+  }
+
+  .rightBtn {
+    width: 16px;
+    height: 80px;
+    background: url("https://cdn.cunwuyun.cn/monitor/drawerBtn.png");
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .iconfont {
+      transition: transform 0.2s;
+    }
+
+
+    &.show > .iconfont {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>
+<style lang="scss">
+.map {
+  .info {
+    width: 280px;
+    height: 98px;
+    background: #fff;
+    padding: 8px 0 0 12px;
+    box-sizing: border-box;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+
+    p {
+      line-height: 20px;
+
+      .name {
+        color: #333;
+        font-size: 16px;
+        font-weight: bold;
+      }
+
+      .lat {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+
+    .address {
+      color: #999;
+      line-height: 40px;
+      font-size: 12px;
+      cursor: pointer;
+    }
+  }
+
+  .title_info {
+    width: 68px;
+    font-size: 14px;
+    font-weight: bold;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 4px;
+    padding: 0;
+    margin: 0;
+  }
+
+  .amap-marker-label {
+    border: 1px solid rgb(141, 139, 139);
+    background-color: #fff;
+  }
+}
+</style>

project/grid/AppGridMember/AppGridMember.vue

@@ -0,0 +1,128 @@
+<template>
+  <ai-list class="AppGridMember" v-if="!isShowDetail">
+    <template slot="title">
+      <ai-title title="网格员管理" :isShowBottomBorder="false"></ai-title>
+    </template>
+    <template slot="tabs">
+      <el-tabs v-model="currIndex">
+        <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
+          <component :ref="String(i)" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance"
+                     :dict="dict" :permissions="permissions"/>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+  </ai-list>
+  <Add v-else-if="component === 'Add'" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
+       @change="onChange"></Add>
+  <Family v-else-if="component === 'Family'" :params="params" :instance="instance" :dict="dict"
+          :permissions="permissions" @change="onChange"></Family>
+  <MonitorUser v-else-if="component === 'MonitorUser'" :params="params" :instance="instance" :dict="dict"
+               :permissions="permissions" @change="onChange"></MonitorUser>
+  <ApplyDetail v-else-if="component === 'ApplyDetail'" :params="params" :instance="instance" :dict="dict"
+               :permissions="permissions" @change="onChange"></ApplyDetail>
+  <ApplyAdd v-else-if="component === 'ApplyAdd'" :params="params" :instance="instance" :dict="dict"
+            :permissions="permissions" @change="onChange"></ApplyAdd>
+</template>
+
+<script>
+import List from './components/list'
+import ApplyList from './components/ApplyList'
+import Add from './components/add'
+import ApplyDetail from './components/ApplyDetail'
+import ApplyAdd from './components/ApplyAdd'
+import Family from './components/Family'
+import MonitorUser from './components/MonitorUser'
+
+export default {
+  name: "AppGridMember",
+  label: "网格管理员",
+
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+
+  data() {
+    return {
+      component: "List",
+      params: {},
+      include: [],
+      currIndex: '0',
+      isShowDetail: false
+    };
+  },
+
+  computed: {
+    tabs() {
+      return [
+        {label: '网格员信息', name: 'List', comp: List, permission: ''},
+        {label: '申报信息', name: 'ApplyList', comp: ApplyList, permission: 'app_appgirdmemberapply_detail'}
+      ].filter(item => {
+        return item.name !== 'ApplyList' || this.permissions(item.permission)
+      })
+    }
+  },
+
+  components: {
+    Add,
+    List,
+    Family,
+    ApplyList,
+    ApplyDetail,
+    MonitorUser,
+    ApplyAdd
+  },
+
+  methods: {
+    onChange(data) {
+      if (data.type === "Add") {
+        this.component = "Add"
+        this.isShowDetail = true
+        this.params = data.params
+      }
+
+      if (data.type === "Family") {
+        this.component = "Family"
+        this.isShowDetail = true
+        this.params = data.params
+      }
+
+      if (data.type === "MonitorUser") {
+        this.component = "MonitorUser"
+        this.isShowDetail = true
+        this.params = data.params
+      }
+      if (data.type === "ApplyDetail") {
+        this.component = "ApplyDetail"
+        this.isShowDetail = true
+        this.params = data.params
+      }
+
+      if (data.type === "ApplyAdd") {
+        this.component = "ApplyAdd"
+        this.isShowDetail = true
+        this.params = data.params
+      }
+
+      if (data.type === "list") {
+        this.component = "List"
+        this.isShowDetail = false
+        this.params = data.params
+      }
+
+      if (data.type === "ApplyList") {
+        this.component = "ApplyList"
+        this.isShowDetail = false
+        this.params = data.params
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.AppGridMember {
+  height: 100%;
+}
+</style>

project/grid/AppGridMember/components/ApplyAdd.vue

@@ -0,0 +1,107 @@
+<template>
+  <ai-detail class="content-add">
+    <template slot="title">
+      <ai-title :title="params.id ? '编辑' : '添加'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <el-form class="ai-form" :model="form" label-width="120px" ref="form">
+            <el-form-item label="姓名" style="width: 100%;" prop="name" :rules="[{required: true, message: '请输入姓名', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.name" placeholder="请输入..." :maxlength="20"></el-input>
+            </el-form-item>
+            <el-form-item label="联系电话" style="width: 100%;" prop="phone" :rules="[{required: true, message: '请输入联系电话', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.phone" placeholder="请输入..." :maxlength="11"></el-input>
+            </el-form-item>
+            <el-form-item label="网格名称" style="width: 100%;" prop="girdName" :rules="[{required: true, message: '请输入网格名称', trigger: 'blur'}]">
+              <el-input size="small" v-model="form.girdName" placeholder="请输入..." :maxlength="50"></el-input>
+            </el-form-item>
+          </el-form>
+        </template>
+      </ai-card>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" :loading="isLoading" @click="confirm">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'ApplyAdd',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        form: {
+          name: '',
+          phone: '',
+          gridName: ''
+        },
+        isLoading: false,
+        id: ''
+      }
+    },
+
+    created () {
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appcontentinfo/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = res.data
+          }
+        })
+      },
+
+      onChange () {
+        this.form.files = []
+      },
+
+      confirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.isLoading = true
+            this.instance.post(`/app/appgirdmemberapply/addOrUpdate`, {
+              ...this.form,
+              id: this.params.id || ''
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 600)
+              } else {
+                this.isLoading = false
+              }
+            }).catch(() => {
+              this.isLoading = false
+            })
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>

project/grid/AppGridMember/components/ApplyDetail.vue

@@ -0,0 +1,65 @@
+<template>
+  <ai-detail>
+    <template slot="title">
+      <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">
+      <ai-card title="基本信息">
+        <template #content>
+          <ai-wrapper>
+            <ai-info-item label="姓名" isLine :value="info.name"></ai-info-item>
+            <ai-info-item label="联系电话" isLine :value="info.phone"></ai-info-item>
+            <ai-info-item label="网格名称" isLine :value="info.girdName"></ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'ApplyDetail',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      return {
+        info: {},
+        id: ''
+      }
+    },
+
+    created () {
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/appgirdmemberapply/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'ApplyList',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>

project/grid/AppGridMember/components/ApplyList.vue

@@ -0,0 +1,179 @@
+<template>
+  <ai-list class="list" isTabs>
+    <template slot="content">
+      <ai-search-bar bottomBorder>
+        <template slot="left">
+          <el-button
+            icon="iconfont iconAdd"
+            type="primary"
+            size="small"
+            @click="add('')">添加</el-button>
+          <el-button
+            icon="iconfont iconDelete"
+            @click="deleteById(ids.join(','))"
+            :disabled="!Boolean(ids.length)">
+            删除
+          </el-button>
+          <ai-import :instance="instance" :dict="dict" type="appgirdmemberapply" name="网格员申报" @success="getList()">
+            <el-button icon="iconfont iconImport">导入</el-button>
+          </ai-import>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="searchObj.name"
+            size="small"
+            placeholder="网格员/责任网格"
+            @keyup.enter.native="(page.current = 1), getList()"
+            clearable
+            @clear="(searchObj.name = '', page.current = 1), getList()"
+            suffix-icon="iconfont iconSearch" />
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="page.total"
+        ref="aitableex"
+        :current.sync="page.current"
+        :size.sync="page.size"
+        @selection-change="(v) => (ids = v.map((e) => e.id))"
+        @getList="getList()">
+        <el-table-column label="操作" slot="options" align="center" fixed="right" width="120">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+              <el-button type="text" @click="deleteById(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'ApplyList',
+    label: '网格员管理',
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+    },
+    data() {
+      return {
+        searchObj: {
+          name: "",
+          selectionDate: "",
+        },
+        page: {
+          current: 1,
+          size: 10,
+          total: 0,
+        },
+        goAdd: false,
+        tableData: [],
+        fileList: [],
+        ids: [],
+        detail: {},
+      };
+    },
+    created() {
+      this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
+      this.getList();
+    },
+    computed: {
+      colConfigs() {
+        let _ = this;
+        return [
+          {
+            type: "selection",
+          },
+          {
+            prop: "name",
+            label: "网格员姓名",
+          },
+          {
+            prop: "girdName",
+            align: "left",
+            label: "责任网格",
+          },
+          {
+            prop: "phone",
+            align: "center",
+            label: "联系电话",
+          }
+        ];
+      },
+    },
+    methods: {
+      getList() {
+        this.instance
+          .post("/app/appgirdmemberapply/list", null, {
+            params: {
+              ...this.searchObj,
+              ...this.page,
+            },
+          })
+          .then((res) => {
+            if (res.code == 0) {
+              this.tableData = res.data.records;
+              this.page.total = res.data.total;
+            }
+          });
+      },
+      deleteById(ids) {
+        ids &&
+          this.$confirm("是否要删除该网格员？", {
+            type: "error",
+          })
+            .then(() => {
+              this.instance
+                .post("/app/appgirdmemberapply/delete", null, {
+                  params: { ids },
+                })
+                .then((res) => {
+                  if (res?.code == 0) {
+                    this.$message.success("删除成功!");
+                    this.getList();
+                  }
+                });
+            })
+            .catch(() => {});
+      },
+      add (id) {
+        this.$emit('change', {
+          type: 'ApplyAdd',
+          params: {
+            id: id || ''
+          }
+        })
+      },
+
+      toDetail (id) {
+        this.$emit('change', {
+          type: 'ApplyDetail',
+          params: {
+            id
+          }
+        })
+      },
+
+      handleSelectionChange(val) {
+        this.ids = [];
+        val.map((e) => {
+          this.ids.push(e.id);
+        });
+      },
+      resetSearch() {
+        Object.keys(this.searchObj).map((e) => {
+          this.searchObj[e] = "";
+        });
+        this.getList();
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+</style>

project/grid/AppGridMember/components/Family.vue

@@ -0,0 +1,258 @@
+<template>
+  <ai-list class="Family">
+    <template slot="title">
+      <ai-title title="责任家庭" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="dialog=true">添加</el-button>
+          <el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
+          <el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable @change="getListInit()">
+            <el-option
+                v-for="(item,i) in girdList"
+                :key="i"
+                :label="item.girdName"
+                :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <template #right>
+          <el-input
+              v-model="search.name"
+              class="search-input"
+              size="small"
+              v-throttle="() => {search.current = 1, getList()}"
+              placeholder="姓名/身份证/联系方式"
+              clearable
+              @clear="search.current = 1, search.name = '', getList()"
+              suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          style="margin-top: 6px;"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @handleSelectionChange="handleSelectionChange"
+          @getList="getList">
+        <el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="remove(row.gmrId)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+          :visible.sync="dialog"
+          width="890px"
+          @close="closeDialog"
+          title="添加户主"
+          @onConfirm="onConfirm">
+        <el-form ref="DialogForm" size="small" label-width="0">
+          <el-form-item>
+            <ai-area-select clearable always-show :instance="instance" v-model="areaId" :disabled-level="disabledLevel"/>
+          </el-form-item>
+          <el-form-item label="网格：" required label-width="80px">
+            <el-select size="small" v-model="girdId" placeholder="请选择网格" clearable>
+              <el-option v-for="(item,i) in girdList" :key="i" :label="item.girdName" :value="item.id"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <ai-table-select :instance="instance" :action="`/app/appresident/list?householdName=1&areaId=${areaId}`"
+                             @select="v=>chooseUser=v"/>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'Family',
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object
+  },
+
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
+        name: '',
+        girdId: ''
+      },
+      isLoading: false,
+      form: {},
+      userList: [],
+      name: '',
+      chooseUser: [],
+      dialog: false,
+      total: 10,
+      colConfigs: [
+        {type: 'selection', label: ''},
+        {prop: 'name', label: '户主姓名', align: 'left', width: '200px'},
+        {prop: 'idNumber', label: '身份证号', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {prop: 'girdName', label: '所属网格', align: 'center'},
+        {prop: 'createTime', label: '添加时间', align: 'center'},
+        {slot: 'options', label: '操作', align: 'center'}
+      ],
+      tableData: [],
+      areaId: '',
+      ids: [],
+      disabledLevel: 0,
+      girdList: [],
+      girdId: '',
+    }
+  },
+
+  computed: {
+    ...mapState(['user'])
+  },
+
+  created() {
+    this.areaId = this.user.info.areaId
+    this.disabledLevel = this.user.info.areaList.length
+    this.dict.load('epidemicDangerousAreaLevel').then(() => {
+      this.getGirdList()
+      this.getList()
+      this.getUserList()
+    })
+  },
+
+  methods: {
+    getGirdList() {
+      this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
+        if (res.code == 0) {
+          this.girdList = res.data
+        }
+      })
+    },
+    getListInit() {
+      this.search.current = 1
+      this.getList()
+    },
+    getList() {
+      this.instance.post(`/app/appgirdmemberresident/listByGirdMember`, null, {
+        params: {
+          ...this.search,
+          girdMemberId: this.params.id,
+          areaId: this.areaId
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+
+    removeAll() {
+      if (!this.ids) {
+        return this.$message.error('请选择户主')
+      }
+      this.remove(this.ids.join(','))
+    },
+    handleSelectionChange(e) {
+      this.ids = e.map(v => v.gmrId)
+    },
+
+    clearAll() {
+      this.chooseUser = []
+    },
+
+    onConfirm() {
+      if (!this.girdId) {
+        return this.$message.error('请选择网格')
+      }
+
+      if (!this.chooseUser.length) {
+        return this.$message.error('请选择户主')
+      }
+
+      const residentList = this.chooseUser.map(v => {
+        return {
+          girdMemberId: this.params.id,
+          name: v.name,
+          residentId: v.id,
+          girdId: this.girdId
+        }
+      })
+      this.instance.post(`/app/appgirdmemberresident/add`, {
+        residentList
+      }).then(res => {
+        if (res.code == 0) {
+          this.current = 1
+          this.getList()
+          this.$message.success('添加成功')
+          this.closeDialog()
+        }
+      })
+    },
+    closeDialog() {
+      this.dialog = false
+      this.chooseUser = []
+      this.girdId = ''
+      this.name = ''
+      this.areaId = this.user.info.areaId
+      this.getUserList()
+    },
+
+    del(e) {
+      this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
+    },
+
+    getUserList() {
+      this.isLoading = true
+      this.instance.post(`/app/appresident/list`, null, {
+        params: {
+          current: 1,
+          size: 200,
+          con: this.name,
+          householdName: 1,
+          areaId: this.areaId,
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.userList = res.data.records
+        }
+
+        this.isLoading = false
+      })
+    },
+
+    onBack() {
+      this.$emit('change', {
+        type: 'list'
+      })
+    },
+
+    remove(id) {
+      this.$confirm('确定删除该数据？').then(() => {
+        this.instance.post(`/app/appgirdmemberresident/delete?ids=${id}`).then(res => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.Family {
+}
+</style>

project/grid/AppGridMember/components/MonitorUser.vue

@@ -0,0 +1,503 @@
+<template>
+  <ai-list class="Family">
+    <template slot="title">
+      <ai-title title="监测对象" isShowBack isShowBottomBorder @onBackClick="onBack"></ai-title>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="isShow = true">添加</el-button>
+          <el-button size="small" :disabled="!ids.length" icon="iconfont iconDelete" @click="removeAll">批量删除</el-button>
+          <el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable
+                     @change="getListInit()">
+            <el-option
+                v-for="(item,i) in girdList"
+                :key="i"
+                :label="item.girdName"
+                :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <template #right>
+          <el-input
+              v-model="search.name"
+              class="search-input"
+              size="small"
+              v-throttle="() => {search.current = 1, getList()}"
+              placeholder="姓名/身份证/联系方式"
+              clearable
+              @clear="search.current = 1, search.name = '', getList()"
+              suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+          :tableData="tableData"
+          :col-configs="colConfigs"
+          :total="total"
+          style="margin-top: 6px;"
+          :current.sync="search.current"
+          :size.sync="search.size"
+          @handleSelectionChange="handleSelectionChange"
+          @getList="getList">
+        <el-table-column slot="options" width="100px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="remove(row.gmpId)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+          :visible.sync="isShow"
+          width="890px"
+          @close="closeDialog"
+          title="添加户主"
+          @onConfirm="onConfirm">
+        <ai-area-select clearable always-show :instance="instance" v-model="areaId" :disabled-level="disabledLevel"
+                        @change="search.current = 1, getUserList()"></ai-area-select>
+        <span style="margin-top:16px;"><span style="color:#f46;margin-right:4px;">*</span>网格：</span>
+        <el-select size="small" style="width: 280px;margin-top:16px;" v-model="girdId" placeholder="请选择网格" clearable>
+          <el-option
+              v-for="(item,i) in girdList"
+              :key="i"
+              :label="item.girdName"
+              :value="item.id"
+          >
+          </el-option>
+        </el-select>
+        <div class="AiWechatSelecter-container">
+          <div class="AiWechatSelecter-container__left" v-loading="isLoading">
+            <div class="AiWechatSelecter-header">
+              <div class="AiWechatSelecter-header__left">
+                <h2>户主信息列表</h2>
+              </div>
+              <el-input
+                  class="search-input"
+                  size="mini"
+                  placeholder="请输入姓名/身份证号"
+                  v-model="name"
+                  clearable
+                  v-throttle="getUserList"
+                  @clear="name = '', getUserList()"
+                  suffix-icon="iconfont iconSearch">
+              </el-input>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <el-checkbox-group v-model="chooseUser">
+                <el-checkbox
+                    :label="`${item.name}~${item.id}`"
+                    v-for="(item, index) in userList"
+                    :key="index">
+                  {{ item.name }}-{{ item.idNumber }}
+                </el-checkbox>
+              </el-checkbox-group>
+              <AiEmpty v-if="!this.userList.length"></AiEmpty>
+            </el-scrollbar>
+          </div>
+          <div class="AiWechatSelecter-container__right">
+            <div class="AiWechatSelecter-header AiWechatSelecter-header__right">
+              <h2>已选择</h2>
+              <el-button size="mini" icon="el-icon-delete" @click="clearAll">清空</el-button>
+            </div>
+            <el-scrollbar class="AiWechatSelecter-list">
+              <div class="tags-wrapper">
+                <el-tag
+                    v-for="(item, index) in chooseUser"
+                    :key="index"
+                    closable
+                    @close="del(item)"
+                    size="small"
+                    type="info">
+                  {{ item.split('~')[0] }}
+                </el-tag>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: 'Family',
+
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object
+  },
+
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
+        name: '',
+        girdId: ''
+      },
+      isLoading: false,
+      form: {},
+      userList: [],
+      name: '',
+      chooseUser: [],
+      isShow: false,
+      total: 10,
+      colConfigs: [
+        {type: 'selection', label: ''},
+        {prop: 'name', label: '户主姓名', align: 'left', width: '200px'},
+        {prop: 'idNumber', label: '身份证号', align: 'center'},
+        {prop: 'phone', label: '联系方式', align: 'center'},
+        {prop: 'girdName', label: '所属网格', align: 'center'},
+        {prop: 'createTime', label: '添加时间', align: 'center'},
+        {slot: 'options', label: '操作', align: 'center'}
+      ],
+      tableData: [],
+      areaId: '',
+      ids: [],
+      disabledLevel: 0,
+      girdList: [],
+      girdId: '',
+    }
+  },
+
+  computed: {
+    ...mapState(['user'])
+  },
+
+  created() {
+    this.areaId = this.user.info.areaId
+    this.disabledLevel = this.user.info.areaList.length
+    this.dict.load('epidemicDangerousAreaLevel').then(() => {
+      this.getGirdList()
+      this.getList()
+      this.getUserList()
+    })
+  },
+
+  methods: {
+    getGirdList() {
+      this.instance.post(`/app/appgirdmemberinfo/queryMyGirdListByLevel2?girdMemberId=${this.params.id}`).then(res => {
+        if (res.code == 0) {
+          this.girdList = res.data
+        }
+      })
+    },
+    getListInit() {
+      this.search.current = 1
+      this.getList()
+    },
+    getList() {
+      this.instance.post(`/app/appgirdmemberpoverty/listByGirdMemberByWeb`, null, {
+        params: {
+          ...this.search,
+          girdMemberId: this.params.id,
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+
+    removeAll() {
+      if (!this.ids) {
+        return this.$message.error('请选择户主')
+      }
+      this.remove(this.ids.join(','))
+    },
+    handleSelectionChange(e) {
+      this.ids = e.map(v => v.gmpId)
+    },
+
+    clearAll() {
+      this.chooseUser = []
+    },
+
+    onConfirm() {
+      if (!this.girdId) {
+        return this.$message.error('请选择网格')
+      }
+
+      if (!this.chooseUser.length) {
+        return this.$message.error('请选择户主')
+      }
+
+      const povertyList = this.chooseUser.map(v => {
+        return {
+          girdMemberId: this.params.id,
+          name: v.split('~')[0],
+          girdId: this.girdId,
+          povertyId: v.split('~')[1]
+        }
+      })
+      this.instance.post(`/app/appgirdmemberpoverty/add`, {
+        povertyList
+      }).then(res => {
+        if (res.code == 0) {
+          this.current = 1
+          this.getList()
+          this.$message.success('添加成功')
+          this.closeDialog()
+        }
+      })
+    },
+    closeDialog() {
+      this.isShow = false
+      this.chooseUser = []
+      this.girdId = ''
+      this.name = ''
+      this.areaId = this.user.info.areaId
+      this.getUserList()
+    },
+
+    del(e) {
+      this.chooseUser.splice(this.chooseUser.indexOf(e), 1)
+    },
+
+    getUserList() {
+      this.isLoading = true
+      this.instance.post(`/app/apppreventionreturntopoverty/list`, null, {
+        params: {
+          current: 1,
+          size: 200,
+          con: this.name,
+          isHousehold: 1,
+          areaId: this.areaId
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.userList = res.data.records
+        }
+
+        this.isLoading = false
+      })
+    },
+
+    onBack() {
+      this.$emit('change', {
+        type: 'list'
+      })
+    },
+
+    remove(ids) {
+      this.$confirm('确定删除该数据？').then(() => {
+        this.instance.post(`/app/appgirdmemberpoverty/delete`, null, {
+          params: {ids}
+        }).then(res => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.Family {
+  .AiWechatSelecter-container {
+    display: flex;
+    height: 380px;
+    margin-top: 20px;
+
+    ::v-deep {
+      .el-icon-circle-close {
+        display: inline-block !important;
+      }
+    }
+
+    .tree-container {
+      & > span {
+        display: block;
+        margin-bottom: 4px;
+      }
+
+      .tree-user__item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      img {
+        width: 27px;
+        height: 27px;
+        margin-right: 10px;
+      }
+    }
+
+    ::v-deep .el-tree {
+      background: transparent;
+
+      .el-tree-node {
+        margin-bottom: 8px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .el-tree-node__content {
+        height: auto;
+        margin-top: 2px;
+        // align-items: inherit;
+      }
+
+      .el-tree-node__expand-icon {
+        height: 24px;
+      }
+    }
+
+    .mask-btn__wrapper {
+      position: relative;
+    }
+
+    .mask-btn {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+
+    .userlist-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      padding: 0 17px;
+      cursor: pointer;
+      user-select: none;
+
+      ::v-deep .el-checkbox__label {
+        display: none;
+      }
+
+      .userlist-item__left {
+        display: flex;
+        align-items: center;
+
+        span {
+          color: #222222;
+          font-size: 14px;
+        }
+
+        img {
+          width: 40px;
+          height: 40px;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    & > div {
+      width: 280px;
+      background: #FCFCFC;
+      border: 1px solid #D0D4DC;
+    }
+
+    .AiWechatSelecter-list {
+      height: calc(100% - 40px);
+      padding: 8px 0;
+
+      ::v-deep .el-scrollbar__wrap {
+        margin-bottom: 0 !important;
+        overflow-x: hidden;
+      }
+
+      ::v-deep .el-checkbox-group {
+        padding: 0 8px;
+
+        .el-checkbox {
+          display: block;
+          margin-right: 0;
+        }
+      }
+    }
+
+    .AiWechatSelecter-container__left {
+      flex: 1;
+    }
+
+    .AiWechatSelecter-container__right {
+      flex: 1;
+      margin-left: 20px;
+
+      .AiWechatSelecter-list {
+        .tags-wrapper {
+          padding: 0 8px;
+        }
+
+        .el-tag {
+          margin: 0 8px 8px 0px;
+          color: #222222;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .AiWechatSelecter-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding: 0 8px 0 0;
+      border-bottom: 1px solid #D0D4DC;
+      background: #F5F7FA;
+
+      .AiWechatSelecter-header__left {
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+
+        h2 {
+          height: 100%;
+          line-height: 40px;
+          color: #222222;
+          font-size: 14px;
+          text-align: center;
+          cursor: pointer;
+          border-bottom: 2px solid transparent;
+
+          &.active {
+            color: #2266FF;
+            border-color: #2266FF;
+          }
+        }
+      }
+
+      .el-button {
+        height: 28px;
+        padding: 7px 5px;
+      }
+
+      .el-input {
+        width: 160px;
+      }
+    }
+
+    .AiWechatSelecter-header__right {
+      padding: 0 8px;
+
+      h2 {
+        color: #222222;
+        font-size: 14px;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

project/grid/AppGridMember/components/add.vue

@@ -0,0 +1,543 @@
+<template>
+  <section style="height: 100%">
+    <ai-detail class="add">
+      <template #title>
+        <ai-title :title="title" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template #content>
+        <el-form
+          ref="rules"
+          :model="forms"
+          :rules="formRules"
+          size="small"
+          label-suffix="："
+          label-width="136px">
+          <ai-card title="基础信息" >
+            <template #right  v-if="title=='网格员详情'">
+              <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editOne==false" @click="editOne=true">修改</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="searchDetail(),editOne=false">取消</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editOne==true" @click="save()">保存</span>
+            </template>
+            <template slot="content">
+              <div class="above" v-if="editOne==true">
+                <div class="left">
+                  <el-form-item label="网格员姓名" prop="name" >
+                    <el-input v-model="forms.name" placeholder="请选择网格员" disabled>
+                      <template #append>
+                        <ai-wechat-selecter :isMultiple="false" refs="addTags" :instance="instance" v-model="users" @change="getSelectPerson">
+                          <el-button size="small" type="primary"><span style="color: #fff">选择成员</span></el-button>
+                        </ai-wechat-selecter>
+                      </template>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item label="选用日期" prop="selectionDate" >
+                    <el-date-picker
+                      v-model="forms.selectionDate"
+                      type="date"
+                      style="width: 100%"
+                      value-format="yyyy-MM-dd"
+                      size="medium"
+                      placeholder="选择日期">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="身份证号" prop="idNumber" >
+                      <el-input v-model="forms.idNumber" placeholder="请输入…" maxlength="18" show-word-limit></el-input>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="照片" prop="photo">
+                    <!-- <ai-uploader :instance="instance" v-model="photoList" :limit="1" @change="photoChange"></ai-uploader> -->
+                    <ai-avatar :instance="instance"  v-model="forms.photo"/>
+                  </el-form-item>
+                </div>
+              </div>
+              <div class="above" v-if="editOne==true">
+                <div class="left">
+                  <el-form-item label="出生日期" prop="birthday" >
+                    <el-date-picker
+                        v-model="forms.birthday"
+                        type="date"
+                        style="width: 100%"
+                        value-format="yyyy-MM-dd"
+                        size="medium"
+                        placeholder="选择日期">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="联系电话" prop="phone" >
+                    <el-input v-model.number="forms.phone" placeholder="请输入…" maxlength="11" show-word-limit></el-input>
+                  </el-form-item>
+                </div>
+                <div class="right">
+                  <el-form-item label="性别" prop="sex" >
+                    <el-select size="medium" style="width: 100%" v-model="forms.sex" placeholder="请选择..." clearable>
+                      <el-option
+                        v-for="(item,i) in dict.getDict('sex')"
+                        :key="i"
+                        :label="item.dictName"
+                        :value="item.dictValue"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="电子邮箱" prop="mail" >
+                      <el-input v-model="forms.mail" placeholder="请输入…"></el-input>
+                  </el-form-item>
+                </div>
+              </div>
+              <template  v-if="editOne==false">
+                <div class="above">
+                  <div class="left">
+                    <ai-wrapper label-width="120px"  :columnsNumber="1"  style="margin-top: 16px;">
+                      <ai-info-item label="网格员姓名："><span >{{forms.name}}</span></ai-info-item>
+                      <ai-info-item label="选用日期："><span >{{forms.selectionDate}}</span></ai-info-item>
+                      <ai-info-item label="身份证号："><span >{{forms.idNumber}}</span></ai-info-item>
+                      <ai-info-item label="性别："><span >{{dict.getLabel('sex', forms.sex)}}</span></ai-info-item>
+                      <ai-info-item label="出生日期："><span >{{forms.birthday}}</span></ai-info-item>
+                      <ai-info-item label="电子邮箱："><span >{{forms.mail}}</span></ai-info-item>
+                    </ai-wrapper>
+                  </div>
+                  <div class="right">
+                    <ai-wrapper label-width="120px"  :columnsNumber="1"  style="margin-top: 16px;">
+                      <ai-info-item label="照片：" v-if="forms.photo">
+                        <span >
+                          <ai-uploader :instance="instance" v-model="photoList" disabled :limit="1" @change="photoChange"></ai-uploader>
+                        </span>
+                      </ai-info-item>
+                      <ai-info-item label="联系电话："><span >{{forms.phone}}</span></ai-info-item>
+                    </ai-wrapper>
+                  </div>
+                </div>
+              </template>
+            </template>
+          </ai-card>
+          <ai-card title="关联信息" >
+            <template #right  v-if="title=='网格员详情'">
+              <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="editTwo==false" @click="editTwo=true">修改</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="searchDetail(),editTwo=false">取消</span>
+              <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="editTwo==true" @click="save()">保存</span>
+            </template>
+            <template slot="content">
+              <template v-if="editTwo==true">
+                <el-form-item label="责任网格" prop="girdInfoList" style="margin-top: 8px;">
+                  <el-form-item style="width: 100%" label-width="80px" :label="'网格' + (index + 1)" v-for="(item, index) in forms.girdInfoList" :key="'选项' + (index + 1)">
+                    <div class="form-flex">
+                      <el-select v-model="item.checkType" placeholder="请选择网格角色">
+                        <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                        </el-option>
+                      </el-select>
+                      <el-input disabled v-model="item.girdName" :maxlength="200" size="small" placeholder="请选择责任网格">
+                        <template slot="append">
+                          <el-button size="small" @click="currIndex = index, showGrid = true">选择网格</el-button>
+                        </template>
+                      </el-input>
+                      <el-button type="danger" size="small" @click="removeGrid(index)">删除</el-button>
+                    </div>
+                  </el-form-item>
+                  <el-button type="primary" size="small" @click="addGrid">添加选项</el-button>
+                  <!-- <el-button size="small" @click="showGrid=true">选择网格</el-button> -->
+                </el-form-item>
+                <div class="above">
+                  <div class="left">
+                    <el-form-item label="是否特殊网格员" prop="isGirdMember" >
+                      <el-radio-group v-model="forms.isGirdMember">
+                        <el-radio label="0">否</el-radio>
+                        <el-radio label="1">是</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="政治面貌" prop="politicsStatus" >
+                      <el-select v-model="forms.politicsStatus" size="small" style="width: 100%" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('politicsStatus')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                  <div class="right">
+                    <el-form-item label="特殊网格员" prop="girdMemberType" v-if="forms.isGirdMember==1">
+                      <el-select v-model="forms.girdMemberType" size="small" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('girdMemberType')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="学历" prop="education" >
+                      <el-select v-model="forms.education" style="width: 100%" size="small" placeholder="请选择..." clearable>
+                        <el-option v-for="(item,i) in dict.getDict('education')" :key="i" :label="item.dictName" :value="item.dictValue"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                </div>
+                <el-form-item label="个人简介" prop="introduction" >
+                  <el-input
+                    type="textarea"
+                    maxlength="200"
+                    show-word-limit
+                    :rows="4"
+                    placeholder="请输入内容"
+                    v-model="forms.introduction">
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="人生格言" prop="motto" >
+                  <el-input
+                    type="textarea"
+                    maxlength="200"
+                    show-word-limit
+                    :rows="4"
+                    placeholder="请输入内容"
+                    v-model="forms.motto">
+                  </el-input>
+                </el-form-item>
+              </template>
+              <template v-if="editTwo==false">
+                <ai-wrapper label-width="120px" :columnsNumber="2" style="margin-top: 16px;">
+                  <ai-info-item label="责任网格：" style="width: 100%;"><span v-html="girdInfoStr || '-'"></span></ai-info-item>
+                  <ai-info-item label="是否特殊网格员：">
+                    <span>{{ !forms.isGirdMember ? '-' : forms.isGirdMember === '0' ? '否' : '是' }}</span>
+                  </ai-info-item>
+                  <ai-info-item label="特殊网格员：" v-if="forms.isGirdMember==1"><span >{{dict.getLabel('girdMemberType', forms.girdMemberType)}}</span></ai-info-item>
+                  <ai-info-item label="政治面貌："><span >{{dict.getLabel('politicsStatus', forms.politicsStatus)}}</span></ai-info-item>
+                  <ai-info-item label="学历："><span >{{dict.getLabel('education', forms.education)}}</span></ai-info-item>
+                  <ai-info-item label="人生格言：" style="width: 100%;"><span >{{forms.motto}}</span></ai-info-item>
+                  <ai-info-item label="个人简介：" style="width: 100%;"><span >{{forms.introduction}}</span></ai-info-item>
+                </ai-wrapper>
+              </template>
+            </template>
+          </ai-card>
+        </el-form>
+        <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true"  :destroyOnClose="true" border  width="720px">
+          <div class="grid">
+            <el-tree
+              :data="treeObj.treeList"
+              :props="treeObj.defaultProps"
+              node-key="id"
+              ref="tree"
+              :check-strictly="true"
+              show-checkbox
+              :default-checked-keys="currCheckedKeys"
+              default-expand-all
+              @check="onCheckChange">
+            </el-tree>
+          </div>
+          <div class="dialog-footer" slot="footer" >
+            <el-button  size="medium" @click="showGrid=false">取消</el-button>
+            <el-button  type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
+          </div>
+        </ai-dialog>
+      </template>
+      <template #footer v-if="title=='添加网格员'">
+        <el-button @click="cancel(false)" class="delete-btn footer-btn" >取 消</el-button>
+        <el-button type="primary" @click="save()"  class="footer-btn">提 交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "add",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    params: Object,
+  },
+  data() {
+    return {
+      users: [],
+      currIndex: 0,
+      forms: {
+        birthday: "",
+        education: "",
+        girdId: "",
+        girdInfoList: [],
+        girdMemberType: "",
+        id: "",
+        wxUserId: '',
+        introduction: "",
+        isGirdMember: "",
+        mail: "",
+        motto: "",
+        name: "",
+        phone: "",
+        photo: "",
+        politicsStatus: "",
+        selectionDate: "",
+        sex: "",
+        userId: "",
+      },
+      options: [{
+        value: '2',
+        label: '网格长'
+      }, {
+        value: '1',
+        label: '网格员'
+      }],
+      showGrid: false,
+      treeObj: {
+        treeList: [],
+        defaultProps: {
+          children: "girdList",
+          label: "girdName",
+        },
+        checkedKeys: [],
+      },
+      girdInfoStr: '',
+      photoList: [],
+      title: "添加网格员",
+      editOne: false,
+      editTwo: false,
+    };
+  },
+  created() {
+    this.beforeSelectTree()
+    if (this.params.id) {
+      this.searchDetail();
+      this.title = "网格员详情";
+      this.editOne = false;
+      this.editTwo = false;
+    } else {
+      this.title = "添加网格员";
+      this.editOne = true;
+      this.editTwo = true;
+    }
+  },
+  computed: {
+    currCheckedKeys () {
+      if (this.forms && this.forms.girdInfoList && this.forms.girdInfoList[this.currIndex] && this.forms.girdInfoList[this.currIndex].id) {
+        return [this.forms.girdInfoList[this.currIndex].id]
+      }
+
+      return []
+    },
+    formRules() {
+      let phonePass = (rule, value, callback) => {
+        let reg = /^(?:(?:\+|00)86)?1\d{10}$/;
+        if (value) {
+          if (reg.test(value)) {
+            callback();
+          } else {
+            callback(new Error("联系电话格式错误"));
+          }
+        } else {
+          callback(new Error("请输入联系电话"));
+        }
+      };
+      return {
+        name: [
+          { required: true, message: "请输入网格员姓名", trigger: "change" },
+        ],
+        selectionDate: [
+          { required: true, message: "请选择选用日期", trigger: "change" },
+        ],
+        phone: [{ required: true, validator: phonePass, trigger: "blur" }],
+        girdInfoList: [
+          { required: true, message: "请选择责任网络", trigger: "change" },
+        ],
+        mail: [
+          {
+            type: "email",
+            message: "请输入正确的邮箱地址",
+            trigger: ["blur", "change"],
+          },
+        ]
+      };
+    },
+  },
+  methods: {
+    cancel (isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+
+    onCheckChange (e) {
+      this.$nextTick(() => {
+        this.$refs.tree.getCheckedKeys().forEach(v => {
+          this.$refs.tree.setChecked(v, false)
+        })
+        this.$refs.tree.setChecked(e.id, true)
+      })
+    },
+
+    removeGrid (index) {
+      this.forms.girdInfoList.splice(index, 1)
+    },
+
+    addGrid () {
+      this.forms.girdInfoList.push({
+        id: '',
+        girdName: '',
+        checkType: ''
+      })
+    },
+    photoChange(val) {
+      this.forms.photo = val[0].url;
+    },
+    getSelectPerson(val) {
+      this.forms.name = val[0].name;
+      this.forms.phone = val[0].phone;
+      this.forms.userId = val[0].sysUserId
+      this.forms.wxUserId = val[0].id
+    },
+    getCheckedTree() {
+      if (!this.$refs.tree.getCheckedNodes().length) {
+        return this.$message.error('请选择网格')
+      }
+
+      if (this.$refs.tree.getCheckedNodes().length > 1) {
+        return this.$message.error('不支持多选')
+      }
+      this.$set(this.forms.girdInfoList, this.currIndex, {
+        ...this.$refs.tree.getCheckedNodes()[0],
+        checkType: this.forms.girdInfoList[this.currIndex].checkType
+      })
+      this.showGrid = false;
+    },
+    handleClose(tag) {
+      this.forms.girdInfoList.splice(this.forms.girdInfoList.indexOf(tag), 1);
+    },
+    beforeSelectTree() {
+      this.treeObj.checkedKeys = [];
+      this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
+        if (res.code == 0) {
+          this.treeObj.treeList = res.data;
+          this.forms.girdInfoList.map((e) => {
+            this.treeObj.checkedKeys.push(e.id);
+          });
+        }
+      });
+    },
+    save() {
+      this.$refs["rules"].validate((valid) => {
+        if (valid) {
+          for (let i = 0; i < this.forms.girdInfoList.length; i++) {
+            const currInfo = this.forms.girdInfoList[i]
+            const arr = JSON.parse(JSON.stringify(this.forms.girdInfoList))
+            arr.splice(i, 1)
+            const sameInfo = arr.filter(v => v.id === currInfo.id)
+            if (!currInfo.checkType) {
+              return this.$message.error('请选择网格员类型')
+            }
+
+            if (!currInfo.id) {
+              return this.$message.error('请选择网格')
+            }
+
+            if (currInfo.checkType === '1' && currInfo.girdLevel !== '2') {
+              return this.$message.error(`一级、二级网格不能添加网格员`)
+            }
+
+            if (sameInfo.length) {
+              return this.$message.error('不能选择同一网格重复绑定')
+            }
+          }
+
+          this.instance.post(`/app/appgirdmemberinfo/addOrUpdate`,{
+            ...this.forms,
+            girdInfoListStr: this.forms.girdInfoList.map(v => v.girdName).join(',')
+          }).then((res) => {
+            if (res.code == 0) {
+              if (this.title == "添加网格员") {
+                this.cancel(true)
+              } else {
+                this.editOne = false
+                this.editTwo = false
+                this.searchDetail()
+              }
+            }
+          });
+        } else {
+          return false
+        }
+      });
+    },
+    searchDetail() {
+      this.instance
+        .post(`/app/appgirdmemberinfo/queryDetailById`, null, {
+          params: { id: this.params.id },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.forms = {
+              ...res.data,
+              girdInfoList: res.data.girdInfoList || []
+            };
+            this.users = [{
+              name: res.data.name,
+              phone: res.data.phone,
+              userId: res.data.id,
+              id: res.data.wxUserId
+            }]
+            this.girdInfoStr = ''
+            this.photoList = [{ url: this.forms.photo }];
+            if (res.data.girdInfoList) {
+              res.data.girdInfoList.forEach((e) => {
+                this.girdInfoStr = this.girdInfoStr + `${e.checkType === '1' ? '网格员' : '网格长'}-${e.girdName}&emsp;`
+              })
+            }
+          }
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+
+    .form-flex {
+      display: flex;
+      align-items: center;
+
+      & > .el-button {
+        margin-left: 20px;
+      }
+
+      .el-input {
+        width: 300px;
+        margin-left: 20px;
+      }
+
+      ::v-deep .el-form-item__content {
+        margin-left: 0!important;
+      }
+    }
+  .ai-detail__title {
+    background-color: #fff;
+  }
+  .ai-detail__content {
+    .ai-detail__content--wrapper {
+      .el-form {
+        // background-color: #fff;
+        // padding: 0 60px;
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .el-form-item {
+            width: 48%;
+          }
+          .buildingTypes {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+  ::v-deep .el-tag {
+    margin-right: 8px;
+    color: #333333;
+  }
+  .footer-btn {
+    width: 92px;
+  }
+  .above{
+    display: flex;
+    .left, .right{
+      flex: 1;
+    }
+  }
+}
+</style>

project/grid/AppGridMember/components/list.vue

@@ -0,0 +1,206 @@
+<template>
+  <ai-list class="list" isTabs>
+    <template slot="content">
+      <ai-search-bar bottomBorder>
+        <template slot="left">
+          <el-date-picker
+            v-model="searchObj.selectionDate"
+            type="date"
+            @change="(page.current = 1), getList()"
+            value-format="yyyy-MM-dd"
+            size="small"
+            placeholder="选用时间">
+          </el-date-picker>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="searchObj.name"
+            size="small"
+            placeholder="网格员/责任网格"
+            v-throttle="() => {page.current = 1, getList()}"
+            clearable
+            @clear="(searchObj.name = '', page.current = 1), getList()"
+            suffix-icon="iconfont iconSearch" />
+        </template>
+      </ai-search-bar>
+      <ai-search-bar style="padding: 16px 0 0">
+        <template slot="left">
+          <el-button
+            icon="iconfont iconAdd"
+            type="primary"
+            size="small"
+            @click="add('')"
+            >添加</el-button
+          >
+          <el-button
+            icon="iconfont iconDelete"
+            @click="deleteById(ids.join(','))"
+            :disabled="!Boolean(ids.length)"
+            >删除</el-button
+          >
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="page.total"
+        ref="aitableex"
+        :current.sync="page.current"
+        :size.sync="page.size"
+        @selection-change="(v) => (ids = v.map((e) => e.id))"
+        @getList="getList()">
+        <el-table-column label="操作" slot="options" align="center" fixed="right" width="220">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toFamily(row.id)">责任家庭</el-button>
+              <el-button type="text" @click="toMonitorUser(row.id)" v-if="permissions('girdmemberpovertyconfig')">监测对象</el-button>
+              <el-button type="text" @click="add(row.id)">详情</el-button>
+              <el-button type="text" @click="deleteById(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+export default {
+  name: "List",
+  label: "网格员管理",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  data() {
+    return {
+      searchObj: {
+        name: "",
+        selectionDate: "",
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0,
+      },
+      goAdd: false,
+      tableData: [],
+      fileList: [],
+      ids: [],
+      detail: {},
+    };
+  },
+  created() {
+    this.dict.load("sex", "girdMemberType", "politicsStatus", "education");
+    this.getList();
+  },
+  computed: {
+    colConfigs() {
+      let _ = this;
+      return [
+        {
+          type: "selection",
+        },
+        {
+          prop: "name",
+          label: "网格员姓名",
+        },
+        {
+          prop: "girdInfoListStr",
+          align: "center",
+          label: "责任网格",
+        },
+        {
+          prop: "phone",
+          align: "center",
+          label: "联系电话",
+        },
+        {
+          prop: "selectionDate",
+          align: "center",
+          label: "选用时间",
+        },
+      ];
+    },
+  },
+  methods: {
+    getList() {
+      this.instance
+        .post("/app/appgirdmemberinfo/list", null, {
+          params: {
+            ...this.searchObj,
+            ...this.page,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.tableData = res.data.records;
+            this.page.total = res.data.total;
+          }
+        });
+    },
+    deleteById(ids) {
+      ids &&
+        this.$confirm("是否要删除该网格员？", {
+          type: "error",
+        })
+          .then(() => {
+            this.instance
+              .post("/app/appgirdmemberinfo/delete", null, {
+                params: { ids },
+              })
+              .then((res) => {
+                if (res?.code == 0) {
+                  this.$message.success("删除成功!");
+                  this.getList();
+                }
+              });
+          })
+          .catch(() => {});
+    },
+    add(id) {
+      this.$emit('change', {
+        type: 'Add',
+        params: {
+          id: id || ''
+        }
+      })
+    },
+
+    toMonitorUser (id) {
+      this.$emit('change', {
+        type: 'MonitorUser',
+        params: {
+          id
+        }
+      })
+    },
+
+    toFamily (id) {
+      this.$emit('change', {
+        type: 'Family',
+        params: {
+          id
+        }
+      })
+    },
+
+    handleSelectionChange(val) {
+      this.ids = [];
+      val.map((e) => {
+        this.ids.push(e.id);
+      });
+    },
+    resetSearch() {
+      Object.keys(this.searchObj).map((e) => {
+        this.searchObj[e] = "";
+      });
+      this.getList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

project/grid/AppHomesteadManagement/AppHomesteadManagement.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="AppHomesteadManagement">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import List from './components/List'
+import Add from './components/Add'
+
+export default {
+  label: '宅基地管理',
+  name: 'AppHomesteadManagement',
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+
+  data() {
+    return {
+      component: 'List',
+      params: {},
+      include: [],
+    }
+  },
+
+  components: {
+    Add,
+    List,
+  },
+  methods: {
+    onChange(data) {
+      if (data.type === 'add') {
+        this.component = 'Add'
+        this.params = data.params
+      }
+
+      if (data.type == 'list') {
+        this.component = 'List'
+        this.params = data.params
+
+        this.$nextTick(() => {
+          if (data.isRefresh) {
+            this.$refs.component.getList()
+          }
+        })
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.AppHomesteadManagement {
+  height: 100%;
+  background: #f3f6f9;
+  overflow: auto;
+}
+</style>

project/grid/AppHomesteadManagement/components/Add.vue

@@ -0,0 +1,475 @@
+<template>
+  <section style="height: 100%" class="AppHomesteadManagement">
+    <ai-detail class="Add">
+      <!-- 返回按钮 -->
+      <template #title>
+        <ai-title :title="isEdit ? '编辑宅基地信息' : '添加宅基地'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template #content>
+        <el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
+          <ai-card title="户主信息" >
+            <template slot="content">
+              <div class="flex">
+                <el-form-item label="姓名" prop="name">
+                  <el-input size="small" class="user-selecter" v-model="formData.name" placeholder="请输入" clearable>
+                    <template slot="append">
+                      <ai-person-select :instance="instance" @selectPerson="checkName">
+                      </ai-person-select>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="身份证号码" prop="idNumber">
+                  <ai-id size="small" v-model="formData.idNumber" @change="IdCard(formData.idNumber)"/>
+                </el-form-item>
+                <el-form-item label="性别" prop="sex">
+                  <ai-select v-model="formData.sex" placeholder="请选择" :selectList="dict.getDict('sex')" disabled />
+                </el-form-item>
+                <el-form-item label="年龄" prop="age">
+                  <el-input size="small" v-model="formData.age" placeholder="请输入" clearable disabled></el-input>
+                </el-form-item>
+                <el-form-item label="联系电话">
+                  <el-input size="small" v-model="formData.phone" placeholder="请输入" clearable :maxlength="20"></el-input>
+                </el-form-item>
+              </div>
+              <el-form-item label="所属村" prop="areaId">
+                <ai-area-get :instance="instance" v-model="formData.areaId" :name.sync="formData.areaName" />
+              </el-form-item>
+            </template>
+          </ai-card>
+          <ai-card title="宅基地情况" >
+            <template slot="content">
+              <div class="flex">
+                <el-form-item label="宅基地面积">
+                  <el-input size="small" v-model="formData.homesteadArea" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">m²</template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="房基占地面积">
+                  <el-input size="small" v-model="formData.houseArea" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">m²</template>
+                  </el-input>
+                </el-form-item>
+              </div>
+              <el-form-item label="宅基地地址">
+                <el-input size="small" v-model="formData.homesteadAddress" placeholder="请输入" clearable maxlength="20"></el-input>
+              </el-form-item>
+              <div class="flex">
+                <el-form-item label="四至-东至">
+                  <el-input size="small" v-model="formData.eastTo" placeholder="请输入" clearable maxlength="20"></el-input>
+                </el-form-item>
+                <el-form-item label="四至-南至">
+                  <el-input size="small" v-model="formData.southTo" placeholder="请输入" clearable maxlength="20"></el-input>
+                </el-form-item>
+                <el-form-item label="四至-西至">
+                  <el-input size="small" v-model="formData.westTo" placeholder="请输入" clearable maxlength="20"></el-input>
+                </el-form-item>
+                <el-form-item label="四至-北至">
+                  <el-input size="small" v-model="formData.northTo" placeholder="请输入" clearable maxlength="20"></el-input>
+                </el-form-item>
+              </div>
+              <el-form-item label="地类" class="buildingTypes">
+                <el-radio-group v-model="formData.landType">
+                  <el-radio :label="item.dictValue" v-for="(item, index) in dict.getDict('homesteadLandType')" :key="index">{{item.dictName}}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="性质" class="buildingTypes">
+                <el-radio-group v-model="formData.houseType">
+                  <el-radio :label="item.dictValue" v-for="(item, index) in dict.getDict('homesteadHouseType')" :key="index">{{item.dictName}}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <div class="flex">
+                <el-form-item label="住宅建筑面积">
+                  <el-input size="small" v-model="formData.liveBuildingArea" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">m²</template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="建筑层数">
+                  <el-input size="small" v-model="formData.buildingFloorNumber" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">层</template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="建筑高度">
+                  <el-input size="small" v-model="formData.buildingHeight" placeholder="请输入" clearable maxlength="10">
+                    <template slot="append">m</template>
+                  </el-input>
+                </el-form-item>
+              </div>
+            </template>
+          </ai-card>
+          <ai-card title="位置信息" >
+            <template slot="content">
+              <div class="flex">
+                <el-form-item label="楼栋经度">
+                  <el-input size="small" v-model="formData.lng" placeholder="请输入" clearable maxlength="10"></el-input>
+                </el-form-item>
+                <el-form-item label="楼栋纬度">
+                  <el-input size="small" v-model="formData.lat" placeholder="请输入" clearable maxlength="10"></el-input>
+                </el-form-item>
+              </div>
+              <el-form-item label="地图位置">
+                <el-button @click="showMap = true">地图标绘</el-button>
+              </el-form-item>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <!-- 底部按钮 -->
+      <template #footer>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm()">提交</el-button>
+      </template>
+    </ai-detail>
+    <ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
+      <div id="map"></div>
+      <el-form label-width="80px" style="padding: 10px 20px 0 20px;">
+        <el-row type="flex" justify="space-between">
+          <el-form-item label="经度">
+            <el-input disabled size="small" v-model="placeDetail.lng"></el-input>
+          </el-form-item>
+          <el-form-item label="纬度">
+            <el-input disabled size="small" v-model="placeDetail.lat"></el-input>
+          </el-form-item>
+        </el-row>
+      </el-form>
+      <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
+        <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
+      </el-input>
+      <div id="searchPlaceOutput" />
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import AMapLoader from '@amap/amap-jsapi-loader'
+
+export default {
+  name: 'Add',
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+  data() {
+    return {
+      formData: {
+        name: '',
+        idNumber: '',
+        age: '',
+        sex: '',
+        phone: '',
+        areaId: '',
+        homesteadArea: '',
+        houseArea: '',
+        homesteadAddress: '',
+        eastTo: '',
+        southTo: '',
+        westTo: '',
+        northTo: '',
+        landType: '0',
+        houseType: '0',
+        liveBuildingArea: '',
+        buildingFloorNumber: '',
+        buildingHeight: '',
+        lng: '',
+        lat: '',
+        id: '',
+        areaName: ''
+      },
+      formRules: {
+        name: [
+          { required: true, message: '请选择人员', trigger: 'change' },
+        ],
+        age: [
+          { required: true, message: '请输入年龄', trigger: 'change' },
+        ],
+        sex: [
+          { required: true, message: '请选择性别', trigger: 'change' },
+        ],
+        idNumber: [
+          { required: true, message: '请输入身份证号码', trigger: 'change' },
+        ],
+        areaId: [
+          { required: true, message: '请选择所属村', trigger: 'change' },
+        ]
+      },
+      map: null,
+      placeDetail: {
+        lng: '',
+        lat: '',
+      },
+      showMap: false,
+      searchPlace: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+
+    isEdit() {
+      return !!this.params.id
+    },
+  },
+  mounted() {
+    this.dict.load('homesteadLocationStatus', 'homesteadHouseType', 'homesteadLandType', 'sex').then(() => {
+      if(this.params.id) {
+        this.getListinfo()
+      }
+    })
+
+  },
+  methods: {
+    checkName(e) {
+      this.formData.name = e.name
+      this.formData.idNumber = e.idNumber
+      this.formData.phone = e.phone
+      this.formData.areaId = e.householdAreaId
+    },
+    IdCard(UUserCard) {
+      if (UUserCard) {
+        let arr = [];
+        if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
+          arr.push("1");
+        } else {
+          arr.push("0");
+        }
+
+        const myDate = new Date();
+        const month = myDate.getMonth() + 1;
+        const day = myDate.getDate();
+        let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
+        if (
+            UUserCard.substring(10, 12) < month ||
+            (UUserCard.substring(10, 12) == month &&
+                UUserCard.substring(12, 14) <= day)
+        ) {
+          age++;
+        }
+        arr.push(age);
+        this.formData.sex = arr[0];
+        this.formData.age = arr[1];
+      }
+    },
+    decimalInput(name) {
+      if(!/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/g.test(this.formData[name])){
+        this.formData[name] = ''
+        return this.$message.error('最多只保留两位小数点')
+      }
+    },
+    numberInput(name) {
+      if(!/^[1-9]\d*|0$/g.test(this.formData[name])){
+        this.formData[name] = ''
+        return this.$message.error('请输入正整数')
+      }
+    },
+    selectMap() {
+      this.formData.lng = this.placeDetail.lng
+      this.formData.lat = this.placeDetail.lat
+      this.showMap = false
+    },
+    getCorpLocation() {
+      this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => {
+        if (res.code == 0) {
+          this.initMap(res.data)
+        }
+      })
+    },
+    initMap({ lng, lat }) {
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0',
+        plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+      }).then((AMap) => {
+        this.placeDetail.lng = this.formData.lng
+        this.placeDetail.lat = this.formData.lat
+        this.map = new AMap.Map('map', {
+          resizeEnable: true,
+          zooms: [6, 20],
+          center: [lng, lat],
+          zoom: 11,
+        })
+        this.placeSearch = new AMap.PlaceSearch({ map: this.map })
+        new AMap.AutoComplete({
+          input: 'searchPlaceInput',
+          output: 'searchPlaceOutput',
+        }).on('select', (e) => {
+          if (e?.poi) {
+            this.placeSearch.setCity(e.poi.adcode)
+            this.movePosition(e.poi.location)
+          }
+        })
+        this.map.on('click', (e) => {
+          new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
+            if (res?.regeocode) {
+              this.placeDetail = {
+                lng: e.lnglat?.lng,
+                lat: e.lnglat?.lat,
+                address: res.regeocode.formattedAddress,
+              }
+            }
+          })
+          this.movePosition(e.lnglat)
+        })
+      })
+    },
+
+    movePosition(center) {
+      if (this.map) {
+        this.map.clearMap()
+        this.map.panTo(center)
+        this.map.add([
+          new AMap.Marker({
+            position: center,
+            clickable: true,
+          }),
+        ])
+        this.map.setFitView()
+      }
+    },
+
+    getListinfo() {
+      return this.instance
+        .post('/app/apphomesteadinfo/queryDetailById', null, {
+          params: {
+            id: this.params.id,
+          },
+        })
+        .then((res) => {
+          if (res.data) {
+            this.formData = res.data
+          }
+        })
+    },
+
+    confirm() {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          this.instance
+            .post(`/app/apphomesteadinfo/addOrUpdate`, {
+              ...this.formData,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 1000)
+              }
+            })
+        }
+      })
+    },
+
+    // 返回按钮
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+  },
+  watch: {
+    communityNameContent: {
+      deep: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .AppHomesteadManagement {
+    ::v-deep .amap-logo {
+      display: none!important;
+    }
+    ::v-deep .amap-copyright {
+      display: none!important;
+    }
+  }
+
+.Add {
+  height: 100%;
+  .ai-detail__title {
+    background-color: #fff;
+  }
+  .ai-detail__content {
+    .ai-detail__content--wrapper {
+      .el-form {
+        // background-color: #fff;
+        // padding: 0 60px;
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .el-form-item {
+            width: 48%;
+          }
+          .buildingTypes {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .user-selecter {
+    ::v-deep .el-input-group__append {
+      width: 68px;
+      background: transparent;
+    }
+
+    ::v-deep .el-button {
+      color: #fff;
+
+      &:hover {
+        opacity: 0.8;
+        background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
+      }
+    }
+  }
+}
+
+::v-deep .mapDialog {
+  .el-dialog__body {
+    padding: 0;
+
+    .ai-dialog__content {
+      padding: 0;
+    }
+
+    .ai-dialog__content--wrapper {
+      padding: 0 !important;
+      position: relative;
+    }
+
+    #map {
+      width: 100%;
+      height: 420px;
+    }
+
+    .searchPlaceInput {
+      position: absolute;
+      width: 250px;
+      top: 30px;
+      left: 25px;
+    }
+
+    #searchPlaceOutput {
+      position: absolute;
+      width: 250px;
+      left: 25px;
+      height: initial;
+      top: 80px;
+      background: white;
+      z-index: 250;
+      max-height: 300px;
+      overflow-y: auto;
+
+      .auto-item {
+        text-align: left;
+        font-size: 14px;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>

project/grid/AppHomesteadManagement/components/List.vue

@@ -0,0 +1,204 @@
+<template>
+  <section class="AppPetitionManage">
+    <ai-list>
+      <!-- 标题 -->
+      <ai-title slot="title" title="宅基地管理" isShowBottomBorder  isShowArea v-model="areaId" :instance="instance" @change="page.current=1,getList()"/>
+      <template #content>
+        <ai-search-bar bottomBorder>
+          <template slot="left">
+            <!-- 定位状态 -->
+            <ai-select v-model="search.locationStatus" placeholder="定位状态" clearable :selectList="$dict.getDict('homesteadLocationStatus')" @change=";(page.current = 1), getList()"></ai-select>
+          </template>
+
+          <!-- 搜索 -->
+          <template slot="right">
+            <el-input v-model="search.name" size="small"
+              v-throttle="() => {page.current = 1, getList()}" placeholder="户主/联系电话" clearable @clear=";(page.current = 1), (search.name = ''), getList()" suffix-icon="iconfont iconSearch" />
+          </template>
+        </ai-search-bar>
+
+        <ai-search-bar class="ai-search-ba mar-t10">
+          <template slot="left">
+            <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')">添加 </el-button>
+            <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
+          </template>
+
+          <!-- 导入导出 -->
+          <template #right>
+            <ai-import :instance="instance" :dict="dict" type="apphomesteadinfo" :importParams="{ areaId: user.info && user.info.areaId }" name="宅基地管理" @success="getList()">
+              <el-button icon="iconfont iconImport">导入</el-button>
+            </ai-import>
+            <ai-download :instance="instance" url="/app/apphomesteadinfo/export" :params="param" fileName="宅基地管理模板" :disabled="tableData.length == 0">
+              <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
+            </ai-download>
+          </template>
+        </ai-search-bar>
+
+        <ai-table :tableData="tableData" :col-configs="colConfigs" :total="total" ref="aitableex" :current.sync="page.current" :size.sync="page.size" @getList="getList" @selection-change="(v) => (ids = v.map((e) => e.id))">
+          <el-table-column slot="locationStatus" label="定位状态" align="center">
+            <template slot-scope="{ row }">
+              <span style="color:red" v-if="row.locationStatus == 0">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
+              <span style="color:green" v-if="row.locationStatus == 1">{{ dict.getLabel('homesteadLocationStatus', row.locationStatus) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column slot="options" label="操作" align="center" width="180" fixed="right">
+            <template slot-scope="{ row }">
+              <el-button type="text" @click="onAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+  </section>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'List',
+  props: {
+    dict: Object,
+    instance: Function,
+    params: Object,
+  },
+
+  data() {
+    return {
+      isAdd: false,
+      page: {
+        current: 1,
+        size: 10,
+      },
+      total: 0,
+      search: {
+        locationStatus: '',
+        name: '',
+      },
+      id: '',
+      ids: [],
+      colConfigs: [
+        { type: 'selection', width: 100,  align: 'center'},
+        {
+          prop: 'areaName',
+          label: '村/社区',
+        },
+        {
+          prop: 'name',
+          label: '户主',
+          align: 'center',
+        },
+        { prop: 'phone', label: '联系电话', align: 'center' },
+        {
+          prop: 'sex',
+          label: '性别',
+          width: '100',
+          align: 'center',
+          render: (h, { row }) => {
+            return h('span', null, this.dict.getLabel('sex', row.sex))
+          },
+        },
+        { prop: 'age', label: '年龄', align: 'center' },
+        {
+          prop: 'idNumber',
+          label: '身份证号',
+          align: 'center',
+        },
+        { prop: 'liveBuildingArea', label: '建筑面积(m²)', align: 'center',width: 120 },
+        {
+          slot: 'locationStatus'
+        },
+        {
+          slot: 'options',
+          label: '操作',
+          align: 'center',
+        },
+      ],
+      tableData: [],
+      areaId: '',
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    param() {
+      return {
+        ...this.search,
+        areaId: this.user.info?.areaId,
+        ids: this.ids,
+      }
+    },
+  },
+
+  mounted() {
+    this.areaId = this.user.info.areaId
+    this.dict.load('homesteadLocationStatus', 'homesteadHouseType', 'homesteadLandType', 'sex').then(() => {
+      this.getList()
+    })
+  },
+
+  methods: {
+    getList() {
+      this.instance
+        .post(`/app/apphomesteadinfo/list`, null, {
+          params: {
+            ...this.page,
+            ...this.search,
+            areaId: this.areaId,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            if(res.data.records.length) {
+              res.data.records.map((item) => {
+                item.idNumber = item.idNumber.substring(0,10) +  '****' + item.idNumber.substring(13,17)
+              })
+            }
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+    },
+
+    // 添加
+    onAdd(id) {
+      this.$emit('change', {
+        type: 'add',
+        params: {
+          id: id || '',
+          areaId: this.areaId,
+        },
+      })
+    },
+
+    // 删除
+    remove(id) {
+      this.$confirm('确定删除该数据?').then(() => {
+        this.instance.post(`/app/apphomesteadinfo/delete?ids=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      })
+    },
+
+    removeAll() {
+      var id = this.ids.join(',')
+      this.remove(id)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppPetitionManage {
+  height: 100%;
+  .mar-t10{
+    margin-top: 10px;
+  }
+}
+</style>

project/grid/AppHouseMap/buildingStatistics.vue

@@ -0,0 +1,443 @@
+<template>
+  <section class="buildingStatistics">
+    <ai-title v-if="!isFormDv" title="楼栋统计" isShowBack isShowBottomBorder @onBackClick="$router.push({query:{}}),$parent.info={},$parent.isShowInfo=false,$parent.house=null,$parent.chooseBuildId='',$parent.showStatistics=false, $parent.type='0'"/>
+    <div class="buildingPane">
+      <div class="bgItem tree"/>
+        <div class="building">
+          <template v-if="floorRooms.length>0">
+            <div class="buildingSignboard">{{ `${currentBuilding.buildingNumber}栋 ${unitNumber}单元` }}
+            </div>
+            <el-scrollbar class="floors">
+              <div class="floor" v-for="(fl,j) in floorRooms" :key="j">
+                <div class="room" v-for="(op,i) in fl" :key="op.id" @click="handleSelectRoom(op,$event)" @touchstart="handleSelectRoom(op,$event)" :class="[{none:op.livingNumber==0,selected:selected.houseCode==op.houseCode},handleTipsHighlight(op.tips)]">
+                  {{ op.houseCode }}
+                  <div v-if="op.livingNumber==0">无人</div>
+                  <div v-show="op.id==selected.id" class="detail" @click.stop :style="{left:position.x,top:position.y}">
+                    <el-row class="popupHeader" type="flex" justify="space-between" align="middle">
+                      <span>{{selected.houseCode}}详情</span>
+                      <ai-icon icon="iconClean" @click.native.stop="selected={}"/>
+                    </el-row>
+                    <div class="family-member">
+                      <h2>房主信息</h2>
+                      <div v-for="(item,index) in selected.owner" :key="item.id">
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>{{item.name}}</label>
+                          </div>
+                          <span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
+                        </div>
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>联系方式</label>
+                          </div>
+                          <span style="color: #2266FF;">{{item.phone}}</span>
+                        </div>
+                      </div>
+
+                      <h2>承租人信息</h2>
+                      <div v-for="(item,index) in selected.renter" :key="item.id">
+                        <div class="family-member__item" >
+                          <div class="member-left">
+                            <label>{{item.name}}</label>
+                          </div>
+                          <span style="color: #2266FF">{{root.dict.getLabel("houseLivingType",item.livingType)}}</span>
+                        </div>
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>联系方式</label>
+                          </div>
+                          <span>{{item.phone}}</span>
+                        </div>
+                      </div>
+
+                      <h2>实际居住人员</h2>
+                      <div v-for="(item,index) in selected.live" :key="item.id">
+                        <div class="family-member__item">
+                          <div class="member-left">
+                            <label>{{item.name}}</label>
+                          </div>
+                          <span>{{root.dict.getLabel("householdRelation",item.relation)}}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </template>
+          <ai-empty v-else>请在【<b>小区总览</b>】中选取【楼栋单元】</ai-empty>
+          <div class="bottom"/>
+        </div>
+      <building-tool-bar></building-tool-bar>
+    </div>
+  </section>
+</template>
+
+<script>
+import BuildingToolBar from "./buildingToolBar";
+
+export default {
+  name: "buildingStatistics",
+  components: {BuildingToolBar},
+  inject: ['root'],
+  provide() {
+    return {
+      sta: this
+    }
+  },
+  props: {
+    instance: Function,
+    dict: Object,
+    isFormDv: Boolean,
+    query: Object
+  },
+  data() {
+    return {
+      rooms: [],
+      selected: {},
+      currentBuilding: {},
+      unitNumber:1,
+      tips: [],
+      position:{
+        x:"",
+        y:""
+      },
+    }
+  },
+  computed: {
+    floorRooms() {
+      let obj = {}
+      this.rooms.map(e => {
+        e.none = e.isNone == 0
+        return obj[e.layerNumber]?.push(e) || (obj[e.layerNumber] = [e])
+      })
+      return Object.values(obj).reverse()
+    }
+  },
+  created() {
+    this.dict.load('householdRelation', 'residentTipType',"houseLivingType")
+    if (this.isFormDv && this.query.buildingId) {
+      this.getRoomsByBuilding(this.query.buildingId, this.query.unitNum)
+      this.currentBuilding = { buildingNumber: this.query.buildingNumber}
+      this.unitNumber = this.query.unitNum
+
+      return false
+    }
+    this.getRoomsByBuilding(this.$route.query?.buildingId,this.$route.query?.unitNum)
+    this.currentBuilding = {buildingNumber: this.$route.query?.buildingNumber};
+    this.unitNumber = this.$route.query?.unitNum;
+  },
+  methods: {
+    handleSelectRoom(room, e) {
+      console.log(e)
+      if (room.livingNumber>0) {
+        this.$nextTick(()=>{
+          this.position.x = e.pageX + 40 + "px"
+          this.position.y = e.pageY + "px"
+          this.selected = room;
+          this.$forceUpdate()
+        })
+        // this.getRoomDetail(room.id)
+      }
+    },
+    selectedBuilding(building,unitNumber) {
+      this.selected = {}
+      this.tips = []
+      this.$router.push({query: {...this.$route.query, buildingId: building.id,unitNum:unitNumber}}).catch(e=>{e})
+      this.currentBuilding = building
+      this.unitNumber = unitNumber
+      this.getRoomsByBuilding(building.id,unitNumber)
+    },
+    getRoomsByBuilding(buildingId,unitNumber) {
+      this.root.instance.post("/app/appcommunityhouseinfo/list", null, {
+        params: {
+          unitNumber,
+          buildingId,
+          size: 999
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.rooms = res.data.records
+        }
+      })
+    },
+    getRoomDetail(id) {
+      return this.root.instance.post("/app/appcommunityhouseinfo/queryDetailById", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          let {residents} = res.data
+          this.selected = {
+            ...this.selected, ...res.data,
+            residents: residents.map(e => {
+              let {tips} = e
+              //显示为户主
+              let relationLabel = e.householdName == 1 ? "户主" : this.root.dict.getLabel("householdRelation", e.householdRelation)
+              return {...e, tips: tips ? tips.split("|") : [], relationLabel}
+            }
+            )
+          }
+        }
+      })
+    },
+    handleTipsHighlight(tip) {
+      let flag = this.tips.length > 0 && !this.tips.some(t => tip?.split("|").includes(t))
+      return flag ? 'tipsHighlight' : ''
+    },
+    selectedTips(tips) {
+      this.tips = tips
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingStatistics {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  ::v-deep .ailist-title{
+    margin: 0 20px;
+  }
+
+  .family-member {
+    & > h2 {
+      height: 32px;
+      line-height: 32px;
+      margin: 0;
+      padding: 0 12px;
+      color: #333333;
+      font-size: 12px;
+      font-weight: 700;
+      text-align: left;
+      background: #E3E8F1;
+    }
+
+    .family-member__item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 32px;
+      padding: 0 12px;
+      background: #F3F6F9;
+
+      .member-left {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      &:nth-of-type(2n) {
+        background: #fff;
+      }
+
+      label {
+        font-weight: normal !important;
+        color: #333;
+        font-size: 12px;
+      }
+
+      & > span {
+        color: #666666;
+        font-size: 12px;
+      }
+    }
+
+    &:last-child {
+      label {
+        color: #666666;
+        font-weight: normal !important;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .buildingPane {
+    background-image: url("https://cdn.cunwuyun.cn/buildSta/cloud.png"), linear-gradient(3deg, #FFFFFF 0%, #3093FF 100%);
+    background-repeat: no-repeat;
+    background-position: 227px 43px, 100%;
+    background-size: 788px 112px, 100%;
+    position: relative;
+    box-sizing: border-box;
+    padding-right: 400px;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+
+    .bgItem {
+      position: absolute;
+      background-repeat: no-repeat;
+      pointer-events: none;
+
+      &.tree {
+        left: calc(50% - 200px);
+        transform: translateX(-50%);
+        bottom: 0;
+        width: 580px;
+        height: 71px;
+        background-image: url("https://cdn.cunwuyun.cn/buildSta/tree.png");
+        z-index: 3;
+      }
+    }
+
+    .building {
+      margin-left: 60px;
+      flex-shrink: 0;
+      height: auto;
+      width: auto;
+      box-sizing: border-box;
+      padding: 136px 0 0;
+      background-image: url("https://cdn.cunwuyun.cn/buildSta/roof.png"),
+      url("https://cdn.cunwuyun.cn/buildSta/chimney.png");
+      background-position: 0 121px, 70px 91px;
+      background-size: 100% 105px, 70px;
+      background-repeat: no-repeat;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: center;
+      border-bottom: 10px solid #E9C28E;
+
+      .buildingSignboard {
+        padding-top: 41px;
+        width: 200px;
+        height: 65px;
+        text-align: center;
+        background-image: url("https://cdn.cunwuyun.cn/buildSta/buildingSignboard.png");
+        background-repeat: no-repeat;
+        box-sizing: border-box;
+        font-size: 12px;
+        font-weight: bold;
+        color: #1D3296;
+        margin-bottom: 15px;
+      }
+
+      .ai-empty {
+        background: #FFECD9;
+        margin: 90px 20px 0;
+        padding: 0 10px 90px;
+        font-size: 14px;
+        color: #666;
+
+        b {
+          color: #26f
+        }
+      }
+
+      .bottom {
+        background: #FFECD9;
+        height: 50px;
+        width: calc(100% - 40px);
+      }
+    }
+
+    ::v-deep .floors {
+      max-height: 520px;
+
+      .el-scrollbar__wrap {
+        overflow-x: hidden;
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .floor {
+      margin: 0 20px;
+      height: 105px;
+      flex-shrink: 0;
+      max-width: calc(100% - 40px);
+      display: flex;
+      align-items: center;
+      background-image: url("https://cdn.cunwuyun.cn/buildSta/floor.png");
+      background-size: 100% 105px;
+      padding: 0 30px;
+      box-sizing: border-box;
+      gap: 20px;
+
+      .room {
+        width: 60px;
+        height: 72px;
+        background-image: url("https://cdn.cunwuyun.cn/buildSta/room.png");
+        text-align: center;
+        padding-top: 20px;
+        box-sizing: border-box;
+        font-size: 14px;
+        font-weight: bold;
+        color: #FFFFFF;
+        cursor: pointer;
+        position: relative;
+
+        .detail {
+          position: fixed;
+          width: 320px;
+          background: #fff;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+          border-radius: 4px;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          z-index: 11;
+          transform: translateY(-100%);
+
+          .popupHeader {
+            background: #D42222;
+            padding: 0 12px;
+            height: 32px;
+
+            .AiIcon {
+              width: 16px;
+              height: 16px;
+            }
+          }
+
+          li {
+            list-style-type: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 12px;
+            font-size: 12px;
+            color: #333;
+            height: 32px;
+
+            & > div {
+
+            }
+
+            &.title {
+              background: #E3E8F1;
+            }
+
+            &.stretch {
+              background: #F3F6F9;
+            }
+          }
+        }
+
+        &.none {
+          cursor: not-allowed;
+          color: #f46;
+          background-image: url("https://cdn.cunwuyun.cn/buildSta/roomNone.png");
+        }
+
+        &.selected {
+          background-image: url("https://cdn.cunwuyun.cn/buildSta/roomSelected.png");
+        }
+      }
+    }
+
+    .buildingToolBar {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+    }
+  }
+
+  .tipsHighlight {
+    opacity: 0.6;
+  }
+}
+</style>

project/grid/AppHouseMap/buildingToolBar.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="buildingToolBar">
+    <div class="toolBar">
+      <div class="nav" v-for="(op,i) in navs" :key="i" :class="{selected:i==active}" @click="active=i">
+        <ai-icon :icon="op.icon"/>
+        <div>{{ op.name }}</div>
+      </div>
+    </div>
+    <component :is="currentNav.comp" class="toolPane"/>
+  </section>
+</template>
+
+<script>
+import BuildingInfo from "./toolBar/buildingInfo";
+import CommunityOverview from "./toolBar/communityOverview";
+// import NearbyGCS from "./toolBar/nearbyGCS";
+import RecentEvents from "./toolBar/recentEvents";
+
+export default {
+  name: "buildingToolBar",
+  components: {RecentEvents, CommunityOverview, BuildingInfo},
+  computed: {
+    navs() {
+      return [
+        {icon: 'icondanweiguanli', name: "单元统计", comp: BuildingInfo},
+        {icon: 'icondanweiguanli', name: "单元切换", comp: CommunityOverview},
+        // {icon: 'icondanweiguanli', name: "网格员", comp: NearbyGCS},
+        // {icon: 'icondanweiguanli', name: "近期事件", comp: RecentEvents},
+      ]
+    },
+    currentNav() {
+      return this.navs[this.active]
+    }
+  },
+  data() {
+    return {
+      active: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingToolBar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .toolBar {
+    height: 40px;
+    background: #FFFFFF;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    padding: 4px;
+    width: 400px;
+    display: flex;
+    gap: 8px;
+    box-sizing: border-box;
+    align-self: flex-end;
+
+    .nav {
+      flex: 1;
+      height: 32px;
+      color: #3A3A3A;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      cursor: pointer;
+
+      .AiIcon {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+      }
+
+      &:hover {
+        color: #2266FF;
+      }
+
+      &.selected {
+        background: #E4F0FF;
+        color: #2266FF;
+      }
+    }
+  }
+
+  .toolPane {
+    background: #FFFFFF;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+}
+</style>

project/grid/AppHouseMap/toolBar/buildingInfo.vue

@@ -0,0 +1,239 @@
+<template>
+  <section class="buildingInfo">
+    <ai-title title="人口信息"/>
+    <div class="infoPane">
+      <div class="staZone">
+        <div v-for="(value, name) in staData" :key="name">
+          <b>{{ value }}</b>
+          <span>{{ name }}</span>
+        </div>
+      </div>
+    </div>
+    <ai-title title="房屋信息"/>
+    <div class="infoPane">
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>所属社区</span>
+        <span>{{build.areaName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>所属小区</span>
+        <span>{{build.communityName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>房屋类型</span>
+        <span>{{root.dict.getLabel("communityBuildingType",build.buildingType)}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>楼长姓名</span>
+        <span>{{build.managerName}}</span>
+      </el-row>
+      <el-row type="flex" justify="space-between" class="info-item">
+        <span>联系方式</span>
+        <span>{{build.managerPhone}}</span>
+      </el-row>
+    </div>
+  </section>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "buildingInfo",
+  inject: ['root', 'sta'],
+  computed: {
+    chartData() {
+      return this.root.dict.getDict("residentTipType").map(e => ({
+        name: e.dictName,
+        key: e.dictValue,
+        color: e.dictColor,
+        v1: 0
+      }))
+    },
+    colConfigs() {
+      return [
+        {prop:"areaName",label:"所属社区"}
+      ];
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      staData: {},
+      tag:{},
+      color:{},
+      build:{},
+    }
+  },
+  methods: {
+    initChart(data) {
+      this.chart = echarts.init(document.getElementById("PersonStaChart"))
+      let selected = {}, color = []
+      this.chartData.map(e => {
+        selected[e.name] = false
+        color.push(e.color)
+      })
+      this.chart.setOption({
+        grid: {top: 31, right: 0, height: 135},
+        tooltip: {},
+        legend: {
+          top: 185,
+          left: 0,
+          orient: "vertical",
+          selected,
+          itemWidth: 14,
+          itemHeight: 14,
+          itemGap: 12,
+          icon: "rect",
+          formatter: name => {
+            let item = data.find(e => this.root.dict.getLabel('residentTipType', e.name) == name)
+            return `{a|${name}}  {b|${item.v1}}`
+          },
+          textStyle: {
+            rich: {
+              a: {color: "#666", width: 123},
+              b: {color: "#333", fontWeight: 'bold', align: 'right'}
+            }
+          }
+        }, color,
+        yAxis: {type: 'value', min: 0, minInterval: 1, axisTick: false, axisLine: false, axisLabel: {color: "#666"}},
+        xAxis: {type: 'category', axisTick: false, axisLine: false, axisLabel: false},
+        series: data.map(e => ({
+          type: 'bar',
+          barWidth: 8,
+          barGap: '250%',
+          name: this.root.dict.getLabel('residentTipType', e.name)
+        }))
+      })
+      this.chart.on('legendselectchanged', ({selected}) => {
+        let tips = Object.keys(selected)?.filter(e => selected[e])?.map(e => this.root.dict.getValue('residentTipType', e))
+        this.sta?.selectedTips(tips)
+      })
+      this.getChartData(data)
+    },
+    getChartData(data) {
+      this.chart?.setOption({
+        series: data.map(e => ({data: [e.v1]}))
+      })
+    }
+  },
+  created(){
+    this.root.dict?.load("communityBuildingType")
+  },
+  mounted() {
+    this.root.instance.post("/app/appcommunitybuildinginfo/statistics", null, {
+      params: {
+        id: this.root.isFormDv ? this.root.info.id : this.$route.query.buildingId,
+        unitNum: this.root.isFormDv ? this.root.info.unitNumber : this.$route.query.unitNum,
+      }
+    }).then(res => {
+      if (res?.data) {
+        this.staData = res.data.unit;
+        this.tag = res.data.tag;
+        this.color = res.data.color;
+        this.build = res.data.build;
+        // this.root.dict.load('residentTipType').then(() => {
+        //   this.initChart(res.data.lx)
+        // })
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.buildingInfo {
+  ::v-deep .infoPane {
+    box-sizing: border-box;
+    padding: 10px 20px;
+
+    .info-item{
+      height: 32px;
+      box-sizing: border-box;
+      padding: 0 12px;
+      font-size: 12px;
+      color: #666666;
+      align-items: center;
+
+      span:last-child{
+        color: #333333;
+      }
+
+      &:nth-child(2n-1){
+        background-color: #F3F6F9;
+      }
+    }
+
+    .static-wrap{
+      width: 360px;
+      box-sizing: border-box;
+      padding-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+
+      .sta-item{
+        width: 46%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+
+        .sta-left{
+          display: flex;
+          align-items: center;
+          .tag{
+            width: 14px;
+            height: 14px;
+            background: #DC1739;
+            border-radius: 2px;
+            margin-right: 3px;
+          }
+          & > label{
+            font-size: 12px;
+            color: #666666;
+          }
+        }
+        .num{
+          font-size: 12px;
+          color: #333333;
+        }
+      }
+    }
+    .staZone {
+      height: 80px;
+      background: #F5F7F9;
+      border-radius: 4px;
+      overflow: hidden;
+      display: flex;
+
+      & > div {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        font-size: 12px;
+        color: #333;
+
+        b {
+          font-size: 24px;
+          font-family: DINAlternate-Bold, DINAlternate,serif;
+          color: #2266FF;
+          margin-bottom: 4px;
+        }
+      }
+
+
+    }
+
+    #PersonStaChart {
+      width: 100%;
+      height: 350px;
+    }
+  }
+}
+</style>

project/grid/AppHouseMap/toolBar/communityOverview.vue

@@ -0,0 +1,116 @@
+<template>
+  <section class="communityOverview">
+    <ai-title title="小区总览"/>
+    <div class="units" v-if="Object.keys(buildingUnits).length>0">
+      <div class="building" v-for="(value,name) in buildingUnits" :key="name">
+        <div class="unit" v-for="(op,j) in value" :key="j" @click="sta.selectedBuilding(op,j+1)"
+             :class="{selected:sta.unitNumber==j+1 && sta.currentBuilding.buildingNumber==name}">
+          <b>{{ name}}栋</b>
+          <div>{{ j+1 }}单元</div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty v-else>暂无楼栋信息,请进入【楼栋管理】添加</AiEmpty>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "communityOverview",
+  inject: ['root', 'sta'],
+  computed: {
+    buildingUnits() {
+      let obj = {}
+      this.units.map(e => {
+        for(let i=0;i<e.unitNumber;i++){
+          obj[e.buildingNumber]?.push(e) || (obj[e.buildingNumber] = [e])
+        }
+      })
+      return obj;
+    }
+  },
+  data() {
+    return {
+      units: []
+    }
+  },
+  methods: {
+    getUnits(communityId) {
+      this.root.instance.post("/app/appcommunitybuildinginfo/list", null, {
+        params: {
+          communityId,
+          size: 999
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.units = res.data.records
+        }
+      })
+    }
+  },
+  created() {
+    this.getUnits(this.root.isFormDv ? this.root.info.communityId : this.$route.query.communityId)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.communityOverview {
+  max-width: 400px;
+
+  .units {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 20px 20px;
+    align-items: flex-start;
+
+    .building {
+      display: flex;
+      align-items: center;
+      height: auto;
+      flex-wrap: wrap; 
+
+      .unit {
+        margin-right: 10px;
+        margin-bottom: 10px;
+
+        &:nth-of-type(5) {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .unit {
+      width: 64px;
+      height: 56px;
+      background: #F8FBFF;
+      border-radius: 2px 0 0 2px;
+      border: 1px solid #829CCF;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+
+      b {
+        color: #424242;
+      }
+
+      &.selected {
+        color: #fff;
+        background: #2266FF;
+
+        b {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .ai-empty {
+    height: 240px;
+  }
+}
+</style>

project/grid/AppHouseMap/toolBar/nearbyGCS.vue

@@ -0,0 +1,129 @@
+<template>
+  <section class="nearbyGCS">
+    <ai-title title="全部网格员"/>
+    <div class="radarPane">
+      <div class="radar">
+        <div class="indicator"/>
+      </div>
+      <div class="gcsItem" v-for="(op,i) in userList" :key="i" :style="op.style">
+        <i class="dot" :class="{offline:op.offline}"/>
+        <span>{{ op.name }}</span>
+        <ai-icon icon="iconIM"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "nearbyGCS",
+  inject: ['root', 'sta'],
+
+  data () {
+    return {
+      userList: []
+    }
+  },
+
+  mounted () {
+    this.getInfo()
+  },
+
+  methods: {
+    getInfo () {
+      this.root.instance.post('/app/appgirdmemberinfo/queryGirdMemberByBuilding', null, {
+        params: {buildingId: this.$route.query.buildingId}
+      }).then(res => {
+        if (res?.data) {
+          this.gcsList(res.data)
+        }
+      })
+    },
+
+    gcsList (data) {
+      this.userList = data.map(e => ({
+        ...e,
+        style: {
+          transform: `translate(
+        ${Math.round(160 * (Math.random() - 0.5))}px,
+        ${Math.round(160 * (Math.random() - 0.5))}px)`}
+      }))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nearbyGCS {
+  .radarPane {
+    width: 100%;
+    height: 360px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    .gcsItem {
+      position: absolute;
+      width: 92px;
+      height: 28px;
+      background: #FFFFFF;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+      border-radius: 16px;
+      font-size: 12px;
+      color: #333333;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 3;
+      gap: 8px;
+
+      .AiIcon {
+        width: 16px;
+        height: 16px;
+      }
+
+      .dot {
+        width: 4px;
+        height: 4px;
+        background: #30BC77;
+
+        &.offline {
+          background: #FF4466;
+        }
+      }
+    }
+  }
+
+  .radar {
+    width: 320px;
+    height: 320px;
+    position: relative;
+    border-radius: 50%;
+    overflow: hidden;
+    background-image: url("https://cdn.cunwuyun.cn/buildSta/radarBg.png");
+
+    .indicator {
+      position: absolute;
+      width: 160px;
+      height: 160px;
+      top: 0;
+      left: 0;
+      transform-origin: 100% 100%;
+      background: linear-gradient(190deg, rgba(162, 255, 182, 0.5) 0%, rgba(162, 255, 215, 0) 100%);
+      border-right: 1px solid #A2FFB6;
+      animation: radar 5s linear infinite;
+      z-index: 2;
+    }
+  }
+}
+
+@keyframes radar {
+  0% {
+    transform: rotate(0deg)
+  }
+  100% {
+    transform: rotate(360deg)
+  }
+}
+</style>

project/grid/AppHouseMap/toolBar/recentEvents.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="recentEvents">
+    <ai-title title="楼栋近期相关事件"/>
+    <div class="recentEvents-list">
+      <div class="recentEvents-item" v-for="(item, index) in 4" :key="index">
+        <div class="recentEvents-item__top">
+          <i>[已解决]</i>
+          <span>102室与402室矛盾纠纷</span>
+        </div>
+        <div class="recentEvents-item__middle">
+          <span>102室与402室矛盾纠纷</span>
+          <em>[张三]</em>
+          <span>接到了</span>
+          <em>[矛盾调解]</em>
+          <span>任务，事件目前</span>
+          <i>[已完成]</i>
+        </div>
+        <div class="recentEvent-item__bottom">2019-06-18 13:35:45</div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "recentEvents"
+}
+</script>
+
+<style lang="scss" scoped>
+.recentEvents {
+  font-size: 14px;
+  width: 100%;
+
+  .recentEvents-list {
+    .recentEvents-item {
+      border-bottom: 1px solid #E6E8EE;
+      background: transparent;
+      padding: 10px;
+      box-sizing: border-box;
+      .recentEvent-item__bottom {
+        color: #999;
+        font-size: 12px;
+      }
+
+      &:first-child {
+        background: #EFF6FF;
+        border-bottom: none;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .recentEvents-item__top {
+        display: flex;
+      }
+
+      .recentEvents-item__middle {
+        margin: 6px 0 10px;
+      }
+
+      span {
+        color: #666666;
+      }
+
+      em {
+        color: #2266FF;
+        font-style: normal;
+      }
+
+      i {
+        font-style: normal;
+        color: #2EA222;
+      }
+    }
+  }
+
+
+}
+</style>

vue.config.js

@@ -103,6 +103,14 @@ module.exports = {
           //地址重写
           '^/xsjr': '/'
         }
+      },
+      '/grid': {
+        target: 'http://192.168.1.87:12307',
+        changeOrigin: true,
+        pathRewrite: {
+          //地址重写
+          '^/grid': '/'
+        }
       }
     },
     disableHostCheck: true