diff --git a/src/assets/css/components/views/location/location.scss b/src/assets/css/components/views/location/location.scss
index 59b4afbd..62049f79 100644
--- a/src/assets/css/components/views/location/location.scss
+++ b/src/assets/css/components/views/location/location.scss
@@ -37,6 +37,10 @@ $color-highlight: #CC4444;
     }
   }
 
+  .follow-cursor {
+    cursor: pointer;
+  }
+
   svg {
     fill: $color-white;
   }
@@ -81,6 +85,19 @@ $color-highlight: #CC4444;
 
     .panel__time {
       display: flex;
+      .follow {
+        padding-left:6px;
+        padding-right:6px;
+      }
+      .divider {
+        display: flex;
+        align-items: center;
+        .el-divider--vertical {
+          height: 20px;
+          margin-left: 10px;
+          margin-right: 10px;
+        }
+      }
     }
   }
 
diff --git a/src/components/rightBox/location/MyFollowBox.vue b/src/components/rightBox/location/MyFollowBox.vue
new file mode 100644
index 00000000..efa6cf71
--- /dev/null
+++ b/src/components/rightBox/location/MyFollowBox.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="right-box">
+    <div class="right-box__header">
+      <div class="header__title">{{ $t('location.myFollow')}}</div>
+      <div class="header__operation">
+        <span @click="esc"><i class="cn-icon cn-icon-close"></i></span>
+      </div>
+    </div>
+    <cn-data-list
+            ref="dataList"
+            :tableId="tableId"
+            v-model:custom-table-title="tools.customTableTitle"
+            :api="url"
+    >
+      <template #top-tool-left>
+        <button id="cancleFollows" class="business-button business-button--light margin-r-10" style="width:fit-content;"
+                :disabled="disableCancle" @click="cancleFollowBatch">
+          <span>{{ $t('location.cancleFollow') }}</span>
+        </button>
+      </template>
+      <template #default>
+        <loading :loading="loading"></loading>
+        <my-follow-table
+                ref="dataTable"
+                :api="url"
+                :isNoData="isNoData"
+                :custom-table-title="tools.customTableTitle"
+                :table-data="tableData"
+                @reload="getTableData"
+                @selectionChange="selectionChange"
+                @handleFollow="handleFollow"
+        />
+      </template>
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { api } from '@/utils/api'
+import cnDataList from '@/components/table/CnDataList'
+import myFollowTable from '@/components/table/location/MyFollowTable'
+import dataListMixin from '@/mixins/data-list'
+
+export default {
+  name: 'MyFollowBox',
+  mixins: [dataListMixin],
+  props: {
+    timeFilter: {
+      type: Object
+    },
+    level: {
+      type: Number
+    }
+  },
+  components: {
+    cnDataList,
+    myFollowTable
+  },
+  data () {
+    return {
+      url:  api.location.followedSubscriber,
+      tableId: 'myFollowTable',
+      disableCancle: true
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    handleFollow(item) {
+      this.$emit('handleFollow', item)
+    },
+    getTableData () {
+      this.searchLabel = {
+        startTime: this.timeFilter.startTime,
+        endTime: this.timeFilter.endTime,
+        level: this.level,
+        ...this.pageObj
+      }
+      this.isNoData = false
+      this.toggleLoading(true)
+      delete this.searchLabel.total
+
+      axios.get(this.url, { params: this.searchLabel }).then(response => {
+        if (response.status === 200) {
+          for (let i = 0; i < response.data.data.list.length; i++) {
+            response.data.data.list[i].isFollowed = 1
+          }
+          this.tableData = response.data.data.list
+          this.pageObj.total = response.data.data.total
+        } else {
+          console.error(response.data)
+          this.isNoData = true
+          if (response.data.message) {
+            this.$message.error(response.data.message)
+          } else {
+            this.$message.error(this.$t('tip.somethingWentWrong'))
+          }
+        }
+      }).finally(() => {
+        this.toggleLoading(false)
+        this.isNoData = !this.tableData || this.tableData.length === 0
+      })
+    },
+    selectionChange (objs) {
+      this.batchDeleteObjs = []
+      objs.forEach(obj => {
+        const delObj = this.batchDeleteObjs.find(item => item.subscriberId === obj.subscriberId)
+        if (delObj === undefined) {// && obj.isFollowed === 1
+          this.batchDeleteObjs.push(obj)
+        }
+      })
+      this.disableCancle = this.batchDeleteObjs.length < 1
+    },
+    cancleFollowBatch() {
+      const ids = []
+      if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
+        this.batchDeleteObjs.forEach(item => {
+          ids.push(item.subscriberId)
+        })
+      }
+      this.toggleLoading(true)
+      axios.delete(api.location.follow + '?subscriberIds=' + ids.join(',')).then(response => {
+        if (response.status === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
+          this.batchDeleteObjs.forEach(item => {
+            item.isFollowed = 0
+          })
+        } else {
+          this.$message.error(response.data.message)
+        }
+      }).catch(e => {
+        this.$message.error(e.response.data.message)
+      }).finally(() => {
+        this.toggleLoading(false)
+        this.$emit('handleCancleFollowBatch', this.batchDeleteObjs)
+      })
+    },
+    /* 关闭弹框 */
+    esc () {
+      this.$emit('close')
+    }
+  }
+}
+</script>
diff --git a/src/components/table/location/MyFollowTable.vue b/src/components/table/location/MyFollowTable.vue
new file mode 100644
index 00000000..de8c031c
--- /dev/null
+++ b/src/components/table/location/MyFollowTable.vue
@@ -0,0 +1,144 @@
+<template>
+  <el-table
+    id="myFollowTable"
+    ref="dataTable"
+    :data="tableData"
+    tooltip-effect="light"
+    empty-text=" "
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      :selectable="(row) => { return row.isFollowed === 1 }"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitles"
+      :key="item.prop+index"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template #default="scope" :column="item">
+        <template v-if="item.prop === 'active'">
+          <template v-if="scope.row[item.prop] === 1">
+            {{$t('location.active')}}
+          </template>
+          <template v-else>
+            <span>{{$t('location.inactive')}}</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'ctime'">
+          <template v-if="scope.row[item.prop]">
+            {{dateFormatByAppearance(scope.row[item.prop]) || '-'}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'isFollowed'" >
+          <span class="follow-cursor" v-if="scope.row[item.prop] === 1" @click="cancleFollow(scope.row)"><i class="cn-icon cn-icon-follow-fill"></i></span>
+          <span class="follow-cursor" v-else @click="follow(scope.row)"><i class="cn-icon cn-icon-follow"></i></span>
+        </template>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
+      </template>
+    </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import axios from 'axios'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'myFollowTable',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'subscriberId',
+          show: true,
+          minWidth: 100
+        }, {
+          label: this.$t('location.phoneNumber'),
+          prop: 'subscriberDto.phoneNumber',
+          show: true,
+          minWidth: 150
+        }, {
+          label: this.$t('location.isActive'),
+          prop: 'active',
+          show: true,
+          minWidth: 80
+        }, {
+          label: this.$t('location.followTime'),
+          prop: 'ctime',
+          show: true,
+          minWidth: 150
+        }, {
+          label: this.$t('overall.option'),
+          prop: 'isFollowed',
+          show: true,
+          minWidth: 100
+        }
+      ]
+    }
+  },
+  methods: {
+    cancleFollow(item) {
+      axios.delete(api.location.follow + '?subscriberIds=' + item.subscriberId).then(res => {
+        if (res.status === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
+          /* 刷新列表 */
+          item.isFollowed = 0
+          this.$refs.dataTable.toggleRowSelection(item, false)
+          this.$emit('handleFollow', item)
+        } else {
+          this.$message.error(res.data.message)
+        }
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
+      })
+
+    },
+    follow(item) {
+      axios.post(api.location.follow, { subscriberIds: item.subscriberId }).then(async res => {
+        if (res.status === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.follow.success') })
+          /* 刷新列表 */
+          item.isFollowed = 1
+          this.$emit('handleFollow', item)
+        } else {
+          this.$message.error(res.data.message)
+        }
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue
index 6153d3d7..093523eb 100644
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -29,6 +29,8 @@
             @change="timeRefreshChange"
             :end-time="timeFilter.endTime"
         />
+        <div class="divider"><el-divider direction="vertical"></el-divider></div>
+        <el-button class="follow"  @click="add" ><i class="cn-icon cn-icon-follow"></i></el-button>
       </div>
     </div>
     <div class="geo-analysis__container">
@@ -343,6 +345,15 @@
         </template>
       </div>
     </div>
+    <el-drawer
+            v-model="rightBox.show"
+            direction="rtl"
+            class="common-right-box"
+            :size="700"
+            :with-header="false"
+            destroy-on-close>
+      <my-follow-box :timeFilter="timeFilter" :level="mapLevel" @close="closeRightBox" @handleFollow="handleFollow" @handleCancleFollowBatch="handleCancleFollowBatch"/>
+    </el-drawer>
   </div>
 </template>
 
@@ -365,6 +376,8 @@ import { api } from '@/utils/api'
 import { h3ToGeo, h3ToGeoBoundary } from 'h3-js'
 import TimeLine from '@/components/common/TimeLine.vue'
 import SimpleLoading from '@/components/common/SimpleLoading.vue'
+import MyFollowBox from '@/components/rightBox/location/MyFollowBox'
+import dataListMixin from '@/mixins/data-list'
 
 const humanSvg = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M366.689524 690.468571l87.283809 83.821715-75.434666 195.486476c-10.971429 27.794286-43.105524 42.081524-72.265143 32.036571-29.159619-10.24-44.080762-41.252571-33.450667-69.241904L366.689524 690.468571zM203.824762 476.306286l51.785143-95.183238a162.279619 162.279619 0 0 1 59.245714-59.977143c119.710476-68.266667 134.777905-67.291429 149.942857-66.218667l80.798476 5.168762c24.868571 0.975238 42.081524 7.314286 125.025524 124.14781a21.26019 21.26019 0 0 0 14.092191 8.289523l99.132952 14.482286c12.873143 1.852952 24.478476 8.582095 32.182857 18.67581a45.494857 45.494857 0 0 1 8.825905 35.108571 46.665143 46.665143 0 0 1-19.504762 30.866286 50.468571 50.468571 0 0 1-36.571429 8.435809l-99.181714-14.433524a119.954286 119.954286 0 0 1-79.774476-47.640381c-4.388571-6.241524-7.558095-11.361524-11.849143-16.579047l-63.634286 193.487238 88.405334 84.845714c12.970667 12.385524 23.698286 29.013333 30.232381 45.494857l67.876571 190.366477c5.022476 13.409524 4.193524 28.233143-2.291809 41.057523a54.613333 54.613333 0 0 1-32.182858 27.160381c-5.851429 2.048-12.092952 3.120762-18.383238 3.169524a58.075429 58.075429 0 0 1-53.930666-36.181333l-67.876572-190.366476c-1.024-2.096762-2.096762-3.120762-3.218285-5.168762L365.616762 623.177143a84.894476 84.894476 0 0 1-24.868572-80.700953l34.523429-146.919619c-3.413333 2.340571-7.070476 4.388571-10.776381 6.290286a58.806857 58.806857 0 0 0-22.674286 22.723048L290.133333 519.801905a49.834667 49.834667 0 0 1-43.105523 24.819809 59.977143 59.977143 0 0 1-22.674286-5.12 46.518857 46.518857 0 0 1-20.48-63.146666z m209.67619-360.448C420.08381 58.465524 473.86819 17.066667 533.650286 23.30819 593.383619 29.549714 636.537905 81.13981 630.00381 138.48381c-6.534095 57.392762-60.269714 98.840381-120.05181 92.550095-59.782095-6.241524-102.985143-57.782857-96.451048-115.175619z"></path></svg>'
 const baseStationSvg = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M164.901926 519.585185a391.35763 391.35763 0 0 1-30.151111-152.38637c0-52.527407 10.05037-105.054815 30.151111-152.348445 15.094519-47.29363 45.283556-89.353481 80.516741-126.103703L174.990222 15.17037C129.706667 62.464 94.511407 114.991407 69.328593 178.062222 44.183704 241.095111 34.133333 304.165926 34.133333 367.198815c0 63.070815 10.05037 131.375407 35.19526 189.174518 25.182815 57.799111 60.378074 115.598222 105.661629 162.891852l70.428445-73.576296c-35.233185-36.788148-65.422222-78.810074-80.516741-126.103704z" p-id="8786"></path><path d="M255.469037 477.563259c15.094519 36.788148 35.195259 68.266667 60.340148 94.549334l70.428445-73.576297a233.168593 233.168593 0 0 1-40.201482-57.761185c-5.044148-26.282667-10.088296-47.29363-10.088296-73.576296 0-26.244741 5.044148-47.29363 15.094518-68.266667 5.006222-26.282667 20.100741-42.097778 35.19526-63.070815l-70.428445-73.576296c-25.144889 26.282667-45.24563 57.799111-60.340148 94.587259-15.094519 36.788148-20.100741 73.576296-20.100741 110.364445 0 36.788148 5.006222 73.53837 20.100741 110.326518zM436.527407 367.198815c0 43.538963 33.792 78.810074 75.472593 78.810074s75.472593-35.271111 75.472593-78.810074c0-43.501037-33.792-78.810074-75.472593-78.810074s-75.472593 35.271111-75.472593 78.810074zM637.76237 498.574222l70.428445 73.576297c25.144889-26.282667 45.24563-57.837037 60.340148-94.58726 15.094519-36.788148 20.100741-73.576296 20.100741-110.364444 0-36.788148-5.006222-73.576296-20.100741-110.364445-15.094519-36.750222-35.195259-68.266667-60.340148-94.549333l-70.428445 73.576296c15.094519 15.739259 30.189037 36.788148 40.201482 57.799111 10.088296 21.010963 15.132444 47.29363 15.132444 68.266667 0 26.282667-5.044148 47.331556-15.094518 68.342519-10.05037 31.516444-25.144889 47.29363-40.239408 68.266666z" p-id="8787"></path><path d="M954.671407 178.062222C929.488593 114.991407 894.293333 62.464 849.009778 15.17037L778.619259 88.746667c35.233185 36.788148 60.378074 78.810074 80.516741 126.103703 20.100741 47.255704 30.151111 99.821037 30.151111 152.348445 0 52.565333-10.05037 105.092741-30.151111 152.38637-20.100741 47.29363-45.283556 89.315556-80.516741 126.103704l70.428445 73.576296c45.283556-47.29363 80.478815-99.858963 105.661629-162.891852 25.144889-63.070815 35.195259-126.103704 35.19526-189.174518 0-63.032889-10.05037-131.337481-35.19526-189.136593zM210.185481 1024h603.629038L512 551.10163 210.185481 1024z m186.102519-105.054815L512 740.238222l115.674074 178.631111h-231.348148z"></path></svg>'
@@ -373,6 +386,10 @@ export default {
   name: 'Location',
   data () {
     return {
+      url: api.location.followedSubscriber,
+      blankObject: { // 空白对象
+        id: ''
+      },
       tooltipType: {
         hexagon: 'hexagon',
         baseStation: 'base-station',
@@ -395,9 +412,11 @@ export default {
       preScrollTop: 0
     }
   },
+  mixins: [dataListMixin],
   components: {
     TimeLine,
-    SimpleLoading
+    SimpleLoading,
+    MyFollowBox
   },
   methods: {
     dateFormatByAppearance,
@@ -565,6 +584,7 @@ export default {
         this.loading.lineLoading = false
       }
     },
+    /*
     async queryFollowedList () {
       let params = {
         ...this.timeFilter,
@@ -587,7 +607,7 @@ export default {
       } finally {
         this.loading.subscriberLoading = false
       }
-    },
+    },*/
     async queryHexagon () {
       const params = {
         ...this.boundaryBox,
@@ -1419,8 +1439,48 @@ export default {
         this.loading.subscriberLoading = false
       }
     },
+    //针对我的关注列表的单条记录的关注和取消关注
+    async handleFollow(item) {
+      let subscriber = this.subscribersList.find(subscriber => subscriber.subscriberId === item.subscriberId)
+      if (subscriber) {
+        if (item.isFollowed === 1) {
+          /* 刷新右侧列表 */
+          subscriber.isFollowed = 1
+          // 刷新地图上的人
+          this.humanMarkers.forEach(marker => {
+            marker.remove && marker.remove()
+          })
+          this.humanMarkers = []
+          const mapFollowedSubscriberData = await this.queryMapFollowedSubscriber()
+          this.renderMarker(mapFollowedSubscriberData, this.tooltipType.human)
+        } else {
+          subscriber.isFollowed = 0
+          // 删除地图中对应的人
+          this.humanMarkers.forEach(marker => {
+            if (marker.subscriberId === subscriber.subscriberId) {
+              marker.remove()
+            }
+          })
+        }
+      }
+    },
+    //针对我的关注列表的批量取消关注操作
+    async handleCancleFollowBatch() {
+      this.closeRightBox()
+      this.curPageNum = 1
+      this.subscribersList = []
+      //刷新右下角列表
+      await this.initSubscriberList()
+      // 刷新地图上的人
+      this.humanMarkers.forEach(marker => {
+        marker.remove && marker.remove()
+      })
+      this.humanMarkers = []
+      const mapFollowedSubscriberData = await this.queryMapFollowedSubscriber()
+      this.renderMarker(mapFollowedSubscriberData, this.tooltipType.human)
+    },
     cancelFollowSubscribers (item) {
-      axios.delete(api.location.follow + '?subscriberId=' + item.subscriberId).then(res => {
+      axios.delete(api.location.follow + '?subscriberIds=' + item.subscriberId).then(res => {
         if (res.status === 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
           /* 刷新右侧列表 */
@@ -1440,7 +1500,7 @@ export default {
     },
     followSubscribers (item) {
       if (item.isFollowed === 1) {
-        axios.delete(api.location.follow + '?subscriberId=' + item.subscriberId).then(res => {
+        axios.delete(api.location.follow + '?subscriberIds=' + item.subscriberId).then(res => {
           if (res.status === 200) {
             this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancleFollow.success') })
             // 删除地图中对应的人
@@ -1458,7 +1518,7 @@ export default {
           this.$message.error(this.errorMsgHandler(e))
         })
       } else {
-        axios.post(api.location.follow, { subscriberId: item.subscriberId }).then(async res => {
+        axios.post(api.location.follow, { subscriberIds: item.subscriberId }).then(async res => {
           if (res.status === 200) {
             this.$message({ duration: 2000, type: 'success', message: this.$t('location.follow.success') })
             /* 刷新右侧列表 */